react-science 0.19.1

package/src/app/kinds/ir/IrPeaksPanel.tsx

@@ -0,0 +1,101 @@
+import {
+  ColumnDef,
+  useReactTable,
+  getCoreRowModel,
+  SortingState,
+  getSortedRowModel,
+} from '@tanstack/react-table';
+import { useState } from 'react';
+
+import type { IrPeak } from '../../../app-data/index';
+import { Table, ValueRenderers } from '../../../components/index';
+
+export interface IrColumnPreferences<T extends keyof IrPeak = keyof IrPeak> {
+  visible?: boolean;
+  format?: (val: IrPeak[T]) => string | number;
+  accessorKey: T;
+  label?: string;
+}
+interface IrPeakPanelPreferences {
+  columns?: IrColumnPreferences[];
+}
+export interface IrPeaksPanelProps {
+  /**
+   * peaks to display in the panel
+   *
+   */
+  peaks: IrPeak[];
+  /**
+   * The columns to display in the table.
+   * @default {}
+   */
+  preferences?: IrPeakPanelPreferences;
+}
+
+export function IrPeaksPanel(props: IrPeaksPanelProps) {
+  const { peaks, preferences = {} } = props;
+  const { columns = [] } = preferences;
+
+  const defaultColumns: ColumnDef<IrPeak, number>[] = columns.map(
+    ({ accessorKey, label = accessorKey, format = (x: number) => x }) => ({
+      header: label,
+      accessorKey,
+      cell: ({ getValue }) => format(getValue()),
+    }),
+  );
+
+  function getColumnVisibility() {
+    const columnVisibility: Record<string, boolean> = {};
+    for (const { accessorKey, visible = true } of columns) {
+      columnVisibility[accessorKey] = visible;
+    }
+    return columnVisibility;
+  }
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const table = useReactTable({
+    data: peaks,
+    columns: defaultColumns,
+    state: {
+      sorting,
+      columnVisibility: getColumnVisibility(),
+    },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+  return (
+    <Table>
+      <Table.Header>
+        {table
+          .getHeaderGroups()
+          .map(({ headers }) =>
+            headers.map((header) => (
+              <ValueRenderers.Header
+                style={{ cursor: 'pointer' }}
+                onClick={header.column.getToggleSortingHandler()}
+                key={header.id}
+                value={header.column.columnDef.header?.toString()}
+                sorted={header.column.getIsSorted()}
+              />
+            )),
+          )}
+      </Table.Header>
+      {table.getRowModel().rows.map((row) => (
+        <Table.Row key={row.id}>
+          {row.getVisibleCells().map((cell) => {
+            const value = (cell.column.columnDef.cell as CallableFunction)(
+              cell.getContext(),
+            );
+            return (
+              <ValueRenderers.Text
+                key={cell.id}
+                value={value !== undefined ? value : cell.getValue()}
+              />
+            );
+          })}
+        </Table.Row>
+      ))}
+    </Table>
+  );
+}

package/src/app/kinds/ir/index.ts

@@ -0,0 +1 @@
+export * from './IrPeaksPanel';

package/src/app/kinds/iv/index.ts

@@ -0,0 +1 @@
+export * from './plot-view/IvPlotView';

package/src/app/kinds/iv/plot-view/IvMeasurementsPlot.tsx

@@ -0,0 +1,111 @@
+import { ResponsiveChart } from 'react-d3-utils';
+import {
+  Annotations,
+  Axis,
+  Plot,
+  Series,
+  useCrossHair,
+  useDrawRectangle,
+  usePlotEvents,
+} from 'react-plot';
+
+import { useAppDispatch, useAppState } from '../../../../app-data/index';
+import { assert } from '../../../../components/index';
+import { splitEntries } from '../../../helpers/index';
+
+import IvSeries from './IvSeries';
+
+export default function IvMeasurementsPlot() {
+  const appState = useAppState();
+  const dispatch = useAppDispatch();
+  const crossHair = useCrossHair();
+  const drawRectangle = useDrawRectangle({
+    onEnd(rectangle) {
+      dispatch({
+        type: 'PLOT_ZOOM',
+        payload: {
+          kind: 'iv',
+          zoom: {
+            x: {
+              min: Math.min(rectangle.x1, rectangle.x2),
+              max: Math.max(rectangle.x2, rectangle.x1),
+            },
+            y: {
+              min: Math.min(rectangle.y1, rectangle.y2),
+              max: Math.max(rectangle.y2, rectangle.y1),
+            },
+          },
+        },
+      });
+    },
+  });
+  usePlotEvents({
+    onDoubleClick() {
+      dispatch({ type: 'PLOT_ZOOM_OUT', payload: { kind: 'iv' } });
+    },
+  });
+  const { unselectedOpacity } = appState.settings.plot;
+  const ivView = appState.view.plot.iv;
+  assert(ivView && !!ivView.xVariable && !!ivView.yVariable);
+  const { selectedEntries, unselectedEntries } = splitEntries(appState, 'iv');
+
+  const series: JSX.Element[] = [];
+  for (const { measurement, view } of unselectedEntries) {
+    series.push(
+      <IvSeries
+        key={measurement.id}
+        measurement={measurement}
+        xVariableLabel={ivView.xVariable}
+        yVariableLabel={ivView.yVariable}
+        colorConfig={view.color}
+        opacity={view.visible ? unselectedOpacity : 0}
+      />,
+    );
+  }
+  for (const { measurement, view } of selectedEntries) {
+    series.push(
+      <IvSeries
+        key={measurement.id}
+        measurement={measurement}
+        xVariableLabel={ivView.xVariable}
+        yVariableLabel={ivView.yVariable}
+        colorConfig={view.color}
+        opacity={view.visible ? undefined : 0}
+      />,
+    );
+  }
+
+  return (
+    <ResponsiveChart>
+      {({ width, height }) => (
+        <Plot
+          width={width}
+          height={height}
+          margin={{ top: 5, right: 5, bottom: 5, left: 5 }}
+        >
+          <Series>{series}</Series>
+          <Annotations>
+            {crossHair.annotations}
+            {drawRectangle.annotations}
+          </Annotations>
+          <Axis
+            displayPrimaryGridLines
+            position="bottom"
+            label={ivView.xVariable}
+            min={ivView.zoom.x.min}
+            max={ivView.zoom.x.max}
+          />
+          <Axis
+            displayPrimaryGridLines
+            position="left"
+            paddingStart="10"
+            paddingEnd="10"
+            label={ivView.yVariable}
+            min={ivView.zoom.y.min}
+            max={ivView.zoom.y.max}
+          />
+        </Plot>
+      )}
+    </ResponsiveChart>
+  );
+}

package/src/app/kinds/iv/plot-view/IvPlotVariablesSelector.tsx

@@ -0,0 +1,55 @@
+import {
+  getAllVariableSymbols,
+  useAppDispatch,
+  useAppState,
+} from '../../../../app-data/index';
+import { assertNotNull } from '../../../../components/index';
+import { MeasurementVariableSelect } from '../../../helpers/index';
+
+export default function IvPlotVariablesSelector() {
+  const {
+    data: {
+      measurements: { iv: ivMeasurements },
+    },
+    view: {
+      plot: { iv: ivPlot },
+    },
+  } = useAppState();
+  const dispatch = useAppDispatch();
+  assertNotNull(ivPlot);
+  const allOptions = new Set<string>();
+  for (const measurement of ivMeasurements.entries) {
+    const variables = getAllVariableSymbols(measurement);
+    for (const variable of variables) {
+      allOptions.add(variable);
+    }
+  }
+  const options = Array.from(allOptions);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'row', gap: 5 }}>
+      <MeasurementVariableSelect
+        label="Y variable"
+        value={ivPlot.yVariable || ''}
+        options={options}
+        onSelect={(variable) =>
+          dispatch({
+            type: 'IV_PLOT_SELECT_VARIABLE',
+            payload: { axis: 'y', variable },
+          })
+        }
+      />
+      <MeasurementVariableSelect
+        label="X variable"
+        value={ivPlot.xVariable || ''}
+        options={options}
+        onSelect={(variable) =>
+          dispatch({
+            type: 'IV_PLOT_SELECT_VARIABLE',
+            payload: { axis: 'x', variable },
+          })
+        }
+      />
+    </div>
+  );
+}

package/src/app/kinds/iv/plot-view/IvPlotView.tsx

@@ -0,0 +1,58 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { FaCompress } from 'react-icons/fa';
+import { PlotController } from 'react-plot';
+
+import { useAppDispatch, useAppState } from '../../../../app-data/index';
+import { Toolbar } from '../../../../components/index';
+
+import IvMeasurementsPlot from './IvMeasurementsPlot';
+import IvPlotVariablesSelector from './IvPlotVariablesSelector';
+
+export function IvPlotView() {
+  return (
+    <div
+      css={css`
+        display: flex;
+        flex-direction: row;
+        height: 100%;
+      `}
+    >
+      <VerticalToolbar />
+      <div
+        css={css`
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+        `}
+      >
+        <PlotController>
+          <IvMeasurementsPlot />
+        </PlotController>
+
+        <IvPlotVariablesSelector />
+      </div>
+    </div>
+  );
+}
+
+function VerticalToolbar() {
+  const dispatch = useAppDispatch();
+  const {
+    view: { selectedKind },
+  } = useAppState();
+
+  function onZoomOut() {
+    if (selectedKind) {
+      dispatch({ type: 'PLOT_ZOOM_OUT', payload: { kind: selectedKind } });
+    }
+  }
+
+  return (
+    <Toolbar orientation="vertical">
+      <Toolbar.Item onClick={onZoomOut} title="Zoom out">
+        <FaCompress />
+      </Toolbar.Item>
+    </Toolbar>
+  );
+}

package/src/app/kinds/iv/plot-view/IvSeries.tsx

@@ -0,0 +1,40 @@
+import { xyToXYObject } from 'ml-spectra-processing';
+import { useMemo } from 'react';
+import { LineSeries } from 'react-plot';
+
+import {
+  ColorConfig,
+  getVariableByLabel,
+  IvMeasurement,
+} from '../../../../app-data/index';
+import { getColorFromConfig } from '../../../helpers/index';
+
+interface IvSeriesProps {
+  measurement: IvMeasurement;
+  colorConfig: ColorConfig;
+  opacity?: number;
+  xVariableLabel: string;
+  yVariableLabel: string;
+}
+
+export default function IvSeries(props: IvSeriesProps) {
+  const { measurement, colorConfig, opacity, xVariableLabel, yVariableLabel } =
+    props;
+  const xVariable = getVariableByLabel(measurement, xVariableLabel);
+  const yVariable = getVariableByLabel(measurement, yVariableLabel);
+  const data = useMemo(() => {
+    if (!xVariable?.data || !yVariable?.data) return null;
+    return xyToXYObject({ x: xVariable.data, y: yVariable.data });
+  }, [xVariable?.data, yVariable?.data]);
+  if (!data) return null;
+  return (
+    <LineSeries
+      key={measurement.id}
+      data={data}
+      lineStyle={{
+        opacity,
+        stroke: getColorFromConfig(colorConfig),
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,19 @@
+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);
+  return (
+    <MeasurementMassPlot
+      measurement={data.data}
+      measurementDisplay={data.display}
+    />
+  );
+}

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

@@ -0,0 +1,122 @@
+import { xyToXYObject } from 'ml-spectra-processing';
+// @ts-expect-error ms-spectrum has no types at the moment.
+import { getBestPeaks, Spectrum } from 'ms-spectrum';
+import { useMemo } from 'react';
+import {
+  Annotation,
+  Annotations,
+  BarSeries,
+  LineSeries,
+  PlotController,
+  usePlotControllerAxes,
+} from 'react-plot';
+
+import { BasicComponent, MeasurementPlotProps } from '../../helpers/index';
+
+interface Peak {
+  label: string;
+  x: number;
+  y: number;
+  shortLabel: string;
+}
+
+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');
+  }
+
+  return (
+    <PlotController>
+      <MassComponent {...props} />
+    </PlotController>
+  );
+}
+
+function MassComponent(props: MeasurementPlotProps) {
+  const { measurement } = props;
+
+  const { data } = measurement;
+  const { variables } = data[0];
+
+  const { x, y } = useMemo(() => {
+    return { x: variables.x, y: variables.y };
+  }, [variables]);
+
+  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({
+        x: x.data,
+        y: y.data,
+      });
+    return {
+      profile,
+      peaks: spectrum.getPeaks(profile),
+    };
+  }, [x.data, y.data]);
+  const bestPeaks = useMemo(
+    () =>
+      getBestPeaks(peaks, {
+        from: xDomain?.min,
+        to: xDomain?.max,
+        limit: 10,
+        numberSlots: 10,
+        threshold: 0.01,
+      }),
+    [peaks, xDomain?.max, xDomain?.min],
+  );
+  return (
+    <BasicComponent {...props}>
+      {profile && <LineSeries data={profile} lineStyle={{ stroke: 'green' }} />}
+      <BarSeries data={peaks} lineStyle={{ stroke: 'red' }} />
+      <Annotations>
+        {bestPeaks.map(({ x, y, shortLabel }: Peak) => (
+          <Annotation.Group key={x} x={x} y={y}>
+            <Annotation.Line
+              x1="0"
+              x2="0"
+              y1="0"
+              y2="-5"
+              style={{ strokeWidth: 2, stroke: 'blue' }}
+            />
+            <Annotation.Text
+              style={{ fontSize: '13px', fontWeight: '600' }}
+              x="2"
+              y="0"
+            >
+              {shortLabel}
+            </Annotation.Text>
+            <Annotation.Text
+              style={{ fontSize: '13px', fontWeight: '600' }}
+              x="2"
+              y="-14"
+            >
+              {x.toFixed(4)}
+            </Annotation.Text>
+          </Annotation.Group>
+        ))}
+      </Annotations>
+    </BasicComponent>
+  );
+}

package/src/app/kinds/mass/index.ts

@@ -0,0 +1,2 @@
+export * from './MassPlotView';
+export * from './MeasurementMassPlot';