Merge pull request #1745 from silx-kit/bigint-new

Allow providers to return bigints

Author: axelboc

.vscode/settings.json

@@ -18,7 +18,7 @@
   "typescript.preferences.importModuleSpecifier": "relative",
   "typescript.preferences.preferTypeOnlyAutoImports": true,
   "typescript.preferences.autoImportSpecifierExcludeRegexes": [
-    "^(node:)?(console|util)$",
+    "^(node:)?(console|util|test)$",
     "^three/.*$"
   ],
 

cypress/snapshots/app.cy.ts/auximage.snap.png

@@ -160,6 +160,7 @@ export function makeMockFile(): GroupWithChildren {
       group('typed_arrays', [
         array('uint8', { type: intType(false, 8) }),
         array('int16', { type: intType(true, 16) }),
+        array('int64', { type: intType(true, 64) }),
         array('float32', { type: floatType(32) }),
         array('float64', { type: floatType(64) }),
         withImageAttr(array('uint8_rgb', { type: intType(false, 8) })),
@@ -275,6 +276,13 @@ export function makeMockFile(): GroupWithChildren {
             axes: { X: array('X'), Y_scatter: array('Y_scatter') },
             axesAttr: ['X', 'Y_scatter'],
           }),
+          nxData('bigint', {
+            signal: array('twoD_bigint'),
+            auxiliary: { secondary_bigint: array('secondary_bigint') },
+            auxAttr: ['secondary_bigint'],
+            axes: { X_bigint: array('X_bigint') },
+            axesAttr: ['.', 'X_bigint'],
+          }),
           nxGroup('old-style', 'NXdata', {
             children: [
               array('twoD', {

cypress/snapshots/app.cy.ts/auxspectrum.snap.png

@@ -16,6 +16,7 @@ import { createPortal } from 'react-dom';
 
 import { type DimensionMapping } from '../../../dimension-mapper/models';
 import visualizerStyles from '../../../visualizer/Visualizer.module.css';
+import { useToNumArrays } from '../hooks';
 import { type LineConfig } from '../line/config';
 import { DEFAULT_DOMAIN } from '../utils';
 import ComplexLineToolbar from './ComplexLineToolbar';
@@ -58,6 +59,7 @@ function MappedComplexLineVis(props: Props) {
   const { customDomain, yScaleType, xScaleType, curveType, showGrid } =
     lineConfig;
 
+  const numAxisArrays = useToNumArrays(axisValues);
   const [dataArray, ...auxArrays] = useMappedComplexArrays(
     [value, ...auxValues],
     dims,
@@ -99,7 +101,7 @@ function MappedComplexLineVis(props: Props) {
         showGrid={showGrid}
         abscissaParams={{
           label: axisLabels[xDimIndex],
-          value: axisValues[xDimIndex],
+          value: numAxisArrays[xDimIndex],
           scaleType: xScaleType,
         }}
         ordinateLabel={ordinateLabel}

cypress/snapshots/app.cy.ts/heatmap_flip.snap.png

@@ -21,6 +21,7 @@ import {
   useBaseArray,
   useMappedArray,
   useSlicedDimsAndMapping,
+  useToNumArrays,
 } from '../hooks';
 import { DEFAULT_DOMAIN } from '../utils';
 import ComplexToolbar from './ComplexToolbar';
@@ -62,8 +63,9 @@ function MappedComplexVis(props: Props) {
     invertColorMap,
   } = heatmapConfig;
 
-  const [slicedDims, slicedMapping] = useSlicedDimsAndMapping(dims, dimMapping);
+  const numAxisArrays = useToNumArrays(axisValues);
 
+  const [slicedDims, slicedMapping] = useSlicedDimsAndMapping(dims, dimMapping);
   const mappedArray = useMappedArray(value, slicedDims, slicedMapping);
 
   const { phaseValues, phaseBounds, amplitudeValues, amplitudeBounds } =
@@ -112,11 +114,11 @@ function MappedComplexVis(props: Props) {
         invertColorMap={invertColorMap}
         abscissaParams={{
           label: axisLabels[xDimIndex],
-          value: axisValues[xDimIndex],
+          value: numAxisArrays[xDimIndex],
         }}
         ordinateParams={{
           label: axisLabels[yDimIndex],
-          value: axisValues[yDimIndex],
+          value: numAxisArrays[yDimIndex],
         }}
         alpha={
           visType === ComplexVisType.PhaseAmplitude

cypress/snapshots/app.cy.ts/logspectrum.snap.png

@@ -22,6 +22,7 @@ import {
   useMappedArray,
   useSlicedDimsAndMapping,
   useToNumArray,
+  useToNumArrays,
 } from '../hooks';
 import { DEFAULT_DOMAIN, formatNumLikeType, getSliceSelection } from '../utils';
 import { type HeatmapConfig } from './config';
@@ -64,6 +65,7 @@ function MappedHeatmapVis(props: Props) {
   } = config;
 
   const numArray = useToNumArray(value);
+  const numAxisArrays = useToNumArrays(axisValues);
 
   const { shape: dims } = dataset;
   const [slicedDims, slicedMapping] = useSlicedDimsAndMapping(dims, dimMapping);
@@ -109,11 +111,11 @@ function MappedHeatmapVis(props: Props) {
         invertColorMap={invertColorMap}
         abscissaParams={{
           label: axisLabels[xDimIndex],
-          value: axisValues[xDimIndex],
+          value: numAxisArrays[xDimIndex],
         }}
         ordinateParams={{
           label: axisLabels[yDimIndex],
-          value: axisValues[yDimIndex],
+          value: numAxisArrays[yDimIndex],
         }}
         flipXAxis={flipXAxis}
         flipYAxis={flipYAxis}

cypress/snapshots/app.cy.ts/nximage.snap.png

@@ -28,7 +28,15 @@ export const useToNumArray = createMemo(toNumArray);
 
 export function useToNumArrays(
   arrays: ArrayValue<NumericLikeType>[],
-): NumArray[] {
+): NumArray[];
+
+export function useToNumArrays(
+  arrays: (ArrayValue<NumericLikeType> | undefined)[],
+): (NumArray | undefined)[];
+
+export function useToNumArrays(
+  arrays: (ArrayValue<NumericLikeType> | undefined)[],
+): (NumArray | undefined)[] {
   return useMemo(() => arrays.map(toNumArray), arrays); // eslint-disable-line react-hooks/exhaustive-deps
 }
 

cypress/snapshots/app.cy.ts/nximage_complex_2d.snap.png

@@ -81,11 +81,14 @@ function MappedLineVis(props: Props) {
 
   const numArray = useToNumArray(value);
   const numAuxArrays = useToNumArrays(auxValues);
+  const numErrorsArray = useToNumArray(errors);
+  const numAuxErrorsArrays = useToNumArrays(auxErrors);
+  const numAxisArrays = useToNumArrays(axisValues);
 
   const dataArray = useMappedArray(numArray, ...hookArgs);
-  const errorsArray = useMappedArray(errors, ...hookArgs);
+  const errorsArray = useMappedArray(numErrorsArray, ...hookArgs);
   const auxArrays = useMappedArrays(numAuxArrays, ...hookArgs);
-  const auxErrorsArrays = useMappedArrays(auxErrors, ...hookArgs);
+  const auxErrorsArrays = useMappedArrays(numAuxErrorsArrays, ...hookArgs);
 
   const dataDomain = useDomain(
     dataArray,
@@ -132,7 +135,7 @@ function MappedLineVis(props: Props) {
         showGrid={showGrid}
         abscissaParams={{
           label: axisLabels[xDimIndex],
-          value: axisValues[xDimIndex],
+          value: numAxisArrays[xDimIndex],
           scaleType: xScaleType,
         }}
         ordinateLabel={valueLabel}

cypress/snapshots/app.cy.ts/nxline.snap.png

@@ -3,7 +3,8 @@ import {
   isBoolType,
   isComplexType,
   isEnumType,
-  isNumericType,
+  isFloatType,
+  isIntegerType,
 } from '@h5web/shared/guards';
 import {
   type ComplexType,
@@ -21,9 +22,20 @@ import {
 } from '@h5web/shared/vis-utils';
 import { format } from 'd3-format';
 
-export function createNumericFormatter(
+export function createIntegerFormatter(
   notation: Notation,
 ): (val: ScalarValue<NumericType>) => string {
+  if (notation === Notation.Scientific) {
+    const formatter = format('.3e');
+    return (val) => formatter(Number(val));
+  }
+
+  return (val) => val.toString();
+}
+
+export function createFloatFormatter(
+  notation: Notation,
+): (val: number) => string {
   switch (notation) {
     case Notation.FixedPoint:
       return format('.3f');
@@ -54,8 +66,12 @@ export function getFormatter(
   type: PrintableType,
   notation: Notation,
 ): ValueFormatter<PrintableType> {
-  if (isNumericType(type)) {
-    return createNumericFormatter(notation);
+  if (isIntegerType(type)) {
+    return createIntegerFormatter(notation);
+  }
+
+  if (isFloatType(type)) {
+    return createFloatFormatter(notation);
   }
 
   if (isBoolType(type)) {

cypress/snapshots/app.cy.ts/nxline_complex_2d_aux.snap.png

@@ -10,7 +10,12 @@ import { createPortal } from 'react-dom';
 
 import { type DimensionMapping } from '../../../dimension-mapper/models';
 import visualizerStyles from '../../../visualizer/Visualizer.module.css';
-import { useMappedArray, useSlicedDimsAndMapping } from '../hooks';
+import {
+  useMappedArray,
+  useSlicedDimsAndMapping,
+  useToNumArray,
+  useToNumArrays,
+} from '../hooks';
 import { type RgbVisConfig } from './config';
 import RgbToolbar from './RgbToolbar';
 
@@ -40,8 +45,12 @@ function MappedRgbVis(props: Props) {
   const { showGrid, keepRatio, imageType, flipXAxis, flipYAxis } = config;
   const { shape: dims } = dataset;
 
+  const numAxisArrays = useToNumArrays(axisValues);
+
   const [slicedDims, slicedMapping] = useSlicedDimsAndMapping(dims, dimMapping);
-  const dataArray = useMappedArray(value, slicedDims, slicedMapping);
+
+  const numArray = useToNumArray(value);
+  const dataArray = useMappedArray(numArray, slicedDims, slicedMapping);
 
   const xDimIndex = dimMapping.indexOf('x');
   const yDimIndex = dimMapping.indexOf('y');
@@ -59,11 +68,11 @@ function MappedRgbVis(props: Props) {
         imageType={imageType}
         abscissaParams={{
           label: axisLabels[xDimIndex],
-          value: axisValues[xDimIndex],
+          value: numAxisArrays[xDimIndex],
         }}
         ordinateParams={{
           label: axisLabels[yDimIndex],
-          value: axisValues[yDimIndex],
+          value: numAxisArrays[yDimIndex],
         }}
         flipXAxis={flipXAxis}
         flipYAxis={flipYAxis}

cypress/snapshots/app.cy.ts/nxrgb.snap.png

@@ -31,5 +31,5 @@ export function getFormatter<T extends PrintableType>(
     return createEnumFormatter(dataset.type.mapping);
   }
 
-  return (val: number | string) => val.toString();
+  return (val: number | bigint | string) => val.toString();
 }

cypress/snapshots/app.cy.ts/nxscatter.snap.png

@@ -5,7 +5,7 @@ import { type AxisMapping } from '@h5web/shared/nexus-models';
 import { createPortal } from 'react-dom';
 
 import visualizerStyles from '../../../visualizer/Visualizer.module.css';
-import { useBaseArray } from '../hooks';
+import { useBaseArray, useToNumArray, useToNumArrays } from '../hooks';
 import { DEFAULT_DOMAIN } from '../utils';
 import { type ScatterConfig } from './config';
 import ScatterToolbar from './ScatterToolbar';
@@ -33,13 +33,16 @@ function MappedScatterVis(props: Props) {
     yScaleType,
   } = config;
 
-  const dataArray = useBaseArray(value, [value.length]);
+  const numArray = useToNumArray(value);
+  const numAxisArrays = useToNumArrays(axisValues);
+
+  const dataArray = useBaseArray(numArray, [value.length]);
   const dataDomain = useDomain(dataArray, scaleType) || DEFAULT_DOMAIN;
   const visDomain = useVisDomain(customDomain, dataDomain);
   const [safeDomain] = useSafeDomain(visDomain, dataDomain, scaleType);
 
   const [xLabel, yLabel] = axisLabels;
-  const [xValue, yValue] = axisValues;
+  const [xValue, yValue] = numAxisArrays;
   assertDefined(xValue);
   assertDefined(yValue);
 

packages/app/src/providers/mock/mock-file.ts

@@ -9,7 +9,11 @@ import { createPortal } from 'react-dom';
 
 import { type DimensionMapping } from '../../../dimension-mapper/models';
 import visualizerStyles from '../../../visualizer/Visualizer.module.css';
-import { useMappedArray, useSlicedDimsAndMapping } from '../hooks';
+import {
+  useMappedArray,
+  useSlicedDimsAndMapping,
+  useToNumArray,
+} from '../hooks';
 import { DEFAULT_DOMAIN } from '../utils';
 import { type SurfaceConfig } from './config';
 import SurfaceToolbar from './SurfaceToolbar';
@@ -29,7 +33,9 @@ function MappedSurfaceVis(props: Props) {
 
   const { shape: dims } = dataset;
   const [slicedDims, slicedMapping] = useSlicedDimsAndMapping(dims, dimMapping);
-  const dataArray = useMappedArray(value, slicedDims, slicedMapping);
+
+  const numArray = useToNumArray(value);
+  const dataArray = useMappedArray(numArray, slicedDims, slicedMapping);
 
   const dataDomain = useDomain(dataArray, scaleType) || DEFAULT_DOMAIN;
   const visDomain = useVisDomain(customDomain, dataDomain);

packages/app/src/vis-packs/core/complex/MappedComplexLineVis.tsx

@@ -1,5 +1,9 @@
 import { type InteractionInfo } from '@h5web/lib';
-import { isIntegerType, isNumericType } from '@h5web/shared/guards';
+import {
+  isBigIntTypedArray,
+  isIntegerType,
+  isNumericType,
+} from '@h5web/shared/guards';
 import {
   type ArrayValue,
   DTypeClass,
@@ -93,11 +97,33 @@ export function getImageInteractions(keepRatio: boolean): InteractionInfo[] {
   return keepRatio ? BASE_INTERACTIONS : INTERACTIONS_WITH_AXIAL_ZOOM;
 }
 
+function isBigIntArray(val: ArrayValue<NumericLikeType>): val is bigint[] {
+  return Array.isArray(val) && typeof val[0] === 'bigint';
+}
+
 function isBoolArray(val: ArrayValue<NumericLikeType>): val is boolean[] {
   return Array.isArray(val) && typeof val[0] === 'boolean';
 }
 
-export function toNumArray(arr: ArrayValue<NumericLikeType>): NumArray {
+export function toNumArray<T extends ArrayValue<NumericLikeType> | undefined>(
+  arr: T,
+): T extends ArrayValue<NumericLikeType> ? NumArray : undefined;
+
+export function toNumArray(
+  arr: ArrayValue<NumericLikeType> | undefined,
+): NumArray | undefined {
+  if (!arr) {
+    return undefined;
+  }
+
+  if (isBigIntTypedArray(arr)) {
+    return Float64Array.from(arr, Number); // cast to float 64
+  }
+
+  if (isBigIntArray(arr)) {
+    return arr.map(Number); // cast to float 64
+  }
+
   if (isBoolArray(arr)) {
     return arr.map((val) => (val ? 1 : 0));
   }

packages/app/src/vis-packs/core/complex/MappedComplexVis.tsx

@@ -31,13 +31,15 @@ const mockStore = {
 
 const scalarInt = dataset('int', intType(), []);
 const scalarUint = dataset('uint', intType(false), []);
+const scalarBigInt = dataset('bigint', intType(true, 64), []);
 const scalarFloat = dataset('float', floatType(), []);
 const scalarStr = dataset('float', strType(), []);
 const scalarBool = dataset('bool', boolType(intType(true, 8)), []);
 const scalarCplx = dataset('cplx', cplxType(floatType()), []);
 const scalarCompound = dataset('comp', compoundType({ int: intType() }), []);
 const oneDInt = dataset('int_1d', intType(), [5]);
 const oneDUint = dataset('uint_1d', intType(false), [5]);
+const oneDBigUint = dataset('biguint_1d', intType(false, 64), [5]);
 const oneDBool = dataset('bool_1d', boolType(intType(true, 8)), [3]);
 const oneDCplx = dataset('cplx_1d', cplxType(floatType()), [10]);
 const oneDCompound = dataset('comp_1d', compoundType({ int: intType() }), [5]);
@@ -82,6 +84,7 @@ describe('Scalar', () => {
   it('should support dataset with printable type and scalar shape', () => {
     expect(supportsDataset(scalarInt)).toBe(true);
     expect(supportsDataset(scalarUint)).toBe(true);
+    expect(supportsDataset(scalarBigInt)).toBe(true);
     expect(supportsDataset(scalarFloat)).toBe(true);
     expect(supportsDataset(scalarStr)).toBe(true);
     expect(supportsDataset(scalarBool)).toBe(true);
@@ -103,6 +106,7 @@ describe('Matrix', () => {
   it('should support array dataset with printable type and at least one dimension', () => {
     expect(supportsDataset(oneDInt)).toBe(true);
     expect(supportsDataset(oneDUint)).toBe(true);
+    expect(supportsDataset(oneDBigUint)).toBe(true);
     expect(supportsDataset(twoDStr)).toBe(true);
     expect(supportsDataset(twoDCplx)).toBe(true);
     expect(supportsDataset(threeDFloat)).toBe(true);
@@ -124,6 +128,7 @@ describe('Line', () => {
   it('should support array dataset with numeric-like type and at least one dimension', () => {
     expect(supportsDataset(oneDInt)).toBe(true);
     expect(supportsDataset(oneDUint)).toBe(true);
+    expect(supportsDataset(oneDBigUint)).toBe(true);
     expect(supportsDataset(oneDBool)).toBe(true);
     expect(supportsDataset(twoDBool)).toBe(true);
     expect(supportsDataset(threeDFloat)).toBe(true);