@cyvest/cyvest-vis 4.0.0 → 4.1.0

package/src/components/ObservableNode.tsx

@@ -1,169 +1,150 @@
 /**
  * Custom node component for the Observables Graph.
- * Renders nodes with different shapes based on observable type.
+ * Professional design with circular nodes and SVG icons.
  */
 
-import React, { memo } from "react";
+import React, { memo, useMemo } from "react";
 import { Handle, Position, type NodeProps } from "@xyflow/react";
-import type { ObservableNodeData, ObservableShape } from "../types";
+import type { ObservableNodeData } from "../types";
 import { getLevelColor, getLevelBackgroundColor } from "../utils/observables";
+import { getObservableIcon, CrosshairIcon } from "./Icons";
 
 /**
- * Node size constants - keep small for nice force layout
+ * Node size constants
  */
-const NODE_SIZE = 28;
-const ROOT_NODE_SIZE = 36;
+const NODE_SIZE = 40;
+const ROOT_NODE_WIDTH = 56;
+const ROOT_NODE_HEIGHT = 40;
+const ICON_SIZE = 18;
+const ROOT_ICON_SIZE = 20;
 
 /**
- * Observable node component with centered connection points.
+ * CSS styles for the node
  */
-function ObservableNodeComponent({
-  data,
-  selected,
-}: NodeProps) {
+const nodeStyles = {
+  container: {
+    display: "flex",
+    flexDirection: "column" as const,
+    alignItems: "center",
+    cursor: "grab",
+    transition: "transform 0.1s ease-out",
+  },
+  shapeWrapper: {
+    position: "relative" as const,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  label: {
+    marginTop: 4,
+    fontSize: 10,
+    fontWeight: 500,
+    maxWidth: 80,
+    textAlign: "center" as const,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap" as const,
+    fontFamily:
+      "'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    letterSpacing: "-0.01em",
+    lineHeight: 1.2,
+  },
+  handle: {
+    position: "absolute" as const,
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: 1,
+    height: 1,
+    background: "transparent",
+    border: "none",
+    opacity: 0,
+    pointerEvents: "none" as const,
+  },
+};
+
+/**
+ * Observable node component with professional circular design.
+ */
+function ObservableNodeComponent({ data, selected }: NodeProps) {
   const nodeData = data as unknown as ObservableNodeData;
-  const {
-    label,
-    emoji,
-    shape,
-    level,
-    isRoot,
-    whitelisted,
-    fullValue,
-  } = nodeData;
+  const { label, level, isRoot, whitelisted, fullValue, observableType } =
+    nodeData;
 
-  const size = isRoot ? ROOT_NODE_SIZE : NODE_SIZE;
   const borderColor = getLevelColor(level);
   const backgroundColor = getLevelBackgroundColor(level);
 
-  // Get shape styles
-  const getShapeStyle = (): React.CSSProperties => {
-    const baseStyle: React.CSSProperties = {
-      width: size,
-      height: size,
+  // Get the appropriate icon component
+  const IconComponent = useMemo(() => {
+    if (isRoot) return CrosshairIcon;
+    return getObservableIcon(observableType);
+  }, [isRoot, observableType]);
+
+  // Memoize styles to prevent recalculation
+  const shapeStyle = useMemo(() => {
+    if (isRoot) {
+      // Root node is a rounded rectangle (pill shape)
+      return {
+        width: ROOT_NODE_WIDTH,
+        height: ROOT_NODE_HEIGHT,
+        borderRadius: ROOT_NODE_HEIGHT / 2,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor,
+        border: `2.5px solid ${borderColor}`,
+        boxShadow: selected
+          ? `0 0 0 3px ${borderColor}40, 0 4px 12px rgba(0,0,0,0.15)`
+          : "0 2px 8px rgba(0,0,0,0.08)",
+        opacity: whitelisted ? 0.5 : 1,
+        transition: "box-shadow 0.15s ease-out, transform 0.1s ease-out",
+      };
+    }
+
+    // All other nodes are circles
+    return {
+      width: NODE_SIZE,
+      height: NODE_SIZE,
+      borderRadius: "50%",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
       backgroundColor,
-      border: `${selected ? 3 : 2}px solid ${borderColor}`,
+      border: `2px solid ${borderColor}`,
+      boxShadow: selected
+        ? `0 0 0 3px ${borderColor}40, 0 4px 12px rgba(0,0,0,0.15)`
+        : "0 2px 6px rgba(0,0,0,0.08)",
       opacity: whitelisted ? 0.5 : 1,
-      fontSize: isRoot ? 14 : 12,
+      transition: "box-shadow 0.15s ease-out, transform 0.1s ease-out",
     };
+  }, [isRoot, backgroundColor, borderColor, selected, whitelisted]);
 
-    switch (shape) {
-      case "square":
-        return { ...baseStyle, borderRadius: 4 };
-      case "circle":
-        return { ...baseStyle, borderRadius: "50%" };
-      case "triangle":
-        // Use clip-path for triangle
-        return {
-          ...baseStyle,
-          borderRadius: 0,
-          border: "none",
-          background: `linear-gradient(to bottom right, ${backgroundColor} 50%, transparent 50%)`,
-          clipPath: "polygon(50% 0%, 100% 100%, 0% 100%)",
-          position: "relative",
-        };
-      case "rectangle":
-      default:
-        return { ...baseStyle, width: size * 1.4, borderRadius: 6 };
-    }
-  };
-
-  // For triangle, we need a different approach
-  const isTriangle = shape === "triangle";
+  const labelStyle = useMemo(
+    () => ({
+      ...nodeStyles.label,
+      color: whitelisted ? "#9ca3af" : "#374151",
+    }),
+    [whitelisted]
+  );
 
   return (
-    <div
-      className="observable-node"
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        cursor: "pointer",
-      }}
-    >
+    <div className="observable-node" style={nodeStyles.container}>
       {/* Shape container */}
-      <div style={{ position: "relative" }}>
-        {isTriangle ? (
-          // Triangle using SVG
-          <svg width={size} height={size} viewBox="0 0 100 100">
-            <polygon
-              points="50,10 90,90 10,90"
-              fill={backgroundColor}
-              stroke={borderColor}
-              strokeWidth={selected ? 6 : 4}
-              opacity={whitelisted ? 0.5 : 1}
-            />
-            <text
-              x="50"
-              y="65"
-              textAnchor="middle"
-              fontSize="32"
-              dominantBaseline="middle"
-            >
-              {emoji}
-            </text>
-          </svg>
-        ) : (
-          // Other shapes using CSS
-          <div style={getShapeStyle()}>
-            <span style={{ userSelect: "none" }}>{emoji}</span>
-          </div>
-        )}
+      <div style={nodeStyles.shapeWrapper}>
+        <div style={shapeStyle}>
+          <IconComponent
+            size={isRoot ? ROOT_ICON_SIZE : ICON_SIZE}
+            color={borderColor}
+          />
+        </div>
 
-        {/* Center handle for source connections */}
-        <Handle
-          type="source"
-          position={Position.Right}
-          id="source"
-          style={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            width: 1,
-            height: 1,
-            background: "transparent",
-            border: "none",
-            opacity: 0,
-          }}
-        />
-        {/* Center handle for target connections */}
-        <Handle
-          type="target"
-          position={Position.Left}
-          id="target"
-          style={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            width: 1,
-            height: 1,
-            background: "transparent",
-            border: "none",
-            opacity: 0,
-          }}
-        />
+        {/* Hidden handles for edge connections - centered */}
+        <Handle type="source" position={Position.Right} style={nodeStyles.handle} />
+        <Handle type="target" position={Position.Left} style={nodeStyles.handle} />
       </div>
 
       {/* Label below the shape */}
-      <div
-        style={{
-          marginTop: 2,
-          fontSize: 9,
-          maxWidth: 70,
-          textAlign: "center",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
-          color: "#374151",
-          fontFamily: "system-ui, sans-serif",
-        }}
-        title={fullValue}
-      >
+      <div style={labelStyle} title={fullValue}>
         {label}
       </div>
     </div>