Resolve "Wizzard to create db filters"

Closes #323 (closed)

components/content/RefseqDb.vue

@@ -10,7 +10,8 @@ const facetStore = useFacetsStore()
 const sortBy: Ref<{ key: string, order: string }[]> = ref([{ key: 'type', order: "asc" }])
 const itemValue = ref("id");
 const { width } = useDisplay();
-
+const distriTaxoFullscreen = ref(false)
+const distriSystemFullscreen = ref(false)
 const facets = ref([
     "type",
     "Superkingdom",
@@ -134,27 +135,34 @@ function capitalize([first, ...rest]) {
 </script>
 
 <template>
-    <v-row>
-        <v-col cols="6">
-            <v-card flat class="my-3">
-                <v-card-title> Systems Distribution</v-card-title>
-
-                <v-card-text>
-                    <PlotFigure :options="unref(computedDistriSystemOptions)" defer></PlotFigure>
-                </v-card-text>
-            </v-card>
-        </v-col>
-        <v-col cols="6">
-            <v-card flat :loading="pending">
-                <v-card-title> Taxonomic Distribution</v-card-title>
-                <v-card-text>
-                    <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>
-        </v-col>
-    </v-row>
+    <v-card flat class="mb-2">
+        <v-row align="start" class="mb-2">
+            <v-col :cols="distriSystemFullscreen ? 12 : 6" :class="distriTaxoFullscreen ? 'd-none' : null">
+                <v-card flat class="my-3">
+                    <v-card-title> Systems Distribution <v-btn variant="plain"
+                            :icon="distriSystemFullscreen ? 'md:fullscreen_exit' : 'md:fullscreen'"
+                            @click="distriSystemFullscreen = !distriSystemFullscreen"></v-btn></v-card-title>
+
+                    <v-card-text>
+                        <PlotFigure :options="unref(computedDistriSystemOptions)" defer></PlotFigure>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+            <v-col :cols="distriTaxoFullscreen ? 12 : 6" :class="distriSystemFullscreen ? 'd-none' : null">
+                <v-card flat>
+                    <v-card-title> Taxonomic Distribution <v-btn variant="plain"
+                            :icon="distriTaxoFullscreen ? 'md:fullscreen_exit' : 'md:fullscreen'"
+                            @click="distriTaxoFullscreen = !distriTaxoFullscreen"></v-btn></v-card-title>
+                    <v-card-text>
+                        <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>
+            </v-col>
+        </v-row>
+    </v-card>
+
     <ServerDbTable title="RefSeq" db="refseq" :sortBy="sortBy" :headers="computedHeaders" :item-value="itemValue"
         :facets="facets">
     </ServerDbTable>