Spaces:
Running
Running
Erva Ulusoy
commited on
Commit
·
f465b10
1
Parent(s):
67e78f6
added legend for kg visualization
Browse files- ProtHGT_app.py +3 -1
- visualize_kg.py +95 -1
ProtHGT_app.py
CHANGED
@@ -630,7 +630,9 @@ if st.session_state.submitted:
|
|
630 |
with open(viz_info['path'], 'r', encoding='utf-8') as f:
|
631 |
html_content = f.read()
|
632 |
|
633 |
-
st.components.v1.html(html_content, height=
|
|
|
|
|
634 |
|
635 |
|
636 |
else:
|
|
|
630 |
with open(viz_info['path'], 'r', encoding='utf-8') as f:
|
631 |
html_content = f.read()
|
632 |
|
633 |
+
st.components.v1.html(html_content, height=1200)
|
634 |
+
|
635 |
+
|
636 |
|
637 |
|
638 |
else:
|
visualize_kg.py
CHANGED
@@ -180,7 +180,7 @@ def visualize_protein_subgraph(data, protein_id, prediction_df, limit=10):
|
|
180 |
"multiselect": true
|
181 |
},
|
182 |
"configure": {
|
183 |
-
"enabled":
|
184 |
"filter": ["physics", "layout", "manipulation"],
|
185 |
"showButton": true
|
186 |
},
|
@@ -265,9 +265,103 @@ def visualize_protein_subgraph(data, protein_id, prediction_df, limit=10):
|
|
265 |
length=200,
|
266 |
smooth={'type': 'curvedCW', 'roundness': 0.1})
|
267 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
268 |
# Save graph to a protein-specific file in a temporary directory
|
269 |
os.makedirs('temp_viz', exist_ok=True)
|
270 |
file_path = os.path.join('temp_viz', f'{protein_id}_graph.html')
|
|
|
271 |
net.save_graph(file_path)
|
|
|
|
|
|
|
|
|
|
|
|
|
272 |
|
273 |
return file_path, visualized_edges
|
|
|
180 |
"multiselect": true
|
181 |
},
|
182 |
"configure": {
|
183 |
+
"enabled": false,
|
184 |
"filter": ["physics", "layout", "manipulation"],
|
185 |
"showButton": true
|
186 |
},
|
|
|
265 |
length=200,
|
266 |
smooth={'type': 'curvedCW', 'roundness': 0.1})
|
267 |
|
268 |
+
# LEGEND
|
269 |
+
legend_html = """
|
270 |
+
<style>
|
271 |
+
.kg-legend {
|
272 |
+
margin-top: 20px;
|
273 |
+
padding: 20px;
|
274 |
+
border: 1px solid #ddd;
|
275 |
+
border-radius: 5px;
|
276 |
+
font-family: Arial, sans-serif;
|
277 |
+
}
|
278 |
+
.legend-section {
|
279 |
+
margin-bottom: 20px;
|
280 |
+
}
|
281 |
+
.legend-title {
|
282 |
+
margin-bottom: 15px;
|
283 |
+
color: #333;
|
284 |
+
font-size: 16px;
|
285 |
+
font-weight: bold;
|
286 |
+
}
|
287 |
+
.legend-grid {
|
288 |
+
display: grid;
|
289 |
+
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
290 |
+
gap: 12px;
|
291 |
+
}
|
292 |
+
.legend-item {
|
293 |
+
display: flex;
|
294 |
+
align-items: center;
|
295 |
+
padding: 4px;
|
296 |
+
}
|
297 |
+
.node-indicator {
|
298 |
+
width: 15px;
|
299 |
+
height: 15px;
|
300 |
+
border-radius: 50%;
|
301 |
+
margin-right: 10px;
|
302 |
+
flex-shrink: 0;
|
303 |
+
}
|
304 |
+
.edge-indicator {
|
305 |
+
width: 40px;
|
306 |
+
height: 3px;
|
307 |
+
margin-right: 10px;
|
308 |
+
flex-shrink: 0;
|
309 |
+
}
|
310 |
+
.legend-label {
|
311 |
+
font-size: 14px;
|
312 |
+
}
|
313 |
+
</style>
|
314 |
+
<div class="kg-legend">
|
315 |
+
<div class="legend-section">
|
316 |
+
<div class="legend-title">Node Types</div>
|
317 |
+
<div class="legend-grid">"""
|
318 |
+
|
319 |
+
# Node types
|
320 |
+
for node_type, color in NODE_TYPE_COLORS.items():
|
321 |
+
legend_html += f"""
|
322 |
+
<div class="legend-item">
|
323 |
+
<div class="node-indicator" style="background-color: {color};"></div>
|
324 |
+
<span class="legend-label">{node_type}</span>
|
325 |
+
</div>"""
|
326 |
+
|
327 |
+
# Edge types
|
328 |
+
legend_html += """
|
329 |
+
</div>
|
330 |
+
</div>
|
331 |
+
<div class="legend-section">
|
332 |
+
<div class="legend-title">Edge Colors</div>
|
333 |
+
<div class="legend-grid">
|
334 |
+
<div class="legend-item">
|
335 |
+
<div class="edge-indicator" style="background-color: #8338ec;"></div>
|
336 |
+
<span class="legend-label">Validated GO Prediction</span>
|
337 |
+
</div>
|
338 |
+
<div class="legend-item">
|
339 |
+
<div class="edge-indicator" style="background-color: #c1121f;"></div>
|
340 |
+
<span class="legend-label">Non-validated GO Prediction</span>
|
341 |
+
</div>
|
342 |
+
<div class="legend-item">
|
343 |
+
<div class="edge-indicator" style="background-color: #219ebc;"></div>
|
344 |
+
<span class="legend-label">Ground Truth GO Annotation</span>
|
345 |
+
</div>
|
346 |
+
<div class="legend-item">
|
347 |
+
<div class="edge-indicator" style="background-color: #666666;"></div>
|
348 |
+
<span class="legend-label">Other Relationships</span>
|
349 |
+
</div>
|
350 |
+
</div>
|
351 |
+
</div>
|
352 |
+
</div>
|
353 |
+
"""
|
354 |
+
|
355 |
# Save graph to a protein-specific file in a temporary directory
|
356 |
os.makedirs('temp_viz', exist_ok=True)
|
357 |
file_path = os.path.join('temp_viz', f'{protein_id}_graph.html')
|
358 |
+
|
359 |
net.save_graph(file_path)
|
360 |
+
with open(file_path, 'r', encoding='utf-8') as f:
|
361 |
+
content = f.read()
|
362 |
+
# Insert the legend before the closing body tag
|
363 |
+
content = content.replace('</body>', f'{legend_html}</body>')
|
364 |
+
with open(file_path, 'w', encoding='utf-8') as f:
|
365 |
+
f.write(content)
|
366 |
|
367 |
return file_path, visualized_edges
|