From b496ca04a65330891e91dbe3f9b34dd765c9e78a Mon Sep 17 00:00:00 2001
From: Alex <alexanderematei@gmail.com>
Date: Sat, 25 May 2024 13:14:04 -0700
Subject: [PATCH] wip: initial relation pane styling

Signed-off-by: Alex <alexanderematei@gmail.com>
---
 view/src/components/Diagram/Diagram.tsx     | 20 ++++++--------
 view/src/components/Diagram/InsertPanel.tsx | 29 +++++++++++++++++----
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/view/src/components/Diagram/Diagram.tsx b/view/src/components/Diagram/Diagram.tsx
index 642e1e1..f6b82eb 100644
--- a/view/src/components/Diagram/Diagram.tsx
+++ b/view/src/components/Diagram/Diagram.tsx
@@ -25,7 +25,7 @@ import ReactFlow, {
   getConnectedEdges,
 } from "reactflow";
 
-import { InsertPanel, InstancePane, InstanceItem } from "./InsertPanel";
+import { InsertPanel, InsertPane, InstanceItem, RelationItem } from "./InsertPanel";
 
 // Icons
 import { IconDownload } from "@nasa-jpl/react-stellar";
@@ -661,20 +661,16 @@ function Diagram({
         />
         <Panel position="top-left" className="flow-panel">
           <InsertPanel>
-            <InstancePane>
+            <InsertPane label="Instance">
               {insertItems.map((item) => {
               return <InstanceItem label={item}/>
               })}
-            </InstancePane>
-            <InstancePane>
-              <ul>
-                <li>Test</li>
-                <li>Test</li>
-                <li>Test</li>
-                <li>Test</li>
-                <li>Test</li>
-              </ul>
-            </InstancePane>
+            </InsertPane>
+            <InsertPane label="Relation">
+            {insertItems.map((item) => {
+              return <RelationItem label={item}/>
+              })}
+            </InsertPane>
           </InsertPanel>
         </Panel>
         <Background gap={12} size={1} />
diff --git a/view/src/components/Diagram/InsertPanel.tsx b/view/src/components/Diagram/InsertPanel.tsx
index 1d5a302..31935f9 100644
--- a/view/src/components/Diagram/InsertPanel.tsx
+++ b/view/src/components/Diagram/InsertPanel.tsx
@@ -31,22 +31,41 @@ export const InstanceItem: React.FC<InsertItemProps> = ({ label, style }) => {
   }, []);
 
   return (
-    <div className="flex flex-row items-center bg-opacity-0">
+    <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 " ref={ref}>
-        <span className="text-center text-nowrap text-white">{label}</span>
+        <span className="text-center text-nowrap text-white text-[12px]">{label}</span>
       </div>
       <div className="relative right-[1px] z-10 h-2 w-2 border-[1px] rounded-full bg-black border-white"></div>
     </div>
   );
 };
 
-export const InstancePane: React.FC<any> = ({ children }) => {
+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
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    invariant(el);
+    return draggable({element: el});
+  }, []);
+
+  return (
+    <div className="flex flex-row justify-between bg-clip-text w-24" ref={ref}>
+      <span className="text-center text-nowrap text-white text-[12px]">{label}</span>
+      <span className="codicon codicon-arrow-right mr-2 text-[14px]"/>
+    </div>
+  );
+};
+
+export const InsertPane: React.FC<any> = ({ label, children }) => {
   // Refer to http://www.opencaesar.io/oml-tutorials/#tutorial1-create-oml-vocabulary
-  // h-24 pl-2 flex flex-col items-center space-y-2 overflow-y-auto max-h-[9rem] z-10
   return (
     <div className="p-2 rounded shadow-md bg-white/5 h-36">
-      <span className="font-bold">{"Instance"}</span>
+      <span className="font-bold">{label}</span>
       <div className="flex flex-col h-28 items-center space-y-2 overflow-y-auto">
         {children}
       </div>