Refactor Selector API and implement ComplexVisTypeSelector

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

@@ -1,20 +1,19 @@
 import {
+  ComplexVisTypeSelector,
   CurveType,
   ScaleSelector,
-  Selector,
   Separator,
   ToggleBtn,
   ToggleGroup,
   Toolbar,
 } from '@h5web/lib';
+import { ComplexVisType } from '@h5web/shared/vis-models';
 import { AXIS_SCALE_TYPES } from '@h5web/shared/vis-utils';
 import { MdDomain, MdGridOn } from 'react-icons/md';
 
 import type { LineConfig } from '../line/config';
 import { INTERACTIONS_WITH_AXIAL_ZOOM } from '../utils';
 import type { ComplexLineConfig } from './lineConfig';
-import type { ComplexLineVisType } from './models';
-import { ComplexVisType, VIS_TYPE_SYMBOLS } from './models';
 
 interface Props {
   disableAutoScale: boolean;
@@ -55,14 +54,10 @@ function ComplexLineToolbar(props: Props) {
 
       <Separator />
 
-      <Selector
+      <ComplexVisTypeSelector
         value={visType}
-        onChange={(value: ComplexLineVisType) => setVisType(value)}
+        onChange={setVisType}
         options={[ComplexVisType.Amplitude, ComplexVisType.Phase]}
-        optionComponent={({ option }) => (
-          // eslint-disable-next-line react/jsx-no-useless-fragment
-          <>{`${VIS_TYPE_SYMBOLS[option]} ${option}`}</>
-        )}
       />
 
       <Separator />

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

@@ -1,21 +1,21 @@
 import type { Domain } from '@h5web/lib';
 import {
   ColorMapSelector,
+  ComplexVisTypeSelector,
   DomainWidget,
   ScaleSelector,
-  Selector,
   Separator,
   SnapshotBtn,
   ToggleBtn,
   Toolbar,
 } from '@h5web/lib';
+import { ComplexVisType } from '@h5web/shared/vis-models';
 import { COLOR_SCALE_TYPES } from '@h5web/shared/vis-utils';
 import { MdAspectRatio, MdGridOn } from 'react-icons/md';
 
 import type { HeatmapConfig } from '../heatmap/config';
 import { getImageInteractions } from '../utils';
 import type { ComplexConfig } from './config';
-import { ComplexVisType, VIS_TYPE_SYMBOLS } from './models';
 
 interface Props {
   dataDomain: Domain;
@@ -69,14 +69,10 @@ function ComplexToolbar(props: Props) {
 
       <Separator />
 
-      <Selector
+      <ComplexVisTypeSelector
         value={visType}
-        onChange={(value: ComplexVisType) => setVisType(value)}
+        onChange={setVisType}
         options={Object.values(ComplexVisType)}
-        optionComponent={({ option }) => (
-          // eslint-disable-next-line react/jsx-no-useless-fragment
-          <>{`${VIS_TYPE_SYMBOLS[option]} ${option}`}</>
-        )}
       />
 
       <Separator />

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

@@ -1,6 +1,7 @@
 import type { H5WebComplex } from '@h5web/shared/hdf5-models';
 import type { AxisMapping } from '@h5web/shared/nexus-models';
 import type { NumArray } from '@h5web/shared/vis-models';
+import { ComplexVisType } from '@h5web/shared/vis-models';
 import { useMemo } from 'react';
 import { createPortal } from 'react-dom';
 
@@ -9,8 +10,7 @@ import type { LineConfig } from '../line/config';
 import MappedLineVis from '../line/MappedLineVis';
 import ComplexLineToolbar from './ComplexLineToolbar';
 import type { ComplexLineConfig } from './lineConfig';
-import { ComplexVisType } from './models';
-import { getPhaseAmplitudeValues } from './utils';
+import { COMPLEX_VIS_TYPE_LABELS, getPhaseAmplitudeValues } from './utils';
 
 interface Props {
   value: H5WebComplex[];
@@ -60,7 +60,9 @@ function MappedComplexLineVis(props: Props) {
           visType === ComplexVisType.Amplitude ? amplitudeValues : phaseValues
         }
         valueLabel={
-          valueLabel ? `${valueLabel} (${visType.toLowerCase()})` : visType
+          valueLabel
+            ? `${valueLabel} (${COMPLEX_VIS_TYPE_LABELS[visType].toLowerCase()})`
+            : COMPLEX_VIS_TYPE_LABELS[visType]
         }
         config={lineConfig}
         {...lineProps}

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

@@ -7,6 +7,7 @@ import {
 import type { H5WebComplex } from '@h5web/shared/hdf5-models';
 import type { AxisMapping } from '@h5web/shared/nexus-models';
 import type { NumArray } from '@h5web/shared/vis-models';
+import { ComplexVisType } from '@h5web/shared/vis-models';
 import { useMemo } from 'react';
 import { createPortal } from 'react-dom';
 
@@ -21,8 +22,7 @@ import {
 import { DEFAULT_DOMAIN } from '../utils';
 import ComplexToolbar from './ComplexToolbar';
 import type { ComplexConfig } from './config';
-import { ComplexVisType } from './models';
-import { getPhaseAmplitudeValues } from './utils';
+import { COMPLEX_VIS_TYPE_LABELS, getPhaseAmplitudeValues } from './utils';
 
 interface Props {
   value: H5WebComplex[];
@@ -101,7 +101,7 @@ function MappedComplexVis(props: Props) {
         className={visualizerStyles.vis}
         dataArray={dataArray}
         domain={safeDomain}
-        title={`${title} (${visType.toLowerCase()})`}
+        title={`${title} (${COMPLEX_VIS_TYPE_LABELS[visType].toLowerCase()})`}
         colorMap={colorMap}
         scaleType={scaleType}
         aspect={keepRatio ? 'equal' : 'auto'}

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

@@ -1,10 +1,10 @@
+import { ComplexVisType } from '@h5web/shared/vis-models';
 import { createContext, useContext, useState } from 'react';
 import type { StoreApi } from 'zustand';
 import { createStore, useStore } from 'zustand';
 import { persist } from 'zustand/middleware';
 
 import type { ConfigProviderProps } from '../../models';
-import { ComplexVisType } from './models';
 
 export interface ComplexConfig {
   visType: ComplexVisType;
@@ -20,7 +20,7 @@ function createComplexConfigStore() {
       }),
       {
         name: 'h5web:complex',
-        version: 2,
+        version: 3,
       },
     ),
   );

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

@@ -1,11 +1,12 @@
+import { ComplexVisType } from '@h5web/shared/vis-models';
 import { createContext, useContext, useState } from 'react';
 import type { StoreApi } from 'zustand';
 import { createStore, useStore } from 'zustand';
 import { persist } from 'zustand/middleware';
 
 import type { ConfigProviderProps } from '../../models';
-import type { ComplexLineVisType } from './models';
-import { ComplexVisType } from './models';
+
+type ComplexLineVisType = ComplexVisType.Phase | ComplexVisType.Amplitude;
 
 export interface ComplexLineConfig {
   visType: ComplexLineVisType;
@@ -21,7 +22,7 @@ function createComplexLineConfigStore() {
       }),
       {
         name: 'h5web:complexLine',
-        version: 1,
+        version: 2,
       },
     ),
   );

packages/app/src/vis-packs/core/complex/utils.ts

@@ -1,5 +1,6 @@
 import type { H5WebComplex } from '@h5web/shared/hdf5-models';
 import type { Bounds } from '@h5web/shared/vis-models';
+import { ComplexVisType } from '@h5web/shared/vis-models';
 import { getNewBounds } from '@h5web/shared/vis-utils';
 
 const INITIAL_BOUNDS: Bounds = {
@@ -9,6 +10,12 @@ const INITIAL_BOUNDS: Bounds = {
   strictPositiveMin: Infinity,
 };
 
+export const COMPLEX_VIS_TYPE_LABELS = {
+  [ComplexVisType.Amplitude]: 'Amplitude',
+  [ComplexVisType.Phase]: 'Phase',
+  [ComplexVisType.PhaseAmplitude]: 'Phase & Amplitude',
+};
+
 export function getPhaseAmplitudeValues(mappedValues: H5WebComplex[]): {
   phaseValues: number[];
   phaseBounds: Bounds;

packages/lib/src/index.ts

@@ -18,9 +18,10 @@ export { default as ToggleGroup } from './toolbar/controls/ToggleGroup';
 export { default as DomainWidget } from './toolbar/controls/DomainWidget/DomainWidget';
 export { default as DomainSlider } from './toolbar/controls/DomainWidget/DomainSlider';
 export { default as DomainControls } from './toolbar/controls/DomainWidget/DomainControls';
-export { default as ColorMapOption } from './toolbar/controls/ColorMapSelector/ColorMapOption';
+export { default as ColorMapGradient } from './toolbar/controls/ColorMapSelector/ColorMapGradient';
 export { default as ColorMapSelector } from './toolbar/controls/ColorMapSelector/ColorMapSelector';
 export { default as ScaleSelector } from './toolbar/controls/ScaleSelector/ScaleSelector';
+export { default as ComplexVisTypeSelector } from './toolbar/controls/ComplexVisTypeSelector';
 export { default as Selector } from './toolbar/controls/Selector/Selector';
 export { default as InteractionHelp } from './toolbar/controls/InteractionHelp';
 export { default as FloatingControl } from './toolbar/floating/FloatingControl';

packages/lib/src/toolbar/controls/ColorMapSelector/ColorMapGradient.tsx

@@ -0,0 +1,24 @@
+import { INTERPOLATORS } from '../../../vis/heatmap/interpolators';
+import type { ColorMap } from '../../../vis/heatmap/models';
+import { getLinearGradient } from '../../../vis/heatmap/utils';
+import styles from './ColorMapSelector.module.css';
+
+interface Props {
+  colorMap: ColorMap;
+}
+
+function ColorMapGradient(props: Props) {
+  const { colorMap } = props;
+
+  return (
+    <div
+      className={styles.gradient}
+      style={{
+        backgroundImage: getLinearGradient(INTERPOLATORS[colorMap], 'right'),
+      }}
+      data-keep-colors
+    />
+  );
+}
+
+export default ColorMapGradient;

packages/lib/src/toolbar/controls/ColorMapSelector/ColorMapSelector.tsx

@@ -3,7 +3,8 @@ import { FiShuffle } from 'react-icons/fi';
 import type { ColorMap } from '../../../vis/heatmap/models';
 import Selector from '../Selector/Selector';
 import ToggleBtn from '../ToggleBtn';
-import ColorMapOption from './ColorMapOption';
+import ColorMapGradient from './ColorMapGradient';
+import styles from './ColorMapSelector.module.css';
 import { COLORMAP_GROUPS } from './groups';
 
 interface Props {
@@ -22,8 +23,14 @@ function ColorMapSelector(props: Props) {
         value={value}
         onChange={onValueChange}
         options={COLORMAP_GROUPS}
-        optionComponent={ColorMapOption}
+        renderOption={(option) => (
+          <div className={styles.option}>
+            {option}
+            <ColorMapGradient colorMap={option} />
+          </div>
+        )}
       />
+
       <ToggleBtn
         small
         label="Invert"

packages/lib/src/toolbar/controls/ColorMapSelector/groups.ts

@@ -1,6 +1,6 @@
 import type { ColorMap } from '../../../vis/heatmap/models';
 
-export const COLORMAP_GROUPS: Record<string, ColorMap[]> = {
+export const COLORMAP_GROUPS = {
   Recommended: ['Viridis', 'Inferno', 'Greys', 'RdBu', 'Rainbow', 'Sinebow'],
   'Single hue': ['Blues', 'Greens', 'Greys', 'Oranges', 'Purples', 'Reds'],
   'Multi hue': [
@@ -38,4 +38,4 @@ export const COLORMAP_GROUPS: Record<string, ColorMap[]> = {
     'RdYlGn',
     'Spectral',
   ],
-};
+} satisfies Record<string, ColorMap[]>;

packages/lib/src/toolbar/controls/ComplexVisTypeSelector.tsx

@@ -0,0 +1,32 @@
+import { ComplexVisType } from '@h5web/shared/vis-models';
+
+import Selector from './Selector/Selector';
+
+const VIS_TYPE_OPTIONS = {
+  [ComplexVisType.Phase]: 'φ Phase',
+  [ComplexVisType.Amplitude]: '𝓐 Amplitude',
+  [ComplexVisType.PhaseAmplitude]: 'φ𝓐 Phase & Amp.',
+} satisfies Record<ComplexVisType, string>;
+
+interface Props<T extends ComplexVisType> {
+  label?: string;
+  value: T;
+  onChange: (scale: T) => void;
+  options: T[];
+}
+
+function ComplexVisTypeSelector<T extends ComplexVisType>(props: Props<T>) {
+  const { label, value, onChange, options } = props;
+
+  return (
+    <Selector
+      label={label}
+      value={value}
+      onChange={onChange}
+      options={options}
+      renderOption={(option) => VIS_TYPE_OPTIONS[option]}
+    />
+  );
+}
+
+export default ComplexVisTypeSelector;