#73 add EM viewer wrapper

applications/visualizer/frontend/src/components/WorkspaceComponent.tsx

@@ -6,7 +6,7 @@ import { useDispatch, useSelector } from "react-redux";
 import "@metacell/geppetto-meta-ui/flex-layout/style/light.scss";
 import { useGlobalContext } from "../contexts/GlobalContext.tsx";
 import type { RootState } from "../layout-manager/layoutManagerFactory.ts";
-import { threeDViewerWidget, twoDViewerWidget } from "../layout-manager/widgets.ts";
+import {emDataViewerWidget, threeDViewerWidget, twoDViewerWidget} from "../layout-manager/widgets.ts";
 import theme from "../theme";
 import Layout from "./ViewerContainer/Layout.tsx";
 
@@ -53,6 +53,7 @@ function WorkspaceComponent() {
   useEffect(() => {
     dispatch(addWidget(threeDViewerWidget()));
     dispatch(addWidget(twoDViewerWidget()));
+    dispatch(addWidget(emDataViewerWidget()));
   }, [LayoutComponent, dispatch]);
 
   const [anchorElWorkspace, setAnchorElWorkspace] = React.useState<null | HTMLElement>(null);

applications/visualizer/frontend/src/components/viewers/EM/EM.tsx

@@ -0,0 +1,17 @@
+import { Box } from "@mui/material";
+import cytoscape from "cytoscape";
+import dagre from "cytoscape-dagre";
+import fcose from "cytoscape-fcose";
+
+cytoscape.use(fcose);
+cytoscape.use(dagre);
+
+const EM = () => {
+  return (
+    <Box sx={{ position: "relative", display: "flex", width: "100%", height: "100%" }}>
+
+    </Box>
+  );
+};
+
+export default EM;

applications/visualizer/frontend/src/layout-manager/componentMap.ts

@@ -1,10 +1,12 @@
 import ThreeDViewer from "../components/viewers/ThreeD/ThreeDViewer.tsx";
 import TwoDViewer from "../components/viewers/TwoD/TwoDViewer.tsx";
 import { widgetIds } from "./widgets.ts";
+import EMViewer from "../components/viewers/EM/EM.tsx";
 
 const componentMap = {
   [widgetIds.threeDViewer]: ThreeDViewer,
   [widgetIds.twoDViewer]: TwoDViewer,
+  [widgetIds.emDataViewer]: EMViewer,
 };
 
 export default componentMap;

applications/visualizer/frontend/src/layout-manager/layout.ts

@@ -37,6 +37,19 @@ export default {
           },
         ],
       },
+      {
+        type: "row",
+        weight: 100,
+        children: [
+          {
+            type: "tabset",
+            weight: 100,
+            id: "bottomPanel",
+            enableDeleteWhenEmpty: false,
+            children: [],
+          },
+        ],
+      },
     ],
   },
 };

applications/visualizer/frontend/src/layout-manager/widgets.ts

@@ -3,6 +3,7 @@ import { WidgetStatus } from "@metacell/geppetto-meta-client/common/layout/model
 export const widgetIds = {
   threeDViewer: "threeDViewer",
   twoDViewer: "twoDViewer",
+  emDataViewer: "emDataViewer",
 };
 
 export const threeDViewerWidget = () => ({
@@ -22,3 +23,12 @@ export const twoDViewerWidget = () => ({
   enableClose: false,
   status: WidgetStatus.ACTIVE,
 });
+
+export const emDataViewerWidget = () => ({
+  id: widgetIds.emDataViewer,
+  name: "EM Data",
+  component: widgetIds.emDataViewer,
+  panelName: "bottomPanel",
+  enableClose: false,
+  status: WidgetStatus.ACTIVE,
+});