Merge branch 'mh/pixel_perfect_canvas' of github.com:datavisyn/visyn_…

…core into mh/pixel_perfect_canvas
datavisyn · Nov 25, 2024 · d400c03 · d400c03
2 parents 63d0b62 + 7732838
commit d400c03
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 39 deletions.
diff --git a/src/icons/Icons.tsx b/src/icons/Icons.tsx
@@ -216,6 +216,70 @@ export const dvNumericCol: IconDefinition = {
   ],
 };
 
+export const dvNumberArrayCol: IconDefinition = {
+  prefix: 'dv' as IconPrefix,
+  iconName: 'numberArrayCol' as IconName,
+  icon: [
+    512,
+    312,
+    [],
+    '',
+    `M0 312V0H83.4854V33.28H41.0103V278.72H83.4854V312H0Z
+    M80.0617 250.187V216.907H123.123V102.923L90.6072 115.403L76.5465 82.9547L138.648 58.8267H169.992V216.907H210.709V250.187H80.0617Z
+    M232.857 301.493L246.332 252.128C241.45 250.649 237.251 247.876 233.736 243.808C230.221 239.556 228.463 234.286 228.463 228C228.463 220.604 231.002 214.503 236.08 209.696C241.352 204.889 247.992 202.485 255.999 202.485C264.006 202.485 270.548 204.981 275.625 209.973C280.898 214.78 283.534 221.067 283.534 228.832C283.534 234.564 282.753 239.925 281.191 244.917C279.629 249.909 277.285 256.196 274.161 263.776L258.635 301.493H232.857Z
+    M293.002 85.1733C299.642 79.4418 306.867 74.3573 314.679 69.92C322.49 65.4827 330.888 61.9698 339.871 59.3813C348.854 56.7929 358.326 55.4987 368.285 55.4987C381.565 55.4987 393.477 58.0871 404.023 63.264C414.568 68.256 422.868 75.0969 428.922 83.7867C434.976 92.4764 438.003 102.368 438.003 113.461C438.003 122.151 436.343 130.471 433.023 138.421C429.898 146.187 424.821 154.137 417.791 162.272C410.76 170.222 401.582 179.004 390.255 188.619L363.013 211.36H440.932V250.187H296.224V221.067L361.841 160.331C368.481 154.229 373.851 148.775 377.952 143.968C382.053 139.161 385.08 134.724 387.033 130.656C388.986 126.588 389.962 122.706 389.962 119.008C389.962 114.756 388.888 110.965 386.74 107.637C384.787 104.124 381.858 101.351 377.952 99.3173C374.046 97.2836 369.066 96.2667 363.013 96.2667C357.74 96.2667 352.565 97.1911 347.487 99.04C342.41 100.704 337.43 103.108 332.548 106.251C327.861 109.394 323.174 113.092 318.487 117.344L293.002 85.1733Z
+    M428.515 312V278.72H470.99V33.28H428.515V0H512V312H428.515Z`,
+  ],
+};
+
+export const dvStringArrayCol: IconDefinition = {
+  prefix: 'dv' as IconPrefix,
+  iconName: 'stringArrayCol' as IconName,
+  icon: [
+    512,
+    307,
+    [],
+    '',
+    `M0 307.5V0.5H78.4862V33.2467H38.5546V274.753H78.4862V307.5H0Z
+    M51.0333 246.998L120.156 58.7044H162.566L231.689 246.998H184.873L168.9 199.515L192.309 209.885H89.3125L111.895 201.698L96.7481 246.998H51.0333ZM114.373 193.784L100.879 175.228H180.742L167.248 193.784L134.477 96.636H147.144L114.373 193.784Z
+    M234.512 297.482L247.18 248.908C242.59 247.453 238.643 244.724 235.338 240.721C232.034 236.537 230.381 231.352 230.381 225.167C230.381 217.89 232.768 211.886 237.541 207.156C242.498 202.426 248.741 200.061 256.268 200.061C263.795 200.061 269.946 202.517 274.719 207.429C279.676 212.159 282.155 218.344 282.155 225.985C282.155 231.625 281.42 236.901 279.951 241.813C278.483 246.725 276.28 252.91 273.342 260.369L258.746 297.482H234.512Z
+    M304.274 246.998V58.7044H375.049C387.166 58.7044 397.999 60.7966 407.545 64.9809C417.276 68.9833 424.895 74.7139 430.403 82.1729C436.094 89.6319 438.94 98.6372 438.94 109.189C438.94 118.103 436.92 125.835 432.881 132.384C428.842 138.752 423.334 143.937 416.358 147.939C426.088 152.305 433.616 158.582 438.94 166.768C444.448 174.773 447.202 184.233 447.202 195.149C447.202 205.883 444.264 215.161 438.389 222.984C432.698 230.806 424.895 236.81 414.981 240.994C405.25 244.997 394.235 246.998 381.934 246.998H304.274ZM348.336 210.431H377.803C385.147 210.431 391.022 208.702 395.428 205.246C400.018 201.607 402.313 196.331 402.313 189.418C402.313 182.505 400.018 177.32 395.428 173.864C391.022 170.225 385.147 168.406 377.803 168.406H348.336V210.431ZM348.336 134.568H372.295C379.272 134.568 384.872 132.93 389.094 129.656C393.317 126.199 395.428 121.287 395.428 114.92C395.428 108.552 393.317 103.731 389.094 100.456C384.872 96.9998 379.272 95.2715 372.295 95.2715H348.336V134.568Z
+    M433.514 307.5V274.753H473.445V33.2467H433.514V0.5H512V307.5H433.514Z`,
+  ],
+};
+
+export const dvBooleanArrayCol: IconDefinition = {
+  prefix: 'dv' as IconPrefix,
+  iconName: 'booleanArrayCol' as IconName,
+  icon: [
+    512,
+    308,
+    [],
+    '',
+    `M0 307.5V0.5H78.4862V33.2467H38.5546V274.753H78.4862V307.5H0Z
+    M234.512 297.482L247.18 248.908C242.59 247.453 238.643 244.724 235.338 240.721C232.034 236.537 230.381 231.352 230.381 225.167C230.381 217.89 232.768 211.886 237.541 207.156C242.498 202.426 248.741 200.061 256.268 200.061C263.795 200.061 269.946 202.517 274.719 207.429C279.676 212.159 282.155 218.344 282.155 225.985C282.155 231.625 281.42 236.901 279.951 241.813C278.483 246.725 276.28 252.91 273.342 260.369L258.746 297.482H234.512Z
+    M433.514 307.5V274.753H473.445V33.2467H433.514V0.5H512V307.5H433.514Z
+    M150 68C196.956 68 235 106.044 235 153C235 199.956 196.956 238 150 238C103.044 238 65 199.956 65 153C65 106.044 103.044 68 150 68Z
+    M452 153C452 103.283 411.717 63 362 63C312.283 63 272 103.283 272 153C272 202.717 312.283 243 362 243C411.717 243 452 202.717 452 153ZM425.548 153C425.548 188.267 396.956 216.548 362 216.548C326.717 216.548 298.452 188.283 298.452 153C298.452 118.044 326.733 89.4516 362 89.4516C396.94 89.4516 425.548 118.06 425.548 153Z`,
+  ],
+};
+
+export const dvCategoricalArrayCol: IconDefinition = {
+  prefix: 'dv' as IconPrefix,
+  iconName: 'categoricalArrayCol' as IconName,
+  icon: [
+    512,
+    307,
+    [],
+    '',
+    `M0 307.5V0.5H78.4862V33.2467H38.5546V274.753H78.4862V307.5H0Z
+    M246.512 297.482L259.18 248.908C254.59 247.453 250.643 244.724 247.338 240.721C244.034 236.537 242.381 231.352 242.381 225.167C242.381 217.89 244.768 211.886 249.541 207.156C254.498 202.426 260.741 200.061 268.268 200.061C275.795 200.061 281.946 202.517 286.719 207.429C291.676 212.159 294.155 218.344 294.155 225.985C294.155 231.625 293.42 236.901 291.951 241.813C290.483 246.725 288.28 252.91 285.342 260.369L270.746 297.482H246.512Z
+    M433.514 307.5V274.753H473.445V33.2467H433.514V0.5H512V307.5H433.514Z
+    M65 103.786C65 89.0536 76.3839 77 91.7857 77H188.214C202.946 77 215 89.0536 215 103.786V200.214C215 215.616 202.946 227 188.214 227H91.7857C76.3839 227 65 215.616 65 200.214V103.786Z
+    M436.286 65.4136C429.589 61.2008 421.554 61.2008 414.857 65.4136L307.714 132.818C301.018 137.031 297 144.052 297 151.776C297 160.202 301.018 167.223 307.714 171.436L414.857 238.84C421.554 243.053 429.589 243.053 436.286 238.84C442.982 235.33 447 227.606 447 219.181L447 84.3712C447 76.6477 442.982 68.9242 436.286 65.4136Z`,
+  ],
+};
+
 export const dvSortAsc: IconDefinition = {
   prefix: 'dv' as IconPrefix,
   iconName: 'sortAsc' as IconName,

diff --git a/src/vis/scatter/useLayout.tsx b/src/vis/scatter/useLayout.tsx
@@ -103,12 +103,12 @@ export function useLayout({
         axes[`xaxis${plotCounter > 0 ? plotCounter + 1 : ''}`] = {
           ...AXIS_TICK_STYLES,
           range: toLogRange(config.xAxisScale!, pair.xDomain),
-          type: config.xAxisScale,
           // Spread the previous layout to keep things like zoom
           ...(internalLayoutRef.current?.[`xaxis${plotCounter > 0 ? plotCounter + 1 : ''}` as 'xaxis'] || {}),
+          type: config.xAxisScale,
           title: {
-            text: textMeasure.textEllipsis(pair.xTitle, xTitleSize),
-            standoff: 0,
+            text: subplots.xyPairs.length > 1 ? textMeasure.textEllipsis(pair.xTitle, xTitleSize) : pair.xTitle,
+            standoff: subplots.xyPairs.length > 1 ? 0 : undefined,
             font: {
               size: 12,
               color: VIS_NEUTRAL_COLOR,
@@ -118,15 +118,15 @@ export function useLayout({
         axes[`yaxis${plotCounter > 0 ? plotCounter + 1 : ''}`] = {
           ...AXIS_TICK_STYLES,
           range: toLogRange(config.yAxisScale!, pair.yDomain),
-          type: config.yAxisScale,
           // Spread the previous layout to keep things like zoom
           ...(internalLayoutRef.current?.[`yaxis${plotCounter > 0 ? plotCounter + 1 : ''}` as 'yaxis'] || {}),
+          type: config.yAxisScale,
           title: {
             font: {
               size: 12,
               color: VIS_NEUTRAL_COLOR,
             },
-            text: textMeasure.textEllipsis(pair.yTitle, yTitleSize),
+            text: subplots.xyPairs.length > 1 ? textMeasure.textEllipsis(pair.yTitle, yTitleSize) : pair.yTitle,
           },
         };
 
@@ -149,37 +149,17 @@ export function useLayout({
       });
 
       // if we only find one facet (e.g., the categorical column only contains one value), we don't facet
-      const finalLayout: Partial<PlotlyTypes.Layout> =
-        subplots.xyPairs.length > 1
-          ? {
-              ...BASE_LAYOUT,
-              ...(internalLayoutRef.current || {}),
-              grid: { rows: nRows, columns: nColumns, xgap: xGap, ygap: yGap, pattern: 'independent' },
-              ...axes,
-              annotations: [...titleAnnotations, ...regressions.annotations],
-              shapes: regressions.shapes,
-              dragmode: config!.dragMode,
-              width,
-              height,
-            }
-          : {
-              ...BASE_LAYOUT,
-              xaxis: {
-                ...AXIS_TICK_STYLES,
-                ...internalLayoutRef.current?.xaxis,
-                title: subplots.xyPairs[0]!.xTitle,
-              },
-              yaxis: {
-                ...AXIS_TICK_STYLES,
-                ...internalLayoutRef.current?.yaxis,
-                title: subplots.xyPairs[0]!.yTitle,
-              },
-              shapes: regressions.shapes,
-              annotations: [...regressions.annotations],
-              dragmode: config.dragMode,
-              width,
-              height,
-            };
+      const finalLayout: Partial<PlotlyTypes.Layout> = {
+        ...BASE_LAYOUT,
+        ...(internalLayoutRef.current || {}),
+        ...(subplots.xyPairs.length > 1 ? { grid: { rows: nRows, columns: nColumns, xgap: xGap, ygap: yGap, pattern: 'independent' } } : {}),
+        ...axes,
+        annotations: [...titleAnnotations, ...regressions.annotations],
+        shapes: regressions.shapes,
+        dragmode: config.dragMode,
+        width,
+        height,
+      };
 
       return finalLayout;
     }

diff --git a/src/vis/stories/Vis/Scatter/ScatterIris.stories.tsx b/src/vis/stories/Vis/Scatter/ScatterIris.stories.tsx
@@ -152,6 +152,8 @@ ControlledSubplots.args = {
         title: 'Petal Length vs Petal Width',
       },
     ],
+    xAxisScale: 'log',
+    yAxisScale: 'log',
     facets: null,
     numColorScaleType: ENumericalColorScaleType.SEQUENTIAL,
     shape: null,
@@ -168,6 +170,43 @@ ControlledSubplots.args = {
   },
 };
 
+export const ControlledSingleSubplot: typeof Template = Template.bind({}) as typeof Template;
+ControlledSingleSubplot.args = {
+  externalConfig: {
+    type: ESupportedPlotlyVis.SCATTER,
+    color: null,
+    subplots: [
+      {
+        xColumn: {
+          description: '',
+          id: 'incompleteX',
+          name: 'Incomplete X',
+        },
+        yColumn: {
+          description: '',
+          id: 'incompleteY',
+          name: 'Incomplete Y',
+        },
+        title: 'Nicer Title',
+      },
+    ],
+    xAxisScale: 'log',
+    yAxisScale: 'log',
+    facets: null,
+    numColorScaleType: ENumericalColorScaleType.SEQUENTIAL,
+    shape: null,
+    dragMode: EScatterSelectSettings.RECTANGLE,
+    alphaSliderVal: 1,
+    showLabels: ELabelingOptions.NEVER,
+    regressionLineOptions: {
+      type: ERegressionLineType.NONE,
+    },
+  } as IScatterConfig,
+  filterCallback: (option) => {
+    console.log({ option });
+  },
+};
+
 export const ColorByCategory: typeof Template = Template.bind({}) as typeof Template;
 ColorByCategory.args = {
   externalConfig: {

diff --git a/src/vis/stories/fetchIrisData.tsx b/src/vis/stories/fetchIrisData.tsx
@@ -1,6 +1,15 @@
 import { EColumnTypes, VisColumn } from '../interfaces';
 import { iris as dataPromise } from './irisData';
 
+function randomNumberBetweenRange(min: number, max: number): number | null {
+  // Return null for some random values
+  if (Math.random() < 0.1) {
+    return null;
+  }
+
+  return Math.random() * (max - min) + min;
+}
+
 export function fetchIrisData(): VisColumn[] {
   return [
     {
@@ -73,5 +82,23 @@ export function fetchIrisData(): VisColumn[] {
       type: EColumnTypes.CATEGORICAL,
       values: () => dataPromise.map((r) => r.species).map((val, i) => ({ id: i.toString(), val: val ?? null })),
     },
+    {
+      info: {
+        description: 'Incomplete X',
+        id: 'incompleteX',
+        name: 'Incomplete X',
+      },
+      type: EColumnTypes.NUMERICAL,
+      values: () => dataPromise.map((val, i) => ({ id: i.toString(), val: randomNumberBetweenRange(0.96499999997, 1.3850000003299998) })),
+    },
+    {
+      info: {
+        description: 'Incomplete Y',
+        id: 'incompleteY',
+        name: 'Incomplete Y',
+      },
+      type: EColumnTypes.NUMERICAL,
+      values: () => dataPromise.map((val, i) => ({ id: i.toString(), val: randomNumberBetweenRange(-1.5419997517300001, 28.96199726903) })),
+    },
   ];
 }
diff --git a/src/vis/vishooks/hooks/useCanvas.ts b/src/vis/vishooks/hooks/useCanvas.ts
@@ -38,7 +38,7 @@ export function useCanvas<ContextId extends '2d' | 'webgl' | 'bitmaprenderer' |
 
           if ('devicePixelContentBoxSize' in entry && entry.devicePixelContentBoxSize?.[0]) {
             // Feature is present
-            const { inlineSize, blockSize } = entry.devicePixelContentBoxSize[0]!;
+            const { inlineSize, blockSize } = entry.devicePixelContentBoxSize[0];
 
             pixelContentWidth = inlineSize;
             pixelContentHeight = blockSize;
@@ -76,12 +76,12 @@ export function useCanvas<ContextId extends '2d' | 'webgl' | 'bitmaprenderer' |
     contentHeight: state.height,
 
     /**
-     * @deprecated Use pixelContentWidth and pixelContentHeight instead
+     * @deprecated Use `pixelContentWidth` instead
      */
     width: state.pixelContentWidth,
 
     /**
-     * @deprecated Use pixelContentWidth and pixelContentHeight instead
+     * @deprecated Use `pixelContentHeight` instead
      */
     height: state.pixelContentHeight,