react-science 4.1.3 → 5.0.0

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/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;

package/src/components/info-panel/InfoPanel.tsx

@@ -4,8 +4,8 @@ import { css } from '@emotion/react';
 import * as Collapsible from '@radix-ui/react-collapsible';
 import { CSSProperties, useCallback, useMemo, useState } from 'react';
 
-import { ValueRenderers } from '../index';
-import { Table } from '../table/Table';
+import { createTableColumnHelper, Table } from '../table';
+import * as ValueRenderers from '../value-renderers';
 
 export interface InfoPanelData {
   description: string;
@@ -71,35 +71,51 @@ const style = {
   }),
 };
 
+interface InfoPanelDatum {
+  parameter: string;
+  value: string | number | object;
+}
+
+const columnHelper = createTableColumnHelper<InfoPanelDatum>();
+const columns = [
+  columnHelper.accessor('parameter', {
+    header: 'Parameter',
+  }),
+  columnHelper.accessor('value', {
+    header: 'Value',
+    cell: ({ getValue }) => valueCell(getValue()),
+  }),
+];
+
 export function InfoPanel(props: InfoPanelProps) {
   const [search, setSearch] = useState('');
   const { title = 'Information', data = [], titleStyle, inputStyle } = props;
   const viewData = useCallback(
     (data: Record<string, string | number | object>) => {
-      const exactMatch: Array<[string, string | number | object]> = [];
-      const startsWith: Array<[string, string | number | object]> = [];
-      const includes: Array<[string, string | number | object]> = [];
-      const valueContains: Array<[string, string | number | object]> = [];
+      const exactMatch: InfoPanelDatum[] = [];
+      const startsWith: InfoPanelDatum[] = [];
+      const includes: InfoPanelDatum[] = [];
+      const valueContains: InfoPanelDatum[] = [];
 
-      for (const [key, value] of Object.entries(data).sort(([a], [b]) =>
+      for (const [parameter, value] of Object.entries(data).sort(([a], [b]) =>
         a.localeCompare(b),
       )) {
-        const lowerKey = key.toLowerCase();
+        const lowerKey = parameter.toLowerCase();
         const lowerSearch = search.toLowerCase();
         if (lowerKey === lowerSearch) {
-          exactMatch.push([key, value]);
+          exactMatch.push({ parameter, value });
           continue;
         }
         if (lowerKey.startsWith(lowerSearch)) {
-          startsWith.push([key, value]);
+          startsWith.push({ parameter, value });
           continue;
         }
         if (lowerKey.includes(lowerSearch)) {
-          includes.push([key, value]);
+          includes.push({ parameter, value });
           continue;
         }
         if (valueSearch(value, search)) {
-          valueContains.push([key, value]);
+          valueContains.push({ parameter, value });
           continue;
         }
       }
@@ -110,7 +126,7 @@ export function InfoPanel(props: InfoPanelProps) {
   const { filteredData, total, count } = useMemo(() => {
     const filteredData: Array<
       Omit<InfoPanelData, 'data'> & {
-        data: Array<[string, string | number | object]>;
+        data: InfoPanelDatum[];
       }
     > = [];
     let total = 0;
@@ -190,29 +206,12 @@ export function InfoPanel(props: InfoPanelProps) {
               </Collapsible.Trigger>
               <Collapsible.Content css={style.content}>
                 <Table
+                  data={data}
+                  columns={columns}
                   striped
-                  css={css({
-                    width: '100%',
-                  })}
+                  tableProps={{ style: { width: '100%' } }}
                   compact
-                >
-                  <Table.Header>
-                    <ValueRenderers.Header value="Parameter" />
-                    <ValueRenderers.Header value="Value" />
-                  </Table.Header>
-                  {data.map(([key, value]) => (
-                    <Table.Row
-                      key={key}
-                      style={{
-                        height: '10px',
-                        padding: '0 !imporant',
-                      }}
-                    >
-                      <ValueRenderers.Text value={key} />
-                      {valueCell(value)}
-                    </Table.Row>
-                  ))}
-                </Table>
+                />
               </Collapsible.Content>
             </Collapsible.Root>
           );

package/src/components/logger/FifoLoggerDialog.tsx

@@ -4,9 +4,16 @@ import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import type { LogEntry } from 'fifo-logger';
-import { CSSProperties } from 'react';
+import { CSSProperties, useMemo } from 'react';
 
-import { Button, Table, useFifoLogger, ValueRenderers } from '../index';
+import { Button } from '../button';
+import {
+  createTableColumnHelper,
+  Table,
+  type TableRowTrPropsGetter,
+} from '../table';
+
+import { useFifoLogger } from './useFifoLogger';
 
 const ActionsFooter = styled.div`
   display: flex;
@@ -37,8 +44,54 @@ export interface FifoLoggerDialogProps {
   unseen: number;
 }
 
+const columnHelper = createTableColumnHelper<LogEntry>();
+function useColumns(unseen: number) {
+  return useMemo(
+    () => [
+      columnHelper.display({
+        header: '#',
+        cell: ({ row }) => {
+          return (
+            <RowIndexCell
+              pillColor={
+                row.index >= unseen
+                  ? 'transparent'
+                  : rowBackgroundColor[row.original.levelLabel]
+              }
+            >
+              {String(row.index + 1)}
+            </RowIndexCell>
+          );
+        },
+      }),
+      columnHelper.accessor('time', {
+        header: 'Time',
+        cell: ({ getValue }) => new Date(getValue()).toLocaleTimeString(),
+      }),
+      columnHelper.accessor('levelLabel', {
+        header: 'Level',
+      }),
+      columnHelper.accessor('message', {
+        header: 'Message',
+      }),
+    ],
+    [unseen],
+  );
+}
+
+const getRowTrProps: TableRowTrPropsGetter<LogEntry> = (row) => {
+  return {
+    style: {
+      backgroundColor: rowBackgroundColor[row.original.levelLabel],
+    },
+  };
+};
+
 export function FifoLoggerDialog(props: FifoLoggerDialogProps) {
   const logger = useFifoLogger();
+
+  const columns = useColumns(props.unseen);
+
   return (
     <Dialog
       shouldReturnFocusOnClose={false}
@@ -55,44 +108,13 @@ export function FifoLoggerDialog(props: FifoLoggerDialogProps) {
     >
       <DialogBody>
         <Table
+          data={props.logs}
+          columns={columns}
           compact
           bordered
-          css={css`
-            width: 100%;
-          `}
-        >
-          <Table.Header>
-            <ValueRenderers.Header value="#" />
-            <ValueRenderers.Header value="Time" />
-            <ValueRenderers.Header value="Level" />
-            <ValueRenderers.Header value="Message" />
-          </Table.Header>
-          {props.logs.map((logEntry, idx) => (
-            <Table.Row
-              key={logEntry.id}
-              style={{
-                backgroundColor: rowBackgroundColor[logEntry.levelLabel],
-              }}
-            >
-              <ValueRenderers.Component>
-                <RowIndexCell
-                  pillColor={
-                    idx >= props.unseen
-                      ? 'transparent'
-                      : rowBackgroundColor[logEntry.levelLabel]
-                  }
-                >
-                  {String(idx + 1)}
-                </RowIndexCell>
-              </ValueRenderers.Component>
-              <ValueRenderers.Text
-                value={new Date(logEntry.time).toLocaleTimeString()}
-              />
-              <ValueRenderers.Text value={logEntry.levelLabel} />
-              <ValueRenderers.Text value={logEntry.message} />
-            </Table.Row>
-          ))}
-        </Table>
+          tableProps={{ style: { width: '100%' } }}
+          getRowTrProps={getRowTrProps}
+        />
       </DialogBody>
       <DialogFooter
         actions={

package/src/components/table/default_table_cell.tsx

@@ -0,0 +1,20 @@
+import type { CellContext, RowData } from '@tanstack/react-table';
+
+import * as ValueRenderers from '../value-renderers';
+
+// TODO: support Date
+export function defaultTableCell<TData extends RowData, TValue = unknown>(
+  context: CellContext<TData, TValue>,
+) {
+  const value = context.getValue();
+  if (typeof value === 'string') {
+    return <ValueRenderers.Text value={value} />;
+  } else if (typeof value === 'number') {
+    return <ValueRenderers.Number value={value} />;
+  } else if (typeof value === 'boolean') {
+    return <ValueRenderers.Boolean value={value} />;
+  } else {
+    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+    return <ValueRenderers.Text value={`${value}`} />;
+  }
+}

package/src/components/table/index.ts

@@ -1 +1,2 @@
-export * from './Table';
+export * from './table_root';
+export * from './table_utils';

package/src/components/table/table_body.tsx

@@ -0,0 +1,31 @@
+import type { Row, RowData } from '@tanstack/react-table';
+import type { HTMLAttributes } from 'react';
+
+import { TableRow } from './table_row';
+import { TableRowCell } from './table_row_cell';
+import type { TableRowTrPropsGetter } from './table_utils';
+
+export type TrPropsGetter = Omit<
+  HTMLAttributes<HTMLTableRowElement>,
+  'children'
+>;
+
+interface TableBodyProps<TData extends RowData> {
+  rows: Array<Row<TData>>;
+  getRowTrProps?: TableRowTrPropsGetter<TData>;
+}
+
+export function TableBody<TData extends RowData>(props: TableBodyProps<TData>) {
+  const { rows, getRowTrProps } = props;
+  return (
+    <tbody>
+      {rows.map((row) => (
+        <TableRow key={row.id} trProps={getRowTrProps?.(row)}>
+          {row.getVisibleCells().map((cell) => (
+            <TableRowCell key={cell.id} cell={cell} />
+          ))}
+        </TableRow>
+      ))}
+    </tbody>
+  );
+}

package/src/components/table/table_header.tsx

@@ -0,0 +1,32 @@
+import type { Header, RowData } from '@tanstack/react-table';
+import { CSSProperties } from 'react';
+
+import { TableHeaderCell } from './table_header_cell';
+import { TableRow } from './table_row';
+
+const headerStyle: CSSProperties = {
+  position: 'sticky',
+  top: 0,
+  zIndex: 10,
+  backgroundColor: 'white',
+};
+
+interface TableHeaderProps<TData extends RowData> {
+  headers: Array<Header<TData, unknown>>;
+  sticky: boolean;
+}
+
+export function TableHeader<TData extends RowData>(
+  props: TableHeaderProps<TData>,
+) {
+  const { headers, sticky } = props;
+  return (
+    <thead style={sticky ? headerStyle : undefined}>
+      <TableRow>
+        {headers.map((header) => (
+          <TableHeaderCell key={header.id} header={header} />
+        ))}
+      </TableRow>
+    </thead>
+  );
+}

package/src/components/table/table_header_cell.tsx

@@ -0,0 +1,38 @@
+import { flexRender, type Header, type RowData } from '@tanstack/react-table';
+import type { CSSProperties } from 'react';
+
+interface TableHeaderCellProps<TData extends RowData> {
+  header: Header<TData, unknown>;
+}
+
+export function TableHeaderCell<TData extends RowData>(
+  props: TableHeaderCellProps<TData>,
+) {
+  const { header } = props;
+  const column = header.column;
+
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  const style: CSSProperties = {
+    position: 'relative',
+    cursor: canSort ? 'pointer' : undefined,
+  };
+
+  return (
+    <th
+      style={style}
+      onClick={canSort ? column.getToggleSortingHandler() : undefined}
+    >
+      <div style={{ display: 'flex', flexDirection: 'row', gap: '5px' }}>
+        {flexRender(header.column.columnDef.header, header.getContext())}
+        {sorted
+          ? {
+              asc: '🔼',
+              desc: '🔽',
+            }[sorted]
+          : null}
+      </div>
+    </th>
+  );
+}