react-science 3.1.0 → 4.0.0

package/lib-esm/components/table/TableHeader.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TableRow } from './TableRow';
-export const TableHeader = ({ children, hasBorder, style }) => {
-    return (_jsx("thead", { children: _jsx(TableRow, { hasBorder: hasBorder, style: style, children: children }) }));
+export const TableHeader = ({ children, bordered, style }) => {
+    return (_jsx("thead", { children: _jsx(TableRow, { bordered: bordered, style: style, children: children }) }));
 };
 //# sourceMappingURL=TableHeader.js.map

package/lib-esm/components/table/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../src/components/table/TableHeader.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAc,EAAE,EAAE;IACxE,OAAO,CACL,0BACE,KAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,YACzC,QAAQ,GACA,GACL,CACT,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../src/components/table/TableHeader.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAc,EAAE,EAAE;IACvE,OAAO,CACL,0BACE,KAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YACvC,QAAQ,GACA,GACL,CACT,CAAC;AACJ,CAAC,CAAC"}

package/lib-esm/components/table/TableRow.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
 import type { TableProps } from './Table';
 export type TableRowProps = TableProps & HTMLAttributes<HTMLTableRowElement>;
-export declare const TableRow: ({ children, style, hasBorder, ...other }: TableRowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TableRow: ({ children, style, bordered, ...other }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TableRow.d.ts.map

package/lib-esm/components/table/TableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../src/components/table/TableRow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,cAAc,EAIf,MAAM,OAAO,CAAC;AAYf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,cAAc,CAAC,mBAAmB,CAAC,CAAC;AAc7E,eAAO,MAAM,QAAQ,6CAKlB,aAAa,qDAUf,CAAC"}
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../src/components/table/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EAIf,MAAM,OAAO,CAAC;AAYf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,cAAc,CAAC,mBAAmB,CAAC,CAAC;AAE7E,eAAO,MAAM,QAAQ,4CAKlB,aAAa,4CAUf,CAAC"}

package/lib-esm/components/table/TableRow.js

@@ -1,27 +1,14 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, isValidElement, } from 'react';
 import { Boolean, Color, Component, Header, Number, Object, Text, } from '../value-renderers';
 import { useTableContext } from './tableContext';
-const styles = {
-    hasBorder: css({
-        border: '0.5px solid rgb(0, 0, 0)',
-        padding: '5px',
-        position: 'relative',
-    }),
-    noBorder: css({
-        padding: '5px',
-        position: 'relative',
-    }),
-};
-export const TableRow = ({ children, style = {}, hasBorder = false, ...other }) => {
+export const TableRow = ({ children, style = {}, bordered = false, ...other }) => {
     const { cells } = useRowChildren(children);
-    return (_jsx("tr", { style: { border: hasBorder ? '1px solid black' : '', ...style }, ...other, children: cells }));
+    return (_jsx("tr", { style: { border: bordered ? '1px solid black' : '', ...style }, ...other, children: cells }));
 };
 function useRowChildren(children) {
     const cells = [];
-    const { hasBorder, color } = useTableContext();
+    const { color } = useTableContext();
     for (const child of Children.toArray(children)) {
         if (typeof child === 'object' &&
             isValidElement(child) &&
@@ -33,13 +20,13 @@ function useRowChildren(children) {
                 child.type === Header ||
                 child.type === Component)) {
             if (child.type === Header) {
-                cells.push(_jsx("th", { style: { color }, css: hasBorder ? styles.hasBorder : styles.noBorder, children: child }, child.key));
+                cells.push(_jsx("th", { style: { color }, children: child }, child.key));
             }
             else {
                 cells.push(_jsx("td", { style: {
                         color,
                         position: 'relative',
-                    }, css: hasBorder ? styles.hasBorder : styles.noBorder, children: child }, child.key));
+                    }, children: child }, child.key));
             }
         }
         else {

package/lib-esm/components/table/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../src/components/table/TableRow.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EACL,QAAQ,EAER,cAAc,GAGf,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,OAAO,EACP,KAAK,EACL,SAAS,EACT,MAAM,EACN,MAAM,EACN,MAAM,EACN,IAAI,GACL,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAIjD,MAAM,MAAM,GAAG;IACb,SAAS,EAAE,GAAG,CAAC;QACb,MAAM,EAAE,0BAA0B;QAClC,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,UAAU;KACrB,CAAC;IACF,QAAQ,EAAE,GAAG,CAAC;QACZ,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,UAAU;KACrB,CAAC;CACH,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACM,EAAE,EAAE;IAClB,MAAM,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;IAC3C,OAAO,CACL,aACE,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,KAAK,EAAE,KAC3D,KAAK,YAER,KAAK,GACH,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,cAAc,CAAC,QAAmB;IACzC,MAAM,KAAK,GAAmB,EAAE,CAAC;IACjC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAC;IAC/C,KAAK,MAAM,KAAK,IAAI,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC/C,IACE,OAAO,KAAK,KAAK,QAAQ;YACzB,cAAc,CAAC,KAAK,CAAC;YACrB,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK;gBACnB,KAAK,CAAC,IAAI,KAAK,OAAO;gBACtB,KAAK,CAAC,IAAI,KAAK,IAAI;gBACnB,KAAK,CAAC,IAAI,KAAK,MAAM;gBACrB,KAAK,CAAC,IAAI,KAAK,MAAM;gBACrB,KAAK,CAAC,IAAI,KAAK,MAAM;gBACrB,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,EAC3B,CAAC;YACD,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;gBAC1B,KAAK,CAAC,IAAI,CACR,aAEE,KAAK,EAAE,EAAE,KAAK,EAAE,EAChB,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,YAElD,KAAK,IAJD,KAAK,CAAC,GAAG,CAKX,CACN,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,KAAK,CAAC,IAAI,CACR,aAEE,KAAK,EAAE;wBACL,KAAK;wBACL,QAAQ,EAAE,UAAU;qBACrB,EACD,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,YAElD,KAAK,IAPD,KAAK,CAAC,GAAG,CAQX,CACN,CAAC;YACJ,CAAC;QACH,CAAC;aAAM,CAAC;YACN,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAC;YAC3C,MAAM,IAAI,KAAK,CAAC,mBAAmB,CAAC,CAAC;QACvC,CAAC;IACH,CAAC;IACD,OAAO,EAAE,KAAK,EAAE,CAAC;AACnB,CAAC"}
+{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../src/components/table/TableRow.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,QAAQ,EAER,cAAc,GAGf,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,OAAO,EACP,KAAK,EACL,SAAS,EACT,MAAM,EACN,MAAM,EACN,MAAM,EACN,IAAI,GACL,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAIjD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,QAAQ,GAAG,KAAK,EAChB,GAAG,KAAK,EACM,EAAE,EAAE;IAClB,MAAM,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;IAC3C,OAAO,CACL,aACE,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,KAAK,EAAE,KAC1D,KAAK,YAER,KAAK,GACH,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,cAAc,CAAC,QAAmB;IACzC,MAAM,KAAK,GAAmB,EAAE,CAAC;IACjC,MAAM,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAC;IACpC,KAAK,MAAM,KAAK,IAAI,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC/C,IACE,OAAO,KAAK,KAAK,QAAQ;YACzB,cAAc,CAAC,KAAK,CAAC;YACrB,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK;gBACnB,KAAK,CAAC,IAAI,KAAK,OAAO;gBACtB,KAAK,CAAC,IAAI,KAAK,IAAI;gBACnB,KAAK,CAAC,IAAI,KAAK,MAAM;gBACrB,KAAK,CAAC,IAAI,KAAK,MAAM;gBACrB,KAAK,CAAC,IAAI,KAAK,MAAM;gBACrB,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,EAC3B,CAAC;YACD,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;gBAC1B,KAAK,CAAC,IAAI,CACR,aAAoB,KAAK,EAAE,EAAE,KAAK,EAAE,YACjC,KAAK,IADC,KAAK,CAAC,GAAG,CAEb,CACN,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,KAAK,CAAC,IAAI,CACR,aAEE,KAAK,EAAE;wBACL,KAAK;wBACL,QAAQ,EAAE,UAAU;qBACrB,YAEA,KAAK,IAND,KAAK,CAAC,GAAG,CAOX,CACN,CAAC;YACJ,CAAC;QACH,CAAC;aAAM,CAAC;YACN,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAC;YAC3C,MAAM,IAAI,KAAK,CAAC,mBAAmB,CAAC,CAAC;QACvC,CAAC;IACH,CAAC;IACD,OAAO,EAAE,KAAK,EAAE,CAAC;AACnB,CAAC"}

package/lib-esm/components/table/tableContext.d.ts

@@ -1,10 +1,8 @@
 /// <reference types="react" />
 export declare const TableContext: import("react").Context<{
-    hasBorder: boolean;
     color: string;
 }>;
 export declare function useTableContext(): {
-    hasBorder: boolean;
     color: string;
 };
 //# sourceMappingURL=tableContext.d.ts.map

package/lib-esm/components/table/tableContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tableContext.d.ts","sourceRoot":"","sources":["../../../src/components/table/tableContext.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,YAAY;;;EAAgD,CAAC;AAC1E,wBAAgB,eAAe;;;EAG9B"}
+{"version":3,"file":"tableContext.d.ts","sourceRoot":"","sources":["../../../src/components/table/tableContext.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,YAAY;;EAA+B,CAAC;AACzD,wBAAgB,eAAe;;EAG9B"}

package/lib-esm/components/table/tableContext.js

@@ -1,5 +1,5 @@
 import { createContext, useContext } from 'react';
-export const TableContext = createContext({ hasBorder: true, color: '' });
+export const TableContext = createContext({ color: '' });
 export function useTableContext() {
     const context = useContext(TableContext);
     return context;

package/lib-esm/components/table/tableContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableContext.js","sourceRoot":"","sources":["../../../src/components/table/tableContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;AAC1E,MAAM,UAAU,eAAe;IAC7B,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACzC,OAAO,OAAO,CAAC;AACjB,CAAC"}
+{"version":3,"file":"tableContext.js","sourceRoot":"","sources":["../../../src/components/table/tableContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;AACzD,MAAM,UAAU,eAAe;IAC7B,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACzC,OAAO,OAAO,CAAC;AACjB,CAAC"}

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

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+export interface TooltipItem {
+    title: string;
+    shortcuts?: string[];
+    subTitles?: Array<Pick<TooltipItem, 'title' | 'shortcuts'>>;
+    description?: string;
+    link?: string;
+    style?: CSSProperties;
+}
+export declare function TooltipHelpContent(props: TooltipItem): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TooltipHelpContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipHelpContent.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/TooltipHelpContent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AA6EtC,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,SAAS,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,WAAW,2CA0CpD"}

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.1.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-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;
 }