From 946edc9736d147cc339777be1de5f8e967ad593f Mon Sep 17 00:00:00 2001 From: afonso Date: Mon, 12 Dec 2022 17:38:39 +0000 Subject: [PATCH 1/5] #442 feat: Remove unusual material UI theme references --- geppetto-showcase/src/App.js | 2 -- .../src/components/showcase/Code.jsx | 2 +- .../src/camera-controls/CameraControls.js | 11 ++++---- .../src/capture-controls/CaptureControls.js | 20 ++++++++------- .../geppetto-ui/src/common/CustomToolbar.js | 25 +++++++++++-------- .../subcomponents/ConnectivityDeck.js | 8 +++--- .../subcomponents/MenuButton.js | 2 +- 7 files changed, 37 insertions(+), 33 deletions(-) diff --git a/geppetto-showcase/src/App.js b/geppetto-showcase/src/App.js index 1dec4f9d5..b6ed810e2 100644 --- a/geppetto-showcase/src/App.js +++ b/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); diff --git a/geppetto-showcase/src/components/showcase/Code.jsx b/geppetto-showcase/src/components/showcase/Code.jsx index 5abe963a4..d9a68f1bd 100644 --- a/geppetto-showcase/src/components/showcase/Code.jsx +++ b/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), diff --git a/geppetto.js/geppetto-ui/src/camera-controls/CameraControls.js b/geppetto.js/geppetto-ui/src/camera-controls/CameraControls.js index e7645036e..89c068f91 100644 --- a/geppetto.js/geppetto-ui/src/camera-controls/CameraControls.js +++ b/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,6 +140,9 @@ class CameraControls extends Component { icon: null, }); } + + const buttonStyles = { color: '#fc6320', } + return (
{buttons.map((value, index) => ( @@ -150,7 +150,8 @@ class CameraControls extends Component { 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); \ No newline at end of file +export default CameraControls; \ No newline at end of file diff --git a/geppetto.js/geppetto-ui/src/capture-controls/CaptureControls.js b/geppetto.js/geppetto-ui/src/capture-controls/CaptureControls.js index 0148e8dc8..dcd96501c 100644 --- a/geppetto.js/geppetto-ui/src/capture-controls/CaptureControls.js +++ b/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 ? ( @@ -65,7 +64,8 @@ class CaptureControls extends Component { @@ -78,14 +78,16 @@ class CaptureControls extends Component { && captureControlsHandler(captureControlsActionsDownloadVideo())} - className={`${classes.button} download squareB`} + className={`download squareB`} + style={buttonStyles} tooltip={"Download"} icon={faDownload}/> } captureControlsHandler(captureControlsActionsDownloadScreenshot())} - className={`${classes.button} screenshot squareB`} + className={`screenshot squareB`} + style={buttonStyles} tooltip={"Screenshot"} icon={faCamera}/>
@@ -103,4 +105,4 @@ CaptureControls.propTypes = { }; -export default withStyles(styles)(CaptureControls); \ No newline at end of file +export default CaptureControls; \ No newline at end of file diff --git a/geppetto.js/geppetto-ui/src/common/CustomToolbar.js b/geppetto.js/geppetto-ui/src/common/CustomToolbar.js index d781eaa72..e08a0e698 100644 --- a/geppetto.js/geppetto-ui/src/common/CustomToolbar.js +++ b/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 ( -
- -
+
+ +
{customButtons.map(customButton => customButton.action()} className={classes.button} + style={bStyles} tooltip={customButton.tooltip} icon={customButton.icon} /> diff --git a/geppetto.js/geppetto-ui/src/connectivity-viewer/subcomponents/ConnectivityDeck.js b/geppetto.js/geppetto-ui/src/connectivity-viewer/subcomponents/ConnectivityDeck.js index 15cfa0858..44bafc68f 100644 --- a/geppetto.js/geppetto-ui/src/connectivity-viewer/subcomponents/ConnectivityDeck.js +++ b/geppetto.js/geppetto-ui/src/connectivity-viewer/subcomponents/ConnectivityDeck.js @@ -27,7 +27,7 @@ const styles = theme => ({ fontSize:"40px", fontWeight: "300", marginTop: theme.spacing(10), - color: theme.palette.button.main, + color: '#fc6320', textAlign: "center" }, cardDeck:{ @@ -49,7 +49,7 @@ const styles = theme => ({ verticalAlign: "top", "&:hover":{ border:"1px solid", - borderColor:theme.palette.button.main + borderColor:'#fc6320' } }, img: { @@ -58,7 +58,7 @@ const styles = theme => ({ width: '100px', }, cardText: { textAlign: 'center', color: "white" }, - cardTitle: { marginTop: theme.spacing(1), color: theme.palette.button.main, marginBottom:"0.5em" }, + cardTitle: { marginTop: theme.spacing(1), color: '#fc6320', marginBottom:"0.5em" }, cardAction: { height: "100%" }, cardImgTopCenterBlock:{ display: "block", @@ -70,7 +70,7 @@ const styles = theme => ({ button: { padding: theme.spacing(1), top: theme.spacing(0), - color: theme.palette.button.main + color: '#fc6320' }, }); diff --git a/geppetto.js/geppetto-ui/src/connectivity-viewer/subcomponents/MenuButton.js b/geppetto.js/geppetto-ui/src/connectivity-viewer/subcomponents/MenuButton.js index 7e0bd1b10..4604d7c2c 100644 --- a/geppetto.js/geppetto-ui/src/connectivity-viewer/subcomponents/MenuButton.js +++ b/geppetto.js/geppetto-ui/src/connectivity-viewer/subcomponents/MenuButton.js @@ -8,7 +8,7 @@ const styles = theme => ({ button: { padding: theme.spacing(1), top: theme.spacing(0), - color: theme.palette.button.main + color: '#fc6320' }, }); From 952a04eef6358160ad635da0e5c3818f61a3c7b5 Mon Sep 17 00:00:00 2001 From: afonso Date: Mon, 12 Dec 2022 18:42:58 +0000 Subject: [PATCH 2/5] #443 feat: Add ability to customize DicomViewer toolbar --- .../dicom-viewer/DicomViewerExample.js | 1 + .../geppetto-ui/src/3d-canvas/Canvas.js | 2 +- .../src/dicom-viewer/DicomViewer.js | 44 ++++++++++++++++++- 3 files changed, 44 insertions(+), 3 deletions(-) diff --git a/geppetto-showcase/src/examples/dicom-viewer/DicomViewerExample.js b/geppetto-showcase/src/examples/dicom-viewer/DicomViewerExample.js index 7e7c2c2b4..72777ff0a 100644 --- a/geppetto-showcase/src/examples/dicom-viewer/DicomViewerExample.js +++ b/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);' } }} />
) : diff --git a/geppetto.js/geppetto-ui/src/3d-canvas/Canvas.js b/geppetto.js/geppetto-ui/src/3d-canvas/Canvas.js index 9c12e7586..631b1a766 100644 --- a/geppetto.js/geppetto-ui/src/3d-canvas/Canvas.js +++ b/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({ /** diff --git a/geppetto.js/geppetto-ui/src/dicom-viewer/DicomViewer.js b/geppetto.js/geppetto-ui/src/dicom-viewer/DicomViewer.js index adf0d9aff..4827f193b 100644 --- a/geppetto.js/geppetto-ui/src/dicom-viewer/DicomViewer.js +++ b/geppetto.js/geppetto-ui/src/dicom-viewer/DicomViewer.js @@ -692,7 +692,7 @@ class DicomViewer extends Component { } render () { - const { classes } = this.props; + const { classes, toolbarOptions } = this.props; const { fullScreen } = this.state; const customButtons = this.getCustomButtons(); @@ -711,6 +711,16 @@ class DicomViewer extends Component { width: '100%', }; + const toolbar = toolbarOptions && toolbarOptions.instance ? ( + + ) : ; + return (
- + {toolbar}
Date: Mon, 12 Dec 2022 19:29:19 +0000 Subject: [PATCH 3/5] #445 feat: Add ability to customize BigImageViewer toolbar --- .../big-image-viewer/BigImageViewerExample.js | 6 ++- .../src/big-image-viewer/BigImageViewer.js | 46 +++++++++++++++++-- 2 files changed, 45 insertions(+), 7 deletions(-) diff --git a/geppetto-showcase/src/examples/big-image-viewer/BigImageViewerExample.js b/geppetto-showcase/src/examples/big-image-viewer/BigImageViewerExample.js index 257e1ffbc..8c5f6f2c7 100644 --- a/geppetto-showcase/src/examples/big-image-viewer/BigImageViewerExample.js +++ b/geppetto-showcase/src/examples/big-image-viewer/BigImageViewerExample.js @@ -11,7 +11,8 @@ 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 { @@ -19,7 +20,8 @@ class BigImageViewerExample extends Component { const { classes } = this.props; return (
- +
); } diff --git a/geppetto.js/geppetto-ui/src/big-image-viewer/BigImageViewer.js b/geppetto.js/geppetto-ui/src/big-image-viewer/BigImageViewer.js index 761022b7a..0e283255e 100644 --- a/geppetto.js/geppetto-ui/src/big-image-viewer/BigImageViewer.js +++ b/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 ? ( + + ) : ; return (
- + {toolbar}
Date: Mon, 12 Dec 2022 20:01:20 +0000 Subject: [PATCH 4/5] #446 fix: Fix connectivity viewer circular dependency --- .../ConnectivityShowcaseMatrix.js | 65 ------------------- .../src/connectivity-viewer/README.md | 8 --- .../subcomponents/ConnectivityPlot.js | 3 +- 3 files changed, 1 insertion(+), 75 deletions(-) delete mode 100644 geppetto-showcase/src/examples/connectivity-viewer/ConnectivityShowcaseMatrix.js diff --git a/geppetto-showcase/src/examples/connectivity-viewer/ConnectivityShowcaseMatrix.js b/geppetto-showcase/src/examples/connectivity-viewer/ConnectivityShowcaseMatrix.js deleted file mode 100644 index d9d3fc00a..000000000 --- a/geppetto-showcase/src/examples/connectivity-viewer/ConnectivityShowcaseMatrix.js +++ /dev/null @@ -1,65 +0,0 @@ -import React, { Component } from 'react'; -// import { Matrix } from '../../layouts/Matrix'; -import { Matrix } from '@metacell/geppetto-meta-ui/connectivity-viewer/layouts/Matrix'; -// import ConnectivityComponent from '../../ConnectivityComponent'; -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 Resources from '@metacell/geppetto-meta-core/Resources'; - -const styles = { - connectivity: { - display: 'flex', - alignItems: 'stretch', - height: '600px', - width: '500px', - }, -}; - -class ConnectivityShowcaseMatrix extends Component { - constructor (props) { - super(props); - // Manager.loadModel(model); - this.linkType = this.linkType.bind(this); - } - - matrixHandler = () => { - console.log('Mock call to SceneController') - } - - linkType (c) { - return ModelFactory.getAllVariablesOfType( - c.getParent(), - ModelFactory.geppettoModel.neuroml.synapse - )[0].getId(); - } - - render () { - const data = Instances[0]; - const layout = new Matrix(); - const colors = ['#cb0000', '#003398']; - const names = ['pyramidals_48', 'baskets_12']; - const { classes } = this.props; - - return ( -
- -
- ); - } -} - -export default withStyles(styles)(ConnectivityShowcaseMatrix); diff --git a/geppetto.js/geppetto-ui/src/connectivity-viewer/README.md b/geppetto.js/geppetto-ui/src/connectivity-viewer/README.md index 10945514a..8738e7f7a 100644 --- a/geppetto.js/geppetto-ui/src/connectivity-viewer/README.md +++ b/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). diff --git a/geppetto.js/geppetto-ui/src/connectivity-viewer/subcomponents/ConnectivityPlot.js b/geppetto.js/geppetto-ui/src/connectivity-viewer/subcomponents/ConnectivityPlot.js index 3ab1dc8d6..65cc14cff 100644 --- a/geppetto.js/geppetto-ui/src/connectivity-viewer/subcomponents/ConnectivityPlot.js +++ b/geppetto.js/geppetto-ui/src/connectivity-viewer/subcomponents/ConnectivityPlot.js @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import * as util from '../../utilities'; -import Instance from '@metacell/geppetto-meta-core/model/Instance'; import { withStyles } from '@material-ui/core'; import IconText from './IconText'; import Grid from '@material-ui/core/Grid'; @@ -28,7 +27,7 @@ class ConnectivityPlot extends Component { this.defaultOptions = { nodeType: function (node) { - if (node instanceof Instance) { + if (typeof node.getParent === 'function') { return node.getParent().getId(); } else { return node.getPath().split('_')[0]; From 3523f978468095e23f79c0781901274166b1ad16 Mon Sep 17 00:00:00 2001 From: afonso Date: Mon, 12 Dec 2022 20:42:54 +0000 Subject: [PATCH 5/5] #444 feat: Allow dicom viewer loader customization --- .../src/dicom-viewer/DicomViewer.js | 62 ++++++++++++++++++- 1 file changed, 59 insertions(+), 3 deletions(-) diff --git a/geppetto.js/geppetto-ui/src/dicom-viewer/DicomViewer.js b/geppetto.js/geppetto-ui/src/dicom-viewer/DicomViewer.js index 4827f193b..f2240fe31 100644 --- a/geppetto.js/geppetto-ui/src/dicom-viewer/DicomViewer.js +++ b/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.setState({ ready: true }) }) .catch(function (error) { window.console.log('oops... something went wrong...'); @@ -692,7 +695,7 @@ class DicomViewer extends Component { } render () { - const { classes, toolbarOptions } = this.props; + const { classes, toolbarOptions, loaderOptions } = this.props; const { fullScreen } = this.state; const customButtons = this.getCustomButtons(); @@ -710,6 +713,18 @@ class DicomViewer extends Component { height: '100%', width: '100%', }; + + const loader = loaderOptions && loaderOptions.instance ? ( + + ) : const toolbar = toolbarOptions && toolbarOptions.instance ? ( + {!this.state.ready && loader} {toolbar}
- ); + ) } } @@ -832,7 +848,8 @@ DicomViewer.defaultProps = { onShiftClick: 'goToPoint', onDoubleClick: 'goToPoint', showDownloadButton: false, - toolbarOptions: null + toolbarOptions: null, + loaderOptions: null }; @@ -918,6 +935,45 @@ DicomViewer.propTypes = { */ buttonStyles: PropTypes.shape({}), }), + /** + * Options to customize the loader + */ + loaderOptions: PropTypes.shape({ + /** + * Reference to toolbar component + */ + instance: PropTypes.elementType, + /** + * Custom toolbar props + */ + props: PropTypes.shape({}), + /** + * 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);