react-science 3.0.0 → 4.0.0

package/lib-esm/components/toolbar/TooltipHelpContent.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+const shortcutBoxSize = 1.5;
+const FlexContainer = styled.div `
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+`;
+const Title = styled.span `
+  font-size: ${({ size }) => size};
+  flex: 1;
+  padding: 5px 0;
+  text-align: left;
+`;
+const Description = styled.p `
+  padding-top: 1rem;
+  font-size: 0.7rem;
+  text-align: left;
+`;
+const ShortcutItem = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.2rem;
+  border: 1px solid;
+  border-radius: 4px;
+  height: ${shortcutBoxSize}rem;
+  min-width: ${shortcutBoxSize}rem;
+  margin-left: 5px;
+  font-size: 0.75rem;
+  font-weight: bold;
+`;
+const SubTitleItem = styled.div `
+  position: relative;
+  padding-left: 15px;
+  box-sizing: border-box;
+
+  &::before {
+    position: absolute;
+    top: ${shortcutBoxSize / 2}rem;
+    left: 0;
+    width: 10px;
+    height: 1px;
+    margin: auto;
+    content: '';
+    border-bottom: 1px solid;
+  }
+
+  &::after {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 1px;
+    height: 100%;
+    content: '';
+    border-left: 1px solid;
+  }
+
+  &:last-child::after {
+    height: ${shortcutBoxSize / 2}rem;
+  }
+
+  &:first-child {
+    margin: 0;
+  }
+`;
+export function TooltipHelpContent(props) {
+    const { title, shortcuts = [], subTitles = [], description = '', link, style = {}, } = props;
+    return (_jsxs("div", { style: {
+            color: 'white',
+            width: '250px',
+            padding: '0.5rem',
+            ...style,
+        }, children: [_jsxs(FlexContainer, { children: [_jsx(Title, { size: "0.9rem", children: title }), _jsx(ShortCuts, { shortcuts: shortcuts })] }), _jsx(SubTitles, { items: subTitles }), (description || link) && (_jsxs(Description, { children: [description, link && (_jsx("a", { style: description ? { paddingLeft: '5px' } : {}, target: "_blank", href: link, rel: "noreferrer", children: "Learn more" }))] }))] }));
+}
+function ShortCuts({ shortcuts }) {
+    return (_jsx("div", { style: {
+            display: 'flex',
+            textWrap: 'nowrap',
+        }, children: shortcuts.map((key) => {
+            return (_jsx(ShortcutItem, { children: _jsx("span", { children: key }) }, key));
+        }) }));
+}
+function SubTitles({ items }) {
+    if (!items || items.length === 0) {
+        return null;
+    }
+    return (_jsx("ul", { style: {
+            paddingLeft: '5px',
+            listStyle: 'none',
+        }, children: items.map(({ shortcuts = [], title }) => (_jsx(SubTitleItem, { children: _jsxs(FlexContainer, { children: [_jsx(Title, { size: "0.7rem", children: title }), _jsx(ShortCuts, { shortcuts: shortcuts })] }) }, title))) }));
+}
+//# sourceMappingURL=TooltipHelpContent.js.map

package/lib-esm/components/toolbar/TooltipHelpContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipHelpContent.js","sourceRoot":"","sources":["../../../src/components/toolbar/TooltipHelpContent.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,MAAM,eAAe,GAAG,GAAG,CAAC;AAE5B,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK/B,CAAC;AAMF,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAY;eACtB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI;;;;CAIhC,CAAC;AACF,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAA;;;;CAI3B,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;YAOnB,eAAe;eACZ,eAAe;;;;CAI7B,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;WAOpB,eAAe,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;cAqBhB,eAAe,GAAG,CAAC;;;;;;CAMhC,CAAC;AAWF,MAAM,UAAU,kBAAkB,CAAC,KAAkB;IACnD,MAAM,EACJ,KAAK,EACL,SAAS,GAAG,EAAE,EACd,SAAS,GAAG,EAAE,EACd,WAAW,GAAG,EAAE,EAChB,IAAI,EACJ,KAAK,GAAG,EAAE,GACX,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,eACE,KAAK,EAAE;YACL,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,QAAQ;YACjB,GAAG,KAAK;SACT,aAED,MAAC,aAAa,eACZ,KAAC,KAAK,IAAC,IAAI,EAAC,QAAQ,YAAE,KAAK,GAAS,EACpC,KAAC,SAAS,IAAC,SAAS,EAAE,SAAS,GAAI,IACrB,EAChB,KAAC,SAAS,IAAC,KAAK,EAAE,SAAS,GAAI,EAE9B,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,CACxB,MAAC,WAAW,eACT,WAAW,EACX,IAAI,IAAI,CACP,YACE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,EAChD,MAAM,EAAC,QAAQ,EACf,IAAI,EAAE,IAAI,EACV,GAAG,EAAC,YAAY,2BAGd,CACL,IACW,CACf,IACG,CACP,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,SAAS,EAA2B;IACvD,OAAO,CACL,cACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,QAAQ,EAAE,QAAQ;SACnB,YAEA,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;YACrB,OAAO,CACL,KAAC,YAAY,cACX,yBAAO,GAAG,GAAQ,IADD,GAAG,CAEP,CAChB,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,KAAK,EAA4B;IACpD,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACjC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,aACE,KAAK,EAAE;YACL,WAAW,EAAE,KAAK;YAClB,SAAS,EAAE,MAAM;SAClB,YAEA,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACxC,KAAC,YAAY,cACX,MAAC,aAAa,eACZ,KAAC,KAAK,IAAC,IAAI,EAAC,QAAQ,YAAE,KAAK,GAAS,EACpC,KAAC,SAAS,IAAC,SAAS,EAAE,SAAS,GAAI,IACrB,IAJC,KAAK,CAKT,CAChB,CAAC,GACC,CACN,CAAC;AACJ,CAAC"}

package/lib-esm/components/toolbar/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Toolbar';
 export * from './PanelPreferencesToolbar';
+export * from './TooltipHelpContent';
 //# sourceMappingURL=index.d.ts.map

package/lib-esm/components/toolbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC"}

package/lib-esm/components/toolbar/index.js

@@ -1,3 +1,4 @@
 export * from './Toolbar';
 export * from './PanelPreferencesToolbar';
+export * from './TooltipHelpContent';
 //# sourceMappingURL=index.js.map

package/lib-esm/components/toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/toolbar/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/toolbar/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-science",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "React components to build scientific applications UI",
   "exports": {
     "./app": {
@@ -60,6 +60,7 @@
   "peerDependencies": {
     "@blueprintjs/core": "^5.3.2",
     "@blueprintjs/icons": "^5.1.7",
+    "fifo-logger": "^1.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
@@ -80,18 +81,18 @@
     "d3-scale-chromatic": "^3.1.0",
     "filelist-utils": "^1.11.0",
     "immer": "^10.0.4",
-    "jcampconverter": "^9.6.3",
+    "jcampconverter": "^9.6.4",
     "lodash": "^4.17.21",
     "ml-gsd": "^12.1.6",
     "ml-peak-shape-generator": "^4.1.2",
     "ml-signal-processing": "^1.0.4",
-    "ml-spectra-processing": "^14.2.2",
-    "ms-spectrum": "^3.4.4",
+    "ml-spectra-processing": "^14.5.0",
+    "ms-spectrum": "^3.5.2",
     "netcdfjs": "^3.0.0",
     "react-d3-utils": "^1.0.0",
     "react-dropzone": "^14.2.3",
     "react-error-boundary": "^4.0.13",
-    "react-icons": "^5.0.1",
+    "react-icons": "^5.2.1",
     "react-inspector": "^6.0.2",
     "react-kbs": "^2.1.1",
     "react-plot": "^1.4.2",
@@ -128,6 +129,7 @@
     "eslint": "^8.57.0",
     "eslint-config-zakodium": "^8.1.0",
     "eslint-plugin-storybook": "^0.8.0",
+    "fifo-logger": "^1.0.0",
     "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

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

@@ -1,22 +1,25 @@
-import { UseQueryResult, useQuery } from '@tanstack/react-query';
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
+import type { FifoLogger } from 'fifo-logger';
 import { FileCollection, fileCollectionFromWebSource } from 'filelist-utils';
 import { useCallback } from 'react';
 
-import { AppDispatch, useAppDispatch } from '../../app-data/index';
-import { useHashSearchParams } from '../../components/index';
+import { AppDispatch, useAppDispatch } from '../../app-data';
+import { useFifoLogger, useHashSearchParams } from '../../components';
 
 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');
-  const query = useQuery({
+  return useQuery({
     queryKey: ['filelist', filelistUrl],
     queryFn: async () => {
       if (!filelistUrl) {
@@ -29,20 +32,19 @@ export function useLoadFileCollectionFromHash(
         entries: data,
         baseURL,
       });
-      void onLoad(fileCollection, appDispatch);
+      void onLoad(fileCollection, logger, appDispatch);
       return true;
     },
   });
-  return query;
 }
 
 export function useDropFiles(onLoad: LoadFn) {
   const dispatch = useAppDispatch();
-  const onDrop = useCallback(
+  const logger = useFifoLogger();
+  return useCallback(
     (files: File[]) => {
-      void onLoad(files, dispatch);
+      void onLoad(files, logger, dispatch);
     },
-    [dispatch, onLoad],
+    [dispatch, onLoad, logger],
   );
-  return onDrop;
 }

package/src/app/panels/SignalProcessingPanel.tsx

@@ -47,7 +47,7 @@ export function SignalProcessingPanel(props: SignalProcessingPanelProps) {
           <ValueRenderers.Header value="Options" />
         </Table.Header>
         {filters.map(({ name, options }, i) => (
-          <Table.Row key={name} hasBorder>
+          <Table.Row key={name} bordered>
             <ValueRenderers.Component>
               <div style={{ display: 'flex', gap: '3px' }}>
                 <Button

package/src/app/panels/measurement-info/MeasurementInfoPanelAccordion.tsx

@@ -4,7 +4,7 @@ import { MeasurementInfoPanel } from './MeasurementInfoPanel';
 
 export function MeasurementInfoPanelAccordion() {
   return (
-    <Accordion.Item title="Measurement info">
+    <Accordion.Item title="Measurement info" defaultOpened>
       <MeasurementInfoPanel />
     </Accordion.Item>
   );

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/accordion/Accordion.tsx

@@ -23,6 +23,7 @@ export interface AccordionItemProps {
   title: string;
   children: ReactNode;
   defaultOpened?: boolean;
+  toolbar?: ReactNode;
 }
 
 const styles = {
@@ -62,7 +63,8 @@ export function Accordion(props: AccordionProps) {
 }
 
 Accordion.Item = function AccordionItem(props: AccordionItemProps) {
-  const { item, utils } = useAccordionContext(props.title, props.defaultOpened);
+  const { title, children, defaultOpened, toolbar } = props;
+  const { item, utils } = useAccordionContext(title, defaultOpened);
 
   const onClickHandle = useCallback(
     (event: ReactMouseEvent<HTMLButtonElement>) => {
@@ -75,16 +77,10 @@ Accordion.Item = function AccordionItem(props: AccordionItemProps) {
     [utils],
   );
 
-  let displayable = false;
-
-  if (item) {
-    displayable = item.isOpen;
-  }
-
   return (
     <div
       style={{
-        flex: displayable ? '1 1 1px' : 'none',
+        flex: item?.isOpen ? '1 1 1px' : 'none',
         display: 'flex',
         flexDirection: 'column',
       }}
@@ -97,15 +93,24 @@ Accordion.Item = function AccordionItem(props: AccordionItemProps) {
           alignItems: 'center',
           width: '100%',
           userSelect: 'none',
+          justifyContent: 'space-between',
+          padding: '0px 12px',
         }}
         css={styles.header}
       >
-        {props.title}
+        <div
+          style={{
+            padding: '5px 0px',
+          }}
+        >
+          {title}
+        </div>
+        {toolbar}
       </button>
       <div
         style={{
-          display: displayable ? 'flex' : 'none',
-          flex: displayable ? '1 1 1px' : 'none',
+          display: item?.isOpen ? 'flex' : 'none',
+          flex: item?.isOpen ? '1 1 1px' : 'none',
           backgroundColor: 'white',
           maxHeight: '100%',
           overflow: 'hidden',
@@ -120,7 +125,7 @@ Accordion.Item = function AccordionItem(props: AccordionItemProps) {
             flexDirection: 'column',
           }}
         >
-          {props.children}
+          {children}
         </div>
       </div>
     </div>