From 1a1746cf12e2c052a35a88049f3f26cfaad5b739 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 14 Jun 2023 15:04:20 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20refactor(PageComponent):=20add?=
 =?UTF-8?q?=20type=20prefix=20to=20new=20node=20IDs=20=F0=9F=94=A8=20refac?=
 =?UTF-8?q?tor(ExtraSidebarComponent):=20remove=20Separator=20component=20?=
 =?UTF-8?q?The=20PageComponent=20now=20generates=20new=20node=20IDs=20with?=
 =?UTF-8?q?=20a=20prefix=20that=20matches=20the=20type=20of=20the=20node.?=
 =?UTF-8?q?=20This=20improves=20the=20readability=20of=20the=20IDs=20and?=
 =?UTF-8?q?=20makes=20it=20easier=20to=20identify=20the=20type=20of=20node?=
 =?UTF-8?q?=20by=20looking=20at=20its=20ID.=20The=20ExtraSidebarComponent?=
 =?UTF-8?q?=20no=20longer=20uses=20the=20Separator=20component,=20as=20it?=
 =?UTF-8?q?=20is=20no=20longer=20needed.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/PageComponent/index.tsx        | 96 ++++++++++---------
 .../extraSidebarComponent/index.tsx           | 14 +--
 2 files changed, 53 insertions(+), 57 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index a9012ca68..1e85d2eb3 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -213,7 +213,9 @@ export default function Page({ flow }: { flow: FlowType }) {
       });
 
       // Generate a unique node ID
+      let { type } = data;
       let newId = getNodeId();
+      newId = `${type}_${newId}`;
       let newNode: NodeType;
 
       if (data.type !== "groupNode") {
@@ -317,53 +319,53 @@ export default function Page({ flow }: { flow: FlowType }) {
           <div className="w-full h-full" ref={reactFlowWrapper}>
             {Object.keys(templates).length > 0 &&
             Object.keys(types).length > 0 ? (
-                <div className="w-full h-full">
-                  <ReactFlow
-                    nodes={nodes}
-                    onMove={() => {
-                      updateFlow({
-                        ...flow,
-                        data: reactFlowInstance.toObject(),
-                      });
-                    }}
-                    edges={edges}
-                    onPaneClick={() => {
-                      setDisableCopyPaste(false);
-                    }}
-                    onPaneMouseLeave={() => {
-                      setDisableCopyPaste(true);
-                    }}
-                    onNodesChange={onNodesChange}
-                    onEdgesChange={onEdgesChangeMod}
-                    onConnect={onConnect}
-                    disableKeyboardA11y={true}
-                    onLoad={setReactFlowInstance}
-                    onInit={setReactFlowInstance}
-                    nodeTypes={nodeTypes}
-                    onEdgeUpdate={onEdgeUpdate}
-                    onEdgeUpdateStart={onEdgeUpdateStart}
-                    onEdgeUpdateEnd={onEdgeUpdateEnd}
-                    onNodeDragStart={onNodeDragStart}
-                    onSelectionDragStart={onSelectionDragStart}
-                    onSelectionEnd={onSelectionEnd}
-                    onSelectionStart={onSelectionStart}
-                    onEdgesDelete={onEdgesDelete}
-                    connectionLineComponent={ConnectionLineComponent}
-                    onDragOver={onDragOver}
-                    onDrop={onDrop}
-                    onNodesDelete={onDelete}
-                    onSelectionChange={onSelectionChange}
-                    nodesDraggable={!disableCopyPaste}
-                    panOnDrag={!disableCopyPaste}
-                    zoomOnDoubleClick={!disableCopyPaste}
-                    selectNodesOnDrag={false}
-                    className="theme-attribution"
-                  >
-                    <Background className="dark:bg-gray-900" />
-                    <Controls className="[&>button]:text-black  [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600"></Controls>
-                  </ReactFlow>
-                  <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
-                </div>
+              <div className="w-full h-full">
+                <ReactFlow
+                  nodes={nodes}
+                  onMove={() => {
+                    updateFlow({
+                      ...flow,
+                      data: reactFlowInstance.toObject(),
+                    });
+                  }}
+                  edges={edges}
+                  onPaneClick={() => {
+                    setDisableCopyPaste(false);
+                  }}
+                  onPaneMouseLeave={() => {
+                    setDisableCopyPaste(true);
+                  }}
+                  onNodesChange={onNodesChange}
+                  onEdgesChange={onEdgesChangeMod}
+                  onConnect={onConnect}
+                  disableKeyboardA11y={true}
+                  onLoad={setReactFlowInstance}
+                  onInit={setReactFlowInstance}
+                  nodeTypes={nodeTypes}
+                  onEdgeUpdate={onEdgeUpdate}
+                  onEdgeUpdateStart={onEdgeUpdateStart}
+                  onEdgeUpdateEnd={onEdgeUpdateEnd}
+                  onNodeDragStart={onNodeDragStart}
+                  onSelectionDragStart={onSelectionDragStart}
+                  onSelectionEnd={onSelectionEnd}
+                  onSelectionStart={onSelectionStart}
+                  onEdgesDelete={onEdgesDelete}
+                  connectionLineComponent={ConnectionLineComponent}
+                  onDragOver={onDragOver}
+                  onDrop={onDrop}
+                  onNodesDelete={onDelete}
+                  onSelectionChange={onSelectionChange}
+                  nodesDraggable={!disableCopyPaste}
+                  panOnDrag={!disableCopyPaste}
+                  zoomOnDoubleClick={!disableCopyPaste}
+                  selectNodesOnDrag={false}
+                  className="theme-attribution"
+                >
+                  <Background className="dark:bg-gray-900" />
+                  <Controls className="[&>button]:text-black  [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600"></Controls>
+                </ReactFlow>
+                <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
+              </div>
             ) : (
               <></>
             )}
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index fd8f23dbd..f445a9b5f 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -1,9 +1,4 @@
-import {
-  Bars2Icon,
-  PencilSquareIcon,
-  Square2StackIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
+import { Bars2Icon } from "@heroicons/react/24/outline";
 import DisclosureComponent from "../DisclosureComponent";
 import {
   classNames,
@@ -11,18 +6,17 @@ import {
   nodeIcons,
   nodeNames,
 } from "../../../../utils";
-import { useContext, useEffect, useState, useRef } from "react";
+import { useContext, useState } from "react";
 import { typesContext } from "../../../../contexts/typesContext";
 import { APIClassType, APIObjectType } from "../../../../types/api";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
-import { Code, Code2, FileDown, FileUp, Import, Save } from "lucide-react";
+import { Code2, FileDown, FileUp, Save } from "lucide-react";
 import { PopUpContext } from "../../../../contexts/popUpContext";
 import ImportModal from "../../../../modals/importModal";
 import ExportModal from "../../../../modals/exportModal";
 import ApiModal from "../../../../modals/ApiModal";
 import { TabsContext } from "../../../../contexts/tabsContext";
-import { Separator } from "../../../../components/ui/separator";
 import { alertContext } from "../../../../contexts/alertContext";
 import { updateFlowInDatabase } from "../../../../controllers/API";
 import { INPUT_STYLE } from "../../../../constants";
@@ -126,7 +120,7 @@ export default function ExtraSidebar() {
           </button>
         </ShadTooltip>
       </div>
-      <Separator />
+      {/* <Separator /> */}
       <div className="relative mt-2 flex items-center mb-2 mx-2">
         <input
           type="text"