✨ Upgrade sidepanel extension to JupyterLab 4.x compatibility

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
 

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"
   }
 }

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,18 +78,19 @@ 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.
             handleComms: false
           }
         });
         // 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) {

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>;
 }

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>;
 }
 
 /**

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>;
 }

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>;
 }

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>;
 }

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>;
 }

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>;
 }

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>;
 }