Allow customizing preview renderer by catalog item type.

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}

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);
+}