@industry-theme/principal-view-panels 0.12.64 → 0.12.65

package/dist/panels/CanvasEditorPanel.d.ts

@@ -62,6 +62,18 @@ export interface CanvasEditorPanelProps extends CanvasEditorPanelPropsTyped {
      * When provided, displays a close button (X) in the header.
      */
     onClosePanel?: () => void;
+    /**
+     * Path to a .spans.canvas file (relative to repository root).
+     * When provided, span colors from this file are used to color event nodes.
+     * Span colors become the FILL color for nodes.
+     */
+    spansCanvasPath?: string | null;
+    /**
+     * Span pattern to use for coloring event nodes.
+     * Should match a spanPattern defined in the spansCanvas.
+     * When provided with spansCanvasPath, events are colored with the span's color.
+     */
+    workflowSpanPattern?: string | null;
 }
 /**
  * Principal View Graph Panel

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

@@ -1 +1 @@
-{"version":3,"file":"CanvasEditorPanel.d.ts","sourceRoot":"","sources":["../../src/panels/CanvasEditorPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAI5D,OAAO,KAAK,EAAyE,gBAAgB,EAA+C,MAAM,mCAAmC,CAAC;AAC9L,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAKxE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAiCrE;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,2BAA2B;IACzE;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAEjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAE3C;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEnC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B;;OAEG;IACH,gBAAgB,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAEnC;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC;QACrB,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;QAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC,CAAC;IAEH;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEnC;;;;OAIG;IACH,aAAa,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAEvC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6iD9D,CAAC"}
+{"version":3,"file":"CanvasEditorPanel.d.ts","sourceRoot":"","sources":["../../src/panels/CanvasEditorPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAI5D,OAAO,KAAK,EAAyE,gBAAgB,EAA+C,MAAM,mCAAmC,CAAC;AAC9L,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAKxE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAkCrE;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,2BAA2B;IACzE;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAEjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAE3C;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEnC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B;;OAEG;IACH,gBAAgB,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAEnC;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC;QACrB,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;QAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC,CAAC;IAEH;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEnC;;;;OAIG;IACH,aAAa,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAEvC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEhC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACrC;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAmkD9D,CAAC"}

package/dist/panels.bundle.js

@@ -88539,12 +88539,11 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     }, 150);
     return () => clearTimeout(timeoutId);
   }, [fitViewToNodeIdsKey, fitViewToNodeIds, fitViewPadding, fitView2, fitViewDuration, getNodes, fitBounds]);
-  const hasInitialViewport = !!initialViewport;
   return jsxs(GraphEditProvider, { value: graphEditContextValue, children: [jsxs(index$2, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes, edgeTypes, minZoom: 0.1, maxZoom: 4, defaultViewport: initialViewport, defaultEdgeOptions: { type: "custom" }, onEdgeClick, onNodeClick, onNodeDoubleClick, onNodeDrag: handleNodeDrag, onNodeDragStop: handleNodeDragStop, proOptions: { hideAttribution: true }, nodesDraggable: editable || draggableNodeIds && draggableNodeIds.size > 0, elementsSelectable: editable, selectNodesOnDrag: false, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 25, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, onPaneClick, onSelectionChange: handleSelectionChange, panOnDrag: !editable, panOnScroll: true, zoomOnScroll: false, zoomOnPinch: true, zoomOnDoubleClick: false, selectionOnDrag: false, selectionKeyCode: null, multiSelectionKeyCode: "Shift", children: [showBackground && jsx(Background, { color: backgroundVariant === "dots" ? theme2.colors.border : theme2.colors.textMuted, gap: backgroundGap ?? (backgroundVariant === "dots" ? 16 : 50), size: backgroundVariant === "dots" ? 1 : 0.5, variant: backgroundVariant === "dots" ? BackgroundVariant.Dots : backgroundVariant === "lines" ? BackgroundVariant.Lines : BackgroundVariant.Cross }), showControls && jsx(Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && jsx(MiniMap, { nodeColor: (node2) => {
     var _a;
     const nodeData = node2.data;
     return ((_a = nodeData == null ? void 0 : nodeData.typeDefinition) == null ? void 0 : _a.color) || theme2.colors.secondary;
-  }, nodeBorderRadius: 2, pannable: true, zoomable: true }), showCenterIndicator && jsx(CenterIndicator, { color: theme2.colors.textMuted }), editable && alignmentGuides.length > 0 && jsx(AlignmentGuidesOverlay, { guides: alignmentGuides, color: theme2.colors.primary })] }, `${baseNodesKey}-${baseEdgesKey}-${hasInitialViewport ? "iv" : "no-iv"}`), pendingConnection && jsxs("div", { style: {
+  }, nodeBorderRadius: 2, pannable: true, zoomable: true }), showCenterIndicator && jsx(CenterIndicator, { color: theme2.colors.textMuted }), editable && alignmentGuides.length > 0 && jsx(AlignmentGuidesOverlay, { guides: alignmentGuides, color: theme2.colors.primary })] }, `${baseNodesKey}-${baseEdgesKey}`), pendingConnection && jsxs("div", { style: {
     position: "absolute",
     top: "50%",
     left: "50%",
@@ -88804,6 +88803,10 @@ const GraphRenderer = forwardRef((props2, ref) => {
   }
   const { configuration, nodes, edges } = canvasData;
   const { violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, onNodeClick, fitViewToNodeIds, fitViewPadding, draggableNodeIds, onNodeDragStop, onCopy } = props2;
+  const isWaitingForViewport = (containerWidth !== void 0 || containerHeight !== void 0) && !initialViewport;
+  if (isWaitingForViewport) {
+    return jsx("div", { ref: containerRef, className, style: { width, height, position: "relative" } });
+  }
   return jsx("div", { ref: containerRef, className, style: { width, height, position: "relative" }, children: jsx(TooltipPortalContext.Provider, { value: portalTarget, children: jsx(ReactFlowProvider, { children: jsx(GraphRendererInner, { configuration, nodes, edges, violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, editStateRef, resetVisualStateRef, undoRedoFunctionsRef, pushHistory, clearHistory, undoFromStack, redoFromStack, onNodeClick, fitViewToNodeIds, fitViewPadding, draggableNodeIds, onNodeDragStop, onCopy, initialViewport }) }) }) });
 });
 GraphRenderer.displayName = "GraphRenderer";
@@ -95116,7 +95119,9 @@ const CanvasEditorPanel = ({
   traceMatchInfo,
   selectedScenarioId: selectedScenarioIdProp,
   selectedTrace,
-  onClosePanel
+  onClosePanel,
+  spansCanvasPath,
+  workflowSpanPattern
 }) => {
   var _a, _b, _c, _d;
   const { theme: theme2 } = useTheme();
@@ -95126,6 +95131,7 @@ const CanvasEditorPanel = ({
   const [state, setState] = useState({
     canvas: null,
     library: null,
+    spansCanvas: null,
     loading: true,
     error: null,
     showLegend: false,
@@ -95180,7 +95186,7 @@ const CanvasEditorPanel = ({
   const [currentSearchIndex, setCurrentSearchIndex] = useState(0);
   const loadConfiguration = useCallback(async () => {
     if (!canvasPath) {
-      setState((prev) => ({ ...prev, canvas: null, library: null, loading: false, error: null }));
+      setState((prev) => ({ ...prev, canvas: null, library: null, spansCanvas: null, loading: false, error: null }));
       return;
     }
     setState((prev) => ({ ...prev, loading: true, error: null }));
@@ -95220,10 +95226,23 @@ const CanvasEditorPanel = ({
           }
         }
       }
+      let spansCanvas = null;
+      if (spansCanvasPath) {
+        try {
+          const spansFullPath = `${repositoryPath}/${spansCanvasPath}`;
+          const spansContent = await readFile(spansFullPath);
+          if (spansContent && typeof spansContent === "string") {
+            spansCanvas = ConfigLoader.parseCanvas(spansContent);
+          }
+        } catch (spansError) {
+          console.warn("[PrincipalView] Failed to load spans canvas:", spansError);
+        }
+      }
       setState((prev) => ({
         ...prev,
         canvas,
         library,
+        spansCanvas,
         loading: false,
         error: null,
         hasUnsavedChanges: false
@@ -95234,11 +95253,12 @@ const CanvasEditorPanel = ({
         ...prev,
         canvas: null,
         library: null,
+        spansCanvas: null,
         loading: false,
         error: error.message
       }));
     }
-  }, [canvasPath]);
+  }, [canvasPath, spansCanvasPath]);
   const toggleLegend = useCallback(() => {
     setState((prev) => ({ ...prev, showLegend: !prev.showLegend }));
   }, []);
@@ -95997,6 +96017,8 @@ const CanvasEditorPanel = ({
                 ref: graphRef,
                 canvas: state.canvas,
                 library: state.library ?? void 0,
+                spansCanvas: state.spansCanvas ?? void 0,
+                workflowSpanPattern: workflowSpanPattern ?? void 0,
                 width: "100%",
                 height: "100%",
                 editable: state.isEditMode,