From 440ff93917d4495510b665f96cd208b446e6555a Mon Sep 17 00:00:00 2001
From: 2427021 <s.a.vink@students.uu.nl>
Date: Wed, 27 Mar 2024 15:00:16 +0100
Subject: [PATCH] feat(visManager): interaction slice
---
.../lib/data-access/store/interactionSlice.ts | 35 +++++++++++++++++++
libs/shared/lib/vis/configuration/panel.tsx | 2 +-
libs/shared/lib/vis/manager/manager.tsx | 18 ++++------
libs/shared/lib/vis/panel.tsx | 2 +-
libs/shared/lib/vis/screens/noData.tsx | 2 +-
5 files changed, 44 insertions(+), 15 deletions(-)
create mode 100644 libs/shared/lib/data-access/store/interactionSlice.ts
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 000000000..89d18d410
--- /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 b2dee9809..c46fa3ade 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 2a7112c76..f53ce861b 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 58a5ca514..158830b99 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 2054d59a3..fafa7b810 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 ? (
--
GitLab