add

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

@@ -11,16 +11,10 @@ import {
 import { BarChart3, Users, Network, GitBranch, TrendingUp } from "lucide-react";
 import { GraphComparisonResults } from "@/types";
 
-const truncateGraphName = (
-  filename: string,
-  maxLength: number = 30
-): string => {
-  if (filename.length <= maxLength) return filename;
-
-  // Smart truncation - keep beginning and end if possible
-  const start = filename.substring(0, Math.floor(maxLength * 0.6));
-  const end = filename.substring(filename.length - Math.floor(maxLength * 0.3));
-  return `${start}...${end}`;
+// Prefer system_name when available
+const getGraphDisplayName = (g?: { filename: string; system_name?: string }) => {
+  if (!g) return "";
+  return g.system_name && g.system_name.trim().length > 0 ? g.system_name : g.filename;
 };
 
 interface ComparisonResultsProps {
@@ -115,8 +109,11 @@ export const ComparisonResults: React.FC<ComparisonResultsProps> = ({
                 Graph 1
               </h3>
               <div className="p-3 bg-muted/50 rounded-lg">
-                <h4 className="font-medium" title={graph1_info.filename}>
-                  {truncateGraphName(graph1_info.filename)}
+                <h4
+                  className="font-medium whitespace-normal break-words"
+                  title={getGraphDisplayName(graph1_info)}
+                >
+                  {getGraphDisplayName(graph1_info)}
                 </h4>
                 <div className="text-sm text-muted-foreground mt-1">
                   {graph1_entity_count} entities • {graph1_relation_count}{" "}
@@ -131,8 +128,11 @@ export const ComparisonResults: React.FC<ComparisonResultsProps> = ({
                 Graph 2
               </h3>
               <div className="p-3 bg-muted/50 rounded-lg">
-                <h4 className="font-medium" title={graph2_info.filename}>
-                  {truncateGraphName(graph2_info.filename)}
+                <h4
+                  className="font-medium whitespace-normal break-words"
+                  title={getGraphDisplayName(graph2_info)}
+                >
+                  {getGraphDisplayName(graph2_info)}
                 </h4>
                 <div className="text-sm text-muted-foreground mt-1">
                   {graph2_entity_count} entities • {graph2_relation_count}{" "}

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

@@ -166,10 +166,10 @@ export const GraphSelector: React.FC<GraphSelectorProps> = ({
                 {selectedGraph1 ? (
                   <div>
                     <div
-                      className="font-medium text-sm"
+                      className="font-medium text-sm whitespace-normal break-words"
                       title={getGraphDisplayName(selectedGraph1)}
                     >
-                      {truncateGraphName(getGraphDisplayName(selectedGraph1))}
+                      {getGraphDisplayName(selectedGraph1)}
                     </div>
                     <div className="text-xs text-muted-foreground">
                       {selectedGraph1.graph_type} •{" "}
@@ -200,10 +200,10 @@ export const GraphSelector: React.FC<GraphSelectorProps> = ({
                 {selectedGraph2 ? (
                   <div>
                     <div
-                      className="font-medium text-sm"
+                      className="font-medium text-sm whitespace-normal break-words"
                       title={getGraphDisplayName(selectedGraph2)}
                     >
-                      {truncateGraphName(getGraphDisplayName(selectedGraph2))}
+                      {getGraphDisplayName(selectedGraph2)}
                     </div>
                     <div className="text-xs text-muted-foreground">
                       {selectedGraph2.graph_type} •{" "}
@@ -267,10 +267,10 @@ export const GraphSelector: React.FC<GraphSelectorProps> = ({
                             <IconComponent className="h-5 w-5 text-primary flex-shrink-0" />
                             <div className="flex-1 min-w-0">
                               <div
-                                className="font-semibold text-base text-foreground mb-1 truncate"
+                                className="font-semibold text-base text-foreground mb-1 whitespace-normal break-words"
                                 title={getGraphDisplayName(graph)}
                               >
-                                {truncateGraphName(getGraphDisplayName(graph))}
+                                {getGraphDisplayName(graph)}
                               </div>
                               <div className="flex items-center gap-3 flex-wrap">
                                 <Badge
@@ -507,10 +507,10 @@ export const GraphSelector: React.FC<GraphSelectorProps> = ({
                         </div>
                         <div className="pl-7">
                           <div
-                            className="font-medium text-sm text-foreground truncate"
+                            className="font-medium text-sm text-foreground whitespace-normal break-words"
                             title={getGraphDisplayName(selectedGraph1!)}
                           >
-                            {truncateGraphName(getGraphDisplayName(selectedGraph1!), 25)}
+                            {getGraphDisplayName(selectedGraph1!)}
                           </div>
                           <div className="flex items-center gap-2 mt-1">
                             <Badge variant="outline" className="text-xs">
@@ -531,10 +531,10 @@ export const GraphSelector: React.FC<GraphSelectorProps> = ({
                         </div>
                         <div className="pl-7">
                           <div
-                            className="font-medium text-sm text-foreground truncate"
+                            className="font-medium text-sm text-foreground whitespace-normal break-words"
                             title={getGraphDisplayName(selectedGraph2!)}
                           >
-                            {truncateGraphName(getGraphDisplayName(selectedGraph2!), 25)}
+                            {getGraphDisplayName(selectedGraph2!)}
                           </div>
                           <div className="flex items-center gap-2 mt-1">
                             <Badge variant="outline" className="text-xs">

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

@@ -24,17 +24,24 @@ import { createKnowledgeGraphConfig } from "@/lib/graph-config-factory";
 import { GraphSelectionCallbacks } from "@/types/graph-visualization";
 
 const truncateGraphName = (
-  filename: string,
+  name: string,
   maxLength: number = 30
 ): string => {
-  if (filename.length <= maxLength) return filename;
-
-  // Smart truncation - keep beginning and end if possible
-  const start = filename.substring(0, Math.floor(maxLength * 0.6));
-  const end = filename.substring(filename.length - Math.floor(maxLength * 0.3));
+  if (!name) return "";
+  if (name.length <= maxLength) return name;
+  const start = name.substring(0, Math.floor(maxLength * 0.6));
+  const end = name.substring(name.length - Math.floor(maxLength * 0.3));
   return `${start}...${end}`;
 };
 
+// Prefer human-friendly system name where available
+const getGraphDisplayName = (graph?: AvailableGraph | null) => {
+  if (!graph) return "";
+  return graph.system_name && graph.system_name.trim().length > 0
+    ? graph.system_name
+    : graph.filename;
+};
+
 interface VisualComparisonProps {
   graph1: AvailableGraph;
   graph2: AvailableGraph;
@@ -307,8 +314,8 @@ export const VisualComparison: React.FC<VisualComparisonProps> = ({
         metadata: {
           ...graph1Data.metadata,
           merged: true,
-          graph1Name: graph1.filename,
-          graph2Name: graph2.filename,
+          graph1Name: getGraphDisplayName(graph1),
+          graph2Name: getGraphDisplayName(graph2),
         },
         mergeStats: {
           totalNodes: allEntities.length,
@@ -322,7 +329,7 @@ export const VisualComparison: React.FC<VisualComparisonProps> = ({
         },
       };
     },
-    [graph1.filename, graph2.filename]
+    [graph1.filename, graph2.filename, graph1.system_name, graph2.system_name]
   );
 
   // Function to apply overlay coloring based on element source
@@ -665,10 +672,10 @@ export const VisualComparison: React.FC<VisualComparisonProps> = ({
               <CardHeader className="pb-2">
                 <CardTitle className="text-base flex items-start justify-between gap-2">
                   <span
-                    title={graph1.filename}
-                    className="truncate min-w-0 flex-1"
+                    title={getGraphDisplayName(graph1)}
+                    className="min-w-0 flex-1 whitespace-normal break-words"
                   >
-                    {truncateGraphName(graph1.filename)}
+                    {getGraphDisplayName(graph1)}
                   </span>
                   <div className="flex gap-1 flex-shrink-0">
                     <Badge variant="outline" className="text-xs">
@@ -698,10 +705,10 @@ export const VisualComparison: React.FC<VisualComparisonProps> = ({
               <CardHeader className="pb-2">
                 <CardTitle className="text-base flex items-start justify-between gap-2">
                   <span
-                    title={graph2.filename}
-                    className="truncate min-w-0 flex-1"
+                    title={getGraphDisplayName(graph2)}
+                    className="min-w-0 flex-1 whitespace-normal break-words"
                   >
-                    {truncateGraphName(graph2.filename)}
+                    {getGraphDisplayName(graph2)}
                   </span>
                   <div className="flex gap-1 flex-shrink-0">
                     <Badge variant="outline" className="text-xs">
@@ -732,8 +739,8 @@ export const VisualComparison: React.FC<VisualComparisonProps> = ({
               <CardHeader className="pb-2">
                 <CardTitle className="text-base flex items-start justify-between gap-2">
                   <span
-                    title={`${graph1.filename} + ${graph2.filename}`}
-                    className="truncate min-w-0 flex-1"
+                    title={`${getGraphDisplayName(graph1)} + ${getGraphDisplayName(graph2)}`}
+                    className="min-w-0 flex-1 whitespace-normal break-words"
                   >
                     Overlay Comparison
                   </span>