Merge pull request bigbio#18 from zprobot/main

search
zprobot · Dec 15, 2023 · 6392dcd · 6392dcd
2 parents 4e0c607 + 027cc68
commit 6392dcd
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/src/components/Table/index.vue b/src/components/Table/index.vue
@@ -19,14 +19,14 @@
       <el-table-column prop="msruns" label="Msruns" width="100" />
       <el-table-column prop="peptides" label="Peptides" min-width="100" sortable="custom">
         <template #default="scope">
-          <el-tooltip effect="light" :content="scope.row.peptides" :offset="-50" placement="right-start">
+          <el-tooltip effect="light" :content="scope.row.peptides.toString()" :offset="-50" placement="right-start">
             <el-progress :percentage="(100 * scope.row.peptides) / maxPeptides" :stroke-width="12" :show-text="false" />
           </el-tooltip>
         </template>
       </el-table-column>
       <el-table-column prop="proteins" label="Proteins" min-width="100" sortable="custom">
         <template #default="scope">
-          <el-tooltip effect="light" :content="scope.row.proteins" :offset="-50" placement="right-start">
+          <el-tooltip effect="light" :content="scope.row.proteins.toString()" :offset="-50" placement="right-start">
             <el-progress :percentage="(100 * scope.row.proteins) / maxProteins" :stroke-width="12" :show-text="false" />
           </el-tooltip>
         </template>
@@ -89,7 +89,6 @@ watch(
     maxPeptides.value = Math.max(...val.map((o) => o.peptides));
     maxProteins.value = Math.max(...val.map((o) => o.proteins));
     sortedData.value = [...val];
-    console.log(maxPeptides.value, maxProteins.value);
   }
 );
 

diff --git a/src/views/information/index.vue b/src/views/information/index.vue
@@ -30,15 +30,15 @@
       >
         <div style="font-size: 1.5rem; color: rgb(75, 85, 99)"> Datasets Reanalyzed </div>
         <el-input
-          v-model="search1"
+          v-model="searchProject"
           size="large"
           style="width: 30%; margin: 1.5rem 0"
           placeholder="Search"
           :suffix-icon="Search"
         />
       </div>
       <Table
-        :modelValue="fullTable" @update:modelValue="fullTable = $event"
+        :modelValue="filterTable" @update:modelValue="fullTable = $event"
       ></Table>
     </div>
 
@@ -75,7 +75,7 @@
 <script setup>
 import { Search } from "@element-plus/icons-vue";
 import Table from "@/components/Table/index.vue";
-import { ref, onMounted } from "vue";
+import { ref, onMounted,computed } from "vue";
 import {
   getAbsolueExpression,
   getDifferentialExpression,
@@ -100,8 +100,14 @@ const initTable = async () => {
 
 
 
-const search1 = ref();
-// const search2 = ref();
+const searchProject = ref('');
+const filterTable = computed(() =>
+  fullTable.value.filter(
+    (data) =>
+      !searchProject.value ||
+      data.accession.id.toLowerCase().includes(searchProject.value.toLowerCase())
+  )
+)
 
 onMounted(() => {
   initTable();