fix: DH-17292 Handle disconnect from GridWidgetPlugin (#2086)

- When the model is disconnected, we should just display an error.
There's no option to reconnect, as the widget schema could change
entirely
- By unloading the IrisGrid component, it's no longer throwing an error
by trying to access table methods after a table.close()
- Fixes DH-17292 from Enterprise
  - Tested using the steps in the description

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,136 @@
+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>();
+ let fetchResolve;
+ const fetch = jest.fn(
+ () =>
+ new Promise<dh.Table>(resolve => {
+ fetchResolve = resolve;
+ })
+ );
+ const { result, waitForNextUpdate } = renderHook(() =>
+ useIrisGridModel(fetch)
+ );
+ expect(result.current.status).toBe('loading');
+ fetchResolve(table);
+ await waitForNextUpdate();
+ expect(result.current.status).toBe('success');
+ // Check that it will reload, transitioning to loading then to success again
+
+ fetch.mockClear();
+ fetch.mockReturnValue(
+ new Promise(resolve => {
+ fetchResolve = resolve;
+ })
+ );
+ await act(async () => {
+ result.current.reload();
+ });
+ expect(fetch).toHaveBeenCalledTimes(1);
+ expect(result.current.status).toBe('loading');
+ fetchResolve(table);
+ await waitForNextUpdate();
+ expect(result.current.status).toBe('success');
+ expect(
+ (result.current as IrisGridModelFetchSuccessResult).model
+ ).toBeDefined();
+
+ // Now check that it will handle a failure on reload, transitioning from loading to failure
+ fetch.mockClear();
+
+ let fetchReject;
+ fetch.mockReturnValue(
+ new Promise((resolve, reject) => {
+ fetchReject = reject;
+ })
+ );
+ await act(async () => {
+ result.current.reload();
+ });
+ expect(fetch).toHaveBeenCalledTimes(1);
+ expect(result.current.status).toBe('loading');
+ const error = new Error('Test error');
+ fetchReject(error);
+ await waitForNextUpdate();
+ expect(result.current.status).toBe('error');
+ expect((result.current as IrisGridModelFetchErrorResult).error).toBe(error);
+
+ // Check that it will reload again after an error
+ fetch.mockClear();
+ fetch.mockReturnValue(
+ new Promise(resolve => {
+ fetchResolve = resolve;
+ })
+ );
+ await act(async () => {
+ result.current.reload();
+ });
+ expect(fetch).toHaveBeenCalledTimes(1);
+ expect(result.current.status).toBe('loading');
+ fetchResolve(table);
+ await waitForNextUpdate();
+ expect(result.current.status).toBe('success');
+ expect(
+ (result.current as IrisGridModelFetchSuccessResult).model
+ ).toBeDefined();
+});