From c0de6a7ac60cf33f2b692078aa5e9ee3dcb64ed2 Mon Sep 17 00:00:00 2001
From: Alex <alexanderematei@gmail.com>
Date: Wed, 29 May 2024 11:58:09 -0700
Subject: [PATCH] Restructure InsertPanel UI components

Signed-off-by: Alex <alexanderematei@gmail.com>
---
 .vscode/settings.json                       |  5 ++-
 view/src/components/Diagram/Diagram.tsx     | 10 +++---
 view/src/components/Diagram/InsertPanel.tsx | 39 +++++++++++++--------
 view/src/interfaces/InsertItemType.ts       |  7 ----
 4 files changed, 33 insertions(+), 28 deletions(-)
 delete mode 100644 view/src/interfaces/InsertItemType.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 30bf8c2..8b91359 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,5 +7,8 @@
         "out": true // set this to false to include "out" folder in search results
     },
     // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
-    "typescript.tsc.autoDetect": "off"
+    "typescript.tsc.autoDetect": "off",
+    "cSpell.words": [
+        "insertable"
+    ]
 }
\ No newline at end of file
diff --git a/view/src/components/Diagram/Diagram.tsx b/view/src/components/Diagram/Diagram.tsx
index 75f12eb..855d832 100644
--- a/view/src/components/Diagram/Diagram.tsx
+++ b/view/src/components/Diagram/Diagram.tsx
@@ -28,8 +28,9 @@ import ReactFlow, {
 import {
   InsertPanel,
   InsertPane,
-  InstanceItem,
-  RelationItem,
+  InstanceInsertItem,
+  RelationInsertItem,
+  DefaultRelationIcon,
 } from "./InsertPanel";
 
 // Icons
@@ -41,7 +42,6 @@ import { toPng, toSvg } from "html-to-image";
 import Loader from "../shared/Loader";
 import ITableData from "../../interfaces/ITableData";
 import { LegendItem } from "../../interfaces/LegendItemType";
-import { InsertItem } from "../../interfaces/InsertItemType";
 import {
   VSCodeButton,
   VSCodeDropdown,
@@ -678,12 +678,12 @@ function Diagram({
           <InsertPanel>
             <InsertPane label="Instance">
               {insertItems.map((item) => {
-                return <InstanceItem label={item} />;
+                return <InstanceInsertItem label={item} />;
               })}
             </InsertPane>
             <InsertPane label="Relation">
               {insertItems.map((item) => {
-                return <RelationItem label={item} />;
+                return <RelationInsertItem label={item} icon={DefaultRelationIcon}/>;
               })}
             </InsertPane>
           </InsertPanel>
diff --git a/view/src/components/Diagram/InsertPanel.tsx b/view/src/components/Diagram/InsertPanel.tsx
index 410d41f..7b1e701 100644
--- a/view/src/components/Diagram/InsertPanel.tsx
+++ b/view/src/components/Diagram/InsertPanel.tsx
@@ -4,22 +4,34 @@ import invariant from "tiny-invariant";
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import Node from "reactflow";
 
-interface InsertItemProps {
+interface InstanceInsertItemProps {
   label: string;
-  style?: any;
+  style?: string;
 }
 
-const InstanceNode: React.FC<any> = (style) => {
-  return <div className="h-4 rounded "></div>;
-};
+interface RelationInsertItemProps {
+  label: string;
+  icon: React.ReactElement
+}
 
-export const InstanceItem: React.FC<InsertItemProps> = ({ label, style }) => {
+// A default icon for a RelationInsertItem
+export const DefaultRelationIcon: React.ReactElement = <span className="codicon codicon-arrow-right mr-2 text-[20px]" />
+
+/*
+ * React component `InstanceInsertItem` is a visual representation of an insertable instance that a user can drag from the instance pane of the instance panel and drop into the diagram view.
+ *
+ * @param {string} label - String label for the instance
+ * @param {string} style - TailwindCSS style to specify style attributes for the InstanceNode
+ */
+export const InstanceInsertItem: React.FC<InstanceInsertItemProps> = ({ label, style }) => {
   // TODO: Use model's node color property instead of hard-coded color
   // TODO: handle onDrag Look at react-beautiful-dnd
   // TODO: handle cloning object after dragging
   // TODO: handle dropping object after letting go of the mouse
-  const ref = useRef(null);
+  const ref = useRef(null); // ref for dragging
+  const defaultNodeStyle = "bg-[#ff0000]"
 
+  // Enable dragging of element
   useEffect(() => {
     const el = ref.current;
     invariant(el);
@@ -30,7 +42,7 @@ export const InstanceItem: React.FC<InsertItemProps> = ({ label, style }) => {
     <div className="flex flex-row items-center">
       <div className="relative left-[1px] z-10 h-2 w-2 border-[1px] rounded-full bg-black border-white "></div>
       <div
-        className="flex flex-none justify-center items-center rounded h-11 w-24 bg-[#ff0000] z-0 "
+        className={`flex flex-none justify-center items-center rounded h-11 w-24 z-0 ${style ?? defaultNodeStyle}`}
         ref={ref}
       >
         <span className="text-center text-nowrap text-white text-[12px]">
@@ -42,12 +54,10 @@ export const InstanceItem: React.FC<InsertItemProps> = ({ label, style }) => {
   );
 };
 
-export const RelationItem: React.FC<InsertItemProps> = ({ label, style }) => {
-  // TODO: handle onDrag Look at react-beautiful-dnd
-  // TODO: handle cloning object after dragging
-  // TODO: handle dropping object after letting go of the mouse
+export const RelationInsertItem: React.FC<RelationInsertItemProps> = ({ label, icon }) => {
+  // TODO: Find a better way to handle icons
   const ref = useRef(null);
-
+  
   useEffect(() => {
     const el = ref.current;
     invariant(el);
@@ -63,7 +73,7 @@ export const RelationItem: React.FC<InsertItemProps> = ({ label, style }) => {
         <span className="text-center text-nowrap text-white text-[12px]">
           {label}
         </span>
-        <span className="codicon codicon-arrow-right mr-2 text-[20px]" />
+        {icon}
       </div>
     </div>
   );
@@ -84,7 +94,6 @@ export const InsertPane: React.FC<any> = ({ label, children }) => {
 };
 
 export const InsertPanel: React.FC<any> = ({ children }) => {
-  // Refer to http://www.opencaesar.io/oml-tutorials/#tutorial1-create-oml-vocabulary
   return (
     <div className="w-48 flex flex-col {`z-10 p-2 space-y-2 rounded shadow-md bg-[var(--vscode-banner-background)] overflow-y-auto max-h-[9rem]`}">
       {children}
diff --git a/view/src/interfaces/InsertItemType.ts b/view/src/interfaces/InsertItemType.ts
deleted file mode 100644
index f70e6e9..0000000
--- a/view/src/interfaces/InsertItemType.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { ReactElement } from "react"
-
-export type InsertItem = {
-    label: string,
-    onItemClicked: () => void,
-    icon: ReactElement<any>
-}
\ No newline at end of file