Merge pull request #528 from MetaCell/release/1.2.8

Release/1.2.8

examples/layout-manager-playground/package.json

@@ -10,6 +10,7 @@
     "@metacell/geppetto-meta-core": "file:.yalc/@metacell/geppetto-meta-core",
     "@metacell/geppetto-meta-ui": "file:.yalc/@metacell/geppetto-meta-ui",
     "@mui/material": "^5.14.0",
+    "@mui/icons-material": "^5.14.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.38",
     "@types/react": "17.0.52",

examples/layout-manager-playground/src/pages/HomePage.tsx

@@ -1,57 +1,79 @@
 import React, { useEffect, useState } from 'react';
-import { useDispatch, useStore } from 'react-redux';
-import { Box, Button, CircularProgress, Stack, TextField } from "@mui/material"
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
+import { useDispatch, useStore, useSelector } from 'react-redux';
+import {
+  Box,
+  Button,
+  CircularProgress,
+  IconButton,
+  Stack,
+  TextField,
+  Tooltip,
+  InputLabel,
+  MenuItem,
+  FormControl
+} from "@mui/material"
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import VisibilityOnIcon from '@mui/icons-material/Visibility';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 // @ts-ignore
 import { getLayoutManagerInstance } from "@metacell/geppetto-meta-client/common/layout/LayoutManager";
 // @ts-ignore
-import { addWidget } from '@metacell/geppetto-meta-client/common/layout/actions';
+import { addWidget, updateWidget } from '@metacell/geppetto-meta-client/common/layout/actions';
+// @ts-ignore
+import { Widget, WidgetStatus } from "@metacell/geppetto-meta-client/common/layout/model";
 import '@metacell/geppetto-meta-ui/flex-layout/style/dark.scss'
 
 import { componentWidget } from "../widgets";
 
 const HomePage = () => {
   const store = useStore();
   const dispatch = useDispatch();
+  // @ts-ignore
+  const widgets = useSelector(state => state.widgets);
   const [LayoutComponent, setLayoutComponent] = useState<any | undefined>(undefined);
   const [panel, setPanel] = useState("topLeft");
   const [name, setName] = useState("Component 1");
   const [color, setColor] = useState("red");
+
   useEffect(() => {
     if (LayoutComponent === undefined) {
       const myManager = getLayoutManagerInstance();
       if (myManager) {
-        myManager.enableMinimize = true
         setLayoutComponent(myManager.getComponent() as React.ComponentType<any>);
       }
     }
-  }, [store])
+  }, [store, LayoutComponent])
 
   const addComponent = () => {
     dispatch(addWidget(componentWidget(name, color, panel)));
   };
 
 
+  const activateWidget = (widget: Widget) => {
+    const updatedWidget = { ...widget };
+    updatedWidget.status = WidgetStatus.ACTIVE;
+    updatedWidget.panelName = panel;
+    dispatch(updateWidget(updatedWidget));
+  };
+
+
   return (
     <Box>
       <Stack direction="row" spacing={2} sx={{
         width: '100%',
         display: 'flex',
         padding: 2
       }}>
-        <TextField id="outlined-basic" label="Name" variant="outlined" value={name}  onChange={(event: any) => 
+        <TextField id="outlined-basic" label="Name" variant="outlined" value={name} onChange={(event: any) =>
           setName(event.target.value as string)
-        } />
+        }/>
         <FormControl>
           <InputLabel id="name">Panel</InputLabel>
           <Select
             labelId="panel"
             value={panel}
             label="Panel"
-            onChange={(event: SelectChangeEvent) => 
+            onChange={(event: SelectChangeEvent) =>
               setPanel(event.target.value as string)
             }
           >
@@ -66,7 +88,7 @@ const HomePage = () => {
             labelId="color"
             value={color}
             label="Color"
-            onChange={(event: SelectChangeEvent) => 
+            onChange={(event: SelectChangeEvent) =>
               setColor(event.target.value as string)
             }
           >
@@ -80,6 +102,14 @@ const HomePage = () => {
                     Add Component
         </Button>
 
+        {Object.values(widgets).map((widget: Widget, index: number) => (
+          <Tooltip key={index} title={widget.name}>
+            <IconButton onClick={() => activateWidget(widget)} disabled={widget.status == WidgetStatus.ACTIVE}>
+              {widget.status == WidgetStatus.ACTIVE ? <VisibilityOffIcon/> : <VisibilityOnIcon/>}
+            </IconButton>
+          </Tooltip>
+        ))}
+
       </Stack>
       <Box p={2} sx={{
         display: 'flex',

geppetto-showcase/src/examples/3d-canvas/SimpleInstancesExample.js

@@ -43,7 +43,7 @@ function loadInstances (){
 
 function getProxyInstances () {
   return window.Instances.map(i => (
-    { instancePath: i.getId(), color: { r: 0, g:1, b: 0, a:1 } }))
+    { instancePath: i.getId(), color: { r: 0, g:1, b: 0, a:1 }, visibility: true }))
 }
 
 const styles = () => ({

geppetto.js/geppetto-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metacell/geppetto-meta-client",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "description": "Geppetto web frontend. Geppetto is an open-source platform to build web-based tools to visualize and simulate neuroscience data and models.",
   "keywords": [
     "geppetto",
@@ -48,8 +48,8 @@
     "less": "^3.9.0"
   },
   "peerDepedencies": {
-    "@metacell/geppetto-meta-core": "1.2.7",
-    "@metacell/geppetto-meta-ui": "1.2.7"
+    "@metacell/geppetto-meta-core": "1.2.8",
+    "@metacell/geppetto-meta-ui": "1.2.8"
   },
   "buildOptions": {
     "emitEntryPoint": true,

geppetto.js/geppetto-client/src/GEPPETTO.js

@@ -129,7 +129,7 @@ const EventsMapping = {
   [Events.Jupyter_geppetto_extension_ready]: EventManager.clientActions.JUPYTER_GEPPETTO_EXTENSION_READY,
 };
 
-export function initGeppetto(useWebsocket = true, loadStyle = true) {
+export function initGeppetto (useWebsocket = true, loadStyle = true) {
   if (!window.GEPPETTO_CONFIGURATION) {
     window.GEPPETTO_CONFIGURATION = {}
   }

geppetto.js/geppetto-client/src/WebsocketMain.js

@@ -12,7 +12,7 @@ import Events from './Events';
 /**
  *
  */
-function createChannel() {
+function createChannel () {
   // Change link from blank to self for GEPPETTO_CONFIGURATION.embedded environments
   if (GEPPETTO_CONFIGURATION.embedded && GEPPETTO_CONFIGURATION.embedderURL !== "/" && typeof handleRequest == 'undefined') {
     if ($.isArray(GEPPETTO_CONFIGURATION.embedderURL)) {
@@ -26,7 +26,7 @@ function createChannel() {
 /**
  * Initialize web socket communication
  */
-export function init() {
+export function init () {
   if (GEPPETTO_CONFIGURATION.contextPath == "/") {
     var host = urljoin(MessageSocket.protocol + window.location.host.replace("8081", "8080"), '/GeppettoServlet');
   } else {

geppetto.js/geppetto-client/src/common/layout/LayoutManager.tsx

@@ -3,21 +3,15 @@ import * as FlexLayout from '@metacell/geppetto-meta-ui/flex-layout/src/index';
 import Actions from '@metacell/geppetto-meta-ui/flex-layout/src/model/Actions';
 import DockLocation from '@metacell/geppetto-meta-ui/flex-layout/src/DockLocation';
 import Model from '@metacell/geppetto-meta-ui/flex-layout/src/model/Model';
-import { WidgetStatus, Widget, ComponentMap, TabsetPosition, IComponentConfig } from './model';
-import { withStyles, createStyles } from '@material-ui/core/styles'
+import {ComponentMap, IComponentConfig, Widget, WidgetStatus} from './model';
+import {createStyles, withStyles} from '@material-ui/core/styles'
 import WidgetFactory from "./WidgetFactory";
 import TabsetIconFactory from "./TabsetIconFactory";
 import defaultLayoutConfiguration from "./defaultLayout";
-import {widget2Node, isEqual, getWidget} from "./utils";
+import {getWidget, widget2Node} from "./utils";
 import * as GeppettoActions from '../actions';
 
-import {
-  layoutActions,
-  removeWidgetFromStore,
-  updateWidget,
-  setLayout,
-  updateLayout,
-} from "./actions";
+import {layoutActions, removeWidgetFromStore, setLayout, updateLayout,} from "./actions";
 
 import {MinimizeHelper} from "./helpers/MinimizeHelper";
 import {createTabSet, moveWidget} from "./helpers/FlexLayoutHelper";
@@ -116,7 +110,8 @@ class LayoutManager {
         widget2Node(widgetConfiguration),
         widgetConfiguration.panelName,
         DockLocation.CENTER,
-        widgetConfiguration.pos
+        widgetConfiguration.pos,
+        widgetConfiguration.status == WidgetStatus.ACTIVE
       )
     );
   }

geppetto.js/geppetto-client/src/common/layout/reducer.ts

@@ -131,7 +131,7 @@ export const widgets = (state: WidgetMap = {}, action) => {
           updatedWidgets[node.getId()].status = WidgetStatus.MAXIMIZED;
         } else if (parent.getType() === 'border') {
           updatedWidgets[node.getId()].status = WidgetStatus.MINIMIZED;
-        } else if (node.isVisible()) {
+        } else if (parent.getSelectedNode().getId() == node.getId()) {
           updatedWidgets[node.getId()].status = WidgetStatus.ACTIVE;
         } else {
           updatedWidgets[node.getId()].status = WidgetStatus.HIDDEN;