react-science 0.19.1

package/src/app/about/AboutDialogToolbarButton.tsx

@@ -0,0 +1,41 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { ReactNode } from 'react';
+
+import { Modal, Toolbar, useOnOff } from '../../components/index';
+
+interface AboutDialogToolbarButtonProps {
+  name: string;
+  icon: ReactNode;
+  body: ReactNode;
+}
+
+const aboutDialogToolbarButtonCss = {
+  root: css`
+    max-width: 600px;
+    padding: 10px;
+  `,
+};
+
+export function AboutDialogToolbarButton(props: AboutDialogToolbarButtonProps) {
+  const { name, icon, body } = props;
+  const [isOpenDialog, openDialog, closeDialog] = useOnOff(false);
+
+  return (
+    <>
+      <Toolbar.Item
+        titleOrientation="horizontal"
+        title={`About ${name}`}
+        onClick={openDialog}
+      >
+        {icon}
+      </Toolbar.Item>
+      <Modal isOpen={isOpenDialog} onRequestClose={closeDialog}>
+        <Modal.Header>{name}</Modal.Header>
+        <Modal.Body>
+          <div css={aboutDialogToolbarButtonCss.root}>{body}</div>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+}

package/src/app/about/index.ts

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

package/src/app/explorer/ExplorerPlotView.tsx

@@ -0,0 +1,20 @@
+import { useAppView } from '../../app-data/index';
+import { assertNotNull } from '../../components/index';
+import { IvPlotView, MassPlotView } from '../index';
+
+import MeasurementExplorerWithState from './MeasurementExplorerWithState';
+
+export function ExplorerPlotView() {
+  const appView = useAppView();
+  const selectedKind = appView.selectedKind;
+  assertNotNull(selectedKind);
+  switch (selectedKind) {
+    case 'mass':
+      return <MassPlotView />;
+    case 'iv':
+      return <IvPlotView />;
+    default: {
+      return <MeasurementExplorerWithState />;
+    }
+  }
+}

package/src/app/explorer/MeasurementExplorer.tsx

@@ -0,0 +1,183 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { useState } from 'react';
+import { FaExchangeAlt, FaArrowsAltH } from 'react-icons/fa';
+
+import { MeasurementPlot, MeasurementPlotProps } from '../helpers/index';
+
+export interface MeasurementExplorerProps
+  extends Omit<MeasurementPlotProps, keyof ExplorerInfo> {}
+interface ExplorerInfo {
+  dataIndex: number;
+  xVariableName: string;
+  yVariableName: string;
+  flipHorizontalAxis: boolean;
+}
+
+export function MeasurementExplorer(props: MeasurementExplorerProps) {
+  const {
+    measurement: { data },
+    width = '100%',
+    height = '100%',
+  } = props;
+  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],
+    };
+  }
+  const [info, setInfo] = useState<ExplorerInfo>({
+    flipHorizontalAxis: false,
+    ...defaultInfo(0),
+  });
+  /* variables for this measurement are mapped into `id - label (units)`
+    `id` necessary bc files may have repeated labels
+  */
+  function dropdownVariables(axis: 'x' | 'y') {
+    function formatVar(varKey: string) {
+      const { label, units } = variables[varKey];
+      const formatUnit = units ? ` (${units})` : '';
+      const formatVarKey = `${varKey} - `;
+      return formatVarKey + label + formatUnit;
+    }
+    const { variables } = data[info.dataIndex];
+    const oppositeAxis = axis === 'x' ? 'yVariableName' : 'xVariableName';
+    return Object.keys(variables).map((d) => {
+      if (d !== info[oppositeAxis]) {
+        return (
+          <option key={d} value={d}>
+            {formatVar(d)}
+          </option>
+        );
+      }
+      return null;
+    });
+  }
+  return (
+    <div
+      style={{ width, height }}
+      css={css`
+        display: flex;
+        flex-direction: column;
+      `}
+    >
+      <div
+        css={css`
+          display: flex;
+          justify-content: space-around;
+          margin-bottom: 20px;
+        `}
+      >
+        <div>
+          <label>dataIndex: </label>
+          <select
+            css={css`
+              cursor: pointer;
+              border: 1px solid black;
+              padding: 1px;
+              margin-left: 2px;
+            `}
+            onChange={({ target }) => {
+              const value = Number(target.value);
+              if (value !== undefined && !Number.isNaN(value)) {
+                setInfo(({ flipHorizontalAxis }) => ({
+                  flipHorizontalAxis,
+                  ...defaultInfo(value),
+                }));
+              }
+            }}
+          >
+            {data.map((d, i) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <option key={i} value={i}>
+                {i}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div>
+          <label>xVariable: </label>
+          <select
+            css={css`
+              cursor: pointer;
+              border: 1px solid black;
+              padding: 1px;
+              margin-left: 2px;
+            `}
+            onChange={({ target }) => {
+              const value = target.value;
+              if (value) {
+                setInfo((info) => ({ ...info, xVariableName: value }));
+              }
+            }}
+            value={info.xVariableName}
+          >
+            {dropdownVariables('x')}
+          </select>
+        </div>
+        <div>
+          <FaExchangeAlt
+            css={css`
+              margin-top: 2px;
+              cursor: pointer;
+            `}
+            size="20"
+            onClick={() =>
+              setInfo(({ xVariableName, yVariableName, ...info }) => ({
+                ...info,
+                xVariableName: yVariableName,
+                yVariableName: xVariableName,
+              }))
+            }
+          />
+        </div>
+        <div>
+          <label>yVariable :</label>
+          <select
+            css={css`
+              cursor: pointer;
+              border: 1px solid black;
+              padding: 1px;
+              margin-left: 2px;
+            `}
+            onChange={({ target }) => {
+              const value = target.value;
+              if (value) {
+                setInfo((info) => ({ ...info, yVariableName: value }));
+              }
+            }}
+            value={info.yVariableName}
+          >
+            {dropdownVariables('y')}
+          </select>
+        </div>
+        <div
+          css={css`
+            padding: 1px;
+            display: flex;
+          `}
+        >
+          Flip horizontal axis:
+          <FaArrowsAltH
+            css={css`
+              cursor: pointer;
+              border: 1px solid black;
+              padding: 1px;
+              margin-left: 2px;
+            `}
+            size="28"
+            onClick={() =>
+              setInfo(({ flipHorizontalAxis, ...other }) => ({
+                flipHorizontalAxis: !flipHorizontalAxis,
+                ...other,
+              }))
+            }
+          />
+        </div>
+      </div>
+      <MeasurementPlot {...props} {...info} />
+    </div>
+  );
+}

package/src/app/explorer/MeasurementExplorerWithState.tsx

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

package/src/app/explorer/index.ts

@@ -0,0 +1,2 @@
+export * from './ExplorerPlotView';
+export * from './MeasurementExplorer';

package/src/app/helpers/MeasurementPlot.tsx

@@ -0,0 +1,77 @@
+import { xyToXYObject } from 'ml-spectra-processing';
+import { useMemo } from 'react';
+import { LineSeries, PlotController } from 'react-plot';
+
+import type { MeasurementBase, MeasurementAppView } from '../../app-data/index';
+
+import { BasicComponent } from './index';
+
+type Measurement = Pick<MeasurementBase, 'meta' | 'info' | 'data'>;
+export interface MeasurementPlotProps {
+  measurement: Measurement;
+  measurementDisplay: MeasurementAppView;
+  dataIndex?: number;
+  xVariableName?: string;
+  yVariableName?: string;
+  width?: number | `${number}%`;
+  height?: number | `${number}%`;
+  zoom?: 'horizontal' | 'vertical' | 'rectangular' | '';
+  wheelZoom?: 'vertical' | 'horizontal' | '';
+  crossHair?: boolean;
+  showHorizontalAxis?: boolean;
+  showVerticalAxis?: boolean;
+  showHorizontalGrid?: boolean;
+  showVerticalGrid?: boolean;
+  flipHorizontalAxis?: boolean;
+}
+export function MeasurementPlot(props: MeasurementPlotProps) {
+  return (
+    <PlotController>
+      <MeasurementComponent {...props} />
+    </PlotController>
+  );
+}
+function MeasurementComponent(props: MeasurementPlotProps) {
+  const {
+    measurementDisplay,
+    measurement: { data },
+    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}`);
+  }
+
+  return (
+    <BasicComponent {...props}>
+      <LineSeries
+        lineStyle={{
+          stroke: color.color,
+        }}
+        data={xyToXYObject({
+          x: x.data,
+          y: y.data,
+        })}
+      />
+    </BasicComponent>
+  );
+}

package/src/app/helpers/MeasurementVariableSelect.tsx

@@ -0,0 +1,33 @@
+interface MeasurementVariableSelectProps {
+  label: string;
+  value: string;
+  options: string[];
+  onSelect: (value: string) => void;
+}
+
+export function MeasurementVariableSelect(
+  props: MeasurementVariableSelectProps,
+) {
+  const { label, value, options, onSelect } = props;
+  return (
+    <label>
+      {`${label}: `}
+      <select
+        value={value}
+        onChange={(event) => {
+          const value = event.target.value;
+          if (value) {
+            onSelect(value);
+          }
+        }}
+      >
+        <option value="">{`<select a variable>`}</option>
+        {options.map((option) => (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}

package/src/app/helpers/getColorFromConfig.ts

@@ -0,0 +1,11 @@
+import { ColorConfig } from '../../app-data/index';
+// import { fixedGradientScales } from '../../components/index';
+
+export function getColorFromConfig(config: ColorConfig) {
+  if (config.kind === 'fixed') {
+    return config.color;
+  } else {
+    throw new Error(`Unsupported color config: ${config.kind}`);
+    // const scale = fixedGradientScales[config.gradient];
+  }
+}

package/src/app/helpers/index.ts

@@ -0,0 +1,5 @@
+export * from './getColorFromConfig';
+export * from './MeasurementPlot';
+export * from './react-plot';
+export * from './splitEntries';
+export * from './MeasurementVariableSelect';

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

@@ -0,0 +1,121 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { type ReactNode, useMemo } from 'react';
+import { ResponsiveChart } from 'react-d3-utils';
+import {
+  useRectangularZoom,
+  useAxisZoom,
+  useAxisWheelZoom,
+  useCrossHair,
+  usePan,
+  Plot,
+  Heading,
+  Annotations,
+  Axis,
+} from 'react-plot';
+
+import type { MeasurementPlotProps } from './MeasurementPlot';
+
+export function BasicComponent(
+  props: MeasurementPlotProps & {
+    children: ReactNode[] | ReactNode;
+  },
+) {
+  const {
+    children,
+    measurement,
+    dataIndex = 0,
+    xVariableName = 'x',
+    yVariableName = 'y',
+    width = '100%',
+    height = '100%',
+    zoom = 'horizontal',
+    wheelZoom = 'vertical',
+    crossHair = true,
+    showHorizontalAxis = true,
+    showVerticalAxis = true,
+    showHorizontalGrid = true,
+    showVerticalGrid = true,
+    flipHorizontalAxis = false,
+  } = props;
+  const {
+    info: { title },
+    data,
+  } = measurement;
+
+  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 direction = new Set(['vertical', 'horizontal']);
+  const rectZoom = useRectangularZoom({
+    disabled: zoom !== 'rectangular',
+  });
+  const axisZoom = useAxisZoom({
+    direction: zoom === 'vertical' ? 'vertical' : 'horizontal',
+    disabled: !direction.has(zoom),
+  });
+  useAxisWheelZoom({
+    direction: wheelZoom === 'vertical' ? 'vertical' : 'horizontal',
+    axisId: wheelZoom === 'vertical' ? 'y' : 'x',
+    disabled: !direction.has(wheelZoom),
+  });
+  const crossHairAnnot = useCrossHair({
+    disabled: !crossHair,
+  });
+  usePan();
+
+  return (
+    <div
+      style={{ width, height }}
+      css={css`
+        user-drag: none;
+        -webkit-user-drag: none;
+        user-select: none;
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+      `}
+    >
+      <ResponsiveChart width={width} height={height}>
+        {({ width, height }) => (
+          <Plot width={width} height={height}>
+            <Heading title={title} />
+            {children}
+            <Annotations>
+              {rectZoom.annotations}
+              {axisZoom.annotations}
+              {crossHairAnnot.annotations}
+            </Annotations>
+            <Axis
+              hidden={!showHorizontalAxis}
+              displayPrimaryGridLines={showVerticalGrid}
+              flip={flipHorizontalAxis}
+              position="bottom"
+              label={`${x.label}${x.units ? `(${x.units})` : ''}`}
+            />
+            <Axis
+              hidden={!showVerticalAxis}
+              displayPrimaryGridLines={showHorizontalGrid}
+              position="left"
+              label={`${y.label}${y.units ? `(${y.units})` : ''}`}
+              paddingStart="10"
+              paddingEnd="10"
+            />
+          </Plot>
+        )}
+      </ResponsiveChart>
+    </div>
+  );
+}

package/src/app/helpers/splitEntries.ts

@@ -0,0 +1,26 @@
+import {
+  AppState,
+  iterateKindMeasurementsAndView,
+  MeasurementAndView,
+  MeasurementKind,
+} from '../../app-data/index';
+
+export function splitEntries<Kind extends MeasurementKind>(
+  appState: AppState,
+  kind: Kind,
+) {
+  const selectedEntries: Array<MeasurementAndView<Kind>> = [];
+  const unselectedEntries: Array<MeasurementAndView<Kind>> = [];
+  const selectedMeasurements: string[] =
+    appState.view.selectedMeasurements[kind] ?? [];
+
+  for (const entry of iterateKindMeasurementsAndView(appState, kind)) {
+    if (selectedMeasurements.includes(entry.measurement.id)) {
+      selectedEntries.push(entry);
+    } else {
+      unselectedEntries.push(entry);
+    }
+  }
+
+  return { selectedEntries, unselectedEntries };
+}

package/src/app/hooks/file-loading.ts

@@ -0,0 +1,40 @@
+import { useQuery } from '@tanstack/react-query';
+import { FileCollection, fileCollectionFromWebservice } from 'filelist-utils';
+import { useCallback } from 'react';
+
+import { AppDispatch, useAppDispatch } from '../../app-data/index';
+import { useHashSearchParams } from '../../components/index';
+
+type LoadFn = (
+  files: File[] | FileCollection,
+  dispatch: AppDispatch,
+) => Promise<void>;
+
+export function useLoadFileCollectionFromHash(onLoad: LoadFn) {
+  const appDispatch = useAppDispatch();
+  const hashParams = useHashSearchParams();
+  const filelistUrl = hashParams.get('filelist');
+  const query = useQuery({
+    queryKey: ['filelist', filelistUrl],
+    queryFn: async () => {
+      if (!filelistUrl) {
+        return null;
+      }
+      const fileCollection = await fileCollectionFromWebservice(filelistUrl);
+      void onLoad(fileCollection, appDispatch);
+      return true;
+    },
+  });
+  return query;
+}
+
+export function useDropFiles(onLoad: LoadFn) {
+  const dispatch = useAppDispatch();
+  const onDrop = useCallback(
+    (files: File[]) => {
+      void onLoad(files, dispatch);
+    },
+    [dispatch, onLoad],
+  );
+  return onDrop;
+}

package/src/app/hooks/index.ts

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

package/src/app/index.ts

@@ -0,0 +1,5 @@
+export * from './explorer/index';
+export * from './hooks/index';
+export * from './kinds/index';
+export * from './panels/index';
+export * from './about/index';

package/src/app/kinds/index.ts

@@ -0,0 +1,3 @@
+export * from './ir/index';
+export * from './iv/index';
+export * from './mass/index';