@industry-theme/principal-view-panels 0.12.56 → 0.12.58

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

@@ -1 +1 @@
-{"version":3,"file":"StoryboardListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/StoryboardListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AAsE9D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA4yCvE,CAAC"}
+{"version":3,"file":"StoryboardListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/StoryboardListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AA2K9D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAk1CvE,CAAC"}

package/dist/panels.bundle.js

@@ -86713,18 +86713,40 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
   const color2 = fillColor;
   const displayName = nodeProps.name;
   const eventData = nodeData == null ? void 0 : nodeData.event;
-  const eventName = eventData == null ? void 0 : eventData.name;
-  const showEventName = eventName && eventName !== displayName;
+  const otelData = nodeData == null ? void 0 : nodeData.otel;
+  const boundaryData = nodeData == null ? void 0 : nodeData.boundary;
+  const getNodeIdentifier = () => {
+    if (eventData == null ? void 0 : eventData.name)
+      return eventData.name;
+    if (nodeData == null ? void 0 : nodeData.eventRef)
+      return nodeData.eventRef;
+    if (otelData == null ? void 0 : otelData.spanPattern)
+      return otelData.spanPattern;
+    if (otelData == null ? void 0 : otelData.scope)
+      return otelData.scope;
+    if (otelData == null ? void 0 : otelData.resourceMatch) {
+      const entries = Object.entries(otelData.resourceMatch);
+      if (entries.length > 0) {
+        const [key, value] = entries[0];
+        return `${key}: ${Array.isArray(value) ? value[0] : value}`;
+      }
+    }
+    if (boundaryData == null ? void 0 : boundaryData.direction)
+      return boundaryData.direction;
+    return void 0;
+  };
+  const identifier2 = getNodeIdentifier();
+  const showIdentifier = identifier2 && identifier2 !== displayName;
   const renderWithDotBreaks = (text2) => {
     const parts = text2.split(".");
     return parts.map((part, i) => jsxs("span", { children: [part, i < parts.length - 1 && jsxs(Fragment, { children: [".", jsx("wbr", {})] })] }, i));
   };
-  const renderNameWithEvent = (centered = true) => jsxs("div", { style: { textAlign: centered ? "center" : "left", wordBreak: "break-word" }, children: [jsx("div", { children: displayName }), showEventName && jsx("div", { style: {
+  const renderNameWithIdentifier = (centered = true) => jsxs("div", { style: { textAlign: centered ? "center" : "left", wordBreak: "break-word" }, children: [jsx("div", { children: displayName }), showIdentifier && jsx("div", { style: {
     fontSize: theme2.fontSizes[0] * 0.75,
     color: "rgba(0, 0, 0, 0.5)",
     marginTop: "2px",
     fontFamily: theme2.fonts.monospace
-  }, children: renderWithDotBreaks(eventName) })] });
+  }, children: renderWithDotBreaks(identifier2) })] });
   const icon = nodeData.icon || state && (((_d = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _d.icon) || ((_f = (_e2 = typeDefinition.states) == null ? void 0 : _e2[state]) == null ? void 0 : _f.icon)) || typeDefinition.icon;
   const getAnimationClass = () => {
     switch (animationType) {
@@ -86922,7 +86944,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
     height: "100%",
     boxShadow: isHighlighted ? `0 0 0 3px #3b82f6, 0 0 20px rgba(59, 130, 246, 0.5)` : selected2 ? `0 0 0 2px ${strokeColor}` : "none",
     transition: "box-shadow 0.2s ease"
-  }, onMouseDown: handleMouseDown, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderStatusBadge(), isBoundaryNode ? renderBoundaryBadge() : jsxs(Fragment, { children: [renderSourcesBadge(), renderReferencesBadge()] }), jsx("div", { style: hexagonBorderStyle, className: animationClass, children: jsxs("div", { style: hexagonInnerStyle, children: [icon && jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: resolveIcon(icon, 20) }), renderNameWithEvent(), state && jsx("div", { style: {
+  }, onMouseDown: handleMouseDown, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderStatusBadge(), isBoundaryNode ? renderBoundaryBadge() : jsxs(Fragment, { children: [renderSourcesBadge(), renderReferencesBadge()] }), jsx("div", { style: hexagonBorderStyle, className: animationClass, children: jsxs("div", { style: hexagonInnerStyle, children: [icon && jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: resolveIcon(icon, 20) }), renderNameWithIdentifier(), state && jsx("div", { style: {
     fontSize: theme2.fontSizes[0],
     fontFamily: theme2.fonts.body,
     backgroundColor: color2,
@@ -86941,7 +86963,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
     height: "100%",
     boxShadow: isHighlighted ? `0 0 0 3px #3b82f6, 0 0 20px rgba(59, 130, 246, 0.5)` : selected2 ? `0 0 0 2px ${strokeColor}` : "none",
     transition: "box-shadow 0.2s ease"
-  }, onMouseDown: handleMouseDown, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderStatusBadge(), isBoundaryNode ? renderBoundaryBadge() : jsxs(Fragment, { children: [renderSourcesBadge(), renderReferencesBadge()] }), jsx("div", { style: diamondBorderStyle, className: animationClass, children: jsxs("div", { style: diamondInnerStyle, children: [icon && jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: resolveIcon(icon, 20) }), renderNameWithEvent(), state && jsx("div", { style: {
+  }, onMouseDown: handleMouseDown, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderStatusBadge(), isBoundaryNode ? renderBoundaryBadge() : jsxs(Fragment, { children: [renderSourcesBadge(), renderReferencesBadge()] }), jsx("div", { style: diamondBorderStyle, className: animationClass, children: jsxs("div", { style: diamondInnerStyle, children: [icon && jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: resolveIcon(icon, 20) }), renderNameWithIdentifier(), state && jsx("div", { style: {
     fontSize: theme2.fontSizes[0],
     fontFamily: theme2.fonts.body,
     backgroundColor: color2,
@@ -86962,7 +86984,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
     justifyContent: "center",
     gap: "6px",
     width: "100%"
-  }, children: [icon && resolveIcon(icon, 18), renderNameWithEvent(false)] }) : jsxs(Fragment, { children: [icon && jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: resolveIcon(icon, 20) }), renderNameWithEvent()] }), state && jsx("div", { style: {
+  }, children: [icon && resolveIcon(icon, 18), renderNameWithIdentifier(false)] }) : jsxs(Fragment, { children: [icon && jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: resolveIcon(icon, 20) }), renderNameWithIdentifier()] }), state && jsx("div", { style: {
     fontSize: theme2.fontSizes[0],
     fontFamily: theme2.fonts.body,
     backgroundColor: color2,
@@ -88512,7 +88534,7 @@ function useCanvasToLegacy(canvas, library, spansCanvas, workflowSpanPattern) {
     if (!canvas)
       return null;
     const { nodes, edges } = CanvasConverter.canvasToGraph(canvas);
-    const scopeColorMap = buildScopeColorMap(library == null ? void 0 : library.resources);
+    const scopeColorMap = buildScopeColorMap(library);
     const spanColorMap = buildSpanColorMap(spansCanvas);
     const spanColor = resolveEventSpanColor(workflowSpanPattern, spanColorMap);
     for (const node2 of nodes) {
@@ -99611,6 +99633,60 @@ const StoryboardLoadingGraph = () => {
     }
   );
 };
+const TRACER_NAME = "@industry-theme/principal-view-panels";
+const TRACER_VERSION = "0.11.40";
+function getTracer() {
+  return trace.getTracer(TRACER_NAME, TRACER_VERSION);
+}
+function getActiveSpan() {
+  return trace.getActiveSpan();
+}
+async function withSpan(span, fn) {
+  return context.with(trace.setSpan(context.active(), span), fn);
+}
+async function traced(name2, fn, options) {
+  const tracer = getTracer();
+  const span = tracer.startSpan(name2, options);
+  try {
+    const result = await context.with(
+      trace.setSpan(context.active(), span),
+      () => fn(span)
+    );
+    span.setStatus({ code: SpanStatusCode.OK });
+    return result;
+  } catch (error) {
+    span.setStatus({
+      code: SpanStatusCode.ERROR,
+      message: error instanceof Error ? error.message : String(error)
+    });
+    span.recordException(
+      error instanceof Error ? error : new Error(String(error))
+    );
+    throw error;
+  } finally {
+    span.end();
+  }
+}
+function tracedSync(name2, fn, options) {
+  const tracer = getTracer();
+  const span = tracer.startSpan(name2, options);
+  try {
+    const result = fn(span);
+    span.setStatus({ code: SpanStatusCode.OK });
+    return result;
+  } catch (error) {
+    span.setStatus({
+      code: SpanStatusCode.ERROR,
+      message: error instanceof Error ? error.message : String(error)
+    });
+    span.recordException(
+      error instanceof Error ? error : new Error(String(error))
+    );
+    throw error;
+  } finally {
+    span.end();
+  }
+}
 function convertGitStatusToFileStatus(gitStatus) {
   if (!gitStatus) return [];
   const fileStatuses = [];
@@ -99648,6 +99724,94 @@ function convertGitStatusToFileStatus(gitStatus) {
   });
   return fileStatuses;
 }
+function useStoryboardListPanelTelemetry(params) {
+  const { isLoading, error, storyboardCount, otelCount, architectureCount } = params;
+  const spanRef = useRef(null);
+  const hasEmittedLoadedRef = useRef(false);
+  const tracer = getTracer();
+  useEffect(() => {
+    spanRef.current = tracer.startSpan("storyboard-list.panel", {
+      attributes: {
+        "panel.id": "storyboard-list-panel"
+      }
+    });
+    spanRef.current.addEvent("panel.loading", {
+      "panel.id": "storyboard-list-panel"
+    });
+    return () => {
+      var _a;
+      (_a = spanRef.current) == null ? void 0 : _a.end();
+      spanRef.current = null;
+      hasEmittedLoadedRef.current = false;
+    };
+  }, [tracer]);
+  useEffect(() => {
+    if (!spanRef.current) return;
+    if (error) {
+      spanRef.current.addEvent("panel.error", {
+        "panel.id": "storyboard-list-panel",
+        "error.type": "discovery_error",
+        "error.message": error
+      });
+    } else if (!isLoading && !hasEmittedLoadedRef.current) {
+      spanRef.current.addEvent("panel.loaded", {
+        "panel.id": "storyboard-list-panel",
+        "storyboard.count": storyboardCount,
+        "otel.count": otelCount,
+        "architecture.count": architectureCount
+      });
+      hasEmittedLoadedRef.current = true;
+    }
+  }, [isLoading, error, storyboardCount, otelCount, architectureCount]);
+  return useMemo(() => ({
+    emitCanvasSelected: (canvasId, canvasName, canvasPath, canvasType) => {
+      var _a;
+      (_a = spanRef.current) == null ? void 0 : _a.addEvent("canvas.selected", {
+        "canvas.id": canvasId,
+        "canvas.name": canvasName,
+        "canvas.path": canvasPath,
+        "canvas.type": canvasType
+      });
+    },
+    emitWorkflowSelected: (workflowId, workflowName, workflowPath, canvasId, scenarioCount) => {
+      var _a;
+      (_a = spanRef.current) == null ? void 0 : _a.addEvent("workflow.selected", {
+        "workflow.id": workflowId,
+        "workflow.name": workflowName,
+        "workflow.path": workflowPath,
+        "canvas.id": canvasId,
+        "scenario.count": scenarioCount
+      });
+    },
+    emitTabSwitched: (previous2, current) => {
+      var _a;
+      (_a = spanRef.current) == null ? void 0 : _a.addEvent("tab.switched", {
+        "tab.previous": previous2 ?? "none",
+        "tab.current": current
+      });
+    },
+    emitSearchChanged: (query, resultCount) => {
+      var _a;
+      (_a = spanRef.current) == null ? void 0 : _a.addEvent("search.changed", {
+        "search.query": query,
+        "result.count": resultCount
+      });
+    },
+    emitRefreshRequested: () => {
+      var _a;
+      (_a = spanRef.current) == null ? void 0 : _a.addEvent("refresh.requested", {
+        "panel.id": "storyboard-list-panel"
+      });
+    },
+    emitNodeToggled: (nodeId, isOpen) => {
+      var _a;
+      (_a = spanRef.current) == null ? void 0 : _a.addEvent("node.toggled", {
+        "node.id": nodeId,
+        "node.open": isOpen
+      });
+    }
+  }), []);
+}
 const StoryboardListPanel = ({
   context: context2,
   actions,
@@ -99661,8 +99825,11 @@ const StoryboardListPanel = ({
   });
   const [openState, setOpenState] = useState({});
   const handleTreeToggle = useCallback((nodeId, isOpen) => {
+    var _a;
     setOpenState((prev) => ({ ...prev, [nodeId]: isOpen }));
+    (_a = telemetryRef.current) == null ? void 0 : _a.emitNodeToggled(nodeId, isOpen);
   }, []);
+  const telemetryRef = useRef(null);
   const handleTreeNodeClickRef = useRef(null);
   useEffect(() => {
     if (!events) return;
@@ -99766,6 +99933,14 @@ const StoryboardListPanel = ({
     const regular = storyboards.filter((sb) => architectureTypes.includes(sb.canvas.type)).length;
     return { otelCount: otel, staticCount: regular };
   }, [storyboards]);
+  const telemetry = useStoryboardListPanelTelemetry({
+    isLoading,
+    error,
+    storyboardCount: storyboards.length,
+    otelCount,
+    architectureCount: staticCount
+  });
+  telemetryRef.current = telemetry;
   const effectiveCanvasTypeFilter = useMemo(() => {
     if (canvasTypeFilter !== null) {
       return canvasTypeFilter;
@@ -99908,7 +100083,7 @@ const StoryboardListPanel = ({
     return filteredStoryboards.map((storyboard) => storyboard.canvas);
   }, [filteredStoryboards]);
   const handleTreeNodeClick = useCallback((node2, event) => {
-    var _a, _b, _c, _d, _e2, _f;
+    var _a, _b, _c, _d, _e2, _f, _g;
     if ((event == null ? void 0 : event.metaKey) || (event == null ? void 0 : event.ctrlKey)) {
       let filePath;
       if (node2.type === "canvas" && ((_a = node2.canvas) == null ? void 0 : _a.path)) {
@@ -99941,6 +100116,12 @@ const StoryboardListPanel = ({
       }
     } else if (node2.type === "canvas" && node2.canvas) {
       setSelectedNodeId(`canvas:${node2.canvas.id}`);
+      telemetry.emitCanvasSelected(
+        node2.canvas.id,
+        node2.canvas.name,
+        node2.canvas.path,
+        node2.canvas.type
+      );
       if (events) {
         const canvasFileInfo = getCanvasFileInfo(node2.canvas.path);
         events.emit({
@@ -99970,6 +100151,13 @@ const StoryboardListPanel = ({
           console.warn("[StoryboardListPanel] Workflow template not loaded for:", (_f = node2.workflow) == null ? void 0 : _f.path);
           return;
         }
+        telemetry.emitWorkflowSelected(
+          node2.workflow.id,
+          node2.workflow.name,
+          node2.workflow.path,
+          node2.storyboard.canvas.id,
+          ((_g = fullWorkflow.template.scenarios) == null ? void 0 : _g.length) ?? 0
+        );
         events.emit({
           type: "custom",
           source: "storyboard-list-panel",
@@ -99988,7 +100176,7 @@ const StoryboardListPanel = ({
         });
       }
     }
-  }, [events, getCanvasFileInfo, workflows]);
+  }, [events, getCanvasFileInfo, workflows, telemetry]);
   const getNodeFilePath = useCallback((node2) => {
     var _a, _b, _c, _d, _e2;
     if (node2.type === "canvas" && ((_a = node2.canvas) == null ? void 0 : _a.path)) {
@@ -100051,6 +100239,7 @@ const StoryboardListPanel = ({
   }, [handleTreeNodeClick]);
   const handleRefresh = () => {
     setIsRefreshing(true);
+    telemetry.emitRefreshRequested();
     if (events) {
       events.emit({
         type: "canvas:refresh",
@@ -100268,7 +100457,10 @@ const StoryboardListPanel = ({
                 /* @__PURE__ */ jsx(
                   "button",
                   {
-                    onClick: () => setCanvasTypeFilter("regular"),
+                    onClick: () => {
+                      telemetry.emitTabSwitched(canvasTypeFilter, "regular");
+                      setCanvasTypeFilter("regular");
+                    },
                     style: {
                       flex: 1,
                       background: effectiveCanvasTypeFilter === "regular" ? theme2.colors.primary : "transparent",
@@ -100289,7 +100481,10 @@ const StoryboardListPanel = ({
                 /* @__PURE__ */ jsx(
                   "button",
                   {
-                    onClick: () => setCanvasTypeFilter("otel"),
+                    onClick: () => {
+                      telemetry.emitTabSwitched(canvasTypeFilter, "otel");
+                      setCanvasTypeFilter("otel");
+                    },
                     style: {
                       flex: 1,
                       background: effectiveCanvasTypeFilter === "otel" ? theme2.colors.primary : "transparent",
@@ -108620,60 +108815,6 @@ function createMultiCanvasLayout(canvases, options) {
   });
   return { placements };
 }
-const TRACER_NAME = "@industry-theme/principal-view-panels";
-const TRACER_VERSION = "0.11.40";
-function getTracer() {
-  return trace.getTracer(TRACER_NAME, TRACER_VERSION);
-}
-function getActiveSpan() {
-  return trace.getActiveSpan();
-}
-async function withSpan(span, fn) {
-  return context.with(trace.setSpan(context.active(), span), fn);
-}
-async function traced(name2, fn, options) {
-  const tracer = getTracer();
-  const span = tracer.startSpan(name2, options);
-  try {
-    const result = await context.with(
-      trace.setSpan(context.active(), span),
-      () => fn(span)
-    );
-    span.setStatus({ code: SpanStatusCode.OK });
-    return result;
-  } catch (error) {
-    span.setStatus({
-      code: SpanStatusCode.ERROR,
-      message: error instanceof Error ? error.message : String(error)
-    });
-    span.recordException(
-      error instanceof Error ? error : new Error(String(error))
-    );
-    throw error;
-  } finally {
-    span.end();
-  }
-}
-function tracedSync(name2, fn, options) {
-  const tracer = getTracer();
-  const span = tracer.startSpan(name2, options);
-  try {
-    const result = fn(span);
-    span.setStatus({ code: SpanStatusCode.OK });
-    return result;
-  } catch (error) {
-    span.setStatus({
-      code: SpanStatusCode.ERROR,
-      message: error instanceof Error ? error.message : String(error)
-    });
-    span.recordException(
-      error instanceof Error ? error : new Error(String(error))
-    );
-    throw error;
-  } finally {
-    span.end();
-  }
-}
 const panels = [
   {
     metadata: {