diff --git a/src/components/Main.js b/src/components/Main.js index 735e475a..522a82b5 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -13,8 +13,8 @@ import MetaDiagram, { } from '@metacell/meta-diagram'; import CustomLinkWidget from './views/projections/CustomLinkWidget'; import { generateMetaGraph } from '../model/utils'; -import { sideBarNodes } from './views/sidebar/nodes'; -import { Sidebar } from './views/sidebar/Sidebar'; +import { leftSideBarNodes } from './views/leftSidebar/nodes'; +import { Sidebar } from './views/rightSidebar/Sidebar'; const mockModel = require('../resources/model').mockModel; @@ -121,7 +121,7 @@ class Main extends React.Component { metaLinks={this.metaGraph.getLinks()} metaNodes={this.metaGraph.getNodes()} sidebarProps={{ - sidebarNodes: sideBarNodes, + sidebarNodes: leftSideBarNodes, selectedBarNode: 'targetMechanism', }} metaTheme={{ diff --git a/src/components/common/Header.js b/src/components/common/Header.js index ba60566e..92b6c222 100644 --- a/src/components/common/Header.js +++ b/src/components/common/Header.js @@ -7,7 +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'; +import { COMPOSITION } from '../views/rightSidebar/TreeView/InstanceTreeView'; const { textWhite, diff --git a/src/components/views/Sidebar/TreeView/InstanceTreeView.js b/src/components/views/Sidebar/TreeView/InstanceTreeView.js deleted file mode 100644 index 0927bb30..00000000 --- a/src/components/views/Sidebar/TreeView/InstanceTreeView.js +++ /dev/null @@ -1,386 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import TreeView from '@mui/lab/TreeView'; -import StyledTreeItem from './TreeViewItem'; -import { - FileIcon, - ShapeArrowToolIcon, - CircleIcon, - CloseIcon, - ArrowDropDownIcon, - ArrowRightIcon, -} from './Icons'; -import { - Accordion, - AccordionDetails, - AccordionSummary, - Box, - IconButton, - Popover, - Stack, - Typography, -} from '@mui/material'; -import vars from '../../../../assets/styles/variables'; -import { makeStyles } from '@mui/styles'; -import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; - -export const GRAPH_SOURCE = 'GRAPH'; -export const TREE_SOURCE = 'TREE'; -const { - popperBG, - listSelectedTextColor, - cardBG, - nodeSecLabelColor, - dropdownBorderColor, - dropdownTextColor, - functionTextColor, - functionCodeColor, -} = vars; - -const useStyles = makeStyles(() => ({ - popperHeader: { - padding: '0.5rem', - display: 'flex', - marginBottom: '0.5rem', - justifyContent: 'space-between', - alignItems: 'center', - - '& .MuiBox-root': { - display: 'flex', - alignItems: 'center', - - '& strong': { - display: 'block', - fontWeight: 500, - fontSize: '0.875rem', - lineHeight: '1.25rem', - color: listSelectedTextColor, - paddingLeft: '0.5rem', - }, - - '& span': { - display: 'block', - fontWeight: 500, - fontSize: '0.8125rem', - lineHeight: '1rem', - letterSpacing: '-0.005rem', - color: dropdownTextColor, - }, - }, - }, - block: { - flex: 1, - background: cardBG, - borderRadius: '0.5rem', - - '& label': { - display: 'block', - fontWeight: '400', - fontSize: '0.625rem', - lineHeight: '0.875rem', - color: nodeSecLabelColor, - }, - '& .text': { - maxWidth: 'calc(16.25rem - 3rem)', - fontSize: '0.875rem', - fontWeight: 400, - lineHeight: '1rem', - letterSpacing: '0.005em', - whiteSpace: 'nowrap', - }, - '& .function': { - maxWidth: 'calc(16.25rem - 2rem)', - whiteSpace: 'nowrap', - fontSize: '0.875rem', - fontWeight: 400, - lineHeight: '1rem', - letterSpacing: '0.005em', - - '& .MuiTypography-root': { - marginTop: '0.25rem', - fontSize: '0.875rem', - lineHeight: '1rem', - letterSpacing: '0.005em', - wordBreak: 'break-all', - '& strong': { - fontWeight: 400, - }, - }, - }, - }, - - textColor: { - color: functionTextColor, - }, - codeColor: { - color: functionCodeColor, - }, - seperator: { - width: '0.125rem', - height: '1rem', - borderRadius: '1.25rem', - margin: '0.25rem auto', - }, - accordion: { - background: cardBG, - boxShadow: 'none', - borderRadius: '0.5rem !important', - }, - paddingXS: { - padding: '0.5rem', - }, -})); - -const popperPaperProps = { - style: { - width: '16.25rem', - height: '17.5rem', - padding: '0.5rem', - background: popperBG, - boxShadow: - '0 0.5rem 0.5rem -0.25rem rgba(24, 24, 24, 0.03), 0 1.25rem 1.5rem -0.25rem rgba(24, 24, 24, 0.08', - borderRadius: '0.75rem', - inset: '1rem auto auto 0 !important', - borderWidth: '1px', - borderColor: dropdownBorderColor, - borderStyle: 'solid', - }, -}; - -const initialRightClickStateCreator = () => ({ - mouseX: null, - mouseY: null, -}); - -const InstancesTreeView = (props) => { - const { datasets } = props; - const classes = useStyles(); - - const [right, setRight] = useState(() => initialRightClickStateCreator()); - const open = Boolean(right.mouseY); - - const [selectedNodes, setSelectedNodes] = useState([]); - const [selectedNodeId, setSelectedNodeId] = useState(null); - const [nodes, setNodes] = useState([]); - const [items, setItems] = useState(datasets); - - const onNodeSelect = (e, nodeId) => { - setSelectedNodeId(nodeId); - }; - - const onNodeToggle = (e, nodeIds) => { - // TODO uncommented after proper test - // if (nodeIds.length === 0) { - // return; - // } - - if (nodes.length !== nodeIds.length && nodes[0] === nodeIds[0]) { - var original = [...nodes]; - var newPath = [...nodeIds]; - while (original[0] === newPath[0]) { - original.shift(); - newPath.shift(); - } - nodeIds = original; - } - - setNodes(nodeIds); - }; - - console.log(datasets, 'datasets'); - - 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') { - setRight({ - mouseX: event.clientX - 360, - mouseY: event.clientY - 8, - }); - } - } - - function onClose() { - setRight(initialRightClickStateCreator()); - } - - // Initialize state in this hook - useEffect(() => { - // Populate tree items state with datasets - if (items.length === 0 && datasets.length > 0) { - setItems(datasets); - } else if (datasets.length > 0 && items.length !== datasets.length) { - // Update datasets, after adding a new dataset - setItems(datasets); - } - }, [datasets, items.length]); - - const getTreeItemsFromData = (treeItems) => { - if (Array.isArray(treeItems) && treeItems.length <= 0) return; - - return treeItems?.map((treeItemData) => { - let items = undefined; - if (treeItemData.items && treeItemData.items.length > 0) { - items = getTreeItemsFromData(treeItemData.items); - } - - const hidden = - !nodes.includes(treeItemData?.id) && - selectedNodeId !== treeItemData?.id && - treeItemData?.type === 'COMPOSITION'; - - const labelIcon = - treeItemData?.type === 'MECHANISM' ? ( - - ) : treeItemData?.type === 'COMPOSITION' ? ( - - ) : ( - - ); - - return ( -