Erva Ulusoy commited on
Commit
f465b10
·
1 Parent(s): 67e78f6

added legend for kg visualization

Browse files
Files changed (2) hide show
  1. ProtHGT_app.py +3 -1
  2. 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=600)
 
 
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": true,
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