@industry-theme/principal-view-panels 0.12.63 → 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

@@ -88803,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";
@@ -95115,7 +95119,9 @@ const CanvasEditorPanel = ({
   traceMatchInfo,
   selectedScenarioId: selectedScenarioIdProp,
   selectedTrace,
-  onClosePanel
+  onClosePanel,
+  spansCanvasPath,
+  workflowSpanPattern
 }) => {
   var _a, _b, _c, _d;
   const { theme: theme2 } = useTheme();
@@ -95125,6 +95131,7 @@ const CanvasEditorPanel = ({
   const [state, setState] = useState({
     canvas: null,
     library: null,
+    spansCanvas: null,
     loading: true,
     error: null,
     showLegend: false,
@@ -95179,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 }));
@@ -95219,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
@@ -95233,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 }));
   }, []);
@@ -95996,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,