#44 added sidebar to main app

src/components/Main.js

@@ -1,57 +1,64 @@
 import React from 'react';
 // import MechanismNode from '../model/nodes/mechanism/MechanismNode';
 import { withStyles } from '@mui/styles';
-import BG from "../assets/svg/bg-dotted.svg";
+import BG from '../assets/svg/bg-dotted.svg';
 import ModelInterpreter from '../model/Interpreter';
-import MetaDiagram, { ComponentsMap } from "@metacell/meta-diagram";
+import MetaDiagram, { ComponentsMap } from '@metacell/meta-diagram';
 import CustomLinkWidget from './views/projections/CustomLinkWidget';
 import GenericMechanism from './views/mechanisms/GenericMechanism';
 import { buildModel } from '../model/utils';
 import { PNLClasses } from '../constants';
-import CompositionDrawer from './views/CompositionDrawer';
+import { Sidebar } from './views/Sidebar/Sidebar';
 
 const mockModel = require('../resources/model').mockModel;
 
 const styles = () => ({
   root: {
     height: 'calc(100vh - 3.5rem)',
     width: '100%',
+    margin: 'none',
+    padding: 'none',
   },
   canvasBG: {
-    backgroundImage: `url(${BG})`
-  }
+    backgroundImage: `url(${BG})`,
+  },
 });
 
 class Main extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props);
     this.state = {};
   }
 
   render() {
     const { classes } = this.props;
-	  const interpreter = new ModelInterpreter(mockModel);
+    const interpreter = new ModelInterpreter(mockModel);
     const model = interpreter.getModel();
     const metaModel = buildModel(model);
 
     const componentsMap = new ComponentsMap(
-        new Map(Object.entries({'mechanism': GenericMechanism})),
-        new Map(Object.entries({'projection': CustomLinkWidget}))
-    )
+      new Map(Object.entries({ mechanism: GenericMechanism })),
+      new Map(Object.entries({ projection: CustomLinkWidget }))
+    );
 
     return (
       <div className={classes.root}>
-        <MetaDiagram metaNodes={metaModel[PNLClasses.MECHANISM]} metaLinks={metaModel[PNLClasses.PROJECTION]} componentsMap={componentsMap}
+        <MetaDiagram
+          metaNodes={metaModel[PNLClasses.MECHANISM]}
+          metaLinks={metaModel[PNLClasses.PROJECTION]}
+          componentsMap={componentsMap}
           metaTheme={{
-            customThemeVariables: {},
+            customThemeVariables: {
+              padding: 0,
+              margin: 0,
+            },
             canvasClassName: classes.canvasBG,
           }}
         />
-        <CompositionDrawer />
+        <Sidebar />
       </div>
     );
   }
 }
 
-
-export default withStyles(styles)(Main);
+export default withStyles(styles)(Main);

src/components/views/Sidebar/Sidebar.js

@@ -0,0 +1,137 @@
+import { Box, Drawer, Popper, Portal, Typography } from '@mui/material';
+import React, { useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import InstancesTreeView from './TreeView/InstanceTreeView';
+
+const datasets = [
+  {
+    id: uuidv4(),
+    label: 'Stimulus',
+    tooltip: 'Stimulus',
+    type: 'MECHANISM',
+  },
+  {
+    id: uuidv4(),
+    label: 'Projection Stimulus --> Composition',
+    tooltip: 'Projection Stimulus --> Composition',
+    type: 'PROJECTION',
+  },
+  {
+    id: uuidv4(),
+    label: 'Composition 1 Composition 1Composition 1',
+    tooltip: 'Composition 1',
+    type: 'COMPOSITION',
+    items: [
+      {
+        id: uuidv4(),
+        label: 'A1',
+        tooltip: 'Stimulus',
+        type: 'MECHANISM',
+      },
+      {
+        id: uuidv4(),
+        label: 'Projection A1 -->  B1',
+        tooltip: 'Projection A1 --> B1',
+        type: 'PROJECTION',
+      },
+      {
+        id: uuidv4(),
+        label: 'B1',
+        tooltip: 'Stimulus',
+        type: 'MECHANISM',
+      },
+    ],
+  },
+  {
+    id: uuidv4(),
+    label: 'Composition 2',
+    tooltip: 'Composition 2',
+    type: 'COMPOSITION',
+    items: [
+      {
+        id: uuidv4(),
+        label: 'A2',
+        tooltip: 'Stimulus',
+        type: 'MECHANISM',
+      },
+      {
+        id: uuidv4(),
+        label: 'Projection A2 -->  B2 Projection A2 -->  B2',
+        tooltip: 'Projection A2 --> B2',
+        type: 'PROJECTION',
+      },
+      {
+        id: uuidv4(),
+        label: 'B2',
+        tooltip: 'Stimulus',
+        type: 'MECHANISM',
+        items: [
+          {
+            id: uuidv4(),
+            label: 'A1',
+            tooltip: 'Stimulus',
+            type: 'MECHANISM',
+          },
+          {
+            id: uuidv4(),
+            label: 'Projection A1 -->  B1',
+            tooltip: 'Projection A1 --> B1',
+            type: 'PROJECTION',
+          },
+          {
+            id: uuidv4(),
+            label: 'B1',
+            tooltip: 'Stimulus',
+            type: 'MECHANISM',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const sidebarOpened = true;
+
+export const Sidebar = (props) => {
+  const { expand, setExpand, searchTerm } = props;
+
+  const renderContent = () => {
+    if (datasets?.length > 0) {
+      return (
+        <>
+          <Box paddingLeft="1.5rem" paddingY={1.5}>
+            <Typography component="body2" fontWeight={500}>
+              Model Hierarchy
+            </Typography>
+          </Box>
+          <InstancesTreeView datasets={datasets} />
+        </>
+      );
+    } else {
+      return (
+        <>
+          <Typography className="no-instance">
+            No instances to display yet.
+          </Typography>
+        </>
+      );
+    }
+  };
+  return (
+    <Drawer
+      anchor="right"
+      variant="persistent"
+      open={sidebarOpened}
+      PaperProps={{
+        sx: {
+          width: '250px',
+          padding: 0,
+          borderRadius: 0,
+          backgroundColor: 'white',
+        },
+      }}
+    >
+      {renderContent()}
+    </Drawer>
+  );
+};