NN-623 Adjust functional enrichment generation in the vertical pane

BackofenLab · Dec 6, 2024 · 0e8f564 · 0e8f564
1 parent cebbde6
commit 0e8f564
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 9 deletions.
diff --git a/backend/src/new_main.py b/backend/src/new_main.py
@@ -7,6 +7,8 @@
 from util.stopwatch import Stopwatch
 from werkzeug.middleware.proxy_fix import ProxyFix
 
+import enrichment
+
 app = Flask(__name__)
 history = []
 
@@ -72,7 +74,7 @@ def graph_api():
     graph_dict = {
         "nodes": nodesDF.to_dict(orient="records"),
         "edges": edgesDF.to_dict(orient="records"),
-        "settings": {"gene_alias_mapping":{}}
+        "settings": {"gene_alias_mapping": symbol_alias_mapping, "species": species_id}
     }
 
     stopwatch.round("End")
@@ -82,6 +84,29 @@ def graph_api():
     return Response(json_str, mimetype="application/json")
 
 
+# ====================== Functional Enrichment ======================
+# ______functional_enrichment_STRING_________________________________
+# TODO Refactor this
+# Request comes from functional_enrichment.js
+@app.route("/api/subgraph/enrichment", methods=["POST"])
+def proteins_enrichment():
+    driver = database.get_driver()
+    genes = request.form.get("genes").split(",")
+    symbol_alias_mapping = json.loads(request.form.get("mapping"))
+    alias_symbol_mapping = {value: key for key, value in symbol_alias_mapping.items()}
+    species_id = int(request.form.get("species_id"))
+
+    # in-house functional enrichment
+    list_enrichment = enrichment.functional_enrichment(
+        driver, genes, species_id, symbol_alias_mapping, alias_symbol_mapping
+    )
+
+    json_str = json.dumps(
+        list_enrichment.to_dict("records"), ensure_ascii=False, separators=(",", ":")
+    )
+    return Response(json_str, mimetype="application/json")
+
+
 # # =============== Functional Term Graph ======================
 
 

diff --git a/frontend/src/components/enrichment/PathwayMenu.vue b/frontend/src/components/enrichment/PathwayMenu.vue
@@ -85,7 +85,7 @@ export default {
     var com = this;
     if (com.sorted == "bottom")
       com.generatePathways(
-        com.gephi_data.nodes[0].species,
+        com.gephi_data.settings.species,
         com.gephi_data.nodes.map((node) => node.SYMBOL)
       );
   },

diff --git a/frontend/src/graph/GraphDataProvider.vue b/frontend/src/graph/GraphDataProvider.vue
@@ -45,7 +45,7 @@
                     edge.source,
                     edge.target,
                     {
-                    color: "rgba(20,20,20,0.2)",
+                    color: "rgba(10,10,10,0.2)",
                     opacity: 0.1,
                     size: 0.1,
                     }
@@ -54,11 +54,11 @@
             this.generateGraphLayout(graph);
             this.generateGraphStatistics(graph);
             this.generateGraphColor(graph);
-            this.generateSubgraph(graph);
+            // this.generateSubgraph(graph);
 
             graph.forEachNode((node) => {
                 const size = graph.degree(node);
-                graph.setNodeAttribute(node, "size", 1 + (300 * size/graph.size));
+                graph.setNodeAttribute(node, "size", 2 + (300 * size/graph.size));
             });
             
         },

diff --git a/frontend/src/graph/utils/basic-reducer.ts b/frontend/src/graph/utils/basic-reducer.ts
@@ -31,7 +31,8 @@ interface Edge {
         res.label = "";
         res.color = "rgb(100,100,100)";
       }
-    } else if (state.hoveredNeighbors && !state.hoveredNeighbors.has(node) && state.hoveredNode !== node) {
+    } 
+    if (!state.clickedNode && state.hoveredNeighbors && !state.hoveredNeighbors.has(node) && state.hoveredNode !== node) {
       res.label = "";
       res.color = "rgb(100,100,100)";
     }
@@ -50,9 +51,9 @@ interface Edge {
         );
 
         if (state.hoveredNode && !state.clickedNode && !isConnected) {
-            res.hidden = true;
         } else if (isConnected) {
-            res.color = "rgba(50,50,50,0.5)";
+            res.color = "rgba(20,20,20,0.1)";
+        }if(!isConnected){
         }
     }
 

diff --git a/frontend/src/graph/utils/cluster.ts b/frontend/src/graph/utils/cluster.ts
@@ -59,7 +59,9 @@ export const generateCluster = (context: string, renderer: Sigma, graph: Graph)
     clusterCircle.setAttribute("cy", `${viewportPos.y}`);
     clusterCircle.setAttribute("r", `${cluster.r }`);
     clusterCircle.setAttribute("fill", cluster.color || "transparent");
-    clusterCircle.setAttribute("opacity", "0.3");
+    clusterCircle.setAttribute("opacity", "0.2");
+    clusterCircle.setAttribute("stroke", "white");
+    clusterCircle.setAttribute("stroke-width", "2");
     clusterCircle.style.display = "none";
 
     // Create SVG text element for labels

diff --git a/frontend/src/views/ProteinView.vue b/frontend/src/views/ProteinView.vue
@@ -5,18 +5,23 @@
         <GraphContainer v-if="graph" :graph="graph"/>
       </template>
     </GraphDataProvider>
+    <VerticalPane
+      :gephi_data="backend_data"
+    ></VerticalPane>
   </div>
 </template>
 
 <script>
 import GraphDataProvider from "@/graph/GraphDataProvider.vue";
 import GraphContainer from "@/graph/GraphContainer.vue";
+import VerticalPane from "@/components/verticalpane/VerticalPane.vue";
 
 export default {
   name: "ProteinView",
   components: {
     GraphDataProvider,
     GraphContainer,
+    VerticalPane
   },
   data() {
     return {