fix vis storybook

datavisyn · Oct 17, 2023 · ba8dc75 · ba8dc75
1 parent 36e1da3
commit ba8dc75
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 34 deletions.
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>
   );
 };