From 07a427988d78dd778d3054999dd97e322edd4905 Mon Sep 17 00:00:00 2001
From: chenzo <ccychenzo@gmail.com>
Date: Tue, 1 Apr 2025 21:48:01 +0800
Subject: [PATCH 01/13] Upgrade package from JupyterLab 3.x to 4.x

---
 .../package.json                              | 61 ++++++++++---------
 .../src/SidePanel.ts                          |  9 +--
 .../src/clusters/Clusters.tsx                 | 12 ++--
 .../src/common/HtmlView.tsx                   |  2 +-
 .../src/inspector/InspectableList.tsx         |  2 +-
 .../src/inspector/InspectableListItem.tsx     |  2 +-
 .../src/inspector/InspectableView.tsx         | 10 +--
 .../src/inspector/Inspectables.tsx            |  6 +-
 .../src/inspector/InteractiveInspector.tsx    |  2 +-
 .../src/kernel/InterruptKernelButton.tsx      |  2 +-
 10 files changed, 56 insertions(+), 52 deletions(-)

diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/package.json b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/package.json
index a3d204a25f5f..8466e1f1c75d 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/package.json
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/package.json
@@ -43,38 +43,41 @@
     "watch:src": "tsc -w"
   },
   "dependencies": {
-    "@jupyterlab/application": "^3.1.17",
-    "@jupyterlab/launcher": "^3.1.17",
-    "@jupyterlab/mainmenu": "^3.1.17",
-    "@rmwc/button": "^6.1.3",
-    "@rmwc/fab": "^6.1.4",
-    "@rmwc/data-table": "^6.0.14",
-    "@rmwc/dialog": "^7.0.2",
-    "@rmwc/drawer": "^6.0.14",
-    "@rmwc/list": "^6.1.3",
-    "@rmwc/textfield": "^6.1.4",
-    "@rmwc/tooltip": "^6.1.4",
-    "@rmwc/top-app-bar": "^6.1.3",
-    "material-design-icons": "^3.0.1"
+    "@jupyterlab/application": "^4.3.6",
+    "@jupyterlab/launcher": "^4.3.6",
+    "@jupyterlab/mainmenu": "^4.3.6",
+    "@lumino/widgets": "^2.2.1",
+    "@rmwc/button": "^8.0.6",
+    "@rmwc/data-table": "^8.0.6",
+    "@rmwc/dialog": "^8.0.6",
+    "@rmwc/drawer": "^8.0.6",
+    "@rmwc/fab": "^8.0.6",
+    "@rmwc/list": "^8.0.6",
+    "@rmwc/textfield": "^8.0.6",
+    "@rmwc/tooltip": "^8.0.6",
+    "@rmwc/top-app-bar": "^8.0.6",
+    "material-design-icons": "^3.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@jupyterlab/builder": "^3.1.0",
-    "@types/jest": "^26.0.7",
-    "@types/react-dom": "^16.9.8",
-    "@typescript-eslint/eslint-plugin": "^4.8.1",
-    "@typescript-eslint/parser": "^4.8.1",
-    "eslint": "^7.14.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.5",
+    "@jupyterlab/builder": "^4.3.6",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.33.2",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.1.0",
+    "jest": "^29.7.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.1.1",
-    "react-dom": "^17.0.1",
-    "rimraf": "^3.0.2",
-    "ts-jest": "^26.1.3",
-    "typescript": "~4.1.3"
+    "prettier": "^3.2.4",
+    "rimraf": "^5.0.5",
+    "ts-jest": "^29.1.2",
+    "typescript": "~5.3.3"
   },
   "sideEffects": [
     "style/*.css",
@@ -86,6 +89,6 @@
   },
   "test": "jest",
   "resolutions": {
-    "@types/react": "~16.9.16"
+    "@types/react": "^18.2.0"
   }
 }
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/SidePanel.ts b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/SidePanel.ts
index 596f4d3673c4..fb86b0a53fdf 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/SidePanel.ts
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/SidePanel.ts
@@ -14,7 +14,7 @@ import {
   ReactWidget,
   SessionContext,
   ISessionContext,
-  sessionContextDialogs
+  SessionContextDialogs
 } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ServiceManager } from '@jupyterlab/services';
@@ -64,7 +64,7 @@ export class SidePanel extends BoxPanel {
     } else {
       let sessionModel = sessionModelItr.next();
       while (sessionModel !== undefined) {
-        if (sessionModel.kernel.id !== firstModel.kernel.id) {
+        if (sessionModel.value.kernel.id !== firstModel.value.kernel.id) {
           // There is more than one unique running kernel.
           onlyOneUniqueKernelExists = false;
           break;
@@ -78,7 +78,7 @@ export class SidePanel extends BoxPanel {
       // kernel.
       if (onlyOneUniqueKernelExists) {
         this._sessionContext.sessionManager.connectTo({
-          model: firstModel,
+          model: firstModel.value,
           kernelConnectionOptions: {
             // Only one connection can handleComms. Leave it to the connection
             // established by the opened notebook.
@@ -86,10 +86,11 @@ export class SidePanel extends BoxPanel {
           }
         });
         // Connect to the unique kernel.
-        this._sessionContext.changeKernel(firstModel.kernel);
+        this._sessionContext.changeKernel(firstModel.value.kernel);
       } else {
         // Let the user choose among sessions and kernels when there is no
         // or more than 1 running kernels.
+        const sessionContextDialogs = new SessionContextDialogs();
         await sessionContextDialogs.selectKernel(this._sessionContext);
       }
     } catch (err) {
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/clusters/Clusters.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/clusters/Clusters.tsx
index 51542563d238..1391010d4aa0 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/clusters/Clusters.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/clusters/Clusters.tsx
@@ -209,7 +209,7 @@ export class Clusters extends React.Component<IClustersProps, IClustersState> {
                   style={{ backgroundColor: 'var(--mdc-theme-error)' }}
                   theme={['onError']}
                   mini
-                  onClick={e => {
+                  onClick={() => {
                     this.displayDialog(true, key, value['cluster_name']);
                   }}
                 />
@@ -234,7 +234,7 @@ export class Clusters extends React.Component<IClustersProps, IClustersState> {
             label="Default cluster"
             enhanced
             options={clusterNames}
-            onChange={e => this.setDefaultCluster(e.currentTarget.value)}
+            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => this.setDefaultCluster(e.currentTarget.value)}
             value={this.state.defaultClusterId}
           />
           <Dialog
@@ -253,7 +253,7 @@ export class Clusters extends React.Component<IClustersProps, IClustersState> {
               </DialogButton>
               <DialogButton
                 action="accept"
-                onClick={e => {
+                onClick={() => {
                   this.deleteCluster(this.state.selectedId);
                 }}
               >
@@ -286,7 +286,7 @@ export class Clusters extends React.Component<IClustersProps, IClustersState> {
 
   private _inspectKernelCode: string;
   private _model: KernelModel;
-  private _queryKernelTimerId: number;
-  private _updateRenderTimerId: number;
-  private _updateSessionInfoTimerId: number;
+  private _queryKernelTimerId: ReturnType<typeof setInterval>;
+  private _updateRenderTimerId: ReturnType<typeof setInterval>;
+  private _updateSessionInfoTimerId: ReturnType<typeof setInterval>;
 }
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/common/HtmlView.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/common/HtmlView.tsx
index 1cd35b423cf5..2189d6eb2146 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/common/HtmlView.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/common/HtmlView.tsx
@@ -88,7 +88,7 @@ export class HtmlView extends React.Component<IHtmlViewProps, IHtmlViewState> {
     );
   }
 
-  private _updateRenderTimerId: number;
+  private _updateRenderTimerId: ReturnType<typeof setInterval>;
 }
 
 /**
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/InspectableList.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/InspectableList.tsx
index 90e262ced0a4..cde34653208d 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/InspectableList.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/InspectableList.tsx
@@ -123,5 +123,5 @@ export class InspectableList extends React.Component<
     });
   }
 
-  private _updateRenderTimerId: number;
+  private _updateRenderTimerId: ReturnType<typeof setInterval>;
 }
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/InspectableListItem.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/InspectableListItem.tsx
index 9fa2075965a7..4abd846635de 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/InspectableListItem.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/InspectableListItem.tsx
@@ -98,5 +98,5 @@ export class InspectableListItem extends React.Component<
     );
   }
 
-  private _updateRenderTimerId: number;
+  private _updateRenderTimerId: ReturnType<typeof setInterval>;
 }
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/InspectableView.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/InspectableView.tsx
index c04c45722a11..3c949e3126e9 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/InspectableView.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/InspectableView.tsx
@@ -131,7 +131,7 @@ export class InspectableView extends React.Component<
         <Checkbox
           label="Include Window Info"
           checked={showOptions.includeWindowInfo}
-          onChange={(e): void => {
+          onChange={(e: React.ChangeEvent<HTMLInputElement>): void => {
             showOptions.includeWindowInfo = !!e.currentTarget.checked;
             this.setState({ options: showOptions });
           }}
@@ -146,7 +146,7 @@ export class InspectableView extends React.Component<
         <Checkbox
           label="Visualize in Facets"
           checked={showOptions.visualizeInFacets}
-          onChange={(e): void => {
+          onChange={(e: React.ChangeEvent<HTMLInputElement>): void => {
             showOptions.visualizeInFacets = !!e.currentTarget.checked;
             this.setState({ options: showOptions });
           }}
@@ -169,7 +169,7 @@ export class InspectableView extends React.Component<
           label="Duration"
           floatLabel
           placeholder={showOptions.duration}
-          onChange={(e): void => {
+          onChange={(e: React.ChangeEvent<HTMLInputElement>): void => {
             showOptions.duration = e.currentTarget.value;
           }}
         />
@@ -190,7 +190,7 @@ export class InspectableView extends React.Component<
           label="Element Number"
           floatLabel
           placeholder={showOptions.n}
-          onChange={(e): void => {
+          onChange={(e: React.ChangeEvent<HTMLInputElement>): void => {
             showOptions.n = e.currentTarget.value;
           }}
         />
@@ -220,5 +220,5 @@ export class InspectableView extends React.Component<
     } as IShowOptions;
   }
 
-  private _updateRenderTimerId: number;
+  private _updateRenderTimerId: ReturnType<typeof setInterval>;
 }
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/Inspectables.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/Inspectables.tsx
index a38b3b994b01..08fff2077835 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/Inspectables.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/Inspectables.tsx
@@ -72,7 +72,7 @@ export class Inspectables extends React.Component<
     if (
       Object.keys(inspectablesToUpdate).length &&
       JSON.stringify(this.state.inspectables) !==
-        JSON.stringify(inspectablesToUpdate)
+      JSON.stringify(inspectablesToUpdate)
     ) {
       this.setState({ inspectables: inspectablesToUpdate });
     }
@@ -99,6 +99,6 @@ export class Inspectables extends React.Component<
 
   private _inspectKernelCode: string;
   private _model: KernelModel;
-  private _queryKernelTimerId: number;
-  private _updateRenderTimerId: number;
+  private _queryKernelTimerId: ReturnType<typeof setInterval>;
+  private _updateRenderTimerId: ReturnType<typeof setInterval>;
 }
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/InteractiveInspector.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/InteractiveInspector.tsx
index 854acb2ebd19..9eaffd1588d9 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/InteractiveInspector.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/InteractiveInspector.tsx
@@ -129,5 +129,5 @@ export class InteractiveInspector extends React.Component<
     );
   }
 
-  private _updateSessionInfoTimerId: number;
+  private _updateSessionInfoTimerId: ReturnType<typeof setInterval>;
 }
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/kernel/InterruptKernelButton.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/kernel/InterruptKernelButton.tsx
index 0ab9be7f516a..9bbe7b3e2e33 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/kernel/InterruptKernelButton.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/kernel/InterruptKernelButton.tsx
@@ -78,5 +78,5 @@ export class InterruptKernelButton extends React.Component<
     return <Button label="stop" onClick={this.onClick} danger raised />;
   }
 
-  private _updateRenderTimerId: number;
+  private _updateRenderTimerId: ReturnType<typeof setInterval>;
 }

From 41d89b7fcabcdd5080c46c1742554e73c40abab2 Mon Sep 17 00:00:00 2001
From: chenzo <ccychenzo@gmail.com>
Date: Tue, 1 Apr 2025 22:04:16 +0800
Subject: [PATCH 02/13] Update CHANGES.md

---
 CHANGES.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGES.md b/CHANGES.md
index ba020af3fa85..f44ba93addfd 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -67,7 +67,7 @@
 
 ## New Features / Improvements
 
-* X feature added (Java/Python) ([#X](https://github.com/apache/beam/issues/X)).
+* Python: Added JupyterLab 4.x extension compatibility for enhanced notebook integration ([#34495](https://github.com/apache/beam/pull/34495)).
 
 ## Breaking Changes
 

From 25d7987028c32c3f15d3c7b8a082dfea247e81be Mon Sep 17 00:00:00 2001
From: chenzo <ccychenzo@gmail.com>
Date: Wed, 2 Apr 2025 09:52:45 +0800
Subject: [PATCH 03/13] Upgrade to adapt React 18

---
 .../src/__tests__/clusters/Clusters.test.tsx  | 18 +++++-------
 .../src/__tests__/common/HtmlView.test.tsx    | 18 ++++++------
 .../inspector/InspectableList.test.tsx        | 13 +++++----
 .../inspector/InspectableListItem.test.tsx    | 13 +++++----
 .../inspector/InspectableView.test.tsx        | 17 ++++++-----
 .../__tests__/inspector/Inspectables.test.tsx | 12 ++++----
 .../inspector/InteractiveInspector.test.tsx   | 28 +++++++++----------
 .../kernel/InterruptKernelButton.test.tsx     | 22 +++++++--------
 .../src/clusters/Clusters.tsx                 |  4 ++-
 .../src/inspector/Inspectables.tsx            |  2 +-
 10 files changed, 73 insertions(+), 74 deletions(-)

diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/clusters/Clusters.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/clusters/Clusters.test.tsx
index 632e7c5df44a..283c064a6db4 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/clusters/Clusters.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/clusters/Clusters.test.tsx
@@ -12,20 +12,22 @@
 
 import * as React from 'react';
 
-import { render, unmountComponentAtNode } from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 
-import { act } from 'react-dom/test-utils';
+import { act } from 'react';
 
 import { Clusters } from '../../clusters/Clusters';
 
 let container: null | Element = null;
+let root: Root | null = null;
 beforeEach(() => {
   container = document.createElement('div');
   document.body.appendChild(container);
+  root = createRoot(container);
 });
 
 afterEach(() => {
-  unmountComponentAtNode(container);
+  root.unmount();
   container.remove();
   container = null;
 });
@@ -33,10 +35,7 @@ afterEach(() => {
 it('renders info message about no clusters being available', () => {
   const clustersRef: React.RefObject<Clusters> = React.createRef<Clusters>();
   act(() => {
-    render(
-      <Clusters sessionContext={{} as any} ref={clustersRef} />,
-      container
-    );
+    root.render(<Clusters sessionContext={{} as any} ref={clustersRef} />);
     const clusters = clustersRef.current;
     if (clusters) {
       clusters.setState({ clusters: {} });
@@ -60,10 +59,7 @@ it('renders a data-table', () => {
     }
   };
   act(() => {
-    render(
-      <Clusters sessionContext={{} as any} ref={clustersRef} />,
-      container
-    );
+    root.render(<Clusters sessionContext={{} as any} ref={clustersRef} />);
     const clusters = clustersRef.current;
     if (clusters) {
       clusters.setState({ clusters: testData });
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/common/HtmlView.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/common/HtmlView.test.tsx
index a6183d60ba3d..d73e6c274bfb 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/common/HtmlView.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/common/HtmlView.test.tsx
@@ -16,20 +16,22 @@
 
 import * as React from 'react';
 
-import { render, unmountComponentAtNode } from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 
-import { act } from 'react-dom/test-utils';
+import { act } from 'react';
 
 import { HtmlView, IHtmlProvider, importHtml } from '../../common/HtmlView';
 
 let container: null | Element = null;
+let root: Root | null = null;
 beforeEach(() => {
   container = document.createElement('div');
   document.body.appendChild(container);
+  root = createRoot(container);
 });
 
 afterEach(() => {
-  unmountComponentAtNode(container);
+  root.unmount();
   container.remove();
   container = null;
   jest.clearAllMocks();
@@ -44,9 +46,8 @@ describe('HtmlView', () => {
       script: ['console.log(1);', 'console.log(2);']
     } as IHtmlProvider;
     act(() => {
-      render(
-        <HtmlView ref={htmlViewRef} htmlProvider={fakeHtmlProvider} />,
-        container
+      root.render(
+        <HtmlView ref={htmlViewRef} htmlProvider={fakeHtmlProvider} />
       );
       const htmlView = htmlViewRef.current;
       if (htmlView) {
@@ -73,9 +74,8 @@ describe('HtmlView', () => {
         script: ['console.log(1);']
       } as IHtmlProvider;
       act(() => {
-        render(
-          <HtmlView ref={htmlViewRef} htmlProvider={fakeHtmlProvider} />,
-          container
+        root.render(
+          <HtmlView ref={htmlViewRef} htmlProvider={fakeHtmlProvider} />
         );
         const htmlView = htmlViewRef.current;
         if (htmlView) {
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableList.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableList.test.tsx
index 4e6ba342427a..df6581f4e516 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableList.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableList.test.tsx
@@ -12,9 +12,9 @@
 
 import * as React from 'react';
 
-import { render, unmountComponentAtNode } from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 
-import { act } from 'react-dom/test-utils';
+import { act } from 'react';
 
 import { InspectableList } from '../../inspector/InspectableList';
 
@@ -23,20 +23,22 @@ import { InspectableViewModel } from '../../inspector/InspectableViewModel';
 const mockedInspectableViewModel = new InspectableViewModel({} as any);
 
 let container: null | Element = null;
+let root: Root | null = null;
 beforeEach(() => {
   container = document.createElement('div');
   document.body.appendChild(container);
+  root = createRoot(container);
 });
 
 afterEach(() => {
-  unmountComponentAtNode(container);
+  root.unmount();
   container.remove();
   container = null;
 });
 
 it('renders a list', () => {
   act(() => {
-    render(
+    root.render(
       <InspectableList
         inspectableViewModel={mockedInspectableViewModel as any}
         id="pipeline_id"
@@ -57,8 +59,7 @@ it('renders a list', () => {
             type: 'pcollection'
           }
         }}
-      />,
-      container
+      />
     );
   });
   const listElement: Element = container.firstElementChild;
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableListItem.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableListItem.test.tsx
index 9019c2cf6efa..ba372755643b 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableListItem.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableListItem.test.tsx
@@ -12,27 +12,29 @@
 
 import * as React from 'react';
 
-import { render, unmountComponentAtNode } from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 
-import { act } from 'react-dom/test-utils';
+import { act } from 'react';
 
 import { InspectableListItem } from '../../inspector/InspectableListItem';
 
 let container: null | Element = null;
+let root: Root | null = null;
 beforeEach(() => {
   container = document.createElement('div');
   document.body.appendChild(container);
+  root = createRoot(container);
 });
 
 afterEach(() => {
-  unmountComponentAtNode(container);
+  root.unmount();
   container.remove();
   container = null;
 });
 
 it('renders an item', () => {
   act(() => {
-    render(
+    root.render(
       <InspectableListItem
         id="id"
         metadata={{
@@ -40,8 +42,7 @@ it('renders an item', () => {
           inMemoryId: 123456,
           type: 'pcollection'
         }}
-      />,
-      container
+      />
     );
   });
   const liElement: Element = container.firstElementChild;
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableView.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableView.test.tsx
index 2a7dd5a7ed64..a02dbf03f067 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableView.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableView.test.tsx
@@ -12,9 +12,9 @@
 
 import * as React from 'react';
 
-import { render, unmountComponentAtNode } from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 
-import { act } from 'react-dom/test-utils';
+import { act } from 'react';
 
 import { InspectableView } from '../../inspector/InspectableView';
 
@@ -24,13 +24,15 @@ import {
 } from '../../inspector/InspectableViewModel';
 
 let container: null | Element = null;
+let root: Root | null = null;
 beforeEach(() => {
   container = document.createElement('div');
   document.body.appendChild(container);
+  root = createRoot(container);
 });
 
 afterEach(() => {
-  unmountComponentAtNode(container);
+  root.unmount();
   container.remove();
   container = null;
 });
@@ -44,7 +46,7 @@ it('does not render options if inspecting a pipeline', () => {
     options: {} as IOptions
   } as InspectableViewModel;
   act(() => {
-    render(<InspectableView model={fakeModel} />, container);
+    root.render(<InspectableView model={fakeModel} />);
   });
   const inspectableViewElement: Element = container.firstElementChild;
   const optionsElement: Element = inspectableViewElement.firstElementChild;
@@ -66,10 +68,7 @@ it('renders options if inspecting a pcollection', () => {
     } as IOptions
   } as InspectableViewModel;
   act(() => {
-    render(
-      <InspectableView ref={inspectableViewRef} model={fakeModel} />,
-      container
-    );
+    root.render(<InspectableView ref={inspectableViewRef} model={fakeModel} />);
     const inspectableView = inspectableViewRef.current;
     if (inspectableView) {
       inspectableView.setState({
@@ -116,7 +115,7 @@ it('renders an html view', () => {
     options: {} as IOptions
   } as InspectableViewModel;
   act(() => {
-    render(<InspectableView model={fakeModel} />, container);
+    root.render(<InspectableView model={fakeModel} />);
   });
   const inspectableViewElement: Element = container.firstElementChild;
   expect(inspectableViewElement.innerHTML).toContain('<div>fake html</div>');
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx
index 3f0f3fbc4a22..f4a4f9866819 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx
@@ -12,9 +12,9 @@
 
 import * as React from 'react';
 
-import { render, unmountComponentAtNode } from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 
-import { act } from 'react-dom/test-utils';
+import { act } from 'react';
 
 import { Inspectables } from '../../inspector/Inspectables';
 
@@ -30,13 +30,15 @@ jest.mock('../../inspector/InspectableList', () => {
 });
 
 let container: null | Element = null;
+let root: Root | null = null;
 beforeEach(() => {
   container = document.createElement('div');
   document.body.appendChild(container);
+  root = createRoot(container);
 });
 
 afterEach(() => {
-  unmountComponentAtNode(container);
+  root.unmount();
   container.remove();
   container = null;
   jest.clearAllMocks();
@@ -46,7 +48,7 @@ it('renders info message about no inspectable when none is available', () => {
   const inspectablesRef: React.RefObject<Inspectables> =
     React.createRef<Inspectables>();
   act(() => {
-    render(<Inspectables ref={inspectablesRef} />, container);
+    root.render(<Inspectables ref={inspectablesRef} />);
     const inspectables = inspectablesRef.current;
     if (inspectables) {
       inspectables.setState({ inspectables: {} });
@@ -93,7 +95,7 @@ it('renders inspectables as a list of collapsible lists', () => {
     }
   };
   act(() => {
-    render(<Inspectables ref={inspectablesRef} />, container);
+    root.render(<Inspectables ref={inspectablesRef} />);
     const inspectables = inspectablesRef.current;
     if (inspectables) {
       inspectables.setState({ inspectables: testData });
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InteractiveInspector.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InteractiveInspector.test.tsx
index 39be6904aa54..ed2479652719 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InteractiveInspector.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InteractiveInspector.test.tsx
@@ -12,9 +12,9 @@
 
 import * as React from 'react';
 
-import { render, unmountComponentAtNode } from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 
-import { act } from 'react-dom/test-utils';
+import { act } from 'react';
 
 import { InteractiveInspector } from '../../inspector/InteractiveInspector';
 
@@ -36,13 +36,15 @@ const fakeSessionContext = {
 };
 
 let container: null | Element = null;
+let root: Root | null = null;
 beforeEach(() => {
   container = document.createElement('div');
   document.body.appendChild(container);
+  root = createRoot(container);
 });
 
 afterEach(() => {
-  unmountComponentAtNode(container);
+  root.unmount();
   container.remove();
   container = null;
 });
@@ -52,12 +54,11 @@ it('renders the top app bar and drawer wrapped inspectables', () => {
     fakeSessionContext as any
   );
   act(() => {
-    render(
+    root.render(
       <InteractiveInspector
         sessionContext={fakeSessionContext as any}
         inspectableViewModel={inspectableViewModel}
-      />,
-      container
+      />
     );
   });
   const topAppBarHeader: Element = container.firstElementChild;
@@ -105,12 +106,11 @@ it('renders the drawer open by default', () => {
     fakeSessionContext as any
   );
   act(() => {
-    render(
+    root.render(
       <InteractiveInspector
         sessionContext={fakeSessionContext as any}
         inspectableViewModel={inspectableViewModel}
-      />,
-      container
+      />
     );
   });
   const inspectablesAside: Element = container.children[2].firstElementChild;
@@ -124,13 +124,12 @@ it('closes the drawer on flip from open state', () => {
     fakeSessionContext as any
   );
   act(() => {
-    render(
+    root.render(
       <InteractiveInspector
         ref={inspectorRef}
         sessionContext={fakeSessionContext as any}
         inspectableViewModel={inspectableViewModel}
-      />,
-      container
+      />
     );
     const inspector = inspectorRef.current;
     if (inspector) {
@@ -152,13 +151,12 @@ it('updates session info on change', () => {
     fakeSessionContext as any
   );
   act(() => {
-    render(
+    root.render(
       <InteractiveInspector
         ref={inspectorRef}
         sessionContext={fakeSessionContext as any}
         inspectableViewModel={inspectableViewModel}
-      />,
-      container
+      />
     );
     const inspector = inspectorRef.current;
     if (inspector) {
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx
index c30bc05cbcca..49699a3b5755 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx
@@ -12,9 +12,9 @@
 
 import * as React from 'react';
 
-import { render, unmountComponentAtNode } from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 
-import { act } from 'react-dom/test-utils';
+import { act } from 'react';
 
 import { InterruptKernelButton } from '../../kernel/InterruptKernelButton';
 
@@ -24,15 +24,17 @@ const fakeKernelModel = {
     // do nothing.
   }
 };
-let container: null | Element = null;
 
+let container: null | Element = null;
+let root: Root | null = null;
 beforeEach(() => {
   container = document.createElement('div');
   document.body.appendChild(container);
+  root = createRoot(container);
 });
 
 afterEach(() => {
-  unmountComponentAtNode(container);
+  root.unmount();
   container.remove();
   container = null;
   jest.clearAllMocks();
@@ -42,14 +44,13 @@ afterEach(() => {
 it('displays a button when the kernel model is not done with execution', () => {
   let button: InterruptKernelButton;
   act(() => {
-    render(
+    root.render(
       <InterruptKernelButton
         ref={(node): void => {
           button = node;
         }}
         model={fakeKernelModel as any}
-      />,
-      container
+      />
     );
     fakeKernelModel.isDone = false;
     if (button) {
@@ -68,7 +69,7 @@ it('displays a button when the kernel model is not done with execution', () => {
 
 it('renders nothing when the kernel model is done with execution', () => {
   act(() => {
-    render(<InterruptKernelButton model={fakeKernelModel as any} />, container);
+    root.render(<InterruptKernelButton model={fakeKernelModel as any} />);
   });
   const buttonElement: null | Element = container.firstElementChild;
   expect(buttonElement).toBe(null);
@@ -78,14 +79,13 @@ it('interrupts the kernel when clicked', () => {
   let button: InterruptKernelButton;
   const spiedInterrruptCall = jest.spyOn(fakeKernelModel, 'interruptKernel');
   act(() => {
-    render(
+    root.render(
       <InterruptKernelButton
         ref={(node): void => {
           button = node;
         }}
         model={fakeKernelModel as any}
-      />,
-      container
+      />
     );
     if (button) {
       button.onClick();
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/clusters/Clusters.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/clusters/Clusters.tsx
index 1391010d4aa0..b397b4cf6702 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/clusters/Clusters.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/clusters/Clusters.tsx
@@ -234,7 +234,9 @@ export class Clusters extends React.Component<IClustersProps, IClustersState> {
             label="Default cluster"
             enhanced
             options={clusterNames}
-            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => this.setDefaultCluster(e.currentTarget.value)}
+            onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+              this.setDefaultCluster(e.currentTarget.value)
+            }
             value={this.state.defaultClusterId}
           />
           <Dialog
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/Inspectables.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/Inspectables.tsx
index 08fff2077835..a6235c4358d4 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/Inspectables.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/inspector/Inspectables.tsx
@@ -72,7 +72,7 @@ export class Inspectables extends React.Component<
     if (
       Object.keys(inspectablesToUpdate).length &&
       JSON.stringify(this.state.inspectables) !==
-      JSON.stringify(inspectablesToUpdate)
+        JSON.stringify(inspectablesToUpdate)
     ) {
       this.setState({ inspectables: inspectablesToUpdate });
     }

From e487b1720ef9cb990960d68135799196a0a23887 Mon Sep 17 00:00:00 2001
From: chenzo <ccychenzo@gmail.com>
Date: Wed, 2 Apr 2025 20:44:50 +0800
Subject: [PATCH 04/13] Update testsuite dependencies to 4.x

---
 .../gh-actions-self-hosted-runners/arc/images/Dockerfile  | 8 ++++----
 .../apache-beam-jupyterlab-sidepanel/package.json         | 2 +-
 sdks/python/tox.ini                                       | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/.github/gh-actions-self-hosted-runners/arc/images/Dockerfile b/.github/gh-actions-self-hosted-runners/arc/images/Dockerfile
index 2fd9b41ca400..3af909de40ad 100644
--- a/.github/gh-actions-self-hosted-runners/arc/images/Dockerfile
+++ b/.github/gh-actions-self-hosted-runners/arc/images/Dockerfile
@@ -25,10 +25,10 @@ RUN docker buildx install && docker buildx version
 
 USER root
 #Install Node
-RUN curl -OL https://nodejs.org/dist/v18.16.0/node-v18.16.0-linux-x64.tar.xz && \
-    tar -C /usr/local -xf node-v18.16.0-linux-x64.tar.xz && \
-    rm node-v18.16.0-linux-x64.tar.xz && \
-    mv /usr/local/node-v18.16.0-linux-x64 /usr/local/node
+RUN curl -OL https://nodejs.org/dist/v22.14.0/node-v22.14.0-linux-x64.tar.xz && \
+    tar -C /usr/local -xf node-v22.14.0-linux-x64.tar.xz && \
+    rm node-v22.14.0-linux-x64.tar.xz && \
+    mv /usr/local/node-v22.14.0-linux-x64 /usr/local/node
 ENV PATH="${PATH}:/usr/local/node/bin"
 #Install Go
 ARG go_version=1.24.0
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/package.json b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/package.json
index 8466e1f1c75d..7246d610914c 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/package.json
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "apache-beam-jupyterlab-sidepanel",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "A side panel providing information and controls to run Apache Beam notebooks interactively.",
   "keywords": [
     "jupyter",
diff --git a/sdks/python/tox.ini b/sdks/python/tox.ini
index 25d44259fd75..7b65d49ae94d 100644
--- a/sdks/python/tox.ini
+++ b/sdks/python/tox.ini
@@ -283,7 +283,7 @@ commands =
 [testenv:jest]
 setenv =
 deps =
-  jupyterlab==3.1.18
+  jupyterlab==4.3.6
 commands =
   time {toxinidir}/scripts/setup_nodejs.sh
   time {toxinidir}/scripts/run_jest.sh
@@ -291,7 +291,7 @@ commands =
 [testenv:eslint]
 setenv =
 deps =
-  jupyterlab==3.1.18
+  jupyterlab==4.3.6
 commands =
   time {toxinidir}/scripts/setup_nodejs.sh
   time {toxinidir}/scripts/run_eslint.sh

From af0f186df382c5698f0b4e3a63a905a1feea29bd Mon Sep 17 00:00:00 2001
From: chenzo <ccychenzo@gmail.com>
Date: Thu, 3 Apr 2025 01:02:11 +0800
Subject: [PATCH 05/13] Update sidepanel testsuite to adapt React 18+

---
 .../jest.config.js                            |  4 +-
 .../package.json                              |  6 ++
 .../src/__tests__/clusters/Clusters.test.tsx  | 46 +++++++++-----
 .../src/__tests__/common/HtmlView.test.tsx    | 55 ++++++++++-------
 .../inspector/InspectableList.test.tsx        | 29 ++++++---
 .../inspector/InspectableListItem.test.tsx    | 27 +++++---
 .../inspector/InspectableView.test.tsx        | 33 +++++++---
 .../inspector/InspectableViewModel.test.ts    | 32 +++++-----
 .../__tests__/inspector/Inspectables.test.tsx | 42 +++++++++----
 .../inspector/InteractiveInspector.test.tsx   | 61 +++++++++++++------
 .../kernel/InterruptKernelButton.test.tsx     | 50 +++++++++------
 11 files changed, 259 insertions(+), 126 deletions(-)

diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/jest.config.js b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/jest.config.js
index c916ee9d6cbd..454138a060ae 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/jest.config.js
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/jest.config.js
@@ -28,5 +28,7 @@ module.exports = {
   // Use identity-obj-proxy to load css and less files in tests.
   "moduleNameMapper": {
     "\\.(css|less)$": "identity-obj-proxy"
-  }
+  },
+  "testEnvironment": "jsdom",
+  "setupFilesAfterEnv": ['<rootDir>/jest.setup.js']
 }
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/package.json b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/package.json
index 7246d610914c..745303d3ad61 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/package.json
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/package.json
@@ -47,12 +47,14 @@
     "@jupyterlab/launcher": "^4.3.6",
     "@jupyterlab/mainmenu": "^4.3.6",
     "@lumino/widgets": "^2.2.1",
+    "@rmwc/base": "^14.0.0",
     "@rmwc/button": "^8.0.6",
     "@rmwc/data-table": "^8.0.6",
     "@rmwc/dialog": "^8.0.6",
     "@rmwc/drawer": "^8.0.6",
     "@rmwc/fab": "^8.0.6",
     "@rmwc/list": "^8.0.6",
+    "@rmwc/ripple": "^14.0.0",
     "@rmwc/textfield": "^8.0.6",
     "@rmwc/tooltip": "^8.0.6",
     "@rmwc/top-app-bar": "^8.0.6",
@@ -62,6 +64,9 @@
   },
   "devDependencies": {
     "@jupyterlab/builder": "^4.3.6",
+    "@testing-library/dom": "^9.3.0",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.14",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
@@ -73,6 +78,7 @@
     "eslint-plugin-react": "^7.33.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.0.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.4",
     "rimraf": "^5.0.5",
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/clusters/Clusters.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/clusters/Clusters.test.tsx
index 283c064a6db4..c0520a32602d 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/clusters/Clusters.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/clusters/Clusters.test.tsx
@@ -26,15 +26,27 @@ beforeEach(() => {
   root = createRoot(container);
 });
 
-afterEach(() => {
-  root.unmount();
-  container.remove();
-  container = null;
+afterEach(async () => {
+  try {
+    if (root) {
+      await act(async () => {
+        root.unmount();
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
+    }
+  } catch (error) {
+    console.warn('During unmount:', error);
+  } finally {
+    if (container?.parentNode) {
+      container.remove();
+    }
+    container = null;
+    root = null;
+  }
 });
-
-it('renders info message about no clusters being available', () => {
+it('renders info message about no clusters being available', async () => {
   const clustersRef: React.RefObject<Clusters> = React.createRef<Clusters>();
-  act(() => {
+  await act(async () => {
     root.render(<Clusters sessionContext={{} as any} ref={clustersRef} />);
     const clusters = clustersRef.current;
     if (clusters) {
@@ -46,7 +58,7 @@ it('renders info message about no clusters being available', () => {
   expect(infoElement.textContent).toBe('No clusters detected.');
 });
 
-it('renders a data-table', () => {
+it('renders a data-table', async () => {
   const clustersRef: React.RefObject<Clusters> = React.createRef<Clusters>();
   const testData = {
     key: {
@@ -58,13 +70,17 @@ it('renders a data-table', () => {
       dashboard: 'test-dashboard'
     }
   };
-  act(() => {
-    root.render(<Clusters sessionContext={{} as any} ref={clustersRef} />);
-    const clusters = clustersRef.current;
-    if (clusters) {
-      clusters.setState({ clusters: testData });
-    }
+  await act(async () => {
+    root.render(
+      <Clusters sessionContext={{} as any} ref={clustersRef} />
+    );
   });
+
+  await act(async () => {
+    clustersRef.current?.setState({ clusters: testData });
+    await new Promise(resolve => setTimeout(resolve, 100));
+  });
+
   const topAppBarHeader: Element = container.firstElementChild;
   expect(topAppBarHeader.tagName).toBe('HEADER');
   expect(topAppBarHeader.getAttribute('class')).toContain('mdc-top-app-bar');
@@ -92,7 +108,7 @@ it('renders a data-table', () => {
   const dataTableDiv: Element = clustersComponent.children[0];
   expect(dataTableDiv.tagName).toBe('DIV');
   expect(dataTableDiv.getAttribute('class')).toContain('mdc-data-table');
-  const dataTable: Element = dataTableDiv.children[0];
+  const dataTable: Element = dataTableDiv.children[0].firstElementChild;
   expect(dataTable.tagName).toBe('TABLE');
   expect(dataTable.getAttribute('class')).toContain('mdc-data-table__table');
   const dataTableHead: Element = dataTable.children[0];
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/common/HtmlView.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/common/HtmlView.test.tsx
index d73e6c274bfb..b16ad012635c 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/common/HtmlView.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/common/HtmlView.test.tsx
@@ -30,29 +30,42 @@ beforeEach(() => {
   root = createRoot(container);
 });
 
-afterEach(() => {
-  root.unmount();
-  container.remove();
-  container = null;
-  jest.clearAllMocks();
+afterEach(async () => {
+  try {
+    if (root) {
+      await act(async () => {
+        root.unmount();
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
+    }
+  } catch (error) {
+    console.warn('During unmount:', error);
+  } finally {
+    if (container?.parentNode) {
+      container.remove();
+    }
+    jest.clearAllMocks();
+    container = null;
+    root = null;
+  }
 });
 
 describe('HtmlView', () => {
-  it('renders provided html', () => {
+  it('renders provided html', async () => {
     const htmlViewRef: React.RefObject<HtmlView> = React.createRef<HtmlView>();
     const spiedConsole = jest.spyOn(console, 'log');
     const fakeHtmlProvider = {
       html: '<div>Test</div>',
       script: ['console.log(1);', 'console.log(2);']
     } as IHtmlProvider;
-    act(() => {
+    await act(async () => {
       root.render(
         <HtmlView ref={htmlViewRef} htmlProvider={fakeHtmlProvider} />
       );
-      const htmlView = htmlViewRef.current;
-      if (htmlView) {
-        htmlView.updateRender();
-      }
+    });
+    await act(async () => {
+      htmlViewRef.current?.updateRender();
+      await new Promise(resolve => setTimeout(resolve, 100));
     });
     const htmlViewElement: Element = container.firstElementChild;
     expect(htmlViewElement.tagName).toBe('DIV');
@@ -64,8 +77,8 @@ describe('HtmlView', () => {
 
   it(
     'only executes incrementally updated Javascript ' +
-      'as html provider updated',
-    () => {
+    'as html provider updated',
+    async () => {
       const htmlViewRef: React.RefObject<HtmlView> =
         React.createRef<HtmlView>();
       const spiedConsole = jest.spyOn(console, 'log');
@@ -73,19 +86,19 @@ describe('HtmlView', () => {
         html: '<div></div>',
         script: ['console.log(1);']
       } as IHtmlProvider;
-      act(() => {
+      await act(async () => {
         root.render(
           <HtmlView ref={htmlViewRef} htmlProvider={fakeHtmlProvider} />
         );
-        const htmlView = htmlViewRef.current;
-        if (htmlView) {
-          htmlView.updateRender();
-        }
+      });
+      await act(async () => {
+        htmlViewRef.current?.updateRender();
+        await new Promise(resolve => setTimeout(resolve, 100));
       });
       expect(spiedConsole).toHaveBeenCalledWith(1);
       expect(spiedConsole).toHaveBeenCalledTimes(1);
       fakeHtmlProvider.script.push('console.log(2);');
-      act(() => {
+      await act(async () => {
         const htmlView = htmlViewRef.current;
         if (htmlView) {
           htmlView.updateRender();
@@ -97,8 +110,8 @@ describe('HtmlView', () => {
   );
 });
 describe('Function importHtml', () => {
-  it('imports webcomponents script', () => {
-    act(() => {
+  it('imports webcomponents script', async () => {
+    await act(async () => {
       importHtml([]);
     });
     const scriptElement: Element = document.head.firstElementChild;
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableList.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableList.test.tsx
index df6581f4e516..1e9b7a1fa90f 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableList.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableList.test.tsx
@@ -30,14 +30,27 @@ beforeEach(() => {
   root = createRoot(container);
 });
 
-afterEach(() => {
-  root.unmount();
-  container.remove();
-  container = null;
+afterEach(async () => {
+  try {
+    if (root) {
+      await act(async () => {
+        root.unmount();
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
+    }
+  } catch (error) {
+    console.warn('During unmount:', error);
+  } finally {
+    if (container?.parentNode) {
+      container.remove();
+    }
+    container = null;
+    root = null;
+  }
 });
 
-it('renders a list', () => {
-  act(() => {
+it('renders a list', async () => {
+  await act(async () => {
     root.render(
       <InspectableList
         inspectableViewModel={mockedInspectableViewModel as any}
@@ -71,14 +84,14 @@ it('renders a list', () => {
   const listHandleItem: Element = listHandle.firstElementChild;
   expect(listHandleItem.tagName).toBe('LI');
   expect(listHandleItem.getAttribute('class')).toContain('mdc-list-item');
-  const listHandleText: Element = listHandleItem.firstElementChild;
+  const listHandleText: Element = listHandleItem.children[2];
   expect(listHandleText.getAttribute('class')).toContain('mdc-list-item__text');
   const listHandlePrimaryText: Element = listHandleText.firstElementChild;
   expect(listHandlePrimaryText.getAttribute('class')).toContain(
     'mdc-list-item__primary-text'
   );
   expect(listHandlePrimaryText.textContent).toBe('pipeline_name');
-  const listHandleMetaIcon: Element = listHandleItem.children[1];
+  const listHandleMetaIcon: Element = listHandleItem.children[3];
   expect(listHandleMetaIcon.tagName).toBe('I');
   expect(listHandleMetaIcon.getAttribute('class')).toContain(
     'mdc-list-item__meta'
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableListItem.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableListItem.test.tsx
index ba372755643b..16359530dd08 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableListItem.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableListItem.test.tsx
@@ -26,14 +26,27 @@ beforeEach(() => {
   root = createRoot(container);
 });
 
-afterEach(() => {
-  root.unmount();
-  container.remove();
-  container = null;
+afterEach(async () => {
+  try {
+    if (root) {
+      await act(async () => {
+        root.unmount();
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
+    }
+  } catch (error) {
+    console.warn('During unmount:', error);
+  } finally {
+    if (container?.parentNode) {
+      container.remove();
+    }
+    container = null;
+    root = null;
+  }
 });
 
-it('renders an item', () => {
-  act(() => {
+it('renders an item', async () => {
+  await act(async () => {
     root.render(
       <InspectableListItem
         id="id"
@@ -48,7 +61,7 @@ it('renders an item', () => {
   const liElement: Element = container.firstElementChild;
   expect(liElement.tagName).toBe('LI');
   expect(liElement.getAttribute('class')).toBe('mdc-list-item');
-  const textElement: Element = liElement.firstElementChild;
+  const textElement: Element = liElement.children[1];
   expect(textElement.getAttribute('class')).toBe('mdc-list-item__text');
   const primaryTextElement: Element = textElement.firstElementChild;
   expect(primaryTextElement.getAttribute('class')).toBe(
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableView.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableView.test.tsx
index a02dbf03f067..65b12e3dee47 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableView.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableView.test.tsx
@@ -31,13 +31,26 @@ beforeEach(() => {
   root = createRoot(container);
 });
 
-afterEach(() => {
-  root.unmount();
-  container.remove();
-  container = null;
+afterEach(async () => {
+  try {
+    if (root) {
+      await act(async () => {
+        root.unmount();
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
+    }
+  } catch (error) {
+    console.warn('During unmount:', error);
+  } finally {
+    if (container?.parentNode) {
+      container.remove();
+    }
+    container = null;
+    root = null;
+  }
 });
 
-it('does not render options if inspecting a pipeline', () => {
+it('does not render options if inspecting a pipeline', async () => {
   const fakeModel = {
     html: '',
     script: [] as string[],
@@ -45,7 +58,7 @@ it('does not render options if inspecting a pipeline', () => {
     identifier: 'id',
     options: {} as IOptions
   } as InspectableViewModel;
-  act(() => {
+  await act(async () => {
     root.render(<InspectableView model={fakeModel} />);
   });
   const inspectableViewElement: Element = container.firstElementChild;
@@ -54,7 +67,7 @@ it('does not render options if inspecting a pipeline', () => {
   expect(optionsElement.innerHTML).toBe('<span></span>');
 });
 
-it('renders options if inspecting a pcollection', () => {
+it('renders options if inspecting a pcollection', async () => {
   const inspectableViewRef: React.RefObject<InspectableView> =
     React.createRef<InspectableView>();
   const fakeModel = {
@@ -67,7 +80,7 @@ it('renders options if inspecting a pcollection', () => {
       visualizeInFacets: true
     } as IOptions
   } as InspectableViewModel;
-  act(() => {
+  await act(async () => {
     root.render(<InspectableView ref={inspectableViewRef} model={fakeModel} />);
     const inspectableView = inspectableViewRef.current;
     if (inspectableView) {
@@ -106,7 +119,7 @@ it('renders options if inspecting a pcollection', () => {
   );
 });
 
-it('renders an html view', () => {
+it('renders an html view', async () => {
   const fakeModel = {
     html: '<div>fake html</div>',
     script: ['console.log(1)'],
@@ -114,7 +127,7 @@ it('renders an html view', () => {
     identifier: 'id',
     options: {} as IOptions
   } as InspectableViewModel;
-  act(() => {
+  await act(async () => {
     root.render(<InspectableView model={fakeModel} />);
   });
   const inspectableViewElement: Element = container.firstElementChild;
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableViewModel.test.ts b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableViewModel.test.ts
index c855dea3738e..3458926bfc0e 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableViewModel.test.ts
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableViewModel.test.ts
@@ -49,8 +49,8 @@ it('builds show query correctly with default values', () => {
   inspectableViewModel.queryKernel('pcollection', 'id');
   expect(inspectableViewModel.buildShowQuery({} as IShowOptions)).toBe(
     "ib.show(ie.current_env().inspector.get_val('id')," +
-      'include_window_info=False, visualize_data=False, ' +
-      "duration='inf', n='inf')"
+    'include_window_info=False, visualize_data=False, ' +
+    "duration='inf', n='inf')"
   );
 });
 
@@ -66,8 +66,8 @@ it('builds show query with given checkbox values correctly', () => {
     } as IShowOptions)
   ).toBe(
     "ib.show(ie.current_env().inspector.get_val('id')," +
-      'include_window_info=True, visualize_data=True, ' +
-      "duration='inf', n='inf')"
+    'include_window_info=True, visualize_data=True, ' +
+    "duration='inf', n='inf')"
   );
 });
 
@@ -82,8 +82,8 @@ it('builds show query with string duration', () => {
     } as IShowOptions)
   ).toBe(
     "ib.show(ie.current_env().inspector.get_val('id')," +
-      'include_window_info=False, visualize_data=False, ' +
-      "duration='60s', n='inf')"
+    'include_window_info=False, visualize_data=False, ' +
+    "duration='60s', n='inf')"
   );
 });
 
@@ -98,8 +98,8 @@ it('builds show query with negative duration as inf', () => {
     } as IShowOptions)
   ).toBe(
     "ib.show(ie.current_env().inspector.get_val('id')," +
-      'include_window_info=False, visualize_data=False, ' +
-      "duration='inf', n='inf')"
+    'include_window_info=False, visualize_data=False, ' +
+    "duration='inf', n='inf')"
   );
 });
 
@@ -114,8 +114,8 @@ it('builds show query with positive duration as int', () => {
     } as IShowOptions)
   ).toBe(
     "ib.show(ie.current_env().inspector.get_val('id')," +
-      'include_window_info=False, visualize_data=False, ' +
-      "duration=5, n='inf')"
+    'include_window_info=False, visualize_data=False, ' +
+    "duration=5, n='inf')"
   );
 });
 
@@ -130,8 +130,8 @@ it('builds show query with string n as inf', () => {
     } as IShowOptions)
   ).toBe(
     "ib.show(ie.current_env().inspector.get_val('id')," +
-      'include_window_info=False, visualize_data=False, ' +
-      "duration='inf', n='inf')"
+    'include_window_info=False, visualize_data=False, ' +
+    "duration='inf', n='inf')"
   );
 });
 
@@ -146,8 +146,8 @@ it('builds show query with negative n as inf', () => {
     } as IShowOptions)
   ).toBe(
     "ib.show(ie.current_env().inspector.get_val('id')," +
-      'include_window_info=False, visualize_data=False, ' +
-      "duration='inf', n='inf')"
+    'include_window_info=False, visualize_data=False, ' +
+    "duration='inf', n='inf')"
   );
 });
 
@@ -162,8 +162,8 @@ it('builds show query with positive n as int', () => {
     } as IShowOptions)
   ).toBe(
     "ib.show(ie.current_env().inspector.get_val('id')," +
-      'include_window_info=False, visualize_data=False, ' +
-      "duration='inf', n=5)"
+    'include_window_info=False, visualize_data=False, ' +
+    "duration='inf', n=5)"
   );
 });
 
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx
index f4a4f9866819..68575a2afc89 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx
@@ -37,17 +37,30 @@ beforeEach(() => {
   root = createRoot(container);
 });
 
-afterEach(() => {
-  root.unmount();
-  container.remove();
-  container = null;
-  jest.clearAllMocks();
+afterEach(async () => {
+  try {
+    if (root) {
+      await act(async () => {
+        root.unmount();
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
+    }
+  } catch (error) {
+    console.warn('During unmount:', error);
+  } finally {
+    if (container?.parentNode) {
+      container.remove();
+    }
+    jest.clearAllMocks();
+    container = null;
+    root = null;
+  }
 });
 
-it('renders info message about no inspectable when none is available', () => {
+it('renders info message about no inspectable when none is available', async () => {
   const inspectablesRef: React.RefObject<Inspectables> =
     React.createRef<Inspectables>();
-  act(() => {
+  await act(async () => {
     root.render(<Inspectables ref={inspectablesRef} />);
     const inspectables = inspectablesRef.current;
     if (inspectables) {
@@ -61,7 +74,7 @@ it('renders info message about no inspectable when none is available', () => {
   );
 });
 
-it('renders inspectables as a list of collapsible lists', () => {
+it('renders inspectables as a list of collapsible lists', async () => {
   const inspectablesRef: React.RefObject<Inspectables> =
     React.createRef<Inspectables>();
   const testData = {
@@ -94,13 +107,16 @@ it('renders inspectables as a list of collapsible lists', () => {
       }
     }
   };
-  act(() => {
+
+  await act(async () => {
     root.render(<Inspectables ref={inspectablesRef} />);
-    const inspectables = inspectablesRef.current;
-    if (inspectables) {
-      inspectables.setState({ inspectables: testData });
-    }
   });
+
+  await act(async () => {
+    inspectablesRef.current?.setState({ inspectables: testData });
+    await new Promise(resolve => setTimeout(resolve, 100));
+  });
+
   const listElement: Element = container.firstElementChild;
   expect(listElement.tagName).toBe('UL');
   expect(listElement.getAttribute('class')).toContain('mdc-list');
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InteractiveInspector.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InteractiveInspector.test.tsx
index ed2479652719..a146e2a53d67 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InteractiveInspector.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InteractiveInspector.test.tsx
@@ -43,17 +43,30 @@ beforeEach(() => {
   root = createRoot(container);
 });
 
-afterEach(() => {
-  root.unmount();
-  container.remove();
-  container = null;
+afterEach(async () => {
+  try {
+    if (root) {
+      await act(async () => {
+        root.unmount();
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
+    }
+  } catch (error) {
+    console.warn('During unmount:', error);
+  } finally {
+    if (container?.parentNode) {
+      container.remove();
+    }
+    container = null;
+    root = null;
+  }
 });
 
-it('renders the top app bar and drawer wrapped inspectables', () => {
+it('renders the top app bar and drawer wrapped inspectables', async () => {
   const inspectableViewModel = new InspectableViewModel(
     fakeSessionContext as any
   );
-  act(() => {
+  await act(async () => {
     root.render(
       <InteractiveInspector
         sessionContext={fakeSessionContext as any}
@@ -101,11 +114,11 @@ it('renders the top app bar and drawer wrapped inspectables', () => {
   ).toContain('InspectableView');
 });
 
-it('renders the drawer open by default', () => {
+it('renders the drawer open by default', async () => {
   const inspectableViewModel = new InspectableViewModel(
     fakeSessionContext as any
   );
-  act(() => {
+  await act(async () => {
     root.render(
       <InteractiveInspector
         sessionContext={fakeSessionContext as any}
@@ -117,13 +130,13 @@ it('renders the drawer open by default', () => {
   expect(inspectablesAside.getAttribute('class')).toContain('mdc-drawer--open');
 });
 
-it('closes the drawer on flip from open state', () => {
+it('closes the drawer on flip from open state', async () => {
   const inspectorRef: React.RefObject<InteractiveInspector> =
     React.createRef<InteractiveInspector>();
   const inspectableViewModel = new InspectableViewModel(
     fakeSessionContext as any
   );
-  act(() => {
+  await act(async () => {
     root.render(
       <InteractiveInspector
         ref={inspectorRef}
@@ -131,26 +144,35 @@ it('closes the drawer on flip from open state', () => {
         inspectableViewModel={inspectableViewModel}
       />
     );
+  });
+
+  await act(async () => {
     const inspector = inspectorRef.current;
     if (inspector) {
       inspector.flipDrawer();
     }
+    await new Promise(resolve => setTimeout(resolve, 100));
   });
+
   // react test renderer does not re-render the drawer component even if the
   // state is changed. Test the state change instead of DOM change.
-  const inspector = inspectorRef.current;
-  if (inspector) {
-    expect(inspector.state.drawerOpen).toBe(false);
-  }
+  await act(async () => {
+    const inspector = inspectorRef.current;
+    if (inspector) {
+      expect(inspector.state.drawerOpen).toBe(false);
+    }
+    await new Promise(resolve => setTimeout(resolve, 100));
+  });
 });
 
-it('updates session info on change', () => {
+it('updates session info on change', async () => {
   const inspectorRef: React.RefObject<InteractiveInspector> =
     React.createRef<InteractiveInspector>();
   const inspectableViewModel = new InspectableViewModel(
     fakeSessionContext as any
   );
-  act(() => {
+
+  await act(async () => {
     root.render(
       <InteractiveInspector
         ref={inspectorRef}
@@ -158,12 +180,17 @@ it('updates session info on change', () => {
         inspectableViewModel={inspectableViewModel}
       />
     );
+  });
+
+  await act(async () => {
     const inspector = inspectorRef.current;
     if (inspector) {
       fakeSessionContext.kernelDisplayName = 'new kernel';
       inspector.updateSessionInfo();
     }
+    await new Promise(resolve => setTimeout(resolve, 100));
   });
-  const topAppBarHeader: Element = container.firstElementChild;
+
+  const topAppBarHeader: Element = container.firstElementChild.firstElementChild.firstElementChild.children[1];
   expect(topAppBarHeader.innerHTML).toContain('Inspector [kernel:new kernel]');
 });
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx
index 49699a3b5755..cbe6d10a8078 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx
@@ -33,17 +33,29 @@ beforeEach(() => {
   root = createRoot(container);
 });
 
-afterEach(() => {
-  root.unmount();
-  container.remove();
-  container = null;
-  jest.clearAllMocks();
-  fakeKernelModel.isDone = true;
+afterEach(async () => {
+  try {
+    if (root) {
+      await act(async () => {
+        root.unmount();
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
+    }
+  } catch (error) {
+    console.warn('During unmount:', error);
+  } finally {
+    if (container?.parentNode) {
+      container.remove();
+    }
+    jest.clearAllMocks();
+    container = null;
+    root = null;
+  }
 });
 
-it('displays a button when the kernel model is not done with execution', () => {
+it('displays a button when the kernel model is not done with execution', async () => {
   let button: InterruptKernelButton;
-  act(() => {
+  await act(async () => {
     root.render(
       <InterruptKernelButton
         ref={(node): void => {
@@ -52,10 +64,11 @@ it('displays a button when the kernel model is not done with execution', () => {
         model={fakeKernelModel as any}
       />
     );
+  });
+  await act(async () => {
     fakeKernelModel.isDone = false;
-    if (button) {
-      button.updateRender();
-    }
+    button?.updateRender()
+    await new Promise(resolve => setTimeout(resolve, 100));
   });
   const buttonElement: null | Element = container.firstElementChild;
   expect(buttonElement.tagName).toBe('BUTTON');
@@ -67,18 +80,18 @@ it('displays a button when the kernel model is not done with execution', () => {
   expect(labelElement.innerHTML).toBe('stop');
 });
 
-it('renders nothing when the kernel model is done with execution', () => {
-  act(() => {
+it('renders nothing when the kernel model is done with execution', async () => {
+  await act(async () => {
     root.render(<InterruptKernelButton model={fakeKernelModel as any} />);
   });
   const buttonElement: null | Element = container.firstElementChild;
   expect(buttonElement).toBe(null);
 });
 
-it('interrupts the kernel when clicked', () => {
+it('interrupts the kernel when clicked', async () => {
   let button: InterruptKernelButton;
   const spiedInterrruptCall = jest.spyOn(fakeKernelModel, 'interruptKernel');
-  act(() => {
+  await act(async () => {
     root.render(
       <InterruptKernelButton
         ref={(node): void => {
@@ -87,9 +100,10 @@ it('interrupts the kernel when clicked', () => {
         model={fakeKernelModel as any}
       />
     );
-    if (button) {
-      button.onClick();
-    }
+  });
+  await act(async () => {
+    button?.onClick()
+    await new Promise(resolve => setTimeout(resolve, 100));
   });
   expect(spiedInterrruptCall).toHaveBeenCalledTimes(1);
 });

From b0fba4e400259b223a0a15d0d1ed25d5a689b8c3 Mon Sep 17 00:00:00 2001
From: chenzo <ccychenzo@gmail.com>
Date: Thu, 3 Apr 2025 01:34:46 +0800
Subject: [PATCH 06/13] Add jest.setup.js to enable async steps

---
 .../apache-beam-jupyterlab-sidepanel/jest.setup.js       | 9 +++++++++
 .../src/__tests__/kernel/InterruptKernelButton.test.tsx  | 4 ++--
 2 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/jest.setup.js

diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/jest.setup.js b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/jest.setup.js
new file mode 100644
index 000000000000..d7ec23e61428
--- /dev/null
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/jest.setup.js
@@ -0,0 +1,9 @@
+const { configure } = require('@testing-library/react');
+require('@testing-library/jest-dom');
+
+configure({
+    asyncUtilTimeout: 5000,
+    react: { version: 'detect' }
+});
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
\ No newline at end of file
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx
index cbe6d10a8078..050eb926b33a 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx
@@ -67,7 +67,7 @@ it('displays a button when the kernel model is not done with execution', async (
   });
   await act(async () => {
     fakeKernelModel.isDone = false;
-    button?.updateRender()
+    button?.updateRender();
     await new Promise(resolve => setTimeout(resolve, 100));
   });
   const buttonElement: null | Element = container.firstElementChild;
@@ -102,7 +102,7 @@ it('interrupts the kernel when clicked', async () => {
     );
   });
   await act(async () => {
-    button?.onClick()
+    button?.onClick();
     await new Promise(resolve => setTimeout(resolve, 100));
   });
   expect(spiedInterrruptCall).toHaveBeenCalledTimes(1);

From 142e40b23a4d027e12b32951e8a4e7189a4707a1 Mon Sep 17 00:00:00 2001
From: chenzo <ccychenzo@gmail.com>
Date: Thu, 3 Apr 2025 11:47:17 +0800
Subject: [PATCH 07/13] Add license to jest.setup.js

---
 .../jest.setup.js                             | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/jest.setup.js b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/jest.setup.js
index d7ec23e61428..4008e1ff1c73 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/jest.setup.js
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/jest.setup.js
@@ -1,3 +1,25 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Configures jest async performance.
+ */
+
 const { configure } = require('@testing-library/react');
 require('@testing-library/jest-dom');
 

From 3d71136f4bcad638b0b84410dba1624d68239b11 Mon Sep 17 00:00:00 2001
From: chenzo <ccychenzo@gmail.com>
Date: Thu, 3 Apr 2025 12:17:03 +0800
Subject: [PATCH 08/13] Pass eslint

---
 .../__tests__/inspector/Inspectables.test.tsx | 31 ++++-----
 .../inspector/InteractiveInspector.test.tsx   |  3 +-
 .../kernel/InterruptKernelButton.test.tsx     | 64 ++++++++++---------
 3 files changed, 51 insertions(+), 47 deletions(-)

diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx
index 68575a2afc89..e7f6b41137ba 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx
@@ -57,22 +57,23 @@ afterEach(async () => {
   }
 });
 
-it('renders info message about no inspectable when none is available', async () => {
-  const inspectablesRef: React.RefObject<Inspectables> =
-    React.createRef<Inspectables>();
-  await act(async () => {
-    root.render(<Inspectables ref={inspectablesRef} />);
-    const inspectables = inspectablesRef.current;
-    if (inspectables) {
-      inspectables.setState({ inspectables: {} });
-    }
+it('renders info message about no inspectable when none is available',
+  async () => {
+    const inspectablesRef: React.RefObject<Inspectables> =
+      React.createRef<Inspectables>();
+    await act(async () => {
+      root.render(<Inspectables ref={inspectablesRef} />);
+      const inspectables = inspectablesRef.current;
+      if (inspectables) {
+        inspectables.setState({ inspectables: {} });
+      }
+    });
+    const infoElement: Element = container.firstElementChild;
+    expect(infoElement.tagName).toBe('DIV');
+    expect(infoElement.textContent).toBe(
+      'No inspectable pipeline nor pcollection has been defined.'
+    );
   });
-  const infoElement: Element = container.firstElementChild;
-  expect(infoElement.tagName).toBe('DIV');
-  expect(infoElement.textContent).toBe(
-    'No inspectable pipeline nor pcollection has been defined.'
-  );
-});
 
 it('renders inspectables as a list of collapsible lists', async () => {
   const inspectablesRef: React.RefObject<Inspectables> =
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InteractiveInspector.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InteractiveInspector.test.tsx
index a146e2a53d67..ecbb527b61c4 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InteractiveInspector.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InteractiveInspector.test.tsx
@@ -191,6 +191,7 @@ it('updates session info on change', async () => {
     await new Promise(resolve => setTimeout(resolve, 100));
   });
 
-  const topAppBarHeader: Element = container.firstElementChild.firstElementChild.firstElementChild.children[1];
+  const topAppBarHeader: Element =
+    container.firstElementChild.firstElementChild.firstElementChild.children[1];
   expect(topAppBarHeader.innerHTML).toContain('Inspector [kernel:new kernel]');
 });
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx
index 050eb926b33a..e708569bd604 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx
@@ -53,40 +53,42 @@ afterEach(async () => {
   }
 });
 
-it('displays a button when the kernel model is not done with execution', async () => {
-  let button: InterruptKernelButton;
-  await act(async () => {
-    root.render(
-      <InterruptKernelButton
-        ref={(node): void => {
-          button = node;
-        }}
-        model={fakeKernelModel as any}
-      />
-    );
-  });
-  await act(async () => {
-    fakeKernelModel.isDone = false;
-    button?.updateRender();
-    await new Promise(resolve => setTimeout(resolve, 100));
+it('displays a button when the kernel model is not done with execution',
+  async () => {
+    let button: InterruptKernelButton;
+    await act(async () => {
+      root.render(
+        <InterruptKernelButton
+          ref={(node): void => {
+            button = node;
+          }}
+          model={fakeKernelModel as any}
+        />
+      );
+    });
+    await act(async () => {
+      fakeKernelModel.isDone = false;
+      button?.updateRender();
+      await new Promise(resolve => setTimeout(resolve, 100));
+    });
+    const buttonElement: null | Element = container.firstElementChild;
+    expect(buttonElement.tagName).toBe('BUTTON');
+    expect(buttonElement.getAttribute('class')).toContain('mdc-button');
+    expect(buttonElement.getAttribute('class')).toContain('mdc-button--raised');
+    const labelElement: Element = buttonElement.children[1];
+    expect(labelElement.tagName).toBe('SPAN');
+    expect(labelElement.getAttribute('class')).toContain('mdc-button__label');
+    expect(labelElement.innerHTML).toBe('stop');
   });
-  const buttonElement: null | Element = container.firstElementChild;
-  expect(buttonElement.tagName).toBe('BUTTON');
-  expect(buttonElement.getAttribute('class')).toContain('mdc-button');
-  expect(buttonElement.getAttribute('class')).toContain('mdc-button--raised');
-  const labelElement: Element = buttonElement.children[1];
-  expect(labelElement.tagName).toBe('SPAN');
-  expect(labelElement.getAttribute('class')).toContain('mdc-button__label');
-  expect(labelElement.innerHTML).toBe('stop');
-});
 
-it('renders nothing when the kernel model is done with execution', async () => {
-  await act(async () => {
-    root.render(<InterruptKernelButton model={fakeKernelModel as any} />);
+it('renders nothing when the kernel model is done with execution',
+  async () => {
+    await act(async () => {
+      root.render(<InterruptKernelButton model={fakeKernelModel as any} />);
+    });
+    const buttonElement: null | Element = container.firstElementChild;
+    expect(buttonElement).toBe(null);
   });
-  const buttonElement: null | Element = container.firstElementChild;
-  expect(buttonElement).toBe(null);
-});
 
 it('interrupts the kernel when clicked', async () => {
   let button: InterruptKernelButton;

From 0f18f5021002f1fa7f54ccb76c6f4a6889329644 Mon Sep 17 00:00:00 2001
From: chenzo <ccychenzo@gmail.com>
Date: Thu, 3 Apr 2025 12:39:06 +0800
Subject: [PATCH 09/13] Fix eslint

---
 .../src/__tests__/clusters/Clusters.test.tsx  |  4 +-
 .../src/__tests__/common/HtmlView.test.tsx    |  2 +-
 .../inspector/InspectableViewModel.test.ts    | 32 ++++-----
 .../__tests__/inspector/Inspectables.test.tsx | 32 ++++-----
 .../kernel/InterruptKernelButton.test.tsx     | 66 +++++++++----------
 5 files changed, 67 insertions(+), 69 deletions(-)

diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/clusters/Clusters.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/clusters/Clusters.test.tsx
index c0520a32602d..455590859f61 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/clusters/Clusters.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/clusters/Clusters.test.tsx
@@ -71,9 +71,7 @@ it('renders a data-table', async () => {
     }
   };
   await act(async () => {
-    root.render(
-      <Clusters sessionContext={{} as any} ref={clustersRef} />
-    );
+    root.render(<Clusters sessionContext={{} as any} ref={clustersRef} />);
   });
 
   await act(async () => {
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/common/HtmlView.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/common/HtmlView.test.tsx
index b16ad012635c..3688209e2248 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/common/HtmlView.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/common/HtmlView.test.tsx
@@ -77,7 +77,7 @@ describe('HtmlView', () => {
 
   it(
     'only executes incrementally updated Javascript ' +
-    'as html provider updated',
+      'as html provider updated',
     async () => {
       const htmlViewRef: React.RefObject<HtmlView> =
         React.createRef<HtmlView>();
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableViewModel.test.ts b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableViewModel.test.ts
index 3458926bfc0e..c855dea3738e 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableViewModel.test.ts
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableViewModel.test.ts
@@ -49,8 +49,8 @@ it('builds show query correctly with default values', () => {
   inspectableViewModel.queryKernel('pcollection', 'id');
   expect(inspectableViewModel.buildShowQuery({} as IShowOptions)).toBe(
     "ib.show(ie.current_env().inspector.get_val('id')," +
-    'include_window_info=False, visualize_data=False, ' +
-    "duration='inf', n='inf')"
+      'include_window_info=False, visualize_data=False, ' +
+      "duration='inf', n='inf')"
   );
 });
 
@@ -66,8 +66,8 @@ it('builds show query with given checkbox values correctly', () => {
     } as IShowOptions)
   ).toBe(
     "ib.show(ie.current_env().inspector.get_val('id')," +
-    'include_window_info=True, visualize_data=True, ' +
-    "duration='inf', n='inf')"
+      'include_window_info=True, visualize_data=True, ' +
+      "duration='inf', n='inf')"
   );
 });
 
@@ -82,8 +82,8 @@ it('builds show query with string duration', () => {
     } as IShowOptions)
   ).toBe(
     "ib.show(ie.current_env().inspector.get_val('id')," +
-    'include_window_info=False, visualize_data=False, ' +
-    "duration='60s', n='inf')"
+      'include_window_info=False, visualize_data=False, ' +
+      "duration='60s', n='inf')"
   );
 });
 
@@ -98,8 +98,8 @@ it('builds show query with negative duration as inf', () => {
     } as IShowOptions)
   ).toBe(
     "ib.show(ie.current_env().inspector.get_val('id')," +
-    'include_window_info=False, visualize_data=False, ' +
-    "duration='inf', n='inf')"
+      'include_window_info=False, visualize_data=False, ' +
+      "duration='inf', n='inf')"
   );
 });
 
@@ -114,8 +114,8 @@ it('builds show query with positive duration as int', () => {
     } as IShowOptions)
   ).toBe(
     "ib.show(ie.current_env().inspector.get_val('id')," +
-    'include_window_info=False, visualize_data=False, ' +
-    "duration=5, n='inf')"
+      'include_window_info=False, visualize_data=False, ' +
+      "duration=5, n='inf')"
   );
 });
 
@@ -130,8 +130,8 @@ it('builds show query with string n as inf', () => {
     } as IShowOptions)
   ).toBe(
     "ib.show(ie.current_env().inspector.get_val('id')," +
-    'include_window_info=False, visualize_data=False, ' +
-    "duration='inf', n='inf')"
+      'include_window_info=False, visualize_data=False, ' +
+      "duration='inf', n='inf')"
   );
 });
 
@@ -146,8 +146,8 @@ it('builds show query with negative n as inf', () => {
     } as IShowOptions)
   ).toBe(
     "ib.show(ie.current_env().inspector.get_val('id')," +
-    'include_window_info=False, visualize_data=False, ' +
-    "duration='inf', n='inf')"
+      'include_window_info=False, visualize_data=False, ' +
+      "duration='inf', n='inf')"
   );
 });
 
@@ -162,8 +162,8 @@ it('builds show query with positive n as int', () => {
     } as IShowOptions)
   ).toBe(
     "ib.show(ie.current_env().inspector.get_val('id')," +
-    'include_window_info=False, visualize_data=False, ' +
-    "duration='inf', n=5)"
+      'include_window_info=False, visualize_data=False, ' +
+      "duration='inf', n=5)"
   );
 });
 
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx
index e7f6b41137ba..8bac6541fecd 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx
@@ -57,23 +57,23 @@ afterEach(async () => {
   }
 });
 
-it('renders info message about no inspectable when none is available',
-  async () => {
-    const inspectablesRef: React.RefObject<Inspectables> =
-      React.createRef<Inspectables>();
-    await act(async () => {
-      root.render(<Inspectables ref={inspectablesRef} />);
-      const inspectables = inspectablesRef.current;
-      if (inspectables) {
-        inspectables.setState({ inspectables: {} });
-      }
-    });
-    const infoElement: Element = container.firstElementChild;
-    expect(infoElement.tagName).toBe('DIV');
-    expect(infoElement.textContent).toBe(
-      'No inspectable pipeline nor pcollection has been defined.'
-    );
+it(`renders info message about no inspectable
+   when none is available`, async () => {
+  const inspectablesRef: React.RefObject<Inspectables> =
+    React.createRef<Inspectables>();
+  await act(async () => {
+    root.render(<Inspectables ref={inspectablesRef} />);
+    const inspectables = inspectablesRef.current;
+    if (inspectables) {
+      inspectables.setState({ inspectables: {} });
+    }
   });
+  const infoElement: Element = container.firstElementChild;
+  expect(infoElement.tagName).toBe('DIV');
+  expect(infoElement.textContent).toBe(
+    'No inspectable pipeline nor pcollection has been defined.'
+  );
+});
 
 it('renders inspectables as a list of collapsible lists', async () => {
   const inspectablesRef: React.RefObject<Inspectables> =
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx
index e708569bd604..bb8b0be4064d 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx
@@ -53,42 +53,42 @@ afterEach(async () => {
   }
 });
 
-it('displays a button when the kernel model is not done with execution',
-  async () => {
-    let button: InterruptKernelButton;
-    await act(async () => {
-      root.render(
-        <InterruptKernelButton
-          ref={(node): void => {
-            button = node;
-          }}
-          model={fakeKernelModel as any}
-        />
-      );
-    });
-    await act(async () => {
-      fakeKernelModel.isDone = false;
-      button?.updateRender();
-      await new Promise(resolve => setTimeout(resolve, 100));
-    });
-    const buttonElement: null | Element = container.firstElementChild;
-    expect(buttonElement.tagName).toBe('BUTTON');
-    expect(buttonElement.getAttribute('class')).toContain('mdc-button');
-    expect(buttonElement.getAttribute('class')).toContain('mdc-button--raised');
-    const labelElement: Element = buttonElement.children[1];
-    expect(labelElement.tagName).toBe('SPAN');
-    expect(labelElement.getAttribute('class')).toContain('mdc-button__label');
-    expect(labelElement.innerHTML).toBe('stop');
+it(`displays a button when the kernel model
+   is not done with execution`, async () => {
+  let button: InterruptKernelButton;
+  await act(async () => {
+    root.render(
+      <InterruptKernelButton
+        ref={(node): void => {
+          button = node;
+        }}
+        model={fakeKernelModel as any}
+      />
+    );
+  });
+  await act(async () => {
+    fakeKernelModel.isDone = false;
+    button?.updateRender();
+    await new Promise(resolve => setTimeout(resolve, 100));
   });
+  const buttonElement: null | Element = container.firstElementChild;
+  expect(buttonElement.tagName).toBe('BUTTON');
+  expect(buttonElement.getAttribute('class')).toContain('mdc-button');
+  expect(buttonElement.getAttribute('class')).toContain('mdc-button--raised');
+  const labelElement: Element = buttonElement.children[1];
+  expect(labelElement.tagName).toBe('SPAN');
+  expect(labelElement.getAttribute('class')).toContain('mdc-button__label');
+  expect(labelElement.innerHTML).toBe('stop');
+});
 
-it('renders nothing when the kernel model is done with execution',
-  async () => {
-    await act(async () => {
-      root.render(<InterruptKernelButton model={fakeKernelModel as any} />);
-    });
-    const buttonElement: null | Element = container.firstElementChild;
-    expect(buttonElement).toBe(null);
+it(`renders nothing when the kernel
+   model is done with execution`, async () => {
+  await act(async () => {
+    root.render(<InterruptKernelButton model={fakeKernelModel as any} />);
   });
+  const buttonElement: null | Element = container.firstElementChild;
+  expect(buttonElement).toBe(null);
+});
 
 it('interrupts the kernel when clicked', async () => {
   let button: InterruptKernelButton;

From ace3370251374b78665aff06346c3315ce2c4bcb Mon Sep 17 00:00:00 2001
From: chenzo <ccychenzo@gmail.com>
Date: Tue, 8 Apr 2025 00:04:15 +0800
Subject: [PATCH 10/13] Use waitFor() instead of setTimeout

---
 .../src/__tests__/clusters/Clusters.test.tsx  |  7 +++++-
 .../src/__tests__/common/HtmlView.test.tsx    | 24 ++++++++++++-------
 .../__tests__/inspector/Inspectables.test.tsx | 16 +++++++------
 .../inspector/InteractiveInspector.test.tsx   | 20 ++++++++--------
 .../kernel/InterruptKernelButton.test.tsx     | 18 ++++++++++----
 5 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/clusters/Clusters.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/clusters/Clusters.test.tsx
index 455590859f61..1b0deaf2c129 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/clusters/Clusters.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/clusters/Clusters.test.tsx
@@ -18,6 +18,8 @@ import { act } from 'react';
 
 import { Clusters } from '../../clusters/Clusters';
 
+import { waitFor } from '@testing-library/dom';
+
 let container: null | Element = null;
 let root: Root | null = null;
 beforeEach(() => {
@@ -76,9 +78,12 @@ it('renders a data-table', async () => {
 
   await act(async () => {
     clustersRef.current?.setState({ clusters: testData });
-    await new Promise(resolve => setTimeout(resolve, 100));
   });
 
+  await waitFor(() =>
+    expect(container.querySelector('.mdc-data-table__table')).toBeTruthy()
+  );
+
   const topAppBarHeader: Element = container.firstElementChild;
   expect(topAppBarHeader.tagName).toBe('HEADER');
   expect(topAppBarHeader.getAttribute('class')).toContain('mdc-top-app-bar');
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/common/HtmlView.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/common/HtmlView.test.tsx
index 3688209e2248..c3b5c0b25691 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/common/HtmlView.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/common/HtmlView.test.tsx
@@ -21,6 +21,7 @@ import { createRoot, Root } from 'react-dom/client';
 import { act } from 'react';
 
 import { HtmlView, IHtmlProvider, importHtml } from '../../common/HtmlView';
+import { waitFor } from '@testing-library/dom';
 
 let container: null | Element = null;
 let root: Root | null = null;
@@ -65,11 +66,14 @@ describe('HtmlView', () => {
     });
     await act(async () => {
       htmlViewRef.current?.updateRender();
-      await new Promise(resolve => setTimeout(resolve, 100));
     });
-    const htmlViewElement: Element = container.firstElementChild;
-    expect(htmlViewElement.tagName).toBe('DIV');
-    expect(htmlViewElement.innerHTML).toBe('<div>Test</div>');
+
+    await waitFor(() => {
+      const htmlViewElement: Element = container.firstElementChild;
+      expect(htmlViewElement.tagName).toBe('DIV');
+      expect(htmlViewElement.innerHTML).toBe('<div>Test</div>');
+    });
+
     expect(spiedConsole).toHaveBeenCalledWith(1);
     expect(spiedConsole).toHaveBeenCalledWith(2);
     expect(spiedConsole).toHaveBeenCalledTimes(2);
@@ -77,7 +81,7 @@ describe('HtmlView', () => {
 
   it(
     'only executes incrementally updated Javascript ' +
-      'as html provider updated',
+    'as html provider updated',
     async () => {
       const htmlViewRef: React.RefObject<HtmlView> =
         React.createRef<HtmlView>();
@@ -93,11 +97,15 @@ describe('HtmlView', () => {
       });
       await act(async () => {
         htmlViewRef.current?.updateRender();
-        await new Promise(resolve => setTimeout(resolve, 100));
       });
-      expect(spiedConsole).toHaveBeenCalledWith(1);
-      expect(spiedConsole).toHaveBeenCalledTimes(1);
+
+      await waitFor(() => {
+        expect(spiedConsole).toHaveBeenCalledWith(1);
+        expect(spiedConsole).toHaveBeenCalledTimes(1);
+      });
+
       fakeHtmlProvider.script.push('console.log(2);');
+
       await act(async () => {
         const htmlView = htmlViewRef.current;
         if (htmlView) {
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx
index 8bac6541fecd..187cab02a8ba 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx
@@ -17,6 +17,7 @@ import { createRoot, Root } from 'react-dom/client';
 import { act } from 'react';
 
 import { Inspectables } from '../../inspector/Inspectables';
+import { waitFor } from '@testing-library/dom';
 
 jest.mock('../../inspector/InspectableList', () => {
   const FakeInspectableList = function (): React.ReactNode {
@@ -115,13 +116,14 @@ it('renders inspectables as a list of collapsible lists', async () => {
 
   await act(async () => {
     inspectablesRef.current?.setState({ inspectables: testData });
-    await new Promise(resolve => setTimeout(resolve, 100));
   });
 
-  const listElement: Element = container.firstElementChild;
-  expect(listElement.tagName).toBe('UL');
-  expect(listElement.getAttribute('class')).toContain('mdc-list');
-  // Only checks the length of dummy InspectableList items. Each InspectableList
-  // has its own unit tests.
-  expect(listElement.children).toHaveLength(2);
+  await waitFor(() => {
+    const listElement: Element = container.firstElementChild;
+    expect(listElement.tagName).toBe('UL');
+    expect(listElement.getAttribute('class')).toContain('mdc-list');
+    // Only checks the length of dummy InspectableList items. Each InspectableList
+    // has its own unit tests.
+    expect(listElement.children).toHaveLength(2);
+  })
 });
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InteractiveInspector.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InteractiveInspector.test.tsx
index ecbb527b61c4..8c393de19358 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InteractiveInspector.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InteractiveInspector.test.tsx
@@ -19,6 +19,7 @@ import { act } from 'react';
 import { InteractiveInspector } from '../../inspector/InteractiveInspector';
 
 import { InspectableViewModel } from '../../inspector/InspectableViewModel';
+import { waitFor } from '@testing-library/dom';
 
 const fakeSessionContext = {
   session: {
@@ -151,17 +152,15 @@ it('closes the drawer on flip from open state', async () => {
     if (inspector) {
       inspector.flipDrawer();
     }
-    await new Promise(resolve => setTimeout(resolve, 100));
   });
 
   // react test renderer does not re-render the drawer component even if the
   // state is changed. Test the state change instead of DOM change.
-  await act(async () => {
-    const inspector = inspectorRef.current;
-    if (inspector) {
-      expect(inspector.state.drawerOpen).toBe(false);
+  await waitFor(() => {
+    const updatedInspector = inspectorRef.current;
+    if (updatedInspector) {
+      expect(updatedInspector.state.drawerOpen).toBe(false); // 确保抽屉被打开
     }
-    await new Promise(resolve => setTimeout(resolve, 100));
   });
 });
 
@@ -188,10 +187,11 @@ it('updates session info on change', async () => {
       fakeSessionContext.kernelDisplayName = 'new kernel';
       inspector.updateSessionInfo();
     }
-    await new Promise(resolve => setTimeout(resolve, 100));
   });
 
-  const topAppBarHeader: Element =
-    container.firstElementChild.firstElementChild.firstElementChild.children[1];
-  expect(topAppBarHeader.innerHTML).toContain('Inspector [kernel:new kernel]');
+  await waitFor(() => {
+    const topAppBarHeader: Element =
+      container.firstElementChild.firstElementChild.firstElementChild.children[1];
+    expect(topAppBarHeader.innerHTML).toContain('Inspector [kernel:new kernel]');
+  });
 });
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx
index bb8b0be4064d..04c9b7f2d2fc 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx
@@ -18,6 +18,8 @@ import { act } from 'react';
 
 import { InterruptKernelButton } from '../../kernel/InterruptKernelButton';
 
+import { waitFor } from '@testing-library/react'
+
 const fakeKernelModel = {
   isDone: true,
   interruptKernel: function (): void {
@@ -56,6 +58,7 @@ afterEach(async () => {
 it(`displays a button when the kernel model
    is not done with execution`, async () => {
   let button: InterruptKernelButton;
+
   await act(async () => {
     root.render(
       <InterruptKernelButton
@@ -66,13 +69,19 @@ it(`displays a button when the kernel model
       />
     );
   });
+
   await act(async () => {
     fakeKernelModel.isDone = false;
     button?.updateRender();
     await new Promise(resolve => setTimeout(resolve, 100));
   });
+
+  await waitFor(() => {
+    const button = container.firstElementChild;
+    expect(button).not.toBeNull();
+    expect(button?.tagName).toBe('BUTTON');
+  })
   const buttonElement: null | Element = container.firstElementChild;
-  expect(buttonElement.tagName).toBe('BUTTON');
   expect(buttonElement.getAttribute('class')).toContain('mdc-button');
   expect(buttonElement.getAttribute('class')).toContain('mdc-button--raised');
   const labelElement: Element = buttonElement.children[1];
@@ -92,7 +101,7 @@ it(`renders nothing when the kernel
 
 it('interrupts the kernel when clicked', async () => {
   let button: InterruptKernelButton;
-  const spiedInterrruptCall = jest.spyOn(fakeKernelModel, 'interruptKernel');
+  const spiedInterruptCall = jest.spyOn(fakeKernelModel, 'interruptKernel');
   await act(async () => {
     root.render(
       <InterruptKernelButton
@@ -105,7 +114,8 @@ it('interrupts the kernel when clicked', async () => {
   });
   await act(async () => {
     button?.onClick();
-    await new Promise(resolve => setTimeout(resolve, 100));
+    await waitFor(() => {
+      expect(spiedInterruptCall).toHaveBeenCalledTimes(1);
+    });
   });
-  expect(spiedInterrruptCall).toHaveBeenCalledTimes(1);
 });

From 959790807e91ff55a3645539e4295107d77e34ec Mon Sep 17 00:00:00 2001
From: chenzo <ccychenzo@gmail.com>
Date: Tue, 8 Apr 2025 00:20:20 +0800
Subject: [PATCH 11/13] Use "as Element" instead of ": Element" in somewhere
 that can improve efficiency.

---
 .../src/__tests__/clusters/Clusters.test.tsx  | 24 +++++++++----------
 .../src/__tests__/common/HtmlView.test.tsx    |  6 ++---
 .../inspector/InspectableList.test.tsx        | 18 +++++++-------
 .../inspector/InspectableListItem.test.tsx    |  8 +++----
 .../inspector/InspectableView.test.tsx        | 20 ++++++++--------
 .../__tests__/inspector/Inspectables.test.tsx | 10 ++++----
 .../inspector/InteractiveInspector.test.tsx   | 23 ++++++++++--------
 .../kernel/InterruptKernelButton.test.tsx     |  9 ++++---
 8 files changed, 60 insertions(+), 58 deletions(-)

diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/clusters/Clusters.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/clusters/Clusters.test.tsx
index 1b0deaf2c129..f323875ed6f8 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/clusters/Clusters.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/clusters/Clusters.test.tsx
@@ -55,7 +55,7 @@ it('renders info message about no clusters being available', async () => {
       clusters.setState({ clusters: {} });
     }
   });
-  const infoElement: Element = container.firstElementChild;
+  const infoElement = container.firstElementChild as Element;
   expect(infoElement.tagName).toBe('DIV');
   expect(infoElement.textContent).toBe('No clusters detected.');
 });
@@ -84,7 +84,7 @@ it('renders a data-table', async () => {
     expect(container.querySelector('.mdc-data-table__table')).toBeTruthy()
   );
 
-  const topAppBarHeader: Element = container.firstElementChild;
+  const topAppBarHeader = container.firstElementChild as Element;
   expect(topAppBarHeader.tagName).toBe('HEADER');
   expect(topAppBarHeader.getAttribute('class')).toContain('mdc-top-app-bar');
   expect(topAppBarHeader.getAttribute('class')).toContain(
@@ -94,42 +94,42 @@ it('renders a data-table', async () => {
     'mdc-top-app-bar--dense'
   );
   expect(topAppBarHeader.innerHTML).toContain('Clusters [kernel:no kernel]');
-  const topAppBarFixedAdjust: Element = container.children[1];
+  const topAppBarFixedAdjust = container.children[1] as Element;
   expect(topAppBarFixedAdjust.tagName).toBe('DIV');
   expect(topAppBarFixedAdjust.getAttribute('class')).toContain(
     'mdc-top-app-bar--fixed-adjust'
   );
-  const selectBar: Element = container.children[2];
+  const selectBar = container.children[2] as Element;
   expect(selectBar.tagName).toBe('DIV');
   expect(selectBar.getAttribute('class')).toContain('mdc-select');
-  const dialogBox: Element = container.children[3];
+  const dialogBox = container.children[3] as Element;
   expect(dialogBox.tagName).toBe('DIV');
   expect(dialogBox.getAttribute('class')).toContain('mdc-dialog');
-  const clustersComponent: Element = container.children[4];
+  const clustersComponent = container.children[4] as Element;
   expect(clustersComponent.tagName).toBe('DIV');
   expect(clustersComponent.getAttribute('class')).toContain('Clusters');
-  const dataTableDiv: Element = clustersComponent.children[0];
+  const dataTableDiv = clustersComponent.children[0] as Element;
   expect(dataTableDiv.tagName).toBe('DIV');
   expect(dataTableDiv.getAttribute('class')).toContain('mdc-data-table');
-  const dataTable: Element = dataTableDiv.children[0].firstElementChild;
+  const dataTable = dataTableDiv.children[0].firstElementChild as Element;
   expect(dataTable.tagName).toBe('TABLE');
   expect(dataTable.getAttribute('class')).toContain('mdc-data-table__table');
-  const dataTableHead: Element = dataTable.children[0];
+  const dataTableHead = dataTable.children[0] as Element;
   expect(dataTableHead.tagName).toBe('THEAD');
   expect(dataTableHead.getAttribute('class')).toContain(
     'rmwc-data-table__head'
   );
-  const dataTableHeaderRow: Element = dataTableHead.children[0];
+  const dataTableHeaderRow = dataTableHead.children[0] as Element;
   expect(dataTableHeaderRow.tagName).toBe('TR');
   expect(dataTableHeaderRow.getAttribute('class')).toContain(
     'mdc-data-table__header-row'
   );
-  const dataTableBody: Element = dataTable.children[1];
+  const dataTableBody = dataTable.children[1] as Element;
   expect(dataTableBody.tagName).toBe('TBODY');
   expect(dataTableBody.getAttribute('class')).toContain(
     'mdc-data-table__content'
   );
-  const dataTableBodyRow: Element = dataTableBody.children[0];
+  const dataTableBodyRow = dataTableBody.children[0] as Element;
   expect(dataTableBodyRow.tagName).toBe('TR');
   expect(dataTableBodyRow.getAttribute('class')).toContain(
     'mdc-data-table__row'
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/common/HtmlView.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/common/HtmlView.test.tsx
index c3b5c0b25691..2aa8be3fb5a7 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/common/HtmlView.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/common/HtmlView.test.tsx
@@ -69,7 +69,7 @@ describe('HtmlView', () => {
     });
 
     await waitFor(() => {
-      const htmlViewElement: Element = container.firstElementChild;
+      const htmlViewElement = container.firstElementChild as Element;
       expect(htmlViewElement.tagName).toBe('DIV');
       expect(htmlViewElement.innerHTML).toBe('<div>Test</div>');
     });
@@ -81,7 +81,7 @@ describe('HtmlView', () => {
 
   it(
     'only executes incrementally updated Javascript ' +
-    'as html provider updated',
+      'as html provider updated',
     async () => {
       const htmlViewRef: React.RefObject<HtmlView> =
         React.createRef<HtmlView>();
@@ -122,7 +122,7 @@ describe('Function importHtml', () => {
     await act(async () => {
       importHtml([]);
     });
-    const scriptElement: Element = document.head.firstElementChild;
+    const scriptElement = document.head.firstElementChild as Element;
     expect(scriptElement.tagName).toBe('SCRIPT');
     expect(scriptElement.getAttribute('src')).toBe(
       'https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.3.3/webcomponents-lite.js'
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableList.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableList.test.tsx
index 1e9b7a1fa90f..1b475bdbc182 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableList.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableList.test.tsx
@@ -75,23 +75,23 @@ it('renders a list', async () => {
       />
     );
   });
-  const listElement: Element = container.firstElementChild;
-  const listHandle: Element = listElement.firstElementChild;
+  const listElement = container.firstElementChild as Element;
+  const listHandle = listElement.firstElementChild as Element;
   expect(listHandle.tagName).toBe('DIV');
   expect(listHandle.getAttribute('class')).toContain(
     'rmwc-collapsible-list__handle'
   );
-  const listHandleItem: Element = listHandle.firstElementChild;
+  const listHandleItem = listHandle.firstElementChild as Element;
   expect(listHandleItem.tagName).toBe('LI');
   expect(listHandleItem.getAttribute('class')).toContain('mdc-list-item');
-  const listHandleText: Element = listHandleItem.children[2];
+  const listHandleText = listHandleItem.children[2] as Element;
   expect(listHandleText.getAttribute('class')).toContain('mdc-list-item__text');
-  const listHandlePrimaryText: Element = listHandleText.firstElementChild;
+  const listHandlePrimaryText = listHandleText.firstElementChild as Element;
   expect(listHandlePrimaryText.getAttribute('class')).toContain(
     'mdc-list-item__primary-text'
   );
   expect(listHandlePrimaryText.textContent).toBe('pipeline_name');
-  const listHandleMetaIcon: Element = listHandleItem.children[3];
+  const listHandleMetaIcon = listHandleItem.children[3] as Element;
   expect(listHandleMetaIcon.tagName).toBe('I');
   expect(listHandleMetaIcon.getAttribute('class')).toContain(
     'mdc-list-item__meta'
@@ -99,12 +99,12 @@ it('renders a list', async () => {
   expect(listHandleMetaIcon.textContent).toBe('chevron_right');
   // Only check existence of collapsible list children because each child is an
   // individual list item that has its own unit tests.
-  const listChildren: Element = listElement.children[1];
+  const listChildren = listElement.children[1] as Element;
   expect(listChildren.tagName).toBe('DIV');
   expect(listChildren.getAttribute('class')).toContain(
     'rmwc-collapsible-list__children'
   );
-  const listChildItems: HTMLCollection =
-    listChildren.firstElementChild.children;
+  const listChildItems = listChildren.firstElementChild
+    .children as HTMLCollection;
   expect(listChildItems).toHaveLength(2);
 });
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableListItem.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableListItem.test.tsx
index 16359530dd08..6bf3bd6f0f46 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableListItem.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableListItem.test.tsx
@@ -58,17 +58,17 @@ it('renders an item', async () => {
       />
     );
   });
-  const liElement: Element = container.firstElementChild;
+  const liElement = container.firstElementChild as Element;
   expect(liElement.tagName).toBe('LI');
   expect(liElement.getAttribute('class')).toBe('mdc-list-item');
-  const textElement: Element = liElement.children[1];
+  const textElement = liElement.children[1] as Element;
   expect(textElement.getAttribute('class')).toBe('mdc-list-item__text');
-  const primaryTextElement: Element = textElement.firstElementChild;
+  const primaryTextElement = textElement.firstElementChild as Element;
   expect(primaryTextElement.getAttribute('class')).toBe(
     'mdc-list-item__primary-text'
   );
   expect(primaryTextElement.textContent).toBe('name');
-  const secondaryTextElement: Element = textElement.children[1];
+  const secondaryTextElement = textElement.children[1] as Element;
   expect(secondaryTextElement.getAttribute('class')).toBe(
     'mdc-list-item__secondary-text'
   );
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableView.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableView.test.tsx
index 65b12e3dee47..9ef77b191577 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableView.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InspectableView.test.tsx
@@ -89,31 +89,31 @@ it('renders options if inspecting a pcollection', async () => {
       });
     }
   });
-  const inspectableViewElement: Element = container.firstElementChild;
-  const optionsElement: Element = inspectableViewElement.firstElementChild;
+  const optionsElement = container.firstElementChild
+    .firstElementChild as Element;
   expect(optionsElement.tagName).toBe('DIV');
-  const includeWindowInfoCheckbox: Element =
-    optionsElement.firstElementChild.firstElementChild;
+  const includeWindowInfoCheckbox = optionsElement.firstElementChild
+    .firstElementChild as Element;
   expect(
     includeWindowInfoCheckbox.firstElementChild.getAttribute('class')
   ).toContain('mdc-checkbox');
   expect(
     includeWindowInfoCheckbox.firstElementChild.getAttribute('class')
   ).not.toContain('mdc-checkbox--selected');
-  const visualizeInFacetsCheckbox: Element =
-    optionsElement.firstElementChild.children[1];
+  const visualizeInFacetsCheckbox = optionsElement.firstElementChild
+    .children[1] as Element;
   expect(
     visualizeInFacetsCheckbox.firstElementChild.getAttribute('class')
   ).toContain('mdc-checkbox');
   expect(
     visualizeInFacetsCheckbox.firstElementChild.getAttribute('class')
   ).toContain('mdc-checkbox--selected');
-  const durationTextField: Element =
-    optionsElement.firstElementChild.children[2];
+  const durationTextField = optionsElement.firstElementChild
+    .children[2] as Element;
   expect(durationTextField.getAttribute('class')).toContain(
     'mdc-text-field--outlined'
   );
-  const nTextField: Element = optionsElement.firstElementChild.children[3];
+  const nTextField = optionsElement.firstElementChild.children[3] as Element;
   expect(nTextField.getAttribute('class')).toContain(
     'mdc-text-field--outlined'
   );
@@ -130,6 +130,6 @@ it('renders an html view', async () => {
   await act(async () => {
     root.render(<InspectableView model={fakeModel} />);
   });
-  const inspectableViewElement: Element = container.firstElementChild;
+  const inspectableViewElement = container.firstElementChild as Element;
   expect(inspectableViewElement.innerHTML).toContain('<div>fake html</div>');
 });
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx
index 187cab02a8ba..bca3568b5126 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx
@@ -69,7 +69,7 @@ it(`renders info message about no inspectable
       inspectables.setState({ inspectables: {} });
     }
   });
-  const infoElement: Element = container.firstElementChild;
+  const infoElement = container.firstElementChild as Element;
   expect(infoElement.tagName).toBe('DIV');
   expect(infoElement.textContent).toBe(
     'No inspectable pipeline nor pcollection has been defined.'
@@ -119,11 +119,11 @@ it('renders inspectables as a list of collapsible lists', async () => {
   });
 
   await waitFor(() => {
-    const listElement: Element = container.firstElementChild;
+    const listElement = container.firstElementChild as Element;
     expect(listElement.tagName).toBe('UL');
     expect(listElement.getAttribute('class')).toContain('mdc-list');
-    // Only checks the length of dummy InspectableList items. Each InspectableList
-    // has its own unit tests.
+    // Only checks the length of dummy InspectableList items.
+    // Each InspectableList has its own unit tests.
     expect(listElement.children).toHaveLength(2);
-  })
+  });
 });
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InteractiveInspector.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InteractiveInspector.test.tsx
index 8c393de19358..b5215b3b9874 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InteractiveInspector.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InteractiveInspector.test.tsx
@@ -75,7 +75,7 @@ it('renders the top app bar and drawer wrapped inspectables', async () => {
       />
     );
   });
-  const topAppBarHeader: Element = container.firstElementChild;
+  const topAppBarHeader = container.firstElementChild as Element;
   expect(topAppBarHeader.tagName).toBe('HEADER');
   expect(topAppBarHeader.getAttribute('class')).toContain('mdc-top-app-bar');
   expect(topAppBarHeader.getAttribute('class')).toContain(
@@ -86,17 +86,18 @@ it('renders the top app bar and drawer wrapped inspectables', async () => {
   );
   expect(topAppBarHeader.innerHTML).toContain('menu');
   expect(topAppBarHeader.innerHTML).toContain('Inspector [kernel:no kernel]');
-  const topAppBarFixedAdjust: Element = container.children[1];
+  const topAppBarFixedAdjust = container.children[1] as Element;
   expect(topAppBarFixedAdjust.tagName).toBe('DIV');
   expect(topAppBarFixedAdjust.getAttribute('class')).toContain(
     'mdc-top-app-bar--fixed-adjust'
   );
-  const interactiveInspectorDiv: Element = container.children[2];
+  const interactiveInspectorDiv = container.children[2] as Element;
   expect(interactiveInspectorDiv.tagName).toBe('DIV');
   expect(interactiveInspectorDiv.getAttribute('class')).toContain(
     'InteractiveInspector'
   );
-  const inspectablesAside: Element = interactiveInspectorDiv.firstElementChild;
+  const inspectablesAside =
+    interactiveInspectorDiv.firstElementChild as Element;
   expect(inspectablesAside.tagName).toBe('ASIDE');
   expect(inspectablesAside.innerHTML).toContain(
     '<div>No inspectable pipeline nor pcollection has been defined.</div>'
@@ -104,8 +105,8 @@ it('renders the top app bar and drawer wrapped inspectables', async () => {
   expect(inspectablesAside.firstElementChild.getAttribute('class')).toContain(
     'mdc-drawer__content'
   );
-  const inspectableViewAsAppContent: Element =
-    interactiveInspectorDiv.children[1];
+  const inspectableViewAsAppContent = interactiveInspectorDiv
+    .children[1] as Element;
   expect(inspectableViewAsAppContent.tagName).toBe('DIV');
   expect(inspectableViewAsAppContent.getAttribute('class')).toContain(
     'mdc-drawer-app-content'
@@ -127,7 +128,7 @@ it('renders the drawer open by default', async () => {
       />
     );
   });
-  const inspectablesAside: Element = container.children[2].firstElementChild;
+  const inspectablesAside = container.children[2].firstElementChild as Element;
   expect(inspectablesAside.getAttribute('class')).toContain('mdc-drawer--open');
 });
 
@@ -190,8 +191,10 @@ it('updates session info on change', async () => {
   });
 
   await waitFor(() => {
-    const topAppBarHeader: Element =
-      container.firstElementChild.firstElementChild.firstElementChild.children[1];
-    expect(topAppBarHeader.innerHTML).toContain('Inspector [kernel:new kernel]');
+    const topAppBarHeader = container.firstElementChild.firstElementChild
+      .firstElementChild.children[1] as Element;
+    expect(topAppBarHeader.innerHTML).toContain(
+      'Inspector [kernel:new kernel]'
+    );
   });
 });
diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx
index 04c9b7f2d2fc..d9844b0f2eb2 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx
@@ -18,7 +18,7 @@ import { act } from 'react';
 
 import { InterruptKernelButton } from '../../kernel/InterruptKernelButton';
 
-import { waitFor } from '@testing-library/react'
+import { waitFor } from '@testing-library/react';
 
 const fakeKernelModel = {
   isDone: true,
@@ -73,18 +73,17 @@ it(`displays a button when the kernel model
   await act(async () => {
     fakeKernelModel.isDone = false;
     button?.updateRender();
-    await new Promise(resolve => setTimeout(resolve, 100));
   });
 
   await waitFor(() => {
     const button = container.firstElementChild;
     expect(button).not.toBeNull();
     expect(button?.tagName).toBe('BUTTON');
-  })
-  const buttonElement: null | Element = container.firstElementChild;
+  });
+  const buttonElement = container.firstElementChild as Element;
   expect(buttonElement.getAttribute('class')).toContain('mdc-button');
   expect(buttonElement.getAttribute('class')).toContain('mdc-button--raised');
-  const labelElement: Element = buttonElement.children[1];
+  const labelElement = buttonElement.children[1] as Element;
   expect(labelElement.tagName).toBe('SPAN');
   expect(labelElement.getAttribute('class')).toContain('mdc-button__label');
   expect(labelElement.innerHTML).toBe('stop');

From f03997a3f85681eb00c62fd29f393153da72a968 Mon Sep 17 00:00:00 2001
From: chenzo <ccychenzo@gmail.com>
Date: Tue, 8 Apr 2025 11:10:35 +0800
Subject: [PATCH 12/13] Update CHANGES.md

---
 CHANGES.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGES.md b/CHANGES.md
index 850b854e76c8..feb519cd1bac 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -72,7 +72,7 @@
 
 ## Breaking Changes
 
-* X behavior was changed ([#X](https://github.com/apache/beam/issues/X)).
+* Python: Added JupyterLab 4.x extension compatibility for enhanced notebook integration ([#34495](https://github.com/apache/beam/pull/34495)).
 
 ## Deprecations
 

From 8c1f6dd638507217741c526b8342486eb91a58b0 Mon Sep 17 00:00:00 2001
From: chenzo <ccychenzo@gmail.com>
Date: Tue, 13 May 2025 13:49:27 +0800
Subject: [PATCH 13/13] Update README.md

---
 .../extensions/apache-beam-jupyterlab-sidepanel/README.md      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/README.md b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/README.md
index 0490472588d9..2a6cd9f34aae 100644
--- a/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/README.md
+++ b/sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/README.md
@@ -25,7 +25,8 @@ Includes two different side panels:
 
 | JupyterLab version | Extension version |
 | ------------------ | ----------------- |
-| v3                 | >=v2.0.0          |
+| v4                 | >=v4.0.0          |
+| v3                 | v2.0.0-v3.0.0     |
 | v2                 | v1.0.0            |
 
 ## Install