feat: update UI for cmd bar

ComPlat · Sep 21, 2023 · 17c8c5e · 17c8c5e
1 parent d93eb17
commit 17c8c5e
Show file tree

Hide file tree

Showing 38 changed files with 2,578 additions and 2,237 deletions.
diff --git a/.github/workflows/testing.yml b/.github/workflows/testing.yml
@@ -3,7 +3,7 @@ name: Testing
 on: push
 
 jobs:
-  build:
+  testing:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2

diff --git a/package.json b/package.json
@@ -8,37 +8,31 @@
   },
   "license": "AGPL-3.0",
   "dependencies": {
-    "@babel/preset-env": "^7.21.5",
-    "@babel/preset-react": "^7.18.6",
     "@complat/react-svg-file-zoom-pan": "1.1.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mdi/js": "^4.7.95",
-    "@mdi/react": "^1.2.1",
+    "@mdi/js": "^7.2.96",
+    "@mdi/react": "^1.6.1",
     "@mui/icons-material": "^5.14.9",
     "@mui/material": "^5.14.9",
     "@mui/styles": "^5.14.9",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "12.1.5",
     "@types/jest": "^29.5.0",
     "@types/node": "^18.15.11",
     "@types/react": "^18.0.34",
     "@types/react-dom": "^18.0.11",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "browserslist": "^4.21.5",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.2",
     "d3": "^5.16.0",
     "d3-brush": "3.0.0",
     "d3-selection": "^2.0.0",
     "d3-tip": "^0.9.1",
     "jcampconverter": "4.1.0",
     "ml-savitzky-golay-generalized": "1.1.1",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "react-dropzone": "^8.0.3",
     "react-quill": "^2.0.0",
     "react-redux": "^7.2.0",
-    "react-svg-file-zoom-pan": "^1.0.5",
-    "react-svg-inline": "^2.1.1",
     "redux": "^4.1.1",
     "redux-saga": "^1.1.3",
     "redux-undo": "^1.1.0",
@@ -66,6 +60,8 @@
     "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
     "@storybook/react": "7.0.7",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "12.1.5",
     "@types/enzyme": "^3.10.13",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "babel-loader": "8.2.5",

diff --git a/src/__tests__/units/components/cmd_bar/01_viewer.test.js b/src/__tests__/units/components/cmd_bar/01_viewer.test.js
@@ -0,0 +1,49 @@
+import configureStore from 'redux-mock-store'
+import { Provider } from 'react-redux'
+import { render } from '@testing-library/react'; 
+import '@testing-library/jest-dom';
+import Viewer from '../../../../components/cmd_bar/01_viewer'
+import { LIST_UI_VIEWER_TYPE } from '../../../../constants/list_ui';
+import { LIST_LAYOUT } from '../../../../constants/list_layout';
+
+const mockStore = configureStore([]);
+const store = mockStore({
+  ui: LIST_UI_VIEWER_TYPE.SPECTRUM,
+  layout: LIST_LAYOUT.H1,
+});
+
+const dispatchMock = () => Promise.resolve({});
+store.dispatch = jest.fn(dispatchMock);
+
+describe('<Viewer />', () => {
+  let AppWrapper;
+  beforeEach(() => {
+    AppWrapper = ({ store, children}) => {
+      return <Provider store={store}> {children} </Provider>
+    }
+  });
+
+  it('Render Viewer', async () => {
+    const renderer = 
+      <AppWrapper store={store}>
+          <Viewer editorOnly={false} />
+      </AppWrapper>
+    ;
+    const { queryByTestId } = render(renderer);
+    const renderResult = queryByTestId('Viewer');
+    expect(renderResult).toBeInTheDocument();
+    expect(renderResult.childElementCount).toEqual(2);
+  });
+
+  it('Render Viewer in editor only mode',  () => {
+    const renderer = 
+      <AppWrapper store={store}>
+          <Viewer editorOnly={true} />
+      </AppWrapper>
+    ;
+    const { queryByTestId } = render(renderer);
+    const renderResult = queryByTestId('Viewer');
+    expect(renderResult).toBeInTheDocument();
+    expect(renderResult.childElementCount).toEqual(1);
+  });
+})
diff --git a/src/__tests__/units/components/cmd_bar/02_zoom.test.js b/src/__tests__/units/components/cmd_bar/02_zoom.test.js
@@ -0,0 +1,35 @@
+import configureStore from 'redux-mock-store'
+import { Provider } from 'react-redux'
+import { render } from '@testing-library/react'; 
+import '@testing-library/jest-dom';
+import Zoom from '../../../../components/cmd_bar/02_zoom';
+import { LIST_UI_SWEEP_TYPE } from '../../../../constants/list_ui';
+
+const mockStore = configureStore([]);
+const store = mockStore({
+  ui:{ sweepType: LIST_UI_SWEEP_TYPE.ZOOMIN },
+});
+
+const dispatchMock = () => Promise.resolve({});
+store.dispatch = jest.fn(dispatchMock);
+
+describe('<Zoom />', () => {
+  let AppWrapper;
+  beforeEach(() => {
+    AppWrapper = ({ store, children}) => {
+      return <Provider store={store}> {children} </Provider>
+    }
+  });
+
+  it('Render Zoom', async () => {
+    const renderer = 
+      <AppWrapper store={store}>
+          <Zoom editorOnly={false} />
+      </AppWrapper>
+    ;
+    const { queryByTestId } = render(renderer);
+    const renderResult = queryByTestId('Zoom');
+    expect(renderResult).toBeInTheDocument();
+    expect(renderResult.childElementCount).toEqual(2);
+  });
+})
diff --git a/src/__tests__/units/components/panel/peaks.test.js b/src/__tests__/units/components/panel/peaks.test.js
@@ -5,6 +5,8 @@ import configureStore from 'redux-mock-store'
 import { Provider } from 'react-redux';
 import '@testing-library/jest-dom'
 import { LIST_LAYOUT } from "../../../../constants/list_layout";
+import { createTheme } from "@mui/material";
+import { ThemeProvider } from "@mui/styles";
 
 const mockStore = configureStore([]);
 const store = mockStore({
@@ -48,6 +50,11 @@ const failedStore = mockStore({
 const dispatchMock = () => Promise.resolve({});
 store.dispatch = jest.fn(dispatchMock);
 
+const theme = createTheme({
+  typography: {
+    useNextVariants: true
+  },
+});
 
 describe("<Peaks />", () => {
   let AppWrapper;
@@ -60,7 +67,9 @@ describe("<Peaks />", () => {
   test('Render peaks panel info',  () => {
     const renderer = 
       <AppWrapper store={store}>
-        <Peaks expand={false} onExapnd={() => {}} />
+        <ThemeProvider theme={theme}>
+          <Peaks expand={false} onExapnd={() => {}} />
+        </ThemeProvider>
       </AppWrapper>
     ;
     const {queryByTestId} = render(renderer);
@@ -70,7 +79,9 @@ describe("<Peaks />", () => {
   test('Render peaks panel with invalid store list', () => {
     const renderer = 
       <AppWrapper store={failedStore}>
-        <Peaks expand={false} onExapnd={() => {}} />
+        <ThemeProvider theme={theme}>
+          <Peaks expand={false} onExapnd={() => {}} />
+        </ThemeProvider>
       </AppWrapper>
     ;
     const {queryByTestId} = render(renderer);

diff --git a/src/components/cmd_bar/01_viewer.js b/src/components/cmd_bar/01_viewer.js
@@ -31,7 +31,7 @@ const Viewer = ({
   const onViewAnalysis = () => setUiViewerTypeAct(LIST_UI_VIEWER_TYPE.ANALYSIS);
 
   return (
-    <span className={classes.group}>
+    <span className={classes.group} data-testid="Viewer">
       <Tooltip title={<span className="txt-sv-tp">Spectrum Viewer</span>}>
         <MuButton
           className={

diff --git a/src/components/cmd_bar/02_zoom.js b/src/components/cmd_bar/02_zoom.js
@@ -28,7 +28,7 @@ const Zoom = ({
   const onSweepZoomReset = () => setUiSweepTypeAct(LIST_UI_SWEEP_TYPE.ZOOMRESET);
 
   return (
-    <span className={classes.group}>
+    <span className={classes.group} data-testid="Zoom">
       <Tooltip title={<span className="txt-sv-tp">Zoom In</span>}>
         <MuButton
           className={

diff --git a/src/components/cmd_bar/07_pecker.js b/src/components/cmd_bar/07_pecker.js
@@ -7,8 +7,8 @@ import { bindActionCreators, compose } from 'redux';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-import { withStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
+import withStyles from '@mui/styles/withStyles';
+import Tooltip from '@mui/material/Tooltip';
 
 import { setUiSweepType } from '../../actions/ui';
 

diff --git a/src/components/cmd_bar/index.js b/src/components/cmd_bar/index.js
@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators, compose } from 'redux';
 import PropTypes from 'prop-types';
 
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 
 import { commonStyle } from './common';
 import Viewer from './01_viewer';

diff --git a/src/components/cmd_bar/r01_layout.js b/src/components/cmd_bar/r01_layout.js
@@ -6,12 +6,10 @@ import classNames from 'classnames';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
-import OutlinedInput from '@material-ui/core/OutlinedInput';
-import InputLabel from '@material-ui/core/InputLabel';
-import { withStyles } from '@material-ui/core/styles';
+import {
+  Select, FormControl, MenuItem, InputLabel,
+} from '@mui/material';
+import withStyles from '@mui/styles/withStyles';
 
 import Scan from './r02_scan';
 import { updateLayout } from '../../actions/layout';
@@ -66,20 +64,15 @@ const shiftSelect = (
       className={classNames(classes.fieldShift)}
       variant="outlined"
     >
-      <InputLabel className={classNames(classes.selectLabel, 'select-sv-bar-label')}>
+      <InputLabel id="select-solvent-label" className={classNames(classes.selectLabel, 'select-sv-bar-label')}>
         Solvent
       </InputLabel>
       <Select
         value={shiftRef}
+        labelId="select-solvent-label"
+        label="Solvent"
         onChange={onChange}
-        input={
-          (
-            <OutlinedInput
-              className={classNames(classes.selectInput, 'input-sv-bar-shift')}
-              labelWidth={60}
-            />
-          )
-        }
+        className={classNames(classes.selectInput, 'input-sv-bar-shift')}
       >
         { content }
       </Select>
@@ -93,22 +86,16 @@ const layoutSelect = (classes, layoutSt, updateLayoutAct) => {
   return (
     <FormControl
       className={classNames(classes.fieldLayout)}
-      variant="outlined"
     >
-      <InputLabel className={classNames(classes.selectLabel, 'select-sv-bar-label')}>
+      <InputLabel id="select-layout-label" className={classNames(classes.selectLabel, 'select-sv-bar-label')}>
         Layout
       </InputLabel>
       <Select
+        labelId="select-layout-label"
+        label="Layout"
         value={layoutSt}
         onChange={onChange}
-        input={
-          (
-            <OutlinedInput
-              className={classNames(classes.selectInput, 'input-sv-bar-layout')}
-              labelWidth={60}
-            />
-          )
-        }
+        className={classNames(classes.selectInput, 'input-sv-bar-layout')}
       >
         <MenuItem value={LIST_LAYOUT.PLAIN}>
           <span className={classNames(classes.txtOpt, 'option-sv-bar-layout')}>plain</span>

diff --git a/src/components/cmd_bar/r02_scan.js b/src/components/cmd_bar/r02_scan.js
@@ -6,16 +6,13 @@ import classNames from 'classnames';
 import { connect } from 'react-redux';
 import { bindActionCreators, compose } from 'redux';
 
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
-import OutlinedInput from '@material-ui/core/OutlinedInput';
-import InputLabel from '@material-ui/core/InputLabel';
-import { withStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
-import CloudDoneOutlinedIcon from '@material-ui/icons/CloudDoneOutlined';
-import HowToRegOutlinedIcon from '@material-ui/icons/HowToRegOutlined';
-import RefreshOutlinedIcon from '@material-ui/icons/RefreshOutlined';
+import {
+  Select, MenuItem, FormControl, InputLabel, Tooltip,
+} from '@mui/material';
+import { withStyles } from '@mui/styles';
+import CloudDoneOutlinedIcon from '@mui/icons-material/CloudDoneOutlined';
+import HowToRegOutlinedIcon from '@mui/icons-material/HowToRegOutlined';
+import RefreshOutlinedIcon from '@mui/icons-material/RefreshOutlined';
 
 import {
   setScanTarget, resetScanTarget, toggleScanIsAuto,
@@ -103,20 +100,15 @@ const scanSelect = (
       className={classNames(classes.fieldScan)}
       variant="outlined"
     >
-      <InputLabel className={classNames(classes.selectLabel, 'select-sv-bar-label')}>
+      <InputLabel id="select-scan-label" className={classNames(classes.selectLabel, 'select-sv-bar-label')}>
         Current Scan
       </InputLabel>
       <Select
+        labelId="select-scan-label"
+        label="Current Scan"
         value={selValue}
         onChange={onChange}
-        input={
-          (
-            <OutlinedInput
-              className={classNames(classes.selectInput, 'input-sv-bar-scan')}
-              labelWidth={90}
-            />
-          )
-        }
+        className={classNames(classes.selectInput, 'input-sv-bar-scan')}
       >
         { content }
       </Select>

diff --git a/src/components/cmd_bar/r03_threshold.js b/src/components/cmd_bar/r03_threshold.js
@@ -6,13 +6,11 @@ import classNames from 'classnames';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
-import TextField from '@material-ui/core/TextField';
-import InputAdornment from '@material-ui/core/InputAdornment';
-import { withStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
-import CloudDoneOutlinedIcon from '@material-ui/icons/CloudDoneOutlined';
-import HowToRegOutlinedIcon from '@material-ui/icons/HowToRegOutlined';
-import RefreshOutlinedIcon from '@material-ui/icons/RefreshOutlined';
+import { TextField, InputAdornment, Tooltip } from '@mui/material';
+import { withStyles } from '@mui/styles';
+import CloudDoneOutlinedIcon from '@mui/icons-material/CloudDoneOutlined';
+import HowToRegOutlinedIcon from '@mui/icons-material/HowToRegOutlined';
+import RefreshOutlinedIcon from '@mui/icons-material/RefreshOutlined';
 
 import Cfg from '../../helpers/cfg';
 import {