NN-366 Implemented new graph parameter selection window

- adjusted structure - add new design
BackofenLab · Oct 23, 2023 · 572970a · 572970a
1 parent 5a546a2
commit 572970a
Show file tree

Hide file tree

Showing 6 changed files with 255 additions and 242 deletions.
diff --git a/frontend/src/components/term_graph/TermToolBar.vue b/frontend/src/components/term_graph/TermToolBar.vue
@@ -23,9 +23,9 @@
             <div class="menu-items">
                 <ExportScreen :type="screen_type"></ExportScreen>
                 <NodeLabelSelect :type="screen_type"></NodeLabelSelect>
-                <SelectionWindow
+                <!-- <SelectionWindow
                 @selection_status_changed = 'selection_status = $event'
-                ></SelectionWindow>
+                ></SelectionWindow> -->
                 <FDRValue></FDRValue>
                 <TermConnectedGraph></TermConnectedGraph>
             </div>
@@ -70,7 +70,7 @@ import NodeLabelSelect from '@/components/toolbar/modules/NodeLabelSelect.vue'
 import TermConnectedGraph from '@/components/term_graph/TermConnectedGraph.vue'
 import TermSearch from '@/components/term_graph/TermSearch.vue'
 import FDRValue from '@/components/term_graph/FDRValue.vue'
-import SelectionWindow from '@/components/toolbar/modules/SelectionWindow.vue'
+// import SelectionWindow from '@/components/toolbar/modules/SelectionWindow.vue'
 import SelectionList from '@/components/toolbar/modules/SelectionList.vue'
 
 
@@ -84,7 +84,7 @@ export default {
         TermSearch,
         FDRValue,
         NodeLabelSelect,
-        SelectionWindow,
+        // SelectionWindow,
         SelectionList
 
     },

diff --git a/frontend/src/components/toolbar/MainToolBar.vue b/frontend/src/components/toolbar/MainToolBar.vue
@@ -11,8 +11,7 @@
                 v-on:mouseleave="tools_active=false">
                 <img src="@/assets/toolbar/menu-burger.png" alt="Tool Icon">
             </li>
-            <li v-on:mouseover="tools_active=true"
-                v-on:mouseleave="tools_active=false">
+            <li v-on:click="selection_active=!selection_active">
                 <img src="@/assets/toolbar/settings-sliders.png" alt="Graph Icon">
             </li>
             <li v-on:click="center()">
@@ -28,7 +27,12 @@
         :tools_active = 'tools_active'
         @tools_active_changed = 'tools_active = $event'
         ></MenuWindow>
-        <ProteinList v-if="protein_active"
+        <SelectionList v-show="selection_active"
+        :gephi_data = 'gephi_data'
+        @selection_active_changed = 'selection_active = $event'>
+        </SelectionList>
+        <ProteinList v-show="protein_active"
+        :gephi_data = 'gephi_data'
         @protein_active_changed = 'protein_active = $event'>
         </ProteinList>
 
@@ -39,6 +43,7 @@
 
 import MenuWindow from '@/components/toolbar/windows/MenuWindow.vue'
 import ProteinList from '@/components/toolbar/modules/ProteinList.vue'
+import SelectionList from '@/components/toolbar/modules/SelectionList.vue'
 
 export default {
     name: 'MainToolBar',
@@ -47,11 +52,13 @@ export default {
     components: {
         MenuWindow,
         ProteinList,
+        SelectionList
     },
     data() {
         return {
             tools_active: false,
             protein_active: false,
+            selection_active: false,
         }
     },
     methods: {

diff --git a/frontend/src/components/toolbar/modules/EdgeOpacity.vue b/frontend/src/components/toolbar/modules/EdgeOpacity.vue
@@ -1,6 +1,7 @@
 <template>
     <div>
         <div class="tool-item">
+            <div class="opacity">
                 <span>Background edge opacity</span>
                 <input class="opacity-input"
                     type="number"
@@ -10,17 +11,20 @@
                     v-model="opacityBackground.value"
                     v-on:change="change_opacity('background')"
                 />
+            </div>
         </div>
         <div class="tool-item">
-            <span>Highlighted edge opacity</span>
-            <input class="opacity-input"
-                type="number"
-                v-bind:min="opacityHighlight.min"
-                v-bind:max="opacityHighlight.max"
-                v-bind:step="opacityHighlight.step"
-                v-model="opacityHighlight.value"
-                v-on:change="change_opacity('highlight')"
-            />
+            <div class="opacity">
+                <span>Highlighted edge opacity</span>
+                <input class="opacity-input"
+                    type="number"
+                    v-bind:min="opacityHighlight.min"
+                    v-bind:max="opacityHighlight.max"
+                    v-bind:step="opacityHighlight.step"
+                    v-model="opacityHighlight.value"
+                    v-on:change="change_opacity('highlight')"
+                />
+            </div>
         </div>
     </div>
 </template>
@@ -56,7 +60,7 @@ export default {
 </script>
 
 <style>
-input[type=number] { 
+.opacity input[type=number] { 
     position: absolute;
     margin-top:0.1vw;
     right: 6.3%;

diff --git a/frontend/src/components/toolbar/modules/ProteinList.vue b/frontend/src/components/toolbar/modules/ProteinList.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="tool-item">
-        <div id="protein_highlight">
+        <div id="protein_highlight" class="window-menu">
             <div class="highlight_list">
                     <textarea v-model="raw_text" rows="10" cols="30" autofocus></textarea>
                     <button v-on:click="highlight(raw_text)" id="highlight_protein">search</button>
             </div>  
-            <div id="protein_highlight_header">
+            <div id="protein_highlight_header" class="window-header">
                 <div class="headertext">
                     <span>highlight proteins</span>
                     <img  class="protein_close" src="@/assets/pathwaybar/cross.png" v-on:click="unactive_proteinlist()">
@@ -19,11 +19,11 @@
 
 export default {
     name: 'ProteinList',
+    props: ['gephi_data'],
     emits: ['protein_active_changed'],
     data() {
         return {
             raw_text: "",
-            protein_data: this.$store.state.gephi_json.data,
         }
     },
     methods: {
@@ -76,7 +76,7 @@ export default {
 
             const protein_names = new Set(proteins.toUpperCase().split("\n"))
             const subset = []
-            com.protein_data.nodes.forEach(node => {
+            com.gephi_data.nodes.forEach(node => {
                 if(protein_names.has(node.attributes['Name'])){
                     subset.push(node)
                 }
@@ -95,7 +95,7 @@ export default {
 
 <style>
 
-#protein_highlight {
+.window-menu {
     position: fixed;
     top: 30%;
     left: 42%;
@@ -115,7 +115,7 @@ export default {
     text-align: center;
 }
 
-#protein_highlight_header {
+.window-header {
     width: 100%;
     height: 9.41%;
     position: absolute;
@@ -126,21 +126,21 @@ export default {
     text-align: center;
 }
 
-#protein_highlight_header .headertext{
+.window-header .headertext{
 	color:  #0A0A1A;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
 }
-#protein_highlight_header .headertext span{
+.window-header .headertext span{
     height: 100%;
     display: flex;
     font-size: 0.9vw;
     align-items: center;
 }
 
-#protein_highlight_header .protein_close{
+.window-header .protein_close{
     right: 3%;
     width: 0.9vw;
     height: 0.9vw;