Fix plot display

webapp/components/AddPlotMenu.js

@@ -33,9 +33,9 @@ export default class AddPlotMenu extends Component {
   }
 
   dontGoToSameHostTwice (widget) {
-    const { instancePaths } = widget;
+    const { instancePaths } = widget.config;
 
-    return instancePaths && instancePaths.indexOf(this.props.instancePath) == -1;
+    return widget.instancePaths && instancePaths.indexOf(this.props.instancePath) == -1;
   }
 
   goOnlyToTimeseriesWidgets (widget) {

webapp/components/ListMenu.js

@@ -57,6 +57,7 @@ export default class ListMenuComponent extends React.Component {
           parameters: [addToPlot, {
             hostId: availablePlot.id,
             instancePath: this.props.entity.path,
+            component: 'Plot',
             type: 'timeseries',
           }],
         },

webapp/components/NWBPlot.js

@@ -47,7 +47,7 @@ export default class NWBTimeseriesPlotComponent extends React.Component {
     const plots = instancePaths.map(instancePath => ({
       x: `${instancePath}.timestamps`,
       y: `${instancePath}.data`,
-      lineOptions: { color: this.props.modelSettings[instancePath].color },
+      lineOptions: { color: this.props.modelSettings[instancePath]?.color },
     }));
 
     return (

webapp/components/configuration/AddToPlotComponent.jsx

@@ -3,11 +3,11 @@ import React from 'react';
 import AddPlotMenuConnect from '../reduxconnect/AddPlotMenuConnect';
 
 const AddToPlotComponent = ({ icon, label, action, tooltip }) => ({ value }) => (
-    <AddPlotMenuConnect 
-      icon={icon}  
-      action={action} 
-      instancePath={value.path}
-    />
-  )
+  <AddPlotMenuConnect 
+    icon={icon}  
+    action={action} 
+    instancePath={value.path}
+  />
+)
 
 export default AddToPlotComponent;

webapp/components/reduxconnect/AddPlotMenuConnect.js

@@ -3,7 +3,7 @@ import AddPlotMenu from '../AddPlotMenu';
 
 const mapStateToProps = (state, ownProps) => ({
   icon: ownProps.icon,
-  widgets: Object.values(state.flexlayout.widgets).filter(w => w.component == 'Plot').map(w => ({ instancePaths: w.instancePaths, id: w.id, name: w.name })),
+  widgets: Object.values(state.flexlayout.widgets).filter(w => w.component == 'Plot').map(w => ({ instancePaths: w.config.instancePaths, id: w.id, name: w.name })),
 });
 
 export default connect(mapStateToProps)(AddPlotMenu);

webapp/components/reduxconnect/ListMenuContainer.js

@@ -5,7 +5,7 @@ import { updateSettings } from '../../redux/actions/nwbfile';
 
 const mapStateToProps = state => ({
   modelSettings: state.nwbfile.modelSettings,
-  widgets: Object.values(state.widgets).filter(w => w.component == 'Plot').map(w => ({ instancePaths: w.instancePaths, id: w.id, name: w.name })),
+  widgets: Object.values(state.widgets).filter(w => w.component == 'Plot').map(w => ({ instancePaths: w.config.instancePaths, id: w.id, name: w.name })),
 });
 
 const mapDispatchToProps = dispatch => ({

webapp/package.json

@@ -19,9 +19,9 @@
     "@material-ui/core": "4.12.1",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@metacell/geppetto-meta-client": "1.0.0-final",
-    "@metacell/geppetto-meta-core": "1.0.0-final",
-    "@metacell/geppetto-meta-ui": "1.0.0-final",
+    "@metacell/geppetto-meta-client": "1.2.4",
+    "@metacell/geppetto-meta-core": "1.2.4",
+    "@metacell/geppetto-meta-ui": "1.2.4",
     "griddle-react": "^1.13.1",
     "jszip": "^3.2.1",
     "less-vars-to-js": "^1.3.0",

webapp/redux/actions/widgets.js

@@ -4,22 +4,23 @@ import * as LayoutActions from "@metacell/geppetto-meta-client/common/layout/act
 
 export const {
   ADD_WIDGET,
-  ADD_PLOT_TO_EXISTING_WIDGET,
   UPDATE_WIDGET,
   SET_LAYOUT,
   DESTROY_WIDGET,
   ACTIVATE_WIDGET,
   RESET_LAYOUT
 } = LayoutActions.layoutActions;
 
+export const ADD_PLOT_TO_EXISTING_WIDGET = "ADD_PLOT_TO_EXISTING_WIDGET";
+
 export const showPlot = ({ path, title }) => ({
   type: ADD_WIDGET,
   data: {
     id: `plot@${path}`,
     config: { instancePaths: [path] },
 
     component: "Plot",
-    type: "TimeSeries",
+
     name: title || path.slice(FILEVARIABLE_LENGTH),
     status: WidgetStatus.ACTIVE,
     panelName: "bottomPanel"
@@ -31,17 +32,15 @@ export const addToPlot = ({ hostId, instancePath }) => ({
   data: {
     hostId,
     config: { instancePath },
-    type: "TimeSeries"
+    component: "Plot" 
   }
 });
 
 export const plotAll = ({ plots, title }) => ({
   type: ADD_WIDGET,
   data: {
     id: `plot@${plots.join("-")}`,
-
     component: "Plot",
-    type: "TimeSeries",
     name: title,
     status: WidgetStatus.ACTIVE,
     panelName: "bottomPanel",
@@ -55,7 +54,7 @@ export const showImageSeries = ({ path, showDetail }) => ({
     id: `img@${path}`,
 
     component: "ImageSeries",
-    type: "ImageSeries",
+
     name: path.slice(FILEVARIABLE_LENGTH),
     status: WidgetStatus.ACTIVE,
     panelName: "bottomPanel",

webapp/redux/middleware/nwbMiddleware.js

@@ -32,6 +32,8 @@ import { NOTEBOOK_READY, notebookReady } from "../actions/notebook";
 import { WidgetStatus } from "@metacell/geppetto-meta-client/common/layout/model";
 
 import { getNotebookPath } from "../../services/NotebookService";
+import { Layout } from "@metacell/geppetto-meta-ui/flex-layout/src";
+import { call } from "file-loader";
 
 export const DEFAULT_WIDGETS = {
   python: {
@@ -87,20 +89,24 @@ export async function resolveImportValue (typePath, callback) {
 
 }
 
-function handleShowWidget (store, next, action) {
+function handleShowWidget (store, next, action, callback) {
   // const instance = Instances.getInstance(path);
-  if (action.data.type === "TimeSeries") {
+  if (action.data.component === "Plot") {
     // Instances.getInstance(path).getType().wrappedObj.name
-    return handlePlotTimeseries(store, next, action);
+    return handlePlotTimeseries(store, next, action, callback);
   }
-  if (action.data.type === "ImageSeries") {
+  if (action.data.component === "ImageSeries") {
     // Instances.getInstance(path).getType().wrappedObj.name
     action.data.config.showDetail
       && store.dispatch(updateDetailsWidget(action.data.config.instancePath));
     return handleImportTimestamps(store, next, action);
   }
   if (action.data.id) {
-    return next(action);
+    if (callback) {
+      callback();
+    }
+    next(action);
+
   }
 }
 
@@ -136,7 +142,7 @@ function fileLoadedLayout () {
   return widgets;
 }
 
-async function handlePlotTimeseries (store, next, action) {
+async function handlePlotTimeseries (store, next, action, callback) {
   // If a set of actions are passed, loop through them and execute each one independently
 
   async function retrieveImportValue (data, data_path) {
@@ -145,6 +151,7 @@ async function handlePlotTimeseries (store, next, action) {
         GEPPETTO.ModelFactory.deleteInstance(data);
         Instances.getInstance(data_path);
         resolve();
+
       });
     });
   }
@@ -169,14 +176,22 @@ async function handlePlotTimeseries (store, next, action) {
   }
   if (promises.length) {
     store.dispatch(waitData("Loading timeseries data...", action.type));
-    Promise.allSettled(promises).then(() => next(action));
+    Promise.allSettled(promises).then(() => {
+      next(action);
+      if (callback){
+        callback();
+      }
+    });
   } else {
     next(action);
+    if (callback){
+      callback();
+    }
   }
 }
 
 function handleImportTimestamps (store, next, action) {
-  const time_path = `${action.data.instancePath}.timestamps`;
+  const time_path = `${action.data.config.instancePath}.timestamps`;
   const timestamps = Instances.getInstance(time_path);
 
   if (timestamps.getValue().resolve == "ImportValue") {
@@ -232,8 +247,21 @@ const nwbMiddleware = store => next => action => {
 
   case UPDATE_WIDGET:
   case ADD_WIDGET:
-  case ADD_PLOT_TO_EXISTING_WIDGET:
     return handleShowWidget(store, next, action);
+
+  case ADD_PLOT_TO_EXISTING_WIDGET: {
+    const widgets = store.getState().widgets;
+    const widget = widgets[action.data.hostId];
+
+    const instancePaths = [...widget.config.instancePaths, action.data.config.instancePath];
+    const newId = 'plot@' + instancePaths.join('-');
+    return handleShowWidget(store, next, LayoutActions.addWidget({ 
+      ...widget, 
+      id: newId,
+      name: widget.name + '+', 
+      config: { ...widget.config, instancePaths } 
+    }), () => next(LayoutActions.deleteWidget(action.data.hostId)));
+  }
   case GeppettoActions.backendActions.MODEL_LOADED:
     next(action);
     next(nwbFileLoaded());

webapp/redux/reducers/all.js

@@ -1,9 +1,8 @@
-import { combineReducers } from 'redux';
-
 import general from './general';
 import nwbfile from './nwbfile';
 import notebook from './notebook';
 
+
 export default {
   general,
   nwbfile,