From ace2c7c4d0628ee825b13861373f0956e4033009 Mon Sep 17 00:00:00 2001
From: dutexion <dutexion@gmail.com>
Date: Sat, 28 Sep 2024 14:50:11 +0900
Subject: [PATCH] =?UTF-8?q?=EC=84=9C=EB=B9=84=EC=8A=A4=20=EB=A7=B5=20?=
 =?UTF-8?q?=EC=99=84=20=EB=B2=84=EC=A0=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/servicemap.tsx | 329 ++++++++++++++++++----------------
 1 file changed, 174 insertions(+), 155 deletions(-)

diff --git a/src/components/servicemap.tsx b/src/components/servicemap.tsx
index b42f30b..dcda201 100644
--- a/src/components/servicemap.tsx
+++ b/src/components/servicemap.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useMemo } from 'react';
 import { data } from './data';
 
 interface Node {
@@ -20,16 +20,47 @@ interface Edge {
   latency_avg_ms: number;
 }
 
-interface NodePosition {
+interface Metrics {
+  timestamp: string;
+  nodes: Node[];
+  edges: Edge[];
+}
+
+interface JsonData {
+  data: {
+    metrics: Metrics[];
+  };
+}
+
+interface ServiceNodeProps {
   x: number;
   y: number;
+  node: Node;
+  onNodeClick: (node: Node) => void;
+  onNodeHover: (node: Node | null) => void;
+  maxCalls: number;
+  isConnected: boolean;
+  isHovered: boolean;
 }
 
-const ServiceNode: React.FC<{
-  node: Node;
-  position: NodePosition;
-  onClick: (node: Node) => void;
-}> = ({ node, position, onClick }) => {
+interface ServiceLinkProps {
+  source: { x: number; y: number };
+  target: { x: number; y: number };
+  edge: Edge;
+  maxCalls: number;
+  isConnected: boolean;
+}
+
+const ServiceNode: React.FC<ServiceNodeProps> = ({
+  x,
+  y,
+  node,
+  onNodeClick,
+  onNodeHover,
+  maxCalls,
+  isConnected,
+  isHovered,
+}) => {
   const getColor = (type: string) => {
     switch (type) {
       case 'SERVICE':
@@ -41,60 +72,57 @@ const ServiceNode: React.FC<{
     }
   };
 
+  const radius = 20 + (node.calls / maxCalls) * 30;
+  const opacity = isConnected ? 1 : 0.3;
+
   return (
-    <g transform={`translate(${position.x},${position.y})`} onClick={() => onClick(node)}>
-      <circle r="30" fill={getColor(node.type)} />
-      <text
-        textAnchor="middle"
-        dy=".3em"
-        fill="#000"
-        stroke="#fff"
-        strokeWidth="0.5"
-        fontSize="12"
-        style={{ pointerEvents: 'none' }}
-      >
-        {/* {node.node_id.split('-').slice(0, -1).join('-')} */}
+    <g
+      transform={`translate(${x},${y})`}
+      onClick={() => onNodeClick(node)}
+      onMouseEnter={() => onNodeHover(node)}
+      onMouseLeave={() => onNodeHover(null)}
+      style={{ cursor: 'pointer' }}
+    >
+      <circle r={radius} fill={getColor(node.type)} opacity={opacity} />
+      <text textAnchor="middle" dy=".3em" fill="#000" stroke="#fff" strokeWidth="0.1" fontSize="16" opacity={opacity}>
         {node.node_id}
       </text>
+      {isHovered && <circle r={radius + 5} fill="none" stroke="#FFD700" strokeWidth="2" opacity={0.8} />}
     </g>
   );
 };
 
-const ServiceLink: React.FC<{
-  source: NodePosition;
-  target: NodePosition;
-  edge: Edge;
-}> = ({ source, target, edge }) => {
-  const dx = target.x - source.x;
-  const dy = target.y - source.y;
-  const angle = Math.atan2(dy, dx);
-
-  const sourceRadius = 30;
-  const targetRadius = 30;
-
-  const startX = source.x + sourceRadius * Math.cos(angle);
-  const startY = source.y + sourceRadius * Math.sin(angle);
-  const endX = target.x - targetRadius * Math.cos(angle);
-  const endY = target.y - targetRadius * Math.sin(angle);
-
-  // Calculate control points for a curved line
-  const midX = (startX + endX) / 2;
-  const midY = (startY + endY) / 2;
-  const curveFactor = 0.2;
-  const controlX = midX - curveFactor * (endY - startY);
-  const controlY = midY + curveFactor * (endX - startX);
+const ServiceLink: React.FC<ServiceLinkProps> = ({ source, target, edge, maxCalls, isConnected }) => {
+  const offset = 54;
+  const arrowOffset = -0;
+
+  const startX = source.x;
+  const startY = source.y;
+  const endX = target.x - ((target.x - source.x) * offset) / Math.hypot(target.x - source.x, target.y - source.y);
+  const endY = target.y - ((target.y - source.y) * offset) / Math.hypot(target.x - source.x, target.y - source.y);
+
+  const strokeWidth = 1 + (edge.calls / maxCalls) * 5;
+  const opacity = isConnected ? 0.8 : 0.1;
 
   return (
     <g>
-      <path
-        d={`M${startX},${startY} Q${controlX},${controlY} ${endX},${endY}`}
-        fill="none"
-        stroke="rgba(0,0,0,0.2)"
-        strokeWidth="2"
+      <defs>
+        <marker id="arrow" markerWidth="10" markerHeight="7" refX={arrowOffset} refY="3.5" orient="auto">
+          <polygon points="0 0, 10 3.5, 0 7" fill="rgba(0,0,0,0.1)" />
+        </marker>
+      </defs>
+      <line
+        x1={startX}
+        y1={startY}
+        x2={endX}
+        y2={endY}
+        stroke="rgba(0,0,0,0.1)"
+        strokeWidth={strokeWidth}
         markerEnd="url(#arrow)"
+        opacity={opacity}
       />
-      <text x={midX} y={midY} fill="#666" fontSize="10" textAnchor="middle" dy="-5" style={{ pointerEvents: 'none' }}>
-        {edge.calls} calls
+      <text x={(startX + endX) / 2} y={(startY + endY) / 2} fill="#666" fontSize="10" opacity={opacity}>
+        {edge.calls} calls, {edge.latency_avg_ms.toFixed(2)}ms
       </text>
     </g>
   );
@@ -102,146 +130,137 @@ const ServiceLink: React.FC<{
 
 const ServiceMap: React.FC = () => {
   const [selectedNode, setSelectedNode] = useState<Node | null>(null);
-  const [nodePositions, setNodePositions] = useState<Record<string, NodePosition>>({});
+  const [hoveredNode, setHoveredNode] = useState<Node | null>(null);
 
-  const metrics = data.data.metrics[0];
+  const jsonData: JsonData = data;
+
+  const metrics = jsonData.data.metrics[0];
   const nodes = metrics.nodes;
   const edges = metrics.edges;
 
-  useEffect(() => {
-    const calculateNodePositions = () => {
-      const positions: Record<string, NodePosition> = {};
-      const svgWidth = 1200;
-      const svgHeight = 800;
-      const horizontalPadding = 100;
-      const verticalPadding = 50;
-
-      // Calculate in-degree and out-degree for each node
-      const inDegree: Record<string, number> = {};
-      const outDegree: Record<string, number> = {};
-      edges.forEach((edge) => {
-        inDegree[edge.target] = (inDegree[edge.target] || 0) + 1;
-        outDegree[edge.source] = (outDegree[edge.source] || 0) + 1;
-      });
-
-      // Sort nodes based on the difference between out-degree and in-degree
-      const sortedNodes = [...nodes].sort((a, b) => {
-        const aDiff = (outDegree[a.node_id] || 0) - (inDegree[a.node_id] || 0);
-        const bDiff = (outDegree[b.node_id] || 0) - (inDegree[b.node_id] || 0);
-        return bDiff - aDiff;
-      });
-
-      // Assign nodes to layers
-      const layers: string[][] = [];
-      sortedNodes.forEach((node) => {
-        let layerIndex = 0;
-        while (true) {
-          if (!layers[layerIndex]) {
-            layers[layerIndex] = [];
-          }
-          if (layers[layerIndex].length < 5) {
-            // Limit 5 nodes per layer
-            layers[layerIndex].push(node.node_id);
-            break;
-          }
-          layerIndex++;
-        }
-      });
-
-      // Barycentric method to reduce edge crossings
-      const optimizeLayers = (layers: string[][]) => {
-        for (let i = 1; i < layers.length; i++) {
-          const currentLayer = layers[i];
-          const prevLayer = layers[i - 1];
-
-          const nodeOrder: Record<string, number> = {};
-          prevLayer.forEach((node, index) => {
-            nodeOrder[node] = index;
-          });
-
-          const barycenters = currentLayer.map((node) => {
-            const connectedNodes = edges
-              .filter((e) => e.source === node || e.target === node)
-              .map((e) => (e.source === node ? e.target : e.source))
-              .filter((n) => prevLayer.includes(n));
-            if (connectedNodes.length === 0) return 0;
-            return connectedNodes.reduce((sum, n) => sum + nodeOrder[n], 0) / connectedNodes.length;
-          });
-
-          currentLayer.sort((a, b) => {
-            const indexA = currentLayer.indexOf(a);
-            const indexB = currentLayer.indexOf(b);
-            return barycenters[indexA] - barycenters[indexB];
-          });
-        }
-      };
-
-      // Apply barycentric method multiple times
-      for (let i = 0; i < 3; i++) {
-        optimizeLayers(layers);
+  const calculateReferences = () => {
+    const references = nodes.reduce(
+      (acc, node) => {
+        acc[node.node_id] = { incoming: 0, outgoing: 0, uniqueTargets: new Set(), connectedNodes: new Set() };
+        return acc;
+      },
+      {} as Record<
+        string,
+        { incoming: number; outgoing: number; uniqueTargets: Set<string>; connectedNodes: Set<string> }
+      >,
+    );
+
+    const uniqueEdgesMap = new Map<string, Edge>();
+
+    edges.forEach((edge) => {
+      const key = `${edge.source}-${edge.target}`;
+      if (uniqueEdgesMap.has(key)) {
+        const existingEdge = uniqueEdgesMap.get(key)!;
+        existingEdge.calls += edge.calls;
+      } else {
+        uniqueEdgesMap.set(key, { ...edge });
       }
+    });
+
+    uniqueEdgesMap.forEach((edge) => {
+      references[edge.target].incoming += edge.calls;
+      references[edge.source].outgoing += edge.calls;
+      references[edge.source].uniqueTargets.add(edge.target);
+      references[edge.source].connectedNodes.add(edge.target);
+      references[edge.target].connectedNodes.add(edge.source);
+    });
+
+    return { references, uniqueEdges: Array.from(uniqueEdgesMap.values()) };
+  };
+
+  const { references, uniqueEdges } = calculateReferences();
 
-      // Calculate positions based on optimized layers
-      layers.forEach((layer, layerIndex) => {
-        const layerX = horizontalPadding + (svgWidth - 2 * horizontalPadding) * (layerIndex / (layers.length - 1));
-        layer.forEach((nodeId, nodeIndex) => {
-          const layerY = verticalPadding + (svgHeight - 2 * verticalPadding) * (nodeIndex / (layer.length - 1));
-          positions[nodeId] = { x: layerX, y: layerY };
-        });
-      });
+  const nodePositions = useMemo(() => {
+    const width = 1200;
+    const height = 800;
+    const padding = 100;
+    const positions: Record<string, { x: number; y: number }> = {};
 
-      setNodePositions(positions);
-    };
+    // Sort nodes by the number of unique targets (descending order)
+    const sortedNodes = [...nodes].sort(
+      (a, b) => references[b.node_id].uniqueTargets.size - references[a.node_id].uniqueTargets.size,
+    );
 
-    calculateNodePositions();
-  }, [nodes, edges]);
+    sortedNodes.forEach((node, index) => {
+      const x = padding + ((width - 2 * padding) * index) / (nodes.length - 1);
+      const y = height / 2 + (Math.random() - 0.5) * (height / 2 - padding);
+
+      positions[node.node_id] = { x, y };
+    });
+
+    return positions;
+  }, []); // Empty dependency array ensures this calculation happens only once
 
   const handleNodeClick = (node: Node) => {
     setSelectedNode(node);
   };
 
+  const handleNodeHover = (node: Node | null) => {
+    setHoveredNode(node);
+  };
+
+  const maxCalls = Math.max(...nodes.map((node) => node.calls));
+  const maxEdgeCalls = Math.max(...uniqueEdges.map((edge) => edge.calls));
+
+  const isConnected = (nodeId: string) => {
+    if (!hoveredNode) return true;
+    return hoveredNode.node_id === nodeId || references[hoveredNode.node_id].connectedNodes.has(nodeId);
+  };
+
   return (
-    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-      <h1 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '16px' }}>Optimized Hierarchical Service Map</h1>
-      <svg width="1200" height="800" style={{ border: '1px solid #ccc', borderRadius: '8px' }}>
-        <defs>
-          <marker id="arrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-            <polygon points="0 0, 10 3.5, 0 7" fill="rgba(0,0,0,0.2)" />
-          </marker>
-        </defs>
-        {edges.map((edge, index) => (
+    <div className="w-full h-screen flex flex-col items-center">
+      <h1 className="text-2xl font-bold mb-4">Datadog APM Service Map</h1>
+      <svg width="1200" height="800">
+        {uniqueEdges.map((edge, index) => (
           <ServiceLink
             key={index}
             source={nodePositions[edge.source] || { x: 0, y: 0 }}
             target={nodePositions[edge.target] || { x: 0, y: 0 }}
             edge={edge}
+            maxCalls={maxEdgeCalls}
+            isConnected={!hoveredNode || isConnected(edge.source) || isConnected(edge.target)}
           />
         ))}
         {nodes.map((node) => (
           <ServiceNode
             key={node.node_id}
+            x={nodePositions[node.node_id].x}
+            y={nodePositions[node.node_id].y}
             node={node}
-            position={nodePositions[node.node_id] || { x: 0, y: 0 }}
-            onClick={handleNodeClick}
+            onNodeClick={handleNodeClick}
+            onNodeHover={handleNodeHover}
+            maxCalls={maxCalls}
+            isConnected={isConnected(node.node_id)}
+            isHovered={hoveredNode?.node_id === node.node_id}
           />
         ))}
       </svg>
       {selectedNode && (
-        <div
-          style={{
-            marginTop: '16px',
-            padding: '16px',
-            border: '1px solid #ccc',
-            borderRadius: '8px',
-            backgroundColor: '#f9f9f9',
-          }}
-        >
-          <h2 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '8px' }}>{selectedNode.node_id}</h2>
+        <div className="mt-4 p-4 border rounded">
+          <h2 className="text-lg font-bold">{selectedNode.node_id}</h2>
           <p>Type: {selectedNode.type}</p>
           <p>Calls: {selectedNode.calls}</p>
           <p>Successes: {selectedNode.successes}</p>
           <p>Failures: {selectedNode.failures}</p>
           <p>Avg Latency: {selectedNode.latency_avg_ms.toFixed(2)}ms</p>
+          <p>Referenced by: {references[selectedNode.node_id].incoming}</p>
+          <p>References: {references[selectedNode.node_id].outgoing}</p>
+          <p>Unique Targets: {references[selectedNode.node_id].uniqueTargets.size}</p>
+          <h3 className="mt-2 font-bold">Unique Edge Calls:</h3>
+          <ul>
+            {uniqueEdges
+              .filter((edge) => edge.source === selectedNode.node_id || edge.target === selectedNode.node_id)
+              .map((edge, index) => (
+                <li key={index}>
+                  {edge.source} → {edge.target}: {edge.calls} calls
+                </li>
+              ))}
+          </ul>
         </div>
       )}
     </div>