@industry-theme/principal-view-panels 0.12.46 → 0.12.47

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

@@ -1 +1 @@
-{"version":3,"file":"TraceListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/TraceListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,wBAAwB,EAAwB,MAAM,UAAU,CAAC;AAkB/E;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAqjD7D,CAAC"}
+{"version":3,"file":"TraceListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/TraceListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,wBAAwB,EAAwB,MAAM,UAAU,CAAC;AAmB/E;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAujD7D,CAAC"}

package/dist/panels.bundle.js

@@ -86710,12 +86710,16 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
   const eventData = nodeData == null ? void 0 : nodeData.event;
   const eventName = eventData == null ? void 0 : eventData.name;
   const showEventName = eventName && eventName !== 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: {
     fontSize: theme2.fontSizes[0] * 0.75,
     color: "rgba(0, 0, 0, 0.5)",
     marginTop: "2px",
     fontFamily: theme2.fonts.monospace
-  }, children: eventName })] });
+  }, children: renderWithDotBreaks(eventName) })] });
   const icon = nodeData.icon || state && (((_e2 = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _e2.icon) || ((_g = (_f = typeDefinition.states) == null ? void 0 : _f[state]) == null ? void 0 : _g.icon)) || typeDefinition.icon;
   const getAnimationClass = () => {
     switch (animationType) {
@@ -87313,6 +87317,56 @@ function convertToXYFlowEdges(edges, configuration, violations = []) {
     };
   });
 }
+const MAX_HISTORY_SIZE = 50;
+function useUndoRedo() {
+  const undoStackRef = useRef([]);
+  const redoStackRef = useRef([]);
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+  const updateCanStates = useCallback(() => {
+    setCanUndo(undoStackRef.current.length > 0);
+    setCanRedo(redoStackRef.current.length > 0);
+  }, []);
+  const pushHistory = useCallback((entries) => {
+    if (entries.length === 0)
+      return;
+    undoStackRef.current.push(entries);
+    if (undoStackRef.current.length > MAX_HISTORY_SIZE) {
+      undoStackRef.current.shift();
+    }
+    redoStackRef.current = [];
+    updateCanStates();
+  }, [updateCanStates]);
+  const undo = useCallback(() => {
+    const batch = undoStackRef.current.pop();
+    if (!batch)
+      return null;
+    redoStackRef.current.push(batch);
+    updateCanStates();
+    return batch;
+  }, [updateCanStates]);
+  const redo = useCallback(() => {
+    const batch = redoStackRef.current.pop();
+    if (!batch)
+      return null;
+    undoStackRef.current.push(batch);
+    updateCanStates();
+    return batch;
+  }, [updateCanStates]);
+  const clearHistory = useCallback(() => {
+    undoStackRef.current = [];
+    redoStackRef.current = [];
+    updateCanStates();
+  }, [updateCanStates]);
+  return {
+    canUndo,
+    canRedo,
+    undo,
+    redo,
+    pushHistory,
+    clearHistory
+  };
+}
 const TooltipPortalContext = createContext(null);
 const nodeTypes = { custom: CustomNode };
 const edgeTypes = { custom: CustomEdge };
@@ -87362,7 +87416,7 @@ const CenterIndicator = ({ color: color2 }) => {
     zIndex: 5
   }, children: [jsx("line", { x1: screenX, y1: screenY - size, x2: screenX, y2: screenY + size, stroke: color2, strokeWidth, opacity: 0.7 }), jsx("line", { x1: screenX - size, y1: screenY, x2: screenX + size, y2: screenY, stroke: color2, strokeWidth, opacity: 0.7 }), jsx("circle", { cx: screenX, cy: screenY, r: 3, fill: color2, opacity: 0.7 })] });
 };
-const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = false, showControls = true, showBackground = true, backgroundVariant = "lines", backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, activeNodeIds, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, resetVisualStateRef, onNodeClick: onNodeClickProp, fitViewToNodeIds, fitViewPadding = 0.2, draggableNodeIds, onNodeDragStop: onNodeDragStopProp, onCopy }) => {
+const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = false, showControls = true, showBackground = true, backgroundVariant = "lines", backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, activeNodeIds, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, resetVisualStateRef, undoRedoFunctionsRef, pushHistory, clearHistory, undoFromStack, redoFromStack, onNodeClick: onNodeClickProp, fitViewToNodeIds, fitViewPadding = 0.2, draggableNodeIds, onNodeDragStop: onNodeDragStopProp, onCopy }) => {
   const { fitView: fitView2, fitBounds, getNodes } = useReactFlow();
   const updateNodeInternals2 = useUpdateNodeInternals();
   const { theme: theme2 } = useTheme();
@@ -87433,6 +87487,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
       onEditStateChange == null ? void 0 : onEditStateChange(editStateRef.current);
       onPendingChangesChange == null ? void 0 : onPendingChangesChange(false);
       setAnimationState({ nodeAnimations: {}, edgeAnimations: {} });
+      clearHistory();
     }
   }, [propNodes, propEdges, editStateRef, onEditStateChange, onPendingChangesChange]);
   const propNodesRef = useRef(propNodes);
@@ -87446,6 +87501,8 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
   }, [propNodes, draggableNodeIds]);
   const nodes = localNodes;
   const edges = editable ? localEdges : propEdges;
+  const xyflowNodesRef = useRef([]);
+  const dragStartPositionsRef = useRef(/* @__PURE__ */ new Map());
   const checkHasChanges = useCallback((state) => {
     return state.positionChanges.size > 0 || state.dimensionChanges.size > 0 || state.nodeUpdates.size > 0 || state.deletedNodeIds.size > 0 || state.createdEdges.length > 0 || state.deletedEdges.length > 0;
   }, []);
@@ -87459,12 +87516,22 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
   const handleNodeResizeEnd = useCallback((nodeId, dimensions) => {
     if (!editable)
       return;
+    const currentNode = xyflowNodesRef.current.find((n) => n.id === nodeId);
+    const beforeDimensions = currentNode ? { width: currentNode.width ?? 0, height: currentNode.height ?? 0 } : { width: 0, height: 0 };
+    pushHistory([
+      {
+        type: "dimension",
+        nodeId,
+        before: beforeDimensions,
+        after: dimensions
+      }
+    ]);
     updateEditState((prev) => {
       const newDimensions = new Map(prev.dimensionChanges);
       newDimensions.set(nodeId, dimensions);
       return { ...prev, dimensionChanges: newDimensions };
     });
-  }, [editable, updateEditState]);
+  }, [editable, updateEditState, pushHistory]);
   const graphEditContextValue = useMemo(() => ({
     onNodeResizeEnd: handleNodeResizeEnd
   }), [handleNodeResizeEnd]);
@@ -87660,18 +87727,25 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
   }, [editable]);
   const createEdge = useCallback((from, to, type2, sourceHandle, targetHandle) => {
     const edgeId = `${from}-${to}-${type2}-${Date.now()}`;
+    const now2 = Date.now();
     const newEdge = {
       id: edgeId,
       type: type2,
       from,
       to,
       data: {},
-      createdAt: Date.now(),
-      updatedAt: Date.now(),
+      createdAt: now2,
+      updatedAt: now2,
       sourceHandle,
       targetHandle
     };
     setLocalEdges((prev) => [...prev, newEdge]);
+    pushHistory([
+      {
+        type: "edgeCreate",
+        edge: newEdge
+      }
+    ]);
     updateEditState((prev) => ({
       ...prev,
       createdEdges: [
@@ -87679,7 +87753,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         { id: edgeId, from, to, type: type2, sourceHandle, targetHandle }
       ]
     }));
-  }, [updateEditState]);
+  }, [updateEditState, pushHistory]);
   const handleConnect = useCallback((connection) => {
     if (!editable || !connection.source || !connection.target)
       return;
@@ -87945,6 +88019,9 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     return edges.map((e) => e.id).sort().join(",");
   }, [edges]);
   const [xyflowLocalNodes, setXyflowLocalNodes] = useState(xyflowNodesBase);
+  useEffect(() => {
+    xyflowNodesRef.current = xyflowLocalNodes;
+  }, [xyflowLocalNodes]);
   const prevBaseNodesKeyRef = useRef(baseNodesKey);
   useEffect(() => {
     if (prevBaseNodesKeyRef.current !== baseNodesKey) {
@@ -88006,6 +88083,128 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
       onNodeDragStopProp(node2.id, node2.position);
     }
   }, [onNodeDragStopProp]);
+  const applyUndo = useCallback(() => {
+    const batch = undoFromStack();
+    if (!batch)
+      return;
+    for (const entry of batch.slice().reverse()) {
+      switch (entry.type) {
+        case "position":
+          setXyflowLocalNodes((nodes2) => nodes2.map((n) => n.id === entry.nodeId ? { ...n, position: entry.before } : n));
+          updateEditState((prev) => {
+            const newPositions = new Map(prev.positionChanges);
+            newPositions.set(entry.nodeId, entry.before);
+            return { ...prev, positionChanges: newPositions };
+          });
+          break;
+        case "dimension":
+          setXyflowLocalNodes((nodes2) => nodes2.map((n) => n.id === entry.nodeId ? { ...n, width: entry.before.width, height: entry.before.height } : n));
+          updateEditState((prev) => {
+            const newDimensions = new Map(prev.dimensionChanges);
+            newDimensions.set(entry.nodeId, entry.before);
+            return { ...prev, dimensionChanges: newDimensions };
+          });
+          break;
+        case "edgeCreate":
+          setLocalEdges((edges2) => edges2.filter((e) => e.id !== entry.edge.id));
+          updateEditState((prev) => ({
+            ...prev,
+            createdEdges: prev.createdEdges.filter((e) => e.id !== entry.edge.id)
+          }));
+          break;
+        case "edgeDelete":
+          setLocalEdges((edges2) => [...edges2, entry.edge]);
+          updateEditState((prev) => ({
+            ...prev,
+            deletedEdges: prev.deletedEdges.filter((e) => e.id !== entry.edge.id)
+          }));
+          break;
+      }
+    }
+  }, [undoFromStack, updateEditState]);
+  const applyRedo = useCallback(() => {
+    const batch = redoFromStack();
+    if (!batch)
+      return;
+    for (const entry of batch) {
+      switch (entry.type) {
+        case "position":
+          setXyflowLocalNodes((nodes2) => nodes2.map((n) => n.id === entry.nodeId ? { ...n, position: entry.after } : n));
+          updateEditState((prev) => {
+            const newPositions = new Map(prev.positionChanges);
+            newPositions.set(entry.nodeId, entry.after);
+            return { ...prev, positionChanges: newPositions };
+          });
+          break;
+        case "dimension":
+          setXyflowLocalNodes((nodes2) => nodes2.map((n) => n.id === entry.nodeId ? { ...n, width: entry.after.width, height: entry.after.height } : n));
+          updateEditState((prev) => {
+            const newDimensions = new Map(prev.dimensionChanges);
+            newDimensions.set(entry.nodeId, entry.after);
+            return { ...prev, dimensionChanges: newDimensions };
+          });
+          break;
+        case "edgeCreate":
+          setLocalEdges((edges2) => [...edges2, entry.edge]);
+          updateEditState((prev) => ({
+            ...prev,
+            createdEdges: [
+              ...prev.createdEdges,
+              {
+                id: entry.edge.id,
+                from: entry.edge.from,
+                to: entry.edge.to,
+                type: entry.edge.type,
+                sourceHandle: entry.edge.sourceHandle,
+                targetHandle: entry.edge.targetHandle
+              }
+            ]
+          }));
+          break;
+        case "edgeDelete":
+          setLocalEdges((edges2) => edges2.filter((e) => e.id !== entry.edge.id));
+          updateEditState((prev) => ({
+            ...prev,
+            deletedEdges: [
+              ...prev.deletedEdges,
+              {
+                id: entry.edge.id,
+                from: entry.edge.from,
+                to: entry.edge.to,
+                type: entry.edge.type
+              }
+            ]
+          }));
+          break;
+      }
+    }
+  }, [redoFromStack, updateEditState]);
+  useEffect(() => {
+    if (!editable)
+      return;
+    const handleKeyDown = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "z") {
+        e.preventDefault();
+        if (e.shiftKey) {
+          applyRedo();
+        } else {
+          applyUndo();
+        }
+      }
+      if (e.ctrlKey && e.key === "y") {
+        e.preventDefault();
+        applyRedo();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [editable, applyUndo, applyRedo]);
+  useEffect(() => {
+    undoRedoFunctionsRef.current = {
+      applyUndo,
+      applyRedo
+    };
+  }, [applyUndo, applyRedo, undoRedoFunctionsRef]);
   const handleNodesChange = useCallback((changes) => {
     const hasDraggableNodes2 = draggableNodeIds && draggableNodeIds.size > 0;
     if (!editable && !hasDraggableNodes2)
@@ -88050,8 +88249,35 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         }));
       });
     }
-    const positionChanges = changes.filter((change) => change.type === "position" && "position" in change && change.position !== void 0 && "dragging" in change && change.dragging === false);
+    const dragStartChanges = changes.filter((change) => change.type === "position" && "id" in change && "dragging" in change && change.dragging === true);
+    for (const change of dragStartChanges) {
+      if (!dragStartPositionsRef.current.has(change.id)) {
+        const currentNode = xyflowNodesRef.current.find((n) => n.id === change.id);
+        if (currentNode) {
+          dragStartPositionsRef.current.set(change.id, {
+            x: currentNode.position.x,
+            y: currentNode.position.y
+          });
+        }
+      }
+    }
+    const positionChanges = changes.filter((change) => change.type === "position" && "id" in change && "position" in change && change.position !== void 0 && "dragging" in change && change.dragging === false);
     if (positionChanges.length > 0) {
+      const historyEntries = [];
+      for (const change of positionChanges) {
+        const beforePos = dragStartPositionsRef.current.get(change.id) ?? { x: 0, y: 0 };
+        historyEntries.push({
+          type: "position",
+          nodeId: change.id,
+          before: beforePos,
+          after: {
+            x: Math.round(change.position.x),
+            y: Math.round(change.position.y)
+          }
+        });
+        dragStartPositionsRef.current.delete(change.id);
+      }
+      pushHistory(historyEntries);
       updateEditState((prev) => {
         const newPositions = new Map(prev.positionChanges);
         for (const change of positionChanges) {
@@ -88063,7 +88289,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         return { ...prev, positionChanges: newPositions };
       });
     }
-  }, [editable, updateEditState, selectedNodeIds, draggableNodeIds]);
+  }, [editable, updateEditState, selectedNodeIds, draggableNodeIds, pushHistory]);
   const xyflowEdgesBase = useMemo(() => {
     const converted = convertToXYFlowEdges(edges, configuration, violations);
     const filtered = converted.filter((edge) => {
@@ -88349,6 +88575,8 @@ const GraphRenderer = forwardRef((props2, ref) => {
   const canvasData = useCanvasToLegacy(canvas, library);
   const editStateRef = useRef(createEmptyEditState());
   const resetVisualStateRef = useRef(null);
+  const { canUndo: canUndoState, canRedo: canRedoState, undo: undoFromStack, redo: redoFromStack, pushHistory, clearHistory } = useUndoRedo();
+  const undoRedoFunctionsRef = useRef(null);
   useImperativeHandle(ref, () => ({
     getPendingChanges: () => {
       const state = editStateRef.current;
@@ -88381,12 +88609,23 @@ const GraphRenderer = forwardRef((props2, ref) => {
       var _a;
       editStateRef.current = createEmptyEditState();
       (_a = resetVisualStateRef.current) == null ? void 0 : _a.call(resetVisualStateRef);
+      clearHistory();
     },
     hasUnsavedChanges: () => {
       const state = editStateRef.current;
       return state.positionChanges.size > 0 || state.dimensionChanges.size > 0 || state.nodeUpdates.size > 0 || state.deletedNodeIds.size > 0 || state.createdEdges.length > 0 || state.deletedEdges.length > 0;
+    },
+    canUndo: () => canUndoState,
+    canRedo: () => canRedoState,
+    undo: () => {
+      var _a;
+      return (_a = undoRedoFunctionsRef.current) == null ? void 0 : _a.applyUndo();
+    },
+    redo: () => {
+      var _a;
+      return (_a = undoRedoFunctionsRef.current) == null ? void 0 : _a.applyRedo();
     }
-  }), []);
+  }), [canUndoState, canRedoState, clearHistory]);
   if (!canvasData) {
     return jsx("div", { className, style: {
       width,
@@ -88400,7 +88639,7 @@ 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;
-  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, onNodeClick, fitViewToNodeIds, fitViewPadding, draggableNodeIds, onNodeDragStop, onCopy }) }) }) });
+  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 }) }) }) });
 });
 GraphRenderer.displayName = "GraphRenderer";
 const DEFAULT_NODE_WIDTH = 200;
@@ -102092,10 +102331,11 @@ const TraceListPanel = ({
   const filteredTraces = React__default.useMemo(() => {
     return traces.filter((trace2) => {
       const hasScenarioMatches = trace2.scenarioMatches && trace2.scenarioMatches.length > 0;
-      if (traceFilterMode === "known" && !hasScenarioMatches) {
+      const isKnown = isTraceMatched(trace2);
+      if (traceFilterMode === "known" && !isKnown) {
         return false;
       }
-      if (traceFilterMode === "unknown" && hasScenarioMatches) {
+      if (traceFilterMode === "unknown" && isKnown) {
         return false;
       }
       if (!hasScenarioMatches) {