@industry-theme/principal-view-panels 0.1.26 → 0.1.27

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

@@ -1 +1 @@
-{"version":3,"file":"PrincipalViewGraphPanel.d.ts","sourceRoot":"","sources":["../../src/panels/PrincipalViewGraphPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAsD/E;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6rCjE,CAAC"}
+{"version":3,"file":"PrincipalViewGraphPanel.d.ts","sourceRoot":"","sources":["../../src/panels/PrincipalViewGraphPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAsD/E;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA4sCjE,CAAC"}

package/dist/panels.bundle.js

@@ -48010,7 +48010,7 @@ function requireNodeInfoPanel() {
     "GitMerge",
     "GitPullRequest"
   ];
-  const NodeInfoPanel$1 = ({ node, typeDefinition, availableNodeTypes, onClose, onDelete, onUpdate }) => {
+  const NodeInfoPanel$1 = ({ node, typeDefinition, availableNodeTypes, onClose, onDelete, onUpdate, onSourceClick }) => {
     var _a, _b, _c, _d, _e2, _f, _g, _h, _i;
     const { theme } = (0, industry_theme_1.useTheme)();
     const nodeColor = ((_a = node.data) == null ? void 0 : _a.color) || (typeDefinition == null ? void 0 : typeDefinition.color) || theme.colors.primary;
@@ -48093,7 +48093,22 @@ function requireNodeInfoPanel() {
       display: "flex",
       alignItems: "center",
       justifyContent: "center"
-    }, children: "×" })] }), ((_e2 = node.data) == null ? void 0 : _e2.description) && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Description" }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px" }, children: String(node.data.description) })] }), sources.length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Sources" }), (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: sources.map((source, index2) => (0, jsx_runtime_1.jsx)("span", { style: {
+    }, children: "×" })] }), ((_e2 = node.data) == null ? void 0 : _e2.description) && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Description" }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px" }, children: String(node.data.description) })] }), sources.length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Sources" }), (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: sources.map((source, index2) => onSourceClick ? (0, jsx_runtime_1.jsx)("button", { onClick: () => onSourceClick(node.id, source), style: {
+      fontSize: "11px",
+      padding: "2px 8px",
+      backgroundColor: theme.colors.muted,
+      borderRadius: "4px",
+      color: theme.colors.textSecondary,
+      border: "none",
+      cursor: "pointer",
+      transition: "background-color 0.15s, color 0.15s"
+    }, onMouseEnter: (e) => {
+      e.currentTarget.style.backgroundColor = theme.colors.primary;
+      e.currentTarget.style.color = theme.colors.background;
+    }, onMouseLeave: (e) => {
+      e.currentTarget.style.backgroundColor = theme.colors.muted;
+      e.currentTarget.style.color = theme.colors.textSecondary;
+    }, children: source }, index2) : (0, jsx_runtime_1.jsx)("span", { style: {
       fontSize: "11px",
       padding: "2px 8px",
       backgroundColor: theme.colors.muted,
@@ -48431,7 +48446,7 @@ function requireGraphRenderer() {
       createdEdges: [],
       deletedEdges: []
     });
-    const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = true, showControls = true, showBackground = true, events = [], onEventProcessed, editable = false, autoUpdateEdgeSides = false, onPendingChangesChange, onEditStateChange, editStateRef }) => {
+    const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = true, showControls = true, showBackground = true, events = [], onEventProcessed, editable = false, autoUpdateEdgeSides = false, onPendingChangesChange, onEditStateChange, editStateRef, onSourceClick }) => {
       const { fitView } = (0, react_2.useReactFlow)();
       const { theme } = (0, industry_theme_1.useTheme)();
       const [animationState, setAnimationState] = (0, react_1.useState)({
@@ -49004,7 +49019,7 @@ function requireGraphRenderer() {
         var _a;
         const nodeData = node.data;
         return ((_a = nodeData == null ? void 0 : nodeData.typeDefinition) == null ? void 0 : _a.color) || theme.colors.secondary;
-      }, nodeBorderRadius: 2, pannable: true, zoomable: true })] }, baseNodesKey), selectedNodeIds.size >= 2 && (0, jsx_runtime_1.jsx)(SelectionSidebar_1.SelectionSidebar, { selectedNodeIds, nodes, nodeTypeDefinitions: configuration.nodeTypes, onClose: onCloseNodeInfoPanel }), selectedEdgeIds.size === 1 && selectedEdge && selectedEdgeTypeDefinition && (0, jsx_runtime_1.jsx)(EdgeInfoPanel_1.EdgeInfoPanel, { edge: selectedEdge, typeDefinition: selectedEdgeTypeDefinition, sourceNodeId: selectedEdge.from, targetNodeId: selectedEdge.to, onClose: onCloseEdgeInfoPanel, onDelete: editable ? handleEdgeDelete : void 0, onUpdateSides: editable ? handleUpdateEdgeSides : void 0 }), selectedNodeIds.size === 1 && selectedNode && selectedNodeTypeDefinition && (0, jsx_runtime_1.jsx)(NodeInfoPanel_1.NodeInfoPanel, { node: selectedNode, typeDefinition: selectedNodeTypeDefinition, availableNodeTypes: configuration.nodeTypes, onClose: onCloseNodeInfoPanel, onDelete: editable ? handleNodeDelete : void 0, onUpdate: editable ? handleNodeUpdate : void 0 }), pendingConnection && (0, jsx_runtime_1.jsxs)("div", { style: {
+      }, nodeBorderRadius: 2, pannable: true, zoomable: true })] }, baseNodesKey), selectedNodeIds.size >= 2 && (0, jsx_runtime_1.jsx)(SelectionSidebar_1.SelectionSidebar, { selectedNodeIds, nodes, nodeTypeDefinitions: configuration.nodeTypes, onClose: onCloseNodeInfoPanel }), selectedEdgeIds.size === 1 && selectedEdge && selectedEdgeTypeDefinition && (0, jsx_runtime_1.jsx)(EdgeInfoPanel_1.EdgeInfoPanel, { edge: selectedEdge, typeDefinition: selectedEdgeTypeDefinition, sourceNodeId: selectedEdge.from, targetNodeId: selectedEdge.to, onClose: onCloseEdgeInfoPanel, onDelete: editable ? handleEdgeDelete : void 0, onUpdateSides: editable ? handleUpdateEdgeSides : void 0 }), selectedNodeIds.size === 1 && selectedNode && selectedNodeTypeDefinition && (0, jsx_runtime_1.jsx)(NodeInfoPanel_1.NodeInfoPanel, { node: selectedNode, typeDefinition: selectedNodeTypeDefinition, availableNodeTypes: configuration.nodeTypes, onClose: onCloseNodeInfoPanel, onDelete: editable ? handleNodeDelete : void 0, onUpdate: editable ? handleNodeUpdate : void 0, onSourceClick }), pendingConnection && (0, jsx_runtime_1.jsxs)("div", { style: {
         position: "absolute",
         top: "50%",
         left: "50%",
@@ -49217,8 +49232,8 @@ function requireGraphRenderer() {
         }, children: (0, jsx_runtime_1.jsx)("p", { children: "No canvas data provided." }) });
       }
       const { configuration, nodes, edges } = canvasData;
-      const { violations, configName, showMinimap, showControls, showBackground, events, onEventProcessed, editable, autoUpdateEdgeSides, onPendingChangesChange } = props;
-      return (0, jsx_runtime_1.jsx)("div", { className, style: { width, height, position: "relative" }, children: (0, jsx_runtime_1.jsx)(react_2.ReactFlowProvider, { children: (0, jsx_runtime_1.jsx)(GraphRendererInner, { configuration, nodes, edges, violations, configName, showMinimap, showControls, showBackground, events, onEventProcessed, editable, autoUpdateEdgeSides, onPendingChangesChange, editStateRef }) }) });
+      const { violations, configName, showMinimap, showControls, showBackground, events, onEventProcessed, editable, autoUpdateEdgeSides, onPendingChangesChange, onSourceClick } = props;
+      return (0, jsx_runtime_1.jsx)("div", { className, style: { width, height, position: "relative" }, children: (0, jsx_runtime_1.jsx)(react_2.ReactFlowProvider, { children: (0, jsx_runtime_1.jsx)(GraphRendererInner, { configuration, nodes, edges, violations, configName, showMinimap, showControls, showBackground, events, onEventProcessed, editable, autoUpdateEdgeSides, onPendingChangesChange, editStateRef, onSourceClick }) }) });
     });
     exports$1.GraphRenderer.displayName = "GraphRenderer";
   })(GraphRenderer);
@@ -53759,6 +53774,18 @@ const PrincipalViewGraphPanel = ({
   const handlePendingChangesChange = useCallback((hasChanges) => {
     setState((prev) => ({ ...prev, hasUnsavedChanges: hasChanges }));
   }, []);
+  const handleSourceClick = useCallback((nodeId, source) => {
+    eventsRef.current.emit({
+      type: "custom",
+      source: "principal-view-graph",
+      timestamp: Date.now(),
+      payload: {
+        action: "sourceClick",
+        nodeId,
+        source
+      }
+    });
+  }, []);
   const toggleCanvasSelector = useCallback(() => {
     setState((prev) => ({ ...prev, showCanvasSelector: !prev.showCanvasSelector }));
   }, []);
@@ -54279,7 +54306,8 @@ const PrincipalViewGraphPanel = ({
           showBackground: true,
           editable: state.isEditMode,
           autoUpdateEdgeSides: state.layoutConfig.autoUpdateEdgeSides,
-          onPendingChangesChange: handlePendingChangesChange
+          onPendingChangesChange: handlePendingChangesChange,
+          onSourceClick: handleSourceClick
         },
         `graph-${state.layoutVersion}`
       ) }),