diff --git a/src/vis/EagerVis.tsx b/src/vis/EagerVis.tsx index 390f0a5f1..2b7c5093f 100644 --- 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 index 8e6fb9225..59dc021df 100644 --- a/src/vis/Provider.tsx +++ b/src/vis/Provider.tsx @@ -9,27 +9,37 @@ export interface GeneralVis { renderer: (props: ICommonVisProps) => React.JSX.Element; sidebarRenderer: (props: ICommonVisSideBarProps) => React.JSX.Element; mergeConfig: (columns: VisColumn[], config: T) => T; + description: string; } /** * Generic utility function for creating a vis object. */ -export function createVis( - type: string, +export function createVis({ + type, + renderer, + sidebarRenderer, + mergeConfig, + description = '', +}: { + type: string; /** The main vis renderer. Required in all visualizations. */ - renderer: (props: ICommonVisProps) => React.JSX.Element, + renderer: (props: ICommonVisProps) => React.JSX.Element; /** The sidebar renderer. Required in all visualizations. */ - sidebarRenderer: (props: ICommonVisSideBarProps) => React.JSX.Element, + sidebarRenderer: (props: ICommonVisSideBarProps) => React.JSX.Element; + + mergeConfig: (columns: VisColumn[], config: T) => T; - mergeConfig: (columns: VisColumn[], config: T) => T, -): GeneralVis { + description: string; +}): GeneralVis { return { type, renderer, sidebarRenderer, mergeConfig, + description, }; } diff --git a/src/vis/correlation/CorrelationVisSidebar.tsx b/src/vis/correlation/CorrelationVisSidebar.tsx index 83ccc06c3..4e8a619f7 100644 --- 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 })} /> - P value scale type + P-value scale type setConfig({ ...config, pDomain: [+val, config.pDomain[1]] })} label={ - Maximum P Value + Maximum p-value - Sets the maximum p value for the size scale. Any p value at or above this value will have the smallest possible circle + Sets the maximum p-value for the size scale. Any p-value at or above this value will have the smallest possible circle } > @@ -91,14 +91,14 @@ export function CorrelationVisSidebar({ onChange={(val) => setConfig({ ...config, pDomain: [config.pDomain[0], +val] })} label={ - Minimum P Value + Minimum p-value - Sets the minimum p value for the size scale. Any p value at or below this value will have the largest possible circle + Sets the minimum p-value for the size scale. Any p-value at or below this value will have the largest possible circle } > diff --git a/src/vis/sankey/SankeyVis.tsx b/src/vis/sankey/SankeyVis.tsx index 7ea51c736..ac5f1b3e2 100644 --- a/src/vis/sankey/SankeyVis.tsx +++ b/src/vis/sankey/SankeyVis.tsx @@ -204,6 +204,7 @@ export function SankeyVis({ config, columns, selectedList, selectionCallback, di { + image: string; + label: string; + description: string; +} + +const SelectItem = React.forwardRef(({ image, label, description, ...others }: ItemProps, ref) => ( +
+ {label} + + {description} + +
+)); + +SelectItem.displayName = '@mantine/core/SelectItem'; + export function VisTypeSelect({ callback, currentSelected }: VisTypeSelectProps) { const { visTypes } = useVisProvider(); return (