@principal-ai/principal-view-react 0.14.36 → 0.14.38

package/src/nodes/CustomNode.tsx

@@ -17,32 +17,6 @@ import {
   OtelBoundaryNode,
 } from './otel';
 
-/**
- * Converts a hex color to a lighter/tinted version (opaque, not transparent)
- * @param hexColor - Hex color string (e.g., "#FF5733" or "#888")
- * @param lightness - How much to lighten (0-1), defaults to 0.88 (88% white mixed in)
- * @returns hex color string
- */
-function hexToLightColor(hexColor: string, lightness = 0.88): string {
-  // Remove # if present
-  const hex = hexColor.replace('#', '');
-
-  // Parse hex to RGB
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
-
-  // Mix with white based on lightness factor
-  // lightness of 0.88 means 88% white + 12% original color
-  const newR = Math.round(r + (255 - r) * lightness);
-  const newG = Math.round(g + (255 - g) * lightness);
-  const newB = Math.round(b + (255 - b) * lightness);
-
-  // Convert back to hex
-  const toHex = (n: number) => n.toString(16).padStart(2, '0');
-  return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
-}
-
 export interface CustomNodeData extends Record<string, unknown> {
   name: string;
   typeDefinition: NodeTypeDefinition;

package/src/nodes/otel/OtelBoundaryNode.tsx

@@ -18,18 +18,6 @@ import { NodeContent } from './shared/NodeContent';
 import { useNodeBehavior } from './shared/useNodeBehavior';
 import type { BoundaryData } from './shared/types';
 
-function hexToLightColor(hexColor: string, lightness = 0.88): string {
-  const hex = hexColor.replace('#', '');
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
-  const newR = Math.round(r + (255 - r) * lightness);
-  const newG = Math.round(g + (255 - g) * lightness);
-  const newB = Math.round(b + (255 - b) * lightness);
-  const toHex = (n: number) => n.toString(16).padStart(2, '0');
-  return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
-}
-
 export interface OtelBoundaryNodeData extends Record<string, unknown> {
   name: string;
   typeDefinition: {
@@ -140,7 +128,7 @@ export const OtelBoundaryNode: React.FC<NodeProps<Node<OtelBoundaryNodeData>>> =
 
   const boundaryStyle: React.CSSProperties = {
     padding: '12px 16px',
-    backgroundColor: hexToLightColor(fillColor),
+    backgroundColor: fillColor,
     color: '#000',
     border: `2px ${borderStyle} ${hasViolations ? '#D0021B' : strokeColor}`,
     fontSize: theme.fontSizes[0],

package/src/nodes/otel/OtelEventNode.tsx

@@ -17,18 +17,6 @@ import { NodeBadges } from './shared/NodeBadges';
 import { NodeContent } from './shared/NodeContent';
 import { useNodeBehavior } from './shared/useNodeBehavior';
 
-function hexToLightColor(hexColor: string, lightness = 0.88): string {
-  const hex = hexColor.replace('#', '');
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
-  const newR = Math.round(r + (255 - r) * lightness);
-  const newG = Math.round(g + (255 - g) * lightness);
-  const newB = Math.round(b + (255 - b) * lightness);
-  const toHex = (n: number) => n.toString(16).padStart(2, '0');
-  return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
-}
-
 export interface OtelEventNodeData extends Record<string, unknown> {
   name: string;
   typeDefinition: {

package/src/nodes/otel/OtelResourceNode.tsx

@@ -16,18 +16,6 @@ import { NodeBadges } from './shared/NodeBadges';
 import { NodeContent } from './shared/NodeContent';
 import { useNodeBehavior } from './shared/useNodeBehavior';
 
-function hexToLightColor(hexColor: string, lightness = 0.88): string {
-  const hex = hexColor.replace('#', '');
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
-  const newR = Math.round(r + (255 - r) * lightness);
-  const newG = Math.round(g + (255 - g) * lightness);
-  const newB = Math.round(b + (255 - b) * lightness);
-  const toHex = (n: number) => n.toString(16).padStart(2, '0');
-  return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
-}
-
 export interface OtelResourceNodeData extends Record<string, unknown> {
   name: string;
   typeDefinition: {
@@ -170,7 +158,7 @@ export const OtelResourceNode: React.FC<NodeProps<Node<OtelResourceNodeData>>> =
     right: diamondBorderWidth,
     bottom: diamondBorderWidth,
     clipPath: diamondClipPath,
-    backgroundColor: hexToLightColor(fillColor),
+    backgroundColor: fillColor,
     color: '#000',
     display: 'flex',
     flexDirection: 'column',

package/src/nodes/otel/OtelScopeNode.tsx

@@ -1,7 +1,7 @@
 /**
  * OTEL Scope Node
  *
- * Renders scope nodes as circles with:
+ * Renders scope nodes as rounded rectangles with:
  * - Scope name identifier
  * - Status, sources, and references badges
  */
@@ -16,18 +16,6 @@ import { NodeBadges } from './shared/NodeBadges';
 import { NodeContent } from './shared/NodeContent';
 import { useNodeBehavior } from './shared/useNodeBehavior';
 
-function hexToLightColor(hexColor: string, lightness = 0.88): string {
-  const hex = hexColor.replace('#', '');
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
-  const newR = Math.round(r + (255 - r) * lightness);
-  const newG = Math.round(g + (255 - g) * lightness);
-  const newB = Math.round(b + (255 - b) * lightness);
-  const toHex = (n: number) => n.toString(16).padStart(2, '0');
-  return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
-}
-
 export interface OtelScopeNodeData extends Record<string, unknown> {
   name: string;
   typeDefinition: {
@@ -137,7 +125,7 @@ export const OtelScopeNode: React.FC<NodeProps<Node<OtelScopeNodeData>>> = ({
 
   const circleStyle: React.CSSProperties = {
     padding: '8px',
-    backgroundColor: hexToLightColor(fillColor),
+    backgroundColor: fillColor,
     color: '#000',
     border: `2px ${borderStyle} ${hasViolations ? '#D0021B' : strokeColor}`,
     fontSize: theme.fontSizes[0],
@@ -161,7 +149,7 @@ export const OtelScopeNode: React.FC<NodeProps<Node<OtelScopeNodeData>>> = ({
     transition: 'box-shadow 0.2s ease, opacity 0.3s ease',
     animationDuration: animationType ? `${animationDuration}ms` : undefined,
     boxSizing: 'border-box',
-    borderRadius: '50%',
+    borderRadius: '12px',
   };
 
   const handleStyle = editable
@@ -176,7 +164,7 @@ export const OtelScopeNode: React.FC<NodeProps<Node<OtelScopeNodeData>>> = ({
           isVisible={selected}
           minWidth={40}
           minHeight={40}
-          keepAspectRatio={true}
+          keepAspectRatio={false}
           onResizeEnd={handleResizeEnd}
           handleStyle={{ width: 8, height: 8, borderRadius: 2, zIndex: 20 }}
           lineStyle={{ borderWidth: 1, zIndex: 20 }}
@@ -196,7 +184,7 @@ export const OtelScopeNode: React.FC<NodeProps<Node<OtelScopeNodeData>>> = ({
         onMouseLeave={handleMouseLeave}
       >
         <NodeBadges
-          shape="circle"
+          shape="rectangle"
           status={status}
           sourceFiles={sourceFiles}
           references={references}

package/src/nodes/otel/OtelSpanConventionNode.tsx

@@ -18,21 +18,6 @@ import { NodeContent } from './shared/NodeContent';
 import { useNodeBehavior } from './shared/useNodeBehavior';
 import type { WorkflowChip } from './shared/types';
 
-/**
- * Converts a hex color to a lighter/tinted version
- */
-function hexToLightColor(hexColor: string, lightness = 0.88): string {
-  const hex = hexColor.replace('#', '');
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
-  const newR = Math.round(r + (255 - r) * lightness);
-  const newG = Math.round(g + (255 - g) * lightness);
-  const newB = Math.round(b + (255 - b) * lightness);
-  const toHex = (n: number) => n.toString(16).padStart(2, '0');
-  return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
-}
-
 export interface OtelSpanConventionNodeData extends Record<string, unknown> {
   name: string;
   typeDefinition: {
@@ -190,7 +175,7 @@ export const OtelSpanConventionNode: React.FC<
     right: hexagonBorderWidth,
     bottom: hexagonBorderWidth,
     clipPath: hexagonClipPath,
-    backgroundColor: hexToLightColor(fillColor),
+    backgroundColor: fillColor,
     color: '#000',
     display: 'flex',
     flexDirection: 'column',