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

@@ -5,8 +5,8 @@ import { isEqual } from 'lodash-es';
 
 export type VisStateSettings = VisualizationSettingsType[];
 export type VisState = {
-  activeVisualizationIndex: number; // uses underscore_case to match data model from backend
-  openVisualizationArray: VisStateSettings; // uses underscore_case to match data model from backend
+  activeVisualizationIndex: number;
+  openVisualizationArray: VisStateSettings;
 };
 
 export const initialState: VisState = {
@@ -19,48 +19,58 @@ export const visualizationSlice = createSlice({
   initialState,
   reducers: {
     removeVisualization: (state, action: PayloadAction<number | undefined>) => {
-      let index = action.payload || state.activeVisualizationIndex;
-      state.openVisualizationArray.splice(index, 1);
-      if (state.activeVisualizationIndex === index) {
-        if (state.openVisualizationArray.length === 0) state.activeVisualizationIndex = -1;
-        else {
-          state.activeVisualizationIndex = Math.max(state.openVisualizationArray.length - 1, 0);
+      const index = action.payload ?? state.activeVisualizationIndex;
+      
+      if (index >= 0 && index < state.openVisualizationArray.length) {
+        state.openVisualizationArray.splice(index, 1);
+      
+        if (state.openVisualizationArray.length === 0) {
+          state.activeVisualizationIndex = -1;
+        } else if (state.activeVisualizationIndex >= state.openVisualizationArray.length) {
+          state.activeVisualizationIndex = state.openVisualizationArray.length - 1;
+        } else if (state.activeVisualizationIndex === index) {
+          state.activeVisualizationIndex = index < state.openVisualizationArray.length ? index : index - 1;
+        } else if (state.activeVisualizationIndex > index) {
+          state.activeVisualizationIndex--;
         }
       }
     },
     setActiveVisualization: (state, action: PayloadAction<number>) => {
-      state.activeVisualizationIndex = action.payload;
+      if (action.payload >= -1 && action.payload < state.openVisualizationArray.length) {
+        state.activeVisualizationIndex = action.payload;
+      }
     },
     setVisualizationState: (state, action: PayloadAction<VisState>) => {
       if (action.payload.activeVisualizationIndex !== undefined && !isEqual(action.payload, state)) {
         state.openVisualizationArray = action.payload.openVisualizationArray || [];
-        state.activeVisualizationIndex = action.payload.activeVisualizationIndex;
+        state.activeVisualizationIndex = Math.min(
+          action.payload.activeVisualizationIndex,
+          state.openVisualizationArray.length - 1
+        );
       }
     },
     updateVisualization: (state, action: PayloadAction<{ id: number; settings: VisualizationSettingsType }>) => {
       const { id, settings } = action.payload;
-      state.openVisualizationArray[id] = settings;
+      if (id >= 0 && id < state.openVisualizationArray.length) {
+        state.openVisualizationArray[id] = settings;
+      }
     },
     addVisualization: (state, action: PayloadAction<VisualizationSettingsType>) => {
       state.openVisualizationArray.push(action.payload);
       state.activeVisualizationIndex = state.openVisualizationArray.length - 1;
     },
     updateActiveVisualization: (state, action: PayloadAction<VisualizationSettingsType>) => {
-      if (state.activeVisualizationIndex === -1) {
-        return;
+      if (state.activeVisualizationIndex >= 0) {
+        state.openVisualizationArray[state.activeVisualizationIndex] = action.payload;
       }
-
-      state.openVisualizationArray[state.activeVisualizationIndex] = action.payload;
     },
     updateActiveVisualizationAttributes: (state, action: PayloadAction<Record<string, any>>) => {
-      if (state.activeVisualizationIndex === -1) {
-        return;
+      if (state.activeVisualizationIndex >= 0) {
+        state.openVisualizationArray[state.activeVisualizationIndex] = {
+          ...state.openVisualizationArray[state.activeVisualizationIndex],
+          ...action.payload,
+        };
       }
-
-      state.openVisualizationArray[state.activeVisualizationIndex] = {
-        ...state.openVisualizationArray[state.activeVisualizationIndex],
-        ...action.payload,
-      };
     },
     reorderVisState: (
       state,
@@ -70,14 +80,30 @@ export const visualizationSlice = createSlice({
       }>,
     ) => {
       const { id, newPosition } = action.payload;
-      const settingsCopy = [...state.openVisualizationArray];
-      settingsCopy.splice(newPosition, 0, settingsCopy.splice(id, 1)[0]);
-      state.openVisualizationArray = settingsCopy;
+      if (
+        id >= 0 && 
+        id < state.openVisualizationArray.length && 
+        newPosition >= 0 && 
+        newPosition < state.openVisualizationArray.length
+      ) {
+        const settingsCopy = [...state.openVisualizationArray];
+        const [movedItem] = settingsCopy.splice(id, 1);
+        settingsCopy.splice(newPosition, 0, movedItem);
+        state.openVisualizationArray = settingsCopy;
 
-      if (state.activeVisualizationIndex === id) {
-        state.activeVisualizationIndex = newPosition;
-      } else if (state.activeVisualizationIndex === newPosition) {
-        state.activeVisualizationIndex = id;
+        if (state.activeVisualizationIndex === id) {
+          state.activeVisualizationIndex = newPosition;
+        } else if (
+          state.activeVisualizationIndex > id && 
+          state.activeVisualizationIndex <= newPosition
+        ) {
+          state.activeVisualizationIndex--;
+        } else if (
+          state.activeVisualizationIndex < id && 
+          state.activeVisualizationIndex >= newPosition
+        ) {
+          state.activeVisualizationIndex++;
+        }
       }
     },
   },
@@ -100,4 +126,4 @@ export const visualizationActive = (state: RootState) =>
   state.visualize.activeVisualizationIndex !== -1
     ? state.visualize.openVisualizationArray?.[state.visualize.activeVisualizationIndex]
     : undefined;
-export default visualizationSlice.reducer;
+export default visualizationSlice.reducer;
\ No newline at end of file

libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx

@@ -2,7 +2,7 @@ import { Edge, GraphQueryResult, Node, useML } from '@graphpolaris/shared/lib/da
 import { dataColors, visualizationColors } from 'config';
 import { Viewport } from 'pixi-viewport';
 import { Application, ColorSource, Container, FederatedPointerEvent, Graphics, IPointData, Point, Text } from 'pixi.js';
-import { useEffect, useRef, useState, useImperativeHandle, forwardRef } from 'react';
+import { useEffect, useRef, useState, useMemo, useImperativeHandle, forwardRef } from 'react';
 import { LinkType, NodeType } from '../types';
 import { NLPopup } from './MatrixPopup';
 
@@ -63,10 +63,11 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
   const globalConfig = useConfig();
 
   useEffect(() => {
-    if (props.graph) {
-      setup();
+    if (props.graph && internalRef.current && imperative.current) {
+      if (isSetup.current === false) setup();
+      else update();
     }
-  }, [globalConfig.theme]);
+  }, [props.graph, globalConfig.theme]);
 
   let columnOrder: string[] = [];
   let rowOrder: string[] = [];
@@ -82,6 +83,20 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
   const isSetup = useRef(false);
   const ml = useML();
 
+
+  const app = useMemo(
+    () =>
+      new Application({
+        backgroundAlpha: 0,
+        antialias: true,
+        autoDensity: true,
+        eventMode: 'auto',
+        resolution: window.devicePixelRatio || 2,
+        view: canvas.current as HTMLCanvasElement,
+      }),
+    [canvas.current],
+  );
+
   useEffect(() => {
     if (typeof refExternal === 'function') {
       refExternal(internalRef.current);
@@ -135,13 +150,11 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
     },
   }));
 
-  let app: Application;
-
   function resize() {
     const width = internalRef?.current?.clientWidth || 1000;
     const height = internalRef?.current?.clientHeight || 1000;
 
-    app.renderer.resize(width, height);
+    app?.renderer.resize(width, height);
     if (viewport.current) {
       viewport.current.screenWidth = width;
       viewport.current.worldWidth = width;
@@ -152,22 +165,23 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
     if (props.graph) {
       setup();
     }
-
-    app.render();
+    app?.render();
   }
-
+  
   useEffect(() => {
-    if (props.graph && internalRef.current && internalRef.current.children.length > 0) {
-      if (!isSetup.current) setup();
-      else update();
+    return () => {
+      app.destroy();
     }
-  }, [props.graph]);
+  }, []);
 
   useEffect(() => {
-    if (props.graph && internalRef.current && internalRef.current.children.length > 0) {
-      setup();
-    }
-  }, [props.settings]);
+    if (!internalRef.current) return;
+    const resizeObserver = new ResizeObserver(() => {
+      resize();
+    });
+    resizeObserver.observe(internalRef.current);
+    return () => resizeObserver.disconnect();
+  }, []);
 
   // TODO implement search results
   // useEffect(() => {
@@ -306,22 +320,6 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
   const setup = () => {
     if (!props.graph) throw Error('Graph is undefined; setup not possible');
 
-    if (app == null) {
-      app = new Application({
-        backgroundAlpha: 0,
-        antialias: true,
-        autoDensity: true,
-        eventMode: 'auto',
-        resolution: window.devicePixelRatio || 1,
-        view: canvas.current as HTMLCanvasElement,
-      });
-
-      const resizeObserver = new ResizeObserver(() => {
-        resize();
-      });
-      resizeObserver.observe(internalRef.current as HTMLDivElement);
-    }
-
     if (svg.current != null) {
       select(svg.current).selectAll('*').remove();
     }
@@ -409,8 +407,9 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
     viewport.current.drag().pinch().wheel().animate({}).decelerate({ friction: 0.75 });
 
     app.ticker.add(tick);
-    update();
     isSetup.current = true;
+
+    update();
   };
 
   let scaleColumns: ScaleBand<string>;

libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx

@@ -774,10 +774,7 @@ export const NLPixi = forwardRef((props: Props, refExternal) => {
     return () => {
       nodeMap.current.clear();
       linkLabelMap.current.clear();
-      linkGfx.clear();
-      nodeLayer.removeChildren();
-      linkLabelLayer.removeChildren();
-      nodeLabelLayer.removeChildren();
+      app.destroy();
 
       const layout = layoutAlgorithm.current as GraphologyForceAtlas2Webworker;
       if (layout?.cleanup != null) layout.cleanup();