Expose DetailsPanelOverride Plugin Point

ui/src/common/plugin_api.ts

@@ -18,6 +18,7 @@ import {TrackControllerFactory} from '../controller/track_controller';
 import {TrackCreator} from '../frontend/track';
 import {Selection} from './state';
 import {CustomButtonArgs} from '../frontend/button_registry';
+import {AnyAttrsVnode} from '../frontend/panel_container';
 
 export {EngineProxy} from '../common/engine';
 export {
@@ -116,6 +117,14 @@ export interface PluginContext {
       onDetailsPanelSelectionChange: (newSelection?: Selection) => void): void;
   // Register a custom button on the timeline
   registerCustomButton(button: CustomButtonArgs): void;
+
+  detailsPanelRenderOverride(
+    onDetailsPanelRender:
+      (detailsPanels: {
+        key: string;
+        name: string;
+        vnode: AnyAttrsVnode;
+      }[]) => void): void;
 }
 
 export interface PluginInfo {

ui/src/common/plugins.ts

@@ -30,19 +30,29 @@ import {
 import {Registry} from './registry';
 import {Selection} from './state';
 import {CustomButton, CustomButtonArgs, customButtonRegistry} from '../frontend/button_registry';
+import {AnyAttrsVnode} from 'src/frontend/panel_container';
 
 // Every plugin gets its own PluginContext. This is how we keep track
 // what each plugin is doing and how we can blame issues on particular
 // plugins.
 export class PluginContextImpl implements PluginContext {
   readonly pluginId: string;
   onDetailsPanelSelectionChange?: (newSelection?: Selection) => void;
+  onDetailsPanelRender?:
+    (detailsPanels:
+      { key: string; name: string; vnode: AnyAttrsVnode; }[]) => void;
   private trackProviders: TrackProvider[];
 
   constructor(pluginId: string) {
     this.pluginId = pluginId;
     this.trackProviders = [];
   }
+  detailsPanelRenderOverride(
+    onDetailsPanelHijack: (detailsPanels:
+      { key: string; name: string; vnode: AnyAttrsVnode; }[]
+    ) => void): void {
+      this.onDetailsPanelRender = onDetailsPanelHijack;
+  }
 
   // ==================================================================
   // The plugin facing API of PluginContext:
@@ -148,6 +158,23 @@ export class PluginManager {
       pluginContext.onDetailsPanelSelectionChange(newSelection);
     }
   }
+
+  isDetailsPanelRenderOverride(): boolean {
+    const overrides = Array.from(this.contexts.values()).filter((context)=>{
+      return !!context.onDetailsPanelRender;
+    });
+    return overrides.length>0;
+  }
+
+  onDetailsPanelRender(detailsPanel?:
+    { key: string; name: string; vnode: AnyAttrsVnode; }[]) {
+    this.contexts.forEach((context)=>{
+      if (context === undefined) return;
+      if (context.onDetailsPanelRender) {
+        context.onDetailsPanelRender(detailsPanel || []);
+      }
+    });
+  }
 }
 
 // TODO(hjd): Sort out the story for global singletons like these:

ui/src/frontend/details_panel.ts

@@ -57,9 +57,9 @@ function getDetailsHeight() {
 }
 
 function getFullScreenHeight(dom?: Element) {
-  for(const selector of globals.frontendLocalState.detailsFullScreenSelectors) {
+  for (const selector of globals.frontendLocalState.detailsFullScreenSelectors) {
     const element = dom?.closest(selector) || document.querySelector(selector);
-    if(element != null) {
+    if (element != null) {
       return element.clientHeight;
     }
   }
@@ -393,7 +393,10 @@ export class DetailsPanel implements m.ClassComponent {
 
     const panel = currentTabDetails?.vnode;
     const panels = panel ? [panel] : [];
-
+    if (pluginManager.isDetailsPanelRenderOverride()) {
+      pluginManager.onDetailsPanelRender(detailsPanels);
+      return;
+    }
     return m(
         '.details-content',
         {