#44 fixes for constants

src/components/Main.js

@@ -13,10 +13,8 @@ import MetaDiagram, {
 } from '@metacell/meta-diagram';
 import CustomLinkWidget from './views/projections/CustomLinkWidget';
 import { generateMetaGraph } from '../model/utils';
-import CompositionDrawer from './views/CompositionDrawer';
 import { sideBarNodes } from './views/sidebar/nodes';
-import { Sidebar } from './views/Sidebar/Sidebar';
-import { buildModel } from '../model/utils';
+import { Sidebar } from './views/sidebar/Sidebar';
 
 const mockModel = require('../resources/model').mockModel;
 

src/components/common/Breadcrumbs.js

@@ -77,7 +77,7 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const expand = 'expand';
+const EXPAND_ID = 'expand';
 
 function Crumb({ id, text, handleClick, href, last = false }) {
   const classes = useStyles();
@@ -137,7 +137,7 @@ export const CustomBreadcrumbsWithMenu = ({ breadcrumbs }) => {
         const lastFourCrumbs = breadcrumbs.slice(-4);
 
         const newBreadCrumbs = firstItemCrumbs.concat(
-          [{ id: expand }],
+          [{ id: EXPAND_ID }],
           lastFourCrumbs
         );
         setCollapsedCrumbs(restCrumbs);
@@ -179,7 +179,7 @@ export const CustomBreadcrumbsWithMenu = ({ breadcrumbs }) => {
           _breadcrumbs.map((crumb, idx) => {
             const index = idx + 1;
 
-            if (crumb.id === expand) {
+            if (crumb.id === EXPAND_ID) {
               return (
                 <Box>
                   <IconButton

src/components/common/Header.js

@@ -7,6 +7,7 @@ import vars from '../../assets/styles/variables';
 import { CustomBreadcrumbsWithMenu } from './Breadcrumbs';
 import Dialog from '@mui/material/Dialog';
 import UndoIcon from '@mui/icons-material/Undo';
+import { COMPOSITION } from '../views/sidebar/TreeView/InstanceTreeView';
 
 const {
   textWhite,
@@ -118,10 +119,12 @@ const Header = () => {
 
   const handleClick = (event, value) => {
     if (event) {
-      if (value === 'Composition') {
+      if (value === COMPOSITION) {
         setAnchorEl(event.currentTarget);
       }
     }
+
+    setSelected(value);
   };
 
   const handleClose = () => {

src/components/views/Sidebar/Sidebar.js

@@ -1,93 +1,112 @@
-import { Box, Drawer, Popper, Portal, Typography } from '@mui/material';
-import React, { useState } from 'react';
+import { Box, Drawer, Typography } from '@mui/material';
+import React from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import InstancesTreeView from './TreeView/InstanceTreeView';
 
+export const COMPOSITION_DTO =   {
+  id: uuidv4(),
+  label: 'Composition 2',
+  type: 'CombinationFunction',
+  detail: 'CombinationFunction Detailing',
+  info: {
+    title: 'function',
+    pnl: '   =pnl.',
+    sub: 'Logistic',
+    calc: '(gain=1.0, bias=-4)'
+  },
+  stats: [
+    {label:'Pertinencity', value: '12' },
+    {label:'Prosistensy', value: '8.90' }
+  ]
+};
+
+const COMPOSITION_EXAMPLE =   {
+  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',
+    },
+  ],
+};
+
 const datasets = [
   {
     id: uuidv4(),
     label: 'Stimulus',
     tooltip: 'Stimulus',
-    type: 'MECHANISM',
+    type: 'mechanism',
   },
   {
     id: uuidv4(),
     label: 'Projection Stimulus --> Composition',
     tooltip: 'Projection Stimulus --> Composition',
-    type: 'PROJECTION',
+    type: 'projection',
   },
   {
     id: uuidv4(),
     label: 'Composition 1 Composition 1Composition 1',
     tooltip: 'Composition 1',
-    type: 'COMPOSITION',
+    type: 'composition',
     items: [
       {
         id: uuidv4(),
         label: 'A1',
         tooltip: 'Stimulus',
-        type: 'MECHANISM',
+        type: 'mechanism',
       },
       {
         id: uuidv4(),
         label: 'Projection A1 -->  B1',
         tooltip: 'Projection A1 --> B1',
-        type: 'PROJECTION',
+        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',
+        type: 'mechanism',
         items: [
           {
             id: uuidv4(),
             label: 'A1',
             tooltip: 'Stimulus',
-            type: 'MECHANISM',
+            type: 'mechanism',
           },
           {
             id: uuidv4(),
             label: 'Projection A1 -->  B1',
             tooltip: 'Projection A1 --> B1',
-            type: 'PROJECTION',
+            type: 'projection',
           },
           {
             id: uuidv4(),
             label: 'B1',
             tooltip: 'Stimulus',
-            type: 'MECHANISM',
+            type: 'mechanism',
           },
         ],
       },
     ],
-  },
+  },  
+  COMPOSITION_EXAMPLE
 ];
 
 const sidebarOpened = true;

src/components/views/sidebar/TreeView/InstanceTreeView.js

@@ -22,9 +22,15 @@ import {
 import vars from '../../../../assets/styles/variables';
 import { makeStyles } from '@mui/styles';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { COMPOSITION_DTO } from '../Sidebar';
 
 export const GRAPH_SOURCE = 'GRAPH';
 export const TREE_SOURCE = 'TREE';
+export const COMPOSITION = 'composition';
+export const MECHANISM = 'mechanism';
+export const PROJECTION = 'projection';
+
+
 const {
   popperBG,
   listSelectedTextColor,
@@ -151,6 +157,7 @@ const initialRightClickStateCreator = () => ({
   mouseY: null,
 });
 
+
 const InstancesTreeView = (props) => {
   const { datasets } = props;
   const classes = useStyles();
@@ -186,14 +193,15 @@ const InstancesTreeView = (props) => {
     setNodes(nodeIds);
   };
 
+
   function handleClick(e, nodes_ids) {
     if (e.target.className == 'MuiTreeItem-label') setSelectedNodes(nodes_ids);
   }
 
   function onRightClick(event, node) {
     event.preventDefault();
     event.stopPropagation();
-    if (node.type === 'COMPOSITION') {
+    if (node.type === COMPOSITION) {
       setRight({
         mouseX: event.clientX - 360,
         mouseY: event.clientY - 8,
@@ -228,12 +236,12 @@ const InstancesTreeView = (props) => {
       const hidden =
         !nodes.includes(treeItemData?.id) &&
         selectedNodeId !== treeItemData?.id &&
-        treeItemData?.type === 'COMPOSITION';
+        treeItemData?.type === COMPOSITION;
 
       const labelIcon =
-        treeItemData?.type === 'MECHANISM' ? (
+        treeItemData?.type === MECHANISM ? (
           <CircleIcon />
-        ) : treeItemData?.type === 'COMPOSITION' ? (
+        ) : treeItemData?.type === COMPOSITION ? (
           <FileIcon />
         ) : (
           <ShapeArrowToolIcon />
@@ -318,7 +326,7 @@ const InstancesTreeView = (props) => {
           <Box>
             <FileIcon color="black" />
             <Typography component="strong" noWrap>
-              Composition 2
+            {COMPOSITION_DTO.label}
             </Typography>
           </Box>
           <IconButton onClick={onClose}>
@@ -345,35 +353,34 @@ const InstancesTreeView = (props) => {
               <Box className={classes.block}>
                 <Typography component="label">Function type</Typography>
                 <Typography className="text" noWrap>
-                  CombinationFunction
+                  {COMPOSITION_DTO.type}
                 </Typography>
               </Box>
             </AccordionSummary>
             <AccordionDetails>
               <Typography fontSize="0.875rem">
-                CombinationFunction Detailing
+                {COMPOSITION_DTO.detail}
               </Typography>
             </AccordionDetails>
           </Accordion>
 
-          {functionValues('ID', 'Composition 2')}
+          {functionValues('ID', COMPOSITION_DTO.label)}
 
           <Box className={[classes.block, classes.paddingXS]}>
             <Typography component="label">Function</Typography>
             <Typography className="function" noWrap>
               <Typography component="strong" className={classes?.textColor}>
-                function
+                {COMPOSITION_DTO.info.title}
               </Typography>
-              =pnl.
+               {COMPOSITION_DTO.info.pnl}
               <Typography className={classes?.codeColor} component="strong">
-                Logistic
+                {COMPOSITION_DTO.info.sub}
               </Typography>
-              (gain=1.0, bias=-4)
+              {COMPOSITION_DTO.info.calc}
             </Typography>
           </Box>
           <Stack direction="row" spacing={1}>
-            {functionValues('Pertinencity', '12')}
-            {functionValues('Prosistensy', '8.90')}
+            {COMPOSITION_DTO.stats.map(stats => functionValues(stats.label, stats.value))}
           </Stack>
         </Stack>
       </Popover>