react-science 0.19.1

package/src/app-data/state/producers/appStateProducer.ts

@@ -0,0 +1,65 @@
+import { Draft } from 'immer';
+
+import { AppState } from '../appState';
+import { AppStateAction } from '../appStateActions';
+
+import { addMeasurements } from './measurements/addMeasurements';
+import {
+  changeMeasurementDisplay,
+  changeMeasurementsDisplay,
+  selectMeasurement,
+  selectMeasurementKind,
+  setSelectedMeasurementVisibility,
+  setMeasurementVisibility,
+  selectOrUnselectAllMeasurements,
+  removeSelectedMeasurements,
+} from './measurements/measurements';
+import {
+  ivPlotSelectVariable,
+  plotZoom,
+  plotZoomOut,
+} from './plot-view/plot-view';
+import { ActionType, AppStateProducer } from './types';
+
+export const loadFullState: AppStateProducer<'LOAD_FULL_STATE'> = (
+  draft,
+  action,
+) => {
+  const { data, view } = action.payload;
+  draft.data = data;
+  draft.view = view;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const producers: Record<ActionType, AppStateProducer<any>> = {
+  LOAD_START: (draft) => {
+    draft.load.isLoading = true;
+  },
+  LOAD_STOP: (draft) => {
+    draft.load.isLoading = false;
+  },
+  PLOT_ZOOM: plotZoom,
+  PLOT_ZOOM_OUT: plotZoomOut,
+  ADD_MEASUREMENTS: addMeasurements,
+  SELECT_MEASUREMENT: selectMeasurement,
+  SELECT_MEASUREMENT_KIND: selectMeasurementKind,
+  SELECT_ALL_MEASUREMENTS: selectOrUnselectAllMeasurements,
+  SET_MEASUREMENT_VISIBILITY: setMeasurementVisibility,
+  SET_SELECTED_MEASUREMENTS_VISIBILITY: setSelectedMeasurementVisibility,
+  CHANGE_MEASUREMENT_DISPLAY: changeMeasurementDisplay,
+  CHANGE_MEASUREMENTS_DISPLAY: changeMeasurementsDisplay,
+  LOAD_FULL_STATE: loadFullState,
+  REMOVE_SELECTED_MEASUREMENTS: removeSelectedMeasurements,
+  IV_PLOT_SELECT_VARIABLE: ivPlotSelectVariable,
+};
+
+export function appStateProducer(
+  draft: Draft<AppState>,
+  action: AppStateAction,
+) {
+  const producer = producers[action.type];
+  if (!producer) {
+    throw new Error(`Missing producer for action type ${action.type}`);
+  }
+  producer(draft, action);
+}

package/src/app-data/state/producers/index.ts

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

package/src/app-data/state/producers/measurements/addMeasurements.ts

@@ -0,0 +1,83 @@
+import { assert, defaultColorPalette } from '../../../../components/index';
+import { getPreferredVariable, mergeMeasurements } from '../../../index';
+import {
+  getFirstMeasurementOrFail,
+  iterateMeasurementEntries,
+  kindLabels,
+  MeasurementKind,
+} from '../../index';
+import { resetZoom, updateZoom } from '../plot-view/helpers/zoom';
+import { AppStateProducer } from '../types';
+
+export const addMeasurements: AppStateProducer<'ADD_MEASUREMENTS'> = (
+  draft,
+  action,
+) => {
+  const newMeasurements = action.payload;
+
+  // Count how many measurements of each kind are already present.
+  const counts: Partial<Record<MeasurementKind, number>> = {};
+  for (const [kind, measurements] of Object.entries(draft.data.measurements)) {
+    counts[kind as MeasurementKind] = measurements.entries.length;
+  }
+
+  const initialCounts = { ...counts };
+
+  // Merge the new measurements with the existing ones.
+  mergeMeasurements(draft.data.measurements, newMeasurements);
+
+  // Automatically select the first measurement of each kind.
+  // Automatically select the kind of measurement that was added first.
+  for (const kind of Object.keys(kindLabels).filter(
+    (k) => k in newMeasurements,
+  ) as MeasurementKind[]) {
+    if (
+      !draft.view.selectedMeasurements[kind] &&
+      draft.data.measurements[kind].entries.length > 0
+    ) {
+      const { measurement } = getFirstMeasurementOrFail(
+        draft.data.measurements,
+        kind,
+      );
+      const id = measurement.id;
+      draft.view.selectedMeasurements[kind] = [id];
+      if (draft.view.selectedKind === undefined) {
+        draft.view.selectedKind = kind;
+      }
+    }
+  }
+
+  // Assign initial view state to the new measurements.
+  for (const { kind, measurement } of iterateMeasurementEntries(
+    newMeasurements,
+  )) {
+    const count = counts[kind] ?? 0;
+    draft.view.measurements[measurement.id] = {
+      color: {
+        kind: 'fixed',
+        color: defaultColorPalette[count % defaultColorPalette.length],
+      },
+      visible: true,
+    };
+    counts[kind] = count + 1;
+
+    updateZoom(draft, kind, measurement);
+  }
+
+  // Automatically select the IV variables for the first measurement.
+  if (!initialCounts.iv && counts.iv) {
+    const firstIvMeasurement = getFirstMeasurementOrFail(
+      draft.data.measurements,
+      'iv',
+    );
+    const ivPlotView = draft.view.plot.iv;
+    assert(ivPlotView);
+    const xVariable = getPreferredVariable(firstIvMeasurement.measurement, 'x');
+    const yVariable = getPreferredVariable(firstIvMeasurement.measurement, 'y');
+    if (xVariable && yVariable) {
+      ivPlotView.xVariable = xVariable.label;
+      ivPlotView.yVariable = yVariable.label;
+    }
+    resetZoom(draft, 'iv');
+  }
+};

package/src/app-data/state/producers/measurements/measurements.ts

@@ -0,0 +1,143 @@
+import { assert, assertUnreachable } from '../../../../components/index';
+import { getMeasurementOrFail } from '../../../index';
+import { resetZoom } from '../plot-view/helpers/zoom';
+import { AppStateProducer } from '../types';
+
+export const selectOrUnselectAllMeasurements: AppStateProducer<
+  'SELECT_ALL_MEASUREMENTS'
+> = (draft, action) => {
+  const {
+    payload: { kind, select },
+  } = action;
+
+  draft.view.selectedKind = kind;
+  draft.view.selectedMeasurements[kind] = select
+    ? draft.data.measurements[kind].entries.map((element) => element.id)
+    : [];
+};
+
+export const selectMeasurement: AppStateProducer<'SELECT_MEASUREMENT'> = (
+  draft,
+  action,
+) => {
+  const {
+    payload: { acc, id, kind },
+  } = action;
+
+  // Check the measurement exists
+  getMeasurementOrFail(draft.data.measurements, kind, id);
+  draft.view.selectedKind = kind;
+
+  const oldState = draft.view.selectedMeasurements[kind] || [];
+  switch (acc) {
+    case 'add': {
+      draft.view.selectedMeasurements[kind] = [...oldState, id];
+      break;
+    }
+    case 'remove': {
+      draft.view.selectedMeasurements[kind] = oldState.filter(
+        (element) => element !== id,
+      );
+      break;
+    }
+    case 'replace': {
+      draft.view.selectedMeasurements[kind] = [id];
+      break;
+    }
+    default:
+      assertUnreachable(acc);
+  }
+};
+
+export const selectMeasurementKind: AppStateProducer<
+  'SELECT_MEASUREMENT_KIND'
+> = (draft, action) => {
+  const selected = draft.view.selectedMeasurements[action.payload]?.[0];
+  if (selected) {
+    draft.view.selectedKind = action.payload;
+  } else if (draft.data.measurements[action.payload].entries.length > 0) {
+    const measurement = draft.data.measurements[action.payload].entries[0];
+    draft.view.selectedMeasurements[action.payload] = [measurement.id];
+    draft.view.selectedKind = action.payload;
+  } else {
+    draft.view.selectedKind = undefined;
+  }
+};
+
+export const setMeasurementVisibility: AppStateProducer<
+  'SET_MEASUREMENT_VISIBILITY'
+> = (draft, action) => {
+  const measurementView = draft.view.measurements[action.payload.id];
+  measurementView.visible = action.payload.isVisible;
+};
+
+export const setSelectedMeasurementVisibility: AppStateProducer<
+  'SET_SELECTED_MEASUREMENTS_VISIBILITY'
+> = (draft, action) => {
+  for (const id of draft.view.selectedMeasurements[action.payload.kind] || []) {
+    const measurementView = draft.view.measurements[id];
+    measurementView.visible = action.payload.isVisible;
+  }
+};
+
+export const changeMeasurementDisplay: AppStateProducer<
+  'CHANGE_MEASUREMENT_DISPLAY'
+> = (draft, action) => {
+  const measurement = getMeasurementOrFail(
+    draft.data.measurements,
+    action.payload.measurement.kind,
+    action.payload.measurement.id,
+  );
+
+  draft.view.measurements[measurement.id] = {
+    ...draft.view.measurements[measurement.id],
+    ...action.payload.display,
+  };
+};
+
+export const changeMeasurementsDisplay: AppStateProducer<
+  'CHANGE_MEASUREMENTS_DISPLAY'
+> = (draft, action) => {
+  assert(draft.view.selectedKind);
+
+  for (const id of draft.view.selectedMeasurements[draft.view.selectedKind] ||
+    []) {
+    draft.view.measurements[id] = {
+      ...draft.view.measurements[id],
+      ...action.payload.display,
+    };
+  }
+};
+
+export const removeSelectedMeasurements: AppStateProducer<
+  'REMOVE_SELECTED_MEASUREMENTS'
+> = (draft, action) => {
+  const {
+    payload: { kind },
+  } = action;
+
+  const selectedMeasurements = draft.view.selectedMeasurements[kind];
+  if (!selectedMeasurements) {
+    return;
+  }
+
+  delete draft.view.selectedMeasurements[kind];
+
+  draft.data.measurements[kind].entries = draft.data.measurements[
+    kind
+  ].entries.filter((measurement) => {
+    return !selectedMeasurements.includes(measurement.id);
+  });
+
+  for (const id of selectedMeasurements) {
+    delete draft.view.measurements[id];
+  }
+
+  resetZoom(draft, kind);
+
+  if (draft.data.measurements[kind].entries.length > 0) {
+    draft.view.selectedMeasurements[kind] = [
+      draft.data.measurements[kind].entries[0].id,
+    ];
+  }
+};

package/src/app-data/state/producers/plot-view/helpers/zoom.ts

@@ -0,0 +1,63 @@
+import { assert } from '../../../../../components/index';
+import {
+  getPreferredVariable,
+  getVariableByLabel,
+} from '../../../../helpers/variables';
+import {
+  AppState,
+  iterateKindMeasurementsAndView,
+  MeasurementBase,
+  MeasurementKind,
+  Plot2DZoom,
+} from '../../../index';
+
+export function getInitialZoom(): Plot2DZoom {
+  return {
+    x: { min: Number.POSITIVE_INFINITY, max: Number.NEGATIVE_INFINITY },
+    y: { min: Number.POSITIVE_INFINITY, max: Number.NEGATIVE_INFINITY },
+  };
+}
+
+export function resetZoom(draft: AppState, kind: MeasurementKind): void {
+  const plotView = draft.view.plot[kind];
+  assert(plotView);
+  plotView.zoom = getInitialZoom();
+  for (const { measurement } of iterateKindMeasurementsAndView(draft, kind)) {
+    updateZoom(draft, kind, measurement);
+  }
+}
+
+export function updateZoom(
+  draft: AppState,
+  kind: MeasurementKind,
+  measurement: MeasurementBase,
+) {
+  let plotView = draft.view.plot[kind];
+  if (!plotView) {
+    plotView = {
+      zoom: getInitialZoom(),
+      xVariable: getPreferredVariable(measurement, 'x').label,
+      yVariable: getPreferredVariable(measurement, 'y').label,
+    };
+    draft.view.plot[kind] = plotView;
+  }
+
+  const xVariable = plotView.xVariable;
+  const yVariable = plotView.yVariable;
+  assert(xVariable && yVariable);
+
+  const mXVariable = getVariableByLabel(measurement, xVariable);
+  const mYVariable = getVariableByLabel(measurement, yVariable);
+
+  if (
+    typeof mXVariable?.min === 'number' &&
+    typeof mXVariable?.max === 'number' &&
+    typeof mYVariable?.min === 'number' &&
+    typeof mYVariable?.max === 'number'
+  ) {
+    plotView.zoom.x.min = Math.min(plotView.zoom.x.min, mXVariable.min);
+    plotView.zoom.x.max = Math.max(plotView.zoom.x.max, mXVariable.max);
+    plotView.zoom.y.min = Math.min(plotView.zoom.y.min, mYVariable.min);
+    plotView.zoom.y.max = Math.max(plotView.zoom.y.max, mYVariable.max);
+  }
+}

package/src/app-data/state/producers/plot-view/plot-view.ts

@@ -0,0 +1,29 @@
+import { assert } from '../../../../components/index';
+import { AppStateProducer } from '../types';
+
+import { resetZoom } from './helpers/zoom';
+
+export const plotZoom: AppStateProducer<'PLOT_ZOOM'> = (draft, action) => {
+  const { kind, zoom } = action.payload;
+  const plotView = draft.view.plot[kind];
+  assert(plotView);
+  plotView.zoom = zoom;
+};
+
+export const plotZoomOut: AppStateProducer<'PLOT_ZOOM_OUT'> = (
+  draft,
+  action,
+) => {
+  const { kind } = action.payload;
+  resetZoom(draft, kind);
+};
+
+export const ivPlotSelectVariable: AppStateProducer<
+  'IV_PLOT_SELECT_VARIABLE'
+> = (draft, action) => {
+  const { axis, variable } = action.payload;
+  const plotView = draft.view.plot.iv;
+  assert(plotView);
+  plotView[`${axis}Variable`] = variable;
+  resetZoom(draft, 'iv');
+};

package/src/app-data/state/producers/types.ts

@@ -0,0 +1,11 @@
+import { Draft } from 'immer';
+
+import { AppStateAction } from '../appStateActions';
+import { AppState } from '../index';
+
+export type ActionType = AppStateAction['type'];
+
+export type AppStateProducer<T extends ActionType> = (
+  draft: Draft<AppState>,
+  action: Extract<AppStateAction, { type: T }>,
+) => void;

package/src/app-data/state/settings/AppSettings.ts

@@ -0,0 +1,8 @@
+export interface AppSettings {
+  plot: {
+    /**
+     * Opacity of the unselected (but visible) series.
+     */
+    unselectedOpacity: number;
+  };
+}

package/src/app-data/state/settings/getEmptyAppSettings.ts

@@ -0,0 +1,9 @@
+import { AppSettings } from './AppSettings';
+
+export function getEmptyAppSettings(): AppSettings {
+  return {
+    plot: {
+      unselectedOpacity: 0.3,
+    },
+  };
+}

package/src/app-data/state/settings/index.ts

@@ -0,0 +1,2 @@
+export * from './AppSettings';
+export * from './getEmptyAppSettings';

package/src/app-data/state/view/AppView.ts

@@ -0,0 +1,29 @@
+import { GradientScaleName } from '../../../components/index';
+import type { MeasurementKind } from '../index';
+
+export interface AppView {
+  selectedKind?: MeasurementKind;
+  selectedMeasurements: Partial<Record<MeasurementKind, Array<string>>>;
+  measurements: Record<string, MeasurementAppView>;
+  plot: Partial<Record<MeasurementKind, PlotView>>;
+}
+
+export interface PlotView {
+  zoom: Plot2DZoom;
+  xVariable?: string;
+  yVariable?: string;
+}
+
+export interface Plot2DZoom {
+  x: { min: number; max: number };
+  y: { min: number; max: number };
+}
+
+export interface MeasurementAppView {
+  color: ColorConfig;
+  visible: boolean;
+}
+
+export type ColorConfig =
+  | { kind: 'fixed'; color: string }
+  | { kind: 'fixedGradient'; gradient: GradientScaleName };

package/src/app-data/state/view/getEmptyAppView.ts

@@ -0,0 +1,9 @@
+import { AppView } from './AppView';
+
+export function getEmptyAppView(): AppView {
+  return {
+    selectedMeasurements: {},
+    measurements: {},
+    plot: {},
+  };
+}

package/src/app-data/state/view/index.ts

@@ -0,0 +1,2 @@
+export * from './getEmptyAppView';
+export * from './AppView';

package/src/app-data/utils.ts

@@ -0,0 +1,13 @@
+export function download(blob: Blob, name: string) {
+  const link = document.createElement('a');
+
+  const url = URL.createObjectURL(blob);
+
+  link.setAttribute('href', url);
+  link.setAttribute('download', name);
+  link.style.visibility = 'hidden';
+  document.body.append(link);
+  link.click();
+  link.remove();
+  URL.revokeObjectURL(url);
+}

package/src/components/accordion/Accordion.tsx

@@ -0,0 +1,119 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import type { ReactElement, ReactNode, ReactFragment } from 'react';
+
+import { useDoubleClick } from '../hooks/index';
+
+import { useAccordionContext } from './AccordionContext';
+
+export interface AccordionProps {
+  children?:
+    | Array<ReactElement<AccordionItemProps>>
+    | ReactElement<AccordionItemProps>
+    | ReactFragment
+    | boolean
+    | null;
+}
+
+export interface AccordionItemProps {
+  title: string;
+  children: ReactNode;
+  defaultOpened?: boolean;
+}
+
+const styles = {
+  container: css({
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    width: '100%',
+  }),
+  item: (isOpen: boolean) => {
+    return css([
+      {
+        display: 'flex',
+        flexDirection: 'column',
+      },
+      isOpen && { flex: '1 1 0%' },
+    ]);
+  },
+  header: css({
+    cursor: 'pointer',
+    padding: '5px 12px',
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: '1em',
+    borderColor: 'rgb(213, 213, 213) currentcolor currentcolor',
+    borderStyle: 'solid none none',
+    color: 'rgb(45, 45, 45)',
+    fontWeight: 'bold',
+    textDecoration: 'none',
+    textShadow: 'rgb(255, 255, 255) 0px 1px 0px',
+    background:
+      'rgb(255, 255, 255) linear-gradient(rgb(240, 240, 240) 5%, rgb(225, 225, 225) 100%) repeat scroll 0% 0%',
+  }),
+};
+
+export function Accordion(props: AccordionProps) {
+  return <div css={styles.container}>{props.children}</div>;
+}
+
+Accordion.Item = function AccordionItem(props: AccordionItemProps) {
+  const { item, utils } = useAccordionContext(props.title, props.defaultOpened);
+
+  const onClickHandle = useDoubleClick({
+    onClick: utils.toggle,
+    onDoubleClick: utils.clear,
+  });
+
+  let displayable = false;
+
+  if (item) {
+    displayable = item.isOpen;
+  }
+
+  return (
+    <div
+      style={{
+        flex: displayable ? '1 1 1px' : 'none',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <button
+        onClick={onClickHandle}
+        type="button"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          width: '100%',
+          userSelect: 'text',
+        }}
+        css={styles.header}
+      >
+        {props.title}
+      </button>
+      <div
+        style={{
+          display: displayable ? 'flex' : 'none',
+          flex: displayable ? '1 1 1px' : 'none',
+          backgroundColor: 'white',
+          maxHeight: '100%',
+          overflow: 'hidden',
+        }}
+      >
+        <div
+          style={{
+            height: '100%',
+            width: '100%',
+            overflow: 'auto',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          {props.children}
+        </div>
+      </div>
+    </div>
+  );
+};