add

frontend/src/components/features/comparison/ComparisonResults.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Progress } from "@/components/ui/progress";
@@ -8,8 +8,9 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { BarChart3, Users, Network, GitBranch, TrendingUp } from "lucide-react";
-import { GraphComparisonResults } from "@/types";
+import { BarChart3, Users, Network, GitBranch, TrendingUp, Lightbulb } from "lucide-react";
+import { GraphComparisonResults, GraphDetailsResponse } from "@/types";
+import { api } from "@/lib/api";
 
 // Prefer system_name when available
 const getGraphDisplayName = (g?: { filename: string; system_name?: string }) => {
@@ -27,6 +28,55 @@ export const ComparisonResults: React.FC<ComparisonResultsProps> = ({
   const graph1_info = results.metadata?.graph1;
   const graph2_info = results.metadata?.graph2;
 
+  const [graph1Details, setGraph1Details] = useState<GraphDetailsResponse | null>(null);
+  const [graph2Details, setGraph2Details] = useState<GraphDetailsResponse | null>(null);
+
+  useEffect(() => {
+    const loadDetails = async () => {
+      try {
+        if (graph1_info?.id) setGraph1Details(await api.graphComparison.getGraphDetails(graph1_info.id));
+        if (graph2_info?.id) setGraph2Details(await api.graphComparison.getGraphDetails(graph2_info.id));
+      } catch (e) {
+        console.warn("ComparisonResults: failed to load graph details", e);
+      }
+    };
+    loadDetails();
+  }, [graph1_info?.id, graph2_info?.id]);
+
+  const entityExamples = useMemo(() => {
+    const createKey = (e: any) => `${(e?.type || "").toLowerCase()} ${(e?.name || "").toLowerCase()}`.trim();
+    const toLabel = (e: any) => `${e?.name || "(unnamed)"}${e?.type ? ` (${e.type})` : ""}`;
+    const e1 = graph1Details?.entities || [];
+    const e2 = graph2Details?.entities || [];
+    const set1 = new Map<string, any>();
+    const set2 = new Map<string, any>();
+    e1.forEach((x) => set1.set(createKey(x), x));
+    e2.forEach((x) => set2.set(createKey(x), x));
+    const overlap: string[] = [];
+    const unique1: string[] = [];
+    const unique2: string[] = [];
+    for (const [k, v] of set1) { if (k && set2.has(k)) overlap.push(toLabel(v)); else unique1.push(toLabel(v)); }
+    for (const [k, v] of set2) { if (!k) continue; if (!set1.has(k)) unique2.push(toLabel(v)); }
+    return { overlap: overlap.slice(0, 8), unique1: unique1.slice(0, 8), unique2: unique2.slice(0, 8) };
+  }, [graph1Details, graph2Details]);
+
+  const relationExamples = useMemo(() => {
+    const createKey = (r: any) => `${(r?.type || "").toLowerCase()} ${(r?.description || "").toLowerCase()}`.trim();
+    const toLabel = (r: any) => `${r?.type || "RELATION"}${r?.description ? ` — ${r.description}` : ""}`;
+    const r1 = graph1Details?.relations || [];
+    const r2 = graph2Details?.relations || [];
+    const set1 = new Map<string, any>();
+    const set2 = new Map<string, any>();
+    r1.forEach((x) => set1.set(createKey(x), x));
+    r2.forEach((x) => set2.set(createKey(x), x));
+    const overlap: string[] = [];
+    const unique1: string[] = [];
+    const unique2: string[] = [];
+    for (const [k, v] of set1) { if (k && set2.has(k)) overlap.push(toLabel(v)); else unique1.push(toLabel(v)); }
+    for (const [k, v] of set2) { if (!k) continue; if (!set1.has(k)) unique2.push(toLabel(v)); }
+    return { overlap: overlap.slice(0, 8), unique1: unique1.slice(0, 8), unique2: unique2.slice(0, 8) };
+  }, [graph1Details, graph2Details]);
+
   // Get entity and relation counts from the actual metrics
   const graph1_entity_count =
     results.entity_metrics.unique_to_graph1 +
@@ -93,6 +143,29 @@ export const ComparisonResults: React.FC<ComparisonResultsProps> = ({
 
   return (
     <div className="space-y-6">
+      {/* Key Insights */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Lightbulb className="h-5 w-5" />
+            Key Insights
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ul className="text-sm space-y-2 list-disc pl-4">
+            <li>
+              Entities overlap {formatPercentage(results.entity_metrics.overlap_ratio)} • shared {results.entity_metrics.overlap_count}; unique G1 {results.entity_metrics.unique_to_graph1}, G2 {results.entity_metrics.unique_to_graph2}.
+            </li>
+            <li>
+              Relations overlap {formatPercentage(results.relation_metrics.overlap_ratio)} • shared {results.relation_metrics.overlap_count}; unique G1 {results.relation_metrics.unique_to_graph1}, G2 {results.relation_metrics.unique_to_graph2}.
+            </li>
+            <li>
+              Structural density difference {formatNumber(Math.abs(results.structural_metrics.density_difference), 3)} • common patterns {results.structural_metrics.common_patterns_count}.
+            </li>
+          </ul>
+        </CardContent>
+      </Card>
+
       {/* Header Summary */}
       <Card>
         <CardHeader>
@@ -262,6 +335,38 @@ export const ComparisonResults: React.FC<ComparisonResultsProps> = ({
                       className="h-2"
                     />
                   </div>
+                  {/* Examples */}
+                  {(entityExamples.overlap.length || entityExamples.unique1.length || entityExamples.unique2.length) ? (
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                      <div>
+                        <div className="text-xs font-semibold mb-2">Common examples</div>
+                        <div className="flex flex-wrap gap-1">
+                          {entityExamples.overlap.map((e, i) => (
+                            <Badge key={`e-ov-${i}`} variant="secondary">{e}</Badge>
+                          ))}
+                          {!entityExamples.overlap.length && <span className="text-xs text-muted-foreground">None</span>}
+                        </div>
+                      </div>
+                      <div>
+                        <div className="text-xs font-semibold mb-2">Unique to Graph 1</div>
+                        <div className="flex flex-wrap gap-1">
+                          {entityExamples.unique1.map((e, i) => (
+                            <Badge key={`e-u1-${i}`} variant="outline">{e}</Badge>
+                          ))}
+                          {!entityExamples.unique1.length && <span className="text-xs text-muted-foreground">None</span>}
+                        </div>
+                      </div>
+                      <div>
+                        <div className="text-xs font-semibold mb-2">Unique to Graph 2</div>
+                        <div className="flex flex-wrap gap-1">
+                          {entityExamples.unique2.map((e, i) => (
+                            <Badge key={`e-u2-${i}`} variant="outline">{e}</Badge>
+                          ))}
+                          {!entityExamples.unique2.length && <span className="text-xs text-muted-foreground">None</span>}
+                        </div>
+                      </div>
+                    </div>
+                  ) : null}
                 </div>
               </AccordionContent>
             </AccordionItem>
@@ -344,6 +449,38 @@ export const ComparisonResults: React.FC<ComparisonResultsProps> = ({
                       className="h-2"
                     />
                   </div>
+                  {/* Examples */}
+                  {(relationExamples.overlap.length || relationExamples.unique1.length || relationExamples.unique2.length) ? (
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                      <div>
+                        <div className="text-xs font-semibold mb-2">Common examples</div>
+                        <div className="flex flex-wrap gap-1">
+                          {relationExamples.overlap.map((e, i) => (
+                            <Badge key={`r-ov-${i}`} variant="secondary">{e}</Badge>
+                          ))}
+                          {!relationExamples.overlap.length && <span className="text-xs text-muted-foreground">None</span>}
+                        </div>
+                      </div>
+                      <div>
+                        <div className="text-xs font-semibold mb-2">Unique to Graph 1</div>
+                        <div className="flex flex-wrap gap-1">
+                          {relationExamples.unique1.map((e, i) => (
+                            <Badge key={`r-u1-${i}`} variant="outline">{e}</Badge>
+                          ))}
+                          {!relationExamples.unique1.length && <span className="text-xs text-muted-foreground">None</span>}
+                        </div>
+                      </div>
+                      <div>
+                        <div className="text-xs font-semibold mb-2">Unique to Graph 2</div>
+                        <div className="flex flex-wrap gap-1">
+                          {relationExamples.unique2.map((e, i) => (
+                            <Badge key={`r-u2-${i}`} variant="outline">{e}</Badge>
+                          ))}
+                          {!relationExamples.unique2.length && <span className="text-xs text-muted-foreground">None</span>}
+                        </div>
+                      </div>
+                    </div>
+                  ) : null}
                 </div>
               </AccordionContent>
             </AccordionItem>