Add types and arrays for allowed axis and colors scale types

apps/storybook/src/ColorBar.stories.tsx

@@ -1,5 +1,6 @@
 import type { ColorBarProps } from '@h5web/lib';
 import { ColorBar, ScaleType } from '@h5web/lib';
+import { COLOR_SCALE_TYPES } from '@h5web/shared';
 import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 
 import FillHeight from './decorators/FillHeight';
@@ -33,7 +34,7 @@ const meta = {
     },
     scaleType: {
       control: { type: 'inline-radio' },
-      options: [ScaleType.Linear, ScaleType.Log, ScaleType.SymLog],
+      options: COLOR_SCALE_TYPES,
     },
   },
 } satisfies Meta<StoryProps>;

apps/storybook/src/DomainSlider.stories.tsx

@@ -1,5 +1,6 @@
 import type { CustomDomain } from '@h5web/lib';
 import { DomainSlider, ScaleType } from '@h5web/lib';
+import { COLOR_SCALE_TYPES } from '@h5web/shared';
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
@@ -16,12 +17,7 @@ const meta = {
     customDomain: { control: false },
     scaleType: {
       control: { type: 'inline-radio' },
-      options: [
-        ScaleType.Linear,
-        ScaleType.SymLog,
-        ScaleType.Log,
-        ScaleType.Sqrt,
-      ],
+      options: COLOR_SCALE_TYPES,
     },
   },
 } satisfies Meta<typeof DomainSlider>;

apps/storybook/src/HeatmapMesh.stories.tsx

@@ -8,6 +8,7 @@ import {
 } from '@h5web/lib';
 import {
   assertDefined,
+  COLOR_SCALE_TYPES,
   getDims,
   ScaleType,
   toTypedNdArray,
@@ -47,12 +48,7 @@ const meta = {
   argTypes: {
     scaleType: {
       control: { type: 'inline-radio' },
-      options: [
-        ScaleType.Linear,
-        ScaleType.Log,
-        ScaleType.SymLog,
-        ScaleType.Sqrt,
-      ],
+      options: COLOR_SCALE_TYPES,
     },
     magFilter: {
       control: {

apps/storybook/src/HeatmapVis.stories.tsx

@@ -5,7 +5,11 @@ import {
   INTERPOLATORS,
   ScaleType,
 } from '@h5web/lib';
-import { assertDefined, toTypedNdArray } from '@h5web/shared';
+import {
+  assertDefined,
+  COLOR_SCALE_TYPES,
+  toTypedNdArray,
+} from '@h5web/shared';
 import type { Meta, StoryObj } from '@storybook/react';
 import ndarray from 'ndarray';
 
@@ -45,12 +49,7 @@ const meta = {
     },
     scaleType: {
       control: { type: 'inline-radio' },
-      options: [
-        ScaleType.Linear,
-        ScaleType.Log,
-        ScaleType.SymLog,
-        ScaleType.Sqrt,
-      ],
+      options: COLOR_SCALE_TYPES,
     },
     aspect: {
       control: { type: 'inline-radio' },

apps/storybook/src/Histogram.stories.tsx

@@ -1,5 +1,6 @@
 import type { Domain } from '@h5web/lib';
 import { Histogram, ScaleType } from '@h5web/lib';
+import { COLOR_SCALE_TYPES } from '@h5web/shared';
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
@@ -12,12 +13,7 @@ const meta = {
   argTypes: {
     scaleType: {
       control: { type: 'inline-radio' },
-      options: [
-        ScaleType.Linear,
-        ScaleType.SymLog,
-        ScaleType.Log,
-        ScaleType.Sqrt,
-      ],
+      options: COLOR_SCALE_TYPES,
     },
     onChange: { control: false },
   },

apps/storybook/src/LineVis.stories.tsx

@@ -8,7 +8,7 @@ import {
   mockValues,
   ScaleType,
 } from '@h5web/lib';
-import { toTypedNdArray } from '@h5web/shared';
+import { AXIS_SCALE_TYPES, toTypedNdArray } from '@h5web/shared';
 import type { Meta, StoryObj } from '@storybook/react';
 import ndarray from 'ndarray';
 
@@ -55,7 +55,7 @@ const meta = {
     },
     scaleType: {
       control: { type: 'inline-radio' },
-      options: [ScaleType.Linear, ScaleType.Log, ScaleType.SymLog],
+      options: AXIS_SCALE_TYPES,
     },
   },
 } satisfies Meta<typeof LineVis>;

apps/storybook/src/ScatterVis.stories.tsx

@@ -1,5 +1,5 @@
 import { getDomain, INTERPOLATORS, ScatterVis } from '@h5web/lib';
-import { assertDefined, ScaleType } from '@h5web/shared';
+import { assertDefined, COLOR_SCALE_TYPES, ScaleType } from '@h5web/shared';
 import type { Meta, StoryObj } from '@storybook/react';
 import ndarray from 'ndarray';
 import { useState } from 'react';
@@ -64,12 +64,7 @@ const meta = {
     },
     scaleType: {
       control: { type: 'inline-radio' },
-      options: [
-        ScaleType.Linear,
-        ScaleType.Log,
-        ScaleType.SymLog,
-        ScaleType.Sqrt,
-      ],
+      options: COLOR_SCALE_TYPES,
     },
   },
 } satisfies Meta<typeof ScatterVis>;

apps/storybook/src/TiledHeatmapMesh/TiledHeatmapMesh.stories.tsx

@@ -5,7 +5,7 @@ import {
   TiledTooltipMesh,
   VisCanvas,
 } from '@h5web/lib';
-import { ScaleType } from '@h5web/shared';
+import { COLOR_SCALE_TYPES, ScaleType } from '@h5web/shared';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import FillHeight from '../decorators/FillHeight';
@@ -55,12 +55,7 @@ const meta = {
   argTypes: {
     scaleType: {
       control: { type: 'inline-radio' },
-      options: [
-        ScaleType.Linear,
-        ScaleType.Log,
-        ScaleType.SymLog,
-        ScaleType.Sqrt,
-      ],
+      options: COLOR_SCALE_TYPES,
     },
     qualityFactor: {
       control: { type: 'range', min: 0, max: 1, step: 0.1 },

apps/storybook/src/Toolbar.stories.tsx

@@ -11,14 +11,13 @@ import {
   ToggleGroup,
   Toolbar,
 } from '@h5web/lib';
+import type { AxisScaleType } from '@h5web/shared';
+import { AXIS_SCALE_TYPES } from '@h5web/shared';
 import { useToggle } from '@react-hookz/web';
 import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 import { FiTarget } from 'react-icons/fi';
 
-const SCALE_TYPES = [ScaleType.Linear, ScaleType.SymLog] as const;
-type SupportedScaleTypes = (typeof SCALE_TYPES)[number];
-
 const meta = {
   title: 'Toolbar/Toolbar',
   component: Toolbar,
@@ -36,9 +35,7 @@ export const Default = {
     ]);
     const [colorMap, setColorMap] = useState<ColorMap>('Viridis');
     const [invertColorMap, toggleColorMapInversion] = useToggle();
-    const [scaleType, setScaleType] = useState<SupportedScaleTypes>(
-      ScaleType.Linear
-    );
+    const [scaleType, setScaleType] = useState<AxisScaleType>(ScaleType.Linear);
     const [showGrid, toggleGrid] = useToggle();
     const [withTest, toggleTest] = useToggle(true);
     const [foo, setFoo] = useState('bar');
@@ -75,7 +72,7 @@ export const Default = {
           <ScaleSelector
             value={scaleType}
             onScaleChange={setScaleType}
-            options={SCALE_TYPES}
+            options={AXIS_SCALE_TYPES}
           />
 
           <Separator />

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

@@ -1,13 +1,13 @@
 import {
   CurveType,
   ScaleSelector,
-  ScaleType,
   Selector,
   Separator,
   ToggleBtn,
   ToggleGroup,
   Toolbar,
 } from '@h5web/lib';
+import { AXIS_SCALE_TYPES } from '@h5web/shared';
 import { MdDomain, MdGridOn } from 'react-icons/md';
 
 import type { LineConfig } from '../line/config';
@@ -44,13 +44,13 @@ function ComplexLineToolbar(props: Props) {
         label="X"
         value={xScaleType}
         onScaleChange={setXScaleType}
-        options={[ScaleType.Linear, ScaleType.Log, ScaleType.SymLog]}
+        options={AXIS_SCALE_TYPES}
       />
       <ScaleSelector
         label="Y"
         value={yScaleType}
         onScaleChange={setYScaleType}
-        options={[ScaleType.Linear, ScaleType.Log, ScaleType.SymLog]}
+        options={AXIS_SCALE_TYPES}
       />
 
       <Separator />

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

@@ -9,7 +9,7 @@ import {
   ToggleBtn,
   Toolbar,
 } from '@h5web/lib';
-import { ScaleType } from '@h5web/shared';
+import { COLOR_SCALE_TYPES } from '@h5web/shared';
 import { MdAspectRatio, MdGridOn } from 'react-icons/md';
 
 import type { HeatmapConfig } from '../heatmap/config';
@@ -64,12 +64,7 @@ function ComplexToolbar(props: Props) {
       <ScaleSelector
         value={scaleType}
         onScaleChange={setScaleType}
-        options={[
-          ScaleType.Linear,
-          ScaleType.Log,
-          ScaleType.SymLog,
-          ScaleType.Sqrt,
-        ]}
+        options={COLOR_SCALE_TYPES}
       />
 
       <Separator />

packages/app/src/vis-packs/core/heatmap/HeatmapToolbar.tsx

@@ -6,12 +6,12 @@ import {
   FlipYAxisToggler,
   GridToggler,
   ScaleSelector,
-  ScaleType,
   Separator,
   SnapshotBtn,
   ToggleBtn,
   Toolbar,
 } from '@h5web/lib';
+import { COLOR_SCALE_TYPES } from '@h5web/shared';
 import { MdAspectRatio } from 'react-icons/md';
 
 import type { ExportFormat, ExportURL } from '../../../providers/models';
@@ -68,12 +68,7 @@ function HeatmapToolbar(props: Props) {
       <ScaleSelector
         value={scaleType}
         onScaleChange={setScaleType}
-        options={[
-          ScaleType.Linear,
-          ScaleType.Log,
-          ScaleType.SymLog,
-          ScaleType.Sqrt,
-        ]}
+        options={COLOR_SCALE_TYPES}
       />
 
       <Separator />

packages/app/src/vis-packs/core/heatmap/config.tsx

@@ -1,4 +1,5 @@
 import type { CustomDomain } from '@h5web/lib';
+import type { ColorScaleType } from '@h5web/shared';
 import { isDefined, ScaleType } from '@h5web/shared';
 import { useMap } from '@react-hookz/web';
 import { createContext, useContext, useState } from 'react';
@@ -19,8 +20,8 @@ export interface HeatmapConfig {
   invertColorMap: boolean;
   toggleColorMapInversion: () => void;
 
-  scaleType: Exclude<ScaleType, 'gamma'>;
-  setScaleType: (scaleType: Exclude<ScaleType, 'gamma'>) => void;
+  scaleType: ColorScaleType;
+  setScaleType: (scaleType: ColorScaleType) => void;
 
   showGrid: boolean;
   toggleGrid: () => void;
@@ -48,7 +49,7 @@ function createHeatmapConfigStore() {
         },
 
         scaleType: ScaleType.Linear,
-        setScaleType: (scaleType: Exclude<ScaleType, 'gamma'>) => {
+        setScaleType: (scaleType: ColorScaleType) => {
           set(() => ({ scaleType }));
         },
 
@@ -101,7 +102,7 @@ export function useHeatmapConfig(
   return {
     ...persistedConfig,
     ...Object.fromEntries(suggestedOpts.entries()),
-    setScaleType: (scaleType: Exclude<ScaleType, 'gamma'>) => {
+    setScaleType: (scaleType: ColorScaleType) => {
       setPersistedScaleType(scaleType);
       suggestedOpts.delete('scaleType');
     },

packages/app/src/vis-packs/core/line/LineToolbar.tsx

@@ -7,7 +7,7 @@ import {
   ToggleGroup,
   Toolbar,
 } from '@h5web/lib';
-import { ScaleType } from '@h5web/shared';
+import { AXIS_SCALE_TYPES } from '@h5web/shared';
 import { FiItalic } from 'react-icons/fi';
 import { MdDomain, MdGridOn } from 'react-icons/md';
 
@@ -16,11 +16,6 @@ import { INTERACTIONS_WITH_AXIAL_ZOOM } from '../utils';
 import type { LineConfig } from './config';
 
 const EXPORT_FORMATS: ExportFormat[] = ['npy', 'csv'];
-const SCALETYPE_OPTIONS = [
-  ScaleType.Linear,
-  ScaleType.Log,
-  ScaleType.SymLog,
-] as const;
 
 interface Props {
   isSlice: boolean;
@@ -55,13 +50,13 @@ function LineToolbar(props: Props) {
         label="X"
         value={xScaleType}
         onScaleChange={setXScaleType}
-        options={SCALETYPE_OPTIONS}
+        options={AXIS_SCALE_TYPES}
       />
       <ScaleSelector
         label="Y"
         value={yScaleType}
         onScaleChange={setYScaleType}
-        options={SCALETYPE_OPTIONS}
+        options={AXIS_SCALE_TYPES}
       />
 
       <Separator />

packages/app/src/vis-packs/core/line/config.tsx

@@ -1,4 +1,5 @@
 import { CurveType } from '@h5web/lib';
+import type { AxisScaleType } from '@h5web/shared';
 import { isDefined, ScaleType } from '@h5web/shared';
 import { useMap } from '@react-hookz/web';
 import { omit } from 'lodash';
@@ -16,10 +17,10 @@ export interface LineConfig {
   showGrid: boolean;
   toggleGrid: () => void;
 
-  xScaleType: Exclude<ScaleType, 'sqrt' | 'gamma'>;
-  yScaleType: Exclude<ScaleType, 'sqrt' | 'gamma'>;
-  setXScaleType: (type: Exclude<ScaleType, 'sqrt' | 'gamma'>) => void;
-  setYScaleType: (type: Exclude<ScaleType, 'sqrt' | 'gamma'>) => void;
+  xScaleType: AxisScaleType;
+  yScaleType: AxisScaleType;
+  setXScaleType: (type: AxisScaleType) => void;
+  setYScaleType: (type: AxisScaleType) => void;
 
   autoScale: boolean;
   toggleAutoScale: () => void;
@@ -90,11 +91,11 @@ export function useLineConfig(
   return {
     ...persistedConfig,
     ...Object.fromEntries(suggestedOpts.entries()),
-    setXScaleType: (xScaleType: Exclude<ScaleType, 'sqrt' | 'gamma'>) => {
+    setXScaleType: (xScaleType: AxisScaleType) => {
       setPersistedXScaleType(xScaleType);
       suggestedOpts.delete('xScaleType');
     },
-    setYScaleType: (yScaleType: Exclude<ScaleType, 'sqrt' | 'gamma'>) => {
+    setYScaleType: (yScaleType: AxisScaleType) => {
       setPersistedYScaleType(yScaleType);
       suggestedOpts.delete('yScaleType');
     },