edge title fix

visualize_kg.py

@@ -443,10 +443,117 @@ def visualize_protein_subgraph(data, protein_id, prediction_df, limit=10):
     file_path = os.path.join('temp_viz', f'{protein_id}_graph.html')
     
     net.save_graph(file_path)
+    
     with open(file_path, 'r', encoding='utf-8') as f:
         content = f.read()
+
+    # Add the custom popup JavaScript code before the return network statement
+    custom_popup_code = """
+        // make a custom popup
+        var popup = document.createElement("div");
+        popup.className = 'popup';
+        popupTimeout = null;
+        popup.addEventListener('mouseover', function () {
+            if (popupTimeout !== null) {
+                clearTimeout(popupTimeout);
+                popupTimeout = null;
+            }
+        });
+        popup.addEventListener('mouseout', function () {
+            if (popupTimeout === null) {
+                hidePopup();
+            }
+        });
+        container.appendChild(popup);
+
+        // use the popup event to show
+        network.on("showPopup", function (params) {
+            showPopup(params);
+        });
+
+        // use the hide event to hide it
+        network.on("hidePopup", function (params) {
+            hidePopup();
+        });
+
+        // hiding the popup through css
+        function hidePopup() {
+            popupTimeout = setTimeout(function () { popup.style.display = 'none'; }, 500);
+        }
+
+        // showing the popup
+        function showPopup(nodeId) {
+            // get the data from the vis.DataSet
+            var nodeData = nodes.get(nodeId);
+            // get the position of the node
+            var posCanvas = network.getPositions([nodeId])[nodeId];
+
+            if (!nodeData) {
+                var edgeData = edges.get(nodeId);
+                var poses = network.getPositions([edgeData.from, edgeData.to]);
+                var middle_x = (poses[edgeData.to].x - poses[edgeData.from].x) * 0.5;
+                var middle_y = (poses[edgeData.to].y - poses[edgeData.from].y) * 0.5;
+                posCanvas = poses[edgeData.from];
+                posCanvas.x = posCanvas.x + middle_x;
+                posCanvas.y = posCanvas.y + middle_y;
+
+                popup.innerHTML = edgeData.title;
+            } else {
+                popup.innerHTML = nodeData.title;
+                // get the bounding box of the node
+                var boundingBox = network.getBoundingBox(nodeId);
+                posCanvas.x = posCanvas.x + 0.5 * (boundingBox.right - boundingBox.left);
+                posCanvas.y = posCanvas.y + 0.5 * (boundingBox.top - boundingBox.bottom);
+            };
+
+            //position tooltip:
+            // convert coordinates to the DOM space
+            var posDOM = network.canvasToDOM(posCanvas);
+
+            // Give it an offset
+            posDOM.x += 10;
+            posDOM.y -= 20;
+
+            // show and place the tooltip.
+            popup.style.display = 'block';
+            popup.style.top = posDOM.y + 'px';
+            popup.style.left = posDOM.x + 'px';
+        }
+    """
+
+    # Add the custom popup CSS
+    custom_popup_css = """
+        /* position absolute is important and the container has to be relative or absolute as well. */
+        div.popup {
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            display: none;
+            background-color: white;
+            border-radius: 3px;
+            border: 1px solid #ddd;
+            box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
+            padding: 5px;
+            z-index: 1000;
+        }
+    """
+
+    # Insert the custom CSS in the head
+    content = content.replace('</style>', f'{custom_popup_css}</style>')
+
+    # Insert the custom popup code before the "return network;" statement
+    content = content.replace('return network;', f'{custom_popup_code}\nreturn network;')
+
+    # Remove the original tooltip-hiding CSS if it exists
+    content = content.replace("""
+        /* hide the original tooltip */
+        .vis-network-tooltip {
+          display:none;
+        }""", "")
+
     # Insert the legend before the closing body tag
     content = content.replace('</body>', f'{legend_html}</body>')
+    
     with open(file_path, 'w', encoding='utf-8') as f:
         f.write(content)