feat: JS API reconnect (#1149)

- Listen for `EVENT_DISCONNECT` and `EVENT_RECONNECT` on the connection,
and display a "Reconnecting..." message in the console.
- No longer listen to the `HACK_CONNECTION_FAILURE` (it's been
deprecated).
- Listen for the `SHUTDOWN` event and display a message after shutdown.
- Fixes #1140 
Testing steps:
1. Start up server with deephaven-core JS API reconnect changes:
deephaven/deephaven-core#3502
2. Use ngrok to start a tunnel to that port, e.g.: `ngrok http 10000`
3. Start up Web UI connecting to that tunnel, e.g.:
`VITE_CORE_API_URL=http://acfc-23-233-0-34.ngrok.io/jsapi npm start`
4. Open the Web UI in Firefox, run some commands to make sure initial
connection is fine.
5. Press Alt and from the File menu, select "Work Offline"
6. See it transition to a disconnected state. Disconnected message
should appear and should not be able to enter new commands
7. Reconnect by deselecting "Work Offline" option from Step 5
8. See it transition to connected state. Should be able to run commands
and have the results appear.
9. Kill the server (Ctrl+C). See it transition to a Shutdown state, app
unloaded.

Author: mofojed

__mocks__/dh-core.js

@@ -426,6 +426,20 @@ class DeephavenObject {
       callbacks[i](event);
     }
   }
+
+  nextEvent(name, timeout) {
+    let cleanup;
+    return new Promise((resolve, reject) => {
+      cleanup = this.addEventListener(name, detail => {
+        resolve(detail);
+        cleanup();
+      });
+    });
+  }
+
+  hasListeners(name) {
+    return (this._listeners[name]?.length ?? 0) > 0;
+  }
 }
 
 class Sort {
@@ -615,6 +629,11 @@ class Table extends DeephavenObject {
     size = ROW_COUNT,
     suppressFilter = false,
     customColumns = [],
+    description = 'Mock Table',
+    layoutHints = null,
+    hasInputTable = false,
+    pluginName = null,
+    totalsTableConfig = {},
   } = {}) {
     super({ sort, filter, columns, size });
 
@@ -623,6 +642,7 @@ class Table extends DeephavenObject {
     this.columns = columns;
     this.customColumns = customColumns;
     this.size = size;
+    this.totalSize = size;
     this.suppressFilter = suppressFilter;
 
     this.startRow = 0;
@@ -631,6 +651,11 @@ class Table extends DeephavenObject {
     this.pendingViewportUpdate = false;
     this.isClosed = false;
     this.isUncoalesced = false;
+    this.description = description;
+    this.layoutHints = layoutHints;
+    this.hasInputTable = hasInputTable;
+    this.pluginName = pluginName;
+    this.totalsTableConfig = totalsTableConfig;
   }
 
   close() {}
@@ -665,7 +690,7 @@ class Table extends DeephavenObject {
     const { startRow, endRow, viewportColumns, size, filter } = this;
 
     if (startRow == null || endRow == null || viewportColumns == null) {
-      return null;
+      throw new Error('Viewport not set');
     }
 
     let rows = [];
@@ -686,13 +711,17 @@ class Table extends DeephavenObject {
     return viewportData;
   }
 
+  findColumn(name) {
+    const column = this.columns.find(col => col.name === name);
+    if (column === undefined) {
+      throw new Error(`Column ${name} not found`);
+    }
+    return column;
+  }
+
   findColumns(names) {
     return names.map(name => {
-      const column = this.columns.find(col => col.name === name);
-      if (column === undefined) {
-        throw new Error(`Column ${name} not found`);
-      }
-      return column;
+      return this.findColumn(name);
     });
   }
 
@@ -744,6 +773,10 @@ class Table extends DeephavenObject {
     });
   }
 
+  getGrandTotalsTable() {
+    return this.getTotalsTable();
+  }
+
   selectDistinct() {
     return new Promise((resolve, reject) => {
       const table = makeDummyTable();
@@ -758,10 +791,46 @@ class Table extends DeephavenObject {
     });
   }
 
+  reverse() {
+    return this.copy();
+  }
+
   rollup() {
     return this.copy();
   }
 
+  treeTable() {
+    return this.copy();
+  }
+
+  inputTable() {
+    return Promise.resolve(new InputTable());
+  }
+
+  freeze() {
+    return this.copy();
+  }
+
+  snapshot() {
+    return this.copy();
+  }
+
+  join() {
+    return this.copy();
+  }
+
+  byExternal() {
+    return this.copy();
+  }
+
+  seekRow() {
+    return Promise.resolve(-1);
+  }
+
+  getColumnStatistics() {
+    return Promise.reject(new Error('Column statistics not implemented'));
+  }
+
   subscribe(columns, updateInterval = UPDATE_INTERVAL) {
     return new TableSubscription({
       table: this,
@@ -783,6 +852,8 @@ Table.EVENT_UPDATED = 'updated';
 Table.EVENT_CONNECT = 'connect';
 Table.EVENT_DISCONNECT = 'disconnect';
 Table.EVENT_RECONNECT = 'reconnect';
+Table.EVENT_RECONNECTFAILED = 'reconnectfailed';
+Table.SIZE_UNCOALESCED = 'sizeuncoalesced';
 
 class TableViewportSubscription extends DeephavenObject {
   constructor({ table = makeDummyTable() } = {}) {
@@ -1267,16 +1338,44 @@ class IdeConnection extends DeephavenObject {
   }
 }
 
+IdeConnection.EVENT_DISCONNECT = 'disconnect';
+IdeConnection.EVENT_RECONNECT = 'reconnect';
+
 class IdeSession extends DeephavenObject {
   constructor(language) {
     super();
 
     this.language = language;
     this.tables = [];
     this.widgets = [];
+    this.logMessageCallbacks = [];
+    this.subscribeCallbacks = [];
+  }
+
+  onLogMessage(callback) {
+    this.logMessageCallbacks.push(callback);
+    return () => {
+      this.logMessageCallbacks = this.logMessageCallbacks.filter(
+        cb => cb !== callback
+      );
+    };
   }
 
-  onLogMessage(callback) {}
+  subscribeToFieldUpdates(callback) {
+    this.subscribeCallbacks.push(callback);
+    return () => {
+      this.subscribeCallbacks = this.subscribeCallbacks.filter(
+        cb => cb !== callback
+      );
+    };
+  }
+
+  notifySubscribeCallbacks(changes) {
+    const callbacks = [...this.subscribeCallbacks];
+    callbacks.forEach(cb => {
+      cb(changes);
+    });
+  }
 
   close() {}
   /**
@@ -1374,6 +1473,8 @@ class IdeSession extends DeephavenObject {
       }
 
       timer = setTimeout(() => {
+        this.notifySubscribeCallbacks(tableChanges);
+        this.notifySubscribeCallbacks(widgetChanges);
         resolve(result);
       }, delay);
     });
@@ -1413,6 +1514,23 @@ class IdeSession extends DeephavenObject {
     });
   }
 
+  getTreeTable(name) {
+    // We're just going to use a regular table for TreeTable
+    // Actual impl is different, but should be fine for mock
+    this.getTable(name);
+  }
+
+  getObject(variableDefinition) {
+    switch (variableDefinition.type) {
+      case dh.VariableType.FIGURE:
+        return this.getFigure(variableDefinition.title);
+      case dh.VariableType.TreeTable:
+        return this.getTreeTable(variableDefinition.title);
+      default:
+        return this.getTable(variableDefinition.title);
+    }
+  }
+
   openDocument() {}
   changeDocument() {}
   getCompletionItems() {
@@ -1864,6 +1982,8 @@ const dh = {
   TotalsTableConfig: TotalsTableConfig,
   TableViewportSubscription,
   TableSubscription,
+  // TreeTable and Table are different in actual implementation, but should be okay for the mock
+  TreeTable: Table,
   Column: Column,
   RangeSet,
   Row: Row,

packages/code-studio/src/main/AppInit.tsx

@@ -153,7 +153,10 @@ function AppInit(props: AppInitProps) {
     setServerConfigValues,
   } = props;
 
+  // General error means the app is dead and is unlikely to recover
   const [error, setError] = useState<unknown>();
+  // Disconnect error may be temporary, so just show an error overlaid on the app
+  const [disconnectError, setDisconnectError] = useState<unknown>();
   const [isFontLoading, setIsFontLoading] = useState(true);
 
   const initClient = useCallback(async () => {
@@ -175,14 +178,12 @@ function AppInit(props: AppInitProps) {
         ? // Fall back to the old API for anonymous auth if the new API is not supported
           createConnection()
         : coreClient.getAsIdeConnection());
-      connection.addEventListener(
-        dh.IdeConnection.HACK_CONNECTION_FAILURE,
-        event => {
-          const { detail } = event;
-          log.error('Connection failure', `${JSON.stringify(detail)}`);
-          setError(`Unable to connect:  ${detail.details ?? 'Unknown Error'}`);
-        }
-      );
+      connection.addEventListener(dh.IdeConnection.EVENT_SHUTDOWN, event => {
+        const { detail } = event;
+        log.info('Shutdown', `${JSON.stringify(detail)}`);
+        setError(`Server shutdown: ${detail ?? 'Unknown reason'}`);
+        setDisconnectError(null);
+      });
 
       const sessionWrapper = await loadSessionWrapper(connection);
       const name = 'user';
@@ -318,7 +319,10 @@ function AppInit(props: AppInitProps) {
 
   const isLoading = (workspace == null && error == null) || isFontLoading;
   const isLoaded = !isLoading && error == null;
-  const errorMessage = error != null ? `${error}` : null;
+  const errorMessage =
+    error != null || disconnectError != null
+      ? `${error ?? disconnectError}`
+      : null;
 
   return (
     <>