feat(visManager): interaction slice

libs/shared/lib/data-access/store/interactionSlice.ts

+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import type { RootState } from './store';
+
+export type HoverType = { [id: string]: any };
+
+export type SelectType = { [id: string]: any };
+
+// Define the initial state using that type
+export type InteractionsType = {
+  hover: HoverType | undefined;
+  select: SelectType | undefined;
+};
+
+export const initialState: InteractionsType = {
+  hover: {},
+  select: {},
+};
+
+export const interactionSlice = createSlice({
+  name: 'interaction',
+  // `createSlice` will infer the state type from the `initialState` argument
+  initialState,
+  reducers: {
+    addHover: (state, action: PayloadAction<HoverType | undefined>) => {
+      state.hover = action.payload;
+    },
+    addSelect: (state, action: PayloadAction<SelectType | undefined>) => {
+      state.select = action.payload;
+    },
+  },
+});
+
+export const { addHover, addSelect } = interactionSlice.actions;
+
+export default interactionSlice.reducer;

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

@@ -64,7 +64,7 @@ export function ConfigPanel({ manager }: Props) {
             <span className="text-sm font-bold">Sessions</span>
             {Object.entries(session.saveStates).map(([id, info]) => (
               <div key={id} className="flex justify-between items-center">
-                <span className="text-xs font-normal truncate">{id.slice(0, 10)}...</span>
+                <span className="text-xs font-normal truncate">{id.slice(0, 15)}...</span>
                 <div className="flex -space-x-4 rtl:space-x-reverse">
                   {info.share_state.users.slice(0, 2).map((user: string) => (
                     <div

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

@@ -16,13 +16,14 @@ import {
   useVisualization,
 } from '../../data-access';
 import { VisualizationManager } from './manager.types';
+import { HoverType, SelectType, addHover, addSelect } from '../../data-access/store/interactionSlice';
 
 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'),
-  // MapVis: () => import('./visualizations/mapvis/mapvis'),
+  // MapVis: () => import('../visualizations/mapvis/mapvis'),
   MatrixVis: () => import('../visualizations/matrixvis/matrixvis'),
 };
 
@@ -39,24 +40,20 @@ export const useVisualizationManager = (): VisualizationManager => {
 
   const [configuration, setConfiguration] = useState<any>();
   const [visualization, setVisualization] = useState<VISComponentType>();
-  const [hoverItem, setHoverItem] = useState<any>();
   const [selected, setSelected] = useState<any>();
   const activeType = active ? visualizations[active]?.displayName : undefined;
   const tabs = Object.keys(visualizations).length ? Object.keys(visualizations) : [];
 
   useEffect(() => {
-    console.log('use effect called');
     loadVisualization();
   }, [active]);
 
   const loadVisualization = async () => {
-    console.log('loading vis');
     if (active && Visualizations[active]) {
       const componentModule = await Visualizations[active]();
       const component = componentModule.default;
 
       if (!(active in Object.keys(visualizations))) {
-        console.log('Not in redux yet');
         // Visualization doesn't yet exist so add its configuration
         const configuration = component.configuration;
         dispatch(updateVisualization({ id: active, settings: configuration }));
@@ -70,9 +67,7 @@ export const useVisualizationManager = (): VisualizationManager => {
   };
 
   const changeActive = (id: string) => {
-    console.log('CHANGING VIS TO', id);
     dispatch(setActiveVisualization(id));
-    // loadVisualization(id);
   };
 
   const deleteVisualization = (id: string) => {
@@ -100,17 +95,16 @@ export const useVisualizationManager = (): VisualizationManager => {
     }
   };
 
-  const handleHover = (item: any) => {
-    setHoverItem(item);
+  const handleHover = (item: HoverType | undefined) => {
+    dispatch(addHover(item));
   };
 
-  const handleSelect = (item: any) => {
-    setSelected(item);
+  const handleSelect = (item: SelectType | undefined) => {
+    dispatch(addSelect(item));
   };
 
   const updateSettings = (newSettings: any) => {
     if (active) {
-      console.log('updating settings');
       const updatedSettings = { ...configuration, ...newSettings };
       setConfiguration(updatedSettings);
       dispatch(updateVisualization({ id: active, settings: updatedSettings }));

libs/shared/lib/vis/panel.tsx

@@ -22,7 +22,7 @@ export const VisualizationPanel = ({ manager }: { manager: VisualizationManager
   return (
     <div className="vis-panel h-full w-full">
       <VisualizationBar manager={manager} />
-      <div className="overflow-y-auto" style={graphQueryResult.nodes.length === 0 ? { overflow: 'hidden' } : {}}>
+      <div className="h-full w-full overflow-y-auto" style={graphQueryResult.nodes.length === 0 ? { overflow: 'hidden' } : {}}>
         {renderContent()}
       </div>
     </div>

libs/shared/lib/vis/screens/noData.tsx

@@ -6,7 +6,7 @@ type Props = { dataAvailable: boolean };
 
 export function NoData({ dataAvailable }: Props) {
   return (
-    <div className="flex justify-center items-center h-full mt-4">
+    <div className="flex justify-center items-center h-full">
       <div className="max-w-lg mx-auto text-left">
         <p className="text-xl font-normal text-secondary-600">No data available to be shown</p>
         {dataAvailable ? (