wip: initial relation pane styling

Signed-off-by: Alex <[email protected]>
opencaesar · May 25, 2024 · c6ef490 · c6ef490
1 parent b496ca0
commit c6ef490
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 22 deletions.
diff --git a/view/src/components/Diagram/Diagram.tsx b/view/src/components/Diagram/Diagram.tsx
@@ -25,7 +25,12 @@ import ReactFlow, {
   getConnectedEdges,
 } from "reactflow";
 
-import { InsertPanel, InsertPane, InstanceItem, RelationItem } from "./InsertPanel";
+import {
+  InsertPanel,
+  InsertPane,
+  InstanceItem,
+  RelationItem,
+} from "./InsertPanel";
 
 // Icons
 import { IconDownload } from "@nasa-jpl/react-stellar";
@@ -492,7 +497,17 @@ function Diagram({
   // This constant sets the control button dropdown indicator arrow size.
   const arrowIconSize = 16;
 
-  var insertItems: string[] = ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7", "Label 8", "Label 9"];
+  var insertItems: string[] = [
+    "Label 1",
+    "Label 2",
+    "Label 3",
+    "Label 4",
+    "Label 5",
+    "Label 6",
+    "Label 7",
+    "Label 8",
+    "Label 9",
+  ];
 
   return (
     <div
@@ -663,20 +678,20 @@ function Diagram({
           <InsertPanel>
             <InsertPane label="Instance">
               {insertItems.map((item) => {
-              return <InstanceItem label={item}/>
+                return <InstanceItem label={item} />;
               })}
             </InsertPane>
             <InsertPane label="Relation">
-            {insertItems.map((item) => {
-              return <RelationItem label={item}/>
+              {insertItems.map((item) => {
+                return <RelationItem label={item} />;
               })}
             </InsertPane>
           </InsertPanel>
         </Panel>
         <Background gap={12} size={1} />
       </ReactFlow>
       {/* Check if rightClick and if layout.contextMenu exists */}
-      {rightClick && layout.contextMenu &&(
+      {rightClick && layout.contextMenu && (
         <ContextMenu
           selectedElements={iriArray}
           top={coordinates.y}

diff --git a/view/src/components/Diagram/InsertPanel.tsx b/view/src/components/Diagram/InsertPanel.tsx
@@ -2,20 +2,16 @@ import React, { ReactElement, useEffect, useRef } from "react";
 import "@nasa-jpl/react-stellar/dist/esm/stellar.css";
 import invariant from "tiny-invariant";
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import Node from "reactflow"
+import Node from "reactflow";
 
 interface InsertItemProps {
   label: string;
   style?: any;
 }
 
 const InstanceNode: React.FC<any> = (style) => {
-  return (
-    <div className="h-4 rounded ">
-
-    </div>
-  )
-}
+  return <div className="h-4 rounded "></div>;
+};
 
 export const InstanceItem: React.FC<InsertItemProps> = ({ label, style }) => {
   // TODO: Use model's node color property instead of hard-coded color
@@ -27,14 +23,19 @@ export const InstanceItem: React.FC<InsertItemProps> = ({ label, style }) => {
   useEffect(() => {
     const el = ref.current;
     invariant(el);
-    return draggable({element: el});
+    return draggable({ element: el });
   }, []);
 
   return (
     <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 text-[12px]">{label}</span>
+      <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 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>
@@ -50,13 +51,20 @@ export const RelationItem: React.FC<InsertItemProps> = ({ label, style }) => {
   useEffect(() => {
     const el = ref.current;
     invariant(el);
-    return draggable({element: 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 className="flex flex-col items-start w-full pl-4">
+      <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-[20px]" />
+      </div>
     </div>
   );
 };
@@ -65,8 +73,10 @@ export const InsertPane: React.FC<any> = ({ label, children }) => {
   // Refer to http://www.opencaesar.io/oml-tutorials/#tutorial1-create-oml-vocabulary
   return (
     <div className="p-2 rounded shadow-md bg-white/5 h-36">
-      <span className="font-bold">{label}</span>
-      <div className="flex flex-col h-28 items-center space-y-2 overflow-y-auto">
+      <div className="pb-2">
+        <span className="font-bold">{label}</span>
+      </div>
+      <div className="flex flex-col h-24 items-center space-y-2 overflow-y-auto">
         {children}
       </div>
     </div>