react-science 0.19.1

package/src/app/panels/measurements/MeasurementsPanel.tsx

@@ -0,0 +1,57 @@
+import {
+  kindLabels,
+  MeasurementKind,
+  measurementKinds,
+  useAppState,
+  useAppDispatch,
+} from '../../../app-data/index';
+import { TabItem, Tabs } from '../../../components/index';
+
+import { MeasurementsTable } from './MeasurementsTable';
+
+export function MeasurementsPanel() {
+  const appState = useAppState();
+  const { data, view } = appState;
+
+  const dispatch = useAppDispatch();
+
+  const kindItem = (kind: MeasurementKind) => ({
+    id: kind,
+    title: kindLabels[kind],
+    content: <MeasurementsTable kind={kind} />,
+  });
+
+  const availableKinds = measurementKinds.filter(
+    (label) => data.measurements[label].entries.length > 0,
+  );
+
+  const items: Array<TabItem<MeasurementKind>> = availableKinds.map(kindItem);
+
+  function handleTabSelection(id: MeasurementKind) {
+    dispatch({
+      type: 'SELECT_MEASUREMENT_KIND',
+      payload: id,
+    });
+  }
+
+  if (items.length > 1) {
+    return (
+      <Tabs<MeasurementKind>
+        orientation="horizontal"
+        items={items}
+        opened={view.selectedKind}
+        onClick={handleTabSelection}
+      />
+    );
+  }
+
+  if (items.length === 1 && items[0].content) {
+    return <>{items[0].content}</>;
+  }
+
+  return (
+    <div style={{ paddingTop: '1rem', marginInline: 'auto' }}>
+      No data available
+    </div>
+  );
+}

package/src/app/panels/measurements/MeasurementsPanelAccordion.tsx

@@ -0,0 +1,22 @@
+import {
+  getExistingMeasurementKinds,
+  kindLabels,
+  useAppData,
+} from '../../../app-data/index';
+import { Accordion } from '../../../components/index';
+
+import { MeasurementsPanel } from './MeasurementsPanel';
+
+export function MeasurementsPanelAccordion() {
+  const appData = useAppData();
+  const kinds = getExistingMeasurementKinds(appData.measurements);
+  const title =
+    kinds.length === 1
+      ? `${kindLabels[kinds[0]]} measurements`
+      : 'Measurements';
+  return (
+    <Accordion.Item title={title} defaultOpened>
+      <MeasurementsPanel />
+    </Accordion.Item>
+  );
+}

package/src/app/panels/measurements/MeasurementsTable.tsx

@@ -0,0 +1,250 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { FaTrash } from 'react-icons/fa';
+
+import {
+  MeasurementBase,
+  MeasurementKind,
+  useAppDispatch,
+  useAppState,
+} from '../../../app-data/index';
+import { ConfirmModal, useOnOff } from '../../../components/index';
+
+import { MeasurementCheckbox } from './MeasurementCheckbox';
+import MeasurementColorPreview from './MeasurementColorPreview';
+import MeasurementVisibilityToggle, {
+  MeasurementSelectedVisibilityChange,
+} from './MeasurementVisibilityToggle';
+
+export interface MeasurementsTableProps {
+  kind: MeasurementKind;
+}
+
+interface MeasurementsTableRowProps {
+  item: MeasurementBase;
+  kind: MeasurementsTableProps['kind'];
+}
+
+const styles = {
+  root: css`
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    border-collapse: collapse;
+    table-layout: fixed;
+  `,
+  th: css`
+    border-bottom-width: 1px;
+    font-weight: 500;
+    text-align: left;
+    padding-bottom: 10px;
+    padding-top: 10px;
+    padding-left: 2rem;
+  `,
+  tbody: css`
+    background-color: white;
+  `,
+  tr: css`
+    height: 50px;
+    max-height: 50px;
+    overflow: hidden;
+    cursor: pointer;
+    padding-left: 2rem;
+    padding-bottom: 10px;
+    padding-top: 10px;
+    border-bottom-width: 1px;
+
+    font-weight: 500;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  `,
+  header: css`
+    border-bottom-width: 1px;
+    font-weight: 500;
+    text-align: left;
+    padding-bottom: 10px;
+    padding-top: 10px;
+    padding-left: 2rem;
+  `,
+  iconsContainer: css`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    justify-items: center;
+    height: 50px;
+    flex-direction: row;
+    gap: 0.5rem;
+    cursor: default;
+    width: 70px;
+  `,
+  linkButton: css`
+    cursor: pointer;
+    :hover {
+      text-decoration: underline;
+    }
+  `,
+  container: css`
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  `,
+  headerColumn: css`
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    align-items: center;
+    padding-left: 5px;
+
+    border-bottom: 1px solid black;
+  `,
+};
+
+export function MeasurementsTable(props: MeasurementsTableProps) {
+  const { kind } = props;
+
+  const {
+    data: { measurements },
+    view: { selectedMeasurements },
+  } = useAppState();
+  const dispatch = useAppDispatch();
+  const [isRemoveModalOpen, openRemoveModal, closeRemoveModal] = useOnOff();
+
+  const hasSelectedMeasurements = (selectedMeasurements[kind]?.length ?? 0) > 0;
+
+  function onSelectLink(select: boolean) {
+    dispatch({
+      type: 'SELECT_ALL_MEASUREMENTS',
+      payload: {
+        kind,
+        select,
+      },
+    });
+  }
+
+  function onRemove() {
+    dispatch({ type: 'REMOVE_SELECTED_MEASUREMENTS', payload: { kind } });
+    closeRemoveModal();
+  }
+
+  return (
+    <div css={styles.container}>
+      <div css={styles.headerColumn}>
+        <MeasurementSelectedVisibilityChange kind={kind} openedEyes />
+        <MeasurementSelectedVisibilityChange kind={kind} openedEyes={false} />
+        <span css={styles.linkButton} onClick={() => onSelectLink(true)}>
+          Select all
+        </span>
+        <span css={styles.linkButton} onClick={() => onSelectLink(false)}>
+          Unselect all
+        </span>
+
+        <FaTrash
+          style={
+            hasSelectedMeasurements ? { cursor: 'pointer' } : { opacity: 0.6 }
+          }
+          onClick={hasSelectedMeasurements ? openRemoveModal : undefined}
+        />
+        <ConfirmModal
+          headerColor="red"
+          isOpen={isRemoveModalOpen}
+          onConfirm={onRemove}
+          onRequestClose={closeRemoveModal}
+          saveText="Remove"
+        >
+          <div style={{ fontWeight: 'bold', padding: 10 }}>
+            Remove selected measurements?
+          </div>
+        </ConfirmModal>
+      </div>
+
+      <table css={styles.root}>
+        <MeasurementsTableHeader />
+        <tbody css={styles.tbody}>
+          {measurements[kind].entries.map((element) => (
+            <MeasurementsTableRow key={element.id} item={element} kind={kind} />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+const tableHeaderStyles = {
+  thStyleEmpty: css`
+    display: flex;
+    gap: 5px;
+    align-items: center;
+    width: 70px;
+  `,
+  thStyleFilename: css`
+    width: 60%;
+  `,
+  thStyleTechnique: css`
+    width: 150px;
+  `,
+  tdName: css`
+    width: 60%;
+    overflow: hidden;
+  `,
+};
+
+function MeasurementsTableHeader() {
+  return (
+    <thead>
+      <tr css={styles.header}>
+        <th css={tableHeaderStyles.thStyleEmpty} />
+        <th css={tableHeaderStyles.thStyleFilename}>Filename</th>
+        <th css={tableHeaderStyles.thStyleTechnique}>Technique</th>
+      </tr>
+    </thead>
+  );
+}
+
+function MeasurementsTableRow(props: MeasurementsTableRowProps) {
+  const { item, kind } = props;
+
+  const {
+    view: { selectedMeasurements, measurements },
+  } = useAppState();
+
+  const dispatch = useAppDispatch();
+
+  function onSelectRow() {
+    dispatch({
+      type: 'SELECT_MEASUREMENT',
+      payload: { id: item.id, kind, acc: 'replace' },
+    });
+  }
+
+  function onSelectCheckbox() {
+    const isAlreadyChecked = selectedMeasurements[kind]?.includes(item.id);
+
+    dispatch({
+      type: 'SELECT_MEASUREMENT',
+      payload: { id: item.id, kind, acc: isAlreadyChecked ? 'remove' : 'add' },
+    });
+  }
+
+  return (
+    <tr css={styles.tr}>
+      <td css={styles.iconsContainer}>
+        <MeasurementVisibilityToggle
+          id={item.id}
+          isVisible={measurements[item.id].visible}
+        />
+        <MeasurementColorPreview
+          measurementId={item.id}
+          kind={kind}
+          color={measurements[item.id].color}
+        />
+        <MeasurementCheckbox
+          checked={selectedMeasurements[kind]?.includes(item.id) || false}
+          onSelectCheckbox={onSelectCheckbox}
+        />
+      </td>
+      <td css={tableHeaderStyles.tdName} onClick={onSelectRow} title={item.id}>
+        {item.info.file?.name ?? item.info.title}
+      </td>
+      <td onClick={onSelectRow}>{item.meta.technique}</td>
+    </tr>
+  );
+}

package/src/app/panels/measurements/index.ts

@@ -0,0 +1,2 @@
+export * from './MeasurementsPanelAccordion';
+export * from './MeasurementsPanel';

package/src/app-data/enhancers/enhance.ts

@@ -0,0 +1,26 @@
+import type { Measurements } from '../index';
+import { MeasurementBase } from '../state/index';
+
+export type Enhancer<T extends MeasurementBase> = (data: T) => void;
+
+export type Enhancers = {
+  [mKind in keyof Measurements]: Enhancer<
+    Measurements[mKind]['entries'][number]
+  >[];
+};
+
+export function enhance(
+  measurements: Partial<Measurements>,
+  enhancers: Partial<Enhancers>,
+) {
+  for (const [kind, kindEnhancers] of Object.entries(enhancers)) {
+    const kindMeasurements = measurements[kind as keyof Measurements];
+    if (kindMeasurements) {
+      for (const measurement of kindMeasurements.entries) {
+        for (const enhancer of kindEnhancers) {
+          enhancer(measurement);
+        }
+      }
+    }
+  }
+}

package/src/app-data/enhancers/index.ts

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

package/src/app-data/helpers/index.ts

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

package/src/app-data/helpers/variables.ts

@@ -0,0 +1,29 @@
+import { MeasurementVariable } from 'cheminfo-types';
+
+import { MeasurementBase } from '../state/index';
+
+export function getAllVariableSymbols(measurement: MeasurementBase): string[] {
+  return Object.values(measurement.data[0].variables).map((v) => v.label);
+}
+
+export function getPreferredVariable(
+  measurement: MeasurementBase,
+  axis: 'x' | 'y',
+): MeasurementVariable {
+  if (axis === 'x') {
+    return measurement.data[0].variables.x || measurement.data[0].variables.a;
+  } else {
+    return measurement.data[0].variables.y || measurement.data[0].variables.b;
+  }
+}
+
+export function getVariableByLabel(
+  measurement: MeasurementBase,
+  label: string,
+): MeasurementVariable | null {
+  const variables = measurement.data[0].variables;
+  for (const value of Object.values(variables)) {
+    if (value.label === label) return value;
+  }
+  return null;
+}

package/src/app-data/index.ts

@@ -0,0 +1,6 @@
+export * from './enhancers/index';
+export * from './helpers/index';
+export * from './kinds/index';
+export * from './loaders/index';
+export * from './state/index';
+export * from './utils';

package/src/app-data/kinds/index.ts

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

package/src/app-data/kinds/ir/IrMeasurement.ts

@@ -0,0 +1,15 @@
+import type { MeasurementBase } from '../../index';
+
+import type { IrPeak } from './IrPeak';
+
+/**
+ * When we have a simple measurement like uv, ir, etc, data should only contain one element
+ * Sometimes measurements are more complex like in GC / MS, GC / MS / MS, raman images, etc. In this case we will add the meta and info properties
+ * to differentiate each measurement
+ * If we have isotherm with gaz absorption / desorption this format should also be used.
+ * The 'info'for each 'Measurement' should be normalized.
+ */
+
+export interface IrMeasurement extends MeasurementBase {
+  peaks?: IrPeak[];
+}

package/src/app-data/kinds/ir/IrPeak.ts

@@ -0,0 +1,8 @@
+export type IrPeakKind = 'S' | 'w' | 'm';
+
+export interface IrPeak {
+  wavenumber: number;
+  absorbance: number;
+  transmittance: number;
+  kind: IrPeakKind;
+}

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

@@ -0,0 +1,4 @@
+export * from './irAutoPeakPickingEnhancer';
+export * from './IrMeasurement';
+export * from './irMeasurementEnhancer';
+export * from './IrPeak';

package/src/app-data/kinds/ir/irAutoPeakPickingEnhancer.ts

@@ -0,0 +1,93 @@
+import { gsd, GSDOptions } from 'ml-gsd';
+import type { Shape1D } from 'ml-peak-shape-generator';
+import { xMinMaxValues } from 'ml-spectra-processing';
+
+import type { IrMeasurement } from './IrMeasurement';
+import type { IrPeak, IrPeakKind } from './IrPeak';
+
+export interface AutoPeakPickingOptions extends GSDOptions {
+  /** x variable label, by default 'x' */
+  xVariable?: string;
+  /** y variable label, by default 'y' */
+  yVariable?: string;
+  shape?: Shape1D;
+  /** First X value for the peak picking (default: first X value */
+  from?: number;
+  /** Last X value for the peak picking (default: last X value */
+  to?: number;
+  /** Minimal peak width */
+  minPeakWidth?: number;
+}
+
+/** Based on a x value we will return a peak*/
+export function irAutoPeakPickingEnhancer(
+  measurement: IrMeasurement,
+  options: AutoPeakPickingOptions = {},
+) {
+  const { xVariable = 'x', yVariable = 'y', minPeakWidth } = options;
+
+  // we throw if there are more than one spectrum
+  if (measurement.data.length > 1) {
+    throw new Error(
+      'autoPeakPickingEnhancer can only be applied if there is only on measurement data',
+    );
+  }
+  if (measurement.data.length === 0) return;
+
+  const datum = measurement.data[0];
+
+  let x = datum.variables[xVariable]?.data;
+  let y = datum.variables[yVariable]?.data;
+  if (!x || !y) return [];
+
+  let { from, to } = options;
+
+  let peaks: Array<{ x: number; y: number; width: number; index: number }> =
+    gsd({ x, y }, options);
+
+  if (from !== undefined) {
+    peaks = peaks.filter((peak) => peak.x >= (from as number));
+  }
+  if (to !== undefined) {
+    peaks = peaks.filter((peak) => peak.x <= (to as number));
+  }
+  if (minPeakWidth) {
+    peaks = peaks.filter((peak) => peak.width >= minPeakWidth);
+  }
+
+  const minMaxTransmittance = xMinMaxValues(datum.variables.t.data);
+  const results: IrPeak[] = peaks.map((peak) => ({
+    wavenumber: datum.variables.x.data[peak.index],
+    absorbance: datum.variables.a.data[peak.index],
+    transmittance: datum.variables.t.data[peak.index] / 100,
+    kind: getPeakKind(
+      datum.variables.t.data[peak.index],
+      minMaxTransmittance.min,
+      minMaxTransmittance.max,
+    ),
+  }));
+
+  measurement.peaks = results;
+}
+
+export function getIrAutoPeakPickingEnhancer(
+  options: AutoPeakPickingOptions | undefined,
+) {
+  return (measurement: IrMeasurement) =>
+    irAutoPeakPickingEnhancer(measurement, options);
+}
+
+function getPeakKind(
+  transmittance: number,
+  minTransmittance: number,
+  maxTransmittance: number,
+): IrPeakKind {
+  let position =
+    (maxTransmittance - transmittance) / (maxTransmittance - minTransmittance);
+  if (position < 0.33) {
+    return 'w';
+  } else if (position < 0.66) {
+    return 'm';
+  }
+  return 'S';
+}

package/src/app-data/kinds/ir/irMeasurementEnhancer.ts

@@ -0,0 +1,51 @@
+import type { MeasurementBase } from '../../index';
+
+/**
+ * we add missing absorbance / transmittance
+ * variable a = absorbance
+ * variable t = transmittance
+ */
+
+export function irMeasurementEnhancer(measurement: MeasurementBase) {
+  for (const datum of measurement.data) {
+    const variables = datum.variables;
+    let yVariable = variables.y;
+    let absorbance = true;
+    if (yVariable.label.toLowerCase().includes('trans')) {
+      absorbance = false;
+    }
+
+    if (absorbance) {
+      variables.a = { ...yVariable };
+      variables.a.data = variables.a.data.slice();
+      variables.t = {
+        data: yVariable.data.map((absorbance) => 10 ** -absorbance * 100),
+        label: 'Transmittance (%)',
+        units: '',
+      };
+    } else {
+      const factor =
+        yVariable.label.includes('%') ||
+        yVariable.label.toLowerCase().includes('percent')
+          ? 100
+          : 1;
+      variables.a = {
+        data: yVariable.data.map(
+          (transmittance) => -Math.log10(transmittance / factor),
+        ),
+        label: 'Absorbance',
+        units: '',
+      };
+      if (factor === 100) {
+        variables.t = { ...yVariable };
+        variables.t.data = variables.t.data.slice();
+      } else {
+        variables.t = {
+          units: '',
+          label: 'Transmittance (%)',
+          data: yVariable.data.map((transmittance) => transmittance * 100),
+        };
+      }
+    }
+  }
+}

package/src/app-data/kinds/iv/IvMeasurement.ts

@@ -0,0 +1,3 @@
+import type { MeasurementBase } from '../../index';
+
+export interface IvMeasurement extends MeasurementBase {}

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

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