Add util getAxisValues in h5web/lib

packages/lib/src/index.ts

@@ -131,7 +131,11 @@ export { default as ScatterPoints } from './vis/scatter/ScatterPoints';
 export { default as TiledHeatmapMesh } from './vis/tiles/TiledHeatmapMesh';
 export type { TiledHeatmapMeshProps } from './vis/tiles/TiledHeatmapMesh';
 export { getLayerSizes, TilesApi } from './vis/tiles/api';
-export { getVisibleDomains, getAxisDomain } from './vis/utils';
-export { useCameraState, useValidDomainForScale } from './vis/hooks';
+export { getVisibleDomains, getAxisDomain, getAxisValues } from './vis/utils';
+export {
+  useCameraState,
+  useValidDomainForScale,
+  useAxisValues,
+} from './vis/hooks';
 export { assertLength, assertDefined } from '@h5web/shared';
 export { default as DefaultInteractions } from './interactions/DefaultInteractions';

packages/lib/src/vis/heatmap/HeatmapVis.tsx

@@ -19,7 +19,7 @@ import { DEFAULT_DOMAIN, formatNumType } from '../utils';
 import ColorBar from './ColorBar';
 import HeatmapMesh from './HeatmapMesh';
 import styles from './HeatmapVis.module.css';
-import { useAxisValues, useTextureSafeNdArray } from './hooks';
+import { usePixelEdgeValues, useTextureSafeNdArray } from './hooks';
 import type { ColorMap, Layout, TooltipData } from './models';
 
 interface Props {
@@ -64,11 +64,11 @@ function HeatmapVis(props: Props) {
   const { label: ordinateLabel, value: ordinateValue } = ordinateParams;
   const { rows, cols } = getDims(dataArray);
 
-  const abscissas = useAxisValues(abscissaValue, cols);
+  const abscissas = usePixelEdgeValues(abscissaValue, cols);
   const abscissaDomain = useAxisDomain(abscissas);
   assertDefined(abscissaDomain, 'Abscissas have undefined domain');
 
-  const ordinates = useAxisValues(ordinateValue, rows);
+  const ordinates = usePixelEdgeValues(ordinateValue, rows);
   const ordinateDomain = useAxisDomain(ordinates);
   assertDefined(ordinateDomain, 'Ordinates have undefined domain');
 

packages/lib/src/vis/heatmap/hooks.ts

@@ -7,13 +7,13 @@ import type { TextureSafeTypedArray } from './models';
 import {
   getVisDomain,
   getSafeDomain,
-  getAxisValues,
+  getPixelEdgeValues,
   toTextureSafeNdArray,
 } from './utils';
 
 export const useVisDomain = createMemo(getVisDomain);
 export const useSafeDomain = createMemo(getSafeDomain);
-export const useAxisValues = createMemo(getAxisValues);
+export const usePixelEdgeValues = createMemo(getPixelEdgeValues);
 
 export function useTextureSafeNdArray(
   ndArr: NdArray<NumArray>

packages/lib/src/vis/heatmap/utils.ts

@@ -16,7 +16,7 @@ import {
 import type { CustomDomain, DomainErrors } from '../models';
 import { DomainError } from '../models';
 import { H5WEB_SCALES } from '../scales';
-import { toArray } from '../utils';
+import { getAxisValues } from '../utils';
 import { INTERPOLATORS } from './interpolators';
 import type { ColorMap, D3Interpolator, TextureSafeTypedArray } from './models';
 
@@ -103,29 +103,18 @@ export function getLinearGradient(
   return `linear-gradient(to ${direction}, ${colorStops})`;
 }
 
-export function getAxisValues(
+export function getPixelEdgeValues(
   rawValues: NumArray | undefined,
   pixelCount: number
 ): number[] {
-  if (!rawValues) {
-    return range(pixelCount + 1);
-  }
-
-  if (rawValues.length === pixelCount + 1) {
-    return toArray(rawValues);
-  }
-
-  if (rawValues.length === pixelCount) {
+  if (rawValues && rawValues.length === pixelCount) {
     // Add value at right-hand side of last pixel, assuming raw values are regularly spaced
     const deltaCoord = rawValues[1] - rawValues[0];
     return [...rawValues, rawValues[rawValues.length - 1] + deltaCoord];
   }
 
-  throw new Error(
-    `Expected array to have length ${pixelCount} or ${pixelCount + 1}, not ${
-      rawValues.length
-    }`
-  );
+  // nEdges = nPixels + 1
+  return getAxisValues(rawValues, pixelCount + 1);
 }
 
 export function getInterpolator(colorMap: ColorMap, reverse: boolean) {

packages/lib/src/vis/hooks.ts

@@ -12,6 +12,7 @@ import { useAxisSystemContext } from './shared/AxisSystemProvider';
 import type { AxisSystemContextValue } from './shared/AxisSystemProvider';
 import {
   getAxisDomain,
+  getAxisValues,
   getCombinedDomain,
   getValueToIndexScale,
   toArray,
@@ -23,6 +24,7 @@ export const useValidDomainForScale = createMemo(getValidDomainForScale);
 export const useCombinedDomain = createMemo(getCombinedDomain);
 export const useValueToIndexScale = createMemo(getValueToIndexScale);
 export const useAxisDomain = createMemo(getAxisDomain);
+export const useAxisValues = createMemo(getAxisValues);
 
 export const useToArray = createMemo(toArray);
 

packages/lib/src/vis/line/LineVis.tsx

@@ -1,24 +1,28 @@
 import type { Domain, NumArray, NumericType } from '@h5web/shared';
 import {
-  assertLength,
   assertDefined,
-  formatTooltipVal,
+  assertLength,
   formatTooltipErr,
+  formatTooltipVal,
   ScaleType,
 } from '@h5web/shared';
-import { range } from 'd3-array';
 import type { NdArray } from 'ndarray';
-import { useMemo } from 'react';
 import type { ReactElement, ReactNode } from 'react';
+import { useMemo } from 'react';
 
 import DefaultInteractions from '../../interactions/DefaultInteractions';
 import type { Interactions } from '../../interactions/models';
 import ResetZoomButton from '../../toolbar/floating/ResetZoomButton';
-import { useAxisDomain, useCustomColors, useValueToIndexScale } from '../hooks';
+import {
+  useAxisDomain,
+  useAxisValues,
+  useCustomColors,
+  useValueToIndexScale,
+} from '../hooks';
 import type { AxisParams, CustomColor } from '../models';
 import TooltipMesh from '../shared/TooltipMesh';
 import VisCanvas from '../shared/VisCanvas';
-import { extendDomain, DEFAULT_DOMAIN, formatNumType, toArray } from '../utils';
+import { DEFAULT_DOMAIN, extendDomain, formatNumType } from '../utils';
 import DataCurve from './DataCurve';
 import styles from './LineVis.module.css';
 import type { AuxiliaryParams, TooltipData } from './models';
@@ -87,13 +91,7 @@ function LineVis(props: Props) {
     assertLength(array, dataArray.size, `'${label}' auxiliary`)
   );
 
-  const abscissas = useMemo(() => {
-    if (!abscissaValue) {
-      return range(dataArray.size);
-    }
-
-    return toArray(abscissaValue);
-  }, [abscissaValue, dataArray.size]);
+  const abscissas = useAxisValues(abscissaValue, dataArray.size);
 
   const abscissaToIndex = useValueToIndexScale(abscissas, true);
 

packages/lib/src/vis/utils.ts

@@ -361,3 +361,20 @@ export function getVisibleDomains(
     yVisibleDomain: [dataBottomLeft.y, dataTopRight.y],
   };
 }
+
+export function getAxisValues(
+  rawValues: NumArray | undefined,
+  axisLength: number
+): number[] {
+  if (!rawValues) {
+    return range(axisLength);
+  }
+
+  if (rawValues.length === axisLength) {
+    return toArray(rawValues);
+  }
+
+  throw new Error(
+    `Expected array to have length ${axisLength}, not ${rawValues.length}`
+  );
+}