Fix api change in datatable item slot

components/PfamChips.vue

@@ -26,53 +26,42 @@ function constructPfamUrl(pfam: string) {
 }
 </script>
 <template>
-  <v-card flat class="d-flex justify-start align-center">
-    <template v-for="(pfam, index) in pfams" :key="pfam">
-      <v-chip
-        v-if="index < itemsToDisplay || itemsToDisplay < 0"
-        :href="constructPfamUrl(pfam)"
-        target="_blank"
-        color="info"
-        class="mr-1"
-      >
-        {{ pfam }}
-        <v-tooltip activator="parent" location="top">{{
-          pfamStore.get(pfam)?.DE ?? "none"
-        }}</v-tooltip></v-chip
-      >
+  <!-- class="d-inline-flex justify-start align-center" -->
+  <v-row>
+    <v-col>
+      <v-card flat color="transparent" density="compact" rounded="false">
+        <template v-for="(pfam, index) in pfams" :key="pfam">
+          <v-chip v-if="index < itemsToDisplay || itemsToDisplay < 0" :href="constructPfamUrl(pfam)" target="_blank"
+            color="info" class="mr-1 mb-1">
+            {{ pfam }}
+            <v-tooltip activator="parent" location="top">{{
+              pfamStore.get(pfam)?.DE ?? "none"
+            }}</v-tooltip></v-chip>
 
-      <template v-if="index === itemsToDisplay">
-        <v-chip
-          v-if="!show"
-          variant="text"
-          class="text-grey text-caption align-self-center px-1"
-          @click="show = !show"
-        >
-          (+{{ pfams.length - itemsToDisplay }} others)
-        </v-chip>
-      </template>
-    </template>
-    <template v-if="pfams.length > itemsToDisplay && show">
-      <template v-for="(pfam, index) in pfams" :key="pfam">
-        <v-chip
-          v-if="index >= itemsToDisplay"
-          :href="constructPfamUrl(pfam)"
-          target="_blank"
-          color="info"
-          class="mr-1"
-        >
-          {{ pfam }}
-          <v-tooltip activator="parent" location="top">{{
-            pfamStore.get(pfam)?.DE ?? "none"
-          }}</v-tooltip></v-chip
-        >
-      </template>
-    </template>
-    <v-btn
-      v-if="itemsToDisplay < pfams.length"
-      variant="text"
-      :icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'"
-      @click="show = !show"
-    ></v-btn>
-  </v-card>
+          <template v-if="index === itemsToDisplay">
+            <span>
+              <v-chip v-if="!show" variant="text" class="text-grey text-caption align-self-center px-1 "
+                @click="show = !show">
+                (+{{ pfams.length - itemsToDisplay }} others)
+              </v-chip>
+              <v-btn v-if="itemsToDisplay < pfams.length && !show" variant="text" :icon="'mdi-chevron-down'"
+                @click="show = !show"></v-btn>
+            </span>
+          </template>
+        </template>
+        <template v-if="pfams.length > itemsToDisplay && show">
+          <template v-for="(pfam, index) in pfams" :key="pfam">
+            <v-chip v-if="index >= itemsToDisplay" :href="constructPfamUrl(pfam)" target="_blank" color="info"
+              class="mr-1 mb-1">
+              {{ pfam }}
+              <v-tooltip activator="parent" location="top">{{
+                pfamStore.get(pfam)?.DE ?? "none"
+              }}</v-tooltip></v-chip>
+          </template>
+        </template>
+        <v-btn v-if="itemsToDisplay < pfams.length && show" variant="text" :icon="'mdi-chevron-up'"
+          @click="show = !show"></v-btn>
+      </v-card>
+    </v-col>
+  </v-row>
 </template>
\ No newline at end of file

components/content/ListSystems.vue

@@ -37,7 +37,7 @@ const { initPfam } = usePfamStore();
 initPfam();
 </script>
 <template>
-  <v-card>
+  <v-card >
     <v-toolbar density="compact">
       <v-toolbar-title>Defense Systems</v-toolbar-title>
 
@@ -58,14 +58,7 @@ initPfam();
       </template>
       <template #[`item.PFAM`]="{ item }">
 
-        <pfam-chips v-if="item.columns?.PFAM" :pfam-string="item.columns.PFAM"></pfam-chips>
-      </template>
-      <template #expanded-row="{ columns, item }">
-        <tr>
-          <td :colspan="columns.length" class="v-data-table__td v-data-table-column--align-start">
-            <pfam-chips :pfam-string="item.columns.PFAM" :items-to-display="-1"></pfam-chips>
-          </td>
-        </tr>
+        <pfam-chips v-if="item?.PFAM" :pfam-string="item.PFAM"></pfam-chips>
       </template>
     </v-data-table-virtual>
   </v-card>