@industry-theme/principal-view-panels 0.12.90 → 0.12.92

package/dist/panels/DashboardPanel.d.ts

@@ -1,6 +1,13 @@
 import React from 'react';
 import type { PanelComponentProps } from '@principal-ade/panel-framework-core';
-import type { MetricSource, DiscoveredCanvas, DataProvider } from '@principal-ai/principal-view-core';
+import type { MetricSource, DiscoveredCanvas, DiscoveredStoryboard, DiscoveredWorkflow, WorkflowTemplate, DataProvider } from '@principal-ai/principal-view-core';
+/**
+ * Workflow with its loaded template, used for navigation from source links.
+ */
+export interface LoadedWorkflow {
+    file: DiscoveredWorkflow;
+    template: WorkflowTemplate;
+}
 export interface DashboardPanelProps extends PanelComponentProps {
     /**
      * The discovered dashboard to display.
@@ -14,6 +21,17 @@ export interface DashboardPanelProps extends PanelComponentProps {
      * For testing with sample data, pass MockDataProvider from @principal-ai/principal-view-react.
      */
     dataProvider?: DataProvider;
+    /**
+     * Discovered storyboards for navigating from source links to workflows.
+     * When provided, clicking a source link will emit an 'openCanvas' event
+     * with the matching storyboard and workflow.
+     */
+    storyboards?: DiscoveredStoryboard[];
+    /**
+     * Loaded workflows with their templates, for navigating from source links.
+     * Used to include the full workflow template in the 'openCanvas' event.
+     */
+    workflows?: LoadedWorkflow[];
     /**
      * Callback when a metric source link is clicked.
      * Use this to navigate to the referenced workflow/canvas.

package/dist/panels/DashboardPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardPanel.d.ts","sourceRoot":"","sources":["../../src/panels/DashboardPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAI/E,OAAO,KAAK,EAEV,YAAY,EAGZ,gBAAgB,EAChB,YAAY,EAEb,MAAM,mCAAmC,CAAC;AAsB3C,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAE5C;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAE5B;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAE/C;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+MxD,CAAC"}
+{"version":3,"file":"DashboardPanel.d.ts","sourceRoot":"","sources":["../../src/panels/DashboardPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAI/E,OAAO,KAAK,EAEV,YAAY,EAGZ,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EAEb,MAAM,mCAAmC,CAAC;AAsB3C;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,kBAAkB,CAAC;IACzB,QAAQ,EAAE,gBAAgB,CAAC;CAC5B;AAED,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAE5C;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAE5B;;;;OAIG;IACH,WAAW,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAErC;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;IAE7B;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAE/C;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAyQxD,CAAC"}

package/dist/panels.bundle.js

@@ -182723,7 +182723,7 @@ function MetricPanel({ metric, data, onMetricClick, onSourceClick }) {
     }, children: jsx("span", { style: { color: theme2.colors.textSecondary, fontSize: theme2.fontSizes[1] }, children: "Loading..." }) });
   }
   if (data.error) {
-    return jsxs("div", { style: {
+    return jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [jsxs("div", { style: {
       backgroundColor: theme2.colors.surface || theme2.colors.background,
       border: `1px solid ${theme2.colors.error}`,
       borderRadius: ((_c = theme2.radii) == null ? void 0 : _c[2]) || 8,
@@ -182734,7 +182734,7 @@ function MetricPanel({ metric, data, onMetricClick, onSourceClick }) {
       marginBottom: ((_e4 = theme2.space) == null ? void 0 : _e4[2]) || 8,
       fontSize: theme2.fontSizes[1],
       fontWeight: theme2.fontWeights.medium
-    }, children: metric.name }), jsx("div", { style: { color: theme2.colors.textSecondary, fontSize: theme2.fontSizes[0] }, children: data.error })] });
+    }, children: metric.name }), jsx("div", { style: { color: theme2.colors.textSecondary, fontSize: theme2.fontSizes[0] }, children: data.error })] }), metric.sources && metric.sources.length > 0 && onSourceClick && jsx("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: metric.sources.map((source2, i) => jsx(SourceLink, { source: source2, onClick: onSourceClick }, i)) })] });
   }
   const handleClick = () => {
     onMetricClick == null ? void 0 : onMetricClick(metric.id);
@@ -206088,6 +206088,8 @@ const DashboardPanel = ({
   events,
   selectedDashboard,
   dataProvider,
+  storyboards,
+  workflows,
   onSourceClick,
   onMetricClick
 }) => {
@@ -206132,21 +206134,64 @@ const DashboardPanel = ({
     (source2) => {
       if (onSourceClick) {
         onSourceClick(source2);
-      } else if (events == null ? void 0 : events.emit) {
+        return;
+      }
+      if (!(events == null ? void 0 : events.emit)) return;
+      const matchingStoryboard = storyboards == null ? void 0 : storyboards.find(
+        (sb) => sb.basename === source2.storyboard || sb.name === source2.storyboard
+      );
+      if (matchingStoryboard) {
+        const matchingWorkflowMeta = matchingStoryboard.workflows.find(
+          (wf) => wf.name === source2.workflow || wf.id.endsWith(`/${source2.workflow}`)
+        );
+        if (matchingWorkflowMeta) {
+          const fullWorkflow = workflows == null ? void 0 : workflows.find(
+            (wf) => wf.file.path === matchingWorkflowMeta.path
+          );
+          events.emit({
+            type: "custom",
+            source: "dashboard-panel",
+            timestamp: Date.now(),
+            payload: {
+              action: "openCanvas",
+              canvasId: matchingStoryboard.canvas.id,
+              canvas: matchingStoryboard.canvas,
+              workflowId: matchingWorkflowMeta.id,
+              workflow: fullWorkflow == null ? void 0 : fullWorkflow.template,
+              openMode: "detail",
+              // Include source info for potential node/event highlighting
+              sourceNodes: source2.nodes,
+              sourceEvent: source2.event
+            }
+          });
+          return;
+        }
         events.emit({
-          type: "dashboard:source-click",
+          type: "custom",
           source: "dashboard-panel",
           timestamp: Date.now(),
           payload: {
-            source: source2,
-            storyboard: source2.storyboard,
-            workflow: source2.workflow,
-            nodes: source2.nodes
+            action: "openCanvas",
+            canvasId: matchingStoryboard.canvas.id,
+            canvas: matchingStoryboard.canvas,
+            openMode: "editor"
           }
         });
+        return;
       }
+      events.emit({
+        type: "dashboard:source-click",
+        source: "dashboard-panel",
+        timestamp: Date.now(),
+        payload: {
+          source: source2,
+          storyboard: source2.storyboard,
+          workflow: source2.workflow,
+          nodes: source2.nodes
+        }
+      });
     },
-    [onSourceClick, events]
+    [onSourceClick, events, storyboards, workflows]
   );
   const handleMetricClick = useCallback(
     (metricId) => {
@@ -206163,6 +206208,10 @@ const DashboardPanel = ({
     },
     [onMetricClick, events]
   );
+  const effectiveDataProvider = useMemo(
+    () => dataProvider ?? new EmptyDataProvider(),
+    [dataProvider]
+  );
   if (loading) {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -206242,10 +206291,6 @@ const DashboardPanel = ({
       }
     );
   }
-  const effectiveDataProvider = useMemo(
-    () => dataProvider ?? new EmptyDataProvider(),
-    [dataProvider]
-  );
   return /* @__PURE__ */ jsx(
     "div",
     {