resolved vis merge conflicts

src/vis/EagerVis.tsx

@@ -21,42 +21,98 @@ import {
 
 import { VisSidebar } from './VisSidebar';
 import { VisSidebarOpenButton } from './VisSidebarOpenButton';
-import { BarVis } from './barGood/BarVis';
-import { BarVisSidebar } from './barGood/BarVisSidebar';
-import { EBarDirection, EBarDisplayType, EBarGroupingType, IBarConfig, barMergeDefaultConfig } from './barGood/utils';
-import { ICorrelationConfig, correlationMergeDefaultConfig } from './correlation';
+import { BarVis } from './bar/BarVis';
+import { BarVisSidebar } from './bar/BarVisSidebar';
+import { EBarDirection, EBarDisplayType, EBarGroupingType, IBarConfig } from './bar/interfaces';
+import { barMergeDefaultConfig } from './bar/utils';
+import { correlationMergeDefaultConfig } from './correlation';
 import { CorrelationVis } from './correlation/CorrelationVis';
 import { CorrelationVisSidebar } from './correlation/CorrelationVisSidebar';
+import { ICorrelationConfig } from './correlation/interfaces';
 import { HeatmapVis } from './heatmap/HeatmapVis';
 import { HeatmapVisSidebar } from './heatmap/HeatmapVisSidebar';
-import { IHeatmapConfig, heatmapMergeDefaultConfig } from './heatmap/utils';
+import { IHeatmapConfig } from './heatmap/interfaces';
+import { heatmapMergeDefaultConfig } from './heatmap/utils';
 import { HexbinVis } from './hexbin/HexbinVis';
 import { HexbinVisSidebar } from './hexbin/HexbinVisSidebar';
-import { IHexbinConfig, hexinbMergeDefaultConfig } from './hexbin/utils';
+import { IHexbinConfig } from './hexbin/interfaces';
+import { hexinbMergeDefaultConfig } from './hexbin/utils';
 import { RaincloudVis } from './raincloud/RaincloudVis';
 import { RaincloudVisSidebar } from './raincloud/RaincloudVisSidebar';
-import { IRaincloudConfig, 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, sankeyMergeDefaultConfig } from './sankey/utils';
-import { IScatterConfig, scatterMergeDefaultConfig } from './scatter';
+import { ISankeyConfig } from './sankey/interfaces';
+import { sankeyMergeDefaultConfig } from './sankey/utils';
+import { scatterMergeDefaultConfig } from './scatter';
 import { ScatterVis } from './scatter/ScatterVis';
 import { ScatterVisSidebar } from './scatter/ScatterVisSidebar';
-import { IViolinConfig, ViolinVis, violinMergeDefaultConfig } from './violin';
+import { IScatterConfig } from './scatter/interfaces';
+import { ViolinVis, violinMergeDefaultConfig } from './violin';
 import { ViolinVisSidebar } from './violin/ViolinVisSidebar';
+import { IViolinConfig } from './violin/interfaces';
 
 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',
+    }),
   ];
 }
 
@@ -277,7 +333,7 @@ export function EagerVis({
         },
       }}
     >
-      {enableSidebar ? <VisSidebarOpenButton onClick={() => setShowSidebar(!showSidebar)} isOpen={showSidebar} /> : null}
+      {enableSidebar && !showSidebar ? <VisSidebarOpenButton onClick={() => setShowSidebar(!showSidebar)} /> : null}
 
       <Stack spacing={0} sx={{ width: '100%', height: '100%', overflow: 'hidden' }} align="stretch" ref={ref}>
         {Renderer ? (
@@ -307,7 +363,7 @@ export function EagerVis({
         ) : null}
       </Stack>
       {showSidebar ? (
-        <VisSidebarWrapper>
+        <VisSidebarWrapper config={visConfig} setConfig={setVisConfig} onClick={() => setShowSidebar(false)}>
           <VisSidebar config={visConfig} columns={columns} filterCallback={filterCallback} setConfig={setVisConfig} />
         </VisSidebarWrapper>
       ) : null}

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,
   };
 }
 

src/vis/VisSidebarOpenButton.tsx

@@ -1,15 +1,14 @@
-import * as React from 'react';
-import { ActionIcon, Center, Container, Group, Stack, Tooltip } from '@mantine/core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faGear } from '@fortawesome/free-solid-svg-icons/faGear';
-import { faClose } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ActionIcon, Tooltip } from '@mantine/core';
+import * as React from 'react';
 import { i18n } from '../i18n';
 
 export function VisSidebarOpenButton({ isOpen, onClick }: { isOpen?: boolean; onClick: () => void }) {
   return (
     <Tooltip withinPortal label={isOpen ? i18n.t('visyn:vis.closeSettings') : i18n.t('visyn:vis.openSettings')}>
-      <ActionIcon sx={{ zIndex: 10, position: 'absolute', top: '10px', right: '10px' }} onClick={onClick}>
-        <FontAwesomeIcon icon={isOpen ? faClose : faGear} />
+      <ActionIcon sx={{ zIndex: 10, position: 'absolute' }} top={12} right={10} onClick={onClick}>
+        <FontAwesomeIcon icon={faGear} />
       </ActionIcon>
     </Tooltip>
   );

src/vis/VisSidebarWrapper.tsx

@@ -1,16 +1,33 @@
-import { Box, Group, ScrollArea } from '@mantine/core';
+import { faClose } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ActionIcon, Box, Divider, Group, ScrollArea, Stack, Text, Tooltip } from '@mantine/core';
 import * as React from 'react';
 import { ReactNode } from 'react';
+import { i18n } from '../i18n';
+import { VisTypeSelect } from './sidebar/VisTypeSelect';
+import { HelpHoverCard } from '../components/HelpHoverCard';
 
 const sidebarSize = 200;
 
-export function VisSidebarWrapper({ children }: { children: ReactNode }) {
+export function VisSidebarWrapper({ children, config, setConfig, onClick }: { children: ReactNode; config; setConfig; onClick }) {
   return (
     <Box pt="sm" style={{ height: '100%', boxShadow: '2px 0px 15px 0px lightgray', zIndex: 5 }}>
       <Group spacing={0} style={{ width: '100%', height: '100%' }} noWrap>
         <ScrollArea p={0} w={`${sidebarSize}px`} h="100%">
           <Box pb="xl" style={{ height: '100%', width: `${sidebarSize}px` }}>
-            {children}
+            <Stack spacing="xs" px="xs">
+              <Group position="apart">
+                <Text>Settings</Text>
+                <Tooltip withinPortal label={i18n.t('visyn:vis.closeSettings')}>
+                  <ActionIcon onClick={onClick}>
+                    <FontAwesomeIcon icon={faClose} />
+                  </ActionIcon>
+                </Tooltip>
+              </Group>
+              <VisTypeSelect callback={(type) => setConfig({ ...config, type })} currentSelected={config.type} />
+              <Divider />
+              {children}
+            </Stack>
           </Box>
         </ScrollArea>
       </Group>

src/vis/barGood/BarChart.tsx → src/vis/bar/BarChart.tsx

@@ -6,7 +6,8 @@ import { EColumnTypes, VisColumn } from '../interfaces';
 import { SingleBarChart } from './SingleBarChart';
 import { Legend } from './barComponents/Legend';
 import { useGetGroupedBarScales } from './hooks/useGetGroupedBarScales';
-import { IBarConfig, SortTypes, getBarData } from './utils';
+import { getBarData } from './utils';
+import { IBarConfig, SortTypes } from './interfaces';
 
 export function BarChart({
   config,

src/vis/bar/BarDirectionButtons.tsx

@@ -0,0 +1,25 @@
+import { Input, SegmentedControl } from '@mantine/core';
+import * as React from 'react';
+import { EBarDirection } from './interfaces';
+
+interface BarDirectionProps {
+  callback: (s: EBarDirection) => void;
+  currentSelected: EBarDirection;
+}
+
+export function BarDirectionButtons({ callback, currentSelected }: BarDirectionProps) {
+  return (
+    <Input.Wrapper label="Direction">
+      <SegmentedControl
+        fullWidth
+        size="xs"
+        value={currentSelected}
+        onChange={callback}
+        data={[
+          { label: EBarDirection.VERTICAL, value: EBarDirection.VERTICAL },
+          { label: EBarDirection.HORIZONTAL, value: EBarDirection.HORIZONTAL },
+        ]}
+      />
+    </Input.Wrapper>
+  );
+}

src/vis/sidebar/BarDisplayTypeButtons.tsx → src/vis/bar/BarDisplayTypeButtons.tsx

@@ -1,6 +1,6 @@
 import { Container, SegmentedControl, Stack } from '@mantine/core';
 import * as React from 'react';
-import { EBarDisplayType } from '../barGood/utils';
+import { EBarDisplayType } from './interfaces';
 
 interface BarDisplayProps {
   callback: (s: EBarDisplayType) => void;

src/vis/sidebar/BarGroupTypeButtons.tsx → src/vis/bar/BarGroupTypeButtons.tsx

@@ -1,6 +1,6 @@
 import { Container, SegmentedControl, Stack } from '@mantine/core';
 import * as React from 'react';
-import { EBarGroupingType } from '../barGood/utils';
+import { EBarGroupingType } from './interfaces';
 
 interface BarGroupTypeProps {
   callback: (s: EBarGroupingType) => void;

src/vis/barGood/BarVis.tsx → src/vis/bar/BarVis.tsx

@@ -4,15 +4,15 @@ import React from 'react';
 import { InvalidCols } from '../general/InvalidCols';
 import { ICommonVisProps } from '../interfaces';
 import { BarChart } from './BarChart';
-import { IBarConfig } from './utils';
+import { IBarConfig } from './interfaces';
 
 export function BarVis({ config, columns, selectionCallback = () => null, selectedMap = {}, selectedList = [] }: ICommonVisProps<IBarConfig>) {
   return (
     <Stack p={0} sx={{ height: '100%', overflow: 'hidden', width: '100%', position: 'relative' }}>
       {config.catColumnSelected ? (
         <BarChart config={config} columns={columns} selectedMap={selectedMap} selectionCallback={selectionCallback} selectedList={selectedList} />
       ) : (
-        <InvalidCols headerMessage="Invalid column" bodyMessage="No column selected" />
+        <InvalidCols headerMessage="Invalid settings" bodyMessage="To create a bar chart, please select at least 1 column." />
       )}
     </Stack>
   );