Release/1.2.0

examples/redux-react-app/package.json

@@ -15,9 +15,9 @@
     "@fortawesome/react-fontawesome": "^0.1.9",
     "@material-ui/core": "^4.9.14",
     "@material-ui/icons": "^4.11.2",
-    "@metacell/geppetto-meta-client": "^1.1.0",
-    "@metacell/geppetto-meta-core": "^1.1.0",
-    "@metacell/geppetto-meta-ui": "^1.1.0",
+    "@metacell/geppetto-meta-client": "file:.yalc/@metacell/geppetto-meta-client",
+    "@metacell/geppetto-meta-core": "file:.yalc/@metacell/geppetto-meta-core",
+    "@metacell/geppetto-meta-ui": "file:.yalc/@metacell/geppetto-meta-ui",
     "@nosferatu500/react-sortable-tree": "3.0.5",
     "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
     "@reduxjs/toolkit": "^1.5.1",

examples/redux-react-app/src/app/icons.js

@@ -0,0 +1,17 @@
+export const CloseIcon = (props) => (
+  <svg
+    width={8}
+    height={8}
+    fill="none"
+    stroke="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="m.75.75 6.5 6.5m0-6.5-6.5 6.5"
+      stroke="#000"
+      fillOpacity={0.2}
+      strokeWidth={1.5}
+    />
+  </svg>
+);

examples/redux-react-app/src/app/showcase.js

@@ -3,6 +3,8 @@ import { getLayoutManagerInstance } from "@metacell/geppetto-meta-client/common/
 import CircularProgress from '@material-ui/core/CircularProgress';
 import { useStore } from 'react-redux';
 import { makeStyles } from '@material-ui/core/styles';
+import { Button } from '@material-ui/core';
+import { CloseIcon } from './icons';
 
 const useStyles = makeStyles({
     layoutContainer: {
@@ -24,24 +26,69 @@ const MainLayout = () => {
     const store = useStore();
     const [Component, setComponent] = useState(undefined);
 
-    useEffect(() => {
-        // Workaround because getLayoutManagerInstance 
-        // is undefined when calling it in global scope
-        // Need to wait until store is ready ...
-        // TODO: find better way to retrieve the LayoutManager component!
-        if (Component === undefined) {
-            const myManager = getLayoutManagerInstance();
-            if (myManager) {
-                setComponent(myManager.getComponent());
-            }
-        }
-    }, [store])
+  useEffect(() => {
+    // Workaround because getLayoutManagerInstance
+    // is undefined when calling it in global scope
+    // Need to wait until store is ready ...
+    // TODO: find better way to retrieve the LayoutManager component!
+    if (Component === undefined) {
+      const myManager = getLayoutManagerInstance();
+      if (myManager) {
+        setComponent(
+          myManager.getComponent(
+            {
+            icons: {
+              close: <CloseIcon />,
+            },
+            tabSetButtons: [
+              ({ panel }) => {
+                return (
+                  <Button
+                    key={panel.getId()}
+                    variant="outlined"
+                    color="primary"
+                    onClick={() => {
+                      console.log('tab-set button')
+                    }}
+                  >
+                    Add
+                  </Button>
+                );
+              },
+            ],
+            tabButtons: [
+              ({ panel }) => {
+                return (
+                  <Button
+                    key={panel.getId()}
+                    variant="filled"
+                    color="secondary"
+                    onClick={() => {
+                      console.log('tab button')
+                    }}
+                  >
+                    Minimize
+                  </Button>
+                );
+              },
+            ],
+          })
+        );
+      }
+    }
+  }, [Component, store]);
+  console.log(Component, 'Component');
+
 
-    return (
-        <div className={classes.layoutContainer}>
-            {Component === undefined ? <CircularProgress /> : <Component />}
-        </div>
-    );
-}
+  return (
+    <div className={classes.layoutContainer}>
+      {Component === undefined ? (
+        <CircularProgress />
+      ) : (
+        <Component />
+      )}
+    </div>
+  );
+};
 
 export default MainLayout;

geppetto-showcase/assets/brain_mri.dzi

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><Image xmlns="http://schemas.microsoft.com/deepzoom/2008" TileSize="128" Overlap="2" Format="png"><Size Width="1000" Height="714"/></Image>

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

@@ -157,6 +157,7 @@ class SimpleInstancesExample extends Component {
             onSelection={this.onSelection}
             onMount={this.onMount}
             onHoverListeners={{ 'hoverId':this.hoverHandler }}
+            dracoDecoderPath={'https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/jsm/libs/draco/'}
           />
         </>
       </div>

geppetto-showcase/src/examples/big-image-viewer/BigImageViewerExample.js

@@ -11,15 +11,16 @@ const styles = {
   },
 };
 
-const data = 'https://s3.amazonaws.com/patient-hm-august-2017/Histology/HM_1243_FLIPPED_DZ_tif.dzi';
+const data = `${window.location.origin}/assets/brain_mri.dzi`;
 
 class BigImageViewerExample extends Component {
 
   render () {
     const { classes } = this.props;
     return (
       <div style={{ position: 'relative' }} className={classes.bigImageViewer}>
-        <BigImageViewer id="BigImageViewerContainer" data={data} />
+        <BigImageViewer id="BigImageViewerContainer" data={data}
+          toolbarOptions={{ innerDivStyles: { backgroundColor: 'rgb(0,0,0,0);' } }}/>
       </div>
     );
   }

geppetto-showcase/src/examples/connectivity-viewer/ConnectivityShowcaseForce.js

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
+import ModelFactory from '@metacell/geppetto-meta-core/ModelFactory';
+import Manager from '@metacell/geppetto-meta-core/ModelManager';
+import Resources from '@metacell/geppetto-meta-core/Resources';
 import model from './model';
 import { Force } from '@metacell/geppetto-meta-ui/connectivity-viewer/layouts/Force';
 import ConnectivityComponent from '@metacell/geppetto-meta-ui/connectivity-viewer/ConnectivityComponent';
 import { withStyles } from '@material-ui/core';
-import ModelFactory from '@metacell/geppetto-meta-core/ModelFactory';
-import Manager from '@metacell/geppetto-meta-core/ModelManager';
-import Resources from '@metacell/geppetto-meta-core/Resources';
 
 const styles = {
   connectivity: {

geppetto-showcase/src/examples/dicom-viewer/DicomViewerExample.js

@@ -42,6 +42,7 @@ export default class DicomViewerExample extends Component {
           onCtrlClick="toggleMode"
           showDownloadButton={true}
           onLoaded={this.onLoaded}
+          toolbarOptions={{ innerDivStyles: { backgroundColor: 'rgb(0,0,0,0);' } }}
         />
       </div>
     ) : <Loader/>

geppetto.js/geppetto-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metacell/geppetto-meta-client",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "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",
@@ -27,13 +27,11 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.1.3",
-    "@metacell/geppetto-meta-core": "1.1.0",
-    "@metacell/geppetto-meta-ui": "1.1.0",
     "pako": "^1.0.3",
     "react": "^17.0.2",
+    "react-redux": "^7.2.3",
     "react-rnd": "^7.3.0",
     "redux": "^4.1.0",
-    "react-redux": "^7.2.3",
     "url-join": "^4.0.0"
   },
   "devDependencies": {
@@ -49,6 +47,10 @@
     "jest": "^24.9.0",
     "less": "^3.9.0"
   },
+  "peerDepedencies": {
+    "@metacell/geppetto-meta-core": "1.2.0",
+    "@metacell/geppetto-meta-ui": "1.2.0"
+  },
   "buildOptions": {
     "emitEntryPoint": true,
     "compile": {

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

@@ -3,7 +3,7 @@ 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 } from './model';
+import { WidgetStatus, Widget, ComponentMap, TabsetPosition, IComponentConfig } from './model';
 import { withStyles, createStyles } from '@material-ui/core/styles'
 import WidgetFactory from "./WidgetFactory";
 import TabsetIconFactory from "./TabsetIconFactory";
@@ -107,33 +107,80 @@ class LayoutManager {
    *
    * @param panel
    * @param renderValues
+   * @param tabSetButtons
    */
-  onRenderTabSet = (panel, renderValues) => {
-    if (panel.getType() === "tabset" && this.enableMinimize) {
-      if (panel.getChildren().length > 0) {
-        renderValues.buttons.push(<div key={panel.getId()} className="fa fa-window-minimize customIconFlexLayout"
-          onClick={() => {
-            this.minimizeWidget(panel.getActiveNode().getId())
-          }} />);
+  onRenderTabSet = (panel, renderValues, tabSetButtons) => {
+    if (panel.getType() === 'tabset') {
+      if (this.enableMinimize) {
+        if (panel.getChildren().length > 0) {
+          renderValues.buttons.push(
+            <div
+              key={panel.getId()}
+              className="fa fa-window-minimize customIconFlexLayout"
+              onClick={() => {
+                this.minimizeWidget(panel.getActiveNode().getId());
+              }}
+            />
+          );
+        }
+      }
+
+      if (Array.isArray(tabSetButtons) && tabSetButtons.length > 0) {
+        tabSetButtons.forEach(Button => {
+          renderValues.stickyButtons.push(
+            <Button key={panel.getId()} panel={panel} />
+          );
+        });
       }
     }
-  }
+  };
+
+  /**
+   * Handle rendering of tab set.
+   *
+   * @param panel
+   * @param renderValues
+   * @param tabButtons
+   */
+  onRenderTab = (panel, renderValues, tabButtons) => {
+    if (panel.getType() === 'tab') {
+      if (Array.isArray(tabButtons) && tabButtons.length > 0) {
+        tabButtons.forEach(Button => {
+          renderValues.buttons.push(
+            <Button key={panel.getId()} panel={panel} />
+          );
+        });
+      }
+    }
+  };
 
   /**
    * Layout wrapper component
    *
    * @memberof Component
    *
    */
-  Component = (layoutManager: LayoutManager) => ({ classes }) => (
+  Component = (layoutManager: LayoutManager, config?: IComponentConfig) => ({
+    classes,
+  }) => (
     <div className={classes.container}>
       <div className={classes.flexlayout}>
         <FlexLayout.Layout
           model={this.model}
           factory={this.factory}
+          icons={config?.icons}
           // iconFactory={layoutManager.iconFactory.bind(this)}
           onAction={action => layoutManager.onAction(action)}
-          onRenderTab={(node, renderValues) => layoutManager.onRenderTabSet(node, renderValues)}
+          onRenderTab={(node, renderValues) =>
+            layoutManager.onRenderTab(node, renderValues, config?.tabButtons)
+          }
+          onRenderTabSet={(node, renderValues) => {
+            layoutManager.onRenderTabSet(
+              node,
+              renderValues,
+              config?.tabSetButtons
+            );
+          }}
         />
       </div>
     </div>
@@ -143,7 +190,7 @@ class LayoutManager {
    * Get the layout component.
    * @memberof Control
    */
-  getComponent = () => withStyles(styles)(this.Component(this));
+  getComponent = (config?: IComponentConfig) => withStyles(styles)(this.Component(this, config));
 
   /**
    * Create a new tab set.