use a btn in structure

components/content/RefseqDb.vue

@@ -228,6 +228,13 @@ const systemPanel: Ref<number> = ref(0)
     </v-card>
     <ServerDbTable title="RefSeq" db="refseq" :sortBy="sortBy" :facets="facets"
         :data-table-server-props="dataTableServerProps">
+        <template #top>
+            <v-toolbar><v-toolbar-title class="text-capitalize">
+                    RefSeq
+                </v-toolbar-title><v-spacer></v-spacer>
+
+            </v-toolbar>
+        </template>
         <template #[`item.accession_in_sys`]="{ item }">
             <CollapsibleChips :items="namesToAccessionChips(item.accession_in_sys)"></CollapsibleChips>
         </template>

components/content/StructureDb.vue

@@ -5,20 +5,22 @@ const sortBy: Ref<SortItem[]> = ref([{ key: 'system', order: "asc" }])
 const itemValue = ref("id");
 const facets: Ref<string[]> = ref(["system", "completed"])
 const headers: Ref<Object[]> = ref([
-    { title: "System", key: "system" },
+    { title: "System", key: "system", removable: false },
     // { title: "pdb file", key: "pdb" },
     // { title: "fasta", key: "fasta_file" },
-    { title: "Proteins in structure", key: 'proteins_in_the_prediction', sortable: false },
-    { title: "System genes", key: "system_genes", sortable: false },
-    { title: "Sys id", key: "nb_sys" },
+    { title: "Proteins in structure", key: 'proteins_in_the_prediction', sortable: false, removable: true },
+    { title: "System genes", key: "system_genes", sortable: false, removable: true },
+    { title: "Sys id", key: "nb_sys", removable: true },
+
+    { title: "Completed", key: "completed", removable: true },
+    { title: "Prediction type", key: "prediction_type", removable: true },
+    { title: "N genes in sys", key: "system_number_of_genes", removable: true },
+    { title: "pLDDT", key: "plddts", removable: true },
+    { title: "iptm+ptm", key: "iptm+ptm", removable: true },
+    { title: "pDockQ", key: "pDockQ", removable: true },
+    { title: "Type", key: "type", removable: true },
+    { title: 'Structure', key: 'structure', sortable: false, removable: false },
 
-    { title: "Completed", key: "completed" },
-    { title: "Prediction type", key: "prediction_type" },
-    { title: "Num of genes", key: "system_number_of_genes" },
-    { title: "pLDDT", key: "plddts" },
-    { title: "iptm+ptm", key: "iptm+ptm" },
-    { title: "pDockQ", key: "pDockQ" },
-    { title: "Type", key: "type" }
 ])
 
 const defaultDataTableServerProps = ref({
@@ -51,10 +53,24 @@ function toSystemName(rawName: string) {
     return rawName.split(/_|-0/)[0].toLocaleLowerCase()
 
 }
+
+function remove(key) {
+    headers.value = headers.value.filter(header => header.key !== key)
+}
+
 </script>
 <template>
     <ServerDbTable title="Predicted Structures" db="structure" :sortBy="sortBy" :facets="facets"
         :data-table-server-props="dataTableServerProps">
+
+        <template #top>
+            <v-toolbar><v-toolbar-title class="text-capitalize">
+                    Predicted Structures
+                </v-toolbar-title><v-spacer></v-spacer>
+
+            </v-toolbar>
+        </template>
+
         <template #[`item.proteins_in_the_prediction`]="{ item }">
             <CollapsibleChips :items="namesToCollapsibleChips(item.proteins_in_the_prediction, item.fasta_file)">
             </CollapsibleChips>
@@ -62,18 +78,13 @@ function toSystemName(rawName: string) {
         <template #[`item.system_genes`]="{ item }">
             <CollapsibleChips :items="namesToCollapsibleChips(item.system_genes)"></CollapsibleChips>
         </template>
-        <template #expanded-row="{ columns, item }">
-            <tr>
-                <td :colspan="columns.length">
-                    <v-card flat color="transparent">
-                        <v-card-text>
-                            <MolstarPdbePlugin v-if="item?.pdb && item.pdb !== 'na'" :data-urls="[`/${toSystemName(item.system)}/${pdbNameToCif(item.pdb)}`]">
-                            </MolstarPdbePlugin>
-                            <v-alert v-else variant="tonal" type="warning">No structure file</v-alert>
-                        </v-card-text>
-                    </v-card>
-                </td>
-            </tr>
+        <template #[`item.structure`]="{ item }">
+            <MolstarPdbePlugin v-if="item?.pdb && item.pdb !== 'na'"
+                :data-urls="[`/${toSystemName(item.system)}/${pdbNameToCif(item.pdb)}`]" uniq>
+            </MolstarPdbePlugin>
+            <span v-else class="d-flex flex-wrap align-center justify-center">
+                <v-icon color="warning" icon="md:dangerous"></v-icon>
+            </span>
         </template>
         <template #[`item.completed`]="{ item }">
             <v-icon v-if="item.completed" color="success" icon="md:check"></v-icon>