fix(updatedDocumentation): updated documentation and manager naming

apps/web/src/app/app.tsx

@@ -19,7 +19,7 @@ import { URLParams, setParam } from '@graphpolaris/shared/lib/data-access/api/ur
 import { VisualizationPanel } from '@graphpolaris/shared/lib/vis';
 import { QueryBuilder } from '@graphpolaris/shared/lib/querybuilder';
 import { SideNavTab, Sidebar } from '@graphpolaris/shared/lib/sidebar';
-import { useVisualizationManager } from '@graphpolaris/shared/lib/vis/hooks';
+import { VisualizationManager } from '@graphpolaris/shared/lib/vis/manager';
 import { ConfigPanel } from '@graphpolaris/shared/lib/vis/components/config';
 import { Tooltip, TooltipTrigger, Button, TooltipContent, TooltipProvider } from '@graphpolaris/shared';
 import { ControlContainer } from '@graphpolaris/shared/lib/components/controls';
@@ -38,7 +38,7 @@ export function App(props: App) {
   const session = useSessionCache();
   const dispatch = useAppDispatch();
   const queryBuilderSettings = useQuerybuilderSettings();
-  const manager = useVisualizationManager();
+  const manager = VisualizationManager();
 
   const runQuery = () => {
     if (session?.currentSaveState && query) {

libs/shared/lib/vis/common/types.ts

@@ -3,7 +3,7 @@ import { ML } from '../../data-access/store/mlSlice';
 import { SchemaGraph } from '../../schema';
 import type { AppDispatch } from '../../data-access';
 import { FC } from 'react';
-import { Visualizations } from '../hooks';
+import { Visualizations } from '../manager';
 import { Edge, Node } from 'reactflow';
 
 export type VisualizationConfiguration = { [id: string]: any };

libs/shared/lib/vis/components/bar.tsx

@@ -4,8 +4,8 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { Add, Close, Fullscreen } from '@mui/icons-material';
 import { ControlContainer } from '../../components/controls';
-import { Visualizations } from '../hooks';
-import { VisualizationManagerType } from '../hooks';
+import { Visualizations } from '../manager';
+import { VisualizationManagerType } from '../manager';
 
 type Props = {
   manager: VisualizationManagerType;

libs/shared/lib/vis/components/config/panel.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { Button, Icon } from '../../../components';
 import { Delete, Person } from '@mui/icons-material';
 import { Input } from '../../../components/inputs';
-import { VISUALIZATION_TYPES } from '../../hooks';
-import { VisualizationManagerType } from '../../hooks';
+import { VISUALIZATION_TYPES } from '../../manager';
+import { VisualizationManagerType } from '../../manager';
 import { SettingsHeader } from './components';
 import { useSessionCache } from '../../../data-access';
 

libs/shared/lib/vis/components/panel.tsx

 import React, { useMemo } from 'react';
 import { useGraphQueryResult, useQuerybuilderGraph } from '@graphpolaris/shared/lib/data-access';
 import VisualizationBar from './bar';
-import { VisualizationManagerType } from '../hooks';
+import { VisualizationManagerType } from '../manager';
 import { Recommender, NoData, Querying } from '../views';
 
 export const VisualizationPanel = ({ manager, fullSize }: { manager: VisualizationManagerType; fullSize: () => void }) => {

libs/shared/lib/vis/hooks/index.ts

-export { useVisualizationManager, Visualizations, VISUALIZATION_TYPES } from './useVisualizationManager';
-export type { VisualizationManagerType } from './hooks.types';

libs/shared/lib/vis/hooks/useVisualizationManager.tsx → libs/shared/lib/vis/manager/VisualizationManager.tsx

@@ -15,8 +15,8 @@ import {
   useSessionCache,
   useVisualization,
 } from '../../data-access';
-import { VisualizationManagerType } from '../hooks';
-import { HoverType, SelectType, addHover, addSelect } from '../../data-access/store/interactionSlice';
+import { VisualizationManagerType } from '.';
+import { SelectType, addSelect } from '../../data-access/store/interactionSlice';
 
 export const Visualizations: Record<string, Function> = {
   TableVis: () => import('../visualizations/tablevis/tablevis'),
@@ -30,7 +30,7 @@ export const Visualizations: Record<string, Function> = {
 
 export const VISUALIZATION_TYPES: string[] = Object.keys(Visualizations);
 
-export const useVisualizationManager = (): VisualizationManagerType => {
+export const VisualizationManager = (): VisualizationManagerType => {
   const dispatch = useAppDispatch();
   const session = useSessionCache();
   const ml = useML();
@@ -99,10 +99,6 @@ export const useVisualizationManager = (): VisualizationManagerType => {
     }
   };
 
-  const handleHover = (item: HoverType | undefined) => {
-    dispatch(addHover(item));
-  };
-
   const handleSelect = (item: SelectType | undefined) => {
     dispatch(addSelect(item));
   };
@@ -133,7 +129,6 @@ export const useVisualizationManager = (): VisualizationManagerType => {
             ml={ml}
             configuration={configuration}
             dispatch={dispatch}
-            handleHover={handleHover}
             handleSelect={handleSelect}
           />
         )}

libs/shared/lib/vis/manager/index.ts

+export { VisualizationManager, Visualizations, VISUALIZATION_TYPES } from './VisualizationManager';
+export type { VisualizationManagerType } from './manager.types';

libs/shared/lib/vis/visualizations/documentation.mdx

@@ -2,88 +2,69 @@ import { Meta, Unstyled } from '@storybook/blocks';
 
 <Meta title="Visualizations/Implementation" />
 
-# Visualization documentation
+# Visualizations Documentation
 
-## Contents
+This documentation provides guidance on implementing visualizations within the GraphPolaris system. Each visualization component consists of four main parts:
 
-1. [Introduction](#Introduction)
-2. [Overview](#Overview)
-3. [Props](#Props)
+1. Display name: A descriptive name for the visualization.
+2. Component: The main visualization component responsible for rendering the visualization.
+3. Settings component: A component to configure settings for the visualization.
+4. Configuration dict: A configuration object containing default settings for the visualization.
 
-## Introduction
-
-This is the documentation for implementing visualizations within the GraphPolaris system.
-
-## Overview
-
-The basic code implementation looks like this:
+## Example implementation
 
 ```jsx
-import React from 'react';
-import { VisualizationPropTypes, VISComponentType } from '@graphpolaris/shared/lib/vis/Types';
+// Define props for the visualization (can be any format)
+export type VisualizationProps = {
+  showBarplot: boolean;
+  itemsPerPage: number;
+  displayAttributes: string[];
+};
+
+// Default configuration for the visualization
+const configuration: VisualizationProps = {
+  showBarplot: false,
+  itemsPerPage: 10,
+  displayAttributes: [],
+};
 
 /**
  * Visualization Component
- * @param {object} props - Props for the Visualization component.
  * @param {GraphQueryResult} props.data - Queried data from the database.
  * @param {object} props.schema - Database schema.
  * @param {any} props.ml - Machine-learning results.
+ * @param {object} props.configuration - Configurations for the visualization.
  * @param {function} props.dispatch - Redux dispatch for state management.
- * @param {object} props.globalConfig - Global configurations for the panel (applicable to all visualizations).
- * @param {object} props.settings - Local configuration props unique to this visualization.
- * @param {object} props.encodings - data attributes mapped to visual variables.
+ * @param {function} props.handleSelect - Void that handles selecting items.
  * @returns {JSX.Element} - Rendered content of the visualization.
  */
-export const Visualization = ({ data, schema, ml, dispatch, globalConfig, settings, encodings }) => {
-  // Perform additional processing specific to this visualization using the provided props
-
+export const Visualization = ({ data, schema, ml, configuration, dispatch, handleSelect }) => {
   return (
-    // Rendered visualization content
+    // Render visualization content
   );
 };
 
 /**
- * Visualization Component Object
- * Contains information and configurations for the exported visualization component.
+ * Settings Component
+ * @param {VisualizationProps} props.configuration - Configuration dictionary defined above.
+ * @param {GraphMetaData} props.graph - Result set statistics object.
+ * @param {function} props.updateSettings - Void that handles updating the settings.
+ * @returns {JSX.Element} - Rendered content of the visualization settings.
  */
+const VisualizationSettings = ({configuration, graph, updateSettings}: {
+  configuration: VisualizationProps;
+  graph: GraphMetaData;
+  updateSettings: (val: any) => void;
+}) => {
+  return (
+    // Render settings panel
+  );
+};
+
 export const VisualizationComponent: VISComponentType = {
-  displayName: 'Visualization',
-  VIS: Visualization,
-  settings: {},
-  encodings: {},
+  displayName: 'Visualization name',
+  component: Visualization,
+  settings: VisualizationSettings,
+  configuration: configuration,
 };
 ```
-
-### VisualizationComponent
-
-The visualization component is what gets exported and is used in the visualization manager. It must have a displayName and VIS.
-
-## Props
-
-### Data prop
-
-Contains the queried data from the database.
-
-### Schema prop
-
-Contains the database schema.
-
-### ML prop
-
-Contains the Machine-Learning results.
-
-### Dispatch prop
-
-Contains the dispatch for the redux state.
-
-### Global config prop
-
-Contains the global configurations for the panel that is the same for every visualization.
-
-### Settings prop
-
-Contains the local config props that are unique per visualization.
-
-### Encodings prop
-
-Contains the encodings for the visualization.