color the edge and node titles based on type

visualize_kg.py

@@ -277,9 +277,12 @@ def visualize_protein_subgraph(data, protein_id, prediction_df, limit=10):
                 else:
                     node_name = name_info['GO_term'][source_str]
                 url = get_node_url(source_type, source_str)
-                title = f"{node_name} ({NODE_LABEL_TRANSLATION[source_type] if source_type in NODE_LABEL_TRANSLATION else source_type})"
+                node_color = NODE_TYPE_COLORS[source_type]
+                node_type_label = NODE_LABEL_TRANSLATION[source_type] if source_type in NODE_LABEL_TRANSLATION else source_type
                 if url:
-                    title = f'<a href="{url}" target="_blank">{title}</a>'
+                    title = f"<div style='color: {node_color}'><a href='{url}' target='_blank'>{node_name} ({node_type_label})</a></div>"
+                else:
+                    title = f"<div style='color: {node_color}'>{node_name} ({node_type_label})</div>"
                 net.add_node(source_str, 
                            label=source_str,
                            shape="dot", 
@@ -297,9 +300,12 @@ def visualize_protein_subgraph(data, protein_id, prediction_df, limit=10):
                 else:
                     node_name = name_info['GO_term'][target_str]
                 url = get_node_url(target_type, target_str)
-                title = f"{node_name} ({NODE_LABEL_TRANSLATION[target_type] if target_type in NODE_LABEL_TRANSLATION else target_type})"
+                node_color = NODE_TYPE_COLORS[target_type]
+                node_type_label = NODE_LABEL_TRANSLATION[target_type] if target_type in NODE_LABEL_TRANSLATION else target_type
                 if url:
-                    title = f'<a href="{url}" target="_blank">{title}</a>'
+                    title = f"<div style='color: {node_color}'><a href='{url}' target='_blank'>{node_name} ({node_type_label})</a></div>"
+                else:
+                    title = f"<div style='color: {node_color}'>{node_name} ({node_type_label})</div>"
                 net.add_node(target_str, 
                            label=target_str,
                            shape="dot", 
@@ -309,32 +315,36 @@ def visualize_protein_subgraph(data, protein_id, prediction_df, limit=10):
                            size=15,
                            mass=1.5)
                 added_nodes.add(target_str)
+
             # Add edge with relationship type and probability as label
             edge_label = f"{relation_type}"
             if probability is not None:
                 if probability == 'no_pred':
                     edge_color = '#219ebc'
-                    edge_label += ' (P=Not generated)'
+                    title_text = f"{relation_type} (P=Not generated)"
                 else:
-                    edge_label += f" (P={probability:.2f})"
+                    title_text = f"{relation_type} (P={probability:.2f})"
                     edge_color = '#8338ec' if is_ground_truth else '#c1121f'
-                # if validated prediction purple, if non-validated prediction red, if no prediction (directly from database) blue
+                # Add color to edge title
+                title_text = f"<div style='color: {edge_color}'>{title_text}</div>"
                 net.add_edge(source_str, target_str, 
-                        label=edge_label, 
+                        label='',  # Empty label
                         font={'size': 0},
                         color=edge_color,
-                        title=edge_label,
+                        title=title_text,
                         length=200,
                         smooth={'type': 'curvedCW', 'roundness': 0.1})
             else:
+                edge_color = '#666666'
+                title_text = f"<div style='color: {edge_color}'>{edge_label}</div>"
                 net.add_edge(source_str, target_str, 
-                        label=edge_label,
+                        label='',  # Empty label
                         font={'size': 0},
-                        color='#666666',  # Keep default gray for non-GO edges
-                        title=edge_label,
+                        color=edge_color,
+                        title=title_text,
                         length=200,
                         smooth={'type': 'curvedCW', 'roundness': 0.1})
-
+                
     # LEGEND
     legend_html = """
     <style>
@@ -535,6 +545,10 @@ def visualize_protein_subgraph(data, protein_id, prediction_df, limit=10):
             padding: 5px;
             z-index: 1000;
         }
+        div.popup a {
+            color: inherit;
+            text-decoration: underline;
+        }
     """
 
     # Insert the custom CSS in the head