[Visualize] Client Side caching

Closes: elastic#102622
alexwizp · Jul 16, 2021 · f53b790 · f53b790
1 parent 2e5e4ca
commit f53b790
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 11 deletions.
diff --git a/src/plugins/visualize/public/application/components/visualize_byvalue_editor.tsx b/src/plugins/visualize/public/application/components/visualize_byvalue_editor.tsx
@@ -33,14 +33,27 @@ export const VisualizeByValueEditor = ({ onAppLeave }: VisualizeAppProps) => {
   const [valueInput, setValueInput] = useState<VisualizeInput>();
 
   useEffect(() => {
-    const { originatingApp: value, embeddableId: embeddableIdValue, valueInput: valueInputValue } =
-      services.stateTransferService.getIncomingEditorState(VisualizeConstants.APP_ID) || {};
+    const { stateTransferService, history, data } = services;
+    const {
+      originatingApp: value,
+      embeddableId: embeddableIdValue,
+      valueInput: valueInputValue,
+      searchSessionId,
+    } = stateTransferService.getIncomingEditorState(VisualizeConstants.APP_ID) || {};
+
     setOriginatingApp(value);
     setValueInput(valueInputValue);
     setEmbeddableId(embeddableIdValue);
+
     if (!valueInputValue) {
       // if there is no value input to load, redirect to the visualize listing page.
-      services.history.replace(VisualizeConstants.LANDING_PAGE_PATH);
+      history.replace(VisualizeConstants.LANDING_PAGE_PATH);
+    }
+
+    if (searchSessionId) {
+      data.search.session.continue(searchSessionId);
+    } else {
+      data.search.session.start();
     }
   }, [services]);
 

diff --git a/src/plugins/visualize/public/application/components/visualize_editor.tsx b/src/plugins/visualize/public/application/components/visualize_editor.tsx
@@ -55,8 +55,16 @@ export const VisualizeEditor = ({ onAppLeave }: VisualizeAppProps) => {
   useLinkedSearchUpdates(services, eventEmitter, appState, savedVisInstance);
 
   useEffect(() => {
-    const { originatingApp: value } =
-      services.stateTransferService.getIncomingEditorState(VisualizeConstants.APP_ID) || {};
+    const { stateTransferService, data } = services;
+    const { originatingApp: value, searchSessionId } =
+      stateTransferService.getIncomingEditorState(VisualizeConstants.APP_ID) || {};
+
+    if (searchSessionId) {
+      data.search.session.continue(searchSessionId);
+    } else {
+      data.search.session.start();
+    }
+
     setOriginatingApp(value);
   }, [services]);
 
@@ -65,7 +73,7 @@ export const VisualizeEditor = ({ onAppLeave }: VisualizeAppProps) => {
     return () => {
       eventEmitter.removeAllListeners();
     };
-  }, [eventEmitter]);
+  }, [eventEmitter, services]);
 
   return (
     <VisualizeEditorCommon

diff --git a/src/plugins/visualize/public/application/components/visualize_top_nav.tsx b/src/plugins/visualize/public/application/components/visualize_top_nav.tsx
@@ -61,13 +61,21 @@ const TopNav = ({
     const session = embeddableHandler.openInspector();
     setInspectorSession(session);
   }, [embeddableHandler]);
+
+  const doReload = useCallback(async () => {
+    // start a new session to make sure all data is up to date
+    services.data.search.session.start();
+
+    await visInstance.embeddableHandler.reload();
+  }, [visInstance.embeddableHandler, services.data.search.session]);
+
   const handleRefresh = useCallback(
     (_payload: any, isUpdate?: boolean) => {
       if (isUpdate === false) {
-        visInstance.embeddableHandler.reload();
+        doReload();
       }
     },
-    [visInstance.embeddableHandler]
+    [doReload]
   );
 
   const config = useMemo(() => {
@@ -185,15 +193,15 @@ const TopNav = ({
       .getAutoRefreshFetch$()
       .subscribe(async (done) => {
         try {
-          await visInstance.embeddableHandler.reload();
+          await doReload();
         } finally {
           done();
         }
       });
     return () => {
       autoRefreshFetchSub.unsubscribe();
     };
-  }, [services.data.query.timefilter.timefilter, visInstance.embeddableHandler]);
+  }, [services.data.query.timefilter.timefilter, doReload]);
 
   return isChromeVisible ? (
     /**

diff --git a/src/plugins/visualize/public/application/utils/get_visualization_instance.ts b/src/plugins/visualize/public/application/utils/get_visualization_instance.ts
@@ -40,9 +40,10 @@ const createVisualizeEmbeddableAndLinkSavedSearch = async (
     savedObjectsPublic,
   } = visualizeServices;
   const embeddableHandler = (await createVisEmbeddableFromObject(vis, {
+    id: '',
     timeRange: data.query.timefilter.timefilter.getTime(),
     filters: data.query.filterManager.getFilters(),
-    id: '',
+    searchSessionId: data.search.session.getSessionId(),
   })) as VisualizeEmbeddableContract;
 
   embeddableHandler.getOutput$().subscribe((output) => {

diff --git a/src/plugins/visualize/public/plugin.ts b/src/plugins/visualize/public/plugin.ts
@@ -215,6 +215,7 @@ export class VisualizePlugin
         const { renderApp } = await import('./application');
         const unmount = renderApp(params, services);
         return () => {
+          data.search.session.clear();
           params.element.classList.remove('visAppWrapper');
           unlistenParentHistory();
           unmount();