add selector for taxo rank

pages/refseq.vue

@@ -19,8 +19,8 @@ const {
   queryContent("/_partial/refseq").where({ _partial: true }).findOne()
 );
 
-console.log(refseqData);
-
+const availableTaxo = ref(["species", "genus"]);
+const selectedTaxoRank = ref("species");
 const sanitizedRefseq = computed(() => {
   if (refseqData.value?.body) {
     return refseqData.value.body;
@@ -36,6 +36,7 @@ const computedWidth = computed(() => {
 const height = computed(() => {
   return computedWidth.value / 3;
 });
+const search = ref("");
 
 const itemValue = ref("type");
 const selected = ref([]);
@@ -58,90 +59,139 @@ const selectedRefSeq = computed(() => {
     });
   }
 });
+function filterOnlyCapsText(value, query, item) {
+  if (value != null && query != null) {
+    if (typeof value === "string") {
+      return value.toString().toLowerCase().indexOf(query.toLowerCase()) !== -1;
+    }
+    if (typeof value == "object") {
+      if (value?.name) {
+        return (
+          value.name.toString().toLowerCase().indexOf(query.toLowerCase()) !==
+          -1
+        );
+      }
+    }
+  }
+  return false;
+}
+
+const computedDistriTaxoOptions = computed(() => {
+  return {
+    style: {
+      width: "100%",
+      "max-width": "100%",
+    },
+    marginBottom: 100,
+    x: { label: null, tickRotate: 90 },
+    y: { grid: true },
+    color: { legend: true },
+    width: computedWidth.value,
+    height: height.value,
+    marks: [
+      Plot.barY(
+        unref(selectedRefSeq.value),
+        // [
+        //   { species: "test", type: "Gao" },
+        //   { species: "test", type: "Gao" },
+        //   { species: "species2", type: "AVAST" },
+        // ],
+        Plot.groupX(
+          { y: "count" },
+          {
+            x: selectedTaxoRank.value,
+            // x: "genus",
+            fill: "type",
+            tip: true,
+          }
+        )
+      ),
+    ],
+  };
+});
 
-watchEffect(async () => {});
 </script>
 
 <template>
-  <v-card flat color="transparent">
-    <v-toolbar><v-toolbar-title> REFSEQ</v-toolbar-title> </v-toolbar>
-    <v-card-content>
-      <v-data-table-virtual
-        v-model="selected"
-        :headers="headers"
-        :items="sanitizedRefseq"
-        :item-value="itemValue"
-        height="800"
-        show-select
-        class="elevation-1"
-      ></v-data-table-virtual>
-    </v-card-content>
+  <v-card>
+    <v-toolbar color="primary"
+      ><v-toolbar-title> REFSEQ</v-toolbar-title>
+      <v-text-field
+        v-model="search"
+        density="compact"
+        variant="underlined"
+        prepend-inner-icon="mdi-magnify"
+        label="Search for defense systems"
+        single-line
+        hide-details
+        class="mx-2"
+        clearable
+      ></v-text-field
+    ></v-toolbar>
+    <v-data-table-virtual
+      v-model="selected"
+      :headers="headers"
+      :items="sanitizedRefseq"
+      :item-value="itemValue"
+      density="compact"
+      :search="search"
+      :custom-filter="filterOnlyCapsText"
+      height="800"
+      show-select
+      class="elevation-1"
+    ></v-data-table-virtual>
+  </v-card>
+  <v-card class="my-3">
+    <v-toolbar color="primary"
+      ><v-toolbar-title> Distribution Systems</v-toolbar-title></v-toolbar
+    >
+    <v-card-text>
+      <PlotFigure
+        :options="{
+          style: {
+            width: '100%',
+            'max-width': '100%',
+          },
+          marginBottom: 100,
+          x: { label: null, tickRotate: 50 },
+          y: { grid: true },
+          color: { legend: true },
+          width: computedWidth,
+          height,
+          marks: [
+            Plot.barY(
+              unref(selectedRefSeq),
+              Plot.groupX(
+                { y: 'count' },
+                {
+                  x: 'type',
+                  fill: 'species',
+                  tip: true,
+                  sort: { x: '-y' },
+                }
+              )
+            ),
+          ],
+        }"
+        defer
+      ></PlotFigure>
+    </v-card-text>
+  </v-card>
+  <v-card>
+    <v-toolbar color="primary"
+      ><v-toolbar-title> Distribution </v-toolbar-title></v-toolbar
+    >
     <v-card-text>
-      <v-row>
-        <v-col :cols="12">
-          <PlotFigure
-            :options="{
-              style: {
-                width: '100%',
-                'max-width': '100%',
-              },
-              marginBottom: 100,
-              x: { label: null, tickRotate: 50 },
-              y: { grid: true },
-              color: { legend: true },
-              width: computedWidth,
-              height,
-              marks: [
-                Plot.barY(
-                  unref(selectedRefSeq),
-                  Plot.groupX(
-                    { y: 'count' },
-                    {
-                      x: 'type',
-                      fill: 'species',
-                      tip: true,
-                      sort: { x: '-y' },
-                    }
-                  )
-                ),
-              ],
-            }"
-            defer
-          ></PlotFigure>
-        </v-col>
-      </v-row>
-      <v-row>
-        <v-col :cols="12">
-          <PlotFigure
-            defer
-            :options="{
-              style: {
-                width: '100%',
-                'max-width': '100%',
-              },
-              marginBottom: 100,
-              x: { label: null, tickRotate: 90 },
-              y: { grid: true },
-              color: { legend: true },
-              width: computedWidth,
-              height,
-              marks: [
-                Plot.barY(
-                  unref(selectedRefSeq),
-                  Plot.groupX(
-                    { y: 'count' },
-                    {
-                      x: 'species',
-                      fill: 'type',
-                      tip: true,
-                    }
-                  )
-                ),
-              ],
-            }"
-          ></PlotFigure>
-        </v-col>
-      </v-row>
+      <v-select
+        v-model="selectedTaxoRank"
+        :items="availableTaxo"
+        density="compact"
+        label="Select taxonomic rank"
+      ></v-select>
+      <PlotFigure
+        defer
+        :options="unref(computedDistriTaxoOptions)"
+      ></PlotFigure>
     </v-card-text>
   </v-card>
 </template>
\ No newline at end of file