From f35036b68b0ddecfcb96bbaec009e5bf14af66f1 Mon Sep 17 00:00:00 2001
From: TripZz <nico.greiner9@gmail.com>
Date: Thu, 2 Nov 2023 14:13:50 +0100
Subject: [PATCH] NN-378 Implemented pathways pane

-added statistics
-added connections
-added "to term graph"
---
 frontend/src/assets/pane/follow.png           | Bin 0 -> 10746 bytes
 .../enrichment/graph/PathwayGraph.vue         |   1 +
 frontend/src/components/pane/PaneSystem.vue   |  16 +-
 .../src/components/pane/modules/TermPane.vue  | 131 -----------------
 .../pane/modules/node/NetworkStatistics.vue   |   4 +-
 .../pane/modules/node/NodeConnections.vue     |   3 +-
 .../modules/pathways/PathwayConnections.vue   |  62 ++++++++
 .../modules/pathways/PathwayStatistics.vue    |  54 +++++++
 .../pane/modules/pathways/TermPane.vue        | 138 ++++++++++++++++++
 .../components/toolbar/modules/DEValue.vue    |   4 +-
 10 files changed, 271 insertions(+), 142 deletions(-)
 create mode 100644 frontend/src/assets/pane/follow.png
 delete mode 100644 frontend/src/components/pane/modules/TermPane.vue
 create mode 100644 frontend/src/components/pane/modules/pathways/PathwayConnections.vue
 create mode 100644 frontend/src/components/pane/modules/pathways/PathwayStatistics.vue
 create mode 100644 frontend/src/components/pane/modules/pathways/TermPane.vue

diff --git a/frontend/src/assets/pane/follow.png b/frontend/src/assets/pane/follow.png
new file mode 100644
index 0000000000000000000000000000000000000000..7c55b1457dfb16bf1c283a048cd2f9da99373589
GIT binary patch
literal 10746
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

literal 0
HcmV?d00001

diff --git a/frontend/src/components/enrichment/graph/PathwayGraph.vue b/frontend/src/components/enrichment/graph/PathwayGraph.vue
index 54b900c4..2799222b 100644
--- a/frontend/src/components/enrichment/graph/PathwayGraph.vue
+++ b/frontend/src/components/enrichment/graph/PathwayGraph.vue
@@ -51,6 +51,7 @@ export default {
                 .then((response) => {
                     if(response.data){
                         this.graph_number += 1
+                        if(this.term_graphs.size < 1) this.$store.commit('assign_term_graph', response.data)
                         this.$store.commit('assign_new_term_graph', {label: `Graph ${this.graph_number}`, graph: response.data})
                         this.term_graphs.add({ id: this.graph_number, label: `Graph ${this.graph_number}`, graph: response.data});
                     }
diff --git a/frontend/src/components/pane/PaneSystem.vue b/frontend/src/components/pane/PaneSystem.vue
index 327dc612..03d628eb 100644
--- a/frontend/src/components/pane/PaneSystem.vue
+++ b/frontend/src/components/pane/PaneSystem.vue
@@ -13,15 +13,17 @@
             :gephi_data='gephi_data'
             @active_item_changed = 'active_item = $event'
         ></NodePane>
-    </div>
-        <!-- <div class="main-section">
-
-            <TermPane v-show="active_tab === 'term'" 
+        <TermPane v-show="active_tab === 'Pathway'" 
             :active_term='active_term' 
             :gephi_data='gephi_data'
             @active_item_changed = 'active_item = $event'
             @highlight_subset_changed = 'highlight_subset = $event'
-            ></TermPane>
+        ></TermPane>
+
+    </div>
+        <!-- <div class="main-section">
+
+            
             <SubsetPane v-show="active_tab === 'subset'"
             :active_subset='active_subset'
             :gephi_data='gephi_data'
@@ -46,7 +48,7 @@
 <script>
 
 import NodePane from '@/components/pane/modules/node/NodePane.vue'
-// import TermPane from '@/components/pane/modules/TermPane.vue'
+import TermPane from '@/components/pane/modules/pathways/TermPane.vue'
 // import SubsetPane from '@/components/pane/modules/SubsetPane.vue'
 // import DEValuePane from '@/components/pane/modules/DEValuePane.vue'
 // import EnrichmentLayerPane from '@/components/pane/modules/EnrichmentLayerPane.vue'
@@ -57,7 +59,7 @@ export default {
     emits:['active_node_changed','active_term_changed', 'active_subset_changed', 'active_combine_changed', 'active_layer_changed', 'active_termlayers_changed'],
     components: {
         NodePane,
-        // TermPane,
+        TermPane,
         // SubsetPane,
         // DEValuePane,
         // EnrichmentLayerPane
diff --git a/frontend/src/components/pane/modules/TermPane.vue b/frontend/src/components/pane/modules/TermPane.vue
deleted file mode 100644
index eb6860eb..00000000
--- a/frontend/src/components/pane/modules/TermPane.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<template>
-    <div class="text" v-if="active_term !== null">
-        <div class="headertext">
-            <span>{{active_term.name}}</span>
-        </div>
-        <div class="nodeattributes">
-            <div class="change-level-menu">
-                <button id="down_level" v-on:click="change_level()">Apply</button>
-                <button id="up_level" v-on:click="revert_level()">Revert</button>
-            </div>
-            <button class="go-button" v-on:click="to_term()">Go Term</button>
-            <div class="p">
-                <span>Statistics:</span>
-                <button v-on:click="expand_stats = !expand_stats" id="expand-btn">Expand</button>
-            </div>
-                <div class="statistics" id="statistics" v-show="expand_stats === true">
-                    <ul>
-                        <li class="membership" v-for="(value, key) in statistics" :key="key" >
-                            <span><strong>{{key}}: </strong>{{value}}</span>
-                        </li>
-                    </ul>
-                </div>
-            <div class="p">
-            <span>Connections:</span>
-            <button v-on:click="copyclipboard()" id="copy-btn">Copy</button>
-            <button v-on:click="expand_proteins=!expand_proteins" id="expand-btn">Expand</button>
-            </div>
-            <div class="link" id="link" v-show="expand_proteins === true">
-                <ul>
-                    <li class="membership" v-for="link in links" :key="link" >
-                        <a href="#" v-on:click="select_node(link)">{{link.label}}</a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'TermPane',
-    props: ['active_term','gephi_data'],
-    emits: ['active_item_changed', 'highlight_subset_changed'],
-    data() {
-        return {
-            links: null,
-            term_history: [],
-            statistics: {},
-            expand_stats: false,
-            expand_proteins: false,
-            term_item: {
-                value: null,
-                imageSrc: require('@/assets/pane/enrichment-icon.png')
-            }
-        }
-    },
-    watch: {
-        active_term() {
-            var com = this
-            if (com.active_term == null) {
-
-                return;
-            }
-            const { category, id, fdr_rate, p_value } = com.active_term;
-            com.statistics = { category, id, fdr_rate, p_value }
-
-            com.term_item.value = com.active_term
-            com.$emit('active_item_changed',{ "term": com.term_item })
-
-            const activeTermProteins = new Set(com.active_term.proteins);
-            com.links = com.gephi_data.nodes.filter(node => activeTermProteins.has(node.id));
-
-        }
-    },
-    methods: {
-        copyclipboard(){
-            var com = this;
-
-            var textToCopy = [];
-            for(var link of com.links) textToCopy.push(link.label); 
-            navigator.clipboard.writeText(textToCopy.join("\n"));
-        },
-        change_level() {
-            var com = this;
-
-            this.emitter.emit("enrichTerms", com.active_term.proteins);
-        },
-        revert_level() {
-
-            this.emitter.emit("enrichTerms", null);
-
-        },
-        to_term(){
-            var com = this;
-            this.$store.commit('assign_active_enrichment_node', com.active_term)
-            this.$router.push("terms")
-        },
-        select_node(value) {
-            this.emitter.emit("searchNode", value);
-        },
-    }
-}
-</script>
-
-<style>
-    #termpane {
-        visibility: hidden;
-    }
-    .pane-show {
-        transform: translateX(326px);
-    }
-    .change-level-menu button{
-        color: #fff;
-        border-style: outset;
-        border-width: 1px;
-        border-radius: 20px;
-        padding: 3px;
-        background-color: rgba(0, 0, 0, 0.7);
-        margin-bottom: 5px;
-    }
-    .go-button {
-        color: #fff;
-        border-style: outset;
-        border-width: 1px;
-        border-radius: 20px;
-        padding: 3px;
-        background-color: rgba(0, 0, 0, 0.7);
-        margin-bottom: 5px;
-    }
-
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/pane/modules/node/NetworkStatistics.vue b/frontend/src/components/pane/modules/node/NetworkStatistics.vue
index 2262070e..434f9edd 100644
--- a/frontend/src/components/pane/modules/node/NetworkStatistics.vue
+++ b/frontend/src/components/pane/modules/node/NetworkStatistics.vue
@@ -103,7 +103,8 @@ export default {
 }
 
 #statistics .network-results {
-    height: 67%;
+    margin-top: 2%;
+    height: 58%;
     overflow: scroll;
 }
 
@@ -131,6 +132,7 @@ export default {
 }
 .network-results td:last-child {
     font-size: 0.7vw;
+    margin-bottom: 1%;
     color: white;
     width:  30%;
     align-self: center;
diff --git a/frontend/src/components/pane/modules/node/NodeConnections.vue b/frontend/src/components/pane/modules/node/NodeConnections.vue
index a0cdba4a..79bd0657 100644
--- a/frontend/src/components/pane/modules/node/NodeConnections.vue
+++ b/frontend/src/components/pane/modules/node/NodeConnections.vue
@@ -47,7 +47,8 @@ export default {
 }
 
 #connect .network-results {
-    height: 68%;
+    margin-top: 2%;
+    height: 62%;
     overflow: scroll;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/pane/modules/pathways/PathwayConnections.vue b/frontend/src/components/pane/modules/pathways/PathwayConnections.vue
new file mode 100644
index 00000000..4d1472cf
--- /dev/null
+++ b/frontend/src/components/pane/modules/pathways/PathwayConnections.vue
@@ -0,0 +1,62 @@
+<template>
+    <div id="pathway-connect">
+        <div class="pane-sorting">
+            <a class="pane_attributes" >nodes</a>
+            <a class="pane_values">cluster</a>
+        </div>
+
+        <div class="network-results" tabindex="0" @keydown="handleKeyDown">
+            <table >
+                <tbody>
+                    <tr v-for="(entry, index) in links" :key="index" class="option">
+                        <td>
+                            <div class="statistics-attr">
+                                <a href="#">{{entry.attributes["Name"]}}</a>
+                            </div>
+                        </td>
+                        <td>
+                            <a class="statistics-val">{{entry.attributes["Modularity Class"]}}</a>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'PathwayConnections',
+    props: ['active_term','gephi_data'],
+    data() {
+        return {
+            links: []
+        }
+    },
+    watch: {
+        active_term(){
+            var com = this
+            const activeTermProteins = new Set(com.active_term.proteins);
+            com.links = com.gephi_data.nodes.filter(node => activeTermProteins.has(node.id));
+        }
+    }
+}
+</script>
+
+<style>
+#pathway-connect {
+    width: 100%;
+    height: 100%;
+    top: 8.35%;
+    position: absolute;
+    font-family: 'ABeeZee', sans-serif;
+    padding: 0% 2% 2% 2%;
+}
+
+#pathway-connect .network-results {
+    margin-top: 2%;
+    height: 82%;
+    overflow: scroll;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/pane/modules/pathways/PathwayStatistics.vue b/frontend/src/components/pane/modules/pathways/PathwayStatistics.vue
new file mode 100644
index 00000000..95a11ac3
--- /dev/null
+++ b/frontend/src/components/pane/modules/pathways/PathwayStatistics.vue
@@ -0,0 +1,54 @@
+<template>
+    <div id="statistics">
+        <div class="pane-sorting">
+            <a class="pane_attributes" >values</a>
+            <a class="pane_values">attributes</a>
+        </div>
+
+        <div class="network-results" tabindex="0" @keydown="handleKeyDown">
+            <table >
+                <tbody>
+                    <tr v-for="(key, entry, index) in statistics" :key="index" class="option">
+                        <td>
+                            <div class="statistics-attr">
+                                <a href="#">{{key}}</a>
+                            </div>
+                        </td>
+                        <td>
+                            <a class="statistics-val">{{entry}}</a>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'PathwayStatistics',
+    props: ['active_term'],
+    data() {
+        return {
+            statistics: {}
+        }
+    },
+    watch: {
+        active_term(){
+            console.log(this.active_term)
+            var com = this
+            if (com.active_term == null) {
+
+                return;
+            }
+            const { category, id, fdr_rate, p_value } = com.active_term;
+            com.statistics = { category, id, fdr_rate, p_value }
+
+        }
+    }
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/pane/modules/pathways/TermPane.vue b/frontend/src/components/pane/modules/pathways/TermPane.vue
new file mode 100644
index 00000000..340b5cb2
--- /dev/null
+++ b/frontend/src/components/pane/modules/pathways/TermPane.vue
@@ -0,0 +1,138 @@
+<template>
+    <div class="text" v-show="active_term !== null">
+        <div id="colorbar-pathway">
+            <div class='colorbar-text' v-if="active_term !== null">
+                {{active_term.name}}
+            </div>
+            <div class='colorbar-img' v-on:click="to_term()">
+                <img src="@/assets/pane/follow.png">
+            </div>
+        </div>
+        <div class="nodeattributes">
+            <div id="network" class="subsection">
+                <div class="subsection-header">
+                    <span>pathway statistics</span>
+                </div>
+                <div class="subsection-main">
+                    <PathwayStatistics
+                    :active_term='active_term' 
+                    ></PathwayStatistics>
+                </div>
+            </div>
+            <div id="pathway-connections" class="subsection">
+                <div class="subsection-header">
+                    <span>connections</span>
+                </div>
+                <div class="subsection-main">
+                    <PathwayConnections
+                    :active_term='active_term'
+                    :gephi_data='gephi_data'
+                    ></PathwayConnections>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import PathwayStatistics from '@/components/pane/modules/pathways/PathwayStatistics.vue'
+import PathwayConnections from '@/components/pane/modules/pathways/PathwayConnections.vue'
+
+export default {
+    name: 'TermPane',
+    props: ['active_term','gephi_data'],
+    emits: ['active_item_changed', 'highlight_subset_changed'],
+    components:{
+        PathwayStatistics,
+        PathwayConnections
+    },
+    data() {
+        return {
+            term_history: [],
+            expand_stats: false,
+            expand_proteins: false,
+            term_item: {
+                value: null,
+                imageSrc: require('@/assets/pane/enrichment-icon.png')
+            }
+        }
+    },
+    watch: {
+        active_term() {
+            var com = this
+            if (com.active_term == null) {
+
+                return;
+            }
+
+            console.log(com.active_term)
+            com.term_item.value = com.active_term
+            com.$emit('active_item_changed',{ "Pathway": com.term_item })
+
+        }
+    },
+    methods: {
+        copyclipboard(){
+            var com = this;
+
+            var textToCopy = [];
+            for(var link of com.links) textToCopy.push(link.label); 
+            navigator.clipboard.writeText(textToCopy.join("\n"));
+        },
+        to_term(){
+            var com = this;
+            if(!com.$store.state.term_graph_data) {
+                alert("There is no term graph")
+                return
+            }
+
+            this.$store.commit('assign_active_enrichment_node', com.active_term)
+            this.$router.push("terms")
+        },
+        select_node(value) {
+            this.emitter.emit("searchNode", value);
+        },
+    }
+}
+</script>
+
+<style>
+    #colorbar-pathway{
+        position: relative;
+        display: flex;
+        border-radius: 5px;
+        margin-top: 5%;
+        width: 70%;
+        color: white;
+        align-items: center;
+        text-align: center;
+        justify-content: center;
+        transform: translate(13.5%);
+        font-family: 'ABeeZee', sans-serif;
+        font-size: 0.9vw;
+    }
+    .colorbar-text {
+        width: 100%;
+        background-color: darkgreen;
+    }
+    .colorbar-img {
+        width: 15%;
+        left: 100%;
+        height: 100%;
+        position: fixed;
+        display: -webkit-flex;
+        align-items: center;
+        background-color: black;
+        padding: 1%;
+    }
+
+    .colorbar-img img {
+        padding: 5% 23% 5% 23%;
+        filter: invert(100%);
+    }
+
+    #pathway-connections {
+        height: 40%;
+    }
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/toolbar/modules/DEValue.vue b/frontend/src/components/toolbar/modules/DEValue.vue
index 798feccc..45c15830 100644
--- a/frontend/src/components/toolbar/modules/DEValue.vue
+++ b/frontend/src/components/toolbar/modules/DEValue.vue
@@ -6,7 +6,7 @@
         <span class="selected-de" v-if="selected_func !== null">({{ selected_func }})</span>
         <div id="select-de">></div>
         <div class="subform-de-values" v-if="show_subselection && dcoloumns">
-            <div class="de-coloumn-values" v-for="(entry, index) in dcoloumns" :key="index" v-on:click="show_whole(entry)" :class="{selected: selected_func == entry}">
+            <div class="de-coloumn-values" v-for="(entry, index) in dcoloumns" :key="index" v-on:click="show_whole(entry)" :class="{selectedde: selected_func == entry}">
                 <a>{{ entry }}</a>
             </div>
         </div>
@@ -75,7 +75,7 @@ export default {
     padding: 0.1vw;
 }
 
-.selected {
+.selectedde {
     background-color: #0A0A1A;
     border-radius: 5px;
 }