fix: fix storybook by wrapping all Vis in VisProvider (#101)

### Summary of changes - fixed storybook build for `vis` - centered loader for bar chart - show description in correlation matrix column labels (covers bioinsight use case) ### Screenshots ![image](https://github.com/datavisyn/visyn_core/assets/101096478/2d83d697-3047-42e9-98d2-c9440beb72f6)
datavisyn · Nov 6, 2023 · e465ea2 · e465ea2
2 parents 1436d5a + 519b0ff
commit e465ea2
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 40 deletions.
diff --git a/src/vis/bar/BarChart.tsx b/src/vis/bar/BarChart.tsx
@@ -1,4 +1,4 @@
-import { Box, Loader, SimpleGrid, Stack } from '@mantine/core';
+import { Box, Loader, SimpleGrid, Stack, Center } from '@mantine/core';
 import { op } from 'arquero';
 import React, { useCallback, useMemo } from 'react';
 import { useAsync } from '../../hooks/useAsync';
@@ -97,7 +97,9 @@ export function BarChart({
       </Box>
       <SimpleGrid cols={Math.round(Math.sqrt(uniqueMultiplesVals.length))} spacing={0} style={{ height: 'inherit', overflow: 'hidden' }}>
         {colsStatus !== 'success' ? (
-          <Loader />
+          <Center>
+            <Loader />
+          </Center>
         ) : !config.multiples || !allColumns.multiplesColVals ? (
           <SingleBarChart
             config={config}

diff --git a/src/vis/correlation/CorrelationMatrix.tsx b/src/vis/correlation/CorrelationMatrix.tsx
@@ -1,4 +1,4 @@
-import { Box, Center, Group, Loader, Stack, Text } from '@mantine/core';
+import { Box, Center, Group, Loader, Stack, Text, Tooltip } from '@mantine/core';
 import { useResizeObserver } from '@mantine/hooks';
 import * as d3 from 'd3v7';
 import { scaleBand } from 'd3v7';
@@ -144,9 +144,32 @@ export function CorrelationMatrix({ config, columns }: { config: ICorrelationCon
           <rect stroke="lightgray" strokeWidth={1} fill="none" x={currentX} y={currentY} width={xScale.bandwidth()} height={yScale.bandwidth()} />
           <foreignObject x={currentX} y={currentY} width={xScale.bandwidth()} height={yScale.bandwidth()}>
             <Center style={{ height: '100%' }} px={5}>
-              <Text size={14} weight={600} style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }}>
-                {col.info.name}
-              </Text>
+              <Tooltip
+                label={
+                  <Stack spacing={0}>
+                    <Text>{col.info.name}</Text>
+                    {col.info.description && (
+                      <Text size="xs" color="dimmed">
+                        {col.info.description}
+                      </Text>
+                    )}
+                  </Stack>
+                }
+                arrowSize={6}
+                withinPortal
+                withArrow
+              >
+                <Stack spacing={0}>
+                  <Text size={14} weight={600} style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }}>
+                    {col.info.name}
+                  </Text>
+                  {col.info.description && (
+                    <Text size="sm" color="dimmed" style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }}>
+                      {col.info.description}
+                    </Text>
+                  )}
+                </Stack>
+              </Tooltip>
             </Center>
           </foreignObject>
         </g>

diff --git a/src/vis/sidebar/VisTypeSelect.tsx b/src/vis/sidebar/VisTypeSelect.tsx
@@ -15,6 +15,7 @@ interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
   description: string;
 }
 
+// eslint-disable-next-line react/display-name
 const SelectItem = React.forwardRef<HTMLDivElement, ItemProps>(({ image, label, description, ...others }: ItemProps, ref) => (
   <div ref={ref} {...others}>
     <Text size="sm">{label}</Text>
@@ -24,8 +25,6 @@ const SelectItem = React.forwardRef<HTMLDivElement, ItemProps>(({ image, label,
   </div>
 ));
 
-SelectItem.displayName = '@mantine/core/SelectItem';
-
 export function VisTypeSelect({ callback, currentSelected }: VisTypeSelectProps) {
   const { visTypes, getVisByType } = useVisProvider();
 

diff --git a/src/vis/stories/Vis/Bar/BarRandom.stories.tsx b/src/vis/stories/Vis/Bar/BarRandom.stories.tsx
@@ -1,6 +1,7 @@
 import { ComponentStory } from '@storybook/react';
 import React from 'react';
 import { Vis } from '../../../LazyVis';
+import { VisProvider } from '../../../Provider';
 import { EBarDirection, EBarDisplayType, EBarGroupingType } from '../../../bar/interfaces';
 import { BaseVisConfig, EAggregateTypes, EColumnTypes, ESupportedPlotlyVis, VisColumn } from '../../../interfaces';
 
@@ -119,11 +120,13 @@ const Template: ComponentStory<typeof Vis> = (args) => {
   const columns = React.useMemo(() => fetchData(args.pointCount), [args.pointCount]);
 
   return (
-    <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
-      <div style={{ width: '70%', height: '80%' }}>
-        <Vis {...args} columns={columns} />
+    <VisProvider>
+      <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
+        <div style={{ width: '70%', height: '80%' }}>
+          <Vis {...args} columns={columns} />
+        </div>
       </div>
-    </div>
+    </VisProvider>
   );
 };
 // More on args: https://storybook.js.org/docs/react/writing-stories/args

diff --git a/src/vis/stories/Vis/Correlation/CorrelationIris.stories.tsx b/src/vis/stories/Vis/Correlation/CorrelationIris.stories.tsx
@@ -1,6 +1,7 @@
 import { ComponentStory } from '@storybook/react';
 import React, { useState } from 'react';
 import { Vis } from '../../../LazyVis';
+import { VisProvider } from '../../../Provider';
 import { ECorrelationType } from '../../../correlation/interfaces';
 import { BaseVisConfig, EScaleType, ESupportedPlotlyVis } from '../../../interfaces';
 import { fetchIrisData } from '../../fetchIrisData';
@@ -22,11 +23,13 @@ const Template: ComponentStory<typeof Vis> = (args) => {
 
   const [selection, setSelection] = useState<string[]>([]);
   return (
-    <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
-      <div style={{ width: '70%', height: '80%' }}>
-        <Vis {...args} columns={columns} selected={selection} selectionCallback={setSelection} />
+    <VisProvider>
+      <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
+        <div style={{ width: '70%', height: '80%' }}>
+          <Vis {...args} columns={columns} selected={selection} selectionCallback={setSelection} />
+        </div>
       </div>
-    </div>
+    </VisProvider>
   );
 };
 

diff --git a/src/vis/stories/Vis/Heatmap/HeatmapRandom.stories.tsx b/src/vis/stories/Vis/Heatmap/HeatmapRandom.stories.tsx
@@ -2,6 +2,7 @@ import { ComponentStory } from '@storybook/react';
 import * as d3 from 'd3v7';
 import React from 'react';
 import { Vis } from '../../../LazyVis';
+import { VisProvider } from '../../../Provider';
 import { ESortTypes } from '../../../heatmap/interfaces';
 import { BaseVisConfig, EAggregateTypes, EColumnTypes, ENumericalColorScaleType, ESupportedPlotlyVis, VisColumn } from '../../../interfaces';
 
@@ -125,11 +126,13 @@ const Template: ComponentStory<typeof Vis> = (args) => {
   const [selected, setSelected] = React.useState<string[]>([]);
 
   return (
-    <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
-      <div style={{ width: '70%', height: '80%' }}>
-        <Vis {...args} selected={selected} selectionCallback={setSelected} columns={columns} />
+    <VisProvider>
+      <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
+        <div style={{ width: '70%', height: '80%' }}>
+          <Vis {...args} selected={selected} selectionCallback={setSelected} columns={columns} />
+        </div>
       </div>
-    </div>
+    </VisProvider>
   );
 };
 // More on args: https://storybook.js.org/docs/react/writing-stories/args

diff --git a/src/vis/stories/Vis/Hexbin/HexbinRandom.stories.tsx b/src/vis/stories/Vis/Hexbin/HexbinRandom.stories.tsx
@@ -1,6 +1,7 @@
 import { ComponentStory } from '@storybook/react';
 import React from 'react';
 import { Vis } from '../../../LazyVis';
+import { VisProvider } from '../../../Provider';
 import { EHexbinOptions } from '../../../hexbin/interfaces';
 import { BaseVisConfig, EColumnTypes, EScatterSelectSettings, ESupportedPlotlyVis, VisColumn } from '../../../interfaces';
 
@@ -96,11 +97,13 @@ const Template: ComponentStory<typeof Vis> = (args) => {
   const columns = React.useMemo(() => fetchData(args.pointCount), [args.pointCount]);
 
   return (
-    <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
-      <div style={{ width: '70%', height: '80%' }}>
-        <Vis {...args} columns={columns} />
+    <VisProvider>
+      <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
+        <div style={{ width: '70%', height: '80%' }}>
+          <Vis {...args} columns={columns} />
+        </div>
       </div>
-    </div>
+    </VisProvider>
   );
 };
 // More on args: https://storybook.js.org/docs/react/writing-stories/args

diff --git a/src/vis/stories/Vis/Raincloud/RaincloudRandom.stories.tsx b/src/vis/stories/Vis/Raincloud/RaincloudRandom.stories.tsx
@@ -1,6 +1,7 @@
 import { ComponentStory } from '@storybook/react';
 import React from 'react';
 import { Vis } from '../../../LazyVis';
+import { VisProvider } from '../../../Provider';
 import { BaseVisConfig, EColumnTypes, ESupportedPlotlyVis, VisColumn } from '../../../interfaces';
 import { ECloudType, ELightningType, ERainType } from '../../../raincloud/interfaces';
 
@@ -128,11 +129,13 @@ const Template: ComponentStory<typeof Vis> = (args) => {
   const [selected, setSelected] = React.useState<string[]>([]);
 
   return (
-    <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
-      <div style={{ width: '70%', height: '80%' }}>
-        <Vis {...args} columns={columns} selected={selected} selectionCallback={setSelected} />
+    <VisProvider>
+      <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
+        <div style={{ width: '70%', height: '80%' }}>
+          <Vis {...args} columns={columns} selected={selected} selectionCallback={setSelected} />
+        </div>
       </div>
-    </div>
+    </VisProvider>
   );
 };
 // More on args: https://storybook.js.org/docs/react/writing-stories/args

diff --git a/src/vis/stories/Vis/Scatter/ScatterIris.stories.tsx b/src/vis/stories/Vis/Scatter/ScatterIris.stories.tsx
@@ -1,6 +1,7 @@
 import { ComponentStory } from '@storybook/react';
 import React, { useState } from 'react';
 import { Vis } from '../../../LazyVis';
+import { VisProvider } from '../../../Provider';
 import { BaseVisConfig, ENumericalColorScaleType, EScatterSelectSettings, ESupportedPlotlyVis } from '../../../interfaces';
 import { fetchIrisData } from '../../fetchIrisData';
 
@@ -18,11 +19,13 @@ const Template: ComponentStory<typeof Vis> = (args) => {
 
   const [selection, setSelection] = useState<string[]>([]);
   return (
-    <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
-      <div style={{ width: '70%', height: '80%' }}>
-        <Vis columns={columns} selected={selection} selectionCallback={setSelection} />
+    <VisProvider>
+      <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
+        <div style={{ width: '70%', height: '80%' }}>
+          <Vis columns={columns} selected={selection} selectionCallback={setSelection} />
+        </div>
       </div>
-    </div>
+    </VisProvider>
   );
 };
 

diff --git a/src/vis/stories/Vis/Scatter/ScatterRandom.stories.tsx b/src/vis/stories/Vis/Scatter/ScatterRandom.stories.tsx
@@ -1,6 +1,7 @@
 import { ComponentStory } from '@storybook/react';
 import React from 'react';
 import { Vis } from '../../../LazyVis';
+import { VisProvider } from '../../../Provider';
 import { BaseVisConfig, EColumnTypes, ENumericalColorScaleType, EScatterSelectSettings, ESupportedPlotlyVis, VisColumn } from '../../../interfaces';
 
 function RNG(seed) {
@@ -107,11 +108,13 @@ const Template: ComponentStory<typeof Vis> = (args) => {
   const [selected, setSelected] = React.useState<string[]>([]);
 
   return (
-    <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
-      <div style={{ width: '70%', height: '80%' }}>
-        <Vis {...args} selected={selected} selectionCallback={setSelected} columns={columns} />
+    <VisProvider>
+      <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
+        <div style={{ width: '70%', height: '80%' }}>
+          <Vis {...args} selected={selected} selectionCallback={setSelected} columns={columns} />
+        </div>
       </div>
-    </div>
+    </VisProvider>
   );
 };
 // More on args: https://storybook.js.org/docs/react/writing-stories/args

diff --git a/src/vis/stories/Vis/Violin/ViolinIris.stories.tsx b/src/vis/stories/Vis/Violin/ViolinIris.stories.tsx
@@ -1,6 +1,7 @@
 import { ComponentStory } from '@storybook/react';
 import React from 'react';
 import { Vis } from '../../../LazyVis';
+import { VisProvider } from '../../../Provider';
 import { BaseVisConfig, ESupportedPlotlyVis } from '../../../interfaces';
 import { EViolinOverlay } from '../../../violin/interfaces';
 import { fetchIrisData } from '../../fetchIrisData';
@@ -17,11 +18,13 @@ export default {
 const Template: ComponentStory<typeof Vis> = (args) => {
   const columns = React.useMemo(() => fetchIrisData(), []);
   return (
-    <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
-      <div style={{ width: '70%', height: '80%' }}>
-        <Vis {...args} columns={columns} />
+    <VisProvider>
+      <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
+        <div style={{ width: '70%', height: '80%' }}>
+          <Vis {...args} columns={columns} />
+        </div>
       </div>
-    </div>
+    </VisProvider>
   );
 };