From b18a5a64b2a385ecc38405a88d02fe3189e1cc84 Mon Sep 17 00:00:00 2001
From: 2427021 <s.a.vink@students.uu.nl>
Date: Mon, 15 Apr 2024 13:17:48 +0200
Subject: [PATCH] fix(updatedDocumentation): updated documentation and manager
naming
---
apps/web/src/app/app.tsx | 4 +-
libs/shared/lib/vis/common/types.ts | 2 +-
libs/shared/lib/vis/components/bar.tsx | 4 +-
.../lib/vis/components/config/panel.tsx | 4 +-
libs/shared/lib/vis/components/panel.tsx | 2 +-
libs/shared/lib/vis/hooks/index.ts | 2 -
.../VisualizationManager.tsx} | 11 +-
libs/shared/lib/vis/manager/index.ts | 2 +
.../manager.types.ts} | 0
.../lib/vis/visualizations/documentation.mdx | 105 +++++++-----------
10 files changed, 56 insertions(+), 80 deletions(-)
delete mode 100644 libs/shared/lib/vis/hooks/index.ts
rename libs/shared/lib/vis/{hooks/useVisualizationManager.tsx => manager/VisualizationManager.tsx} (93%)
create mode 100644 libs/shared/lib/vis/manager/index.ts
rename libs/shared/lib/vis/{hooks/hooks.types.ts => manager/manager.types.ts} (100%)
diff --git a/apps/web/src/app/app.tsx b/apps/web/src/app/app.tsx
index b8f1628d7..15401c5fd 100644
--- a/apps/web/src/app/app.tsx
+++ b/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) {
diff --git a/libs/shared/lib/vis/common/types.ts b/libs/shared/lib/vis/common/types.ts
index 52e1513b2..6bb2d9862 100644
--- a/libs/shared/lib/vis/common/types.ts
+++ b/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 };
diff --git a/libs/shared/lib/vis/components/bar.tsx b/libs/shared/lib/vis/components/bar.tsx
index 409690202..9cddc5594 100644
--- a/libs/shared/lib/vis/components/bar.tsx
+++ b/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;
diff --git a/libs/shared/lib/vis/components/config/panel.tsx b/libs/shared/lib/vis/components/config/panel.tsx
index 722e241fb..e0981e7d3 100644
--- a/libs/shared/lib/vis/components/config/panel.tsx
+++ b/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';
diff --git a/libs/shared/lib/vis/components/panel.tsx b/libs/shared/lib/vis/components/panel.tsx
index 8e5653c19..38a37bab4 100644
--- a/libs/shared/lib/vis/components/panel.tsx
+++ b/libs/shared/lib/vis/components/panel.tsx
@@ -1,7 +1,7 @@
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 }) => {
diff --git a/libs/shared/lib/vis/hooks/index.ts b/libs/shared/lib/vis/hooks/index.ts
deleted file mode 100644
index bfd4ddd04..000000000
--- a/libs/shared/lib/vis/hooks/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { useVisualizationManager, Visualizations, VISUALIZATION_TYPES } from './useVisualizationManager';
-export type { VisualizationManagerType } from './hooks.types';
diff --git a/libs/shared/lib/vis/hooks/useVisualizationManager.tsx b/libs/shared/lib/vis/manager/VisualizationManager.tsx
similarity index 93%
rename from libs/shared/lib/vis/hooks/useVisualizationManager.tsx
rename to libs/shared/lib/vis/manager/VisualizationManager.tsx
index b79925468..694298d7e 100644
--- a/libs/shared/lib/vis/hooks/useVisualizationManager.tsx
+++ b/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}
/>
)}
diff --git a/libs/shared/lib/vis/manager/index.ts b/libs/shared/lib/vis/manager/index.ts
new file mode 100644
index 000000000..96616a248
--- /dev/null
+++ b/libs/shared/lib/vis/manager/index.ts
@@ -0,0 +1,2 @@
+export { VisualizationManager, Visualizations, VISUALIZATION_TYPES } from './VisualizationManager';
+export type { VisualizationManagerType } from './manager.types';
diff --git a/libs/shared/lib/vis/hooks/hooks.types.ts b/libs/shared/lib/vis/manager/manager.types.ts
similarity index 100%
rename from libs/shared/lib/vis/hooks/hooks.types.ts
rename to libs/shared/lib/vis/manager/manager.types.ts
diff --git a/libs/shared/lib/vis/visualizations/documentation.mdx b/libs/shared/lib/vis/visualizations/documentation.mdx
index 74c0fd8ac..43cbe3c10 100644
--- a/libs/shared/lib/vis/visualizations/documentation.mdx
+++ b/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.
--
GitLab