Replace visRatio and layout props with aspect prop

silx-kit · Nov 15, 2022 · 87da2be · 87da2be
1 parent d5b895d
commit 87da2be
Show file tree

Hide file tree

Showing 24 changed files with 131 additions and 97 deletions.
diff --git a/apps/storybook/src/HeatmapVis.stories.tsx b/apps/storybook/src/HeatmapVis.stories.tsx
@@ -123,7 +123,7 @@ export default {
   args: {
     colorMap: 'Viridis',
     scaleType: ScaleType.Linear,
-    layout: 'cover',
+    aspect: 'equal',
     showGrid: true,
   },
   argTypes: {
@@ -140,9 +140,9 @@ export default {
         ScaleType.Sqrt,
       ],
     },
-    layout: {
+    aspect: {
       control: { type: 'inline-radio' },
-      options: ['cover', 'fill'],
+      options: ['auto', 'equal'],
     },
   },
 } as Meta;
diff --git a/apps/storybook/src/HeatmapVisDisplay.stories.tsx b/apps/storybook/src/HeatmapVisDisplay.stories.tsx
@@ -15,11 +15,18 @@ const domain = getDomain(dataArray.data);
 
 const Template: Story<HeatmapVisProps> = (args) => <HeatmapVis {...args} />;
 
-export const Fill = Template.bind({});
-Fill.args = {
+export const AutoAspectRatio = Template.bind({});
+AutoAspectRatio.args = {
   dataArray,
   domain,
-  layout: 'fill',
+  aspect: 'auto',
+};
+
+export const CustomAspectRatio = Template.bind({});
+CustomAspectRatio.args = {
+  dataArray,
+  domain,
+  aspect: 1,
 };
 
 export const FlipYAxis = Template.bind({});

diff --git a/apps/storybook/src/SelectToZoom.stories.tsx b/apps/storybook/src/SelectToZoom.stories.tsx
@@ -25,7 +25,7 @@ const Template: Story<SelectToZoomProps> = (args) => {
     <VisCanvas
       abscissaConfig={{ visDomain: [-5, 5], showGrid: true }}
       ordinateConfig={{ visDomain: [-0.5, 1.5], showGrid: true }}
-      visRatio={keepRatio ? cols / rows : undefined}
+      aspect={keepRatio ? 'equal' : 'auto'}
     >
       <Pan />
       <Zoom />

diff --git a/apps/storybook/src/TiledHeatmapMesh.stories.tsx b/apps/storybook/src/TiledHeatmapMesh.stories.tsx
@@ -178,10 +178,7 @@ const Template: Story<TiledHeatmapStoryProps> = (args) => {
     <VisCanvas
       abscissaConfig={abscissaConfig}
       ordinateConfig={ordinateConfig}
-      visRatio={Math.abs(
-        (abscissaConfig.visDomain[1] - abscissaConfig.visDomain[0]) /
-          (ordinateConfig.visDomain[1] - ordinateConfig.visDomain[0])
-      )}
+      aspect="equal"
       showAxes={showAxes}
     >
       <Pan />
@@ -308,10 +305,7 @@ export const WithTransforms: Story<TiledHeatmapStoryProps> = (args) => {
     <VisCanvas
       abscissaConfig={abscissaConfig}
       ordinateConfig={ordinateConfig}
-      visRatio={Math.abs(
-        (abscissaConfig.visDomain[1] - abscissaConfig.visDomain[0]) /
-          (ordinateConfig.visDomain[1] - ordinateConfig.visDomain[0])
-      )}
+      aspect="equal"
     >
       <Pan />
       <Zoom />

diff --git a/apps/storybook/src/VisCanvas.stories.tsx b/apps/storybook/src/VisCanvas.stories.tsx
@@ -32,11 +32,18 @@ LogScales.args = {
   },
 };
 
-export const AspectRatio = Template.bind({});
-AspectRatio.args = {
+export const EqualAspectRatio = Template.bind({});
+EqualAspectRatio.args = {
   abscissaConfig: { visDomain: [0, 20], showGrid: true, isIndexAxis: true },
   ordinateConfig: { visDomain: [0, 10], showGrid: true, isIndexAxis: true },
-  visRatio: 20 / 10,
+  aspect: 'equal',
+};
+
+export const CustomAspectRatio = Template.bind({});
+CustomAspectRatio.args = {
+  abscissaConfig: { visDomain: [0, 20], showGrid: true, isIndexAxis: true },
+  ordinateConfig: { visDomain: [0, 10], showGrid: true, isIndexAxis: true },
+  aspect: 1,
 };
 
 export const NoGrid = Template.bind({});

diff --git a/packages/app/src/vis-packs/core/complex/ComplexToolbar.tsx b/packages/app/src/vis-packs/core/complex/ComplexToolbar.tsx
@@ -31,19 +31,19 @@ function ComplexToolbar(props: Props) {
     customDomain,
     colorMap,
     scaleType,
-    layout,
+    keepRatio,
     showGrid,
     invertColorMap,
     setCustomDomain,
     setColorMap,
     setScaleType,
-    setLayout,
+    toggleKeepRatio,
     toggleGrid,
     toggleColorMapInversion,
   } = heatmapConfig;
 
   return (
-    <Toolbar interactions={getImageInteractions(layout)}>
+    <Toolbar interactions={getImageInteractions(keepRatio)}>
       <DomainSlider
         dataDomain={dataDomain}
         customDomain={customDomain}
@@ -89,8 +89,8 @@ function ComplexToolbar(props: Props) {
       <ToggleBtn
         label="Keep ratio"
         icon={MdAspectRatio}
-        value={layout === 'cover'}
-        onToggle={() => setLayout(layout === 'cover' ? 'fill' : 'cover')}
+        value={keepRatio}
+        onToggle={toggleKeepRatio}
       />
       <ToggleBtn
         label="Grid"

diff --git a/packages/app/src/vis-packs/core/complex/MappedComplexVis.tsx b/packages/app/src/vis-packs/core/complex/MappedComplexVis.tsx
@@ -51,7 +51,7 @@ function MappedComplexVis(props: Props) {
     customDomain,
     colorMap,
     scaleType,
-    layout,
+    keepRatio,
     showGrid,
     invertColorMap,
   } = heatmapConfig;
@@ -100,7 +100,7 @@ function MappedComplexVis(props: Props) {
         title={`${title} (${visType.toLowerCase()})`}
         colorMap={colorMap}
         scaleType={scaleType}
-        layout={layout}
+        aspect={keepRatio ? 'equal' : 'auto'}
         showGrid={showGrid}
         invertColorMap={invertColorMap}
         abscissaParams={{

diff --git a/packages/app/src/vis-packs/core/heatmap/HeatmapToolbar.tsx b/packages/app/src/vis-packs/core/heatmap/HeatmapToolbar.tsx
@@ -33,21 +33,21 @@ function HeatmapToolbar(props: Props) {
     customDomain,
     colorMap,
     scaleType,
-    layout,
+    keepRatio,
     showGrid,
     invertColorMap,
     flipYAxis,
     setCustomDomain,
     setColorMap,
     setScaleType,
-    setLayout,
+    toggleKeepRatio,
     toggleGrid,
     toggleColorMapInversion,
     toggleYAxisFlip,
   } = config;
 
   return (
-    <Toolbar interactions={getImageInteractions(layout)}>
+    <Toolbar interactions={getImageInteractions(keepRatio)}>
       <DomainSlider
         dataDomain={dataDomain}
         customDomain={customDomain}
@@ -83,8 +83,8 @@ function HeatmapToolbar(props: Props) {
       <ToggleBtn
         label="Keep ratio"
         icon={MdAspectRatio}
-        value={layout === 'cover'}
-        onToggle={() => setLayout(layout === 'cover' ? 'fill' : 'cover')}
+        value={keepRatio}
+        onToggle={toggleKeepRatio}
       />
 
       <GridToggler value={showGrid} onToggle={toggleGrid} />

diff --git a/packages/app/src/vis-packs/core/heatmap/MappedHeatmapVis.tsx b/packages/app/src/vis-packs/core/heatmap/MappedHeatmapVis.tsx
@@ -37,7 +37,7 @@ function MappedHeatmapVis(props: Props) {
     customDomain,
     colorMap,
     scaleType,
-    layout,
+    keepRatio,
     showGrid,
     invertColorMap,
     flipYAxis,
@@ -80,7 +80,7 @@ function MappedHeatmapVis(props: Props) {
         domain={safeDomain}
         colorMap={colorMap}
         scaleType={scaleType}
-        layout={layout}
+        aspect={keepRatio ? 'equal' : 'auto'}
         showGrid={showGrid}
         invertColorMap={invertColorMap}
         abscissaParams={{

diff --git a/packages/app/src/vis-packs/core/heatmap/config.tsx b/packages/app/src/vis-packs/core/heatmap/config.tsx
@@ -1,4 +1,4 @@
-import type { CustomDomain, Layout } from '@h5web/lib';
+import type { CustomDomain } from '@h5web/lib';
 import { isDefined, ScaleType } from '@h5web/shared';
 import { useMap } from '@react-hookz/web';
 import type { StoreApi } from 'zustand';
@@ -25,8 +25,8 @@ export interface HeatmapConfig {
   showGrid: boolean;
   toggleGrid: () => void;
 
-  layout: Layout;
-  setLayout: (layout: Layout) => void;
+  keepRatio: boolean;
+  toggleKeepRatio: () => void;
 
   flipYAxis: boolean;
   toggleYAxisFlip: () => void;
@@ -55,8 +55,9 @@ function createStore() {
         showGrid: true,
         toggleGrid: () => set((state) => ({ showGrid: !state.showGrid })),
 
-        layout: 'cover',
-        setLayout: (layout: Layout) => set({ layout }),
+        keepRatio: true,
+        toggleKeepRatio: () =>
+          set((state) => ({ keepRatio: !state.keepRatio })),
 
         flipYAxis: false,
         toggleYAxisFlip: () =>
@@ -79,16 +80,18 @@ export function HeatmapConfigProvider(props: ConfigProviderProps) {
 
 export function useHeatmapConfig(
   initialSuggestedOpts: Partial<
-    Pick<HeatmapConfig, 'scaleType' | 'layout'>
+    Pick<HeatmapConfig, 'scaleType' | 'keepRatio'>
   > = {}
 ): HeatmapConfig {
   const suggestedOpts = useMap(
     Object.entries(initialSuggestedOpts).filter(([, val]) => isDefined(val))
   );
 
   const persistedConfig = useStore();
-  const { setScaleType: setPersistedScaleType, setLayout: setPersistedLayout } =
-    persistedConfig;
+  const {
+    setScaleType: setPersistedScaleType,
+    toggleKeepRatio: togglePersistedKeepRatio,
+  } = persistedConfig;
 
   return {
     ...persistedConfig,
@@ -97,9 +100,9 @@ export function useHeatmapConfig(
       setPersistedScaleType(scaleType);
       suggestedOpts.delete('scaleType');
     },
-    setLayout: (layout: Layout) => {
-      setPersistedLayout(layout);
-      suggestedOpts.delete('layout');
+    toggleKeepRatio: () => {
+      togglePersistedKeepRatio();
+      suggestedOpts.delete('keepRatio');
     },
   };
 }
diff --git a/packages/app/src/vis-packs/core/rgb/MappedRgbVis.tsx b/packages/app/src/vis-packs/core/rgb/MappedRgbVis.tsx
@@ -31,7 +31,7 @@ function MappedRgbVis(props: Props) {
     config,
   } = props;
 
-  const { showGrid, layout, imageType } = config;
+  const { showGrid, keepRatio, imageType } = config;
   const { shape: dims } = dataset;
 
   const [slicedDims, slicedMapping] = useSlicedDimsAndMapping(dims, dimMapping);
@@ -47,7 +47,7 @@ function MappedRgbVis(props: Props) {
         dataArray={dataArray}
         title={title}
         showGrid={showGrid}
-        layout={layout}
+        aspect={keepRatio ? 'equal' : 'auto'}
         imageType={imageType}
         abscissaParams={{
           label: axisLabels?.[xDimIndex],

diff --git a/packages/app/src/vis-packs/core/rgb/RgbToolbar.tsx b/packages/app/src/vis-packs/core/rgb/RgbToolbar.tsx
@@ -13,11 +13,17 @@ import { getImageInteractions } from '../utils';
 import { useRgbConfig } from './config';
 
 function RgbToolbar() {
-  const { layout, setLayout, showGrid, toggleGrid, imageType, setImageType } =
-    useRgbConfig((state) => state, shallow);
+  const {
+    imageType,
+    keepRatio,
+    showGrid,
+    setImageType,
+    toggleKeepRatio,
+    toggleGrid,
+  } = useRgbConfig((state) => state, shallow);
 
   return (
-    <Toolbar interactions={getImageInteractions(layout)}>
+    <Toolbar interactions={getImageInteractions(keepRatio)}>
       <ToggleGroup
         role="radiogroup"
         ariaLabel="Image type"
@@ -35,8 +41,8 @@ function RgbToolbar() {
       <ToggleBtn
         label="Keep ratio"
         icon={MdAspectRatio}
-        value={layout === 'cover'}
-        onToggle={() => setLayout(layout === 'cover' ? 'fill' : 'cover')}
+        value={keepRatio}
+        onToggle={toggleKeepRatio}
       />
 
       <GridToggler value={showGrid} onToggle={toggleGrid} />

diff --git a/packages/app/src/vis-packs/core/rgb/config.tsx b/packages/app/src/vis-packs/core/rgb/config.tsx
@@ -1,4 +1,3 @@
-import type { Layout } from '@h5web/lib';
 import { ImageType } from '@h5web/lib';
 import type { StoreApi } from 'zustand';
 import create from 'zustand';
@@ -11,8 +10,8 @@ export interface RgbVisConfig {
   showGrid: boolean;
   toggleGrid: () => void;
 
-  layout: Layout;
-  setLayout: (layout: Layout) => void;
+  keepRatio: boolean;
+  toggleKeepRatio: () => void;
 
   imageType: ImageType;
   setImageType: (channels: ImageType) => void;
@@ -25,8 +24,9 @@ function createStore() {
         showGrid: false,
         toggleGrid: () => set((state) => ({ showGrid: !state.showGrid })),
 
-        layout: 'cover',
-        setLayout: (layout: Layout) => set({ layout }),
+        keepRatio: true,
+        toggleKeepRatio: () =>
+          set((state) => ({ keepRatio: !state.keepRatio })),
 
         imageType: ImageType.RGB,
         setImageType: (imageType: ImageType) => set({ imageType }),

diff --git a/packages/app/src/vis-packs/core/utils.ts b/packages/app/src/vis-packs/core/utils.ts
@@ -1,4 +1,3 @@
-import type { Layout } from '@h5web/lib';
 import type { Domain } from '@h5web/shared';
 import { createArrayFromView } from '@h5web/shared';
 import { isNumber } from 'lodash';
@@ -81,6 +80,6 @@ export function getSliceSelection(
   return dimMapping.map((dim) => (isAxis(dim) ? ':' : dim)).join(',');
 }
 
-export function getImageInteractions(layout: Layout) {
-  return layout === 'fill' ? INTERACTIONS_WITH_AXIAL_ZOOM : BASE_INTERACTIONS;
+export function getImageInteractions(keepRatio: boolean) {
+  return keepRatio ? INTERACTIONS_WITH_AXIAL_ZOOM : BASE_INTERACTIONS;
 }
diff --git a/packages/app/src/vis-packs/nexus/containers/NxComplexImageContainer.tsx b/packages/app/src/vis-packs/nexus/containers/NxComplexImageContainer.tsx
@@ -10,7 +10,7 @@ import { getSliceSelection } from '../../core/utils';
 import type { VisContainerProps } from '../../models';
 import NxValuesFetcher from '../NxValuesFetcher';
 import { useNxData } from '../hooks';
-import { assertComplexSignal, getBestLayout } from '../utils';
+import { assertComplexSignal, guessKeepRatio } from '../utils';
 
 function NxComplexImageContainer(props: VisContainerProps) {
   const { entity, toolbarContainer } = props;
@@ -30,7 +30,7 @@ function NxComplexImageContainer(props: VisContainerProps) {
   const config = useComplexConfig();
   const heatmapConfig = useHeatmapConfig({
     scaleType: silxStyle.signalScaleType,
-    layout: getBestLayout(xAxisDef, yAxisDef),
+    keepRatio: guessKeepRatio(xAxisDef, yAxisDef),
   });
 
   return (

diff --git a/packages/app/src/vis-packs/nexus/containers/NxImageContainer.tsx b/packages/app/src/vis-packs/nexus/containers/NxImageContainer.tsx
@@ -9,7 +9,7 @@ import { getSliceSelection } from '../../core/utils';
 import type { VisContainerProps } from '../../models';
 import NxValuesFetcher from '../NxValuesFetcher';
 import { useNxData } from '../hooks';
-import { assertNumericSignal, getBestLayout } from '../utils';
+import { assertNumericSignal, guessKeepRatio } from '../utils';
 
 function NxImageContainer(props: VisContainerProps) {
   const { entity, toolbarContainer } = props;
@@ -28,7 +28,7 @@ function NxImageContainer(props: VisContainerProps) {
 
   const config = useHeatmapConfig({
     scaleType: silxStyle.signalScaleType,
-    layout: getBestLayout(xAxisDef, yAxisDef),
+    keepRatio: guessKeepRatio(xAxisDef, yAxisDef),
   });
 
   return (