react-science 10.0.0 → 11.0.0

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

@@ -1,112 +0,0 @@
-import type { ReactElement } from 'react';
-import { ResponsiveChart } from 'react-d3-utils';
-import {
-  Annotations,
-  Axis,
-  Plot,
-  Series,
-  useCrossHair,
-  useDrawRectangle,
-  usePlotEvents,
-} from 'react-plot';
-
-import { useAppDispatch, useAppState } from '../../../../app-data/index.js';
-import { assert } from '../../../../components/index.js';
-import { splitEntries } from '../../../helpers/index.js';
-
-import IvSeries from './IvSeries.js';
-
-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: ReactElement[] = [];
-  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

@@ -1,63 +0,0 @@
-import {
-  getAllVariableSymbols,
-  useAppDispatch,
-  useAppState,
-} from '../../../../app-data/index.js';
-import { assertNotNull } from '../../../../components/index.js';
-import { MeasurementVariableSelect } from '../../../helpers/index.js';
-
-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: 30,
-        fontSize: '1.125em',
-      }}
-    >
-      <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

@@ -1,55 +0,0 @@
-import styled from '@emotion/styled';
-import { PlotController } from 'react-plot';
-
-import { useAppDispatch, useAppState } from '../../../../app-data/index.js';
-import { Toolbar } from '../../../../components/index.js';
-
-import IvMeasurementsPlot from './IvMeasurementsPlot.js';
-import IvPlotVariablesSelector from './IvPlotVariablesSelector.js';
-
-const IvPlotRoot = styled.div`
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-`;
-
-const PlotRoot = styled.div`
-  padding: 5px;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-`;
-
-export function IvPlotView() {
-  return (
-    <IvPlotRoot>
-      <VerticalToolbar />
-      <PlotRoot>
-        <PlotController>
-          <IvMeasurementsPlot />
-        </PlotController>
-
-        <IvPlotVariablesSelector />
-      </PlotRoot>
-    </IvPlotRoot>
-  );
-}
-
-function VerticalToolbar() {
-  const dispatch = useAppDispatch();
-  const {
-    view: { selectedKind },
-  } = useAppState();
-
-  function onZoomOut() {
-    if (selectedKind) {
-      dispatch({ type: 'PLOT_ZOOM_OUT', payload: { kind: selectedKind } });
-    }
-  }
-
-  return (
-    <Toolbar vertical>
-      <Toolbar.Item onClick={onZoomOut} tooltip="Zoom out" icon="zoom-out" />
-    </Toolbar>
-  );
-}

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

@@ -1,37 +0,0 @@
-import { xyToXYObject } from 'ml-spectra-processing';
-import { useMemo } from 'react';
-import { LineSeries } from 'react-plot';
-
-import type { ColorConfig, IvMeasurement } from '../../../../app-data/index.js';
-import { getVariableByLabel } from '../../../../app-data/index.js';
-import { getColorFromConfig } from '../../../helpers/index.js';
-
-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

@@ -1,19 +0,0 @@
-import {
-  getCurrentMeasurementData,
-  useAppState,
-} from '../../../app-data/index.js';
-
-import { MeasurementMassPlot } from './MeasurementMassPlot.js';
-
-export function MassPlotView() {
-  const appState = useAppState();
-  const data = getCurrentMeasurementData(appState);
-
-  if (!data) return <div>No selected measurement</div>;
-  return (
-    <MeasurementMassPlot
-      measurement={data.data}
-      measurementDisplay={data.display}
-    />
-  );
-}

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

@@ -1,142 +0,0 @@
-import { xyToXYObject } from 'ml-spectra-processing';
-import { getBestPeaks, Spectrum } from 'ms-spectrum';
-import { useMemo } from 'react';
-import {
-  Annotation,
-  Annotations,
-  BarSeries,
-  LineSeries,
-  PlotController,
-  usePlotControllerAxes,
-} from 'react-plot';
-
-import type { MeasurementPlotProps } from '../../helpers/index.js';
-import { BasicComponent } from '../../helpers/index.js';
-
-interface Peak {
-  label: string;
-  x: number;
-  y: number;
-  shortLabel: string;
-}
-
-export function MeasurementMassPlot(props: MeasurementPlotProps) {
-  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 (
-    <PlotController>
-      <MassComponent {...props} />
-    </PlotController>
-  );
-}
-
-function MassComponent(props: MeasurementPlotProps) {
-  const { measurement: measurements } = props;
-
-  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 { 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 {
-      profiles,
-      peaks,
-    };
-  }, [dataXY]);
-  const bestPeaks = useMemo(
-    () =>
-      getBestPeaks(peaks, {
-        from: xDomain?.min ?? undefined,
-        to: xDomain?.max ?? undefined,
-        limit: 10,
-        numberSlots: 10,
-        threshold: 0.01,
-      }),
-    [peaks, xDomain?.max, xDomain?.min],
-  );
-  return (
-    <BasicComponent {...props}>
-      {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) => (
-          <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: '0.875rem', fontWeight: '600' }}
-              x="2"
-              y="0"
-            >
-              {shortLabel}
-            </Annotation.Text>
-            <Annotation.Text
-              style={{ fontSize: '0.875rem', fontWeight: '600' }}
-              x="2"
-              y="-14"
-            >
-              {x.toFixed(4)}
-            </Annotation.Text>
-          </Annotation.Group>
-        ))}
-      </Annotations>
-    </BasicComponent>
-  );
-}

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

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

package/src/app/panels/SignalProcessingPanel.tsx

@@ -1,218 +0,0 @@
-import type { FilterXYType } from 'ml-signal-processing';
-import filterXY from 'ml-signal-processing/FilterXYSchema.js';
-
-import {
-  Button,
-  createTableColumnHelper,
-  Table,
-} from '../../components/index.js';
-
-export interface Filter<OptionsType = string | number> {
-  name: FilterXYType['name'];
-  options?: Record<string, OptionsType>;
-}
-export interface SignalProcessingPanelProps {
-  filters: Filter[];
-  onChange: (filters: Filter[]) => void;
-}
-interface FilterOptionsInfo {
-  defaultValue: string | number;
-  choices?: string[];
-  description: string;
-}
-
-// get filters information & default options values
-const defaultFilters = filterXY.anyOf.map(({ properties }) => {
-  const options: Record<string, FilterOptionsInfo> = {};
-  for (const [key, value] of Object.entries(
-    properties?.options?.properties || {},
-  )) {
-    options[key] = {
-      defaultValue: value.default,
-      choices: value.enum,
-      description: value.description,
-    };
-  }
-
-  return {
-    name: properties.name.const as FilterXYType['name'],
-    options,
-  };
-});
-
-const columnHelper = createTableColumnHelper<Filter>();
-
-export function SignalProcessingPanel(props: SignalProcessingPanelProps) {
-  const { filters = [], onChange } = props;
-
-  const columns = [
-    columnHelper.display({
-      header: ' ',
-      cell: ({ row }) => {
-        return (
-          <div style={{ display: 'flex', gap: '3px' }}>
-            <Button
-              style={{ width: '15px' }}
-              intent="success"
-              onClick={() => {
-                const newFilters = [...filters];
-                newFilters.splice(
-                  row.index + 1,
-                  0,
-                  getDefaultFilter(defaultFilters[0]),
-                );
-                onChange?.(newFilters);
-              }}
-            >
-              +
-            </Button>
-            <Button
-              style={{ width: '15px' }}
-              intent="danger"
-              onClick={() => {
-                onChange?.(filters.filter((_, j) => j !== row.index));
-              }}
-            >
-              -
-            </Button>
-          </div>
-        );
-      },
-    }),
-    columnHelper.accessor('name', {
-      header: 'Name',
-      cell: ({ row, getValue }) => {
-        return (
-          <select
-            onChange={({ target }) => {
-              const value = Number(target.value);
-              if (!Number.isNaN(value)) {
-                const filter = getDefaultFilter(defaultFilters[value]);
-                const newFilters = [...filters];
-                newFilters[row.index] = filter;
-                onChange?.(newFilters);
-              }
-            }}
-            style={{ border: '1px solid black' }}
-            value={defaultFilters.findIndex((f) => f.name === getValue())}
-          >
-            {defaultFilters.map(({ name }, i: number) => (
-              <option key={name} value={i}>
-                {normalCase(name)}
-              </option>
-            ))}
-          </select>
-        );
-      },
-    }),
-    columnHelper.accessor('options', {
-      header: 'Options',
-      cell: ({ row, getValue }) => {
-        const options = getValue();
-        if (!options) return null;
-        return (
-          <>
-            {Object.entries(
-              defaultFilters.find((f) => f.name === row.original.name)
-                ?.options || {},
-            ).map((option) =>
-              optionInput(option, options, (value) => {
-                const FilterOptions = {
-                  ...filters[row.index].options,
-                  [option[0]]: value,
-                };
-                const filter = {
-                  name: filters[row.index].name,
-                  options: FilterOptions,
-                };
-                const newFilters = [...filters];
-                newFilters[row.index] = filter;
-                onChange?.(newFilters);
-              }),
-            )}
-          </>
-        );
-      },
-    }),
-  ];
-
-  return (
-    <div>
-      <Table data={filters} columns={columns} bordered />
-      {filters.length === 0 && (
-        <Button
-          style={{ width: '15px', margin: '5px 20px' }}
-          intent="success"
-          onClick={() => {
-            const newFilters = [getDefaultFilter(defaultFilters[0])];
-            onChange?.(newFilters);
-          }}
-        >
-          +
-        </Button>
-      )}
-    </div>
-  );
-}
-
-function getDefaultFilter({ options, name }: Filter<FilterOptionsInfo>) {
-  if (options) {
-    const result: Record<string, string | number> = {};
-
-    for (const [key, { defaultValue }] of Object.entries(options)) {
-      result[key] = defaultValue;
-    }
-    return { name, options: result };
-  }
-  return { name };
-}
-
-function normalCase(str: string) {
-  const result = str.replaceAll(/(?<upper>[A-Z])/g, ' $<upper>').trim();
-  return result.charAt(0).toUpperCase() + result.slice(1);
-}
-
-function optionInput(
-  [key, { description, choices }]: [string, FilterOptionsInfo],
-  options: Record<string, string | number>,
-  onChange: (value: string | number) => void,
-) {
-  return (
-    <div style={{ marginTop: '5px' }} key={key}>
-      {choices && choices.length > 0 ? (
-        <select
-          onChange={({ target }) => {
-            const value = target.value;
-            if (value) {
-              onChange(value);
-            }
-          }}
-          style={{ border: '1px solid black' }}
-          value={options?.[key]}
-        >
-          <option value="" disabled selected>
-            {normalCase(key)}
-          </option>
-          {choices.map((choice) => (
-            <option key={choice} value={choice}>
-              {normalCase(choice)}
-            </option>
-          ))}
-        </select>
-      ) : (
-        <input
-          style={{ border: '1px solid black', padding: '2px 5px' }}
-          placeholder={normalCase(key)}
-          onChange={({ target }) => {
-            const value = target.value;
-            if (value) {
-              onChange(value);
-            }
-          }}
-          value={options?.[key]}
-        />
-      )}
-      <label style={{ marginLeft: '5px' }}>{description}</label>
-    </div>
-  );
-}

package/src/app/panels/index.ts

@@ -1,4 +0,0 @@
-export * from './measurement-info/index.js';
-export * from './measurement-config/index.js';
-export * from './measurements/index.js';
-export * from './SignalProcessingPanel.js';