react-science 10.0.0 → 11.0.0

package/src/app/explorer/MeasurementExplorer.tsx

@@ -1,196 +0,0 @@
-import styled from '@emotion/styled';
-import { useMemo, useState } from 'react';
-import { FaArrowsAltH, FaExchangeAlt } from 'react-icons/fa';
-
-import type { MeasurementPlotProps } from '../helpers/index.js';
-import { MeasurementPlot } from '../helpers/index.js';
-
-export type MeasurementExplorerProps = Omit<
-  MeasurementPlotProps,
-  keyof ExplorerInfo
->;
-interface ExplorerInfo {
-  dataIndex: number;
-  xVariableName: string;
-  yVariableName: string;
-  flipHorizontalAxis: boolean;
-}
-
-const MeasurementExplorerRoot = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-const MeasurementExplorerContent = styled.div`
-  display: flex;
-  justify-content: space-around;
-  margin-bottom: 20px;
-`;
-
-const MeasurementExplorerSelect = styled.select`
-  cursor: pointer;
-  border: 1px solid black;
-  padding: 1px;
-  margin-left: 2px;
-`;
-
-const MeasurementExplorerAction = styled.div`
-  padding: 1px;
-  display: flex;
-`;
-
-export function MeasurementExplorer(props: MeasurementExplorerProps) {
-  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) {
-    return {
-      dataIndex,
-      xVariableName: varNames[dataIndex].includes('x')
-        ? 'x'
-        : varNames[dataIndex][0],
-      yVariableName: varNames[dataIndex].includes('y')
-        ? 'y'
-        : varNames[dataIndex][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 } = measurementsArray[0].data[info.dataIndex];
-    const oppositeAxis = axis === 'x' ? 'yVariableName' : 'xVariableName';
-    return varNames[info.dataIndex].map((d) => {
-      if (d !== info[oppositeAxis]) {
-        return (
-          <option key={d} value={d}>
-            {formatVar(d)}
-          </option>
-        );
-      }
-      return null;
-    });
-  }
-
-  return (
-    <MeasurementExplorerRoot style={{ width, height }}>
-      <MeasurementExplorerContent>
-        <div>
-          <label>dataIndex: </label>
-          <MeasurementExplorerSelect
-            onChange={({ target }) => {
-              const value = Number(target.value);
-              if (value !== undefined && !Number.isNaN(value)) {
-                setInfo(({ flipHorizontalAxis }) => ({
-                  flipHorizontalAxis,
-                  ...defaultInfo(value),
-                }));
-              }
-            }}
-          >
-            {measurementsArray[0].data.map((d, i) => (
-              // eslint-disable-next-line react/no-array-index-key
-              <option key={i} value={i}>
-                {i}
-              </option>
-            ))}
-          </MeasurementExplorerSelect>
-        </div>
-        <div>
-          <label>xVariable: </label>
-          <MeasurementExplorerSelect
-            onChange={({ target }) => {
-              const value = target.value;
-              if (value) {
-                setInfo((info) => ({ ...info, xVariableName: value }));
-              }
-            }}
-            value={info.xVariableName}
-          >
-            {dropdownVariables('x')}
-          </MeasurementExplorerSelect>
-        </div>
-        <div>
-          <FaExchangeAlt
-            style={{ marginTop: 2, cursor: 'pointer' }}
-            size="20"
-            onClick={() =>
-              setInfo(({ xVariableName, yVariableName, ...info }) => ({
-                ...info,
-                xVariableName: yVariableName,
-                yVariableName: xVariableName,
-              }))
-            }
-          />
-        </div>
-        <div>
-          <label>yVariable :</label>
-          <MeasurementExplorerSelect
-            onChange={({ target }) => {
-              const value = target.value;
-              if (value) {
-                setInfo((info) => ({ ...info, yVariableName: value }));
-              }
-            }}
-            value={info.yVariableName}
-          >
-            {dropdownVariables('y')}
-          </MeasurementExplorerSelect>
-        </div>
-        <MeasurementExplorerAction>
-          Flip horizontal axis:
-          <FaArrowsAltH
-            style={{
-              cursor: 'pointer',
-              border: '1px solid black',
-              padding: 1,
-              marginLeft: 2,
-            }}
-            size="28"
-            onClick={() =>
-              setInfo(({ flipHorizontalAxis, ...other }) => ({
-                flipHorizontalAxis: !flipHorizontalAxis,
-                ...other,
-              }))
-            }
-          />
-        </MeasurementExplorerAction>
-      </MeasurementExplorerContent>
-      <MeasurementPlot {...props} {...info} />
-    </MeasurementExplorerRoot>
-  );
-}

package/src/app/explorer/MeasurementExplorerWithState.tsx

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

package/src/app/explorer/index.ts

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

package/src/app/helpers/MeasurementPlot.tsx

@@ -1,92 +0,0 @@
-import { xyToXYObject } from 'ml-spectra-processing';
-import { useMemo } from 'react';
-import { LineSeries, PlotController } from 'react-plot';
-
-import type {
-  MeasurementAppView,
-  MeasurementBase,
-} from '../../app-data/index.js';
-
-import { BasicComponent } from './index.js';
-
-type Measurement = Pick<MeasurementBase, 'meta' | 'info' | 'data' | 'id'>;
-export interface MeasurementPlotProps {
-  measurement: Measurement[] | Measurement;
-  measurementDisplay: MeasurementAppView[] | 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,
-    dataIndex = 0,
-    xVariableName = 'x',
-    yVariableName = 'y',
-  } = props;
-
-  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}>
-      {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/MeasurementVariableSelect.tsx

@@ -1,33 +0,0 @@
-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

@@ -1,12 +0,0 @@
-import type { ColorConfig } from '../../app-data/index.js';
-
-// 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

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

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

@@ -1,130 +0,0 @@
-import styled from '@emotion/styled';
-import type { ReactNode } from 'react';
-import { useMemo } from 'react';
-import { ResponsiveChart } from 'react-d3-utils';
-import {
-  Annotations,
-  Axis,
-  Heading,
-  Plot,
-  useAxisWheelZoom,
-  useAxisZoom,
-  useCrossHair,
-  usePan,
-  useRectangularZoom,
-} from 'react-plot';
-
-import type { MeasurementPlotProps } from './MeasurementPlot.js';
-
-interface BasicComponentProps extends MeasurementPlotProps {
-  children: ReactNode[] | ReactNode;
-}
-
-const BasicComponentRoot = styled.div`
-  user-drag: none;
-  -webkit-user-drag: none;
-  user-select: none;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-`;
-
-export function BasicComponent(props: BasicComponentProps) {
-  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,
-    },
-  ] = Array.isArray(measurement) ? measurement : [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 (
-    <BasicComponentRoot style={{ width, height }}>
-      <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})` : ''}`}
-              paddingEnd="20"
-            />
-            <Axis
-              hidden={!showVerticalAxis}
-              displayPrimaryGridLines={showHorizontalGrid}
-              position="left"
-              label={`${y.label}${y.units ? `(${y.units})` : ''}`}
-              paddingStart="10"
-              paddingEnd="10"
-            />
-          </Plot>
-        )}
-      </ResponsiveChart>
-    </BasicComponentRoot>
-  );
-}

package/src/app/helpers/splitEntries.ts

@@ -1,26 +0,0 @@
-import type {
-  AppState,
-  MeasurementAndView,
-  MeasurementKind,
-} from '../../app-data/index.js';
-import { iterateKindMeasurementsAndView } from '../../app-data/index.js';
-
-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

@@ -1,53 +0,0 @@
-import type { UseQueryResult } from '@tanstack/react-query';
-import { useQuery } from '@tanstack/react-query';
-import type { FifoLogger } from 'fifo-logger';
-import type { FileCollection } from 'filelist-utils';
-import { fileCollectionFromWebSource } from 'filelist-utils';
-import { useCallback } from 'react';
-
-import type { AppDispatch } from '../../app-data/index.js';
-import { useAppDispatch } from '../../app-data/index.js';
-import { useFifoLogger, useHashSearchParams } from '../../components/index.js';
-
-type LoadFn = (
-  files: File[] | FileCollection,
-  logger: FifoLogger,
-  dispatch: AppDispatch,
-) => Promise<void>;
-
-export function useLoadFileCollectionFromHash(
-  onLoad: LoadFn,
-): UseQueryResult<true | null> {
-  const logger = useFifoLogger();
-  const appDispatch = useAppDispatch();
-  const hashParams = useHashSearchParams();
-  const filelistUrl = hashParams.get('filelist');
-  return useQuery({
-    queryKey: ['filelist', filelistUrl],
-    queryFn: async () => {
-      if (!filelistUrl) {
-        return null;
-      }
-      const request = await fetch(filelistUrl);
-      const data = await request.json();
-      const baseURL = filelistUrl.replace(/\/[^/]*$/, '/');
-      const fileCollection = await fileCollectionFromWebSource({
-        entries: data,
-        baseURL,
-      });
-      void onLoad(fileCollection, logger, appDispatch);
-      return true;
-    },
-  });
-}
-
-export function useDropFiles(onLoad: LoadFn) {
-  const dispatch = useAppDispatch();
-  const logger = useFifoLogger();
-  return useCallback(
-    (files: File[]) => {
-      void onLoad(files, logger, dispatch);
-    },
-    [dispatch, onLoad, logger],
-  );
-}

package/src/app/hooks/index.ts

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

package/src/app/index.ts

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

package/src/app/kinds/index.ts

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

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

@@ -1,65 +0,0 @@
-import type { ColumnDef, SortingState } from '@tanstack/react-table';
-import { useState } from 'react';
-
-import type { IrPeak } from '../../../app-data/index.js';
-import { Table } from '../../../components/index.js';
-
-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: Array<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>([]);
-
-  return (
-    <Table
-      bordered
-      data={peaks}
-      columns={defaultColumns}
-      reactTable={{
-        state: {
-          sorting,
-          columnVisibility: getColumnVisibility(),
-        },
-        onSortingChange: setSorting,
-      }}
-    />
-  );
-}

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

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

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

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