From 04080fd88bbb3d6f1663a96f6289b1e4a729b8ae Mon Sep 17 00:00:00 2001
From: 2427021 <s.a.vink@students.uu.nl>
Date: Tue, 26 Mar 2024 13:36:53 +0100
Subject: [PATCH] feat(visManager): folder structure
---
apps/web/src/app/app.tsx | 2 +-
libs/shared/lib/data-viewer/settings.tsx | 38 -------------------
libs/shared/lib/vis/bar.tsx | 7 ++--
libs/shared/lib/vis/configuration/index.tsx | 5 ++-
libs/shared/lib/vis/manager/index.ts | 2 +
libs/shared/lib/vis/{ => manager}/manager.tsx | 35 ++++++++---------
libs/shared/lib/vis/manager/manager.types.tsx | 12 ++++++
libs/shared/lib/vis/types.ts | 2 +-
libs/shared/lib/vis/visualizationPanel.tsx | 5 ++-
9 files changed, 42 insertions(+), 66 deletions(-)
delete mode 100644 libs/shared/lib/data-viewer/settings.tsx
create mode 100644 libs/shared/lib/vis/manager/index.ts
rename libs/shared/lib/vis/{ => manager}/manager.tsx (79%)
create mode 100644 libs/shared/lib/vis/manager/manager.types.tsx
diff --git a/apps/web/src/app/app.tsx b/apps/web/src/app/app.tsx
index ad0430f42..658460021 100644
--- a/apps/web/src/app/app.tsx
+++ b/apps/web/src/app/app.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
import {
useAppDispatch,
useAuthorizationCache,
diff --git a/libs/shared/lib/data-viewer/settings.tsx b/libs/shared/lib/data-viewer/settings.tsx
deleted file mode 100644
index 999092997..000000000
--- a/libs/shared/lib/data-viewer/settings.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { Button } from '../components';
-import { Delete } from '@mui/icons-material';
-import Input from '../components/inputs';
-
-type Props = {};
-
-export default function Settings({ manager }: { manager: any }) {
- return (
- <div className="">
- <div className="border-b border-secondary-200 py-2">
- <div className="flex justify-between items-center px-4 py-2">
- <span className="text-xs font-bold">Visualisation</span>
- <Button
- type="secondary"
- variant="ghost"
- size="xs"
- iconComponent={<Delete />}
- onClick={() => {
- manager.deleteVisualization(manager.active);
- }}
- />
- </div>
- <div className="flex justify-between items-center px-4 py-1">
- <span className="text-xs font-normal">Type</span>
- <div className="w-36">
- <Input type="dropdown" size="xs" options={[]} value={manager.activeType} onChange={() => {}} />
- </div>
- </div>
- <div className="flex justify-between items-center px-4 py-1">
- <span className="text-xs font-normal">Name</span>
- <input type="text" className="border rouded w-36" value={manager.active} onChange={() => {}} />
- </div>
- </div>
- {manager.renderSettings()}
- </div>
- );
-}
diff --git a/libs/shared/lib/vis/bar.tsx b/libs/shared/lib/vis/bar.tsx
index 6b3db8716..717bdc158 100644
--- a/libs/shared/lib/vis/bar.tsx
+++ b/libs/shared/lib/vis/bar.tsx
@@ -2,17 +2,16 @@ import React, { useState } from 'react';
import { Button } from '../components';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../components/tooltip';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { Add, Close, Fullscreen, SettingsInputComponent } from '@mui/icons-material';
+import { Add, Close, Fullscreen } from '@mui/icons-material';
import ControlContainer from '../components/controls';
-import { Visualizations } from './manager';
+import { Visualizations, VisualizationManager } from './manager';
type Props = {
- manager: any;
+ manager: VisualizationManager;
};
export default function VisualizationBar({ manager }: Props) {
const [visDropdownOpen, setVisDropdownOpen] = useState<boolean>(false);
- const [showVisSettings, setShowVisSettings] = useState<boolean>(false);
const handleDragStart = (e: React.DragEvent<HTMLDivElement>, visId: string) => {
e.dataTransfer.setData('text/plain', visId);
diff --git a/libs/shared/lib/vis/configuration/index.tsx b/libs/shared/lib/vis/configuration/index.tsx
index 8ec320447..f2012382b 100644
--- a/libs/shared/lib/vis/configuration/index.tsx
+++ b/libs/shared/lib/vis/configuration/index.tsx
@@ -2,9 +2,10 @@ import React from 'react';
import { Button } from '../../components';
import { Delete } from '@mui/icons-material';
import Input from '../../components/inputs';
+import { VisualizationManager } from '../manager';
type Props = {
- manager: any;
+ manager: VisualizationManager;
};
export default function ConfigPanel({ manager }: Props) {
@@ -19,7 +20,7 @@ export default function ConfigPanel({ manager }: Props) {
size="xs"
iconComponent={<Delete />}
onClick={() => {
- manager.deleteVisualization(manager.active);
+ if (manager.active) manager.deleteVisualization(manager.active);
}}
/>
</div>
diff --git a/libs/shared/lib/vis/manager/index.ts b/libs/shared/lib/vis/manager/index.ts
new file mode 100644
index 000000000..4f183c187
--- /dev/null
+++ b/libs/shared/lib/vis/manager/index.ts
@@ -0,0 +1,2 @@
+export type { VisualizationManager } from './manager.types';
+export { useVisualizationManager, Visualizations } from './manager';
diff --git a/libs/shared/lib/vis/manager.tsx b/libs/shared/lib/vis/manager/manager.tsx
similarity index 79%
rename from libs/shared/lib/vis/manager.tsx
rename to libs/shared/lib/vis/manager/manager.tsx
index 73bc6bedd..67f4a08fe 100644
--- a/libs/shared/lib/vis/manager.tsx
+++ b/libs/shared/lib/vis/manager/manager.tsx
@@ -1,6 +1,11 @@
import React, { useState, useEffect } from 'react';
-import { VISComponentType, VisualizationConfiguration } from './types';
-import { removeVisualization, reorderVisState, setActiveVisualization, updateVisualization } from '../data-access/store/visualizationSlice';
+import { VISComponentType, VisualizationConfiguration } from '../types';
+import {
+ removeVisualization,
+ reorderVisState,
+ setActiveVisualization,
+ updateVisualization,
+} from '../../data-access/store/visualizationSlice';
import {
useAppDispatch,
useGraphQueryResult,
@@ -9,20 +14,19 @@ import {
useSchemaGraph,
useSessionCache,
useVisualization,
-} from '../data-access';
+} from '../../data-access';
+import { VisualizationManager } from './manager.types';
export const Visualizations: Record<string, Function> = {
- TableVis: () => import('./visualizations/tablevis/tablevis'),
- PaohVis: () => import('./visualizations/paohvis/paohvis'),
- RawJSONVis: () => import('./visualizations/rawjsonvis/rawjsonvis'),
- NodeLinkVis: () => import('./visualizations/nodelinkvis/nodelinkvis'),
+ TableVis: () => import('../visualizations/tablevis/tablevis'),
+ PaohVis: () => import('../visualizations/paohvis/paohvis'),
+ RawJSONVis: () => import('../visualizations/rawjsonvis/rawjsonvis'),
+ NodeLinkVis: () => import('../visualizations/nodelinkvis/nodelinkvis'),
// MapVis: () => import('./visualizations/mapvis/mapvis'),
- MatrixVis: () => import('./visualizations/matrixvis/matrixvis'),
+ MatrixVis: () => import('../visualizations/matrixvis/matrixvis'),
};
-const INITIAL_VISUALIZATIONS = ['NodeLinkVis', 'PaohVis'];
-
-export const useVisualizationManager = () => {
+export const useVisualizationManager = (): VisualizationManager => {
const dispatch = useAppDispatch();
const session = useSessionCache();
const ml = useML();
@@ -37,8 +41,7 @@ export const useVisualizationManager = () => {
const [selected, setSelected] = useState<any>();
const activeType = visualizations[active]?.displayName;
- const firstRender = !active && !session.currentSaveState;
- const tabs = Object.keys(visualizations).length ? Object.keys(visualizations) : INITIAL_VISUALIZATIONS;
+ const tabs = Object.keys(visualizations).length ? Object.keys(visualizations) : [];
useEffect(() => {
loadVisualization();
@@ -60,12 +63,6 @@ export const useVisualizationManager = () => {
}
};
- useEffect(() => {
- if (firstRender) {
- dispatch(setActiveVisualization(INITIAL_VISUALIZATIONS[0]));
- }
- }, [active, dispatch]);
-
const changeActive = (id: string) => {
dispatch(setActiveVisualization(id));
};
diff --git a/libs/shared/lib/vis/manager/manager.types.tsx b/libs/shared/lib/vis/manager/manager.types.tsx
new file mode 100644
index 000000000..f53318a09
--- /dev/null
+++ b/libs/shared/lib/vis/manager/manager.types.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export interface VisualizationManager {
+ renderComponent: () => React.ReactNode;
+ renderSettings: () => React.ReactNode;
+ active: string | undefined;
+ activeType: string | undefined;
+ tabs: string[];
+ changeActive: (id: string) => void;
+ reorderVisualizations: (args: { draggedVisId: string; dropVisId: string }) => void;
+ deleteVisualization: (id: string) => void;
+}
diff --git a/libs/shared/lib/vis/types.ts b/libs/shared/lib/vis/types.ts
index 6f174b786..1f91885dd 100644
--- a/libs/shared/lib/vis/types.ts
+++ b/libs/shared/lib/vis/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 './manager';
+import { Visualizations } from './manager/manager';
export type VisualizationConfiguration = { [id: string]: any };
diff --git a/libs/shared/lib/vis/visualizationPanel.tsx b/libs/shared/lib/vis/visualizationPanel.tsx
index 70d6086dc..47e507b6c 100644
--- a/libs/shared/lib/vis/visualizationPanel.tsx
+++ b/libs/shared/lib/vis/visualizationPanel.tsx
@@ -2,8 +2,9 @@ import React, { useState, useRef, useEffect } from 'react';
import { useAppDispatch, useGraphQueryResult, useQuerybuilderGraph, useVisualization } from '@graphpolaris/shared/lib/data-access';
import { LoadingSpinner } from '@graphpolaris/shared/lib/components/LoadingSpinner';
import VisualizationBar from './bar';
+import { VisualizationManager } from './manager';
-export const VisualizationPanel = ({ manager }: { manager: any }) => {
+export const VisualizationPanel = ({ manager }: { manager: VisualizationManager }) => {
const query = useQuerybuilderGraph();
const graphQueryResult = useGraphQueryResult();
const visDropdownRef = useRef<HTMLDivElement>(null);
@@ -31,6 +32,8 @@ export const VisualizationPanel = ({ manager }: { manager: any }) => {
<p>No data available to be shown</p>
{query.nodes.length > 0 ? <p>Query resulted in empty dataset</p> : <p>Query for data to visualize</p>}
</div>
+ ) : manager.tabs.length === 0 ? (
+ <div>Choose vis</div>
) : (
<div className="w-full h-full">{manager.renderComponent()}</div>
)}
--
GitLab