fix: DH-18648: Ensure grid panel doesn't crash when Pandas query restarted (#2528)

- Taking part of deephaven-ent/iris#2572, but
only need to reset the model on disconnect in G+
- The model is refetched the query is restarted
- Tested against dev-gplus, created a query there with some pandas data
frames

Author: mofojed

packages/dashboard-core-plugins/src/panels/PandasPanel.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable react/no-unused-state */
 import React, { Component, type ReactElement, type RefObject } from 'react';
+import { IrisGridModel } from '@deephaven/iris-grid';
 import ConnectedIrisGridPanel, {
   type IrisGridPanel,
   type OwnProps as IrisGridPanelOwnProps,
@@ -16,6 +17,7 @@ export interface PandasPanelProps extends IrisGridPanelOwnProps {
 interface PandasPanelState {
   shouldFocusGrid: boolean;
   panelState: PanelState | null;
+  makeModel: IrisGridPanelOwnProps['makeModel'];
 }
 
 /**
@@ -28,11 +30,17 @@ class PandasPanel extends Component<PandasPanelProps, PandasPanelState> {
 
   static COMPONENT = 'PandasPanel';
 
+  // eslint-disable-next-line react/sort-comp
+  private irisGridRef: RefObject<IrisGridPanel>;
+
+  private model: IrisGridModel | null = null;
+
   constructor(props: PandasPanelProps) {
     super(props);
 
     this.irisGridRef = React.createRef();
 
+    this.handleDisconnect = this.handleDisconnect.bind(this);
     this.handleReload = this.handleReload.bind(this);
     this.handleGridStateChange = this.handleGridStateChange.bind(this);
     this.handlePanelStateUpdate = this.handlePanelStateUpdate.bind(this);
@@ -41,10 +49,58 @@ class PandasPanel extends Component<PandasPanelProps, PandasPanelState> {
     this.state = {
       shouldFocusGrid: false,
       panelState, // Dehydrated panel state that can load this panel
+      makeModel: this.wrapMakeModel(props.makeModel),
+    };
+  }
+
+  componentDidUpdate(prevProps: Readonly<PandasPanelProps>): void {
+    const { makeModel: prevMakeModel } = prevProps;
+    const { makeModel } = this.props;
+    if (prevMakeModel !== makeModel) {
+      this.setState({ makeModel: this.wrapMakeModel(makeModel) });
+    }
+  }
+
+  componentWillUnmount(): void {
+    if (this.model != null) {
+      this.stopListening(this.model);
+    }
+  }
+
+  private wrapMakeModel(
+    makeModel: IrisGridPanelOwnProps['makeModel']
+  ): IrisGridPanelOwnProps['makeModel'] {
+    return async () => {
+      // Need to listen for disconnect in the model, so we know when to throw this makeModel away
+      const model = await makeModel();
+      if (this.model != null) {
+        this.stopListening(this.model);
+      }
+      this.model = model;
+      this.startListening(model);
+      return model;
     };
   }
 
-  irisGridRef: RefObject<IrisGridPanel>;
+  private startListening(model: IrisGridModel): void {
+    model.addEventListener(
+      IrisGridModel.EVENT.DISCONNECT,
+      this.handleDisconnect
+    );
+  }
+
+  private stopListening(model: IrisGridModel): void {
+    model.removeEventListener(
+      IrisGridModel.EVENT.DISCONNECT,
+      this.handleDisconnect
+    );
+  }
+
+  private handleDisconnect(): void {
+    // Once a Pandas widget is closed, the underlying table is closed and cannot be reconnected to.
+    // Reset the model to undefined so IrisGridPanel doesn't try to use it anymore.
+    this.irisGridRef.current?.setState({ model: undefined });
+  }
 
   handleReload(): void {
     this.irisGridRef.current?.initModel();
@@ -70,12 +126,14 @@ class PandasPanel extends Component<PandasPanelProps, PandasPanelState> {
   }
 
   render(): ReactElement {
+    const { makeModel } = this.state;
     return (
       <ConnectedIrisGridPanel
         ref={this.irisGridRef}
         onStateChange={this.handleGridStateChange}
         onPanelStateUpdate={this.handlePanelStateUpdate}
         {...this.props}
+        makeModel={makeModel}
       >
         <PandasReloadButton onClick={this.handleReload} />
       </ConnectedIrisGridPanel>