Add LC/MS visualization support for OpenLab and Chemstation data

.github/workflows/e2e_testing.yml

@@ -10,6 +10,6 @@ jobs:
       - name: Cypress run
         uses: cypress-io/github-action@v6
         with:
-          build: npm run build
-          start: npm start
+          build: npm run --max_old_space_size=12288 build
+          start: npm --max_old_space_size=12288 start
           browser: chrome

cypress.config.ts

@@ -1,10 +1,16 @@
 import { defineConfig } from "cypress";
 
 export default defineConfig({
+  pageLoadTimeout: 100000,
+  requestTimeout: 100000,
+  responseTimeout: 100000,
   e2e: {
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },
-    experimentalStudio: true
+    experimentalStudio: true,
+    pageLoadTimeout: 100000,
+    requestTimeout: 100000,
+    responseTimeout: 100000,
   },
 });

cypress/e2e/lcms_spec.cy.ts

@@ -0,0 +1,187 @@
+/// <reference types="cypress" />
+
+describe('LC/MS layouts', () => {
+  const getAppState = () => cy.window().then((win) => (win as any).__spectraStore.getState())
+
+  const openLayout = (buttonText: string) => {
+    cy.viewport(2000, 2000)
+    cy.visit('http://localhost:3000/')
+    cy.contains('button', buttonText).click()
+  }
+
+  const assertNoNaNInPaths = (selector: string) => {
+    cy.get(`${selector} path[d]`).each(($path) => {
+      const d = $path.attr('d') || ''
+      expect(d).to.not.contain('NaN')
+    })
+  }
+
+  const assertLcmsViewerIsStable = () => {
+    cy.get('.d3Line .d3Svg').should('exist')
+    cy.get('.d3Multi .d3SvgMulti').should('exist')
+    cy.get('.d3Rect .d3SvgRect').should('exist')
+
+    assertNoNaNInPaths('.d3Line .d3Svg')
+    assertNoNaNInPaths('.d3Multi .d3SvgMulti')
+    assertNoNaNInPaths('.d3Rect .d3SvgRect')
+  }
+
+  it('OpenLab renders LC/MS line, multi and rect graphs', () => {
+    openLayout('LC/MS OpenLab')
+    assertLcmsViewerIsStable()
+  })
+
+  it('Chemstation renders LC/MS line, multi and rect graphs', () => {
+    openLayout('LC/MS Chemstation')
+    assertLcmsViewerIsStable()
+  })
+
+  it('requests MS page on initial load and TIC click in standalone simulation', () => {
+    openLayout('LC/MS OpenLab')
+    assertLcmsViewerIsStable()
+
+    // Waits until React has run componentDidUpdate (initial_load on __lcmsDemoRequests).
+    cy.window().its('__lcmsDemoRequests').should('have.length.above', 0)
+
+    cy.window().then((win) => {
+      (win as any).__spectraStore.dispatch({
+        type: 'DISPLAY_VIEWER_AT',
+        payload: { x: 0.8, y: 0, graphIndex: 1 },
+      })
+    })
+
+    cy.wait(400)
+    cy.window().its('__lcmsDemoRequests').should('have.length.above', 1)
+    cy.window().then((win) => {
+      const requests = (win as any).__lcmsDemoRequests || []
+      const latestRequest = requests[requests.length - 1]
+      expect(latestRequest.trigger).to.equal('user_click')
+      expect(Number.isFinite(latestRequest.retentionTime)).to.equal(true)
+    })
+
+    getAppState().then((stateAfter) => {
+      expect(Number.isFinite(stateAfter.hplcMs.tic.currentPageValue)).to.equal(true)
+    })
+  })
+
+  it('updates reducer when adding peak and integration action', () => {
+    openLayout('LC/MS OpenLab')
+    assertLcmsViewerIsStable()
+
+    cy.window().then((win) => {
+      getAppState().then((stateBefore) => {
+      const peaksBefore = stateBefore.hplcMs.uvvis.currentSpectrum?.peaks?.length || 0
+      const integrationsBefore = stateBefore.hplcMs.uvvis.currentSpectrum?.integrations?.length || 0
+
+      cy.get('.btn-sv-bar-addpeak').click()
+      cy.get('.d3Line .d3Svg').trigger('click', 600, 350, { which: 1, view: win })
+
+      const selectedWaveLength = stateBefore.hplcMs.uvvis.selectedWaveLength
+      const spectrumData = stateBefore.hplcMs.uvvis.currentSpectrum?.data
+      const xValues = Array.isArray(spectrumData?.x) ? spectrumData.x : []
+      const yValues = Array.isArray(spectrumData?.y) ? spectrumData.y : []
+      const mid = Math.floor(xValues.length / 2)
+      const xL = xValues[Math.max(0, mid - 20)]
+      const xU = xValues[Math.min(xValues.length - 1, mid + 20)]
+      const hasIntegrationPayload = Number.isFinite(xL)
+        && Number.isFinite(xU)
+        && xU !== xL
+        && xValues.length > 0
+        && yValues.length > 0
+
+      if (hasIntegrationPayload) {
+        (win as any).__spectraStore.dispatch({
+          type: 'UPDATE_HPLCMS_INTEGRATIONS',
+          payload: {
+            spectrumId: selectedWaveLength,
+            integration: {
+              xExtent: { xL, xU },
+              data: spectrumData,
+            },
+          },
+        })
+      }
+
+      getAppState().then((stateAfter) => {
+        const peaksAfter = stateAfter.hplcMs.uvvis.currentSpectrum?.peaks?.length || 0
+        const integrationsAfter = stateAfter.hplcMs.uvvis.currentSpectrum?.integrations?.length || 0
+        expect(peaksAfter).to.be.greaterThan(peaksBefore)
+        expect(integrationsAfter).to.be.at.least(integrationsBefore)
+      })
+    })
+    })
+  })
+
+  it('updates reducer when switching wavelength', () => {
+    openLayout('LC/MS OpenLab')
+    assertLcmsViewerIsStable()
+
+    getAppState().then((stateBefore) => {
+      const wavelengths = stateBefore.hplcMs.uvvis.listWaveLength || []
+      expect(wavelengths.length).to.be.greaterThan(1)
+      const initialWaveLength = stateBefore.hplcMs.uvvis.selectedWaveLength
+      const nextWaveLength = wavelengths.find((value) => value !== initialWaveLength)
+      expect(nextWaveLength).to.not.equal(undefined)
+
+      cy.contains('.MuiFormControl-root', 'Wavelength (nm)')
+        .find('.MuiSelect-select')
+        .click({ force: true })
+      cy.get('li[role="option"]')
+        .contains(new RegExp(`^\\s*${nextWaveLength}\\s*$`))
+        .click({ force: true })
+
+      getAppState().then((stateAfter) => {
+        expect(stateAfter.hplcMs.uvvis.selectedWaveLength).to.equal(nextWaveLength)
+        expect(stateAfter.hplcMs.uvvis.currentSpectrum).to.not.equal(null)
+      })
+    })
+  })
+
+  it('updates TIC polarity on Chemstation', () => {
+    openLayout('LC/MS Chemstation')
+    assertLcmsViewerIsStable()
+
+    getAppState().then((stateBefore) => {
+      const available = stateBefore.hplcMs.tic?.available || {}
+      const currentPolarity = stateBefore.hplcMs.tic?.polarity
+      const polarityOrder = ['positive', 'negative', 'neutral']
+      const nextPolarity = polarityOrder.find((value) => available[value] && value !== currentPolarity)
+      if (!nextPolarity) return
+
+      const uiLabelByPolarity: Record<string, string> = {
+        positive: 'PLUS',
+        negative: 'MINUS',
+        neutral: 'NEUTRAL',
+      }
+      const nextLabel = uiLabelByPolarity[nextPolarity]
+
+      cy.contains('.MuiFormControl-root', 'TIC')
+        .find('.MuiSelect-select')
+        .click({ force: true })
+      cy.get('li[role="option"]').contains(new RegExp(`^\\s*${nextLabel}\\s*$`)).click({ force: true })
+
+      getAppState().then((stateAfter) => {
+        expect(stateAfter.hplcMs.tic.polarity).to.equal(nextPolarity)
+      })
+    })
+  })
+
+  it('keeps zoom usable after leaving LC/MS', () => {
+    openLayout('LC/MS OpenLab')
+    assertLcmsViewerIsStable()
+
+    cy.contains('button', 'NMR 1H').click()
+    cy.get('.d3Line .d3Svg').should('exist')
+
+    cy.window().then((win) => {
+      cy.get('.btn-sv-bar-zoomin').click()
+      cy.get('.d3Line .brush').should('exist')
+      cy.get('.d3Line .d3Svg')
+        .trigger('mousedown', 400, 100, { which: 1, view: win, force: true })
+        .trigger('mousemove', { clientX: 800, clientY: 1000, view: win, force: true })
+        .trigger('mouseup', { view: win, force: true })
+
+      cy.get('.btn-sv-bar-zoomreset').click()
+    })
+  })
+})

cypress/e2e/nmr1h_spec.cy.ts

@@ -70,7 +70,7 @@ describe('NMR 1H', () => {
     cy.get('.btn-sv-bar-spctrum').click()
     cy.get('.input-sv-bar-layout').click()
     cy.get('.option-sv-bar-layout').should($li => {
-      expect($li).to.have.length(24)
+      expect($li).to.have.length(25)
     })
     cy.get('ul li:nth-child(9)').click()
 

dist/actions/axes.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateYAxis = exports.updateXAxis = void 0;
+var _action_type = require("../constants/action_type");
+const updateXAxis = payload => ({
+  type: _action_type.AXES.UPDATE_X_AXIS,
+  payload
+});
+exports.updateXAxis = updateXAxis;
+const updateYAxis = payload => ({
+  type: _action_type.AXES.UPDATE_Y_AXIS,
+  payload
+});
+
+// eslint-disable-line
+exports.updateYAxis = updateYAxis;

dist/actions/curve.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toggleShowAllCurves = exports.setAllCurves = exports.selectCurve = void 0;
+var _action_type = require("../constants/action_type");
+const selectCurve = payload => ({
+  type: _action_type.CURVE.SELECT_WORKING_CURVE,
+  payload
+});
+exports.selectCurve = selectCurve;
+const setAllCurves = (payload, meta) => ({
+  type: _action_type.CURVE.SET_ALL_CURVES,
+  payload,
+  ...(meta && typeof meta === 'object' ? {
+    meta
+  } : {})
+});
+exports.setAllCurves = setAllCurves;
+const toggleShowAllCurves = payload => ({
+  type: _action_type.CURVE.SET_SHOULD_SHOW_ALL_CURVES,
+  payload
+});
+exports.toggleShowAllCurves = toggleShowAllCurves;

dist/actions/cyclic_voltammetry.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toggleCyclicVoltaDensity = exports.setWorkWithMaxPeak = exports.setCylicVoltaRefFactor = exports.setCylicVoltaRef = exports.setCyclicVoltaAreaValue = exports.setCyclicVoltaAreaUnit = exports.selectRefPeaks = exports.selectPairPeak = exports.removeCylicVoltaPecker = exports.removeCylicVoltaPairPeak = exports.removeCylicVoltaMinPeak = exports.removeCylicVoltaMaxPeak = exports.addNewCylicVoltaPairPeak = exports.addCylicVoltaPecker = exports.addCylicVoltaMinPeak = exports.addCylicVoltaMaxPeak = void 0;
+var _action_type = require("../constants/action_type");
+const addNewCylicVoltaPairPeak = payload => ({
+  type: _action_type.CYCLIC_VOLTA_METRY.ADD_PAIR_PEAKS,
+  payload
+});
+exports.addNewCylicVoltaPairPeak = addNewCylicVoltaPairPeak;
+const removeCylicVoltaPairPeak = payload => ({
+  type: _action_type.CYCLIC_VOLTA_METRY.REMOVE_PAIR_PEAKS,
+  payload
+});
+exports.removeCylicVoltaPairPeak = removeCylicVoltaPairPeak;
+const addCylicVoltaMaxPeak = payload => ({
+  type: _action_type.CYCLIC_VOLTA_METRY.ADD_MAX_PEAK,
+  payload
+});
+exports.addCylicVoltaMaxPeak = addCylicVoltaMaxPeak;
+const removeCylicVoltaMaxPeak = payload => ({
+  type: _action_type.CYCLIC_VOLTA_METRY.REMOVE_MAX_PEAK,
+  payload
+});
+exports.removeCylicVoltaMaxPeak = removeCylicVoltaMaxPeak;
+const addCylicVoltaMinPeak = payload => ({
+  type: _action_type.CYCLIC_VOLTA_METRY.ADD_MIN_PEAK,
+  payload
+});
+exports.addCylicVoltaMinPeak = addCylicVoltaMinPeak;
+const removeCylicVoltaMinPeak = payload => ({
+  type: _action_type.CYCLIC_VOLTA_METRY.REMOVE_MIN_PEAK,
+  payload
+});
+exports.removeCylicVoltaMinPeak = removeCylicVoltaMinPeak;
+const setWorkWithMaxPeak = payload => ({
+  type: _action_type.CYCLIC_VOLTA_METRY.WORK_WITH_MAX_PEAK,
+  payload
+});
+exports.setWorkWithMaxPeak = setWorkWithMaxPeak;
+const selectPairPeak = payload => ({
+  type: _action_type.CYCLIC_VOLTA_METRY.SELECT_PAIR_PEAK,
+  payload
+});
+exports.selectPairPeak = selectPairPeak;
+const addCylicVoltaPecker = payload => ({
+  type: _action_type.CYCLIC_VOLTA_METRY.ADD_PECKER,
+  payload
+});
+exports.addCylicVoltaPecker = addCylicVoltaPecker;
+const removeCylicVoltaPecker = payload => ({
+  type: _action_type.CYCLIC_VOLTA_METRY.REMOVE_PECKER,
+  payload
+});
+exports.removeCylicVoltaPecker = removeCylicVoltaPecker;
+const selectRefPeaks = payload => ({
+  type: _action_type.CYCLIC_VOLTA_METRY.SELECT_REF_PEAK,
+  payload
+});
+exports.selectRefPeaks = selectRefPeaks;
+const setCylicVoltaRefFactor = payload => ({
+  type: _action_type.CYCLIC_VOLTA_METRY.SET_FACTOR,
+  payload
+});
+exports.setCylicVoltaRefFactor = setCylicVoltaRefFactor;
+const setCylicVoltaRef = payload => ({
+  type: _action_type.CYCLIC_VOLTA_METRY.SET_REF,
+  payload
+});
+exports.setCylicVoltaRef = setCylicVoltaRef;
+const setCyclicVoltaAreaValue = value => ({
+  type: _action_type.CYCLIC_VOLTA_METRY.SET_AREA_VALUE,
+  payload: {
+    value
+  }
+});
+exports.setCyclicVoltaAreaValue = setCyclicVoltaAreaValue;
+const setCyclicVoltaAreaUnit = unit => ({
+  type: _action_type.CYCLIC_VOLTA_METRY.SET_AREA_UNIT,
+  payload: {
+    unit
+  }
+});
+exports.setCyclicVoltaAreaUnit = setCyclicVoltaAreaUnit;
+const toggleCyclicVoltaDensity = payload => ({
+  type: _action_type.CYCLIC_VOLTA_METRY.TOGGLE_DENSITY,
+  payload
+});
+exports.toggleCyclicVoltaDensity = toggleCyclicVoltaDensity;

dist/actions/detector.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateDetector = void 0;
+var _action_type = require("../constants/action_type");
+/* eslint-disable import/prefer-default-export */
+
+const updateDetector = payload => ({
+  type: _action_type.SEC.UPDATE_DETECTOR,
+  payload
+});
+exports.updateDetector = updateDetector;