@principal-ai/principal-view-react 0.13.20 → 0.13.21

package/src/nodes/CustomNode.tsx

@@ -90,6 +90,9 @@ export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = ({ data, se
   console.log('[CustomNode] Node data:', {
     name: nodeProps.name,
     nodeDataKeys: nodeData ? Object.keys(nodeData).join(', ') : 'undefined',
+    references: nodeData?.references,
+    otelFiles: (nodeData?.otel as { files?: string[] })?.files,
+    sources: nodeData?.sources,
     fullNodeData: nodeData,
   });
 
@@ -99,10 +102,13 @@ export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = ({ data, se
   const showTooltip =
     (isHovered && !dragging && shiftKeyPressed) || (!editable && !!selected);
 
-  // Extract OTEL info, description, and sources for tooltip
-  const otelInfo = nodeData?.otel as OtelInfo | undefined;
+  // Extract OTEL info, description, sources/files, and references for tooltip
+  const otelInfo = nodeData?.otel as (OtelInfo & { files?: string[] }) | undefined;
   const description = nodeData?.description as string | undefined;
-  const sources = nodeData?.sources as string[] | undefined;
+  const sources = nodeData?.sources as string[] | undefined; // deprecated
+  const references = nodeData?.references as string[] | undefined;
+  // Files from otel.files - these are source code files where the event is instrumented
+  const files = otelInfo?.files;
 
   // Get badge shape styles based on node shape
   const getBadgeShapeStyles = (): React.CSSProperties => {
@@ -141,24 +147,28 @@ export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = ({ data, se
   };
 
   // Get badge position based on shape - diamonds need badges at their points, not bounding box corners
-  const getBadgePosition = (position: 'top-left' | 'top-right' | 'left' | 'right'): React.CSSProperties => {
+  const getBadgePosition = (position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left' | 'right' | 'top' | 'bottom'): React.CSSProperties => {
     const isDiamondShape = typeDefinition.shape === 'diamond';
 
     if (isDiamondShape) {
       // Diamond points are at the middle of each edge of the bounding box
       switch (position) {
         case 'top-left':
-          // Position at the LEFT point of the diamond (center-left)
-          return { top: '50%', left: 0, transform: 'translate(-50%, -50%)' };
-        case 'top-right':
-          // Position at the RIGHT point of the diamond (center-right)
-          return { top: '50%', right: 0, transform: 'translate(50%, -50%)' };
         case 'left':
           // Position at the LEFT point of the diamond (center-left)
           return { top: '50%', left: 0, transform: 'translate(-50%, -50%)' };
+        case 'top-right':
         case 'right':
           // Position at the RIGHT point of the diamond (center-right)
           return { top: '50%', right: 0, transform: 'translate(50%, -50%)' };
+        case 'top':
+          // Position at the TOP point of the diamond
+          return { top: 0, left: '50%', transform: 'translate(-50%, -50%)' };
+        case 'bottom':
+        case 'bottom-left':
+        case 'bottom-right':
+          // Position at the BOTTOM point of the diamond
+          return { bottom: 0, left: '50%', transform: 'translate(-50%, 50%)' };
       }
     }
 
@@ -168,17 +178,27 @@ export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = ({ data, se
         return { top: -6, left: -6 };
       case 'top-right':
         return { top: -6, right: -6 };
+      case 'bottom-left':
+        return { bottom: -6, left: -6 };
+      case 'bottom-right':
+        return { bottom: -6, right: -6 };
       case 'left':
         return { top: -6, left: -6 };
       case 'right':
         return { top: -6, right: -6 };
+      case 'top':
+        return { top: -6, left: '50%', transform: 'translateX(-50%)' };
+      case 'bottom':
+        return { bottom: -6, left: '50%', transform: 'translateX(-50%)' };
     }
   };
 
-  // Render Sources badge (top-right, or right point for diamonds)
+  // Render Sources badge (top-right) - shows "S" for files where event is instrumented
   const renderSourcesBadge = () => {
-    const sources = nodeData?.sources as string[] | undefined;
-    if (!sources || sources.length === 0) return null;
+    // Use otel.files (source code files where event is instrumented)
+    // Fall back to deprecated sources field for backwards compatibility
+    const sourceFiles = files || sources;
+    if (!sourceFiles || sourceFiles.length === 0) return null;
 
     const shapeStyles = getBadgeShapeStyles();
     const positionStyles = getBadgePosition('top-right');
@@ -203,13 +223,47 @@ export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = ({ data, se
           zIndex: 10,
           opacity: nodeOpacity,
         }}
-        title={`Sources: ${sources.join(', ')}`}
+        title={`Source files: ${sourceFiles.join(', ')}`}
       >
         <span style={{ transform: shapeStyles.transform ? 'rotate(-45deg)' : undefined }}>S</span>
       </div>
     );
   };
 
+  // Render References badge (bottom-left for rectangles, bottom for diamonds) - shows "R" for external references
+  const renderReferencesBadge = () => {
+    if (!references || references.length === 0) return null;
+
+    const shapeStyles = getBadgeShapeStyles();
+    const positionStyles = getBadgePosition('bottom-left');
+
+    return (
+      <div
+        style={{
+          position: 'absolute',
+          ...positionStyles,
+          ...shapeStyles,
+          // Override transform if shape has rotation but we already have a position transform
+          ...(typeDefinition.shape === 'diamond' ? { transform: `${positionStyles.transform} rotate(45deg)` } : {}),
+          backgroundColor: '#8b5cf6', // Purple for references
+          color: 'white',
+          fontSize: theme.fontSizes[0],
+          fontWeight: theme.fontWeights.bold,
+          fontFamily: theme.fonts.body,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
+          zIndex: 10,
+          opacity: nodeOpacity,
+        }}
+        title={`References: ${references.join(', ')}`}
+      >
+        <span style={{ transform: shapeStyles.transform ? 'rotate(-45deg)' : undefined }}>R</span>
+      </div>
+    );
+  };
+
   // Render Boundary badge (right/left points) - shown instead of sources badge for boundary nodes
   const renderBoundaryBadge = () => {
     const boundary = nodeData?.boundary as { direction?: 'outbound' | 'inbound'; node?: Record<string, string> } | undefined;
@@ -662,7 +716,12 @@ export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = ({ data, se
           onMouseLeave={() => setIsHovered(false)}
         >
           {renderStatusBadge()}
-          {isBoundaryNode ? renderBoundaryBadge() : renderSourcesBadge()}
+          {isBoundaryNode ? renderBoundaryBadge() : (
+            <>
+              {renderSourcesBadge()}
+              {renderReferencesBadge()}
+            </>
+          )}
           <div style={hexagonBorderStyle} className={animationClass}>
             <div style={hexagonInnerStyle}>
               {icon && (
@@ -705,6 +764,7 @@ export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = ({ data, se
               description={description}
               otel={otelInfo}
               sources={sources}
+              references={references}
               visible={showTooltip}
               nodeRef={nodeRef}
             />
@@ -728,7 +788,12 @@ export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = ({ data, se
           onMouseLeave={() => setIsHovered(false)}
         >
           {renderStatusBadge()}
-          {isBoundaryNode ? renderBoundaryBadge() : renderSourcesBadge()}
+          {isBoundaryNode ? renderBoundaryBadge() : (
+            <>
+              {renderSourcesBadge()}
+              {renderReferencesBadge()}
+            </>
+          )}
           <div style={diamondBorderStyle} className={animationClass}>
             <div style={diamondInnerStyle}>
               {icon && (
@@ -771,6 +836,7 @@ export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = ({ data, se
               description={description}
               otel={otelInfo}
               sources={sources}
+              references={references}
               visible={showTooltip}
               nodeRef={nodeRef}
             />
@@ -784,7 +850,12 @@ export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = ({ data, se
           onMouseLeave={() => setIsHovered(false)}
         >
           {renderStatusBadge()}
-          {isBoundaryNode ? renderBoundaryBadge() : renderSourcesBadge()}
+          {isBoundaryNode ? renderBoundaryBadge() : (
+            <>
+              {renderSourcesBadge()}
+              {renderReferencesBadge()}
+            </>
+          )}
           <div style={getShapeStyles()} className={animationClass}>
             {/* Inner content */}
             <div
@@ -852,6 +923,7 @@ export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = ({ data, se
               description={description}
               otel={otelInfo}
               sources={sources}
+              references={references}
               visible={showTooltip}
               nodeRef={nodeRef}
             />

package/src/stories/DiamondBadges.stories.tsx

@@ -443,3 +443,187 @@ The badges on diamond nodes are positioned at the actual points of the diamond s
     },
   },
 };
+
+/**
+ * Canvas demonstrating the new files (S) and references (R) badges
+ */
+const filesAndReferencesCanvas: ExtendedCanvas = {
+  nodes: [
+    // Node with otel.files only (S badge)
+    {
+      id: 'files-only',
+      type: 'text',
+      x: 100,
+      y: 100,
+      width: 140,
+      height: 80,
+      text: 'Files Only',
+      color: 4, // green
+      pv: {
+        nodeType: 'event',
+        shape: 'rectangle',
+        icon: 'FileCode',
+        otel: {
+          kind: 'type',
+          files: ['src/auth/login.ts', 'src/auth/logout.ts'],
+        },
+      },
+    },
+    // Node with references only (R badge)
+    {
+      id: 'refs-only',
+      type: 'text',
+      x: 300,
+      y: 100,
+      width: 140,
+      height: 80,
+      text: 'Refs Only',
+      color: 6, // purple
+      pv: {
+        nodeType: 'event',
+        shape: 'rectangle',
+        icon: 'ExternalLink',
+        references: ['@opentelemetry/api', 'https://opentelemetry.io/docs'],
+      },
+    },
+    // Node with both files and references (S + R badges)
+    {
+      id: 'both-badges',
+      type: 'text',
+      x: 500,
+      y: 100,
+      width: 140,
+      height: 80,
+      text: 'Both Badges',
+      color: 2, // orange
+      pv: {
+        nodeType: 'event',
+        shape: 'rectangle',
+        icon: 'Layers',
+        otel: {
+          kind: 'service',
+          files: ['src/api/handler.ts'],
+        },
+        references: ['@principal-ai/core'],
+      },
+    },
+    // Diamond with files
+    {
+      id: 'diamond-files',
+      type: 'text',
+      x: 100,
+      y: 250,
+      width: 100,
+      height: 100,
+      text: 'Files',
+      color: 4,
+      pv: {
+        nodeType: 'decision',
+        shape: 'diamond',
+        icon: 'FileCode',
+        otel: {
+          kind: 'type',
+          files: ['src/router.ts'],
+        },
+      },
+    },
+    // Diamond with references
+    {
+      id: 'diamond-refs',
+      type: 'text',
+      x: 280,
+      y: 250,
+      width: 100,
+      height: 100,
+      text: 'Refs',
+      color: 6,
+      pv: {
+        nodeType: 'decision',
+        shape: 'diamond',
+        icon: 'ExternalLink',
+        references: ['https://docs.example.com'],
+      },
+    },
+    // Diamond with both
+    {
+      id: 'diamond-both',
+      type: 'text',
+      x: 460,
+      y: 250,
+      width: 100,
+      height: 100,
+      text: 'Both',
+      color: 2,
+      pv: {
+        nodeType: 'decision',
+        shape: 'diamond',
+        icon: 'Layers',
+        otel: {
+          kind: 'instance',
+          files: ['src/decision.ts'],
+        },
+        references: ['@some/package'],
+      },
+    },
+    // Circle with both badges
+    {
+      id: 'circle-both',
+      type: 'text',
+      x: 640,
+      y: 250,
+      width: 100,
+      height: 100,
+      text: 'Circle',
+      color: 5,
+      pv: {
+        nodeType: 'event',
+        shape: 'circle',
+        icon: 'Circle',
+        otel: {
+          kind: 'service',
+          files: ['src/service.ts'],
+        },
+        references: ['https://api.docs.com'],
+      },
+    },
+  ],
+  edges: [],
+  pv: {
+    version: '1.0.0',
+    name: 'Files and References Badges',
+    description: 'Demonstrates otel.files (S) and references (R) badges',
+    edgeTypes: {},
+  },
+};
+
+export const FilesAndReferences: Story = {
+  args: {
+    canvas: filesAndReferencesCanvas,
+    width: 850,
+    height: 450,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+**Files (S) and References (R) Badges**
+
+Two types of badges indicate different metadata:
+
+- **S badge** (green): Shows source files where the event is instrumented (\`pv.otel.files\`)
+- **R badge** (purple): Shows external references like packages or documentation (\`pv.references\`)
+
+**Row 1 - Rectangles:**
+- Files Only: Has \`otel.files\` → shows S badge
+- Refs Only: Has \`references\` → shows R badge
+- Both Badges: Has both → shows S and R badges side by side
+
+**Row 2 - Other Shapes:**
+- Diamond, Circle shapes with various badge combinations
+
+Hover over nodes to see the full file paths and reference URLs in the tooltip.
+        `,
+      },
+    },
+  },
+};

package/src/stories/GraphRenderer.stories.tsx

@@ -676,7 +676,6 @@ const otelLogAssociationCanvas: ExtendedCanvas = {
         otel: {
           kind: 'type',
           category: 'log',
-          isNew: true,
         },
         shape: 'rectangle',
         icon: 'FileText',
@@ -737,7 +736,6 @@ const otelLogAssociationCanvas: ExtendedCanvas = {
         otel: {
           kind: 'service',
           category: 'router',
-          isNew: true,
         },
         shape: 'hexagon',
         icon: 'GitBranch',
@@ -861,7 +859,6 @@ const otelLogAssociationCanvas: ExtendedCanvas = {
         otel: {
           kind: 'service',
           category: 'collector',
-          isNew: true,
         },
         shape: 'hexagon',
         icon: 'BarChart2',
@@ -884,7 +881,6 @@ const otelLogAssociationCanvas: ExtendedCanvas = {
         otel: {
           kind: 'type',
           category: 'audit',
-          isNew: true,
         },
         shape: 'rectangle',
         icon: 'AlertTriangle',

package/src/stories/NodeDefinitionComparison.stories.tsx

@@ -149,8 +149,7 @@ export const BasicOtelEventNode: Story = {
         icon: "Play",
         otel: {
           kind: "event",
-          category: "lifecycle",
-          isNew: true
+          category: "lifecycle"
         },
         event: {
           name: "analysis.started",
@@ -343,8 +342,7 @@ export const NodeWithStateAndViolations: Story = {
         icon: "XCircle",
         otel: {
           kind: "event",
-          category: "error",
-          isNew: false
+          category: "error"
         },
         event: {
           name: "validation.error",

package/src/stories/OtelComponents.stories.tsx

@@ -37,7 +37,6 @@ interface OtelLog {
         otel: {
           kind: 'type',
           category: 'log',
-          isNew: true,
         },
         shape: 'rectangle',
         icon: 'FileText',
@@ -69,7 +68,6 @@ Routes incoming OTEL logs to canvas nodes based on matching criteria.
         otel: {
           kind: 'service',
           category: 'router',
-          isNew: true,
         },
         shape: 'hexagon',
         icon: 'GitBranch',
@@ -92,7 +90,6 @@ Routes incoming OTEL logs to canvas nodes based on matching criteria.
         otel: {
           kind: 'type',
           category: 'audit',
-          isNew: true,
         },
         shape: 'rectangle',
         icon: 'AlertTriangle',
@@ -210,7 +207,7 @@ export const TooltipVariants: StoryObj = {
           </div>
           <NodeTooltip
             description="OpenTelemetry log record with timestamp, severity, body"
-            otel={{ kind: 'type', category: 'log', isNew: true }}
+            otel={{ kind: 'type', category: 'log' }}
             visible={true}
           />
         </div>