fix: DH-17292 Handle disconnect from GridWidgetPlugin

packages/dashboard-core-plugins/src/GridWidgetPlugin.tsx

@@ -1,42 +1,34 @@
-import { useEffect, useState } from 'react';
 import { type WidgetComponentProps } from '@deephaven/plugin';
 import { type dh } from '@deephaven/jsapi-types';
-import { useApi } from '@deephaven/jsapi-bootstrap';
-import {
-  IrisGrid,
-  IrisGridModelFactory,
-  type IrisGridModel,
-} from '@deephaven/iris-grid';
+import { IrisGrid } from '@deephaven/iris-grid';
 import { useSelector } from 'react-redux';
 import { getSettings, RootState } from '@deephaven/redux';
+import { LoadingOverlay } from '@deephaven/components';
+import { getErrorMessage } from '@deephaven/utils';
+import { useIrisGridModel } from './useIrisGridModel';
 
-export function GridWidgetPlugin(
-  props: WidgetComponentProps<dh.Table>
-): JSX.Element | null {
-  const dh = useApi();
+export function GridWidgetPlugin({
+  fetch,
+}: WidgetComponentProps<dh.Table>): JSX.Element | null {
   const settings = useSelector(getSettings<RootState>);
-  const [model, setModel] = useState<IrisGridModel>();
 
-  const { fetch } = props;
+  const fetchResult = useIrisGridModel(fetch);
 
-  useEffect(() => {
-    let cancelled = false;
-    async function init() {
-      const table = await fetch();
-      const newModel = await IrisGridModelFactory.makeModel(dh, table);
-      if (!cancelled) {
-        setModel(newModel);
-      }
-    }
+  if (fetchResult.status === 'loading') {
+    return <LoadingOverlay isLoading />;
+  }
 
-    init();
+  if (fetchResult.status === 'error') {
+    return (
+      <LoadingOverlay
+        errorMessage={getErrorMessage(fetchResult.error)}
+        isLoading={false}
+      />
+    );
+  }
 
-    return () => {
-      cancelled = true;
-    };
-  }, [dh, fetch]);
-
-  return model ? <IrisGrid model={model} settings={settings} /> : null;
+  const { model } = fetchResult;
+  return <IrisGrid model={model} settings={settings} />;
 }
 
 export default GridWidgetPlugin;

packages/dashboard-core-plugins/src/PandasWidgetPlugin.tsx

@@ -1,64 +1,34 @@
-import { useCallback, useEffect, useState } from 'react';
 import { WidgetComponentProps } from '@deephaven/plugin';
 import { type dh } from '@deephaven/jsapi-types';
-import IrisGrid, {
-  IrisGridModelFactory,
-  type IrisGridModel,
-} from '@deephaven/iris-grid';
-import { useApi } from '@deephaven/jsapi-bootstrap';
+import IrisGrid from '@deephaven/iris-grid';
 import { LoadingOverlay } from '@deephaven/components';
+import { getErrorMessage } from '@deephaven/utils';
 import { PandasReloadButton } from './panels/PandasReloadButton';
-
-export function PandasWidgetPlugin(
-  props: WidgetComponentProps<dh.Table>
-): JSX.Element | null {
-  const dh = useApi();
-  const [model, setModel] = useState<IrisGridModel>();
-  const [isLoading, setIsLoading] = useState(true);
-  const [isLoaded, setIsLoaded] = useState(false);
-
-  const { fetch } = props;
-
-  const makeModel = useCallback(async () => {
-    const table = await fetch();
-    return IrisGridModelFactory.makeModel(dh, table);
-  }, [dh, fetch]);
-
-  const handleReload = useCallback(async () => {
-    setIsLoading(true);
-    const newModel = await makeModel();
-    setModel(newModel);
-    setIsLoading(false);
-  }, [makeModel]);
-
-  useEffect(() => {
-    let cancelled = false;
-    async function init() {
-      const newModel = await makeModel();
-      if (!cancelled) {
-        setModel(newModel);
-        setIsLoaded(true);
-        setIsLoading(false);
-      }
-    }
-
-    init();
-    setIsLoading(true);
-
-    return () => {
-      cancelled = true;
-    };
-  }, [makeModel]);
-
+import { useIrisGridModel } from './useIrisGridModel';
+
+export function PandasWidgetPlugin({
+  fetch,
+}: WidgetComponentProps<dh.Table>): JSX.Element | null {
+  const fetchResult = useIrisGridModel(fetch);
+
+  if (fetchResult.status === 'loading') {
+    return <LoadingOverlay isLoading />;
+  }
+
+  if (fetchResult.status === 'error') {
+    return (
+      <LoadingOverlay
+        errorMessage={getErrorMessage(fetchResult.error)}
+        isLoading={false}
+      />
+    );
+  }
+
+  const { model, reload } = fetchResult;
   return (
-    <>
-      <LoadingOverlay isLoaded={isLoaded} isLoading={isLoading} />
-      {model && (
-        <IrisGrid model={model}>
-          <PandasReloadButton onClick={handleReload} />
-        </IrisGrid>
-      )}
-    </>
+    <IrisGrid model={model}>
+      <PandasReloadButton onClick={reload} />
+    </IrisGrid>
   );
 }
 

packages/dashboard-core-plugins/src/useIrisGridModel.test.ts

@@ -0,0 +1,76 @@
+import { IrisGridModel } from '@deephaven/iris-grid';
+import { type dh } from '@deephaven/jsapi-types';
+import { TestUtils } from '@deephaven/utils';
+import { renderHook } from '@testing-library/react-hooks';
+import { act } from 'react-test-renderer';
+import {
+  IrisGridModelFetchErrorResult,
+  IrisGridModelFetchSuccessResult,
+  useIrisGridModel,
+} from './useIrisGridModel';
+
+const mockApi = TestUtils.createMockProxy<typeof dh>();
+// Mock out the useApi hook to just return the API
+jest.mock('@deephaven/jsapi-bootstrap', () => ({
+  useApi: () => mockApi,
+}));
+
+const mockModel = TestUtils.createMockProxy<IrisGridModel>();
+// Mock out the IrisGridModelFactory as well
+jest.mock('@deephaven/iris-grid', () => ({
+  ...jest.requireActual('@deephaven/iris-grid'),
+  IrisGridModelFactory: {
+    makeModel: jest.fn(() => mockModel),
+  },
+}));
+
+it('should return loading status while fetching', () => {
+  const fetch = jest.fn(
+    () =>
+      new Promise<dh.Table>(() => {
+        // Do nothing
+      })
+  );
+  const { result } = renderHook(() => useIrisGridModel(fetch));
+  expect(result.current.status).toBe('loading');
+});
+
+it('should return error status on fetch error', async () => {
+  const error = new Error('Test error');
+  const fetch = jest.fn(() => Promise.reject(error));
+  const { result, waitForNextUpdate } = renderHook(() =>
+    useIrisGridModel(fetch)
+  );
+  await waitForNextUpdate();
+  const fetchResult = result.current;
+  expect(fetchResult.status).toBe('error');
+  expect((fetchResult as IrisGridModelFetchErrorResult).error).toBe(error);
+});
+
+it('should return success status on fetch success', async () => {
+  const table = TestUtils.createMockProxy<dh.Table>();
+  const fetch = jest.fn(() => Promise.resolve(table));
+  const { result, waitForNextUpdate } = renderHook(() =>
+    useIrisGridModel(fetch)
+  );
+  await waitForNextUpdate();
+  const fetchResult = result.current;
+  expect(fetchResult.status).toBe('success');
+  expect((fetchResult as IrisGridModelFetchSuccessResult).model).toBeDefined();
+});
+
+it('should reload the model on reload', async () => {
+  const table = TestUtils.createMockProxy<dh.Table>();
+  const fetch = jest.fn(() => Promise.resolve(table));
+  const { result, waitForNextUpdate } = renderHook(() =>
+    useIrisGridModel(fetch)
+  );
+  await waitForNextUpdate();
+  const fetchResult = result.current;
+  expect(fetchResult.status).toBe('success');
+  fetch.mockClear();
+  await act(async () => {
+    fetchResult.reload();
+  });
+  expect(fetch).toHaveBeenCalledTimes(1);
+});

packages/dashboard-core-plugins/src/useIrisGridModel.ts

@@ -0,0 +1,119 @@
+import { type dh } from '@deephaven/jsapi-types';
+import { useApi } from '@deephaven/jsapi-bootstrap';
+import { IrisGridModel, IrisGridModelFactory } from '@deephaven/iris-grid';
+import { useCallback, useEffect, useState } from 'react';
+
+export type IrisGridModelFetch = () => Promise<dh.Table>;
+
+export type IrisGridModelFetchErrorResult = {
+  error: NonNullable<unknown>;
+  status: 'error';
+};
+
+export type IrisGridModelFetchLoadingResult = {
+  status: 'loading';
+};
+
+export type IrisGridModelFetchSuccessResult = {
+  status: 'success';
+  model: IrisGridModel;
+};
+
+export type IrisGridModelFetchResult = (
+  | IrisGridModelFetchErrorResult
+  | IrisGridModelFetchLoadingResult
+  | IrisGridModelFetchSuccessResult
+) & {
+  reload: () => void;
+};
+
+/** Pass in a table `fetch` function, will load the model and handle any errors */
+export function useIrisGridModel(
+  fetch: IrisGridModelFetch
+): IrisGridModelFetchResult {
+  const dh = useApi();
+  const [model, setModel] = useState<IrisGridModel>();
+  const [error, setError] = useState<unknown>();
+  const [isLoading, setIsLoading] = useState(true);
+
+  const makeModel = useCallback(async () => {
+    const table = await fetch();
+    return IrisGridModelFactory.makeModel(dh, table);
+  }, [dh, fetch]);
+
+  const reload = useCallback(async () => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      const newModel = await makeModel();
+      setModel(newModel);
+      setIsLoading(false);
+    } catch (e) {
+      setError(e);
+      setIsLoading(false);
+    }
+  }, [makeModel]);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function init() {
+      setIsLoading(true);
+      setError(undefined);
+      try {
+        const newModel = await makeModel();
+        if (!cancelled) {
+          setModel(newModel);
+          setIsLoading(false);
+        }
+      } catch (e) {
+        if (!cancelled) {
+          setError(e);
+          setIsLoading(false);
+        }
+      }
+    }
+
+    init();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [makeModel]);
+
+  useEffect(
+    function startListeningModel() {
+      if (!model) {
+        return;
+      }
+
+      // If the table inside a widget is disconnected, then don't bother trying to listen to reconnect, just close it and show a message
+      // Widget closes the table already when it is disconnected, so no need to close it again
+      function handleDisconnect() {
+        setError(new Error('Table disconnected'));
+        setModel(undefined);
+        setIsLoading(false);
+      }
+
+      model.addEventListener(IrisGridModel.EVENT.DISCONNECT, handleDisconnect);
+
+      return () => {
+        model.removeEventListener(
+          IrisGridModel.EVENT.DISCONNECT,
+          handleDisconnect
+        );
+      };
+    },
+    [model]
+  );
+
+  if (isLoading) {
+    return { reload, status: 'loading' };
+  }
+  if (error != null) {
+    return { error, reload, status: 'error' };
+  }
+  if (model != null) {
+    return { model, reload, status: 'success' };
+  }
+  throw new Error('Invalid state');
+}