Features 443 and 444

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/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,29 +17,38 @@ 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: theme.palette.toolbarBackground.main }
+    const bStyles = buttonStyles != null ? buttonStyles : {
+      padding: theme.spacing(1),
+      top: theme.spacing(0),
+      color: theme.palette.button.main
+    }
     return (
-      <div>
-        <Toolbar className={classes.toolbar}>
-          <div className={classes.toolbarBox}>
-            {customButtons.map(customButton =>
-              <IconButtonWithTooltip
-                key={customButton.id}
-                disabled={false}
-                onClick={() => customButton.action()}
-                className={classes.button}
-                tooltip={customButton.tooltip}
-                icon={customButton.icon}
-              />
-            )}
-            {customElements.map(customElement =>
-              customElement
-            )}
-          </div>
-        </Toolbar>
-      </div>
+        <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}
+                  />
+              )}
+              {customElements.map(customElement =>
+                  customElement
+              )}
+            </div>
+          </Toolbar>
+        </div>
     )
   }
 }

geppetto.js/geppetto-ui/src/dicom-viewer/DicomViewer.js

@@ -18,6 +18,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import CustomToolbar from '../common/CustomToolbar';
 import { createZipFromRemoteFiles } from './util';
+import Loader from "../loader/Loader";
 
 const styles = {
   dicomViewer: {
@@ -55,6 +56,7 @@ class DicomViewer extends Component {
           ? 'coronal'
           : this.props.orientation,
       fullScreen: false,
+      ready: false
     };
 
     // 3d renderer
@@ -330,6 +332,7 @@ class DicomViewer extends Component {
           _this.configureEvents();
           _this.ready = true;
           _this.props.onLoaded(_this.r0.scene)
+          _this.setState({ ready: true })
         })
         .catch(function (error) {
           window.console.log('oops... something went wrong...');
@@ -692,7 +695,7 @@ class DicomViewer extends Component {
   }
 
   render () {
-    const { classes } = this.props;
+    const { classes, toolbarOptions, loaderOptions } = this.props;
     const { fullScreen } = this.state;
     const customButtons = this.getCustomButtons();
 
@@ -711,14 +714,39 @@ class DicomViewer extends Component {
         width: '100%',
       };
 
+    const showLoader = loaderOptions && loaderOptions.showLoader
+
+    const loader = loaderOptions && loaderOptions.instance ? (
+      <loaderOptions.instance
+        {...loaderOptions.props}
+      />
+    ) : <Loader fullscreen={this.state.fullScreen}
+      handleClose={toolbarOptions?.handleClose}
+      messages={toolbarOptions?.messages}
+      messagesInterval={toolbarOptions?.messagesInterval}
+      elapsed={toolbarOptions?.elapsed}
+      backgroundStyle={toolbarOptions?.backgroundStyle}
+    />
+
+    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
         ref={this.containerRef}
         key={this.props.id + '_component'}
         id={this.props.id + '_component'}
         style={containerStyle}
       >
-        <CustomToolbar buttons={customButtons} />
+        {!this.state.ready && showLoader && loader}
+        {toolbar}
         <div
           className={classes.dicomViewer}
           style={{ height: '90%', width: '100%' }}
@@ -809,7 +837,7 @@ class DicomViewer extends Component {
           />
         </div>
       </div>
-    );
+    )
   }
 }
 
@@ -822,6 +850,8 @@ DicomViewer.defaultProps = {
   onShiftClick: 'goToPoint',
   onDoubleClick: 'goToPoint',
   showDownloadButton: false,
+  toolbarOptions: null,
+  loaderOptions: { showLoader: true }
 };
 
 
@@ -878,6 +908,78 @@ DicomViewer.propTypes = {
    * Callback function to be called after load is complete
    */
   onLoaded: PropTypes.func,
+  /**
+   * 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({}),
+  }),
+  /**
+   * Options to customize the loader
+   */
+  loaderOptions: PropTypes.shape({
+    /**
+     * Reference to toolbar component
+     */
+    instance: PropTypes.elementType,
+    /**
+     * Custom loader props
+     */
+    props: PropTypes.shape({}),
+    /**
+     * Bool to control the use of the loader
+     */
+    showLoader: PropTypes.bool,
+    /**
+     * Function to handle the close of the Loader
+     */
+    handleClose: PropTypes.func,
+    /**
+     * Array of Custom messages to display
+     */
+    messages: PropTypes.array,
+    /**
+     * Number of milliseconds between custom messages
+     */
+    messagesInterval: PropTypes.number,
+    /**
+     * Number of the progress value to show in linear determinate (in percentage)
+     */
+    elapsed: PropTypes.number,
+    /**
+     * Style to be applied to the Loader background
+     */
+    backgroundStyle: PropTypes.shape({
+      /**
+       * Loader's background color. Defaults to rgba(255,142,0,0.1)
+       */
+      backgroundColor: PropTypes.string,
+    }),
+
+  }),
 };
 
 export default withStyles(styles)(DicomViewer);