feat: Add embed-widget

README.md

@@ -40,10 +40,10 @@ We use Chrome for development with the React and Redux extensions.
 ## Scripts
 
 - `npm install` : Install all dependencies and automatically bootstrap packages. Should be run before any of the other steps.
-- `npm start`: Start building all packages and watching them (when possible). Use when you're developing, and your changes will be picked up automatically.
+- `npm start`: Start building all packages and watching them (when possible). Use when you're developing, and your changes will be picked up automatically. Servers will open up for code-studio, embed-grid, embed-chart, and embed-widget. These will open on localhost on ports 4000, 4010, 4020, and 4030 respectively.
 - `npm test`: Start running tests in all packages and watching (when possible). Use when you're developing, and any breaking changes will be printed out automatically. See [Unit tests](#unit-tests) for more details.
 - `npm run build`: Create a production build of all packages. Mainly used by CI when packaging up a production version of the app.
-- `npm run preview`: Runs the Vite preview server for the built code-studio, embed-grid, and embed-chart. These will open on ports 4000, 4010, and 4020.
+- `npm run preview`: Runs the Vite preview server for the built code-studio, embed-grid, embed-chart, and embed-widget. These will open on ports 4000, 4010, 4020, and 4030 respectively.
 - `npm run e2e`: Runs the Playwright end-to-end tests locally. See [E2E Tests](#e2e-tests) for more details.
 
 If your DHC address is different from the default `http://localhost:10000`, edit `.env.local` in each package to point to your local DHC. This is needed for the session websocket and for things like notebooks to be proxied correctly by Vite.
@@ -95,6 +95,7 @@ Note that log messages from other sources such as react prop types will still be
 If you want to collect coverage locally, run `npm test -- --coverage`
 
 ### Debugging Unit Tests
+
 Unit tests can be debugged by running jest with the `--inspect-brk` flag and attaching to the node process in vscode's debugger. There are 2 launch configs that make this easier:
 
 - Debug Jest Tests - This will prompt you for a test name or pattern and will then run tests in watch mode with an attached debugger.
@@ -113,6 +114,7 @@ Snapshots are used by end-to-end tests to visually verify the output. Snapshots
 Once you are satisfied with the snapshots and everything is passing locally, you need to use the docker image to update snapshots for CI (unless you are running the same platform as CI (Ubuntu)). Run `npm run e2e:update-ci-snapshots` to update the CI snapshots. The snapshots will be written to your local directories. The Linux snapshots should be committed to git (non-Linux snapshots should be automatically ignored by git).
 
 ### Differences in CI vs Local Docker Environments
+
 Note that while both the GH actions and docker configuration use Ubuntu 22.04 images, their configurations are not identical. One known difference is the available system fonts. In some cases this can cause snapshots to differ when running locally vs in CI such as when rendering unicode characters. To mitigate this, some of our e2e tests have been configured to ensure a consistent unicode font fallback.
 
 - The `DejaVu Sans` font gets installed via the [Dockerfile](tests/docker-scripts/Dockerfile). It already exists in the CI environment.

package.json

@@ -24,21 +24,23 @@
     "types": "tsc --build",
     "watch:types": "tsc --build --watch --preserveWatchOutput",
     "build": "run-s build:necessary types build:packages build:apps",
-    "build:apps": "lerna run --scope=@deephaven/{code-studio,embed-chart,embed-grid} build",
+    "build:apps": "lerna run --scope=@deephaven/{code-studio,embed-chart,embed-grid,embed-widget} build",
     "build:app": "lerna run --scope=@deephaven/code-studio build",
     "build:embed-chart": "lerna run --scope=@deephaven/embed-chart build",
     "build:embed-grid": "lerna run --scope=@deephaven/embed-grid build",
-    "build:packages": "lerna run --ignore=@deephaven/{code-studio,embed-chart,embed-grid} build --stream",
+    "build:embed-widget": "lerna run --scope=@deephaven/embed-widget build",
+    "build:packages": "lerna run --ignore=@deephaven/{code-studio,embed-chart,embed-grid,embed-widget} build --stream",
     "build:profile": "lerna run build --stream --profile",
     "build:necessary": "lerna run build --scope=@deephaven/icons",
     "analyze": "lerna run analyze",
-    "preview": "lerna run --scope=@deephaven/{code-studio,embed-chart,embed-grid} preview --stream",
+    "preview": "lerna run --scope=@deephaven/{code-studio,embed-chart,embed-grid,embed-widget} preview --stream",
     "preview:app": "lerna run --scope=@deephaven/code-studio preview --stream",
     "prestart": "npm run build:necessary",
     "start": "run-p watch:types start:*",
     "start:app": "lerna run start --scope=@deephaven/code-studio --stream",
     "start:embed-chart": "lerna run start --scope=@deephaven/embed-chart --stream",
     "start:embed-grid": "lerna run start --scope=@deephaven/embed-grid --stream",
+    "start:embed-widget": "lerna run start --scope=@deephaven/embed-widget --stream",
     "pretest": "npm run build:necessary",
     "test": "jest --watch --changedSince origin/main",
     "test:debug": "node --inspect-brk node_modules/.bin/jest --config jest.config.unit.cjs --runInBand --watch",
@@ -162,6 +164,7 @@
     "@deephaven/dashboard-core-plugins": "file:packages/dashboard-core-plugins",
     "@deephaven/embed-chart": "file:packages/embed-chart",
     "@deephaven/embed-grid": "file:packages/embed-grid",
+    "@deephaven/embed-widget": "file:packages/embed-widget",
     "@deephaven/file-explorer": "file:packages/file-explorer",
     "@deephaven/filters": "file:packages/filters",
     "@deephaven/golden-layout": "file:packages/golden-layout",

packages/code-studio/README.md

@@ -11,7 +11,7 @@ To start the Code Studio, run `npm install` and `npm start` in the root director
 Project specific settings are stored in the `.env` file. There is also an `.env.development` file which is only
 loaded in development builds, and `.env.development.local` which is only for local builds. For local development,
 you should be modifying `.env.development.local`.
-For more information on `.env`, see https://create-react-app.dev/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env
+For more information on `.env`, see [Vite docs](https://vitejs.dev/guide/env-and-mode.html).
 Below are some of the common properties which are configurable in the `.env` file.
 
 ### VITE_CORE_API_URL
@@ -88,30 +88,6 @@ You can learn more in the [Vite documentation](https://vitejs.dev/guide/).
 
 To learn React, check out the [React documentation](https://reactjs.org/).
 
-### Code Splitting
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
-
-### Analyzing the Bundle Size
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
-
-### Making a Progressive Web App
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
-
-### Advanced Configuration
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
-
-### Deployment
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
-
-### `yarn build` fails to minify
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
-
 # Legal Notices
 
 Deephaven Data Labs and any contributors grant you a license to the content of this repository under the Apache 2.0 License, see the [LICENSE](../../LICENSE) file.

packages/code-studio/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <base href="%BASE_URL%" />
@@ -9,10 +9,6 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#2d2a2e" />
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
     <link rel="manifest" href="/manifest.json" />
     <link rel="icon" href="%VITE_FAVICON%" />
     <title>Deephaven</title>

packages/code-studio/src/styleguide/index.html

@@ -9,10 +9,6 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#2d2a2e" />
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
     <link rel="manifest" href="/manifest.json" />
     <link rel="icon" href="%VITE_FAVICON%" />
     <title>Deephaven Styleguide</title>

packages/components/src/ErrorBoundary.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ErrorBoundary, { ErrorBoundaryProps } from './ErrorBoundary';
+
+function ThrowComponent(): JSX.Element {
+  throw new Error('Test error');
+}
+
+function makeWrapper({
+  children = 'Hello World',
+  className,
+  onError = jest.fn(),
+  fallback,
+}: Partial<ErrorBoundaryProps> = {}) {
+  return render(
+    <ErrorBoundary className={className} fallback={fallback} onError={onError}>
+      {children}
+    </ErrorBoundary>
+  );
+}
+
+it('should render the children if there is no error', () => {
+  const onError = jest.fn();
+  const { getByText } = makeWrapper({ onError });
+  expect(getByText('Hello World')).toBeInTheDocument();
+  expect(onError).not.toHaveBeenCalled();
+});
+
+it('should render the fallback if there is an error', () => {
+  const onError = jest.fn();
+  const error = new Error('Test error');
+  const { getByText } = makeWrapper({
+    children: <ThrowComponent />,
+    fallback: <div>Fallback</div>,
+    onError,
+  });
+  expect(getByText('Fallback')).toBeInTheDocument();
+  expect(onError).toHaveBeenCalledWith(error, expect.anything());
+});

packages/components/src/ErrorBoundary.tsx

@@ -0,0 +1,70 @@
+import Log from '@deephaven/log';
+import React, { Component, ReactNode } from 'react';
+import LoadingOverlay from './LoadingOverlay';
+
+const log = Log.module('ErrorBoundary');
+
+export interface ErrorBoundaryProps {
+  /** Children to catch errors from */
+  children: ReactNode;
+
+  /** Classname to wrap the error message with */
+  className?: string;
+
+  /** Callback for when an error occurs */
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+
+  /** Custom fallback element */
+  fallback?: ReactNode;
+}
+
+export interface ErrorBoundaryState {
+  error?: Error;
+}
+
+/**
+ * Error boundary for catching render errors in React. Displays an error message if an error is caught by default, or you can specify a fallback component to render.
+ * https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
+ */
+export class ErrorBoundary extends Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { error };
+  }
+
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { error: undefined };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    const { onError } = this.props;
+    log.error('Error caught by ErrorBoundary', error, errorInfo);
+    onError?.(error, errorInfo);
+  }
+
+  render(): ReactNode {
+    const { children, className, fallback } = this.props;
+    const { error } = this.state;
+    if (error != null) {
+      if (fallback != null) {
+        return fallback;
+      }
+
+      return (
+        <div className={className}>
+          <LoadingOverlay
+            errorMessage={`${error}`}
+            isLoading={false}
+            isLoaded={false}
+          />
+        </div>
+      );
+    }
+    return children;
+  }
+}
+
+export default ErrorBoundary;

packages/components/src/index.ts

@@ -22,6 +22,7 @@ export { default as DraggableItemList } from './DraggableItemList';
 export * from './DraggableItemList';
 export { default as DragUtils } from './DragUtils';
 export { default as EditableItemList } from './EditableItemList';
+export * from './ErrorBoundary';
 export { default as HierarchicalCheckboxMenu } from './HierarchicalCheckboxMenu';
 export * from './HierarchicalCheckboxMenu';
 export * from './ItemList';

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

@@ -139,7 +139,7 @@ export const ChartPanelPlugin = forwardRef(
             chartTheme,
             connection,
             metadata as ChartPanelMetadata,
-            fetch as unknown as () => Promise<Figure>,
+            fetch as () => Promise<Figure>,
             panelState
           );
         },

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

@@ -10,7 +10,7 @@ export const GridPanelPlugin = forwardRef(
   (props: WidgetPanelProps, ref: React.Ref<IrisGridPanel>) => {
     const { localDashboardId, fetch } = props;
     const hydratedProps = useHydrateGrid(
-      fetch as unknown as () => Promise<Table>,
+      fetch as () => Promise<Table>,
       localDashboardId
     );
 

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

@@ -8,7 +8,7 @@ export const PandasPanelPlugin = forwardRef(
   (props: WidgetPanelProps, ref: React.Ref<PandasPanel>) => {
     const { localDashboardId, fetch } = props;
     const hydratedProps = useHydrateGrid(
-      fetch as unknown as () => Promise<Table>,
+      fetch as () => Promise<Table>,
       localDashboardId
     );
 

packages/dashboard/package.json

@@ -24,7 +24,6 @@
   "dependencies": {
     "@deephaven/components": "file:../components",
     "@deephaven/golden-layout": "file:../golden-layout",
-    "@deephaven/jsapi-bootstrap": "file:../jsapi-bootstrap",
     "@deephaven/log": "file:../log",
     "@deephaven/react-hooks": "file:../react-hooks",
     "@deephaven/redux": "file:../redux",

packages/dashboard/tsconfig.json

@@ -9,7 +9,6 @@
   "references": [
     { "path": "../components" },
     { "path": "../golden-layout" },
-    { "path": "../jsapi-bootstrap" },
     { "path": "../log" },
     { "path": "../react-hooks" },
     { "path": "../redux" },