Merge 1341

Hotfix/slow navigation in expand
BlueBrain · Jul 19, 2023 · ed15c7b · ed15c7b
2 parents 6f21766 + a26e925
commit ed15c7b
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 21 deletions.
diff --git a/src/shared/canvas/DataExplorerGraphFlow/DateExplorerGraphFlow.tsx b/src/shared/canvas/DataExplorerGraphFlow/DateExplorerGraphFlow.tsx
@@ -8,6 +8,10 @@ import {
   DATA_EXPLORER_GRAPH_FLOW_PATH,
   PopulateDataExplorerGraphFlow,
   ResetDataExplorerGraphFlow,
+  DataExplorerFlowSliceListener,
+  DataExplorerMiddlewareMatcher,
+  calculateDateExplorerGraphFlowDigest,
+  TDataExplorerState,
 } from '../../store/reducers/data-explorer';
 import {
   NavigationArrows,
@@ -62,6 +66,18 @@ const DataExplorerGraphFlow = () => {
     };
   }, [ResourceResolutionCache]);
 
+  useEffect(() => {
+    DataExplorerFlowSliceListener.startListening({
+      matcher: DataExplorerMiddlewareMatcher,
+      effect: (_, api) => {
+        const state = (api.getState() as RootState).dataExplorer;
+        calculateDateExplorerGraphFlowDigest(state);
+      },
+    });
+    return () => {
+      DataExplorerFlowSliceListener.clearListeners();
+    };
+  }, []);
   return !current ? (
     <DataExplorerGraphFlowEmpty />
   ) : (

diff --git a/src/shared/components/ResourceEditor/useEditorTooltip.tsx b/src/shared/components/ResourceEditor/useEditorTooltip.tsx
@@ -190,11 +190,7 @@ function useEditorTooltip({
       if (!tooltip.parentNode) {
         return;
       }
-      setTimeout(() => {
-        if (tooltip.parentNode) {
-          tooltip.parentNode.removeChild(tooltip);
-        }
-      }, 300);
+      tooltip.parentNode.removeChild(tooltip);
     }
     function showTooltip(content: HTMLDivElement, node: HTMLElement) {
       const tooltip = document.createElement('div');
@@ -223,7 +219,7 @@ function useEditorTooltip({
           tooltip.remove();
         }
         return clearTimeout(timeoutId);
-      }, 3000);
+      }, 2000);
 
       return tooltip;
     }
@@ -286,6 +282,7 @@ function useEditorTooltip({
     allowTooltip,
   ]);
 }
+
 function useEditorPopover({
   ref,
   orgLabel,
@@ -341,6 +338,7 @@ function useEditorPopover({
       );
     }
     async function onMouseDown(_: CodeMirror.Editor, ev: MouseEvent) {
+      removeTooltipsFromDOM();
       const node = ev.target as HTMLElement;
       if (node) {
         const { token } = getTokenAndPosAt(ev, currentEditor);

diff --git a/src/shared/store/index.ts b/src/shared/store/index.ts
@@ -11,6 +11,7 @@ import { reducer as oidcReducer } from 'redux-oidc';
 import { History } from 'history';
 import { NexusClient } from '@bbp/nexus-sdk';
 import reducers from './reducers';
+import { DataExplorerFlowSliceListener } from './reducers/data-explorer';
 
 export type Services = {
   nexus: NexusClient;
@@ -47,7 +48,8 @@ export default function configureStore(
     composeEnhancers(
       applyMiddleware(
         thunk.withExtraArgument({ nexus }),
-        routerMiddleware(history)
+        routerMiddleware(history),
+        DataExplorerFlowSliceListener.middleware
       )
     )
   );

diff --git a/src/shared/store/reducers/data-explorer.ts b/src/shared/store/reducers/data-explorer.ts
@@ -1,4 +1,8 @@
-import { createSlice } from '@reduxjs/toolkit';
+import {
+  createListenerMiddleware,
+  createSlice,
+  isAnyOf,
+} from '@reduxjs/toolkit';
 import {
   slice,
   clone,
@@ -70,7 +74,7 @@ const initialState: TDataExplorerState = {
   fullscreen: false,
 };
 
-const calculateNewDigest = (state: TDataExplorerState) => {
+const calculateDateExplorerGraphFlowDigest = (state: TDataExplorerState) => {
   const clonedState = clone(state);
   const digest = btoa(JSON.stringify(clonedState));
   sessionStorage.setItem(DATA_EXPLORER_GRAPH_FLOW_DIGEST, digest);
@@ -79,13 +83,13 @@ const calculateNewDigest = (state: TDataExplorerState) => {
 const isShrinkable = (links: TDELink[]) => {
   return links.length > MAX_NAVIGATION_ITEMS_IN_STACK;
 };
-function insert(arr: any[], index: number, item: any) {
-  arr.splice(index, 0, item);
-}
+
+const DataExplorerFlowSliceName = 'data-explorer-graph-flow';
+const DataExplorerFlowSliceListener = createListenerMiddleware();
 
 export const dataExplorerSlice = createSlice({
   initialState,
-  name: 'data-explorer-graph-flow',
+  name: DataExplorerFlowSliceName,
   reducers: {
     PopulateDataExplorerGraphFlow: (state, action) => {
       const digest = action.payload;
@@ -125,7 +129,7 @@ export const dataExplorerSlice = createSlice({
           shrinked: false,
         },
       };
-      calculateNewDigest(newState);
+      calculateDateExplorerGraphFlowDigest(newState);
       return newState;
     },
     AddNewNodeDataExplorerGraphFlow: (state, action) => {
@@ -196,7 +200,6 @@ export const dataExplorerSlice = createSlice({
           shrinked: isShrinkable(rightNodesLinks),
         },
       };
-      calculateNewDigest(newState);
       return newState;
     },
     JumpToNodeDataExplorerGraphFlow: (state, action) => {
@@ -228,7 +231,6 @@ export const dataExplorerSlice = createSlice({
         rightNodes,
         current,
       };
-      calculateNewDigest(newState);
       return newState;
     },
     ReturnBackDataExplorerGraphFlow: state => {
@@ -253,7 +255,6 @@ export const dataExplorerSlice = createSlice({
         leftNodes,
         current: newCurrent,
       };
-      calculateNewDigest(newState);
       return newState;
     },
     MoveForwardDataExplorerGraphFlow: state => {
@@ -278,7 +279,6 @@ export const dataExplorerSlice = createSlice({
         leftNodes,
         current: newCurrent,
       };
-      calculateNewDigest(newState);
       return newState;
     },
     ExpandNavigationStackDataExplorerGraphFlow: (state, action) => {
@@ -301,7 +301,6 @@ export const dataExplorerSlice = createSlice({
         ...state,
         ...sideUpdater,
       };
-      calculateNewDigest(newState);
       return newState;
     },
     ShrinkNavigationStackDataExplorerGraphFlow: (state, action) => {
@@ -324,7 +323,6 @@ export const dataExplorerSlice = createSlice({
         ...state,
         ...sideUpdater,
       };
-      calculateNewDigest(newState);
       return newState;
     },
     ResetDataExplorerGraphFlow: (_, action) => {
@@ -338,11 +336,11 @@ export const dataExplorerSlice = createSlice({
         ...state,
         fullscreen: fullscreen ?? !state.fullscreen,
       };
-      calculateNewDigest(newState);
       return newState;
     },
   },
 });
+
 export const {
   PopulateDataExplorerGraphFlow,
   InitNewVisitDataExplorerGraphView,
@@ -356,4 +354,20 @@ export const {
   InitDataExplorerGraphFlowFullscreenVersion,
 } = dataExplorerSlice.actions;
 
+const DataExplorerMiddlewareMatcher = isAnyOf(
+  InitNewVisitDataExplorerGraphView,
+  AddNewNodeDataExplorerGraphFlow,
+  ExpandNavigationStackDataExplorerGraphFlow,
+  ShrinkNavigationStackDataExplorerGraphFlow,
+  JumpToNodeDataExplorerGraphFlow,
+  ReturnBackDataExplorerGraphFlow,
+  MoveForwardDataExplorerGraphFlow,
+  InitDataExplorerGraphFlowFullscreenVersion
+);
+export {
+  DataExplorerFlowSliceName,
+  DataExplorerMiddlewareMatcher,
+  DataExplorerFlowSliceListener,
+  calculateDateExplorerGraphFlowDigest,
+};
 export default dataExplorerSlice.reducer;