From 31a6b45ca1b387cc58ee0d901aa946a403e95ada Mon Sep 17 00:00:00 2001 From: Filippo Ledda Date: Fri, 10 Jan 2025 12:52:27 +0100 Subject: [PATCH 1/7] Fix requirements --- README.md | 4 ++-- requirements.txt | 6 ++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 41694e6..aa8c5fb 100644 --- a/README.md +++ b/README.md @@ -23,8 +23,8 @@ Alternatively, to see a working demo of nwb explorer without a local setup see t Below you will find the software you need to install to use nwb explorer (and the versions we used): * Git (2+). -* Node (10+) and npm (6+). -* Python 3 (3.7+), pip (20+) +* Node (20+) and npm (7+). +* Python 3 (3.10+), pip (20+) #### Python Dependencies diff --git a/requirements.txt b/requirements.txt index db3be1f..a149c7d 100644 --- a/requirements.txt +++ b/requirements.txt @@ -4,10 +4,12 @@ jupyter-core<6.0.0 # jupyterhub==4.0.2 jupyterthemes==0.20.0 nbclient==0.10.0 +notebook==6.5.7 jupyter_geppetto==1.1.5 pynwb==2.8.3 nwbwidgets==0.11.3 -nwbinspector==0.6.0 +hdmf-zarr==0.10.0 +nwbinspector==0.6.1 quantities pyecore==0.15.2 pygeppetto==0.9.0 @@ -24,7 +26,7 @@ ipyvolume==0.6.2 # ipywidgets>=8.0.0 plotly==5.13.1 tqdm>=4.36.0 -zarr +zarr==2.18.4 tifffile ndx-spectrum ndx-icephys-meta From a4cf940e0e11accc315d3a5d9ea8c6b5e70ef68d Mon Sep 17 00:00:00 2001 From: Filippo Ledda Date: Fri, 10 Jan 2025 18:15:38 +0100 Subject: [PATCH 2/7] Update geppett and mui WIP --- webapp/Main.js | 18 +- webapp/Utils.js | 2 +- webapp/components/AddPlotMenu.js | 5 +- webapp/components/CustomIconComponent.js | 4 +- webapp/components/Dialog.js | 46 +- webapp/components/ErrorDialog.js | 12 +- webapp/components/FileSampleSelector.js | 4 +- webapp/components/FileUrlSelector.js | 12 +- webapp/components/ImageViewer.js | 35 +- webapp/components/NWBListViewer.js | 2 +- webapp/components/PythonConsole.jsx | 6 +- webapp/components/appBar/AppBar.js | 94 +- webapp/components/appBar/menuConfiguration.js | 2 +- .../components/configuration/componentMap.js | 2 +- .../configuration/listMenuConfiguration.js | 4 +- .../configuration/listViewerConfiguration.js | 2 +- webapp/components/pages/FileExplorerPage.js | 12 +- webapp/components/pages/WelcomePage.js | 44 +- .../reduxconnect/FileUrlSelectorContainer.js | 4 +- webapp/package.json | 30 +- webapp/redux/middleware/nwbMiddleware.js | 2 +- webapp/redux/reducers/nwbfile.js | 4 + webapp/styles/variables.js | 24 + webapp/theme.js | 192 +-- webapp/yarn.lock | 1275 ++++++++++------- 25 files changed, 1037 insertions(+), 800 deletions(-) create mode 100644 webapp/styles/variables.js diff --git a/webapp/Main.js b/webapp/Main.js index 05f307c..82d1f78 100644 --- a/webapp/Main.js +++ b/webapp/Main.js @@ -3,15 +3,15 @@ global.GEPPETTO_CONFIGURATION = require('./GeppettoConfiguration.json'); const { initGeppetto } = require('@metacell/geppetto-meta-client/GEPPETTO'); import { LoadingSpinner } from '@metacell/geppetto-meta-client/components'; import ErrorDialog from './components/reduxconnect/ErrorDialogContainer'; - +import CssBaseline from '@mui/material/CssBaseline'; require('babel-polyfill'); const { Provider } = require('react-redux'); const configureStore = require('./redux/store').default; -const ReactDOM = require('react-dom'); +const { createRoot } = require('react-dom/client'); const React = require('react'); -const { MuiThemeProvider } = require('@material-ui/core/styles'); +const { ThemeProvider } = require('@mui/material/styles'); const Utils = require('./Utils').default; @@ -29,6 +29,7 @@ window.updateFile = nwbFileService.setNWBFileUrl; const store = configureStore(); +import '@metacell/geppetto-meta-ui/flex-layout/style/dark.css' import './styles/main.less'; (function init () { @@ -67,15 +68,16 @@ import './styles/main.less'; window.load = loadFromEvent; - - ReactDOM.render( - + const container = document.getElementById("mainContainer"); + const root = createRoot(container); // createRoot(container!) if you use TypeScript + root.render( + + - , - document.getElementById('mainContainer'), + ); }()); diff --git a/webapp/Utils.js b/webapp/Utils.js index c333dff..a3fbb5a 100644 --- a/webapp/Utils.js +++ b/webapp/Utils.js @@ -3,7 +3,7 @@ import { execPythonMessage, evalPythonMessage, } from '@metacell/geppetto-meta-client/communication/geppettoJupyter/GeppettoJupyterUtils'; -import { teal, deepOrange, lightGreen, purple, amber, cyan, brown, lime, pink, yellow, indigo, red, lightBlue, orange, green, blueGrey, } from '@material-ui/core/colors'; +import { teal, deepOrange, lightGreen, purple, amber, cyan, brown, lime, pink, yellow, indigo, red, lightBlue, orange, green, blueGrey, } from '@mui/material/colors'; const Utils = { diff --git a/webapp/components/AddPlotMenu.js b/webapp/components/AddPlotMenu.js index d645f4e..0704998 100644 --- a/webapp/components/AddPlotMenu.js +++ b/webapp/components/AddPlotMenu.js @@ -1,7 +1,6 @@ import React, { Component } from 'react'; -import Menu from '@material-ui/core/Menu'; -import Popover from '@material-ui/core/Popover'; -import MenuItem from '@material-ui/core/MenuItem'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; const anchor = { origin: { diff --git a/webapp/components/CustomIconComponent.js b/webapp/components/CustomIconComponent.js index b275e1b..339d29b 100644 --- a/webapp/components/CustomIconComponent.js +++ b/webapp/components/CustomIconComponent.js @@ -1,5 +1,5 @@ import React from 'react'; -import IconButton from '@material-ui/core/IconButton'; +import IconButton from '@mui/material/IconButton'; import { isString } from '../Utils'; const IconComponent = ({ action, color, tooltip, Icon, }) => ( @@ -8,7 +8,7 @@ const IconComponent = ({ action, color, tooltip, Icon, }) => ( className="list-icon" title={tooltip} onClick={action} - > + size="large"> ); diff --git a/webapp/components/Dialog.js b/webapp/components/Dialog.js index af89213..befa8c6 100644 --- a/webapp/components/Dialog.js +++ b/webapp/components/Dialog.js @@ -1,39 +1,39 @@ import React from 'react'; -import Button from '@material-ui/core/Button'; -import MuiDialog from '@material-ui/core/Dialog'; -import DialogActions from '@material-ui/core/DialogActions'; -import DialogContent from '@material-ui/core/DialogContent'; -import Typography from '@material-ui/core/Typography'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import Paper from '@material-ui/core/Paper'; -import Grid from '@material-ui/core/Grid'; -import Box from '@material-ui/core/Box'; -import Link from '@material-ui/core/Link'; -import { withStyles } from '@material-ui/core/styles'; +import Button from '@mui/material/Button'; +import MuiDialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import Typography from '@mui/material/Typography'; +import DialogTitle from '@mui/material/DialogTitle'; +import Paper from '@mui/material/Paper'; +import Grid from '@mui/material/Grid2'; +import Box from '@mui/material/Box'; +import Link from '@mui/material/Link'; import { fontColor } from '../theme'; import logo_nwb_explorer from '../resources/logos/nwb-explorer.png'; import logo_metacell from '../resources/logos/metacell_logo.png'; import logo_osb_colour from '../resources/logos/osblogofull.png'; import { NWBE_WEBSITE } from '../constants'; -const styles = theme => ({ +const styles = { paper: { backgroundColor: '#4a4a4a', textAlign: 'center', - padding: theme.spacing(2) + padding: 2, + '& .MuiTypography-root': { color: fontColor, }, }, -}); +}; -const AboutContent = withStyles(styles)(({ classes }) => ( +const AboutContent = () => ( - + - + - + Powered by @@ -44,17 +44,17 @@ const AboutContent = withStyles(styles)(({ classes }) => ( - NWB Explorer v0.7.0 + NWB Explorer v0.7.0 - + NWB Explorer is a web application that can be used by scientists to read, visualize and explore the content of NWB:N 2 files. - + Want to know more? Go to our {' '} website @@ -63,7 +63,7 @@ const AboutContent = withStyles(styles)(({ classes }) => ( - + NWB Explorer is being developed in collaboration with: @@ -73,7 +73,7 @@ const AboutContent = withStyles(styles)(({ classes }) => ( -)); +); export default function Dialog ({ open, title, message, handleClose, }) { return ( diff --git a/webapp/components/ErrorDialog.js b/webapp/components/ErrorDialog.js index 7df339c..f4bc1aa 100644 --- a/webapp/components/ErrorDialog.js +++ b/webapp/components/ErrorDialog.js @@ -1,10 +1,10 @@ import React from "react"; -import Button from "@material-ui/core/Button"; -import Dialog from "@material-ui/core/Dialog"; -import Alert from "@material-ui/lab/Alert"; -import DialogActions from "@material-ui/core/DialogActions"; -import DialogContent from "@material-ui/core/DialogContent"; -import DialogTitle from "@material-ui/core/DialogTitle"; +import Button from "@mui/material/Button"; +import Dialog from "@mui/material/Dialog"; +import Alert from '@mui/material/Alert'; +import DialogActions from "@mui/material/DialogActions"; +import DialogContent from "@mui/material/DialogContent"; +import DialogTitle from "@mui/material/DialogTitle"; export default ({ error, startRecoveryFromError }) => { let title = "An error occurred"; diff --git a/webapp/components/FileSampleSelector.js b/webapp/components/FileSampleSelector.js index a9edb67..ade4cc6 100644 --- a/webapp/components/FileSampleSelector.js +++ b/webapp/components/FileSampleSelector.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, Button, Typography, FormControl, Select, MenuItem, Grid, } from '@material-ui/core'; +import { Box, Button, Typography, FormControl, Select, MenuItem, Grid2 as Grid, } from '@mui/material'; const SAMPLE_LINK_FERGUSON = 'https://github.com/OpenSourceBrain/NWBShowcase/raw/master/FergusonEtAl2015/FergusonEtAl2015.nwb'; const SAMPLE_LINK_FERGUSON_2 = 'https://github.com/OpenSourceBrain/NWBShowcase/raw/master/FergusonEtAl2015/FergusonEtAl2015_PYR2.nwb'; @@ -63,6 +63,7 @@ export default class FileSampleSelector extends React.Component { className="button badge-button" name="ferguson" displayEmpty + variant="outlined" inputProps={{ 'aria-label': 'ferguson' }} > @@ -85,6 +86,7 @@ export default class FileSampleSelector extends React.Component { className="button badge-button" name="ferguson" displayEmpty + variant="outlined" inputProps={{ 'aria-label': 'ferguson' }} > diff --git a/webapp/components/FileUrlSelector.js b/webapp/components/FileUrlSelector.js index 2d369c6..1b76d46 100644 --- a/webapp/components/FileUrlSelector.js +++ b/webapp/components/FileUrlSelector.js @@ -1,8 +1,8 @@ import React from 'react'; -import TextField from '@material-ui/core/TextField'; -import Box from '@material-ui/core/Box'; -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; +import TextField from '@mui/material/TextField'; +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; export default class FileUrlSelector extends React.Component { constructor (props) { @@ -36,9 +36,7 @@ export default class FileUrlSelector extends React.Component { className="input-form-control" placeholder="Paste a URL pointing to an NWB v2 file" margin="0" - InputLabelProps={ - { shrink: true } - } + slotProps={{ input: { shrink: true } }} onChange={evt => this.updateInputValue(evt)} />