diff --git a/libs/shared/lib/data-access/store/interactionSlice.ts b/libs/shared/lib/data-access/store/interactionSlice.ts new file mode 100644 index 0000000000000000000000000000000000000000..89d18d41050d1f9f66c00566d1f21c93b5b338f6 --- /dev/null +++ b/libs/shared/lib/data-access/store/interactionSlice.ts @@ -0,0 +1,35 @@ +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; diff --git a/libs/shared/lib/vis/configuration/panel.tsx b/libs/shared/lib/vis/configuration/panel.tsx index b2dee9809c9ee481dcd1879888653dc40a775cdb..c46fa3adec473c3250576da4fc938cacd7cd1e91 100644 --- a/libs/shared/lib/vis/configuration/panel.tsx +++ b/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 diff --git a/libs/shared/lib/vis/manager/manager.tsx b/libs/shared/lib/vis/manager/manager.tsx index 2a7112c76ba42d2a5b546763ef5a3f5052e6e4db..f53ce861b7c23d6d1726574c798fbefd76fd5128 100644 --- a/libs/shared/lib/vis/manager/manager.tsx +++ b/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 })); diff --git a/libs/shared/lib/vis/panel.tsx b/libs/shared/lib/vis/panel.tsx index 58a5ca5141f0e08a1569421dbfe7dc06fb6dc78c..158830b99fe09528e96fa5e65bd07d666119178e 100644 --- a/libs/shared/lib/vis/panel.tsx +++ b/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> diff --git a/libs/shared/lib/vis/screens/noData.tsx b/libs/shared/lib/vis/screens/noData.tsx index 2054d59a385e6d4505bdfc9613ac6ef9f5f151d4..fafa7b810ea8114ae28dc383b1bf29901ab6a516 100644 --- a/libs/shared/lib/vis/screens/noData.tsx +++ b/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 ? (