[Lens] Reload on runtime edit (#97161)

x-pack/plugins/lens/public/app_plugin/app.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { ReactWrapper } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { App } from './app';
@@ -77,6 +77,8 @@ function createMockFrame(): jest.Mocked<EditorFrameInstance> {
   };
 }
 
+const sessionIdSubject = new Subject<string>();
+
 function createMockSearchService() {
   let sessionIdCounter = 1;
   return {
@@ -84,6 +86,7 @@ function createMockSearchService() {
       start: jest.fn(() => `sessionId-${sessionIdCounter++}`),
       clear: jest.fn(),
       getSessionId: jest.fn(() => `sessionId-${sessionIdCounter}`),
+      getSession$: jest.fn(() => sessionIdSubject.asObservable()),
     },
   };
 }
@@ -1328,6 +1331,24 @@ describe('Lens App', () => {
       );
     });
 
+    it('re-renders the frame if session id changes from the outside', async () => {
+      const services = makeDefaultServices();
+      const { frame } = mountWith({ props: undefined, services });
+
+      act(() => {
+        sessionIdSubject.next('new-session-id');
+      });
+      await act(async () => {
+        await new Promise((r) => setTimeout(r, 0));
+      });
+      expect(frame.mount).toHaveBeenCalledWith(
+        expect.any(Element),
+        expect.objectContaining({
+          searchSessionId: `new-session-id`,
+        })
+      );
+    });
+
     it('updates the searchSessionId when the active saved query is cleared', () => {
       const { component, frame, services } = mountWith({});
       act(() =>

x-pack/plugins/lens/public/app_plugin/app.tsx

@@ -14,7 +14,7 @@ import { Toast } from 'kibana/public';
 import { VisualizeFieldContext } from 'src/plugins/ui_actions/public';
 import { Datatable } from 'src/plugins/expressions/public';
 import { EuiBreadcrumb } from '@elastic/eui';
-import { finalize, switchMap, tap } from 'rxjs/operators';
+import { delay, finalize, switchMap, tap } from 'rxjs/operators';
 import { downloadMultipleAs } from '../../../../../src/plugins/share/public';
 import {
   createKbnUrlStateStorage,
@@ -221,11 +221,29 @@ export function App({
       kbnUrlStateStorage
     );
 
+    const sessionSubscription = data.search.session
+      .getSession$()
+      // wait for a tick to filter/timerange subscribers the chance to update the session id in the state
+      .pipe(delay(0))
+      // then update if it didn't get updated yet
+      .subscribe((newSessionId) => {
+        if (newSessionId) {
+          setState((prevState) => {
+            if (prevState.searchSessionId !== newSessionId) {
+              return { ...prevState, searchSessionId: newSessionId };
+            } else {
+              return prevState;
+            }
+          });
+        }
+      });
+
     return () => {
       stopSyncingQueryServiceStateWithUrl();
       filterSubscription.unsubscribe();
       timeSubscription.unsubscribe();
       autoRefreshSubscription.unsubscribe();
+      sessionSubscription.unsubscribe();
     };
   }, [
     data.query.filterManager,

x-pack/plugins/lens/public/indexpattern_datasource/datapanel.tsx

@@ -503,6 +503,8 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
       patterns: [currentIndexPattern.id],
     });
     onUpdateIndexPattern(newlyMappedIndexPattern[currentIndexPattern.id]);
+    // start a new session so all charts are refreshed
+    data.search.session.start();
   }, [data, currentIndexPattern, onUpdateIndexPattern]);
 
   const editField = useMemo(