@cyvest/cyvest-vis 4.0.0 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyvest/cyvest-vis",
-  "version": "4.0.0",
+  "version": "4.2.0",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -13,7 +13,7 @@
     "@dagrejs/dagre": "^1.1.8",
     "@xyflow/react": "^12.10.0",
     "d3-force": "^3.0.0",
-    "@cyvest/cyvest-js": "4.0.0"
+    "@cyvest/cyvest-js": "4.2.0"
   },
   "devDependencies": {
     "@types/d3-force": "^3.0.10",

package/src/components/CyvestGraph.tsx

@@ -2,63 +2,128 @@
  * CyvestGraph component - combined view with toggle between observables and investigation views.
  */
 
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useMemo } from "react";
 import type { CyvestGraphProps, InvestigationNodeType } from "../types";
 import { ObservablesGraph } from "./ObservablesGraph";
 import { InvestigationGraph } from "./InvestigationGraph";
 
 /**
- * View toggle button component.
+ * View toggle button component with modern design.
  */
 const ViewToggle: React.FC<{
   currentView: "observables" | "investigation";
   onChange: (view: "observables" | "investigation") => void;
 }> = ({ currentView, onChange }) => {
+  const containerStyle: React.CSSProperties = useMemo(
+    () => ({
+      position: "absolute",
+      top: 12,
+      left: 12,
+      display: "flex",
+      gap: 2,
+      background: "rgba(255, 255, 255, 0.95)",
+      backdropFilter: "blur(8px)",
+      padding: 4,
+      borderRadius: 10,
+      boxShadow: "0 2px 12px rgba(0,0,0,0.1)",
+      zIndex: 10,
+      fontFamily:
+        "'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+      border: "1px solid rgba(0,0,0,0.06)",
+    }),
+    []
+  );
+
+  const getButtonStyle = useCallback(
+    (isActive: boolean): React.CSSProperties => ({
+      padding: "8px 14px",
+      border: "none",
+      borderRadius: 7,
+      cursor: "pointer",
+      fontSize: 12,
+      fontWeight: isActive ? 600 : 500,
+      background: isActive
+        ? "linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)"
+        : "transparent",
+      color: isActive ? "white" : "#4b5563",
+      transition: "all 0.15s ease",
+      letterSpacing: "-0.01em",
+    }),
+    []
+  );
+
   return (
-    <div
-      style={{
-        position: "absolute",
-        top: 10,
-        left: 10,
-        display: "flex",
-        gap: 4,
-        background: "white",
-        padding: 4,
-        borderRadius: 8,
-        boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
-        zIndex: 10,
-        fontFamily: "system-ui, sans-serif",
-      }}
-    >
+    <div style={containerStyle}>
       <button
         onClick={() => onChange("observables")}
-        style={{
-          padding: "6px 12px",
-          border: "none",
-          borderRadius: 4,
-          cursor: "pointer",
-          fontSize: 12,
-          fontWeight: currentView === "observables" ? 600 : 400,
-          background: currentView === "observables" ? "#3b82f6" : "#f3f4f6",
-          color: currentView === "observables" ? "white" : "#374151",
+        style={getButtonStyle(currentView === "observables")}
+        onMouseEnter={(e) => {
+          if (currentView !== "observables") {
+            e.currentTarget.style.background = "rgba(59, 130, 246, 0.1)";
+            e.currentTarget.style.color = "#3b82f6";
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (currentView !== "observables") {
+            e.currentTarget.style.background = "transparent";
+            e.currentTarget.style.color = "#4b5563";
+          }
         }}
       >
-        Observables
+        <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <circle cx="12" cy="12" r="3" />
+            <circle cx="12" cy="12" r="10" />
+            <line x1="12" y1="2" x2="12" y2="4" />
+            <line x1="12" y1="20" x2="12" y2="22" />
+            <line x1="2" y1="12" x2="4" y2="12" />
+            <line x1="20" y1="12" x2="22" y2="12" />
+          </svg>
+          Observables
+        </span>
       </button>
       <button
         onClick={() => onChange("investigation")}
-        style={{
-          padding: "6px 12px",
-          border: "none",
-          borderRadius: 4,
-          cursor: "pointer",
-          fontSize: 12,
-          fontWeight: currentView === "investigation" ? 600 : 400,
-          background: currentView === "investigation" ? "#3b82f6" : "#f3f4f6",
-          color: currentView === "investigation" ? "white" : "#374151",
+        style={getButtonStyle(currentView === "investigation")}
+        onMouseEnter={(e) => {
+          if (currentView !== "investigation") {
+            e.currentTarget.style.background = "rgba(59, 130, 246, 0.1)";
+            e.currentTarget.style.color = "#3b82f6";
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (currentView !== "investigation") {
+            e.currentTarget.style.background = "transparent";
+            e.currentTarget.style.color = "#4b5563";
+          }
         }}
       >
-        Investigation
+        <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <rect x="3" y="3" width="18" height="18" rx="2" />
+            <path d="M9 3v18" />
+            <path d="M3 9h18" />
+          </svg>
+          Investigation
+        </span>
       </button>
     </div>
   );
@@ -76,7 +141,9 @@ export const CyvestGraph: React.FC<CyvestGraphProps> = ({
   className,
   showViewToggle = true,
 }) => {
-  const [view, setView] = useState<"observables" | "investigation">(initialView);
+  const [view, setView] = useState<"observables" | "investigation">(
+    initialView
+  );
 
   const handleNodeClick = useCallback(
     (nodeId: string, _nodeType?: InvestigationNodeType) => {
@@ -85,15 +152,17 @@ export const CyvestGraph: React.FC<CyvestGraphProps> = ({
     [onNodeClick]
   );
 
+  const containerStyle: React.CSSProperties = useMemo(
+    () => ({
+      width,
+      height,
+      position: "relative",
+    }),
+    [width, height]
+  );
+
   return (
-    <div
-      className={className}
-      style={{
-        width,
-        height,
-        position: "relative",
-      }}
-    >
+    <div className={className} style={containerStyle}>
       {showViewToggle && <ViewToggle currentView={view} onChange={setView} />}
 
       {view === "observables" ? (

package/src/components/FloatingEdge.tsx

@@ -1,14 +1,31 @@
 /**
  * Floating Edge component for use with force-directed layout.
- * Uses simple straight lines that connect to node edges.
+ * Uses smooth bezier curves that connect to node centers.
  */
 
-import React, { memo } from "react";
-import { BaseEdge, getStraightPath, type EdgeProps } from "@xyflow/react";
+import React, { memo, useMemo } from "react";
+import { BaseEdge, getBezierPath, type EdgeProps } from "@xyflow/react";
 
 /**
- * Floating edge component that uses straight lines.
- * React Flow passes sourceX, sourceY, targetX, targetY based on node positions.
+ * Calculate control point offset based on distance.
+ * Longer edges get more curve for better visibility.
+ */
+function getControlOffset(
+  sourceX: number,
+  sourceY: number,
+  targetX: number,
+  targetY: number
+): number {
+  const dx = targetX - sourceX;
+  const dy = targetY - sourceY;
+  const distance = Math.sqrt(dx * dx + dy * dy);
+  // Scale curve intensity with distance, capped
+  return Math.min(Math.max(distance * 0.15, 20), 60);
+}
+
+/**
+ * Floating edge component with smooth bezier curves.
+ * The curve adapts to the edge length for optimal visibility.
  */
 function FloatingEdgeComponent({
   id,
@@ -18,23 +35,36 @@ function FloatingEdgeComponent({
   targetY,
   style,
   markerEnd,
+  selected,
 }: EdgeProps) {
-  const [edgePath] = getStraightPath({
+  const offset = useMemo(
+    () => getControlOffset(sourceX, sourceY, targetX, targetY),
+    [sourceX, sourceY, targetX, targetY]
+  );
+
+  const [edgePath] = getBezierPath({
     sourceX,
     sourceY,
     targetX,
     targetY,
+    curvature: 0.15,
   });
 
+  const edgeStyle = useMemo(
+    () => ({
+      strokeWidth: selected ? 2.5 : 1.5,
+      stroke: selected ? "#3b82f6" : "#94a3b8",
+      transition: "stroke 0.15s ease, stroke-width 0.15s ease",
+      ...style,
+    }),
+    [selected, style]
+  );
+
   return (
     <BaseEdge
       id={id}
       path={edgePath}
-      style={{
-        strokeWidth: 1.5,
-        stroke: "#94a3b8",
-        ...style,
-      }}
+      style={edgeStyle}
       markerEnd={markerEnd}
     />
   );