react-science 0.25.0 → 0.26.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-science",
-  "version": "0.25.0",
+  "version": "0.26.2",
   "description": "React components to build scientific applications UI",
   "exports": {
     "./app": {
@@ -50,7 +50,7 @@
     "test-only": "vitest run --coverage "
   },
   "volta": {
-    "node": "18.17.0"
+    "node": "18.17.1"
   },
   "overrides": {
     "react": "^18.2.0",
@@ -67,6 +67,7 @@
     "@lukeed/uuid": "^2.0.1",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-select": "^1.2.2",
     "@tanstack/react-query": "^4.32.6",
     "@tanstack/react-table": "^8.9.3",
@@ -85,7 +86,7 @@
     "netcdfjs": "^2.0.2",
     "react-d3-utils": "^1.0.0",
     "react-dropzone": "^14.2.3",
-    "react-error-boundary": "^4.0.10",
+    "react-error-boundary": "^4.0.11",
     "react-icons": "^4.10.1",
     "react-inspector": "^6.0.2",
     "react-kbs": "^2.1.1",
@@ -100,31 +101,32 @@
   "devDependencies": {
     "@babel/core": "^7.22.10",
     "@babel/eslint-parser": "^7.22.10",
-    "@playwright/experimental-ct-react": "^1.36.2",
-    "@playwright/test": "^1.36.2",
-    "@storybook/addon-essentials": "7.2.1",
-    "@storybook/blocks": "7.2.1",
-    "@storybook/react": "7.2.1",
-    "@storybook/react-vite": "7.2.1",
+    "@playwright/experimental-ct-react": "^1.37.0",
+    "@playwright/test": "^1.37.0",
+    "@storybook/addon-essentials": "7.3.0",
+    "@storybook/addon-storysource": "7.3.0",
+    "@storybook/blocks": "7.3.0",
+    "@storybook/react": "7.3.0",
+    "@storybook/react-vite": "7.3.0",
     "@types/babel__core": "^7.20.1",
     "@types/d3-scale-chromatic": "^3.0.0",
-    "@types/lodash": "^4.14.196",
-    "@types/react": "^18.2.19",
+    "@types/lodash": "^4.14.197",
+    "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@types/react-inspector": "^4.0.2",
     "@vitejs/plugin-react": "^4.0.4",
     "@vitest/coverage-v8": "^0.34.1",
     "cheminfo-font": "^1.11.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.46.0",
+    "eslint": "^8.47.0",
     "eslint-config-zakodium": "^8.0.2",
     "eslint-plugin-storybook": "^0.6.13",
-    "prettier": "^3.0.1",
+    "prettier": "^3.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-ocl": "^6.1.0",
     "rimraf": "^5.0.1",
-    "storybook": "7.2.1",
+    "storybook": "7.3.0",
     "typescript": "^5.1.6",
     "vite": "^4.4.9",
     "vitest": "^0.34.1"

package/src/app/explorer/MeasurementExplorer.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { FaExchangeAlt, FaArrowsAltH } from 'react-icons/fa';
 
 import { MeasurementPlot, MeasurementPlotProps } from '../helpers/index';
@@ -37,18 +37,40 @@ const MeasurementExplorerAction = styled.div`
 `;
 
 export function MeasurementExplorer(props: MeasurementExplorerProps) {
-  const {
-    measurement: { data },
-    width = '100%',
-    height = '100%',
-  } = props;
+  const { measurement, width = '100%', height = '100%' } = props;
+  const measurementsArray = useMemo(
+    () => (Array.isArray(measurement) ? measurement : [measurement]),
+    [measurement],
+  );
+  const varNames = useMemo(() => {
+    const varNames: string[][] = [];
+    for (const [i, { data }] of measurementsArray.entries()) {
+      for (const { variables } of data) {
+        const names: string[] = [];
+        for (const varName in variables) {
+          if (i === 0) {
+            names.push(varName);
+          } else if (!varNames.flat().includes(varName)) {
+            throw new Error(
+              `Measurements selected does not have the same variables `,
+            );
+          }
+        }
+        varNames.push(names);
+      }
+    }
+    return varNames;
+  }, [measurementsArray]);
 
   function defaultInfo(dataIndex: number) {
-    const varNames = Object.keys(data[dataIndex].variables);
     return {
       dataIndex,
-      xVariableName: varNames.includes('x') ? 'x' : varNames[0],
-      yVariableName: varNames.includes('y') ? 'y' : varNames[1],
+      xVariableName: varNames[dataIndex].includes('x')
+        ? 'x'
+        : varNames[dataIndex][0],
+      yVariableName: varNames[dataIndex].includes('y')
+        ? 'y'
+        : varNames[dataIndex][1],
     };
   }
 
@@ -67,9 +89,9 @@ export function MeasurementExplorer(props: MeasurementExplorerProps) {
       const formatVarKey = `${varKey} - `;
       return formatVarKey + label + formatUnit;
     }
-    const { variables } = data[info.dataIndex];
+    const { variables } = measurementsArray[0].data[info.dataIndex];
     const oppositeAxis = axis === 'x' ? 'yVariableName' : 'xVariableName';
-    return Object.keys(variables).map((d) => {
+    return varNames[info.dataIndex].map((d) => {
       if (d !== info[oppositeAxis]) {
         return (
           <option key={d} value={d}>
@@ -97,7 +119,7 @@ export function MeasurementExplorer(props: MeasurementExplorerProps) {
               }
             }}
           >
-            {data.map((d, i) => (
+            {measurementsArray[0].data.map((d, i) => (
               // eslint-disable-next-line react/no-array-index-key
               <option key={i} value={i}>
                 {i}

package/src/app/explorer/MeasurementExplorerWithState.tsx

@@ -1,12 +1,12 @@
 import { getCurrentMeasurementData, useAppState } from '../../app-data/index';
-import { assertNotNull } from '../../components/index';
 
 import { MeasurementExplorer } from './MeasurementExplorer';
 
 export default function MeasurementExplorerWithState() {
   const appState = useAppState();
   const data = getCurrentMeasurementData(appState);
-  assertNotNull(data);
+
+  if (!data) return <div>No selected measurement</div>;
   return (
     <MeasurementExplorer
       measurement={data.data}

package/src/app/helpers/MeasurementPlot.tsx

@@ -6,10 +6,10 @@ import type { MeasurementBase, MeasurementAppView } from '../../app-data/index';
 
 import { BasicComponent } from './index';
 
-type Measurement = Pick<MeasurementBase, 'meta' | 'info' | 'data'>;
+type Measurement = Pick<MeasurementBase, 'meta' | 'info' | 'data' | 'id'>;
 export interface MeasurementPlotProps {
-  measurement: Measurement;
-  measurementDisplay: MeasurementAppView;
+  measurement: Measurement[] | Measurement;
+  measurementDisplay: MeasurementAppView[] | MeasurementAppView;
   dataIndex?: number;
   xVariableName?: string;
   yVariableName?: string;
@@ -35,44 +35,55 @@ export function MeasurementPlot(props: MeasurementPlotProps) {
 function MeasurementComponent(props: MeasurementPlotProps) {
   const {
     measurementDisplay,
-    measurement: { data },
+    measurement,
     dataIndex = 0,
     xVariableName = 'x',
     yVariableName = 'y',
   } = props;
 
-  const { x, y } = useMemo(() => {
-    const { variables } = data[dataIndex];
-    const { [xVariableName]: x, [yVariableName]: y } = variables;
-    if (x === undefined || y === undefined) {
-      throw new Error(
-        `Variable "${
-          x === undefined ? xVariableName : yVariableName
-        }" is not available in data. Only ${Object.keys(
-          data[dataIndex].variables,
-        ).join(', ')} are available`,
-      );
-    }
-
-    return { x, y };
-  }, [data, dataIndex, xVariableName, yVariableName]);
-
-  const { color } = measurementDisplay;
-  if (color.kind !== 'fixed') {
-    throw new Error(`unimplemented stroke for kind ${color.kind}`);
-  }
+  const dataXY = useMemo(() => {
+    const measurementsArray = Array.isArray(measurement)
+      ? measurement
+      : [measurement];
+    return measurementsArray.map(({ data, id }) => {
+      const { variables } = data[dataIndex];
+      const { [xVariableName]: x, [yVariableName]: y } = variables;
+      if (x === undefined || y === undefined) {
+        throw new Error(
+          `Variable "${
+            x === undefined ? xVariableName : yVariableName
+          }" is not available in data. Only ${Object.keys(
+            data[dataIndex].variables,
+          ).join(', ')} are available`,
+        );
+      }
+      return { x, y, id };
+    });
+  }, [dataIndex, measurement, xVariableName, yVariableName]);
 
   return (
     <BasicComponent {...props}>
-      <LineSeries
-        lineStyle={{
-          stroke: color.color,
-        }}
-        data={xyToXYObject({
-          x: x.data,
-          y: y.data,
-        })}
-      />
+      {dataXY.map(({ x, y, id }, i) => {
+        const { color } = Array.isArray(measurementDisplay)
+          ? measurementDisplay[i]
+          : measurementDisplay;
+        if (color.kind !== 'fixed') {
+          throw new Error(`unimplemented stroke for kind ${color.kind}`);
+        }
+
+        return (
+          <LineSeries
+            key={id}
+            lineStyle={{
+              stroke: color.color,
+            }}
+            data={xyToXYObject({
+              x: x.data,
+              y: y.data,
+            })}
+          />
+        );
+      })}
     </BasicComponent>
   );
 }

package/src/app/helpers/react-plot.tsx

@@ -47,10 +47,12 @@ export function BasicComponent(props: BasicComponentProps) {
     flipHorizontalAxis = false,
   } = props;
 
-  const {
-    info: { title },
-    data,
-  } = measurement;
+  const [
+    {
+      info: { title },
+      data,
+    },
+  ] = Array.isArray(measurement) ? measurement : [measurement];
 
   const { x, y } = useMemo(() => {
     const { variables } = data[dataIndex];

package/src/app/kinds/mass/MassPlotView.tsx

@@ -2,14 +2,14 @@ import {
   getCurrentMeasurementData,
   useAppState,
 } from '../../../app-data/index';
-import { assertNotNull } from '../../../components/index';
 
 import { MeasurementMassPlot } from './MeasurementMassPlot';
 
 export function MassPlotView() {
   const appState = useAppState();
   const data = getCurrentMeasurementData(appState);
-  assertNotNull(data);
+
+  if (!data) return <div>No selected measurement</div>;
   return (
     <MeasurementMassPlot
       measurement={data.data}

package/src/app/kinds/mass/MeasurementMassPlot.tsx

@@ -21,23 +21,28 @@ interface Peak {
 }
 
 export function MeasurementMassPlot(props: MeasurementPlotProps) {
-  const { measurement } = props;
-  if (!measurement.data) {
-    throw new Error(
-      'This is weird, the data property is not available on measurement',
-    );
-  }
-  if (measurement.data.length === 0) {
-    throw new Error('Data property is empty');
-  }
-  if (measurement.data.length > 1) {
-    throw new Error('Length of data property is larger than 1');
-  }
-  if (!measurement.data[0].variables.x) {
-    throw new Error('x variable in undefined');
-  }
-  if (!measurement.data[0].variables.y) {
-    throw new Error('y variable in undefined');
+  const { measurement: measurements } = props;
+  const measurementsArray = Array.isArray(measurements)
+    ? measurements
+    : [measurements];
+  for (const measurement of measurementsArray) {
+    if (!measurement.data) {
+      throw new Error(
+        'This is weird, the data property is not available on measurement',
+      );
+    }
+    if (measurement.data.length === 0) {
+      throw new Error('Data property is empty');
+    }
+    if (measurement.data.length > 1) {
+      throw new Error('Length of data property is larger than 1');
+    }
+    if (!measurement.data[0].variables.x) {
+      throw new Error('x variable in undefined');
+    }
+    if (!measurement.data[0].variables.y) {
+      throw new Error('y variable in undefined');
+    }
   }
 
   return (
@@ -48,33 +53,43 @@ export function MeasurementMassPlot(props: MeasurementPlotProps) {
 }
 
 function MassComponent(props: MeasurementPlotProps) {
-  const { measurement } = props;
+  const { measurement: measurements } = props;
 
-  const { data } = measurement;
-  const { variables } = data[0];
-
-  const { x, y } = useMemo(() => {
-    return { x: variables.x, y: variables.y };
-  }, [variables]);
+  const dataXY = useMemo(() => {
+    const measurementsArray = Array.isArray(measurements)
+      ? measurements
+      : [measurements];
+    return measurementsArray.map(({ data, id }) => {
+      const { variables } = data[0];
+      const { x, y } = variables;
+      return { x, y, id };
+    });
+  }, [measurements]);
 
   const { x: xDomain } = usePlotControllerAxes();
-  const { profile, peaks } = useMemo(() => {
-    const spectrum = new Spectrum({
-      x: x.data,
-      y: y.data,
-    });
-    const isContinuous = spectrum.isContinuous();
-    const profile =
-      isContinuous &&
-      xyToXYObject({
+  const { profiles, peaks } = useMemo(() => {
+    const profiles = [];
+    const peaks = [];
+    for (const { x, y, id } of dataXY) {
+      const spectrum = new Spectrum({
         x: x.data,
         y: y.data,
       });
+      const isContinuous = spectrum.isContinuous();
+      const data =
+        isContinuous &&
+        xyToXYObject({
+          x: x.data,
+          y: y.data,
+        });
+      profiles.push({ data, id });
+      peaks.push(...spectrum.getPeaks(data));
+    }
     return {
-      profile,
-      peaks: spectrum.getPeaks(profile),
+      profiles,
+      peaks,
     };
-  }, [x.data, y.data]);
+  }, [dataXY]);
   const bestPeaks = useMemo(
     () =>
       getBestPeaks(peaks, {
@@ -88,7 +103,12 @@ function MassComponent(props: MeasurementPlotProps) {
   );
   return (
     <BasicComponent {...props}>
-      {profile && <LineSeries data={profile} lineStyle={{ stroke: 'green' }} />}
+      {profiles.map(
+        ({ data, id }) =>
+          data && (
+            <LineSeries key={id} data={data} lineStyle={{ stroke: 'green' }} />
+          ),
+      )}
       <BarSeries data={peaks} lineStyle={{ stroke: 'red' }} />
       <Annotations>
         {bestPeaks.map(({ x, y, shortLabel }: Peak) => (

package/src/app/panels/measurement-info/MeasurementInfoPanel.tsx

@@ -1,97 +1,27 @@
-import { useState } from 'react';
-
 import {
   getCurrentMeasurementData,
   useAppState,
 } from '../../../app-data/index';
-import { ValueRenderers, Table } from '../../../components/index';
+import { InfoPanelData, InfoPanel } from '../../../components/index';
 
 export function MeasurementInfoPanel() {
   const appState = useAppState();
   const measurement = getCurrentMeasurementData(appState);
-  const [search, setSearch] = useState('');
   if (!measurement) return null;
-  const { meta, info } = measurement.data;
-
-  function viewData(data: Record<string, any>) {
-    return Object.keys(data).map((key) => {
-      const value = data[key];
-      if (
-        !key.toLowerCase().includes(search.toLowerCase()) &&
-        !valueSearch(value, search)
-      ) {
-        return null;
-      }
-      return (
-        <Table.Row key={key}>
-          <ValueRenderers.Text value={key} />
-          {valueCell(value)}
-        </Table.Row>
-      );
-    });
-  }
 
-  return (
-    <div>
-      <input
-        style={{
-          border: 'solid 1px black',
-          width: '300px',
-          marginBottom: '10px',
-          padding: '3px',
-        }}
-        value={search}
-        placeholder="search for a parameter ..."
-        onChange={({ target }) => {
-          if (target.value !== undefined) setSearch(target.value);
-        }}
-      />
-      <Table>
-        <Table.Header>
-          <ValueRenderers.Title value="Parameter" />
-          <ValueRenderers.Title value="Value" />
-        </Table.Header>
-        {viewData(info)}
-        {viewData(meta)}
-      </Table>
-    </div>
-  );
-}
+  // TODO: solution for multiple measurements
+  const { meta, info } = measurement.data[0];
 
-/**
- * Get the value cell depending on the type of the value
- * @param value - ValueRenderers value.
- * @returns - ValueRenderers component.
- */
-function valueCell(value: number | string | object) {
-  switch (typeof value) {
-    case 'number':
-      return <ValueRenderers.Number value={value} />;
-    case 'object':
-      return <ValueRenderers.Object value={value} />;
-    case 'string':
-      return <ValueRenderers.Text value={value} />;
-    default:
-      <ValueRenderers.Text value={value} />;
-  }
-}
+  const data: InfoPanelData[] = [
+    {
+      description: 'Information',
+      data: info,
+    },
+    {
+      description: 'Metadata',
+      data: meta,
+    },
+  ];
 
-/**
- * Search a string in different type of values
- *
- * @param value - Value to search in.
- * @param search - Value to search for.
- * @returns - If search exist in value
- */
-function valueSearch(value: number | string | object, search: string): boolean {
-  switch (typeof value) {
-    case 'number':
-      return String(value).includes(search.toLowerCase());
-    case 'object':
-      return JSON.stringify(value).toLowerCase().includes(search.toLowerCase());
-    case 'string':
-      return value.toLowerCase().includes(search.toLowerCase());
-    default:
-      return false;
-  }
+  return <InfoPanel data={data} title="" />;
 }

package/src/app-data/state/data/data.helpers.ts

@@ -1,7 +1,12 @@
 import { assertNotNull } from '../../../components/index';
 import type { AppState, AppView } from '../index';
 
-import type { AppData, MeasurementKind, Measurements } from './AppData';
+import type {
+  AppData,
+  MeasurementBase,
+  MeasurementKind,
+  Measurements,
+} from './AppData';
 import { measurementKinds } from './kinds';
 
 export function getMeasurement(
@@ -46,20 +51,27 @@ export function getFirstMeasurementOrFail<Kind extends MeasurementKind>(
 export function getCurrentMeasurement(state: AppState) {
   const selectedMeasurement = getSelectedMeasurement(state.view);
   if (!selectedMeasurement) return null;
-
-  return getMeasurement(
-    state.data.measurements,
-    selectedMeasurement.kind,
-    selectedMeasurement.id,
-  );
+  const measurements: MeasurementBase[] = [];
+  for (const id of selectedMeasurement.ids) {
+    const measurement = getMeasurement(
+      state.data.measurements,
+      selectedMeasurement.kind,
+      id,
+    );
+    if (!measurement) return null;
+    measurements.push(measurement);
+  }
+  return measurements;
 }
 
 export function getCurrentMeasurementData(state: AppState) {
   const selectedMeasurement = getCurrentMeasurement(state);
   if (!selectedMeasurement) return null;
-  const kindAndId = getMeasurementKindAndId(state.data, selectedMeasurement.id);
-  const display = state.view.measurements[selectedMeasurement.id];
-  return { data: selectedMeasurement, display, kindAndId };
+  const kindAndIds = getMeasurementKindAndIds(state.data, selectedMeasurement);
+  const display = selectedMeasurement.map(
+    ({ id }) => state.view.measurements[id],
+  );
+  return { data: selectedMeasurement, display, kindAndIds };
 }
 
 export function getFirstSelectedMeasurementData(state: AppState) {
@@ -91,7 +103,10 @@ export interface MeasurementKindAndId {
   kind: MeasurementKind;
   id: string;
 }
-
+export interface MeasurementKindAndIds {
+  kind: MeasurementKind;
+  ids: string[];
+}
 export function getMeasurementKindAndId(data: AppData, measurementId: string) {
   for (const kind of measurementKinds) {
     const measurement = getMeasurement(data.measurements, kind, measurementId);
@@ -99,17 +114,35 @@ export function getMeasurementKindAndId(data: AppData, measurementId: string) {
   }
   throw new Error(`Measurement kind for ${measurementId} not found`);
 }
-
+export function getMeasurementKindAndIds(
+  data: AppData,
+  measurementId: MeasurementBase[],
+) {
+  let found = false;
+  for (const kind of measurementKinds) {
+    for (const { id } of measurementId) {
+      const measurement = getMeasurement(data.measurements, kind, id);
+      if (measurement) found = true;
+      if (found && !measurement) {
+        throw new Error(
+          `Measurement kind for ${measurementId.join(', ')} not found`,
+        );
+      }
+    }
+    if (found) return { kind, ids: measurementId };
+  }
+  throw new Error(`Measurement kind for ${measurementId.join(', ')} not found`);
+}
 export function getSelectedMeasurement(
   view: AppView,
-): MeasurementKindAndId | null {
+): MeasurementKindAndIds | null {
   const { selectedKind, selectedMeasurements } = view;
   if (!selectedKind) return null;
   const kind = selectedKind;
   const currentMeasurements = selectedMeasurements[kind];
-  if (!currentMeasurements || currentMeasurements.length !== 1) return null;
-  const id = currentMeasurements[0];
-  return { kind, id };
+  if (!currentMeasurements || currentMeasurements.length === 0) return null;
+  const ids = currentMeasurements;
+  return { kind, ids };
 }
 
 export function getSelectedMeasurementOrFail(view: AppView) {

package/src/components/forms/Checkbox.tsx

@@ -4,6 +4,8 @@ import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import { ReactNode } from 'react';
 import { RxCheck, RxMinus } from 'react-icons/rx/index';
 
+import { disabledColor, enabledColor } from './styles';
+
 export type CheckedState = boolean | 'indeterminate';
 
 interface CheckboxProps {
@@ -13,9 +15,6 @@ interface CheckboxProps {
   onChange?: (checked: CheckedState) => void;
 }
 
-const enabledColor = '#1677ff';
-const disabledColor = '#b8b8b8';
-
 export function Checkbox(props: CheckboxProps) {
   const {
     checked = 'indeterminate',