Resolve "Table with all PDB files, to make them available to download"

Closes #132 (closed)

components/content/RefseqDb.vue

@@ -3,11 +3,12 @@ import { useFacetsStore } from '~~/stores/facets'
 import * as Plot from "@observablehq/plot";
 import PlotFigure from "~/components/PlotFigure";
 import { useDisplay } from "vuetify";
-
+import type { SortItem } from "@/components/ServerDbTable.vue"
+import { ServerDbTable } from "#components"
 
 const facetStore = useFacetsStore()
 
-const sortBy: Ref<{ key: string, order: string }[]> = ref([{ key: 'type', order: "asc" }])
+const sortBy: Ref<SortItem[]> = ref([{ key: 'type', order: "asc" }])
 const itemValue = ref("id");
 const { width } = useDisplay();
 const distriTool: Ref<string[]> = ref([])
@@ -74,16 +75,26 @@ const plotHeight = computed(() => {
     // return 500
 });
 
+const defaultDataTableServerProps = ref({
+    showExpand: false
+})
 
+const dataTableServerProps = computed(() => {
+    return {
+        ...defaultDataTableServerProps.value,
+        headers: computedHeaders.value,
+        itemValue: itemValue.value
+    }
+})
 const defaultBarPlotOptions = computed(() => {
     const y = logTransform.value ? { nice: true, grid: true, type: 'symlog' } : { nice: true, grid: true, type: "linear" }
     // const y = { nice: true, grid: true }
     return {
-        x: { label: null, tickRotate: 70 },
+        x: { label: null, tickRotate: 45, ticks: 10 },
         y,
         color: { legend: true },
         width: computedWidth.value,
-        height: plotHeight.value,
+        height: plotHeight.value + 100,
     }
 })
 
@@ -102,7 +113,7 @@ const computedSystemDistribution = computed(() => {
 const computedDistriSystemOptions = computed(() => {
     return {
         ...defaultBarPlotOptions.value,
-        marginBottom: 120,
+        marginBottom: 100,
         marks: [
             // Plot.frame(),
             Plot.barY(
@@ -132,7 +143,7 @@ const computedTaxonomyDistribution = computed(() => {
 const computedDistriTaxoOptions = computed(() => {
     return {
         ...defaultBarPlotOptions.value,
-        marginBottom: 120,
+        marginBottom: 100,
         marks: [
             Plot.barY(
                 toValue(computedTaxonomyDistribution),
@@ -147,10 +158,22 @@ const computedDistriTaxoOptions = computed(() => {
         ],
     };
 });
-function capitalize([first, ...rest]) {
+function capitalize(name: string) {
+    const [first, ...rest] = name
     return first.toUpperCase() + rest.join('').toLowerCase();
 }
 
+function namesToCollapsibleChips(names: string[]) {
+    return names.filter((it) => it !== "").map(it => ({ title: it }))
+}
+
+function namesToAccessionChips(names: string[]) {
+    return namesToCollapsibleChips(names).map(it => {
+        return { ...it, href: new URL(it.title, "http://toto.pasteur.cloud").toString() }
+    })
+}
+
+
 
 </script>
 
@@ -165,31 +188,44 @@ function capitalize([first, ...rest]) {
             </v-btn-toggle>
         </v-toolbar>
         <v-row align="start" class="my-2">
+
             <v-col :cols="fullWidth ? 12 : 6">
-                <v-card color="transparent" flat class="my-3">
-                    <v-toolbar flat color="transparent">
-                        <v-toolbar-title>Systems</v-toolbar-title></v-toolbar>
-                    <v-card-text>
-                        <PlotFigure :options="unref(computedDistriSystemOptions)" defer></PlotFigure>
-                    </v-card-text>
+
+                <v-card color="transparent" flat>
+                    <v-expansion-panels>
+                        <v-expansion-panel elevation="3">
+                            <v-expansion-panel-title color="grey-lighten-4">Systems</v-expansion-panel-title>
+                            <v-expansion-panel-text>
+                                <PlotFigure :options="unref(computedDistriSystemOptions)" defer></PlotFigure>
+                            </v-expansion-panel-text>
+                        </v-expansion-panel>
+                    </v-expansion-panels>
                 </v-card>
             </v-col>
             <v-col :cols="fullWidth ? 12 : 6">
                 <v-card flat color="transparent">
-                    <v-toolbar flat color="transparent">
-                        <v-toolbar-title>Taxonomic</v-toolbar-title>
-                        <v-select v-model="selectedTaxoRank" :items="availableTaxo" density="compact"
-                            label="Select taxonomic rank"></v-select>
-                    </v-toolbar>
-                    <v-card-text>
-                        <PlotFigure defer :options="unref(computedDistriTaxoOptions)"></PlotFigure>
-                    </v-card-text>
+                    <v-expansion-panels>
+                        <v-expansion-panel elevation="3">
+                            <v-expansion-panel-title color="grey-lighten-4">
+                                Taxonomic
+
+
+                            </v-expansion-panel-title>
+                            <v-expansion-panel-text>
+
+                                <PlotFigure defer :options="unref(computedDistriTaxoOptions)"></PlotFigure>
+
+                            </v-expansion-panel-text>
+                        </v-expansion-panel>
+                    </v-expansion-panels>
                 </v-card>
             </v-col>
         </v-row>
     </v-card>
-
-    <ServerDbTable title="RefSeq" db="refseq" :sortBy="sortBy" :headers="computedHeaders" :item-value="itemValue"
-        :facets="facets">
+    <ServerDbTable title="RefSeq" db="refseq" :sortBy="sortBy" :facets="facets"
+        :data-table-server-props="dataTableServerProps">
+        <template #[`item.accession_in_sys`]="{ item }">
+            <CollapsibleChips :items="namesToAccessionChips(item.accession_in_sys)"></CollapsibleChips>
+        </template>
     </ServerDbTable>
 </template>
\ No newline at end of file