react-science 3.1.0 → 4.1.0

package/src/app-data/loaders/biologicLoader.ts

@@ -1,11 +1,11 @@
 import { parseMPR, parseMPT } from 'biologic-converter';
 import type { MeasurementVariable } from 'cheminfo-types';
+import type { FifoLogger } from 'fifo-logger';
 import type { FileCollection } from 'filelist-utils';
 
-import type { Measurements, MeasurementBase } from '../index';
+import type { MeasurementBase, Measurements } from '../index';
 
 import { getMeasurementInfoFromFile } from './utility/getMeasurementInfoFromFile';
-import { createLogEntry, ParserLog } from './utility/parserLog';
 
 /* the MeasurementBase has got a data key,
  and inside a variable key, compatible with this type */
@@ -18,7 +18,7 @@ type MeasurementDataVariable = Record<string, MeasurementVariable>;
  */
 export async function biologicLoader(
   fileCollection: FileCollection,
-  logs?: ParserLog[],
+  logger?: FifoLogger,
 ): Promise<Partial<Measurements>> {
   const measurements: Partial<Measurements> = {};
   const entries: MeasurementBase[] = [];
@@ -67,14 +67,15 @@ export async function biologicLoader(
     } catch (error) {
       //send error to UI to show to User ?
       if (error instanceof Error) {
-        if (logs) {
-          logs.push(createLogEntry({ error, relativePath: file.relativePath }));
+        if (logger) {
+          logger.error(error);
         } else {
           throw error;
         }
       }
     }
   }
+  logger?.debug(`Loaded ${entries.length} entries with biologicLoader`);
   measurements.iv = { entries };
   return measurements;
 }

package/src/app-data/loaders/cdfLoader.ts

@@ -1,18 +1,19 @@
+import type { FifoLogger } from 'fifo-logger';
 import type { FileCollection } from 'filelist-utils';
 import { NetCDFReader } from 'netcdfjs';
 
 import { assert } from '../../components/index';
-import type { MeasurementBase, Measurements, MeasurementKind } from '../index';
+import type { MeasurementBase, MeasurementKind, Measurements } from '../index';
 
 import { getMeasurementInfoFromFile } from './utility/getMeasurementInfoFromFile';
-import { ParserLog, createLogEntry } from './utility/parserLog';
 
 export async function cdfLoader(
   fileCollection: FileCollection,
-  logs?: ParserLog[],
+  logger?: FifoLogger,
 ): Promise<Partial<Measurements>> {
   const newMeasurements: Partial<Measurements> = {};
   let kind: MeasurementKind | undefined;
+  let count = 0;
   for (const file of fileCollection) {
     if (/\.cdf$/i.test(file.name)) {
       try {
@@ -57,18 +58,12 @@ export async function cdfLoader(
               : chromatogram(reader),
         };
         newMeasurements[kind]?.entries.push(newMeasurement);
+        count++;
       } catch (error) {
         if (error instanceof Error) {
           //send error to UI ?
-          if (logs) {
-            logs.push(
-              createLogEntry({
-                error,
-                parser: 'cdfLoader',
-                message: 'error parsing file from cdfLoader',
-                relativePath: file.relativePath,
-              }),
-            );
+          if (logger) {
+            logger.error(error);
           } else {
             throw error;
           }
@@ -76,7 +71,7 @@ export async function cdfLoader(
       }
     }
   }
-
+  logger?.debug(`Loaded ${count} measurements with cdfLoader`);
   return newMeasurements;
 }
 

package/src/app-data/loaders/jcampLoader.ts

@@ -1,3 +1,4 @@
+import type { FifoLogger } from 'fifo-logger';
 import type { FileCollection } from 'filelist-utils';
 import { convert } from 'jcampconverter';
 
@@ -5,7 +6,6 @@ import { assert } from '../../components/index';
 import type { MeasurementKind, Measurements } from '../index';
 
 import { getMeasurementInfoFromFile } from './utility/getMeasurementInfoFromFile';
-import { createLogEntry, ParserLog } from './utility/parserLog';
 
 /**
  *
@@ -15,8 +15,9 @@ import { createLogEntry, ParserLog } from './utility/parserLog';
  */
 export async function jcampLoader(
   fileCollection: FileCollection,
-  logs?: ParserLog[],
+  logger?: FifoLogger,
 ): Promise<Partial<Measurements>> {
+  let count = 0;
   const newMeasurements: Partial<Measurements> = {};
   for (const file of fileCollection) {
     if (/(?:\.jdx|\.dx)$/i.test(file.name)) {
@@ -50,22 +51,15 @@ export async function jcampLoader(
               meta: measurement.meta,
               data: normalizeSpectra(measurement.spectra),
             };
+            count++;
             Object.assign(newMeasurement.info, measurement.info);
             newMeasurements[kind]?.entries.push(newMeasurement);
           }
         }
       } catch (error) {
-        // send error to UI ?
         if (error instanceof Error) {
-          if (logs) {
-            logs.push(
-              createLogEntry({
-                error,
-                parser: 'jcamp converter',
-                relativePath: file.relativePath,
-                message: 'error parsing jdx or dx file',
-              }),
-            );
+          if (logger) {
+            logger?.error(error);
           } else {
             throw error;
           }
@@ -74,6 +68,7 @@ export async function jcampLoader(
     }
   }
 
+  logger?.debug(`Loaded ${count} measurements with jcampLoader`);
   return newMeasurements;
 }
 
@@ -97,10 +92,11 @@ function normalizeSpectra(spectra: any) {
       for (const key in variables) {
         const variable = variables[key];
         if (variable.label) continue;
-        variable.label = variable.name || variable.symbol || key;
-        if (variable.units && !variable.label.includes(variable.units)) {
-          variable.label += ` [${variable.units}]`;
+        let label: string = variable.name || variable.symbol || key;
+        if (variable.units && !label.includes(variable.units)) {
+          label += ` [${variable.units}]`;
         }
+        variable.label = label;
       }
     }
     data.push({ variables });

package/src/app-data/loaders/loadMeasurements.ts

@@ -1,7 +1,8 @@
+import type { FifoLogger } from 'fifo-logger';
 import type { FileCollection } from 'filelist-utils';
 import { xMinMaxValues } from 'ml-spectra-processing';
 
-import { Measurements, enhance, Enhancers, MeasurementBase } from '../index';
+import { enhance, Enhancers, MeasurementBase, Measurements } from '../index';
 
 import {
   MeasurementsLoader,
@@ -12,20 +13,20 @@ import type { ParserLog } from './utility/parserLog';
 export interface LoadOptions {
   loaders?: MeasurementsLoader[];
   enhancers?: Partial<Enhancers>;
-  logger?: boolean;
+  logger?: FifoLogger;
 }
 
 export async function loadMeasurements(
   fileCollection: FileCollection,
-  options: LoadOptions = {},
+  options: LoadOptions,
 ) {
   const measurements: Partial<Measurements> = {};
   const logs: ParserLog[] = [];
-  const { loaders = [], enhancers = {}, logger = true } = options;
+  const { loaders = [], enhancers = {}, logger } = options;
   for (const loader of loaders) {
     // TODO: load in parallel
     // eslint-disable-next-line no-await-in-loop
-    const loaderData = await loader(fileCollection, logger ? logs : undefined);
+    const loaderData = await loader(fileCollection, logger);
     for (const { entries } of Object.values(loaderData)) {
       for (const entry of entries) {
         computeMinMax(entry);

package/src/app-data/loaders/proprietary/agilent/cary500Loader.ts

@@ -1,16 +1,15 @@
-import type { FileCollectionItem, FileCollection } from 'filelist-utils';
+import type { FifoLogger } from 'fifo-logger';
+import type { FileCollection, FileCollectionItem } from 'filelist-utils';
 
 import {
-  Measurements,
-  MeasurementBase,
   getMeasurementInfoFromFile,
-  ParserLog,
-  createLogEntry,
+  MeasurementBase,
+  Measurements,
 } from '../../../index';
 
 export async function cary500Loader(
   fileCollection: FileCollection,
-  logs?: ParserLog[],
+  logger?: FifoLogger,
 ): Promise<Partial<Measurements>> {
   const newMeasurements: Partial<Measurements> = {};
   const entries: MeasurementBase[] = [];
@@ -26,16 +25,8 @@ export async function cary500Loader(
         }
       } catch (error) {
         if (error instanceof Error) {
-          if (logs) {
-            logs.push(
-              createLogEntry({
-                kind: 'error',
-                parser: 'cary500Loader',
-                message: 'Error parsing cary500 experiment.',
-                error,
-                relativePath: file.relativePath,
-              }),
-            );
+          if (logger) {
+            logger.error(error);
           } else {
             throw error;
           }
@@ -43,6 +34,7 @@ export async function cary500Loader(
       }
     }
   }
+  logger?.debug(`Loaded ${entries.length} entries with cary500Loader`);
   newMeasurements.uvvis = { entries };
   return newMeasurements;
 }

package/src/app-data/loaders/spcLoader.ts

@@ -1,11 +1,11 @@
+import type { FifoLogger } from 'fifo-logger';
 import type { FileCollection } from 'filelist-utils';
-import { parse, guessSpectraType } from 'spc-parser';
+import { guessSpectraType, parse } from 'spc-parser';
 
 import { assert } from '../../components/index';
-import type { MeasurementKind, Measurements, MeasurementBase } from '../index';
+import type { MeasurementBase, MeasurementKind, Measurements } from '../index';
 
 import { getMeasurementInfoFromFile } from './utility/getMeasurementInfoFromFile';
-import { ParserLog, createLogEntry } from './utility/parserLog';
 
 /**
  *
@@ -15,7 +15,7 @@ import { ParserLog, createLogEntry } from './utility/parserLog';
  */
 export async function spcLoader(
   fileCollection: FileCollection,
-  logs?: ParserLog[],
+  logger?: FifoLogger,
 ): Promise<Partial<Measurements>> {
   const measurements: Partial<Measurements> = {};
   for (const file of fileCollection) {
@@ -38,14 +38,8 @@ export async function spcLoader(
           data: parsed.spectra as unknown as MeasurementBase['data'],
         });
       } catch (error) {
-        if (error instanceof Error && logs) {
-          logs.push(
-            createLogEntry({
-              parser: 'spc-parser',
-              relativePath: file.relativePath,
-              error,
-            }),
-          );
+        if (error instanceof Error && logger) {
+          logger.error(error);
         } else {
           throw error;
         }

package/src/app-data/loaders/utility/measurementLoader.ts

@@ -1,13 +1,12 @@
+import type { FifoLogger } from 'fifo-logger';
 import type { FileCollection } from 'filelist-utils';
 
 import { assert } from '../../../components/index';
 import type { MeasurementBase, Measurements } from '../../index';
 
-import type { ParserLog } from './parserLog';
-
 export type MeasurementsLoader = (
   fileCollection: FileCollection,
-  logs?: ParserLog[],
+  logger?: FifoLogger,
 ) => Promise<Partial<Measurements>>;
 
 export function mergeMeasurements(

package/src/app-data/loaders/wdfLoader.ts

@@ -1,11 +1,11 @@
 import { MeasurementVariable } from 'cheminfo-types';
+import type { FifoLogger } from 'fifo-logger';
 import type { FileCollection } from 'filelist-utils';
 import { parse, Wdf } from 'wdf-parser';
 
-import type { Measurements, MeasurementBase } from '../index';
+import type { MeasurementBase, Measurements } from '../index';
 
 import { getMeasurementInfoFromFile } from './utility/getMeasurementInfoFromFile';
-import { ParserLog, createLogEntry } from './utility/parserLog';
 
 /**
  *
@@ -15,7 +15,7 @@ import { ParserLog, createLogEntry } from './utility/parserLog';
  */
 export async function wdfLoader(
   fileCollection: FileCollection,
-  logs?: ParserLog[],
+  logger?: FifoLogger,
 ): Promise<Partial<Measurements>> {
   const measurements: Partial<Measurements> = {};
   const entries: MeasurementBase[] = [];
@@ -33,15 +33,8 @@ export async function wdfLoader(
         });
       } catch (error) {
         if (error instanceof Error) {
-          if (logs) {
-            logs.push(
-              createLogEntry({
-                parser: 'wdf',
-                error,
-                message: 'error reading wdf file',
-                relativePath: file.relativePath,
-              }),
-            );
+          if (logger) {
+            logger.error(error);
           } else {
             throw error;
           }

package/src/components/button/Button.tsx

@@ -18,21 +18,28 @@ type BlueprintProps = {
     BlueprintAnchorButtonProps[key];
 };
 export type ButtonProps = BlueprintProps & {
-  tooltipProps?: Omit<TooltipProps, 'children'>;
+  tooltipProps?: Partial<Omit<TooltipProps, 'children'>>;
   tag?: ReactNode;
   tagProps?: Omit<TagProps, 'children'>;
 };
 
 export function Button(props: ButtonProps) {
-  const { tooltipProps, children, tag, tagProps, ...buttonProps } = props;
-
+  const { tooltipProps = {}, children, tag, tagProps, ...buttonProps } = props;
+  const {
+    fill,
+    content = '',
+    disabled = !tooltipProps.content,
+    ...otherToolTipProps
+  } = tooltipProps;
   const InnerButton = buttonProps.disabled
     ? BlueprintAnchorButton
     : BlueprintButton;
   return (
     <Tooltip
-      fill={tooltipProps?.fill || buttonProps.fill}
-      {...tooltipProps}
+      fill={fill || buttonProps.fill}
+      disabled={disabled}
+      content={content}
+      {...otherToolTipProps}
       renderTarget={({ isOpen, ...targetProps }) => (
         <div style={{ position: 'relative' }}>
           {tag && (

package/src/components/color-picker/gradient-select/GradientSelect.tsx

@@ -1,9 +1,8 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error
-// @ts-ignore This import fails when compiling to CJS.
-import { Listbox } from '@headlessui/react';
+import * as Select from '@radix-ui/react-select';
 import * as scaleChromatic from 'd3-scale-chromatic';
-import { Fragment } from 'react';
 import { FaChevronDown } from 'react-icons/fa';
 
 import FixedGradientPreview from '../preview/FixedGradientPreview';
@@ -24,16 +23,10 @@ const GradientSelectListbox = styled.div`
   position: relative;
   width: 100%;
   border: 1px solid darkgray;
+  margin-top: 100px;
   border-radius: 0.25rem;
 `;
 
-const GradientSelectButton = styled.button`
-  position: relative;
-  width: 100%;
-  height: 30px;
-  padding: 3px;
-`;
-
 const GradientSelectChevron = styled(FaChevronDown)`
   position: absolute;
   height: 100%;
@@ -41,23 +34,11 @@ const GradientSelectChevron = styled(FaChevronDown)`
   right: 0.5rem;
 `;
 
-const GradientSelectOptions = styled.ul`
-  position: absolute;
-  width: 100%;
-  margin-top: 5px;
-  border: 1px solid darkgray;
-  border-radius: 0.25rem;
-  padding-inline: 3px;
-  padding-bottom: 5px;
-`;
-
-const GradientSelectOption = styled.li<{ active: boolean }>`
+const GradientSelectOption = styled.li`
   display: flex;
   flex-direction: column;
   padding-top: 5px;
   cursor: pointer;
-  ${(props) => !props.active && 'opacity: 0.8;'}
-  ${(props) => props.active && 'font-weight: bold;'}
 `;
 
 export interface GradientSelectProps {
@@ -68,27 +49,82 @@ export interface GradientSelectProps {
 export function GradientSelect(props: GradientSelectProps) {
   const { value, onChange } = props;
   return (
-    <Listbox value={value} onChange={onChange}>
-      <GradientSelectListbox>
-        <Listbox.Button as={GradientSelectButton}>
-          <FixedGradientPreview gradient={value} />
-          <GradientSelectChevron />
-        </Listbox.Button>
-        <Listbox.Options as={GradientSelectOptions}>
-          {scaleOptions.map((option) => (
-            <Listbox.Option as={Fragment} key={option} value={option}>
-              {({ active }) => (
-                <GradientSelectOption active={active}>
-                  {option}
-                  <div style={{ height: 15 }}>
-                    <FixedGradientPreview gradient={option} />
-                  </div>
-                </GradientSelectOption>
-              )}
-            </Listbox.Option>
-          ))}
-        </Listbox.Options>
-      </GradientSelectListbox>
-    </Listbox>
+    <GradientSelectListbox>
+      <Select.Root value={value} onValueChange={onChange}>
+        <Select.Trigger
+          css={css`
+            width: 100%;
+            height: 30px;
+            padding: 4px;
+          `}
+        >
+          <Select.Value>
+            <FixedGradientPreview gradient={value} />
+            <GradientSelectChevron />
+          </Select.Value>
+        </Select.Trigger>
+        <Select.Portal>
+          <Select.Content
+            position="popper"
+            sideOffset={10}
+            css={css`
+              background-color: white;
+              width: var(--radix-select-trigger-width);
+              border: 1px solid darkgray;
+              border-radius: 0.25rem;
+              padding: 4px;
+            `}
+          >
+            <Select.Viewport>
+              {scaleOptions.map((option) => (
+                <Select.Item
+                  key={option}
+                  value={option}
+                  css={css`
+                    outline: none;
+                    padding: 8px 0 8px 0;
+                    cursor: pointer;
+                    margin-left: 20px;
+                    &[data-state='checked'] {
+                      font-weight: bold;
+                    }
+                    &[data-state='unchecked'] {
+                      opacity: 1;
+                    }
+
+                    &:not([data-highlighted]) span {
+                      margin-left: 12px;
+                    }
+                    &[data-highlighted] {
+                      span {
+                        margin-left: 4px;
+                      }
+                      ::before {
+                        content: '';
+                        display: inline-block;
+                        width: 8px;
+                        height: 8px;
+                        border-radius: 1px;
+                        filter: brightness(60%);
+                        background-color: dimgray;
+                      }
+                    }
+                  `}
+                >
+                  <Select.ItemText>
+                    {option}
+                    <GradientSelectOption>
+                      <div style={{ height: 15 }}>
+                        <FixedGradientPreview gradient={option} />
+                      </div>
+                    </GradientSelectOption>
+                  </Select.ItemText>
+                </Select.Item>
+              ))}
+            </Select.Viewport>
+          </Select.Content>
+        </Select.Portal>
+      </Select.Root>
+    </GradientSelectListbox>
   );
 }

package/src/components/hooks/useSelect.tsx

@@ -1,6 +1,6 @@
 import { MenuItem } from '@blueprintjs/core';
 import { ItemRenderer } from '@blueprintjs/select';
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 
 type FilterType<SourceType, Type> = Pick<
   SourceType,
@@ -9,14 +9,17 @@ type FilterType<SourceType, Type> = Pick<
   }[keyof SourceType]
 >;
 
-interface BaseOptions<T> {
-  itemTextKey: keyof FilterType<T, string>;
+interface ItemOptions<T> {
+  renderItem?: (item: T) => ReactNode;
   defaultSelectedItem?: T;
 }
 
-interface RenderOptions<T> {
+interface BaseOptions<T> extends ItemOptions<T> {
+  itemTextKey: keyof FilterType<T, string>;
+}
+
+interface RenderOptions<T> extends ItemOptions<T> {
   getItemText: (item: T) => string;
-  defaultSelectedItem?: T;
 }
 
 type SelectOptions<T> = BaseOptions<T> | RenderOptions<T>;
@@ -91,16 +94,18 @@ function getItemRenderer<T>(value: T, options: SelectOptions<T>) {
     { handleClick, handleFocus, modifiers, index },
   ) => {
     const label = getLabel(item, options);
+    const { renderItem } = options;
+    const { active, disabled } = modifiers;
     return (
       <MenuItem
-        active={modifiers.active}
-        disabled={modifiers.disabled}
+        active={active}
+        disabled={disabled}
         selected={selectedLabel === label}
         key={index}
         onClick={handleClick}
         onFocus={handleFocus}
         roleStructure="listoption"
-        text={label}
+        text={renderItem?.(item) || label}
       />
     );
   };

package/src/components/index.ts

@@ -1,13 +1,14 @@
 export * from './accordion/index';
 export * from './button/index';
 export * from './color-picker/index';
+export * from './dialog/index';
 export * from './drop-zone/index';
 export * from './forms/index';
 export * from './fullscreen/index';
 export * from './header/index';
 export * from './hooks/index';
 export * from './info-panel/index';
-export * from './dialog/index';
+export * from './logger/index';
 export * from './root-layout/index';
 export * from './split-pane/index';
 export * from './table/index';