fixed some tooltip

datavisyn · Sep 13, 2023 · 2380707 · 2380707
1 parent 1ceac17
commit 2380707
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 21 deletions.
diff --git a/src/vis/EagerVis.tsx b/src/vis/EagerVis.tsx
@@ -39,8 +39,8 @@ import { IHexbinConfig } from './hexbin/interfaces';
 import { hexinbMergeDefaultConfig } from './hexbin/utils';
 import { RaincloudVis } from './raincloud/RaincloudVis';
 import { RaincloudVisSidebar } from './raincloud/RaincloudVisSidebar';
-import { raincloudMergeDefaultConfig } from './raincloud/utils';
 import { IRaincloudConfig } from './raincloud/interfaces';
+import { raincloudMergeDefaultConfig } from './raincloud/utils';
 import { SankeyVis } from './sankey/SankeyVis';
 import { SankeyVisSidebar } from './sankey/SankeyVisSidebar';
 import { ISankeyConfig } from './sankey/interfaces';
@@ -57,14 +57,62 @@ const DEFAULT_SHAPES = ['circle', 'square', 'triangle-up', 'star'];
 
 function registerAllVis() {
   return [
-    createVis(ESupportedPlotlyVis.SCATTER, ScatterVis, ScatterVisSidebar, scatterMergeDefaultConfig),
-    createVis(ESupportedPlotlyVis.BAR, BarVis, BarVisSidebar, barMergeDefaultConfig),
-    createVis(ESupportedPlotlyVis.HEXBIN, HexbinVis, HexbinVisSidebar, hexinbMergeDefaultConfig),
-    createVis(ESupportedPlotlyVis.SANKEY, SankeyVis, SankeyVisSidebar, sankeyMergeDefaultConfig),
-    createVis(ESupportedPlotlyVis.HEATMAP, HeatmapVis, HeatmapVisSidebar, heatmapMergeDefaultConfig),
-    createVis(ESupportedPlotlyVis.VIOLIN, ViolinVis, ViolinVisSidebar, violinMergeDefaultConfig),
-    createVis(ESupportedPlotlyVis.RAINCLOUD, RaincloudVis, RaincloudVisSidebar, raincloudMergeDefaultConfig),
-    createVis(ESupportedPlotlyVis.CORRELATION, CorrelationVis, CorrelationVisSidebar, correlationMergeDefaultConfig),
+    createVis({
+      type: ESupportedPlotlyVis.SCATTER,
+      renderer: ScatterVis,
+      sidebarRenderer: ScatterVisSidebar,
+      mergeConfig: scatterMergeDefaultConfig,
+      description: 'Visualizes two variables as individual data points in two-dimensional space',
+    }),
+    createVis({
+      type: ESupportedPlotlyVis.BAR,
+      renderer: BarVis,
+      sidebarRenderer: BarVisSidebar,
+      mergeConfig: barMergeDefaultConfig,
+      description: 'Visualizes categorical data with rectangular bars',
+    }),
+    createVis({
+      type: ESupportedPlotlyVis.HEXBIN,
+      renderer: HexbinVis,
+      sidebarRenderer: HexbinVisSidebar,
+      mergeConfig: hexinbMergeDefaultConfig,
+      description: 'Visualizes 2D data points within hexagons',
+    }),
+    createVis({
+      type: ESupportedPlotlyVis.SANKEY,
+      renderer: SankeyVis,
+      sidebarRenderer: SankeyVisSidebar,
+      mergeConfig: sankeyMergeDefaultConfig,
+      description: 'Visualizes the flow of data between different categories',
+    }),
+    createVis({
+      type: ESupportedPlotlyVis.HEATMAP,
+      renderer: HeatmapVis,
+      sidebarRenderer: HeatmapVisSidebar,
+      mergeConfig: heatmapMergeDefaultConfig,
+      description: 'Visualizes matrix data using color gradients',
+    }),
+    createVis({
+      type: ESupportedPlotlyVis.VIOLIN,
+      renderer: ViolinVis,
+      sidebarRenderer: ViolinVisSidebar,
+      mergeConfig: violinMergeDefaultConfig,
+      description: 'Visualizes numerical data distribution by combining a box plot and a kernel density plot',
+    }),
+    createVis({
+      type: ESupportedPlotlyVis.RAINCLOUD,
+      renderer: RaincloudVis,
+      sidebarRenderer: RaincloudVisSidebar,
+      mergeConfig: raincloudMergeDefaultConfig,
+      description: 'Visualizes a combination of boxplot, violin plot, and jitter plot',
+    }),
+    createVis({
+      type: ESupportedPlotlyVis.CORRELATION,
+      renderer: CorrelationVis,
+      sidebarRenderer: CorrelationVisSidebar,
+      mergeConfig: correlationMergeDefaultConfig,
+      description: 'Visualizes statistical relationships between pairs of numerical variables',
+    }),
   ];
 }
 

diff --git a/src/vis/Provider.tsx b/src/vis/Provider.tsx
@@ -9,27 +9,37 @@ export interface GeneralVis<T extends BaseVisConfig = BaseVisConfig> {
   renderer: (props: ICommonVisProps<T>) => React.JSX.Element;
   sidebarRenderer: (props: ICommonVisSideBarProps<T>) => React.JSX.Element;
   mergeConfig: (columns: VisColumn[], config: T) => T;
+  description: string;
 }
 
 /**
  * Generic utility function for creating a vis object.
  */
-export function createVis<T extends BaseVisConfig>(
-  type: string,
+export function createVis<T extends BaseVisConfig>({
+  type,
+  renderer,
+  sidebarRenderer,
+  mergeConfig,
+  description = '',
+}: {
+  type: string;
 
   /** The main vis renderer. Required in all visualizations. */
-  renderer: (props: ICommonVisProps<T>) => React.JSX.Element,
+  renderer: (props: ICommonVisProps<T>) => React.JSX.Element;
 
   /** The sidebar renderer. Required in all visualizations. */
-  sidebarRenderer: (props: ICommonVisSideBarProps<T>) => React.JSX.Element,
+  sidebarRenderer: (props: ICommonVisSideBarProps<T>) => React.JSX.Element;
+
+  mergeConfig: (columns: VisColumn[], config: T) => T;
 
-  mergeConfig: (columns: VisColumn[], config: T) => T,
-): GeneralVis<T> {
+  description: string;
+}): GeneralVis<T> {
   return {
     type,
     renderer,
     sidebarRenderer,
     mergeConfig,
+    description,
   };
 }
 

diff --git a/src/vis/correlation/CorrelationVisSidebar.tsx b/src/vis/correlation/CorrelationVisSidebar.tsx
@@ -40,7 +40,7 @@ export function CorrelationVisSidebar({
             onChange={(v) => setConfig({ ...config, correlationType: v as ECorrelationType })}
           />
           <Text size="sm" fw={500}>
-            P value scale type
+            P-value scale type
           </Text>
           <SegmentedControl
             size="sm"
@@ -60,14 +60,14 @@ export function CorrelationVisSidebar({
             onChange={(val) => setConfig({ ...config, pDomain: [+val, config.pDomain[1]] })}
             label={
               <Group style={{ width: '100%' }} position="apart">
-                <Text>Maximum P Value</Text>
+                <Text>Maximum p-value</Text>
                 <Tooltip
                   withinPortal
                   withArrow
                   arrowSize={6}
                   label={
                     <Group>
-                      <Text>Sets the maximum p value for the size scale. Any p value at or above this value will have the smallest possible circle</Text>
+                      <Text>Sets the maximum p-value for the size scale. Any p-value at or above this value will have the smallest possible circle</Text>
                     </Group>
                   }
                 >
@@ -91,14 +91,14 @@ export function CorrelationVisSidebar({
             onChange={(val) => setConfig({ ...config, pDomain: [config.pDomain[0], +val] })}
             label={
               <Group style={{ width: '100%' }} position="apart">
-                <Text>Minimum P Value</Text>
+                <Text>Minimum p-value</Text>
                 <Tooltip
                   withinPortal
                   withArrow
                   arrowSize={6}
                   label={
                     <Group>
-                      <Text>Sets the minimum p value for the size scale. Any p value at or below this value will have the largest possible circle</Text>
+                      <Text>Sets the minimum p-value for the size scale. Any p-value at or below this value will have the largest possible circle</Text>
                     </Group>
                   }
                 >

diff --git a/src/vis/sankey/SankeyVis.tsx b/src/vis/sankey/SankeyVis.tsx
@@ -204,6 +204,7 @@ export function SankeyVis({ config, columns, selectedList, selectionCallback, di
           <PlotlyComponent
             data={plotly}
             style={{ width: '100%' }}
+            config={{ displayModeBar: false }}
             layout={{
               font: {
                 size: 12,

diff --git a/src/vis/sidebar/VisTypeSelect.tsx b/src/vis/sidebar/VisTypeSelect.tsx
@@ -1,4 +1,4 @@
-import { Select } from '@mantine/core';
+import { Select, Text } from '@mantine/core';
 import * as React from 'react';
 import { useVisProvider } from '../Provider';
 import { ESupportedPlotlyVis } from '../interfaces';
@@ -8,20 +8,40 @@ interface VisTypeSelectProps {
   currentSelected: ESupportedPlotlyVis;
 }
 
+interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
+  image: string;
+  label: string;
+  description: string;
+}
+
+const SelectItem = React.forwardRef<HTMLDivElement, ItemProps>(({ image, label, description, ...others }: ItemProps, ref) => (
+  <div ref={ref} {...others}>
+    <Text size="sm">{label}</Text>
+    <Text size="xs" opacity={0.65} lineClamp={2}>
+      {description}
+    </Text>
+  </div>
+));
+
+SelectItem.displayName = '@mantine/core/SelectItem';
+
 export function VisTypeSelect({ callback, currentSelected }: VisTypeSelectProps) {
   const { visTypes } = useVisProvider();
 
   return (
     <Select
       withinPortal
+      searchable
       label="Visualization type"
       // components={{Option: optionLayout}}
       onChange={(e) => callback(e as ESupportedPlotlyVis)}
       name="visTypes"
+      itemComponent={SelectItem}
       data={visTypes.map((t) => {
         return {
           value: t.type,
           label: t.type,
+          description: t.description,
         };
       })}
       value={currentSelected}