Colored nodes (#302)

* color coded nodes, relative to how many peptides were matched across node * uniform color selection * renaming color scale function * cleanup * add disclaimer for (rarely) cut-off node labels
cschlaffner · Dec 12, 2023 · dd9018b · dd9018b
1 parent 867052a
commit dd9018b
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 15 deletions.
diff --git a/ui/runs/templates/runs/protein_graph.html b/ui/runs/templates/runs/protein_graph.html
@@ -78,10 +78,19 @@
                             'text-valign': 'center',
                             'text-halign': 'center',
                             'width': getWidth,
-                            'background-color': 'lightblue',
                             'horizontal-text-margin': '10px',
-                            'color': function (node) {
-                                return node.data('match') === 'true' ? 'red' : 'black';
+                            'color': 'black',
+                            'background-color': function (node) {
+                                let max_peptides = {{ max_peptides }};
+                                let min_peptides = {{ min_peptides }};
+                                let peptides_count = node.data("peptides_count");
+                                if (peptides_count > 0) {
+                                    let peptide_interpolation = (peptides_count - min_peptides) / (max_peptides - min_peptides);
+                                    return getColorFromScale(peptide_interpolation);
+                                }
+                                else {
+                                    return '#ccc';
+                                }
                             }
                         }
                     },
@@ -115,7 +124,7 @@
                             return div;
                         },
                         // changing the placement from top to bottom does not change the positioning but wrecks the
-                        // ability to move nodes in a reasonable way
+                        // ability to move nodes in a reasonable way. This is some sort of bug I was not able to fix
                         placement: 'top',
                         removeOnDestroy: true,
                     });
@@ -142,6 +151,20 @@
             var url = URL.createObjectURL(blob);
             return url;
         };
+
+        function getColorFromScale(value) {
+            value = Math.min(1, Math.max(0, value));
+            var lightnessMin = 90; // very light
+            var lightnessMax = 55; // somewhat dark
+
+            var hue = 9; // muted red hue
+            var saturation = 60;
+            // Interpolate the lightness value
+            var lightness = lightnessMin + (lightnessMax - lightnessMin) * value;
+
+            return 'hsl(' + hue + ', ' + saturation + '%, ' + lightness + '%)';
+        }
+
     </script>
 {% endblock %}
 
@@ -205,7 +228,7 @@ <h5 class="ms-3 mb-0 fw-bold">Protein: {{ protein_id }}</h5>
                     </div>
                 </div>
             </div>
-            <div id="save-svg-button" class="border-top">
+            <div id="save-svg-button" class="border-top border-bottom">
                 <div class="row">
                     <button class="btn btn-grey col-4 my-2 mx-5"
                             onclick="saveAsSvg()">Save as SVG
@@ -215,6 +238,11 @@ <h5 class="ms-3 mb-0 fw-bold">Protein: {{ protein_id }}</h5>
                     </button>
                 </div>
             </div>
+            <div class="border-top border-bottom">
+                <div class="card-header d-flex p-3 align-items-center bg-white border-bottom">
+                    Disclaimer: If node-labels are cut-off, try zooming in or another browser.
+                </div>
+            </div>
         </div>
     </div>
 {% endblock %}
diff --git a/ui/runs/views.py b/ui/runs/views.py
@@ -816,17 +816,33 @@ def protein_graph(request, run_name, index: int):
 
     graph = nx.read_graphml(graph_path)
 
-    nodes = [
-        {
-            "data": {
-                "id": node,
-                "label": graph.nodes[node].get("aminoacid", "####### ERROR #######"),
-                "match": graph.nodes[node].get("match", "false"),
-                "peptides": graph.nodes[node].get("peptides", ""),
+    max_peptides = 0
+    min_peptides = 0
+    nodes = []
+
+    # count number of peptides for each node, set max_peptides and min_peptides
+    for node in graph.nodes():
+        peptides = graph.nodes[node].get("peptides", "")
+        if peptides != "":
+            peptides = peptides.split(";")
+            if len(peptides) > max_peptides:
+                max_peptides = len(peptides)
+            elif len(peptides) < min_peptides:
+                min_peptides = len(peptides)
+        nodes.append(
+            {
+                "data": {
+                    "id": node,
+                    "label": graph.nodes[node].get(
+                        "aminoacid", "####### ERROR #######"
+                    ),
+                    "match": graph.nodes[node].get("match", "false"),
+                    "peptides": graph.nodes[node].get("peptides", ""),
+                    "peptides_count": len(peptides),
+                }
             }
-        }
-        for node in graph.nodes()
-    ]
+        )
+
     edges = [{"data": {"source": u, "target": v}} for u, v in graph.edges()]
     elements = nodes + edges
 
@@ -839,6 +855,8 @@ def protein_graph(request, run_name, index: int):
             "peptide_mismatches": peptide_mismatches,
             "protein_id": protein_id,
             "filtered_blocks": outputs.get("filtered_blocks", []),
+            "max_peptides": max_peptides,
+            "min_peptides": min_peptides,
             "run_name": run_name,
             "used_memory": get_memory_usage(),
         },