Merge pull request #485 from EbukaMoses/Interactive_Contract2

Gbangbolaoluwagbemiga · web-flow · commit dad8f7a75943 · 2026-03-30T14:43:46.000+01:00
Interactive Contract Dependency Graph
diff --git a/frontend/app/components/CallGraph.stories.tsx b/frontend/app/components/CallGraph.stories.tsx
@@ -84,3 +84,20 @@ export const WithSeverities: Story = {
     ],
   },
 };
+
+/** Shows internal (same-project) calls in green curves vs external calls in purple dashes. */
+export const InternalVsExternal: Story = {
+  args: {
+    nodes: [
+      { id: "fn-TokenA", label: "TokenA", type: "function" },
+      { id: "fn-TokenB", label: "TokenB", type: "function" },
+      { id: "fn-AmmPool", label: "AmmPool", type: "function" },
+      { id: "external-PriceOracle", label: "PriceOracle", type: "external" },
+    ],
+    edges: [
+      { source: "fn-TokenA", target: "fn-AmmPool", type: "internal", label: "add_liquidity" },
+      { source: "fn-TokenB", target: "fn-AmmPool", type: "internal", label: "swap" },
+      { source: "fn-AmmPool", target: "external-PriceOracle", type: "calls", label: "get_price" },
+    ],
+  },
+};
diff --git a/frontend/app/components/CallGraph.tsx b/frontend/app/components/CallGraph.tsx
@@ -10,10 +10,10 @@ interface CallGraphProps {
 
 const RENDER_THRESHOLD = 100;
 
-const NODE_COLORS: Record<string, { bg: string; border: string }> = {
-  function: { bg: "#dbeafe", border: "#3b82f6" },
-  storage: { bg: "#fef3c7", border: "#f59e0b" },
-  external: { bg: "#f3e8ff", border: "#a855f7" },
+const NODE_COLORS: Record<string, { bg: string; border: string; dark: string }> = {
+  function: { bg: "#dbeafe", border: "#3b82f6", dark: "#1e3a5f" },
+  storage: { bg: "#fef3c7", border: "#f59e0b", dark: "#3d2e00" },
+  external: { bg: "#f3e8ff", border: "#a855f7", dark: "#2e1a47" },
 };
 
 const SEVERITY_RING: Record<string, string> = {
@@ -23,10 +23,12 @@ const SEVERITY_RING: Record<string, string> = {
   low: "#6b7280",
 };
 
-const EDGE_COLORS: Record<string, string> = {
-  calls: "#6b7280",
-  mutates: "#ef4444",
-  reads: "#3b82f6",
+/** Visual properties for each edge type. */
+const EDGE_STYLE: Record<string, { color: string; dash?: string; label: string }> = {
+  internal: { color: "#10b981", label: "Internal call" },
+  calls: { color: "#a855f7", dash: "6 3", label: "External call" },
+  mutates: { color: "#ef4444", label: "Mutates" },
+  reads: { color: "#3b82f6", label: "Reads" },
 };
 
 interface LayoutNode extends CallGraphNode {
@@ -70,7 +72,7 @@ export const CallGraph = memo(function CallGraph({ nodes, edges }: CallGraphProp
     return (
       <div className="rounded-lg border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 p-6">
         <h3 className="text-sm font-semibold text-zinc-700 dark:text-zinc-300 mb-4">
-          Contract Call Graph
+          Contract Interaction Graph
         </h3>
         <p className="text-sm text-zinc-500 dark:text-zinc-400 text-center py-8">
           No cross-contract call paths were reported for this scan.
@@ -90,12 +92,24 @@ export const CallGraph = memo(function CallGraph({ nodes, edges }: CallGraphProp
   const nodeWidth = 140;
   const nodeHeight = 40;
 
+  const internalCount = edges.filter((e) => e.type === "internal").length;
+  const externalCount = edges.filter((e) => e.type === "calls").length;
+
   return (
     <div className="rounded-lg border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 p-6">
-      <div className="flex justify-between items-center mb-4">
-        <h3 className="text-sm font-semibold text-zinc-700 dark:text-zinc-300">
-          Contract Call Graph ({nodes.length} nodes)
-        </h3>
+      <div className="flex flex-wrap justify-between items-start gap-2 mb-4">
+        <div>
+          <h3 className="text-sm font-semibold text-zinc-700 dark:text-zinc-300">
+            Contract Interaction Graph
+          </h3>
+          <p className="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5">
+            {nodes.length} contract{nodes.length !== 1 ? "s" : ""}
+            {" · "}
+            <span className="text-emerald-600 dark:text-emerald-400">{internalCount} internal</span>
+            {" · "}
+            <span className="text-purple-600 dark:text-purple-400">{externalCount} external</span>
+          </p>
+        </div>
       </div>
 
       {!shouldRender ? (
@@ -112,43 +126,63 @@ export const CallGraph = memo(function CallGraph({ nodes, edges }: CallGraphProp
         </div>
       ) : (
         <>
-          <div className="flex flex-wrap gap-x-4 gap-y-2 mb-4 text-[10px] sm:text-xs text-zinc-500 dark:text-zinc-400">
-            <span className="flex items-center gap-1">
-              <span className="inline-block w-3 h-3 rounded" style={{ background: NODE_COLORS.function.bg, border: `2px solid ${NODE_COLORS.function.border}` }} />
-              Function
-            </span>
-            <span className="flex items-center gap-1">
-              <span className="inline-block w-3 h-3 rounded" style={{ background: NODE_COLORS.storage.bg, border: `2px solid ${NODE_COLORS.storage.border}` }} />
-              Storage
-            </span>
-            <span className="flex items-center gap-1">
-              <span className="inline-block w-2 h-0.5" style={{ background: EDGE_COLORS.mutates }} />
-              Mutates
-            </span>
-            <span className="flex items-center gap-1">
-              <span className="inline-block w-2 h-0.5" style={{ background: EDGE_COLORS.calls }} />
-              Calls
-            </span>
+          {/* Legend */}
+          <div className="flex flex-wrap gap-x-5 gap-y-2 mb-4 text-[10px] sm:text-xs text-zinc-500 dark:text-zinc-400">
+            <span className="flex items-center gap-1.5 font-medium text-zinc-600 dark:text-zinc-300">Nodes:</span>
+            {(["function", "storage", "external"] as const).map((type) => (
+              <span key={type} className="flex items-center gap-1">
+                <span
+                  className="inline-block w-3 h-3 rounded"
+                  style={{
+                    background: NODE_COLORS[type].bg,
+                    border: `2px solid ${NODE_COLORS[type].border}`,
+                  }}
+                />
+                {type.charAt(0).toUpperCase() + type.slice(1)}
+              </span>
+            ))}
+            <span className="flex items-center gap-1.5 font-medium text-zinc-600 dark:text-zinc-300 ml-2">Edges:</span>
+            {(["internal", "calls", "mutates", "reads"] as const).map((type) => {
+              const style = EDGE_STYLE[type];
+              return (
+                <span key={type} className="flex items-center gap-1">
+                  <svg width="20" height="8" aria-hidden="true">
+                    <line
+                      x1="0" y1="4" x2="20" y2="4"
+                      stroke={style.color}
+                      strokeWidth={2}
+                      strokeDasharray={style.dash}
+                    />
+                  </svg>
+                  {style.label}
+                </span>
+              );
+            })}
           </div>
+
           <div className="overflow-auto max-h-[600px]">
             <svg
               width={svgWidth}
               height={svgHeight}
               viewBox={`0 0 ${svgWidth} ${svgHeight}`}
               className="bg-zinc-50 dark:bg-zinc-950 rounded"
               role="img"
-              aria-label="Contract call graph visualization"
+              aria-label="Contract interaction graph visualization"
             >
               <defs>
-                <marker id="arrowhead-mutates" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
-                  <polygon points="0 0, 8 3, 0 6" fill={EDGE_COLORS.mutates} />
-                </marker>
-                <marker id="arrowhead-calls" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
-                  <polygon points="0 0, 8 3, 0 6" fill={EDGE_COLORS.calls} />
-                </marker>
-                <marker id="arrowhead-reads" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
-                  <polygon points="0 0, 8 3, 0 6" fill={EDGE_COLORS.reads} />
-                </marker>
+                {(["internal", "calls", "mutates", "reads"] as const).map((type) => (
+                  <marker
+                    key={type}
+                    id={`arrowhead-${type}`}
+                    markerWidth="8"
+                    markerHeight="6"
+                    refX="8"
+                    refY="3"
+                    orient="auto"
+                  >
+                    <polygon points="0 0, 8 3, 0 6" fill={EDGE_STYLE[type].color} />
+                  </marker>
+                ))}
               </defs>
 
               {edges.map((edge, i) => {
@@ -160,24 +194,43 @@ export const CallGraph = memo(function CallGraph({ nodes, edges }: CallGraphProp
                 const y1 = source.y + nodeHeight / 2;
                 const x2 = target.x;
                 const y2 = target.y + nodeHeight / 2;
-                const color = EDGE_COLORS[edge.type] || EDGE_COLORS.calls;
+                const style = EDGE_STYLE[edge.type] ?? EDGE_STYLE.calls;
 
-                return (
+                // Curved path for internal edges to distinguish from straight external ones.
+                const isCurved = edge.type === "internal";
+                const midX = (x1 + x2) / 2;
+                const midY = (y1 + y2) / 2 - 30;
+                const d = isCurved
+                  ? `M ${x1} ${y1} Q ${midX} ${midY} ${x2} ${y2}`
+                  : undefined;
+
+                return isCurved ? (
+                  <path
+                    key={`edge-${i}`}
+                    d={d}
+                    fill="none"
+                    stroke={style.color}
+                    strokeWidth={2}
+                    strokeDasharray={style.dash}
+                    markerEnd={`url(#arrowhead-${edge.type})`}
+                  />
+                ) : (
                   <line
                     key={`edge-${i}`}
                     x1={x1}
                     y1={y1}
                     x2={x2}
                     y2={y2}
-                    stroke={color}
+                    stroke={style.color}
                     strokeWidth={2}
+                    strokeDasharray={style.dash}
                     markerEnd={`url(#arrowhead-${edge.type})`}
                   />
                 );
               })}
 
               {layout.map((node) => {
-                const colors = NODE_COLORS[node.type] || NODE_COLORS.function;
+                const colors = NODE_COLORS[node.type] ?? NODE_COLORS.function;
                 const severityColor = node.severity ? SEVERITY_RING[node.severity] : undefined;
 
                 return (
@@ -213,7 +266,7 @@ export const CallGraph = memo(function CallGraph({ nodes, edges }: CallGraphProp
                       fontWeight={600}
                       fill="#1f2937"
                     >
-                      {node.label.length > 16 ? node.label.slice(0, 14) + "..." : node.label}
+                      {node.label.length > 16 ? node.label.slice(0, 14) + "…" : node.label}
                     </text>
                   </g>
                 );
diff --git a/frontend/app/components/FindingsList.tsx b/frontend/app/components/FindingsList.tsx
@@ -69,8 +69,7 @@ function FindingCard({ finding }: { finding: Finding }) {
 }
 
 export function FindingsList({ findings, severityFilter }: FindingsListProps) {
-
-
+  const listRef = useRef<FixedSizeList>(null);
   const filtered = useMemo(() => {
     return severityFilter === "all"
       ? findings
@@ -116,7 +115,14 @@ export function FindingsList({ findings, severityFilter }: FindingsListProps) {
   const listHeight = Math.min(filtered.length * ITEM_HEIGHT, MAX_LIST_HEIGHT);
 
   return (
-
-    </div>
+    <FixedSizeList
+      height={listHeight}
+      itemCount={filtered.length}
+      itemSize={ITEM_HEIGHT}
+      width="100%"
+      ref={listRef}
+    >
+      {Row}
+    </FixedSizeList>
   );
 }
diff --git a/frontend/app/lib/transform.ts b/frontend/app/lib/transform.ts
@@ -402,9 +402,14 @@ function extractReportedCallGraph(
   const nodeMap = new Map<string, CallGraphNode>();
   const edges: CallGraphEdge[] = [];
 
+  // First pass: collect all known caller names so we can classify edges.
+  const knownCallers = new Set(reportedEdges.map((e) => e.caller));
+
   reportedEdges.forEach((edge) => {
     const sourceId = `fn-${edge.caller}`;
-    const targetId = `external-${edge.callee}`;
+    // If the callee is also a known caller in this project it's an internal call.
+    const isInternal = knownCallers.has(edge.callee);
+    const targetId = isInternal ? `fn-${edge.callee}` : `external-${edge.callee}`;
 
     if (!nodeMap.has(sourceId)) {
       nodeMap.set(sourceId, {
@@ -419,7 +424,7 @@ function extractReportedCallGraph(
       nodeMap.set(targetId, {
         id: targetId,
         label: edge.callee,
-        type: "external",
+        type: isInternal ? "function" : "external",
       });
     }
 
@@ -429,7 +434,7 @@ function extractReportedCallGraph(
       label: edge.function_expr
         ? `${edge.function_expr} (${edge.file}:${edge.line})`
         : `${edge.file}:${edge.line}`,
-      type: "calls",
+      type: isInternal ? "internal" : "calls",
     });
   });
 
diff --git a/frontend/app/types.ts b/frontend/app/types.ts
@@ -135,5 +135,6 @@ export interface CallGraphEdge {
   source: string;
   target: string;
   label?: string;
-  type: "calls" | "mutates" | "reads";
+  /** internal = both contracts are in the same project; calls = external contract */
+  type: "calls" | "mutates" | "reads" | "internal";
 }

Original file line number	Diff line number	Diff line change
`@@ -135,5 +135,6 @@ export interface CallGraphEdge {`
`135`	`135`	`source: string;`
`136`	`136`	`target: string;`
`137`	`137`	`label?: string;`
`138`		`- type: "calls" \| "mutates" \| "reads";`
	`138`	`+ /** internal = both contracts are in the same project; calls = external contract */`
	`139`	`+ type: "calls" \| "mutates" \| "reads" \| "internal";`
`139`	`140`	`}`