Added more attributes and compatibility with chrome

frontend/src/components/enrichment/graph/PathwayGraph.vue

@@ -2,9 +2,9 @@
     <div class="slider" tabindex="0">
         <div v-for="(entry, index) in filt_graphs" :key="index" class="graph" v-on:click="switch_graph(entry)" @mouseover="activeGraphIndex = index" @mouseout="activeGraphIndex = -1">
             <SnapshotGraph :propValue="entry" :index="entry.id"/>
-            <div class="graph-options" v-show="activeGraphIndex == index" >
-                <div class="bookmark-graph" v-on:click.stop="add_graph(entry)" :class="{ checked: favourite_graphs.has(entry.id)}" ref="checkboxStatesGraph"></div>
-                <img  class="remove-graph" src="@/assets/pathwaybar/cross.png" v-on:click.stop="remove_graph(entry)">
+            <div class="graph-options" >
+                <div class="bookmark-graph"  v-show="activeGraphIndex == index"  v-on:click.stop="add_graph(entry)" :class="{ checked: favourite_graphs.has(entry.id)}" ref="checkboxStatesGraph"></div>
+                <img  class="remove-graph" v-show="activeGraphIndex == index" src="@/assets/pathwaybar/cross.png" v-on:click.stop="remove_graph(entry)">
                 <div class="graph-name colortype">
                     <input type="text" v-model="entry.label" class="empty" @click.stop />
                 </div>
@@ -156,11 +156,12 @@ export default {
 
     .graph-section .slider {
         position: absolute;
-        width: 90.78%;
+        width: 100%;
         height: 100%;
         display: flex;
-        align-items: center;
-        overflow-x: scroll;
+        padding: 1%;
+        flex-wrap: wrap;
+        overflow-y: scroll;
         scroll-behavior: smooth;
         scroll-snap-type: x mandatory;
 
@@ -179,11 +180,9 @@ export default {
 
     .graph-section .slider .graph{
         position: relative;
-        width: 31.4%;
-        height: 71.71%;
+        width: 20%;
+        height: 50%;
         flex-shrink: 0;
-        margin: 0% 1% 0% 1%;
-        border-radius: 5px;
         border: 1px solid #FFF;
         background: rgba(217, 217, 217, 0.12);
         transform-origin: center center;

frontend/src/components/enrichment/graph/SnapshotGraph.vue

@@ -69,5 +69,6 @@ export default {
     width: 100%;
     position: absolute;
     overflow: scroll;
+    object-fit: scale-down;
 }
 </style>

frontend/src/components/interface/SearchField.vue

@@ -66,11 +66,21 @@ export default {
     height: 3.98%;
     display: flex;
     position: absolute;
-    backdrop-filter: blur(7.5px);
     align-content: center;
     justify-content: center;
 }
 
+#search-menu:after {
+    content:"";
+    position:absolute;
+    z-index: 1;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    backdrop-filter: blur(7.5px);
+}
+
 .search-field{
     width: 100%;
     height: 100%;
@@ -113,10 +123,10 @@ opacity: 70%;
 }
 
 #search-menu .results {
-    position: fixed;
-    width: 19.84%;
-    max-height: 20%;
-    top: 5.78%;
+    position: absolute;
+    width: 100%;
+    left: 0%;
+    top: 100%;
     padding: 0.3% 0 0.3% 0;
     border-radius: 0 0 5px 5px;
     background: rgba(222, 222, 222, 0.3);

frontend/src/components/pane/modules/node/NetworkStatistics.vue

@@ -28,7 +28,7 @@
 
 export default {
     name: 'NetworkStatistics',
-    props: ['active_node'],
+    props: ['active_node','mode'],
     data() {
         return {
             statistics: {}
@@ -42,8 +42,9 @@ export default {
                 return;
             }
 
-            const { Degree, "Ensembl ID": EnsemblID } = com.active_node.attributes;
-            com.statistics = { Degree, EnsemblID }
+            const { Degree, "Ensembl ID": EnsemblID, "Betweenness Centrality": BetweenesCentrality, "Modularity Class": Cluster, PageRank, Category, FDR} = com.active_node.attributes;
+            if (this.mode == "protein") com.statistics = {  Cluster, Degree, EnsemblID, BetweenesCentrality, PageRank }
+            else com.statistics = {  Cluster, Degree, EnsemblID,Category, BetweenesCentrality, PageRank, FDR }
             if(com.$store.state.dcoloumns != null) {
                 com.$store.state.dcoloumns.forEach(dcoloumn => {
                     com.statistics[dcoloumn] = com.active_node.attributes[dcoloumn]
@@ -80,8 +81,8 @@ export default {
 }
 
 .pane_values{
-    position: fixed;
-    left: 90.5%;
+    position: absolute;
+    left: 68.5%;
 }
 
 .statistics-attr{

frontend/src/components/pane/modules/node/NodePane.vue

@@ -19,6 +19,7 @@
                 <div class="subsection-main colortype">
                     <NetworkStatistics
                     :active_node='active_node' 
+                    :mode='mode' 
                     ></NetworkStatistics>
                 </div>
             </div>

frontend/src/components/pane/modules/pathway/PathwayPane.vue

@@ -23,6 +23,7 @@
                 <div class="subsection-main colortype">
                     <NetworkStatistics
                     :active_node='active_node' 
+                    :mode='mode' 
                     ></NetworkStatistics>
                 </div>
             </div>

frontend/src/components/toolbar/windows/MenuWindow.vue

@@ -91,18 +91,29 @@ export default {
     left: 3.515%;
     height: fit-content;
     width: 22%;
-    top: 5.78%;
+    top: 4.98%;
     padding: 0.3% 0 0.3% 0;
     border-radius: 0 0 5px 5px;
     background: rgba(222, 222, 222, 0.61);
-    backdrop-filter: blur(7.5px);
 	overflow-y: scroll;
 	overflow-x: hidden;
 	color: white;
     border-top-color: rgba(255, 255, 255, 30%);
     border-top-width: 1px;
     border-top-style: solid;
     cursor: default;
+    z-index: 1;
+}
+
+.menu-window:after {
+    content:"";
+    position:absolute;
+    z-index: -1;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    backdrop-filter: blur(7.5px);
 }
 
 .menu-items {