react-science 4.1.3 → 6.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-science",
-  "version": "4.1.3",
+  "version": "6.0.0",
   "description": "React components to build scientific applications UI",
   "exports": {
     "./app": {
@@ -51,34 +51,34 @@
     "test-only": "vitest run --coverage "
   },
   "volta": {
-    "node": "20.14.0"
+    "node": "20.16.0"
   },
   "overrides": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "peerDependencies": {
-    "@blueprintjs/core": "^5.10.3",
-    "@blueprintjs/icons": "^5.9.0",
+    "@blueprintjs/core": "^5.11.0",
+    "@blueprintjs/icons": "^5.11.0",
     "fifo-logger": "^1.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@blueprintjs/select": "^5.2.0",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
+    "@blueprintjs/select": "^5.2.2",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
     "@lukeed/uuid": "^2.0.1",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-select": "^2.1.1",
-    "@tanstack/react-query": "^5.49.0",
-    "@tanstack/react-table": "^8.17.3",
+    "@tanstack/react-query": "^5.51.15",
+    "@tanstack/react-table": "^8.19.3",
     "biologic-converter": "^0.6.0",
     "cheminfo-types": "^1.7.3",
     "d3-scale-chromatic": "^3.1.0",
-    "filelist-utils": "^1.11.0",
+    "filelist-utils": "^1.11.1",
     "immer": "^10.1.1",
     "jcampconverter": "^9.6.4",
     "lodash": "^4.17.21",
@@ -86,13 +86,13 @@
     "ml-peak-shape-generator": "^4.1.2",
     "ml-signal-processing": "^1.0.4",
     "ml-spectra-processing": "^14.5.1",
-    "ms-spectrum": "^3.6.1",
+    "ms-spectrum": "^3.6.2",
     "netcdfjs": "^3.0.0",
     "react-d3-utils": "^1.0.0",
     "react-dropzone": "^14.2.3",
     "react-icons": "^5.2.1",
     "react-inspector": "^6.0.2",
-    "react-plot": "^1.4.2",
+    "react-plot": "^2.0.0",
     "react-popper": "^2.3.0",
     "spc-parser": "^1.0.0",
     "tinycolor2": "^1.6.0",
@@ -100,43 +100,43 @@
     "wdf-parser": "^0.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.7",
+    "@babel/core": "^7.24.9",
     "@babel/preset-react": "^7.24.7",
-    "@blueprintjs/core": "^5.10.4",
-    "@blueprintjs/icons": "^5.10.0",
-    "@playwright/experimental-ct-react": "^1.45.0",
-    "@playwright/test": "^1.45.0",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-storysource": "^8.1.11",
-    "@storybook/blocks": "^8.1.11",
-    "@storybook/react": "^8.1.11",
-    "@storybook/react-vite": "^8.1.11",
+    "@blueprintjs/core": "^5.11.0",
+    "@blueprintjs/icons": "^5.11.0",
+    "@playwright/experimental-ct-react": "^1.45.3",
+    "@playwright/test": "^1.45.3",
+    "@storybook/addon-essentials": "^8.2.6",
+    "@storybook/addon-storysource": "^8.2.6",
+    "@storybook/blocks": "^8.2.6",
+    "@storybook/react": "^8.2.6",
+    "@storybook/react-vite": "^8.2.6",
     "@types/babel__core": "^7.20.5",
     "@types/d3-scale-chromatic": "^3.0.3",
-    "@types/lodash": "^4.17.6",
+    "@types/lodash": "^4.17.7",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-inspector": "^4.0.6",
     "@types/tinycolor2": "^1.4.6",
     "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/coverage-v8": "^1.6.0",
+    "@vitest/coverage-v8": "^2.0.4",
     "cheminfo-font": "^1.13.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
-    "eslint-config-zakodium": "^11.0.0",
+    "eslint-config-zakodium": "^11.2.0",
     "eslint-plugin-storybook": "^0.8.0",
     "fifo-logger": "^1.0.0",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-kbs": "^2.1.1",
     "react-ocl": "^6.1.0",
-    "rimraf": "^5.0.7",
-    "storybook": "^8.1.11",
-    "typescript": "^5.5.2",
-    "vite": "^5.3.2",
-    "vitest": "^1.6.0"
+    "rimraf": "^6.0.1",
+    "storybook": "^8.2.6",
+    "typescript": "^5.5.4",
+    "vite": "^5.3.5",
+    "vitest": "^2.0.4"
   },
   "repository": {
     "type": "git",

package/src/app/about/AboutDialogToolbarButton.tsx

@@ -1,12 +1,12 @@
 import { Dialog, DialogBody } from '@blueprintjs/core';
 import { IconName } from '@blueprintjs/icons';
-import { JSX, ReactNode } from 'react';
+import { type ReactElement, ReactNode } from 'react';
 
 import { Toolbar, useOnOff } from '../../components';
 
 interface AboutDialogToolbarButtonProps {
   name: string;
-  icon: IconName | JSX.Element;
+  icon: IconName | ReactElement;
   body: ReactNode;
 }
 

package/src/app/kinds/ir/IrPeaksPanel.tsx

@@ -1,14 +1,8 @@
-import {
-  ColumnDef,
-  useReactTable,
-  getCoreRowModel,
-  SortingState,
-  getSortedRowModel,
-} from '@tanstack/react-table';
+import { ColumnDef, SortingState } from '@tanstack/react-table';
 import { useState } from 'react';
 
 import type { IrPeak } from '../../../app-data/index';
-import { Table, ValueRenderers } from '../../../components/index';
+import { Table } from '../../../components/index';
 
 export interface IrColumnPreferences<T extends keyof IrPeak = keyof IrPeak> {
   visible?: boolean;
@@ -53,49 +47,19 @@ export function IrPeaksPanel(props: IrPeaksPanelProps) {
   }
 
   const [sorting, setSorting] = useState<SortingState>([]);
-  const table = useReactTable({
-    data: peaks,
-    columns: defaultColumns,
-    state: {
-      sorting,
-      columnVisibility: getColumnVisibility(),
-    },
-    onSortingChange: setSorting,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-  });
+
   return (
-    <Table bordered>
-      <Table.Header>
-        {table
-          .getHeaderGroups()
-          .map(({ headers }) =>
-            headers.map((header) => (
-              <ValueRenderers.Header
-                style={{ cursor: 'pointer' }}
-                onClick={header.column.getToggleSortingHandler()}
-                key={header.id}
-                value={header.column.columnDef.header?.toString()}
-                sorted={header.column.getIsSorted()}
-              />
-            )),
-          )}
-      </Table.Header>
-      {table.getRowModel().rows.map((row) => (
-        <Table.Row key={row.id}>
-          {row.getVisibleCells().map((cell) => {
-            const value = (cell.column.columnDef.cell as CallableFunction)(
-              cell.getContext(),
-            );
-            return (
-              <ValueRenderers.Text
-                key={cell.id}
-                value={value !== undefined ? value : cell.getValue()}
-              />
-            );
-          })}
-        </Table.Row>
-      ))}
-    </Table>
+    <Table
+      bordered
+      data={peaks}
+      columns={defaultColumns}
+      reactTable={{
+        state: {
+          sorting,
+          columnVisibility: getColumnVisibility(),
+        },
+        onSortingChange: setSorting,
+      }}
+    />
   );
 }

package/src/app/panels/SignalProcessingPanel.tsx

@@ -1,7 +1,7 @@
 import type { FilterXYType } from 'ml-signal-processing';
 import filterXY from 'ml-signal-processing/FilterXYSchema.json';
 
-import { Button, Table, ValueRenderers } from '../../components/index';
+import { Button, createTableColumnHelper, Table } from '../../components/index';
 
 export interface Filter<OptionsType = string | number> {
   name: FilterXYType['name'];
@@ -35,92 +35,106 @@ const defaultFilters = filterXY.anyOf.map(({ properties }) => {
     options,
   };
 });
+
+const columnHelper = createTableColumnHelper<Filter>();
+
 export function SignalProcessingPanel(props: SignalProcessingPanelProps) {
   const { filters = [], onChange } = props;
 
+  const columns = [
+    columnHelper.display({
+      header: ' ',
+      cell: ({ row }) => {
+        return (
+          <div style={{ display: 'flex', gap: '3px' }}>
+            <Button
+              style={{ width: '15px' }}
+              intent="success"
+              onClick={() => {
+                const newFilters = [...filters];
+                newFilters.splice(
+                  row.index + 1,
+                  0,
+                  getDefaultFilter(defaultFilters[0]),
+                );
+                onChange?.(newFilters);
+              }}
+            >
+              +
+            </Button>
+            <Button
+              style={{ width: '15px' }}
+              intent="danger"
+              onClick={() => {
+                onChange?.(filters.filter((_, j) => j !== row.index));
+              }}
+            >
+              -
+            </Button>
+          </div>
+        );
+      },
+    }),
+    columnHelper.accessor('name', {
+      header: 'Name',
+      cell: ({ row, getValue }) => {
+        return (
+          <select
+            onChange={({ target }) => {
+              const value = Number(target.value);
+              if (!Number.isNaN(value)) {
+                const filter = getDefaultFilter(defaultFilters[value]);
+                const newFilters = [...filters];
+                newFilters[row.index] = filter;
+                onChange?.(newFilters);
+              }
+            }}
+            style={{ border: '1px solid black' }}
+            value={defaultFilters.findIndex((f) => f.name === getValue())}
+          >
+            {defaultFilters.map(({ name }, i: number) => (
+              <option key={name} value={i}>
+                {normalCase(name)}
+              </option>
+            ))}
+          </select>
+        );
+      },
+    }),
+    columnHelper.accessor('options', {
+      header: 'Options',
+      cell: ({ row, getValue }) => {
+        const options = getValue();
+        if (!options) return null;
+        return (
+          <>
+            {Object.entries(
+              defaultFilters.find((f) => f.name === row.original.name)
+                ?.options || {},
+            ).map((option) =>
+              optionInput(option, options, (value) => {
+                const FilterOptions = {
+                  ...filters[row.index].options,
+                  [option[0]]: value,
+                };
+                const filter = {
+                  name: filters[row.index].name,
+                  options: FilterOptions,
+                };
+                const newFilters = [...filters];
+                newFilters[row.index] = filter;
+                onChange?.(newFilters);
+              }),
+            )}
+          </>
+        );
+      },
+    }),
+  ];
+
   return (
     <div>
-      <Table>
-        <Table.Header>
-          <ValueRenderers.Header value=" " />
-          <ValueRenderers.Header value="Name" />
-          <ValueRenderers.Header value="Options" />
-        </Table.Header>
-        {filters.map(({ name, options }, i) => (
-          <Table.Row key={name} bordered>
-            <ValueRenderers.Component>
-              <div style={{ display: 'flex', gap: '3px' }}>
-                <Button
-                  style={{ width: '15px' }}
-                  intent="success"
-                  onClick={() => {
-                    const newFilters = [...filters];
-                    newFilters.splice(
-                      i + 1,
-                      0,
-                      getDefaultFilter(defaultFilters[0]),
-                    );
-                    onChange?.(newFilters);
-                  }}
-                >
-                  +
-                </Button>
-                <Button
-                  style={{ width: '15px' }}
-                  intent="danger"
-                  onClick={() => {
-                    onChange?.(filters.filter((_, j) => j !== i));
-                  }}
-                >
-                  -
-                </Button>
-              </div>
-            </ValueRenderers.Component>
-            <ValueRenderers.Component>
-              <select
-                onChange={({ target }) => {
-                  const value = Number(target.value);
-                  if (!Number.isNaN(value)) {
-                    const filter = getDefaultFilter(defaultFilters[value]);
-                    const newFilters = [...filters];
-                    newFilters[i] = filter;
-                    onChange?.(newFilters);
-                  }
-                }}
-                style={{ border: '1px solid black' }}
-                value={defaultFilters.findIndex((f) => f.name === name)}
-              >
-                {defaultFilters.map(({ name }, i: number) => (
-                  <option key={name} value={i}>
-                    {normalCase(name)}
-                  </option>
-                ))}
-              </select>
-            </ValueRenderers.Component>
-            {options && (
-              <ValueRenderers.Component>
-                {Object.entries(
-                  defaultFilters.find((f) => f.name === name)?.options || {},
-                ).map((option) =>
-                  optionInput(option, options, (value) => {
-                    const FilterOptions = {
-                      ...filters[i].options,
-                      [option[0]]: value,
-                    };
-                    const filter = {
-                      name: filters[i].name,
-                      options: FilterOptions,
-                    };
-                    const newFilters = [...filters];
-                    newFilters[i] = filter;
-                    onChange?.(newFilters);
-                  }),
-                )}
-              </ValueRenderers.Component>
-            )}
-          </Table.Row>
-        ))}
-      </Table>
+      <Table data={filters} columns={columns} bordered />
       {filters.length === 0 && (
         <Button
           style={{ width: '15px', margin: '5px 20px' }}
@@ -136,6 +150,7 @@ export function SignalProcessingPanel(props: SignalProcessingPanelProps) {
     </div>
   );
 }
+
 function getDefaultFilter({ options, name }: Filter<FilterOptionsInfo>) {
   if (options) {
     const result: Record<string, string | number> = {};
@@ -147,10 +162,12 @@ function getDefaultFilter({ options, name }: Filter<FilterOptionsInfo>) {
   }
   return { name };
 }
+
 function normalCase(str: string) {
   const result = str.replaceAll(/(?<upper>[A-Z])/g, ' $<upper>').trim();
   return result.charAt(0).toUpperCase() + result.slice(1);
 }
+
 function optionInput(
   [key, { description, choices }]: [string, FilterOptionsInfo],
   options: Record<string, string | number>,

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

@@ -3,9 +3,9 @@ import styled from '@emotion/styled';
 import { useMemo } from 'react';
 
 import {
+  getMeasurement,
   MeasurementBase,
   MeasurementKind,
-  getMeasurement,
   useAppDispatch,
   useAppState,
 } from '../../../app-data';
@@ -20,10 +20,10 @@ import {
 import { MeasurementConfigPanel } from '../index';
 
 import {
-  MeasurementColorPreview,
   MeasurementCheckbox,
-  MeasurementVisibilityToggle,
+  MeasurementColorPreview,
   MeasurementSelectedVisibilityChange,
+  MeasurementVisibilityToggle,
   useMeasurementPanel,
 } from '.';
 
@@ -90,7 +90,7 @@ const MeasurementsTableRowData = styled.tr`
   line-height: 1.25rem;
 `;
 
-const MeasurementsIconsContainer = styled.td`
+const MeasurementsIconsContainer = styled.th`
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -205,24 +205,22 @@ function MeasurementsTableHeader({
   return (
     <thead>
       <MeasurementsTableHeaderStyled>
-        <th>
-          <MeasurementsIconsContainer
-            style={{
-              paddingLeft: '26px',
+        <MeasurementsIconsContainer
+          style={{
+            paddingLeft: '26px',
+          }}
+        >
+          <MeasurementCheckbox
+            checked={allSelected}
+            onSelectCheckbox={() => {
+              onSelectLink(!allSelected);
             }}
-          >
-            <MeasurementCheckbox
-              checked={allSelected}
-              onSelectCheckbox={() => {
-                onSelectLink(!allSelected);
-              }}
-            />
-            <MeasurementSelectedVisibilityChange
-              kind={kind}
-              isVisible={selectedVisible}
-            />
-          </MeasurementsIconsContainer>
-        </th>
+          />
+          <MeasurementSelectedVisibilityChange
+            kind={kind}
+            isVisible={selectedVisible}
+          />
+        </MeasurementsIconsContainer>
         <TableHeaderFilename>Filename</TableHeaderFilename>
         <TableHeaderTechnique>Technique</TableHeaderTechnique>
       </MeasurementsTableHeaderStyled>

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

@@ -1,5 +1,5 @@
 import { Panel } from '@blueprintjs/core';
-import { createContext, useContext } from 'react';
+import { createContext, type ReactNode, useContext } from 'react';
 
 export interface MeasurementState {
   openPanel?: (panel: Panel<object>) => void;
@@ -21,7 +21,7 @@ export function MeasurementPanelProvider({
   children,
   value,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   value: MeasurementState;
 }) {
   return (

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

@@ -1,7 +1,8 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import * as Select from '@radix-ui/react-select';
+import { Button, MenuItem } from '@blueprintjs/core';
+import { ItemRenderer, Select } from '@blueprintjs/select';
 import * as scaleChromatic from 'd3-scale-chromatic';
 import { FaChevronDown } from 'react-icons/fa';
 
@@ -53,86 +54,58 @@ export interface GradientSelectProps {
   value: GradientScaleName;
   onChange: (value: GradientScaleName) => void;
 }
-
+const renderItem: ItemRenderer<GradientScaleName> = (
+  option,
+  { handleClick, handleFocus, modifiers },
+) => {
+  if (!modifiers.matchesPredicate) {
+    return null;
+  }
+  return (
+    <MenuItem
+      active={modifiers.active}
+      key={option}
+      onClick={handleClick}
+      onFocus={handleFocus}
+      roleStructure="listoption"
+      text={
+        <div>
+          {option}
+          <GradientSelectOption>
+            <div style={{ height: 15 }}>
+              <FixedGradientPreview gradient={option} />
+            </div>
+          </GradientSelectOption>
+        </div>
+      }
+    />
+  );
+};
 export function GradientSelect(props: GradientSelectProps) {
   const { value, onChange } = props;
   return (
     <GradientSelectListbox>
-      <Select.Root value={value} onValueChange={onChange}>
-        <Select.Trigger
+      <Select
+        popoverProps={{ matchTargetWidth: true }}
+        activeItem={value}
+        onItemSelect={onChange}
+        items={scaleOptions}
+        itemRenderer={renderItem}
+        filterable={false}
+        fill
+      >
+        <Button
           css={css`
             width: 100%;
             height: 30px;
             padding: 4px;
+            display: block;
           `}
         >
-          <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>
+          <FixedGradientPreview gradient={value} />
+          <GradientSelectChevron />
+        </Button>
+      </Select>
     </GradientSelectListbox>
   );
 }

package/src/components/dialog/ConfirmDialog.tsx

@@ -7,7 +7,7 @@ import {
 } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 
-import { Button } from '..';
+import { Button } from '../button';
 
 interface ConfirmDialogProps extends Omit<DialogProps, 'isCloseButtonShown'> {
   onConfirm: () => void;