Features/442 to 446

geppetto-showcase/package.json

@@ -56,9 +56,9 @@
     "@fortawesome/react-fontawesome": "^0.1.9",
     "@material-ui/core": "4.11.4",
     "@material-ui/icons": "^4.11.2",
-    "@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",
+    "@metacell/geppetto-meta-client": "^1.0.11",
+    "@metacell/geppetto-meta-core": "^1.0.11",
+    "@metacell/geppetto-meta-ui": "^1.0.11",
     "@nosferatu500/react-sortable-tree": "3.0.5",
     "@types/node": "^15.0.2",
     "@types/react": "^17.0.5",

geppetto-showcase/src/App.js

@@ -22,8 +22,6 @@ export default class App extends Component {
         type: 'dark',
         primary: { main: orange[500] },
         secondary: { main: blue[500] },
-        button: { main: '#fc6320' },
-        toolbarBackground: { main: 'rgb(0,0,0,0.5)' },
       },
     });
     theme = responsiveFontSizes(theme);

geppetto-showcase/src/components/showcase/Code.jsx

@@ -15,7 +15,7 @@ const styles = theme => ({
   button: {
     padding: theme.spacing(1),
     top: theme.spacing(0),
-    color: theme.palette.button.main,
+    color: '#fc6320',
   },
   code: {
     paddingTop: theme.spacing(0),

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

@@ -11,15 +11,17 @@ const styles = {
   },
 };
 
-const data = 'https://s3.amazonaws.com/patient-hm-august-2017/Histology/HM_1243_FLIPPED_DZ_tif.dzi';
+// TODO: Update to a neuroscience example
+const data = 'https://raw.githubusercontent.com/openseadragon/openseadragon/a6792138814d1eff5ae4fca526b989fc917245be/test/data/wide.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/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-ui/src/3d-canvas/Canvas.js

@@ -546,7 +546,7 @@ Canvas.propTypes = {
       reset: PropTypes.bool,
     }),
     /**
-     * Options to customize camera controls
+     * Options to customize trackball controls
      */
     trackballControls: PropTypes.shape({
       /**

geppetto.js/geppetto-ui/src/big-image-viewer/BigImageViewer.js

@@ -131,12 +131,21 @@ class BigImageViewer extends Component {
   }
 
   render () {
-    const { classes } = this.props;
+    const { classes, toolbarOptions } = this.props;
     const customButtons = this.getCustomButtons();
+    const toolbar = toolbarOptions && toolbarOptions.instance ? (
+      <toolbarOptions.instance
+        buttons={customButtons}
+        {...toolbarOptions.props}
+      />
+    ) : <CustomToolbar buttons={customButtons} containerStyles={toolbarOptions?.containerStyles}
+      toolBarClassName={toolbarOptions?.toolBarClassName}
+      innerDivStyles={toolbarOptions?.innerDivStyles}
+      buttonStyles={toolbarOptions?.buttonStyles}/>;
 
     return (
       <div className={classes.bigImageViewerContainer}>
-        <CustomToolbar buttons={customButtons} />
+        {toolbar}
         <div
           id={this.props.id + '_component'}
           className={classes.bigImageViewerContent}
@@ -146,9 +155,7 @@ class BigImageViewer extends Component {
   }
 }
 
-BigImageViewer.defaultProps = {
-  settings: [],
-}
+BigImageViewer.defaultProps = { settings: [], toolbarOptions: null }
 
 BigImageViewer.propTypes = {
   /**
@@ -163,6 +170,35 @@ BigImageViewer.propTypes = {
    * All required and optional settings for instantiating a new instance of an OpenSeadragon image viewer
    */
   settings: PropTypes.array,
+  /**
+   * Options to customize the toolbar
+   */
+  toolbarOptions: PropTypes.shape({
+    /**
+     * Reference to toolbar component
+     */
+    instance: PropTypes.elementType,
+    /**
+     * Custom toolbar props
+     */
+    props: PropTypes.shape({}),
+    /**
+     * Styles to be applied to the toolbar container
+     */
+    containerStyles: PropTypes.shape({}),
+    /**
+     * Styles to be applied to the toolbar
+     */
+    toolBarClassName: PropTypes.shape({}),
+    /**
+     * Styles to be applied to the inner div
+     */
+    innerDivStyles: PropTypes.shape({}),
+    /**
+     * Styles to be applied to the buttons
+     */
+    buttonStyles: PropTypes.shape({}),
+  }),
 };
 
 export default withStyles(styles)(BigImageViewer);

geppetto.js/geppetto-ui/src/camera-controls/CameraControls.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import IconButtonWithTooltip from '../common/IconButtonWithTooltip';
-import { withStyles } from '@material-ui/core';
 import {
   faChevronLeft,
   faChevronUp,
@@ -35,7 +34,6 @@ export const cameraControlsActions = {
   WIREFRAME: 'wireframe',
 };
 
-const styles = theme => ({ button: { color: theme.palette.button.main, }, });
 
 class CameraControls extends Component {
   constructor (props) {
@@ -44,7 +42,6 @@ class CameraControls extends Component {
 
   render () {
     const {
-      classes,
       cameraControlsHandler,
       wireframeButtonEnabled,
     } = this.props;
@@ -143,14 +140,18 @@ class CameraControls extends Component {
         icon: null,
       });
     }
+
+    const buttonStyles = { color: '#fc6320', }
+
     return (
       <div className="position-toolbar">
         {buttons.map((value, index) => (
           <IconButtonWithTooltip
             key={index}
             disabled={false}
             onClick={() => cameraControlsHandler(value.action)}
-            className={`${classes.button} ${value.className} squareB`}
+            className={`${value.className} squareB`}
+            style={buttonStyles}
             tooltip={value.tooltip}
             icon={value.icon}
           />
@@ -174,4 +175,4 @@ CameraControls.propTypes = {
   wireframeButtonEnabled: PropTypes.bool,
 };
 
-export default withStyles(styles)(CameraControls);
+export default CameraControls;

geppetto.js/geppetto-ui/src/capture-controls/CaptureControls.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import IconButtonWithTooltip from '../common/IconButtonWithTooltip';
-import { withStyles } from '@material-ui/core';
 import { faCamera, faDotCircle, faDownload, faStop } from '@fortawesome/free-solid-svg-icons';
 
 import './CaptureControls.less';
@@ -29,8 +28,6 @@ export const captureControlsActionsDownloadScreenshot = (filename => ({
 }));
 
 
-const styles = theme => ({ button: { color: theme.palette.button.main, }, });
-
 class CaptureControls extends Component {
   constructor (props) {
     super(props);
@@ -49,14 +46,16 @@ class CaptureControls extends Component {
   }
 
   render () {
-    const { classes, captureControlsHandler } = this.props;
+    const { captureControlsHandler } = this.props;
     const { isRecording, hasRecorded } = this.state;
+    const buttonStyles = { color: '#fc6320', }
 
     const recordButton = !isRecording ? (
       <IconButtonWithTooltip
         disabled={false}
         onClick={this.handleClickRecord}
-        className={`${classes.button} start squareB`}
+        className={`start squareB`}
+        style={buttonStyles}
         tooltip={"Start Recording"}
         icon={faDotCircle}
       />
@@ -65,7 +64,8 @@ class CaptureControls extends Component {
         <IconButtonWithTooltip
           disabled={false}
           onClick={this.handleClickRecord}
-          className={`${classes.button} stop squareB`}
+          className={`stop squareB`}
+          style={buttonStyles}
           tooltip={"Stop recording"}
           icon={faStop}
         />
@@ -78,14 +78,16 @@ class CaptureControls extends Component {
         && <IconButtonWithTooltip
           disabled={false}
           onClick={() => captureControlsHandler(captureControlsActionsDownloadVideo())}
-          className={`${classes.button} download squareB`}
+          className={`download squareB`}
+          style={buttonStyles}
           tooltip={"Download"}
           icon={faDownload}/>
         }
         <IconButtonWithTooltip
           disabled={false}
           onClick={() => captureControlsHandler(captureControlsActionsDownloadScreenshot())}
-          className={`${classes.button} screenshot squareB`}
+          className={`screenshot squareB`}
+          style={buttonStyles}
           tooltip={"Screenshot"}
           icon={faCamera}/>
       </div>
@@ -103,4 +105,4 @@ CaptureControls.propTypes = {
 
 };
 
-export default withStyles(styles)(CaptureControls);
+export default CaptureControls;

geppetto.js/geppetto-ui/src/common/CustomToolbar.js

@@ -7,13 +7,7 @@ const styles = theme => ({
   toolbar: {
     padding: theme.spacing(0),
     marginLeft: theme.spacing(1)
-  },
-  button: {
-    padding: theme.spacing(1),
-    top: theme.spacing(0),
-    color: theme.palette.button.main
-  },
-  toolbarBox: { backgroundColor: theme.palette.toolbarBackground.main },
+  }
 });
 
 
@@ -23,19 +17,28 @@ class CustomToolbar extends Component {
   }
 
   render () {
-    const { classes, buttons, elements } = this.props;
+    const { classes, theme, buttons, elements, containerStyles, toolBarClassName, innerDivStyles, buttonStyles } = this.props;
     const customButtons = buttons ? buttons : [];
     const customElements = elements ? elements : [];
+    const cStyles = containerStyles != null ? containerStyles : {}
+    const tbClassName = toolBarClassName != null ? toolBarClassName : classes.toolbar
+    const dStyles = innerDivStyles != null ? innerDivStyles : { backgroundColor: 'rgb(0,0,0,0.5)' }
+    const bStyles = buttonStyles != null ? buttonStyles : {
+      padding: theme.spacing(1),
+      top: theme.spacing(0),
+      color: '#fc6320'
+    }
     return (
-      <div>
-        <Toolbar className={classes.toolbar}>
-          <div className={classes.toolbarBox}>
+      <div style={cStyles}>
+        <Toolbar className={tbClassName}>
+          <div style={dStyles}>
             {customButtons.map(customButton =>
               <IconButtonWithTooltip
                 key={customButton.id}
                 disabled={false}
                 onClick={() => customButton.action()}
                 className={classes.button}
+                style={bStyles}
                 tooltip={customButton.tooltip}
                 icon={customButton.icon}
               />

geppetto.js/geppetto-ui/src/connectivity-viewer/README.md

@@ -8,14 +8,6 @@ connectivity-viewer/ConnectivityComponent
 
 ## Examples
 
-### Connectivity Matrix
-
-Draws an adjacency matrix where each row [column] correspond to a source [target] node. Therefore, squares at i,j denote a directed edge (or connection) from node i to node j. The rows/columns can be sorted by node name, number of incoming connections, and number of outgoing connections. Circles above each row/column indicate the type of nodes in that row/column. More info on adjacency matrix [here](https://en.wikipedia.org/wiki/Adjacency_matrix).
-
-```
-connectivity-viewer/ConnectivityShowcaseMatrix
-```
-
 ### Connectivity Force
 
 Draws circles for each node, connected by lines for each edge. Nodes repel each other (force directed) in order to reduce clutter, and can be interactively dragged. On hover the node names are revealed as tooltips. More info on force directed graph visualisation [here](https://en.wikipedia.org/wiki/Force-directed_graph_drawing).