feat(visManager): folder structure

apps/web/src/app/app.tsx

-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   useAppDispatch,
   useAuthorizationCache,

libs/shared/lib/data-viewer/settings.tsx

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

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);

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>

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

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

libs/shared/lib/vis/manager.tsx → libs/shared/lib/vis/manager/manager.tsx

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

libs/shared/lib/vis/manager/manager.types.tsx

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

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

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>
       )}