Map converters settings api in the extension by panel name only

Use the fromSchemaName property to find the concerned topic

packages/studio-base/src/PanelAPI/useConfigById.ts

@@ -6,6 +6,10 @@ import * as _ from "lodash-es";
 import { useCallback } from "react";
 import { DeepPartial } from "ts-essentials";
 
+import {
+  getTopicToSchemaNameMap,
+  useMessagePipeline,
+} from "@foxglove/studio-base/components/MessagePipeline";
 import {
   LayoutState,
   useCurrentLayoutActions,
@@ -27,6 +31,7 @@ export default function useConfigById<Config extends Record<string, unknown>>(
 ): [Config | undefined, SaveConfig<Config>] {
   const { getCurrentLayoutState, savePanelConfigs } = useCurrentLayoutActions();
   const extensionSettings = useExtensionCatalog(getExtensionPanelSettings);
+  const topicToSchemaNameMap = useMessagePipeline(getTopicToSchemaNameMap);
 
   const configSelector = useCallback(
     (state: DeepPartial<LayoutState>) => {
@@ -37,13 +42,21 @@ export default function useConfigById<Config extends Record<string, unknown>>(
       const topics = Object.keys(stateConfig?.topics ?? {});
       const topicsSettings = _.merge(
         {},
-        ...topics.map((topic) => ({ [topic]: extensionSettings[topic]?.defaultConfig })),
+        ...topics.map((topic) => {
+          const schemaName = topicToSchemaNameMap[topic];
+          if (schemaName == undefined) {
+            return {};
+          }
+          return {
+            [topic]: extensionSettings[schemaName]?.defaultConfig,
+          };
+        }),
         stateConfig?.topics,
       );
 
       return maybeCast<Config>({ ...stateConfig, topics: topicsSettings });
     },
-    [panelId, extensionSettings],
+    [panelId, extensionSettings, topicToSchemaNameMap],
   );
 
   const config = useCurrentLayoutSelector(configSelector);

packages/studio-base/src/components/MessagePipeline/index.tsx

@@ -335,3 +335,8 @@ function createPlayerListener(args: {
     },
   };
 }
+
+export const getTopicToSchemaNameMap = (
+  state: MessagePipelineContext,
+): Record<string, string | undefined> =>
+  _.mapValues(_.keyBy(state.sortedTopics, "name"), ({ schemaName }) => schemaName);

packages/studio-base/src/components/PanelExtensionAdapter/renderState.ts

@@ -2,6 +2,7 @@
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
+import * as _ from "lodash-es";
 import memoizeWeak from "memoize-weak";
 import { Writable } from "ts-essentials";
 
@@ -103,6 +104,11 @@ function initRenderStateBuilder(): BuildRenderStateFn {
       config,
     } = input;
 
+    const topicToSchemaNameMap = _.mapValues(
+      _.keyBy(sortedTopics, "name"),
+      ({ schemaName }) => schemaName,
+    );
+
     // Should render indicates whether any fields of render state are updated
     let shouldRender = false;
 
@@ -207,11 +213,15 @@ function initRenderStateBuilder(): BuildRenderStateFn {
           if (unconvertedSubscriptionTopics.has(messageEvent.topic)) {
             postProcessedFrame.push(messageEvent);
           }
-          convertMessage(
-            { ...messageEvent, topicConfig: config?.topics[messageEvent.topic] },
-            topicSchemaConverters,
-            postProcessedFrame,
-          );
+
+          const schemaName = topicToSchemaNameMap[messageEvent.topic];
+          if (schemaName) {
+            convertMessage(
+              { ...messageEvent, topicConfig: config?.topics[messageEvent.topic] },
+              topicSchemaConverters,
+              postProcessedFrame,
+            );
+          }
           lastMessageByTopic.set(messageEvent.topic, messageEvent);
         }
         renderState.currentFrame = postProcessedFrame;
@@ -221,11 +231,14 @@ function initRenderStateBuilder(): BuildRenderStateFn {
         // only the new conversions on our most recent message on each topic.
         const postProcessedFrame: MessageEvent[] = [];
         for (const messageEvent of lastMessageByTopic.values()) {
-          convertMessage(
-            { ...messageEvent, topicConfig: config?.topics[messageEvent.topic] },
-            newConverters,
-            postProcessedFrame,
-          );
+          const schemaName = topicToSchemaNameMap[messageEvent.topic];
+          if (schemaName) {
+            convertMessage(
+              { ...messageEvent, topicConfig: config?.topics[messageEvent.topic] },
+              newConverters,
+              postProcessedFrame,
+            );
+          }
         }
         renderState.currentFrame = postProcessedFrame;
         shouldRender = true;
@@ -273,11 +286,15 @@ function initRenderStateBuilder(): BuildRenderStateFn {
               if (unconvertedSubscriptionTopics.has(messageEvent.topic)) {
                 frames.push(messageEvent);
               }
-              convertMessage(
-                { ...messageEvent, topicConfig: config?.topics[messageEvent.topic] },
-                topicSchemaConverters,
-                frames,
-              );
+
+              const schemaName = topicToSchemaNameMap[messageEvent.topic];
+              if (schemaName) {
+                convertMessage(
+                  { ...messageEvent, topicConfig: config?.topics[messageEvent.topic] },
+                  topicSchemaConverters,
+                  frames,
+                );
+              }
             },
           );
         }

packages/studio-base/src/components/PanelSettings/index.tsx

@@ -4,6 +4,7 @@
 
 import { Divider, Typography } from "@mui/material";
 import * as _ from "lodash-es";
+import { to } from "mathjs";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useUnmount } from "react-use";
@@ -12,6 +13,10 @@ import { SettingsTree } from "@foxglove/studio";
 import { AppSetting } from "@foxglove/studio-base/AppSetting";
 import { useConfigById } from "@foxglove/studio-base/PanelAPI";
 import EmptyState from "@foxglove/studio-base/components/EmptyState";
+import {
+  getTopicToSchemaNameMap,
+  useMessagePipeline,
+} from "@foxglove/studio-base/components/MessagePipeline";
 import { ActionMenu } from "@foxglove/studio-base/components/PanelSettings/ActionMenu";
 import SettingsTreeEditor from "@foxglove/studio-base/components/SettingsTreeEditor";
 import { ShareJsonModal } from "@foxglove/studio-base/components/ShareJsonModal";
@@ -151,6 +156,8 @@ export default function PanelSettings({
 
   const extensionSettings = useExtensionCatalog(getExtensionPanelSettings);
 
+  const topicToSchemaNameMap = useMessagePipeline(getTopicToSchemaNameMap);
+
   const settingsTree = usePanelStateStore((state) => {
     if (selectedPanelId) {
       const set = state.settingsTrees[selectedPanelId];
@@ -159,9 +166,15 @@ export default function PanelSettings({
         const topicsConfig = maybeCast<{ topics: Record<string, unknown> }>(config)?.topics;
         const topicsSettings = _.merge(
           {},
-          ...topics.map((topic) => ({
-            [topic]: extensionSettings[panelType]?.[topic]?.settings(topicsConfig?.[topic]),
-          })),
+          ...topics.map((topic) => {
+            const schemaName = topicToSchemaNameMap[topic];
+            if (schemaName == undefined) {
+              return {};
+            }
+            return {
+              [topic]: extensionSettings[panelType]?.[schemaName]?.settings(topicsConfig?.[topic]),
+            };
+          }),
         );
 
         return { ...set, nodes: _.merge({}, set.nodes, { topics: { children: topicsSettings } }) };

packages/studio-base/src/context/ExtensionCatalogContext.ts

@@ -2,7 +2,6 @@
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
-import * as _ from "lodash-es";
 import { createContext } from "react";
 import { StoreApi, useStore } from "zustand";
 
@@ -33,8 +32,11 @@ export type ExtensionCatalog = Immutable<{
 
   installedExtensions: undefined | ExtensionInfo[];
   installedPanels: undefined | Record<string, RegisteredPanel>;
-  installedMessageConverters: undefined | RegisterMessageConverterArgs<unknown>[];
+  installedMessageConverters:
+    | undefined
+    | Omit<RegisterMessageConverterArgs<unknown>, "panelSettings">[];
   installedTopicAliasFunctions: undefined | TopicAliasFunctions;
+  panelSettings: undefined | Record<string, Record<string, PanelSettings<unknown>>>;
 }>;
 
 export const ExtensionCatalogContext = createContext<undefined | StoreApi<ExtensionCatalog>>(
@@ -49,8 +51,5 @@ export function useExtensionCatalog<T>(selector: (registry: ExtensionCatalog) =>
 export function getExtensionPanelSettings(
   reg: ExtensionCatalog,
 ): Record<string, Record<string, PanelSettings<unknown>>> {
-  return _.merge(
-    {},
-    ...(reg.installedMessageConverters ?? []).map((converter) => converter.panelSettings),
-  );
+  return reg.panelSettings ?? {};
 }

packages/studio-base/src/providers/ExtensionCatalogProvider.tsx

@@ -2,6 +2,7 @@
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
+import * as _ from "lodash-es";
 import React, { PropsWithChildren, useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import { StoreApi, createStore } from "zustand";
@@ -10,6 +11,7 @@ import Logger from "@foxglove/log";
 import {
   ExtensionContext,
   ExtensionModule,
+  PanelSettings,
   RegisterMessageConverterArgs,
   TopicAliasFunction,
 } from "@foxglove/studio";
@@ -32,6 +34,7 @@ type ContributionPoints = {
   panels: Record<string, RegisteredPanel>;
   messageConverters: MessageConverter[];
   topicAliasFunctions: TopicAliasFunctions;
+  panelSettings: Record<string, Record<string, PanelSettings<unknown>>>;
 };
 
 function activateExtension(
@@ -44,6 +47,8 @@ function activateExtension(
 
   const messageConverters: RegisterMessageConverterArgs<unknown>[] = [];
 
+  const panelSettings: Record<string, Record<string, PanelSettings<unknown>>> = {};
+
   const topicAliasFunctions: ContributionPoints["topicAliasFunctions"] = [];
 
   log.debug(`Activating extension ${extension.qualifiedName}`);
@@ -87,6 +92,12 @@ function activateExtension(
         ...args,
         extensionNamespace: extension.namespace,
       } as MessageConverter);
+
+      const converterSettings = _.mapValues(args.panelSettings, (settings) => ({
+        [args.fromSchemaName]: settings,
+      }));
+
+      _.merge(panelSettings, converterSettings);
     },
 
     registerTopicAliases: (aliasFunction: TopicAliasFunction) => {
@@ -111,6 +122,7 @@ function activateExtension(
     panels,
     messageConverters,
     topicAliasFunctions,
+    panelSettings,
   };
 }
 
@@ -145,6 +157,7 @@ function createExtensionRegistryStore(
         panels: {},
         messageConverters: [],
         topicAliasFunctions: [],
+        panelSettings: {},
       };
       for (const loader of loaders) {
         try {
@@ -154,6 +167,7 @@ function createExtensionRegistryStore(
               const unwrappedExtensionSource = await loader.loadExtension(extension.id);
               const contributionPoints = activateExtension(extension, unwrappedExtensionSource);
               Object.assign(allContributionPoints.panels, contributionPoints.panels);
+              _.merge(allContributionPoints.panelSettings, contributionPoints.panelSettings);
               allContributionPoints.messageConverters.push(...contributionPoints.messageConverters);
               allContributionPoints.topicAliasFunctions.push(
                 ...contributionPoints.topicAliasFunctions,
@@ -174,6 +188,7 @@ function createExtensionRegistryStore(
         installedPanels: allContributionPoints.panels,
         installedMessageConverters: allContributionPoints.messageConverters,
         installedTopicAliasFunctions: allContributionPoints.topicAliasFunctions,
+        panelSettings: allContributionPoints.panelSettings,
       });
     },
 
@@ -186,6 +201,8 @@ function createExtensionRegistryStore(
 
     installedTopicAliasFunctions: [],
 
+    panelSettings: {},
+
     uninstallExtension: async (namespace: ExtensionNamespace, id: string) => {
       const namespacedLoader = loaders.find((loader) => loader.namespace === namespace);
       if (namespacedLoader == undefined) {

packages/studio/src/index.ts

@@ -423,7 +423,7 @@ export type RegisterMessageConverterArgs<Src> = {
   fromSchemaName: string;
   toSchemaName: string;
   converter: (msg: Src, event: Immutable<MessageEvent<Src>>) => unknown;
-  panelSettings?: Record<string, Record<string, PanelSettings<unknown>>>;
+  panelSettings?: Record<string, PanelSettings<unknown>>;
 };
 
 type BaseTopic = { name: string; schemaName?: string };