From e73d58ae29264de005977334c21bb7ef332cb8d9 Mon Sep 17 00:00:00 2001
From: Nanda <nanda.sankaran@gmail.com>
Date: Mon, 13 Jul 2026 13:45:42 +1000
Subject: [PATCH] Allow customizing preview renderer by catalog item type.

---
 .../lib/ReactViews/Preview/DataPreview.jsx    | 13 ++++--
 .../ReactViews/Preview/PreviewRenderers.ts    | 42 +++++++++++++++++++
 2 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 packages/terriajs/lib/ReactViews/Preview/PreviewRenderers.ts

diff --git a/packages/terriajs/lib/ReactViews/Preview/DataPreview.jsx b/packages/terriajs/lib/ReactViews/Preview/DataPreview.jsx
index a4cfb1aacb..4d0dedb465 100644
--- a/packages/terriajs/lib/ReactViews/Preview/DataPreview.jsx
+++ b/packages/terriajs/lib/ReactViews/Preview/DataPreview.jsx
@@ -15,6 +15,7 @@ import MappablePreview from "./MappablePreview";
 import WarningBox from "./WarningBox";
 import Styles from "./data-preview.scss";
 import Icon from "../../Styled/Icon";
+import { getCustomPreviewRenderer } from "./PreviewRenderers";
 
 /**
  * Data preview section, for the preview map see DataPreviewMap
@@ -61,9 +62,11 @@ class DataPreview extends Component {
         </div>
       );
     } else if (previewed && previewed.isMappable) {
+      const MappablePreviewRenderer =
+        getCustomPreviewRenderer(previewed.type) ?? MappablePreview;
       return (
         <div className={Styles.previewInner}>
-          <MappablePreview
+          <MappablePreviewRenderer
             previewed={previewed}
             terria={this.props.terria}
             viewState={this.props.viewState}
@@ -90,17 +93,21 @@ class DataPreview extends Component {
         </div>
       );
     } else if (previewed && CatalogFunctionMixin.isMixedInto(previewed)) {
+      const FunctionRenderer =
+        getCustomPreviewRenderer(previewed.type) ?? InvokeFunction;
       return (
-        <InvokeFunction
+        <FunctionRenderer
           previewed={previewed}
           terria={this.props.terria}
           viewState={this.props.viewState}
         />
       );
     } else if (previewed && previewed.isGroup) {
+      const GroupPreviewRenderer =
+        getCustomPreviewRenderer(previewed.type) ?? GroupPreview;
       return (
         <div className={Styles.previewInner}>
-          <GroupPreview
+          <GroupPreviewRenderer
             previewed={previewed}
             terria={this.props.terria}
             viewState={this.props.viewState}
diff --git a/packages/terriajs/lib/ReactViews/Preview/PreviewRenderers.ts b/packages/terriajs/lib/ReactViews/Preview/PreviewRenderers.ts
new file mode 100644
index 0000000000..0fe1459bff
--- /dev/null
+++ b/packages/terriajs/lib/ReactViews/Preview/PreviewRenderers.ts
@@ -0,0 +1,42 @@
+import { observable, runInAction } from "mobx";
+import { FC } from "react";
+import CatalogMemberMixin from "../../ModelMixins/CatalogMemberMixin";
+
+/**
+ * Custom previewe renderer type
+ */
+export type PreviewRendererType = FC<{
+  previewed: CatalogMemberMixin.Instance;
+}>;
+
+/**
+ * Custom preview renderer registry.
+ */
+const PreviewRenderers = observable(new Map<string, PreviewRendererType>());
+
+/**
+ * Register a custom preview renderer for the given catalog item type.
+ *
+ * Preview renderers, render the `About data` view.
+ *
+ * @param type Catalog item type
+ * @param renderer Preview rendere component
+ */
+export function registerCustomPreviewRenderer(
+  type: string,
+  renderer: PreviewRendererType
+) {
+  runInAction(() => PreviewRenderers.set(type, renderer));
+}
+
+/**
+ * Get registered custom previewer renderer for the given catalog item type
+ *
+ * @param type Catalog item type
+ * @returns Registered custom renderer or `undefined` if no custom renderer is registered for the type.
+ */
+export function getCustomPreviewRenderer(
+  type: string
+): PreviewRendererType | undefined {
+  return PreviewRenderers.get(type);
+}