[Visualize] Client Side caching (#105589)

* [Visualize] Client Side caching

Closes: #102622

* apply caching for returning to originatingApp

* fix case with 'save as' functiionality

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

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]);
 

src/plugins/visualize/public/application/components/visualize_editor.tsx

@@ -27,6 +27,7 @@ import { VisualizeConstants } from '../..';
 export const VisualizeEditor = ({ onAppLeave }: VisualizeAppProps) => {
   const { id: visualizationIdFromUrl } = useParams<{ id: string }>();
   const [originatingApp, setOriginatingApp] = useState<string>();
+  const [embeddableIdValue, setEmbeddableId] = useState<string>();
   const { services } = useKibana<VisualizeServices>();
   const [eventEmitter] = useState(new EventEmitter());
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(!visualizationIdFromUrl);
@@ -55,8 +56,17 @@ 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, embeddableId } =
+      stateTransferService.getIncomingEditorState(VisualizeConstants.APP_ID) || {};
+
+    if (searchSessionId) {
+      data.search.session.continue(searchSessionId);
+    } else {
+      data.search.session.start();
+    }
+
+    setEmbeddableId(embeddableId);
     setOriginatingApp(value);
   }, [services]);
 
@@ -65,7 +75,7 @@ export const VisualizeEditor = ({ onAppLeave }: VisualizeAppProps) => {
     return () => {
       eventEmitter.removeAllListeners();
     };
-  }, [eventEmitter]);
+  }, [eventEmitter, services]);
 
   return (
     <VisualizeEditorCommon
@@ -82,6 +92,7 @@ export const VisualizeEditor = ({ onAppLeave }: VisualizeAppProps) => {
       setHasUnsavedChanges={setHasUnsavedChanges}
       visEditorRef={visEditorRef}
       onAppLeave={onAppLeave}
+      embeddableId={embeddableIdValue}
     />
   );
 };

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,7 +193,7 @@ const TopNav = ({
       .getAutoRefreshFetch$()
       .subscribe(async (done) => {
         try {
-          await visInstance.embeddableHandler.reload();
+          await doReload();
         } finally {
           done();
         }
@@ -193,7 +201,7 @@ const TopNav = ({
     return () => {
       autoRefreshFetchSub.unsubscribe();
     };
-  }, [services.data.query.timefilter.timefilter, visInstance.embeddableHandler]);
+  }, [services.data.query.timefilter.timefilter, doReload]);
 
   return isChromeVisible ? (
     /**

src/plugins/visualize/public/application/utils/get_top_nav_config.tsx

@@ -81,6 +81,7 @@ export const getTopNavConfig = (
     embeddableId,
   }: TopNavConfigParams,
   {
+    data,
     application,
     chrome,
     history,
@@ -154,17 +155,17 @@ export const getTopNavConfig = (
               saveOptions.dashboardId === 'new' ? '#/create' : `#/view/${saveOptions.dashboardId}`;
           }
 
-          if (newlyCreated && stateTransfer) {
+          if (stateTransfer) {
             stateTransfer.navigateToWithEmbeddablePackage(app, {
               state: {
                 type: VISUALIZE_EMBEDDABLE_TYPE,
                 input: { savedObjectId: id },
-                embeddableId,
+                embeddableId: savedVis.copyOnSave ? undefined : embeddableId,
+                searchSessionId: data.search.session.getSessionId(),
               },
               path,
             });
           } else {
-            // TODO: need the same thing here?
             application.navigateToApp(app, { path });
           }
         } else {
@@ -214,6 +215,7 @@ export const getTopNavConfig = (
       } as VisualizeInput,
       embeddableId,
       type: VISUALIZE_EMBEDDABLE_TYPE,
+      searchSessionId: data.search.session.getSessionId(),
     };
     stateTransfer.navigateToWithEmbeddablePackage(originatingApp, { state });
   };
@@ -394,6 +396,7 @@ export const getTopNavConfig = (
                     } as VisualizeInput,
                     embeddableId,
                     type: VISUALIZE_EMBEDDABLE_TYPE,
+                    searchSessionId: data.search.session.getSessionId(),
                   };
 
                   const path = dashboardId === 'new' ? '#/create' : `#/view/${dashboardId}`;

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) => {

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();