@industry-theme/principal-view-panels 0.10.31 → 0.10.33

package/dist/panels/execution-viewer/WorkflowTemplatePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WorkflowTemplatePanel.d.ts","sourceRoot":"","sources":["../../../src/panels/execution-viewer/WorkflowTemplatePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EACV,gBAAgB,EAChB,gBAAgB,EAChB,mBAAmB,EACnB,cAAc,EACf,MAAM,mCAAmC,CAAC;AAE3C,UAAU,0BAA0B;IAClC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/B,mBAAmB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC5C,oBAAoB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9C,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACxD,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC5E;AAED;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA2KtE,CAAC"}
+{"version":3,"file":"WorkflowTemplatePanel.d.ts","sourceRoot":"","sources":["../../../src/panels/execution-viewer/WorkflowTemplatePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EACV,gBAAgB,EAChB,gBAAgB,EAChB,mBAAmB,EACnB,cAAc,EACf,MAAM,mCAAmC,CAAC;AAE3C,UAAU,0BAA0B;IAClC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/B,mBAAmB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC5C,oBAAoB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9C,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACxD,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC5E;AAED;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAqItE,CAAC"}

package/dist/panels.bundle.js

@@ -86434,29 +86434,10 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
   const otelInfo = nodeData == null ? void 0 : nodeData.otel;
   const description = nodeData == null ? void 0 : nodeData.description;
   const sources = nodeData == null ? void 0 : nodeData.sources;
-  const getOtelBadgeColor = (kind) => {
-    switch (kind) {
-      case "type":
-        return "#4A90E2";
-      // Blue
-      case "service":
-        return "#7ED321";
-      // Green
-      case "instance":
-        return "#9B59B6";
-      // Purple
-      case "event":
-        return "#F59E0B";
-      // Amber
-      default:
-        return "#888";
-    }
-  };
-  const renderOtelBadge = () => {
-    if (!(otelInfo == null ? void 0 : otelInfo.kind))
+  const renderSourcesBadge = () => {
+    const sources2 = nodeData == null ? void 0 : nodeData.sources;
+    if (!sources2 || sources2.length === 0)
       return null;
-    const badgeColor = getOtelBadgeColor(otelInfo.kind);
-    const label = otelInfo.kind.charAt(0).toUpperCase();
     return jsx("div", { style: {
       position: "absolute",
       top: -6,
@@ -86464,7 +86445,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
       width: 18,
       height: 18,
       borderRadius: "50%",
-      backgroundColor: badgeColor,
+      backgroundColor: "#10b981",
       color: "white",
       fontSize: theme2.fontSizes[0],
       fontWeight: theme2.fontWeights.bold,
@@ -86475,12 +86456,28 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
       boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
       zIndex: 10,
       opacity: isActive ? 1 : 0.1
-    }, title: `${otelInfo.kind}${otelInfo.category ? ` (${otelInfo.category})` : ""}`, children: label });
+    }, title: `Sources: ${sources2.join(", ")}`, children: "S" });
   };
-  const renderSourcesBadge = () => {
-    const sources2 = nodeData == null ? void 0 : nodeData.sources;
-    if (!sources2 || sources2.length === 0)
+  const renderStatusBadge = () => {
+    const status2 = nodeData == null ? void 0 : nodeData.status;
+    if (!status2)
       return null;
+    const statusColors = {
+      draft: "#6b7280",
+      approved: "#3b82f6",
+      implemented: "#10b981"
+      // Green
+    };
+    const statusLabels = {
+      draft: "D",
+      approved: "A",
+      implemented: "I"
+    };
+    const statusTitles = {
+      draft: "Draft - Design phase",
+      approved: "Approved - Ready for implementation",
+      implemented: "Implemented - Code exists"
+    };
     return jsx("div", { style: {
       position: "absolute",
       top: -6,
@@ -86488,7 +86485,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
       width: 18,
       height: 18,
       borderRadius: "50%",
-      backgroundColor: "#10b981",
+      backgroundColor: statusColors[status2],
       color: "white",
       fontSize: theme2.fontSizes[0],
       fontWeight: theme2.fontWeights.bold,
@@ -86499,7 +86496,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
       boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
       zIndex: 10,
       opacity: isActive ? 1 : 0.1
-    }, title: `Sources: ${sources2.join(", ")}`, children: "S" });
+    }, title: statusTitles[status2], children: statusLabels[status2] });
   };
   if (!typeDefinition) {
     return jsx("div", { style: { padding: "10px", border: "2px solid red", borderRadius: "4px" }, children: jsx("div", { style: { fontSize: "12px", color: "red" }, children: "Error: Missing node type definition" }) });
@@ -86510,7 +86507,9 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
   const stateColor = state && (((_a = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _a.color) || ((_c = (_b = typeDefinition.states) == null ? void 0 : _b[state]) == null ? void 0 : _c.color));
   const fillColor = stateColor || baseColor;
   const nodeDataStroke = nodeData.stroke;
-  const strokeColor = nodeDataStroke || typeDefinition.stroke || fillColor;
+  const baseStrokeColor = nodeDataStroke || typeDefinition.stroke || fillColor;
+  const status = nodeData == null ? void 0 : nodeData.status;
+  const strokeColor = baseStrokeColor;
   const color2 = fillColor;
   const displayName = nodeProps.name;
   const eventData = nodeData == null ? void 0 : nodeData.event;
@@ -86540,11 +86539,12 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
   const animationClass = getAnimationClass();
   const isGroup = nodeData.canvasType === "group";
   const getShapeStyles = () => {
+    const borderStyle = status === "draft" ? "dotted" : status === "approved" ? "dashed" : "solid";
     const baseStyles = {
       padding: "12px 16px",
       backgroundColor: isGroup ? "rgba(255, 255, 255, 0.7)" : hexToLightColor(fillColor),
       color: "#000",
-      border: `2px solid ${hasViolations ? "#D0021B" : strokeColor}`,
+      border: `2px ${borderStyle} ${hasViolations ? "#D0021B" : strokeColor}`,
       fontSize: theme2.fontSizes[0],
       fontWeight: theme2.fontWeights.medium,
       fontFamily: theme2.fonts.body,
@@ -86717,7 +86717,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"
-  }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderSourcesBadge(), renderOtelBadge(), 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: {
+  }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderStatusBadge(), renderSourcesBadge(), 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: {
     fontSize: theme2.fontSizes[0],
     fontFamily: theme2.fonts.body,
     backgroundColor: color2,
@@ -86736,7 +86736,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"
-  }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderSourcesBadge(), renderOtelBadge(), 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: {
+  }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderStatusBadge(), renderSourcesBadge(), 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: {
     fontSize: theme2.fontSizes[0],
     fontFamily: theme2.fonts.body,
     backgroundColor: color2,
@@ -86749,7 +86749,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
     fontFamily: theme2.fonts.body,
     color: "#D0021B",
     fontWeight: theme2.fontWeights.bold
-  }, children: "⚠️" })] }) }), tooltipsEnabled && jsx(NodeTooltip, { description, otel: otelInfo, sources, visible: showTooltip, nodeRef })] }) : jsxs("div", { ref: nodeRef, style: { position: "relative", width: "100%", height: "100%" }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderSourcesBadge(), renderOtelBadge(), jsx("div", { style: getShapeStyles(), className: animationClass, children: jsxs("div", { style: {
+  }, children: "⚠️" })] }) }), tooltipsEnabled && jsx(NodeTooltip, { description, otel: otelInfo, sources, visible: showTooltip, nodeRef })] }) : jsxs("div", { ref: nodeRef, style: { position: "relative", width: "100%", height: "100%" }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderStatusBadge(), renderSourcesBadge(), jsx("div", { style: getShapeStyles(), className: animationClass, children: jsxs("div", { style: {
     ...isGroup ? { width: "100%" } : {}
   }, children: [isGroup ? jsxs("div", { style: {
     display: "flex",
@@ -97275,26 +97275,6 @@ const WorkflowTemplatePanel = ({
     }
     return eventNames;
   };
-  const getScenarioSources = (scenario) => {
-    if (!(canvas == null ? void 0 : canvas.nodes)) return [];
-    const eventNames = getScenarioEventNames(scenario);
-    const sources = /* @__PURE__ */ new Set();
-    canvas.nodes.forEach((node2) => {
-      var _a2, _b, _c, _d, _e2;
-      const eventName = ((_b = (_a2 = node2.pv) == null ? void 0 : _a2.event) == null ? void 0 : _b.name) || ("metadata" in node2 ? (_c = node2.metadata) == null ? void 0 : _c["pv.event"] : void 0);
-      if (eventName && typeof eventName === "string" && eventNames.includes(eventName)) {
-        const nodeSources = ((_d = node2.pv) == null ? void 0 : _d.sources) || ("metadata" in node2 ? (_e2 = node2.metadata) == null ? void 0 : _e2["pv.sources"] : void 0);
-        if (Array.isArray(nodeSources)) {
-          nodeSources.forEach((src) => {
-            if (typeof src === "string") {
-              sources.add(src);
-            }
-          });
-        }
-      }
-    });
-    return Array.from(sources).sort();
-  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -97335,7 +97315,6 @@ const WorkflowTemplatePanel = ({
           const matchingExecutions = availableExecutions.filter(
             (exec) => executionScenarioMap[exec.id] === scenarioId
           );
-          const sources = getScenarioSources(scenario);
           return /* @__PURE__ */ jsx(
             "div",
             {
@@ -97374,15 +97353,12 @@ const WorkflowTemplatePanel = ({
                       /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: theme2.fontSizes[1], fontWeight: 600 }, children: scenarioId.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ") }),
                       matchingExecutions.length > 0 && /* @__PURE__ */ jsx(CircleCheck, { size: 14, style: { color: "#10b981", flexShrink: 0 } })
                     ] }),
-                    sources.length > 0 && /* @__PURE__ */ jsx("div", { style: {
+                    scenario.description && /* @__PURE__ */ jsx("div", { style: {
                       marginTop: "6px",
-                      fontSize: theme2.fontSizes[0],
-                      color: theme2.colors.textTertiary || theme2.colors.textSecondary,
-                      fontFamily: "monospace"
-                    }, children: sources.map((source2) => /* @__PURE__ */ jsxs("div", { style: { marginTop: "2px", padding: "4px 0", display: "flex", alignItems: "center" }, children: [
-                      /* @__PURE__ */ jsx(FileCode, { size: 14, style: { marginRight: "4px", flexShrink: 0 } }),
-                      source2
-                    ] }, source2)) })
+                      fontSize: theme2.fontSizes[1],
+                      color: theme2.colors.textSecondary,
+                      lineHeight: theme2.lineHeights.body
+                    }, children: scenario.description })
                   ] })
                 }
               )