feat(CV): panel layout improvement (#283)

* Improve CV layout

* Enhance layout and styling for MultiJcampsViewer and Cyclic Voltammetry Pane

* chore(cv): hide Integration and Multiplicity in CmdBar for CV layout

* fix(cv): ensure d3Svg is in view before triggering peak actions and adjust click coordinates

* fixup: merge master - resolve conflicts

Author: Nicolass67

cypress/e2e/cv_spec.cy.ts

@@ -13,6 +13,7 @@ describe('CV', () => {
 
   function addMaxPeak(view, offset=0) {
     cy.get('.btn-sv-bar-addpeak').click()
+    cy.get('.d3Svg').scrollIntoView()
     cy.get('.d3Svg')
       .trigger('click', 1110 + offset, 480, {
         which: 1,
@@ -22,24 +23,27 @@ describe('CV', () => {
 
   function addMinPeak(view, offset=0) {
     cy.get('.btn-sv-bar-addpeak').click()
+    cy.get('.d3Svg').scrollIntoView()
     cy.get('.d3Svg')
-      .trigger('click', 1050 + offset, 1480, {
+      .trigger('click', 1050 + offset, 750, {
         which: 1,
         view: view,
       })
   }
 
   function addPecker(view, offset=0) {
     cy.get('.btn-sv-bar-addpecker').click()
+    cy.get('.d3Svg').scrollIntoView()
     cy.get('.d3Svg')
-      .trigger('click', 1350 + offset, 1480, {
+      .trigger('click', 1350 + offset, 750, {
         which: 1,
         view: view,
       })
   }
 
   function removeMaxPeak(view, offset=0) {
     cy.get('.btn-sv-bar-rmpeak').click()
+    cy.get('.d3Svg').scrollIntoView()
     cy.get('.d3Svg')
     .trigger('click', 1110 + offset, 450, {
       which: 1,
@@ -49,17 +53,19 @@ describe('CV', () => {
 
   function removeMinPeak(view, offset=0) {
     cy.get('.btn-sv-bar-rmpeak').click()
+    cy.get('.d3Svg').scrollIntoView()
     cy.get('.d3Svg')
-      .trigger('click', 1050 + offset, 900, {
+      .trigger('click', 1050 + offset, 750, {
         which: 1,
         view: view,
       })
   }
 
   function removePecker(view, offset=0) {
     cy.get('.btn-sv-bar-rmpecker').click()
+    cy.get('.d3Svg').scrollIntoView()
     cy.get('.d3Svg')
-      .trigger('click', 1350 + offset, 800, {
+      .trigger('click', 1350 + offset, 750, {
         which: 1,
         view: view,
       })

src/components/d3_multi/index.js

@@ -9,6 +9,7 @@ import {
   Topic2Seed, Feature2Peak, ToThresEndPts, ToShiftPeaks,
   Feature2MaxMinPeak,
 } from '../../helpers/chem';
+import Format from '../../helpers/format';
 import { resetAll } from '../../actions/manager';
 import { selectUiSweep, scrollUiWheel, clickUiTarget } from '../../actions/ui';
 import { LIST_NON_BRUSH_TYPES } from '../../constants/list_ui';
@@ -31,15 +32,21 @@ class ViewerMulti extends React.Component {
       entities, clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct,
     } = this.props;
     this.rootKlass = '.d3Line';
+    this.containerRef = React.createRef();
+    this.currentSize = null;
+    this.resizeObserver = null;
 
     this.focus = new MultiFocus({
       W, H, entities, clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct,
     });
 
     this.normChange = this.normChange.bind(this);
+    this.handleResize = this.handleResize.bind(this);
   }
 
   componentDidMount() {
+    this.renderChart(this.props, true);
+    this.setupResizeObserver();
     const {
       curveSt,
       seed, peak, cLabel, xLabel, yLabel, feature,
@@ -130,6 +137,10 @@ class ViewerMulti extends React.Component {
     const filterSeed = seed;
     const filterPeak = peak;
 
+    if (Format.isCyclicVoltaLayout(layoutSt)) {
+      this.handleResize();
+    }
+
     this.focus.update({
       entities,
       curveSt,
@@ -152,6 +163,49 @@ class ViewerMulti extends React.Component {
 
   componentWillUnmount() {
     drawDestroy(this.rootKlass);
+    this.teardownResizeObserver();
+  }
+
+  handleResize() {
+    const { layoutSt } = this.props;
+    if (!Format.isCyclicVoltaLayout(layoutSt)) return;
+    const size = this.getContainerSize();
+    if (!size) return;
+    if (!this.currentSize
+      || size.width !== this.currentSize.width
+      || size.height !== this.currentSize.height) {
+      this.renderChart(this.props, false);
+    }
+  }
+
+  getContainerSize() {
+    const node = this.containerRef.current;
+    if (!node) return null;
+    const { clientWidth, clientHeight } = node;
+    if (!clientWidth || !clientHeight) return null;
+    return { width: clientWidth, height: clientHeight };
+  }
+
+  getTargetSize(layoutSt) {
+    if (Format.isCyclicVoltaLayout(layoutSt)) {
+      const size = this.getContainerSize();
+      if (size) return size;
+    }
+    return { width: W, height: H };
+  }
+
+  setupResizeObserver() {
+    if (typeof ResizeObserver === 'undefined') return;
+    if (!this.containerRef.current || this.resizeObserver) return;
+    this.resizeObserver = new ResizeObserver(this.handleResize);
+    this.resizeObserver.observe(this.containerRef.current);
+  }
+
+  teardownResizeObserver() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
   }
 
   normChange(prevProps) {
@@ -162,9 +216,81 @@ class ViewerMulti extends React.Component {
     }
   }
 
+  renderChart(props, shouldReset) {
+    const {
+      curveSt,
+      seed, peak, cLabel, xLabel, yLabel, feature,
+      tTrEndPts, tSfPeaks, editPeakSt, layoutSt,
+      sweepExtentSt, isUiNoBrushSt,
+      isHidden, resetAllAct, cyclicvoltaSt,
+      integationSt, mtplySt, axesUnitsSt,
+      entities, clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct,
+    } = props;
+
+    const size = this.getTargetSize(layoutSt);
+    this.currentSize = size;
+
+    drawDestroy(this.rootKlass);
+    if (shouldReset) {
+      resetAllAct(feature);
+    }
+
+    let xxLabel = xLabel;
+    let yyLabel = yLabel;
+
+    if (axesUnitsSt) {
+      const { curveIdx } = curveSt;
+      const { axes } = axesUnitsSt;
+      let selectedAxes = axes[curveIdx];
+      if (!selectedAxes) {
+        selectedAxes = { xUnit: '', yUnit: '' };
+      }
+      const { xUnit, yUnit } = selectedAxes;
+      xxLabel = xUnit === '' ? xLabel : xUnit;
+      yyLabel = yUnit === '' ? yLabel : yUnit;
+    }
+
+    const filterSeed = seed;
+    const filterPeak = peak;
+
+    this.focus = new MultiFocus({
+      W: size.width,
+      H: size.height,
+      entities,
+      clickUiTargetAct,
+      selectUiSweepAct,
+      scrollUiWheelAct,
+    });
+
+    drawMain(this.rootKlass, size.width, size.height);
+    this.focus.create({
+      curveSt,
+      filterSeed,
+      filterPeak,
+      tTrEndPts,
+      tSfPeaks,
+      editPeakSt,
+      layoutSt,
+      sweepExtentSt,
+      isUiNoBrushSt,
+      cyclicvoltaSt,
+      integationSt,
+      mtplySt,
+    });
+    drawLabel(this.rootKlass, cLabel, xxLabel, yyLabel);
+    drawDisplay(this.rootKlass, isHidden);
+    drawArrowOnCurve(this.rootKlass, isHidden);
+  }
+
   render() {
+    const { layoutSt } = this.props;
+    const isCyclicVolta = Format.isCyclicVoltaLayout(layoutSt);
     return (
-      <div className="d3Line" />
+      <div
+        className="d3Line"
+        ref={this.containerRef}
+        style={isCyclicVolta ? { height: '100%' } : undefined}
+      />
     );
   }
 }

src/components/multi_jcamps_viewer.js

@@ -3,13 +3,15 @@ react/require-default-props, react/no-unused-prop-types, react/jsx-boolean-value
 prefer-object-spread */
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { connect } from 'react-redux';
 import { bindActionCreators, compose } from 'redux';
 
 import Grid from '@mui/material/Grid';
 import { withStyles } from '@mui/styles';
 
 import PanelViewer from './panel/index';
+import CyclicVoltammetryPanel from './panel/cyclic_voltamery_data';
 import CmdBar from './cmd_bar/index';
 import ViewerMulti from './d3_multi/index';
 
@@ -31,6 +33,32 @@ const styles = () => ({
   tabLabel: {
     fontSize: '14px',
   },
+  cvEditor: {
+    height: 'calc(90vh - 220px)',
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: 0,
+    overflow: 'hidden',
+  },
+  cvTopRow: {
+    flex: '1 1 auto',
+    minHeight: 0,
+    overflow: 'hidden',
+  },
+  cvViewerCol: {
+    height: '100%',
+    minHeight: 0,
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  cvViewerWrap: {
+    flex: '1 1 auto',
+    minHeight: 0,
+  },
+  cvPanelBelow: {
+    marginTop: 16,
+    width: '100%',
+  },
 });
 
 const seperatingSubLayout = (entities, featureCondition, layoutSt) => {
@@ -67,6 +95,8 @@ class MultiJcampsViewer extends React.Component { // eslint-disable-line
     const { integrations } = integrationSt;
     const currentIntegration = integrations[curveIdx];
 
+    const isCyclicVolta = Format.isCyclicVoltaLayout(layoutSt);
+
     return (
       <div className={classes.root}>
         <CmdBar
@@ -75,16 +105,27 @@ class MultiJcampsViewer extends React.Component { // eslint-disable-line
           editorOnly={true}
           hideThreshold={!Format.isNmrLayout(layoutSt)}
         />
-        <div className="react-spectrum-editor">
-          <Grid container>
-            <Grid item xs={9}>
-              <ViewerMulti
-                entities={entities}
-                topic={topic}
-                xLabel={feature.xUnit}
-                yLabel={feature.yUnit}
-                feature={feature}
-              />
+        <div className={classNames('react-spectrum-editor', isCyclicVolta && classes.cvEditor)}>
+          <Grid container className={isCyclicVolta ? classes.cvTopRow : undefined}>
+            <Grid item xs={9} className={isCyclicVolta ? classes.cvViewerCol : undefined}>
+              <div className={isCyclicVolta ? classes.cvViewerWrap : undefined}>
+                <ViewerMulti
+                  entities={entities}
+                  topic={topic}
+                  xLabel={feature.xUnit}
+                  yLabel={feature.yUnit}
+                  feature={feature}
+                />
+              </div>
+              {isCyclicVolta ? (
+                <div className={classes.cvPanelBelow}>
+                  <CyclicVoltammetryPanel
+                    jcampIdx={curveIdx}
+                    feature={feature}
+                    userManualLink={userManualLink ? userManualLink.cv : undefined}
+                  />
+                </div>
+              ) : null}
             </Grid>
             <Grid item xs={3} align="center">
               <PanelViewer
@@ -99,6 +140,7 @@ class MultiJcampsViewer extends React.Component { // eslint-disable-line
                 descriptions={descriptions}
                 canChangeDescription={canChangeDescription}
                 onDescriptionChanged={onDescriptionChanged}
+                hideCyclicVolta={isCyclicVolta}
               />
             </Grid>
           </Grid>