{
+ try {
+ if (name == null) {
+ throw new Error('Missing URL parameter "name"');
+ }
+
+ log.debug(`Loading widget definition for ${name}...`);
+
+ const newDefinition = await fetchVariableDefinition(connection, name);
+
+ setDefinition(newDefinition);
+
+ log.debug(`Widget definition successfully loaded for ${name}`);
+ } catch (e: unknown) {
+ log.error(`Unable to load widget definition for ${name}`, e);
+ setError(`${e}`);
+ }
+ }
+ initApp();
+ },
+ [connection, name]
+ );
+
+ const isLoaded = definition != null && error == null;
+ const isLoading = definition == null && error == null;
+
+ const fetch = useMemo(() => {
+ if (definition == null) {
+ return async () => {
+ throw new Error('Definition is null');
+ };
+ }
+ return () => connection.getObject(definition);
+ }, [connection, definition]);
+
+ return (
+
+ {isLoaded && (
+
+
+
+ )}
+ {!isLoaded && (
+
+ )}
+
+
+ );
+}
+
+export default App;
diff --git a/packages/embed-widget/src/index.scss b/packages/embed-widget/src/index.scss
new file mode 100644
index 0000000000..d2d53d7593
--- /dev/null
+++ b/packages/embed-widget/src/index.scss
@@ -0,0 +1,14 @@
+@import '@deephaven/components/scss/custom.scss';
+
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+ Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+}
diff --git a/packages/embed-widget/src/index.tsx b/packages/embed-widget/src/index.tsx
new file mode 100644
index 0000000000..78ce51dbeb
--- /dev/null
+++ b/packages/embed-widget/src/index.tsx
@@ -0,0 +1,53 @@
+import React, { Suspense } from 'react';
+import ReactDOM from 'react-dom';
+import '@deephaven/components/scss/BaseStyleSheet.scss';
+import { LoadingOverlay, preloadTheme } from '@deephaven/components';
+import { ApiBootstrap } from '@deephaven/jsapi-bootstrap';
+import './index.scss';
+
+preloadTheme();
+
+// Lazy load components for code splitting and also to avoid importing the jsapi-shim before API is bootstrapped.
+// eslint-disable-next-line react-refresh/only-export-components
+const App = React.lazy(() => import('./App'));
+
+// eslint-disable-next-line react-refresh/only-export-components
+const AppBootstrap = React.lazy(async () => {
+ const module = await import('@deephaven/app-utils');
+ return { default: module.AppBootstrap };
+});
+
+const apiURL = new URL(
+ `${import.meta.env.VITE_CORE_API_URL}/${import.meta.env.VITE_CORE_API_NAME}`,
+ document.baseURI
+);
+
+const pluginsURL = new URL(
+ import.meta.env.VITE_MODULE_PLUGINS_URL,
+ document.baseURI
+);
+
+// Lazy load the configs because it breaks initial page loads otherwise
+async function getCorePlugins() {
+ const dashboardCorePlugins = await import(
+ '@deephaven/dashboard-core-plugins'
+ );
+ const { GridPluginConfig, PandasPluginConfig, ChartPluginConfig } =
+ dashboardCorePlugins;
+ return [GridPluginConfig, PandasPluginConfig, ChartPluginConfig];
+}
+
+ReactDOM.render(
+
+ }>
+
+
+
+
+ ,
+ document.getElementById('root')
+);
diff --git a/packages/embed-widget/src/vite-env.d.ts b/packages/embed-widget/src/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/packages/embed-widget/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/packages/embed-widget/tsconfig.json b/packages/embed-widget/tsconfig.json
new file mode 100644
index 0000000000..1dec33fe39
--- /dev/null
+++ b/packages/embed-widget/tsconfig.json
@@ -0,0 +1,21 @@
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "rootDir": "src/",
+ "outDir": "dist/",
+ "noEmit": true,
+ "emitDeclarationOnly": false
+ },
+ "include": ["src"],
+ "references": [
+ { "path": "../app-utils" },
+ { "path": "../components" },
+ { "path": "../dashboard-core-plugins" },
+ { "path": "../jsapi-bootstrap" },
+ { "path": "../jsapi-components" },
+ { "path": "../jsapi-types" },
+ { "path": "../jsapi-utils" },
+ { "path": "../log" },
+ { "path": "../plugin" }
+ ]
+}
diff --git a/packages/embed-widget/vite.config.ts b/packages/embed-widget/vite.config.ts
new file mode 100644
index 0000000000..f67391d79f
--- /dev/null
+++ b/packages/embed-widget/vite.config.ts
@@ -0,0 +1,111 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+import path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+ const env = loadEnv(mode, process.cwd(), '');
+
+ const packagesDir = path.resolve(__dirname, '..');
+
+ let port = Number.parseInt(env.PORT, 10);
+ if (Number.isNaN(port) || port <= 0) {
+ port = 4030;
+ }
+
+ const baseURL = new URL(env.BASE_URL, `http://localhost:${port}/`);
+ // These are paths which should be proxied to the core server
+ // https://vitejs.dev/config/server-options.html#server-proxy
+ const proxy = {
+ // proxy the websocket requests, allows tunneling to work with a single port
+ '^/arrow\\.*': {
+ target: env.VITE_PROXY_URL,
+ changeOrigin: true,
+ ws: true,
+ },
+ '^/io\\.deephaven\\..*': {
+ target: env.VITE_PROXY_URL,
+ changeOrigin: true,
+ ws: true,
+ },
+ };
+
+ // Some paths need to proxy to the engine server
+ // Vite does not have a "any unknown fallback to proxy" like CRA
+ // It is possible to add one with a custom middleware though if this list grows
+ if (env.VITE_PROXY_URL) {
+ [env.VITE_CORE_API_URL, env.VITE_MODULE_PLUGINS_URL].forEach(p => {
+ const route = new URL(p, baseURL).pathname;
+ proxy[route] = {
+ target: env.VITE_PROXY_URL,
+ changeOrigin: true,
+ };
+ });
+ }
+
+ return {
+ base: './', // Vite defaults to absolute URLs, but embed-widget is an embedded deployment so all assets are relative paths
+ envPrefix: ['VITE_', 'npm_'], // Needed to use $npm_package_version
+ server: {
+ port,
+ proxy,
+ },
+ preview: {
+ port,
+ proxy,
+ },
+ resolve: {
+ alias:
+ mode === 'development'
+ ? [
+ {
+ find: /^@deephaven\/(.*)\/scss\/(.*)/,
+ replacement: `${packagesDir}/$1/scss/$2`,
+ },
+ {
+ find: /^@deephaven\/(?!icons)(.*)/, // Icons package can not import from src
+ replacement: `${packagesDir}/$1/src`,
+ },
+ ]
+ : [],
+ },
+ build: {
+ outDir: env.VITE_BUILD_PATH,
+ emptyOutDir: true,
+ sourcemap: true,
+ rollupOptions: {
+ output: {
+ manualChunks: id => {
+ /**
+ * Without this, our chunk order may cause a circular reference
+ * by putting the helpers in the vendor or plotly chunk
+ * This causes failures with loading the compiled version
+ *
+ * See https://github.com/rollup/plugins/issues/591
+ */
+ if (id === '\0commonjsHelpers.js') {
+ return 'helpers';
+ }
+
+ if (id.includes('node_modules')) {
+ if (id.includes('plotly.js')) {
+ return 'plotly';
+ }
+ return 'vendor';
+ }
+ },
+ },
+ },
+ },
+ optimizeDeps: {
+ esbuildOptions: {
+ // Some packages need this to start properly if they reference global
+ define: {
+ global: 'globalThis',
+ },
+ },
+ },
+ plugins: [react()],
+ };
+});
diff --git a/packages/plugin/src/PluginTypes.ts b/packages/plugin/src/PluginTypes.ts
index 15ea49f05a..1588a60259 100644
--- a/packages/plugin/src/PluginTypes.ts
+++ b/packages/plugin/src/PluginTypes.ts
@@ -1,5 +1,4 @@
import type { BaseThemeType } from '@deephaven/components';
-import { type Widget } from '@deephaven/jsapi-types';
import {
type EventEmitter,
type ItemContainer,
@@ -107,7 +106,7 @@ export function isDashboardPlugin(
}
export interface WidgetComponentProps {
- fetch: () => Promise;
+ fetch: () => Promise;
}
export interface WidgetPanelProps extends WidgetComponentProps {
diff --git a/packages/plugin/src/WidgetView.tsx b/packages/plugin/src/WidgetView.tsx
new file mode 100644
index 0000000000..6e92c17ff7
--- /dev/null
+++ b/packages/plugin/src/WidgetView.tsx
@@ -0,0 +1,31 @@
+import React, { useMemo } from 'react';
+import usePlugins from './usePlugins';
+import { isWidgetPlugin } from './PluginTypes';
+
+export type WidgetViewProps = {
+ /** Fetch function to return the widget */
+ fetch: () => Promise;
+
+ /** Type of the widget */
+ type: string;
+};
+
+export function WidgetView({ fetch, type }: WidgetViewProps): JSX.Element {
+ const plugins = usePlugins();
+ const plugin = useMemo(
+ () =>
+ [...plugins.values()]
+ .filter(isWidgetPlugin)
+ .find(p => [p.supportedTypes].flat().includes(type)),
+ [plugins, type]
+ );
+
+ if (plugin != null) {
+ const Component = plugin.component;
+ return ;
+ }
+
+ throw new Error(`Unknown widget type '${type}'`);
+}
+
+export default WidgetView;
diff --git a/packages/plugin/src/index.ts b/packages/plugin/src/index.ts
index b79658c8e8..ff8cc4056b 100644
--- a/packages/plugin/src/index.ts
+++ b/packages/plugin/src/index.ts
@@ -3,3 +3,4 @@ export * from './PluginTypes';
export * from './PluginUtils';
export * from './TablePlugin';
export * from './usePlugins';
+export * from './WidgetView';
diff --git a/tsconfig.json b/tsconfig.json
index a7a7528166..133185b4d1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,6 +19,7 @@
"references": [
{ "path": "./packages/code-studio" },
{ "path": "./packages/embed-chart" },
- { "path": "./packages/embed-grid" }
+ { "path": "./packages/embed-grid" },
+ { "path": "./packages/embed-widget" }
]
}