react-science 10.0.0 → 11.1.0

package/package.json

@@ -1,17 +1,15 @@
 {
   "name": "react-science",
-  "version": "10.0.0",
+  "version": "11.1.0",
   "description": "React components to build scientific applications UI",
   "type": "module",
   "exports": {
-    "./app": "./lib/app/index.js",
-    "./app-data": "./lib/app-data/index.js",
     "./ui": "./lib/components/index.js",
     "./styles/*.css": "./styles/*.css"
   },
   "files": [
     "lib",
-    "src",
+    "src/components",
     "styles/preflight.css"
   ],
   "scripts": {
@@ -38,59 +36,46 @@
     "test": "npm run playwright && npm run test-only && npm run eslint && npm run prettier && npm run check-types",
     "test-only": "vitest run --coverage "
   },
-  "volta": {
-    "node": "22.11.0"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zakodium-oss/react-science.git"
   },
-  "overrides": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/zakodium-oss/react-science/issues"
   },
+  "homepage": "https://github.com/zakodium-oss/react-science#readme",
   "peerDependencies": {
-    "@blueprintjs/core": "^5.11.0",
-    "@blueprintjs/icons": "^5.11.0",
+    "@blueprintjs/core": "^5.16.0",
+    "@blueprintjs/icons": "^5.15.0",
     "fifo-logger": "^1.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@blueprintjs/select": "^5.3.4",
+    "@blueprintjs/select": "^5.3.5",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
-    "@lukeed/uuid": "^2.0.1",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-radio-group": "^1.2.1",
-    "@radix-ui/react-select": "^2.1.2",
-    "@tanstack/react-query": "^5.61.0",
+    "@tanstack/react-query": "^5.61.5",
     "@tanstack/react-table": "^8.20.5",
-    "biologic-converter": "^0.6.0",
-    "cheminfo-types": "^1.8.1",
+    "@tanstack/react-virtual": "^3.10.9",
     "d3-scale-chromatic": "^3.1.0",
-    "filelist-utils": "^1.11.2",
     "immer": "^10.1.1",
-    "jcampconverter": "^10.0.1",
     "lodash": "^4.17.21",
-    "ml-gsd": "^12.1.8",
-    "ml-peak-shape-generator": "^4.1.4",
-    "ml-signal-processing": "^1.2.0",
-    "ml-spectra-processing": "^14.6.2",
-    "ms-spectrum": "^3.6.10",
-    "netcdfjs": "^3.0.0",
-    "react-d3-utils": "^3.0.0",
     "react-dropzone": "14.3.5",
     "react-icons": "^5.3.0",
     "react-inspector": "^6.0.2",
-    "react-plot": "^3.0.0",
     "react-popper": "^2.3.0",
-    "spc-parser": "^1.0.0",
     "tinycolor2": "^1.6.0",
     "ts-pattern": "^5.5.0",
-    "use-resize-observer": "^9.1.0",
-    "wdf-parser": "^0.3.0"
+    "use-resize-observer": "^9.1.0"
   },
   "devDependencies": {
-    "@blueprintjs/core": "^5.15.0",
-    "@blueprintjs/icons": "^5.14.0",
+    "@blueprintjs/core": "^5.16.0",
+    "@blueprintjs/icons": "^5.15.0",
     "@playwright/experimental-ct-react": "^1.49.0",
     "@playwright/test": "^1.49.0",
     "@storybook/addon-essentials": "^8.4.5",
@@ -99,39 +84,47 @@
     "@storybook/react": "^8.4.5",
     "@storybook/react-vite": "^8.4.5",
     "@types/babel__core": "^7.20.5",
-    "@types/d3-scale-chromatic": "^3.0.3",
+    "@types/d3-scale-chromatic": "^3.1.0",
     "@types/lodash": "^4.17.13",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-inspector": "^4.0.6",
     "@types/tinycolor2": "^1.4.6",
-    "@vitejs/plugin-react": "^4.3.3",
-    "@vitest/coverage-v8": "^2.1.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^2.1.6",
+    "biologic-converter": "^0.6.0",
     "cheminfo-font": "^1.13.1",
+    "cheminfo-types": "^1.8.1",
     "cross-env": "^7.0.3",
     "eslint": "^9.15.0",
     "eslint-config-zakodium": "^14.0.0",
     "eslint-plugin-storybook": "^0.11.1",
     "fifo-logger": "^1.0.0",
-    "prettier": "^3.3.3",
+    "filelist-utils": "^1.11.2",
+    "jcampconverter": "^10.0.1",
+    "ml-gsd": "^12.1.8",
+    "ml-peak-shape-generator": "^4.1.4",
+    "ml-signal-processing": "^1.2.0",
+    "ml-spectra-processing": "^14.7.0",
+    "ms-spectrum": "^3.7.0",
+    "netcdfjs": "^3.0.0",
+    "prettier": "^3.4.1",
     "react": "^18.3.1",
+    "react-d3-utils": "^3.0.0",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
     "react-kbs": "^2.1.1",
     "react-ocl": "^7.0.2",
+    "react-plot": "^3.0.0",
     "rimraf": "^6.0.1",
+    "spc-parser": "^1.0.0",
     "storybook": "^8.4.5",
-    "typescript": "^5.6.3",
+    "typescript": "^5.7.2",
     "vite": "^5.4.11",
-    "vitest": "^2.1.5"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/zakodium-oss/react-science.git"
-  },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/zakodium-oss/react-science/issues"
+    "vitest": "^2.1.6",
+    "wdf-parser": "^0.3.0"
   },
-  "homepage": "https://github.com/zakodium-oss/react-science#readme"
+  "volta": {
+    "node": "22.11.0"
+  }
 }

package/src/components/accordion/accordion.tsx

@@ -21,6 +21,11 @@ export interface AccordionItemProps {
   title: string;
   children: ReactNode;
   defaultOpened?: boolean;
+  /**
+   * When set to true, the item's children will not be rendered if the item is closed.
+   * When not set or set to false, the item's children will be rendered but hidden when the item is closed.
+   */
+  unmountChildren?: boolean;
   toolbar?: ReactNode;
 }
 
@@ -62,8 +67,15 @@ export function Accordion(props: AccordionProps) {
 
 Accordion.Item = function AccordionItem(props: AccordionItemProps) {
   const { title, children, defaultOpened, toolbar } = props;
-  const { item, utils } = useAccordionContext(title, defaultOpened);
+  const { item, utils, unmountChildren } = useAccordionContext(
+    title,
+    defaultOpened,
+  );
 
+  const shouldUnmountChildren =
+    props.unmountChildren === undefined
+      ? unmountChildren
+      : props.unmountChildren;
   const onClickHandle = useCallback(
     (event: ReactMouseEvent<HTMLDivElement>) => {
       if (event.shiftKey) {
@@ -105,27 +117,29 @@ Accordion.Item = function AccordionItem(props: AccordionItemProps) {
         </div>
         {toolbar}
       </div>
-      <div
-        style={{
-          display: item?.isOpen ? 'flex' : 'none',
-          flex: item?.isOpen ? '1 1 1px' : 'none',
-          backgroundColor: 'white',
-          maxHeight: '100%',
-          overflow: 'hidden',
-        }}
-      >
+      {!item?.isOpen && shouldUnmountChildren ? null : (
         <div
           style={{
-            height: '100%',
-            width: '100%',
-            overflow: 'auto',
-            display: 'flex',
-            flexDirection: 'column',
+            display: item?.isOpen ? 'flex' : 'none',
+            flex: item?.isOpen ? '1 1 1px' : 'none',
+            backgroundColor: 'white',
+            maxHeight: '100%',
+            overflow: 'hidden',
           }}
         >
-          {children}
+          <div
+            style={{
+              height: '100%',
+              width: '100%',
+              overflow: 'auto',
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
+            {children}
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 };

package/src/components/accordion/accordion_context.provider.tsx

@@ -5,9 +5,14 @@ import type { ContextType } from './accordion_context.js';
 import { accordionContext } from './accordion_context.js';
 import { reducer } from './accordion_context.state.js';
 
-export function AccordionProvider(props: { children: ReactNode }) {
+export function AccordionProvider(props: {
+  children: ReactNode;
+  unmountChildren?: boolean;
+}) {
+  const { unmountChildren = false } = props;
   const [state, dispatch] = useReducer(reducer, {
     items: [],
+    unmountChildren,
   });
 
   const utils = useMemo(
@@ -37,8 +42,8 @@ export function AccordionProvider(props: { children: ReactNode }) {
   );
 
   const value = useMemo<ContextType>(() => {
-    return [{ items: state.items }, utils];
-  }, [state.items, utils]);
+    return [{ items: state.items, unmountChildren }, utils];
+  }, [state.items, utils, unmountChildren]);
 
   return (
     <accordionContext.Provider value={value}>

package/src/components/accordion/accordion_context.state.ts

@@ -20,6 +20,7 @@ export interface AccordionItemState {
 
 export interface AccordionState {
   items: AccordionItemState[];
+  unmountChildren: boolean;
 }
 
 export function getItem(title: string, items: AccordionItemState[]) {

package/src/components/accordion/accordion_context.ts

@@ -57,6 +57,7 @@ export function useAccordionContext(title: string, defaultOpened?: boolean) {
   return useMemo(
     () => ({
       item,
+      unmountChildren: state.unmountChildren,
       utils: {
         clear: () => utils.clear(title),
         toggle: () => utils.toggle(title),
@@ -64,6 +65,6 @@ export function useAccordionContext(title: string, defaultOpened?: boolean) {
         create: (defaultOpened?: boolean) => utils.create(title, defaultOpened),
       },
     }),
-    [item, title, utils],
+    [item, title, utils, state.unmountChildren],
   );
 }

package/src/components/color-picker/preview/ColorPreview.tsx

@@ -1,9 +1,13 @@
-import type { ColorConfig } from '../../../app-data/index.js';
 import { assertUnreachable } from '../../utils/assert.js';
+import type { GradientScaleName } from '../gradient_select/index.js';
 
 import FixedColorPreview from './FixedColorPreview.js';
 import FixedGradientPreview from './FixedGradientPreview.js';
 
+export type ColorConfig =
+  | { kind: 'fixed'; color: string }
+  | { kind: 'fixedGradient'; gradient: GradientScaleName };
+
 export interface ColorPreviewProps {
   color: ColorConfig;
 }

package/src/components/logger/FifoLoggerDialog.tsx

@@ -102,14 +102,13 @@ export function FifoLoggerDialog(props: FifoLoggerDialogProps) {
           compact
           bordered
           tableProps={{ style: { width: '100%' } }}
-          renderRowTr={({ row, children }) => (
+          renderRowTr={(trProps, row) => (
             <tr
+              {...trProps}
               style={{
                 backgroundColor: rowBackgroundColor[row.original.levelLabel],
               }}
-            >
-              {children}
-            </tr>
+            />
           )}
         />
       </DialogBody>

package/src/components/table/table_body.tsx

@@ -1,37 +1,111 @@
 import type { Row, RowData } from '@tanstack/react-table';
+import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
+import { notUndefined } from '@tanstack/react-virtual';
+import type { ReactNode } from 'react';
 import { Fragment } from 'react';
 
 import { TableRowCell } from './table_row_cell.js';
-import type {
-  TableRowTrRenderer,
-  TableRowTrRendererProps,
-} from './table_utils.js';
+import type { TableRowTrProps, TableRowTrRenderer } from './table_utils.js';
 
 interface TableBodyProps<TData extends RowData> {
   rows: Array<Row<TData>>;
   renderRowTr: TableRowTrRenderer<TData> | undefined;
+  virtualizeRows?: boolean;
+  virtualizer: Virtualizer<HTMLDivElement, Element>;
 }
 
 export function TableBody<TData extends RowData>(props: TableBodyProps<TData>) {
-  const { rows, renderRowTr = defaultRenderRowTr } = props;
+  const {
+    rows,
+    renderRowTr = defaultRenderRowTr as TableRowTrRenderer<TData>,
+    virtualizer,
+    virtualizeRows,
+  } = props;
+
+  if (virtualizeRows) {
+    const virtualItems = virtualizer.getVirtualItems();
+    const [before, after] =
+      virtualItems.length > 0
+        ? [
+            virtualItems[0].start - virtualizer.options.scrollMargin,
+            virtualizer.getTotalSize() - notUndefined(virtualItems.at(-1)).end,
+          ]
+        : [0, 0];
+    return (
+      <tbody>
+        {before > 0 && (
+          <tr>
+            <td style={{ height: before }} />
+          </tr>
+        )}
+        {virtualItems.map((virtualItem, index) => (
+          <TableRow
+            key={virtualItem.index}
+            row={rows[virtualItem.index]}
+            renderRowTr={(row) => {
+              const trProps = getTrRenderProps<TData>(row, {
+                ...virtualItem,
+                virtualIndex: index,
+              });
+              return renderRowTr(trProps, row);
+            }}
+          />
+        ))}
+        {after > 0 && (
+          <tr>
+            <td style={{ height: after }} />
+          </tr>
+        )}
+      </tbody>
+    );
+  }
   return (
     <tbody>
       {rows.map((row) => (
-        <Fragment key={row.id}>
-          {renderRowTr({
-            row,
-            children: row
-              .getVisibleCells()
-              .map((cell) => <TableRowCell key={cell.id} cell={cell} />),
-          })}
-        </Fragment>
+        <TableRow
+          key={row.id}
+          row={row}
+          renderRowTr={(row) => renderRowTr(getTrRenderProps(row), row)}
+        />
       ))}
     </tbody>
   );
 }
 
-function defaultRenderRowTr<TData extends RowData>(
-  props: TableRowTrRendererProps<TData>,
-) {
-  return <tr>{props.children}</tr>;
+type TableRowRenderer<TData extends RowData> = (row: Row<TData>) => ReactNode;
+
+function TableRow<TData>({
+  row,
+  renderRowTr,
+}: {
+  row: Row<TData>;
+  renderRowTr: TableRowRenderer<TData>;
+}) {
+  return <Fragment>{renderRowTr(row)}</Fragment>;
+}
+
+const defaultRenderRowTr: TableRowTrRenderer<unknown> = (trProps) => (
+  <tr {...trProps} />
+);
+
+type RenderRowVirtualItem = VirtualItem & {
+  /**
+   * The index of the element within the virtual list being currently rendered.
+   */
+  virtualIndex: number;
+};
+
+function getTrRenderProps<TData extends RowData>(
+  row: Row<TData>,
+  virtualItem?: RenderRowVirtualItem,
+): TableRowTrProps {
+  const index = virtualItem ? virtualItem.index : row.index;
+
+  return {
+    // index is 0-indexed, so odd rows are even indices
+    className: index % 2 === 0 ? 'odd' : '',
+    children: row
+      .getVisibleCells()
+      .map((cell) => <TableRowCell key={cell.id} cell={cell} />),
+  };
 }

package/src/components/table/table_root.tsx

@@ -1,38 +1,100 @@
 /** @jsxImportSource @emotion/react */
 
 import { HTMLTable } from '@blueprintjs/core';
+import styled from '@emotion/styled';
 import type { RowData, TableOptions } from '@tanstack/react-table';
 import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import type { TableHTMLAttributes } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import type { ReactNode, RefObject, TableHTMLAttributes } from 'react';
+import { useRef } from 'react';
 
 import { TableBody } from './table_body.js';
 import { TableHeader } from './table_header.js';
 import type { TableColumnDef, TableRowTrRenderer } from './table_utils.js';
 import { useTableColumns } from './use_table_columns.js';
 
-export interface TableProps<TData extends RowData> {
+// Blueprint's HTMLTable `striped` prop's implementation is based on nth-child odd / even
+// We cannot use that with virtualization, so we override its implementation here.
+const CustomHTMLTable = styled(HTMLTable, {
+  shouldForwardProp: (prop) => prop !== 'striped',
+})`
+  tbody tr.odd td {
+    background: ${(props) =>
+      props.striped ? 'rgba(143, 153, 168, 0.15)' : 'inherit'};
+  }
+`;
+
+interface TableBaseProps<TData extends RowData> {
   data: TData[];
+  /**
+   * Tanstack table definition of columns in the table.
+   */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   columns: Array<TableColumnDef<TData, any>>;
-
+  /**
+   * Show borders between each cell and row of the table.
+   */
   bordered?: boolean;
+  /**
+   * Reduce the padding around table cells.
+   */
   compact?: boolean;
+  /**
+   * When hovering over a row, change its background color and set the pointer
+   * to be a cursor.
+   */
   interactive?: boolean;
+  /**
+   * Alternate between gray and white background for each row.
+   */
   striped?: boolean;
+  /**
+   * Enable header rows which stick to the top of the table.
+   */
   stickyHeader?: boolean;
+  /**
+   * Use virtualized rows to optimize rendering.
+   * When virtualizing rows, and in order to prevent layout shifts,
+   * it is recommended that all columns have a fixed width.
+   */
+  virtualizeRows?: boolean;
 
   reactTable?: Omit<
     TableOptions<TData>,
     'data' | 'columns' | 'getCoreRowModel' | 'getSortedRowModel'
   >;
   tableProps?: Omit<TableHTMLAttributes<HTMLTableElement>, 'children'>;
+  /**
+   * Override the default row rendering.
+   * Make sure to spread the passed `trProps` onto the rendered `<tr>` element.
+   */
   renderRowTr?: TableRowTrRenderer<TData>;
 }
 
+interface RegularTableProps<TData extends RowData>
+  extends TableBaseProps<TData> {
+  virtualizeRows?: false | undefined;
+}
+
+interface VirtualizedTableProps<TData extends RowData>
+  extends TableBaseProps<TData> {
+  virtualizeRows: true;
+  /**
+   * For virtualization of the table rows, provide an estimate of the height of each row.
+   * @param index The index of the row in the data array.
+   * @return The estimated height of the row at the given index.
+   */
+  estimatedRowHeight: (index: number) => number;
+}
+
+export type TableProps<TData extends RowData> =
+  | RegularTableProps<TData>
+  | VirtualizedTableProps<TData>;
+
 export function Table<TData extends RowData>(props: TableProps<TData>) {
   const {
     data,
@@ -47,8 +109,11 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
     reactTable,
     tableProps,
     renderRowTr,
+
+    virtualizeRows,
   } = props;
 
+  const scrollElementRef = useRef<HTMLDivElement>(null);
   const columnDefs = useTableColumns(columns);
   const table = useReactTable<TData>({
     ...reactTable,
@@ -58,16 +123,52 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
     getSortedRowModel: getSortedRowModel(),
   });
 
+  const tanstackVirtualizer = useVirtualizer({
+    enabled: virtualizeRows,
+    count: data.length,
+    getScrollElement: () => scrollElementRef.current,
+    estimateSize:
+      (props.virtualizeRows && props.estimatedRowHeight) || (() => 0),
+    overscan: 5,
+  });
+
   return (
-    <HTMLTable
-      bordered={bordered}
-      compact={compact}
-      interactive={interactive}
-      striped={striped}
-      {...tableProps}
-    >
-      <TableHeader sticky={stickyHeader} headers={table.getFlatHeaders()} />
-      <TableBody rows={table.getRowModel().rows} renderRowTr={renderRowTr} />
-    </HTMLTable>
+    <Container virtualizeRows={virtualizeRows} scrollRef={scrollElementRef}>
+      <CustomHTMLTable
+        bordered={bordered}
+        compact={compact}
+        interactive={interactive}
+        striped={striped}
+        {...tableProps}
+      >
+        <TableHeader sticky={stickyHeader} headers={table.getFlatHeaders()} />
+        <TableBody
+          rows={table.getRowModel().rows}
+          renderRowTr={renderRowTr}
+          virtualizer={tanstackVirtualizer}
+          virtualizeRows={virtualizeRows}
+        />
+      </CustomHTMLTable>
+    </Container>
   );
 }
+
+const ScrollRefDiv = styled.div`
+  height: 100%;
+  overflow: auto;
+`;
+
+function Container({
+  virtualizeRows,
+  scrollRef,
+  children,
+}: {
+  virtualizeRows?: boolean;
+  children: ReactNode;
+  scrollRef: RefObject<HTMLDivElement>;
+}) {
+  if (virtualizeRows) {
+    return <ScrollRefDiv ref={scrollRef}>{children}</ScrollRefDiv>;
+  }
+  return <>{children}</>;
+}

package/src/components/table/table_row_cell.tsx

@@ -3,15 +3,16 @@ import { flexRender } from '@tanstack/react-table';
 
 interface TableRowCellProps<TData extends RowData> {
   cell: Cell<TData, unknown>;
+  className?: string;
 }
 
 export function TableRowCell<TData extends RowData>(
   props: TableRowCellProps<TData>,
 ) {
-  const { cell } = props;
+  const { cell, className } = props;
 
   return (
-    <td style={{ position: 'relative' }}>
+    <td style={{ position: 'relative' }} className={className}>
       {flexRender(cell.column.columnDef.cell, cell.getContext())}
     </td>
   );

package/src/components/table/table_utils.ts

@@ -11,10 +11,12 @@ export function createTableColumnHelper<TData extends RowData>() {
   return createColumnHelper<TData>();
 }
 
-export interface TableRowTrRendererProps<TData extends RowData> {
-  row: Row<TData>;
+export interface TableRowTrProps {
+  className: string;
   children: ReactNode;
 }
+
 export type TableRowTrRenderer<TData extends RowData> = (
-  props: TableRowTrRendererProps<TData>,
+  trProps: TableRowTrProps,
+  row: Row<TData>,
 ) => ReactNode;

package/lib/app/about/AboutDialogToolbarButton.d.ts

@@ -1,10 +0,0 @@
-import type { IconName } from '@blueprintjs/icons';
-import type { ReactElement, ReactNode } from 'react';
-interface AboutDialogToolbarButtonProps {
-    name: string;
-    icon: IconName | ReactElement;
-    body: ReactNode;
-}
-export declare function AboutDialogToolbarButton(props: AboutDialogToolbarButtonProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=AboutDialogToolbarButton.d.ts.map