Merge pull request #27 from zprobot/main

update: samples
bigbio · Mar 7, 2024 · 95219b5 · 95219b5
2 parents dce9d17 + d177507
commit 95219b5
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 93 deletions.
diff --git a/src/components/AeShow/index.vue b/src/components/AeShow/index.vue
@@ -62,6 +62,7 @@ import { inflate } from 'pako'
 import * as echarts from 'echarts'
 import {useRouter, onBeforeRouteUpdate} from "vue-router";
 import { ref, onMounted, nextTick } from 'vue'
+import {getBoxTooltips,options} from './option'
 const router = useRouter();
 const drawer = ref(false)
 const emit = defineEmits(['changeLoading'])
@@ -112,37 +113,6 @@ const tagsTotal = [
                 "esophagus",
                 "placenta",
 ]
-// 
-const boxTooltips = {
-              trigger: 'item',
-              axisPointer: {
-                type: 'shadow'
-              },
-              textStyle: {},
-              formatter: function (param) {
-                return [
-                  "<div style='margin-bottom:5px;width:100%;border-radius:3px;text-align:center;family'><p>" +
-                    param.data[0] +
-                    ' </p></div>',
-                  '<hr size=1 style="margin: 3px 0">',
-                  "<span style='text-align:left;color:#8f9a7a;margin-right:15px;'>Max:</span>" +
-                    parseFloat(param.data[5]).toFixed(2) +
-                    '<br/>',
-                  "<span style='text-align:left;color:#8f9a7a;margin-right:15px;'>Q3:</span>" +
-                    parseFloat(param.data[4]).toFixed(2) +
-                    '<br/>',
-                  "<span style='text-align:left;color:#8f9a7a;margin-right:15px;'>Median:</span>" +
-                    parseFloat(param.data[3]).toFixed(2) +
-                    '<br/>',
-                  "<span style='text-align:left;color:#8f9a7a;margin-right:15px;'>Q1:</span>" +
-                    parseFloat(param.data[2]).toFixed(2) +
-                    '<br/>',
-                  "<span style='text-align:left;color:#8f9a7a;margin-right:15px;'>Min:</span>" +
-                    parseFloat(param.data[1]).toFixed(2) +
-                    '<br/>'
-                ].join('')
-              }
-          }
 protein.value = Array.isArray(router.currentRoute.value.query.protein) ? router.currentRoute.value.query.protein : [router.currentRoute.value.query.protein]
 routerName.value = router.currentRoute.value.name
 // get proteins
@@ -265,65 +235,6 @@ const initData = (data) => {
     tags
   }
 }
-// option
-const options = {
-  // backgroundColor: '#f4f5f2',
-    title: [
-    ],
-    dataset: [
-    ],
-    tooltip: {},
-  // color: tagsColor,
-  legend: {
-    show: true,
-    orient: 'vertical',
-    right: 10,
-    top: 60,
-    data: []
-    // bottom: 20,
-    },
-  grid: {
-      left: '10%',
-      right: '10%',
-      bottom: 60
-    },
-    yAxis: {
-      type: 'category',
-      boundaryGap: true,
-      nameGap: 30,
-      splitArea: {
-        show: false
-      },
-      splitLine: {
-        show: false
-      }
-    },
-    xAxis: {
-      type: 'value',
-      name: 'iBAQLog',
-      nameLocation: 'center',
-      nameGap: 40,
-      splitArea: {
-        show: false
-      },
-      splitLine: {
-        show: false
-      },
-      min: 1,
-      //max: 10
-    },
-    toolbox: {
-      feature: {
-        saveAsImage: {
-          type: 'png',
-          title: 'save as .png',
-          pixelRatio: 10
-        }
-      }
-    },
-    series: [
-    ]
-}
 // init image
 const init = () => {
   if (dataHistory.value.length === 1) {
@@ -390,9 +301,9 @@ const init = () => {
             color0: '#FA0000',
             borderColor: '#030609',
             borderColor0: '#030609',
-          }
+          },
       })
-      options.tooltip = boxTooltips
+      options.tooltip = getBoxTooltips(samples)
     }
   } else {
     if (routerName.value === 'tissues') {
@@ -500,7 +411,7 @@ const init = () => {
           }
         })
       })
-      options.tooltip = boxTooltips
+      options.tooltip = getBoxTooltips(samples)
     }
   }
 

diff --git a/src/components/AeShow/option.js b/src/components/AeShow/option.js
@@ -0,0 +1,97 @@
+const getBoxTooltips = (samples) => {
+    return {
+        trigger: 'item',
+        axisPointer: {
+            type: 'shadow'
+        },
+        textStyle: {},
+        formatter: function (param) {
+            return [
+                "<div style='margin-bottom:5px;width:100%;border-radius:3px;text-align:center;family'><p>" +
+                param.data[0] +
+                ' </p></div>',
+                '<hr size=1 style="margin: 3px 0">',
+                "<span style='text-align:left;color:#8f9a7a;margin-right:15px;'>Max:</span>" +
+                parseFloat(param.data[5]).toFixed(2) +
+                '<br/>',
+                "<span style='text-align:left;color:#8f9a7a;margin-right:15px;'>Q3:</span>" +
+                parseFloat(param.data[4]).toFixed(2) +
+                '<br/>',
+                "<span style='text-align:left;color:#8f9a7a;margin-right:15px;'>Median:</span>" +
+                parseFloat(param.data[3]).toFixed(2) +
+                '<br/>',
+                "<span style='text-align:left;color:#8f9a7a;margin-right:15px;'>Q1:</span>" +
+                parseFloat(param.data[2]).toFixed(2) +
+                '<br/>',
+                "<span style='text-align:left;color:#8f9a7a;margin-right:15px;'>Min:</span>" +
+                parseFloat(param.data[1]).toFixed(2) +
+                '<br/>',
+                "<span style='text-align:left;color:#8f9a7a;margin-right:15px;'>Samples:</span>" +
+                (Array.isArray(samples[0])?samples[param.componentIndex][param.dataIndex]:samples[param.dataIndex]) +
+                '<br/>',
+            ].join('')
+        }
+    }
+}
+
+// option
+const options = {
+    // backgroundColor: '#f4f5f2',
+      title: [
+      ],
+      dataset: [
+      ],
+      tooltip: {},
+    // color: tagsColor,
+    legend: {
+      show: true,
+      orient: 'vertical',
+      right: 10,
+      top: 60,
+      data: []
+      // bottom: 20,
+      },
+    grid: {
+        left: '10%',
+        right: '10%',
+        bottom: 60
+      },
+      yAxis: {
+        type: 'category',
+        boundaryGap: true,
+        nameGap: 30,
+        splitArea: {
+          show: false
+        },
+        splitLine: {
+          show: false
+        }
+      },
+      xAxis: {
+        type: 'value',
+        name: 'iBAQLog',
+        nameLocation: 'center',
+        nameGap: 40,
+        splitArea: {
+          show: false
+        },
+        splitLine: {
+          show: false
+        },
+        min: 1,
+        //max: 10
+      },
+      toolbox: {
+        feature: {
+          saveAsImage: {
+            type: 'png',
+            title: 'save as .png',
+            pixelRatio: 10
+          }
+        }
+      },
+      series: [
+      ]
+}
+
+export {getBoxTooltips,options}
diff --git a/src/views/overview/index.vue b/src/views/overview/index.vue
@@ -92,6 +92,7 @@
         <span @click="onSearch('Q14114')"
           >Q14114</span
         >
+        &nbsp;&nbsp;Help:<span>&nbsp;<a  href="https://github.com/bigbio/ibaqpy">iBAQLog</a></span>
       </el-text>
       </div>
     </div>
@@ -273,6 +274,14 @@ h1 {
   color:#84c7d0;
   cursor: pointer;
 }
+.el-text span a {
+  text-decoration: none;
+}
+
+.el-text span a:hover{
+  color:#84c7d0;
+  cursor: pointer;
+}
 .select-box {
     margin: 0.5rem 0;
     > span {