From 460914596f5a54cbf83caafef0b32c74e3bf9e9e Mon Sep 17 00:00:00 2001 From: mikebender Date: Wed, 24 May 2023 12:43:42 -0400 Subject: [PATCH 1/5] Fix up some types --- .../app-utils/src/plugins/PluginUtils.tsx | 20 +++++++++++++------ packages/code-studio/package.json | 2 +- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/app-utils/src/plugins/PluginUtils.tsx b/packages/app-utils/src/plugins/PluginUtils.tsx index 1e49beb646..56869d4061 100644 --- a/packages/app-utils/src/plugins/PluginUtils.tsx +++ b/packages/app-utils/src/plugins/PluginUtils.tsx @@ -16,6 +16,14 @@ export interface PluginModule {} export type PluginModuleMap = Map; +export type PluginManifestPluginInfo = { + name: string; + main: string; + version: string; +}; + +export type PluginManifest = { plugins: PluginManifestPluginInfo[] }; + /** * Load a component plugin from the server. * @param baseURL Base URL of the plugin server @@ -53,7 +61,9 @@ export function loadComponentPlugin( * @param pluginUrl The URL of the plugin to load * @returns The loaded module */ -export async function loadModulePlugin(pluginUrl: string): Promise { +export async function loadModulePlugin( + pluginUrl: string +): Promise { const myModule = await loadRemoteModule(pluginUrl); return myModule; } @@ -63,9 +73,7 @@ export async function loadModulePlugin(pluginUrl: string): Promise { * @param jsonUrl The URL of the JSON file to load * @returns The JSON object of the manifest file */ -export async function loadJson( - jsonUrl: string -): Promise<{ plugins: { name: string; main: string }[] }> { +export async function loadJson(jsonUrl: string): Promise { const res = await fetch(jsonUrl); if (!res.ok) { throw new Error(res.statusText); @@ -94,7 +102,7 @@ export async function loadModulePlugins( } log.debug('Plugin manifest loaded:', manifest); - const pluginPromises: Promise[] = []; + const pluginPromises: Promise[] = []; for (let i = 0; i < manifest.plugins.length; i += 1) { const { name, main } = manifest.plugins[i]; const pluginMainUrl = `${modulePluginsUrl}/${name}/${main}`; @@ -107,7 +115,7 @@ export async function loadModulePlugins( const module = pluginModules[i]; const { name } = manifest.plugins[i]; if (module.status === 'fulfilled') { - pluginMap.set(name, module.value as PluginModule); + pluginMap.set(name, module.value); } else { log.error(`Unable to load plugin ${name}`, module.reason); } diff --git a/packages/code-studio/package.json b/packages/code-studio/package.json index 906130c939..3d77382dc3 100644 --- a/packages/code-studio/package.json +++ b/packages/code-studio/package.json @@ -11,7 +11,7 @@ "directory": "packages/code-studio" }, "dependencies": { - "@deephaven/app-utils": "file:../app-utils", + "@deephaven/app-utils": "^0.39.0", "@deephaven/auth-plugins": "file:../auth-plugins", "@deephaven/chart": "file:../chart", "@deephaven/components": "file:../components", From 09385777517c754af90cca956826469ec69fabdb Mon Sep 17 00:00:00 2001 From: mikebender Date: Mon, 29 May 2023 13:36:40 -0400 Subject: [PATCH 2/5] Fix up some packaging --- packages/code-studio/package.json | 2 +- packages/code-studio/tsconfig.json | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/code-studio/package.json b/packages/code-studio/package.json index 3d77382dc3..906130c939 100644 --- a/packages/code-studio/package.json +++ b/packages/code-studio/package.json @@ -11,7 +11,7 @@ "directory": "packages/code-studio" }, "dependencies": { - "@deephaven/app-utils": "^0.39.0", + "@deephaven/app-utils": "file:../app-utils", "@deephaven/auth-plugins": "file:../auth-plugins", "@deephaven/chart": "file:../chart", "@deephaven/components": "file:../components", diff --git a/packages/code-studio/tsconfig.json b/packages/code-studio/tsconfig.json index 89eae0923e..862ade28cb 100644 --- a/packages/code-studio/tsconfig.json +++ b/packages/code-studio/tsconfig.json @@ -9,6 +9,7 @@ "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"], "exclude": ["node_modules", "src/**/*.test.*", "src/**/__mocks__/*"], "references": [ + { "path": "../app-utils" }, { "path": "../auth-plugins" }, { "path": "../chart" }, { "path": "../components" }, From 634bfad143ab7bacf6cf2287ea3f4112db0bcd16 Mon Sep 17 00:00:00 2001 From: mikebender Date: Mon, 29 May 2023 13:58:39 -0400 Subject: [PATCH 3/5] Add an optional panel wrapper to Dashboard - Allows consumer of Dashboard to pass in a wrapper component type that can wrap each panel - Will be handy for giving each panel different contexts for APIs --- packages/dashboard/src/DashboardLayout.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/dashboard/src/DashboardLayout.tsx b/packages/dashboard/src/DashboardLayout.tsx index 7cb3f34b46..88360e631f 100644 --- a/packages/dashboard/src/DashboardLayout.tsx +++ b/packages/dashboard/src/DashboardLayout.tsx @@ -1,4 +1,5 @@ import React, { + ComponentType, ReactElement, useCallback, useEffect, @@ -63,6 +64,9 @@ interface DashboardLayoutProps { data?: DashboardData; children?: React.ReactNode | React.ReactNode[]; emptyDashboard?: React.ReactNode; + + /** Component to wrap each panel with */ + panelWrapper?: ComponentType; } /** @@ -78,6 +82,8 @@ export function DashboardLayout({ onLayoutInitialized = DEFAULT_CALLBACK, hydrate = hydrateDefault, dehydrate = dehydrateDefault, + // eslint-disable-next-line react/jsx-no-useless-fragment + panelWrapper = ({ children: panelChildren }) => <>{panelChildren}, }: DashboardLayoutProps): JSX.Element { const dispatch = useDispatch(); const data = @@ -117,14 +123,18 @@ export function DashboardLayout({ // ComponentType doesn't seem to work right, ReactNode is also incorrect // eslint-disable-next-line @typescript-eslint/no-explicit-any const CType = componentType as any; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const PanelWrapperType = panelWrapper as any; // Props supplied by GoldenLayout // eslint-disable-next-line react/prop-types const { glContainer, glEventHub } = props; return ( - {/* eslint-disable-next-line react/jsx-props-no-spreading */} - + + {/* eslint-disable-next-line react/jsx-props-no-spreading */} + + ); } @@ -135,7 +145,7 @@ export function DashboardLayout({ dehydrateMap.set(name, componentDehydrate); return cleanup; }, - [hydrate, dehydrate, hydrateMap, dehydrateMap, layout] + [hydrate, dehydrate, hydrateMap, dehydrateMap, layout, panelWrapper] ); const hydrateComponent = useCallback( (name, props) => (hydrateMap.get(name) ?? FALLBACK_CALLBACK)(props, id), From d20f01a7d4db3656a5f49a7e8f9ee92150ae4bbf Mon Sep 17 00:00:00 2001 From: mikebender Date: Mon, 29 May 2023 14:06:57 -0400 Subject: [PATCH 4/5] Pass the props to the wrapper --- packages/dashboard/src/DashboardLayout.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/dashboard/src/DashboardLayout.tsx b/packages/dashboard/src/DashboardLayout.tsx index 88360e631f..2873a5fdb1 100644 --- a/packages/dashboard/src/DashboardLayout.tsx +++ b/packages/dashboard/src/DashboardLayout.tsx @@ -131,7 +131,8 @@ export function DashboardLayout({ const { glContainer, glEventHub } = props; return ( - + {/* eslint-disable-next-line react/jsx-props-no-spreading */} + {/* eslint-disable-next-line react/jsx-props-no-spreading */} From ded3748d9a8d77882d776c109574b222b53f0c92 Mon Sep 17 00:00:00 2001 From: mikebender Date: Mon, 29 May 2023 14:40:30 -0400 Subject: [PATCH 5/5] Wire up wrapper through Dashboard --- packages/dashboard/src/Dashboard.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/dashboard/src/Dashboard.tsx b/packages/dashboard/src/Dashboard.tsx index b5f23fd5fd..ab5f228b63 100644 --- a/packages/dashboard/src/Dashboard.tsx +++ b/packages/dashboard/src/Dashboard.tsx @@ -1,4 +1,5 @@ import React, { + ComponentType, ForwardRefExoticComponent, RefAttributes, useEffect, @@ -40,6 +41,9 @@ export type DashboardProps = { >; hydrate?: PanelHydrateFunction; dehydrate?: PanelDehydrateFunction; + + /** Component to wrap each panel with */ + panelWrapper?: ComponentType; }; export function Dashboard({ @@ -54,6 +58,7 @@ export function Dashboard({ fallbackComponent = PanelPlaceholder, hydrate, dehydrate, + panelWrapper, }: DashboardProps): JSX.Element { const layoutElement = useRef(null); const [isInitialized, setIsInitialized] = useState(false); @@ -140,6 +145,7 @@ export function Dashboard({ onLayoutInitialized={onLayoutInitialized} hydrate={hydrate} dehydrate={dehydrate} + panelWrapper={panelWrapper} > {children}