@principal-ai/principal-view-react 0.15.0 → 0.15.2

package/src/components/GraphRenderer.tsx

@@ -84,12 +84,20 @@ export interface NodeDimensionChange {
   dimensions: { width: number; height: number };
 }
 
+/** Text change event for tracking inline text edits */
+export interface NodeTextChange {
+  nodeId: string;
+  text: string;
+}
+
 /** All pending changes that can be saved */
 export interface PendingChanges {
   /** Node position changes */
   positionChanges: NodePositionChange[];
   /** Node dimension changes (from resizing) */
   dimensionChanges: NodeDimensionChange[];
+  /** Text changes for text and group nodes */
+  textChanges: NodeTextChange[];
   /** Node updates (type, data changes) */
   nodeUpdates: Array<{
     nodeId: string;
@@ -398,6 +406,7 @@ interface AlignmentGuide {
 interface EditState {
   positionChanges: Map<string, { x: number; y: number }>;
   dimensionChanges: Map<string, { width: number; height: number }>;
+  textChanges: Map<string, string>;
   nodeUpdates: Map<string, { type?: string; data?: Record<string, unknown> }>;
   deletedNodeIds: Set<string>;
   createdEdges: Array<{
@@ -414,6 +423,7 @@ interface EditState {
 const createEmptyEditState = (): EditState => ({
   positionChanges: new Map(),
   dimensionChanges: new Map(),
+  textChanges: new Map(),
   nodeUpdates: new Map(),
   deletedNodeIds: new Set(),
   createdEdges: [],
@@ -573,6 +583,7 @@ interface GraphRendererInnerProps {
   onEditStateChange?: (editState: EditState) => void;
   editStateRef: React.MutableRefObject<EditState>;
   resetVisualStateRef: React.MutableRefObject<(() => void) | null>;
+  resetTextChangesVersionRef: React.MutableRefObject<(() => void) | null>;
   undoRedoFunctionsRef: React.MutableRefObject<UndoRedoFunctionsRef | null>;
   pushHistory: (entries: HistoryEntry[]) => void;
   clearHistory: () => void;
@@ -629,6 +640,7 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
   onEditStateChange,
   editStateRef,
   resetVisualStateRef,
+  resetTextChangesVersionRef,
   undoRedoFunctionsRef,
   pushHistory,
   clearHistory,
@@ -652,6 +664,9 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
   // Track shift key state for tooltip control
   const [shiftKeyPressed, setShiftKeyPressed] = useState(false);
 
+  // Track text changes version to force re-renders when text is edited
+  const [textChangesVersion, setTextChangesVersion] = useState(0);
+
   // Track if we're currently processing a node hide operation
   const hidingNodeRef = useRef(false);
 
@@ -822,6 +837,7 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
     return (
       state.positionChanges.size > 0 ||
       state.dimensionChanges.size > 0 ||
+      state.textChanges.size > 0 ||
       state.nodeUpdates.size > 0 ||
       state.deletedNodeIds.size > 0 ||
       state.createdEdges.length > 0 ||
@@ -841,6 +857,7 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
         console.log('[GraphRenderer] Edit state updated:', {
           positionChanges: newState.positionChanges.size,
           dimensionChanges: newState.dimensionChanges.size,
+          textChanges: newState.textChanges.size,
           nodeUpdates: newState.nodeUpdates.size,
           hasChanges,
         });
@@ -882,6 +899,39 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
     [editable, updateEditState, pushHistory]
   );
 
+  // Handler for node text change - called from CustomNode via context
+  const handleNodeTextChange = useCallback(
+    (nodeId: string, text: string) => {
+      if (!editable) return;
+
+      // Capture before text for undo
+      // For text nodes, the text is in the canvas node's 'text' field
+      // For group nodes, it's in the 'label' field
+      // We need to look at the original canvas to get the before value
+      const beforeText = editStateRef.current.textChanges.get(nodeId) ?? '';
+
+      // Push to history
+      pushHistory([
+        {
+          type: 'text',
+          nodeId,
+          before: beforeText,
+          after: text,
+        },
+      ]);
+
+      updateEditState((prev) => {
+        const newTextChanges = new Map(prev.textChanges);
+        newTextChanges.set(nodeId, text);
+        return { ...prev, textChanges: newTextChanges };
+      });
+
+      // Force re-render by incrementing version
+      setTextChangesVersion((v) => v + 1);
+    },
+    [editable, updateEditState, pushHistory]
+  );
+
   // Handle toggling node hidden state (Cmd/Ctrl+click)
   // This is exposed via context so CustomNode can call it on mousedown
   // (mousedown works in edit mode where click is intercepted by drag handling)
@@ -961,10 +1011,11 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
   const graphEditContextValue = useMemo(
     () => ({
       onNodeResizeEnd: handleNodeResizeEnd,
+      onNodeTextChange: handleNodeTextChange,
       onToggleNodeHidden: handleToggleNodeHidden,
       onHideUnconnectedNodes: handleHideUnconnectedNodes,
     }),
-    [handleNodeResizeEnd, handleToggleNodeHidden, handleHideUnconnectedNodes]
+    [handleNodeResizeEnd, handleNodeTextChange, handleToggleNodeHidden, handleHideUnconnectedNodes]
   );
 
   // ============================================
@@ -1647,6 +1698,8 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
       const animation = animationState.nodeAnimations[node.id];
       // Apply any pending position changes
       const pendingPosition = editStateRef.current.positionChanges.get(node.id);
+      // Apply any pending text changes
+      const pendingText = editStateRef.current.textChanges.get(node.id);
       // Allow specific nodes to be draggable even when not in edit mode
       const isDraggable = editable || draggableNodeIds?.has(node.id);
       // When draggableNodeIds is provided, we need to explicitly control each node's draggability
@@ -1668,6 +1721,7 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
         data: {
           ...node.data,
           editable,
+          pendingText,
           tooltipsEnabled: showTooltips,
           shiftKeyPressed,
           isHighlighted: highlightedNodeId === node.id,
@@ -1682,7 +1736,7 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
         } as CustomNodeData,
       };
     });
-  }, [localNodes, configuration, violations, animationState.nodeAnimations, editable, showTooltips, highlightedNodeId, activeNodeIds, editStateRef, shiftKeyPressed, selectedNodeIds, hiddenNodeIds, draggableNodeIds]);
+  }, [localNodes, configuration, violations, animationState.nodeAnimations, editable, showTooltips, highlightedNodeId, activeNodeIds, editStateRef, shiftKeyPressed, selectedNodeIds, hiddenNodeIds, draggableNodeIds, textChangesVersion]);
 
   const baseNodesKey = useMemo(() => {
     return nodes
@@ -1747,6 +1801,24 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
     );
   }, [editable, hiddenNodeIds]);
 
+  // Sync pending text changes to local nodes when textChangesVersion changes (edit mode only)
+  const prevTextChangesVersionRef = useRef(textChangesVersion);
+  useEffect(() => {
+    if (!editable) return;
+    if (prevTextChangesVersionRef.current === textChangesVersion) return;
+    prevTextChangesVersionRef.current = textChangesVersion;
+
+    setXyflowLocalNodes((nodes) =>
+      nodes.map((n) => {
+        const pendingText = editStateRef.current.textChanges.get(n.id);
+        return {
+          ...n,
+          data: { ...n.data, pendingText },
+        };
+      })
+    );
+  }, [editable, textChangesVersion]);
+
   // Also sync when entering edit mode or when base nodes change content
   const prevEditableRef = useRef(editable);
   useEffect(() => {
@@ -1865,6 +1937,18 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
           });
           break;
 
+        case 'text':
+          // Restore previous text
+          // Update edit state
+          updateEditState((prev) => {
+            const newTextChanges = new Map(prev.textChanges);
+            newTextChanges.set(entry.nodeId, entry.before);
+            return { ...prev, textChanges: newTextChanges };
+          });
+          // Force re-render
+          setTextChangesVersion((v) => v + 1);
+          break;
+
         case 'edgeCreate':
           // Remove the created edge
           setLocalEdges((edges) => edges.filter((e) => e.id !== entry.edge.id));
@@ -1930,6 +2014,18 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
           });
           break;
 
+        case 'text':
+          // Apply new text
+          // Update edit state
+          updateEditState((prev) => {
+            const newTextChanges = new Map(prev.textChanges);
+            newTextChanges.set(entry.nodeId, entry.after);
+            return { ...prev, textChanges: newTextChanges };
+          });
+          // Force re-render
+          setTextChangesVersion((v) => v + 1);
+          break;
+
         case 'edgeCreate':
           // Re-create the edge
           setLocalEdges((edges) => [...edges, entry.edge]);
@@ -2314,6 +2410,13 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
     };
   }, [xyflowNodesBase, xyflowEdgesWithElk, onPendingChangesChange]);
 
+  // Set the reset text changes version function for use by resetEditState
+  useEffect(() => {
+    resetTextChangesVersionRef.current = () => {
+      setTextChangesVersion(0);
+    };
+  }, []);
+
   // Use local edges in edit mode, base edges otherwise
   const xyflowEdges = editable ? xyflowLocalEdges : xyflowEdgesWithElk;
 
@@ -2823,6 +2926,9 @@ export const GraphRenderer = forwardRef<GraphRendererHandle, GraphRendererProps>
   // Ref to hold the reset visual state function - will be set after xyflowLocalNodes is defined
   const resetVisualStateRef = useRef<(() => void) | null>(null);
 
+  // Ref to hold the reset text changes version function - will be set by inner component
+  const resetTextChangesVersionRef = useRef<(() => void) | null>(null);
+
   // Undo/redo management
   const {
     canUndo: canUndoState,
@@ -2855,6 +2961,12 @@ export const GraphRenderer = forwardRef<GraphRendererHandle, GraphRendererProps>
               dimensions,
             })
           ),
+          textChanges: Array.from(state.textChanges.entries()).map(
+            ([nodeId, text]) => ({
+              nodeId,
+              text,
+            })
+          ),
           nodeUpdates: Array.from(state.nodeUpdates.entries()).map(([nodeId, updates]) => ({
             nodeId,
             updates,
@@ -2871,6 +2983,7 @@ export const GraphRenderer = forwardRef<GraphRendererHandle, GraphRendererProps>
           hasChanges:
             state.positionChanges.size > 0 ||
             state.dimensionChanges.size > 0 ||
+            state.textChanges.size > 0 ||
             state.nodeUpdates.size > 0 ||
             state.deletedNodeIds.size > 0 ||
             state.createdEdges.length > 0 ||
@@ -2879,6 +2992,8 @@ export const GraphRenderer = forwardRef<GraphRendererHandle, GraphRendererProps>
       },
       resetEditState: () => {
         editStateRef.current = createEmptyEditState();
+        // Reset text changes version to trigger re-render
+        resetTextChangesVersionRef.current?.();
         // Also reset visual state (node positions/dimensions) if available
         resetVisualStateRef.current?.();
         // Clear undo/redo history
@@ -2889,6 +3004,7 @@ export const GraphRenderer = forwardRef<GraphRendererHandle, GraphRendererProps>
         return (
           state.positionChanges.size > 0 ||
           state.dimensionChanges.size > 0 ||
+          state.textChanges.size > 0 ||
           state.nodeUpdates.size > 0 ||
           state.deletedNodeIds.size > 0 ||
           state.createdEdges.length > 0 ||
@@ -2988,6 +3104,7 @@ export const GraphRenderer = forwardRef<GraphRendererHandle, GraphRendererProps>
             onPendingChangesChange={onPendingChangesChange}
             editStateRef={editStateRef}
             resetVisualStateRef={resetVisualStateRef}
+            resetTextChangesVersionRef={resetTextChangesVersionRef}
             undoRedoFunctionsRef={undoRedoFunctionsRef}
             pushHistory={pushHistory}
             clearHistory={clearHistory}

package/src/components/NodeTooltip.tsx

@@ -7,6 +7,7 @@ import { TooltipPortalContext } from '../contexts/TooltipPortalContext';
 export interface OtelInfo {
   kind: 'type' | 'service' | 'instance';
   category?: string;
+  scope?: string;
   files?: string[];
 }
 
@@ -138,7 +139,7 @@ export const NodeTooltip: React.FC<NodeTooltipProps> = ({
             display: 'flex',
             alignItems: 'center',
             gap: '6px',
-            marginBottom: description ? '6px' : 0,
+            marginBottom: description || otel.scope ? '6px' : 0,
           }}
         >
           <span
@@ -163,6 +164,24 @@ export const NodeTooltip: React.FC<NodeTooltipProps> = ({
         </div>
       )}
 
+      {/* Scope */}
+      {otel?.scope && (
+        <div style={{
+          marginBottom: description ? '6px' : 0,
+          fontSize: theme.fontSizes[0],
+          fontFamily: theme.fonts.body,
+          color: 'rgba(255,255,255,0.8)'
+        }}>
+          <span style={{
+            color: 'rgba(255,255,255,0.6)',
+            fontWeight: theme.fontWeights.semibold
+          }}>
+            Scope:
+          </span>{' '}
+          <span style={{ fontFamily: 'monospace' }}>{otel.scope}</span>
+        </div>
+      )}
+
       {/* Description - rendered as markdown */}
       {description ? (
         <div style={{ lineHeight: '1.4', color: 'rgba(255,255,255,0.9)' }}>

package/src/contexts/GraphEditContext.tsx

@@ -3,6 +3,8 @@ import React, { createContext, useContext } from 'react';
 export interface GraphEditContextValue {
   /** Called when a node resize operation completes */
   onNodeResizeEnd?: (nodeId: string, dimensions: { width: number; height: number }) => void;
+  /** Called when node text is edited (for text and group nodes) */
+  onNodeTextChange?: (nodeId: string, text: string) => void;
   /** Called to toggle node hidden state (Cmd/Ctrl+click) */
   onToggleNodeHidden?: (nodeId: string) => void;
   /** Called to hide all nodes not directly connected to the given node (Cmd/Ctrl+Shift+click) */

package/src/hooks/useUndoRedo.ts

@@ -26,6 +26,12 @@ export type HistoryEntry =
       before: { width: number; height: number };
       after: { width: number; height: number };
     }
+  | {
+      type: 'text';
+      nodeId: string;
+      before: string;
+      after: string;
+    }
   | {
       type: 'nodeDelete';
       nodeId: string;

package/src/nodes/CustomNode.tsx

@@ -28,6 +28,8 @@ export interface CustomNodeData extends Record<string, unknown> {
   animationDuration?: number;
   // Edit mode - shows larger connection handles
   editable?: boolean;
+  // Pending text change (from inline editing, not yet saved)
+  pendingText?: string;
   // Whether tooltips are enabled (defaults to true)
   tooltipsEnabled?: boolean;
   // Whether shift key is currently pressed (for tooltip control)
@@ -77,10 +79,13 @@ export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = (props) =>
 
   // Fall through to legacy rendering for non-OTEL nodes
   const { theme } = useTheme();
-  const { onNodeResizeEnd, onToggleNodeHidden, onHideUnconnectedNodes } = useGraphEdit();
+  const { onNodeResizeEnd, onNodeTextChange, onToggleNodeHidden, onHideUnconnectedNodes } = useGraphEdit();
   const nodeId = useNodeId();
   const [isHovered, setIsHovered] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editingText, setEditingText] = useState('');
   const nodeRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
   const nodeProps = data;
   const {
     typeDefinition,
@@ -449,8 +454,8 @@ export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = (props) =>
   // Use fillColor as the primary "color" for backwards compatibility
   const color = fillColor;
 
-  // Get display name - use name from props (falls back to node.id in converter)
-  const displayName = nodeProps.name;
+  // Get display name - use pending text if available, otherwise use name from props
+  const displayName = nodeProps.pendingText ?? nodeProps.name;
 
   // Extract identifier based on node type (for display below the label)
   // Supports: event.name, otel.spanPattern, otel.scope, otel.resourceMatch, boundary.direction
@@ -545,8 +550,58 @@ export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = (props) =>
 
   const animationClass = getAnimationClass();
 
-  // Check if this is a group node
+  // Check if this is a group node or text node (canvas types that support inline editing)
   const isGroup = nodeData.canvasType === 'group';
+  const isTextNode = nodeData.canvasType === 'text';
+  const isInlineEditable = (isGroup || isTextNode) && editable;
+
+  // Double-click handler for inline text editing
+  const lastClickTimeRef = useRef<number>(0);
+  const handleNodeDoubleClick = useCallback((event: React.MouseEvent) => {
+    if (!isInlineEditable || !nodeId || !onNodeTextChange) return;
+
+    event.stopPropagation();
+    event.preventDefault();
+
+    setEditingText(displayName || '');
+    setIsEditing(true);
+
+    // Focus the textarea after state update
+    setTimeout(() => {
+      textareaRef.current?.focus();
+      textareaRef.current?.select();
+    }, 0);
+  }, [isInlineEditable, nodeId, onNodeTextChange, displayName]);
+
+  // Single click tracking for double-click detection
+  const handleNodeClick = useCallback((event: React.MouseEvent) => {
+    const now = Date.now();
+    const timeSinceLastClick = now - lastClickTimeRef.current;
+
+    if (timeSinceLastClick < 300) {
+      // Double-click detected
+      handleNodeDoubleClick(event);
+    }
+
+    lastClickTimeRef.current = now;
+  }, [handleNodeDoubleClick]);
+
+  // Save text changes
+  const handleSaveText = useCallback(() => {
+    if (!nodeId || !onNodeTextChange) return;
+
+    if (editingText !== displayName) {
+      onNodeTextChange(nodeId, editingText);
+    }
+
+    setIsEditing(false);
+  }, [nodeId, onNodeTextChange, editingText, displayName]);
+
+  // Cancel text editing
+  const handleCancelEdit = useCallback(() => {
+    setIsEditing(false);
+    setEditingText('');
+  }, []);
 
   // Shape-specific styles
   const getShapeStyles = () => {
@@ -946,6 +1001,7 @@ export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = (props) =>
           ref={nodeRef}
           style={{ position: 'relative', width: '100%', height: '100%' }}
           onMouseDown={handleMouseDown}
+          onClick={handleNodeClick}
           onMouseEnter={() => setIsHovered(true)}
           onMouseLeave={() => setIsHovered(false)}
         >
@@ -1018,6 +1074,57 @@ export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = (props) =>
               )}
             </div>
           </div>
+          {/* Inline text editor overlay */}
+          {isEditing && isInlineEditable && (
+            <div
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                zIndex: 1000,
+                display: 'flex',
+                flexDirection: 'column',
+                padding: theme.space[1],
+                boxSizing: 'border-box',
+              }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <textarea
+                ref={textareaRef}
+                value={editingText}
+                onChange={(e) => setEditingText(e.target.value)}
+                placeholder="Enter text..."
+                style={{
+                  flex: 1,
+                  width: '100%',
+                  padding: theme.space[2],
+                  fontSize: theme.fontSizes[1],
+                  fontFamily: theme.fonts.body,
+                  color: theme.colors.text,
+                  backgroundColor: theme.colors.background,
+                  border: `3px solid ${theme.colors.primary}`,
+                  borderRadius: theme.radii[1],
+                  outline: 'none',
+                  resize: 'none',
+                  boxSizing: 'border-box',
+                  boxShadow: '0 8px 24px rgba(0, 0, 0, 0.3)',
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    handleSaveText();
+                  } else if (e.key === 'Escape') {
+                    e.preventDefault();
+                    handleCancelEdit();
+                  }
+                }}
+                onBlur={handleSaveText}
+              />
+            </div>
+          )}
+
           {tooltipsEnabled && (
             <NodeTooltip
               description={description}

package/src/stories/OtelComponents.stories.tsx

@@ -243,7 +243,79 @@ export const TooltipVariants: StoryObj = {
           </div>
           <NodeTooltip
             description="A specific running instance of a service"
-            otel={{ kind: 'instance', category: 'runtime' }}
+            otel={{ kind: 'instance', category: 'runtime', scope: 'auth-flow' }}
+            visible={true}
+          />
+        </div>
+      </div>
+    </ThemeProvider>
+  ),
+};
+
+/**
+ * Demonstrates tooltips with scope information.
+ * Shows how scope names are displayed in the tooltip.
+ */
+export const TooltipWithScope: StoryObj = {
+  render: () => (
+    <ThemeProvider theme={defaultEditorTheme}>
+      <div style={{ padding: '40px', display: 'flex', gap: '80px', flexWrap: 'wrap' }}>
+        <div style={{ position: 'relative', width: '200px', height: '180px' }}>
+          <div
+            style={{
+              padding: '20px',
+              border: '2px solid #DC2626',
+              borderRadius: '8px',
+              textAlign: 'center',
+              backgroundColor: '#DC2626',
+              color: 'white',
+            }}
+          >
+            Auth Event
+          </div>
+          <NodeTooltip
+            description="User authentication completed successfully"
+            otel={{ kind: 'type', category: 'event', scope: 'auth-flow' }}
+            visible={true}
+          />
+        </div>
+
+        <div style={{ position: 'relative', width: '200px', height: '180px' }}>
+          <div
+            style={{
+              padding: '20px',
+              border: '2px solid #2563EB',
+              borderRadius: '8px',
+              textAlign: 'center',
+              backgroundColor: '#2563EB',
+              color: 'white',
+            }}
+          >
+            Terminal Event
+          </div>
+          <NodeTooltip
+            description="Command executed in terminal session"
+            otel={{ kind: 'type', category: 'event', scope: 'terminal-activity' }}
+            visible={true}
+          />
+        </div>
+
+        <div style={{ position: 'relative', width: '200px', height: '180px' }}>
+          <div
+            style={{
+              padding: '20px',
+              border: '2px solid #16A34A',
+              borderRadius: '8px',
+              textAlign: 'center',
+              backgroundColor: '#16A34A',
+              color: 'white',
+            }}
+          >
+            Quality Event
+          </div>
+          <NodeTooltip
+            description="Code quality check completed with metrics"
+            otel={{ kind: 'type', category: 'event', scope: 'quality-panel' }}
             visible={true}
           />
         </div>