Style instance pane and instance item

Signed-off-by: Alex <[email protected]>

view/src/components/Diagram/Diagram.tsx

@@ -25,7 +25,7 @@ import ReactFlow, {
   getConnectedEdges,
 } from "reactflow";
 
-import InsertPanel from "./InsertPanel";
+import { InsertPanel, InstancePane, InstanceItem } from "./InsertPanel";
 
 // Icons
 import { IconDownload } from "@nasa-jpl/react-stellar";
@@ -489,19 +489,10 @@ function Diagram({
     setShowDownloadMenu(!showDownloadMenu);
   };
 
-  const arrowIconSize = 16; // This constant sets the control button dropdown indicator arrow size.
-  var testInsertItem: InsertItem = {
-    label: "TestInsertItem",
-    onItemClicked: () => {console.log("Item was clicked!")},
-    icon: <IconDownload
-      className="flex-shrink-0 flex-grow-0"
-      color="var(--vscode-button-secondaryForeground)"
-      width="16"
-      height="16"
-    />
-  }
+  // This constant sets the control button dropdown indicator arrow size.
+  const arrowIconSize = 16;
 
-  var insertItems: InsertItem[] = [testInsertItem, testInsertItem, testInsertItem, testInsertItem, testInsertItem, testInsertItem];
+  var insertItems: string[] = ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7", "Label 8", "Label 9"];
 
   return (
     <div
@@ -669,9 +660,22 @@ function Diagram({
           nodeColor={getNodeColor}
         />
         <Panel position="top-left" className="flow-panel">
-          <InsertPanel
-          instances={insertItems}
-          relations={insertItems}/>
+          <InsertPanel>
+            <InstancePane>
+              {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>
+          </InsertPanel>
         </Panel>
         <Background gap={12} size={1} />
       </ReactFlow>

view/src/components/Diagram/InsertPanel.tsx

@@ -1,18 +1,23 @@
 import React, { ReactElement, useEffect, useRef } from "react";
 import "@nasa-jpl/react-stellar/dist/esm/stellar.css";
-import { Button } from "@nasa-jpl/react-stellar";
-import invariant from "tiny-invariant"
-import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
+import invariant from "tiny-invariant";
+import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import Node from "reactflow"
 
 interface InsertItemProps {
   label: string;
-  icon: ReactElement<any>;
+  style?: any;
 }
 
-const InsertItem: React.FC<InsertItemProps> = ({
-  label,
-  icon,
-}) => {
+const InstanceNode: React.FC<any> = (style) => {
+  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
   // TODO: handle onDrag Look at react-beautiful-dnd
   // TODO: handle cloning object after dragging
@@ -22,66 +27,40 @@ const InsertItem: React.FC<InsertItemProps> = ({
   useEffect(() => {
     const el = ref.current;
     invariant(el);
-
-    return draggable({
-      element: el,
-    });
+    return draggable({element: el});
   }, []);
+
   return (
-    <div
-      className="flex flex-row flex-grow justify-between rounded p-1 bg-[#ff0000]"
-      ref={ref}
-    >
-      <div className="flex-auto w-24 text-left text-nowrap">
-        {label}
-      </div>
-      <div className="grow-0">
-        {icon}
+    <div className="flex flex-row items-center bg-opacity-0">
+      <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>
       </div>
+      <div className="relative right-[1px] z-10 h-2 w-2 border-[1px] rounded-full bg-black border-white"></div>
     </div>
   );
 };
 
-interface InsertPanelProps {
-  instances: InsertItemProps[];
-  relations: InsertItemProps[];
-}
-
-const InsertPanel: React.FC<InsertPanelProps> = ({
-  instances,
-  relations,
-}) => {
+export const InstancePane: React.FC<any> = ({ 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>
-      <SubPanel label="Instances" items={instances}/>
-      <SubPanel label="Relations" items={relations}/>
+    <div className="p-2 rounded shadow-md bg-white/5 h-36">
+      <span className="font-bold">{"Instance"}</span>
+      <div className="flex flex-col h-28 items-center space-y-2 overflow-y-auto">
+        {children}
+      </div>
     </div>
   );
 };
 
-const SubPanel: React.FC<any> = ({
-  label,
-  items
-}) => {
+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 px-2 pt-2 space-y-2 rounded shadow-md bg-[var(--vscode-banner-background)] overflow-y-auto max-h-[9rem]`}">
-      <div className="p-2 rounded shadow-md bg-white/5 max-h-[9rem]">
-        <span className="font-bold">{label}</span>
-        <div className="pl-2 h-24 flex flex-col flex-grow {`z-10 p-2 space-y-2 overflow-y-auto max-h-[9rem]`}">
-          {items.map((item: InsertItemProps) => (
-              <InsertItem
-              label={item.label}
-              icon={item.icon}
-              />
-          ))}
-        </div>
-      </div>
+    <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}
     </div>
   );
 };
 
-
-
 export default InsertPanel;