add

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

@@ -93,19 +93,26 @@ export const GraphSelector: React.FC<GraphSelectorProps> = ({
   };
 
   const truncateGraphName = (
-    filename: string,
+    name: string,
     maxLength: number = 35
   ): string => {
-    if (filename.length <= maxLength) return filename;
+    if (!name) return "";
+    if (name.length <= maxLength) return name;
 
     // 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)
-    );
+    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 a human-friendly system name if available
+  const getGraphDisplayName = (graph: AvailableGraph | null | undefined) => {
+    if (!graph) return "";
+    return graph.system_name && graph.system_name.trim().length > 0
+      ? graph.system_name
+      : graph.filename;
+  };
+
   const getSelectionNumber = (graph: AvailableGraph) => {
     if (selectedGraph1?.id === graph.id) return "1";
     if (selectedGraph2?.id === graph.id) return "2";
@@ -160,9 +167,9 @@ export const GraphSelector: React.FC<GraphSelectorProps> = ({
                   <div>
                     <div
                       className="font-medium text-sm"
-                      title={selectedGraph1.filename}
+                      title={getGraphDisplayName(selectedGraph1)}
                     >
-                      {truncateGraphName(selectedGraph1.filename)}
+                      {truncateGraphName(getGraphDisplayName(selectedGraph1))}
                     </div>
                     <div className="text-xs text-muted-foreground">
                       {selectedGraph1.graph_type} •{" "}
@@ -194,9 +201,9 @@ export const GraphSelector: React.FC<GraphSelectorProps> = ({
                   <div>
                     <div
                       className="font-medium text-sm"
-                      title={selectedGraph2.filename}
+                      title={getGraphDisplayName(selectedGraph2)}
                     >
-                      {truncateGraphName(selectedGraph2.filename)}
+                      {truncateGraphName(getGraphDisplayName(selectedGraph2))}
                     </div>
                     <div className="text-xs text-muted-foreground">
                       {selectedGraph2.graph_type} •{" "}
@@ -261,9 +268,9 @@ export const GraphSelector: React.FC<GraphSelectorProps> = ({
                             <div className="flex-1 min-w-0">
                               <div
                                 className="font-semibold text-base text-foreground mb-1 truncate"
-                                title={graph.filename}
+                                title={getGraphDisplayName(graph)}
                               >
-                                {truncateGraphName(graph.filename)}
+                                {truncateGraphName(getGraphDisplayName(graph))}
                               </div>
                               <div className="flex items-center gap-3 flex-wrap">
                                 <Badge
@@ -501,9 +508,9 @@ export const GraphSelector: React.FC<GraphSelectorProps> = ({
                         <div className="pl-7">
                           <div
                             className="font-medium text-sm text-foreground truncate"
-                            title={selectedGraph1!.filename}
+                            title={getGraphDisplayName(selectedGraph1!)}
                           >
-                            {truncateGraphName(selectedGraph1!.filename, 25)}
+                            {truncateGraphName(getGraphDisplayName(selectedGraph1!), 25)}
                           </div>
                           <div className="flex items-center gap-2 mt-1">
                             <Badge variant="outline" className="text-xs">
@@ -525,9 +532,9 @@ export const GraphSelector: React.FC<GraphSelectorProps> = ({
                         <div className="pl-7">
                           <div
                             className="font-medium text-sm text-foreground truncate"
-                            title={selectedGraph2!.filename}
+                            title={getGraphDisplayName(selectedGraph2!)}
                           >
-                            {truncateGraphName(selectedGraph2!.filename, 25)}
+                            {truncateGraphName(getGraphDisplayName(selectedGraph2!), 25)}
                           </div>
                           <div className="flex items-center gap-2 mt-1">
                             <Badge variant="outline" className="text-xs">