Use meilisearch to display list of systems

components/PfamChips.vue

@@ -3,21 +3,21 @@ import { usePfamStore } from "@/stores/pfam";
 
 const { pfam: pfamStore } = usePfamStore();
 export interface Props {
-  pfamString: string | null;
+  pfams: Record<string, any>[];
   itemsToDisplay?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  pfamString: null,
+  pfams: [],
   itemsToDisplay: 2,
 });
-const pfams = computed(() => {
-  if (props.pfamString === null) {
-    return [];
-  } else {
-    return props.pfamString.split(",").map((pfam) => pfam.trim());
-  }
-});
+// const pfams = computed(() => {
+//   if (props.pfamString === null) {
+//     return [];
+//   } else {
+//     return props.pfamString.split(",").map((pfam) => pfam.trim());
+//   }
+// });
 const show = ref(false);
 
 const pfamBaseUrl = ref(new URL("https://www.ebi.ac.uk/interpro/entry/pfam/"));
@@ -31,11 +31,11 @@ function constructPfamUrl(pfam: string) {
     <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"
+          <v-chip v-if="index < itemsToDisplay || itemsToDisplay < 0" :href="constructPfamUrl(pfam.AC)" target="_blank"
             color="info" class="mr-1 mb-1">
-            {{ pfam }}
+            {{ pfam.DE }}
             <v-tooltip activator="parent" location="top">{{
-              pfamStore.get(pfam)?.DE ?? "none"
+              pfam.AC
             }}</v-tooltip></v-chip>
 
           <template v-if="index === itemsToDisplay">
@@ -51,11 +51,11 @@ function constructPfamUrl(pfam: string) {
         </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"
+            <v-chip v-if="index >= itemsToDisplay" :href="constructPfamUrl(pfam.AC)" target="_blank" color="info"
               class="mr-1 mb-1">
-              {{ pfam }}
+              {{ pfam.DE }}
               <v-tooltip activator="parent" location="top">{{
-                pfamStore.get(pfam)?.DE ?? "none"
+                pfam.AC
               }}</v-tooltip></v-chip>
           </template>
         </template>

components/content/SystemDb.vue

+<script setup lang="ts">
+import type { SortItem } from "@/components/ServerDbTable.vue"
+import { ServerDbTable } from "#components"
+const sortBy: Ref<SortItem[]> = ref([{ key: 'title', order: "asc" }])
+const itemValue = ref("title");
+const facets: Ref<string[]> = ref(["title", "Sensor", "Activator"])
+const headers: Ref<Object[]> = ref([
+    { title: "System", key: "title", removable: false },
+    { title: "Article", key: "doi", removable: false },
+    { title: "Sensor", key: "Sensor", removable: false },
+    { title: "Activator", key: "Activator", removable: false },
+    { title: "Effector", key: "Effector", removable: false },
+
+    { title: "PFAM", key: "PFAM", removable: false },
+    { title: "Contributors", key: "contributors", removable: false },
+
+
+])
+const { search: msSearch, result: msResult } = useMeiliSearch('systems')
+
+const defaultDataTableServerProps = ref({
+    showExpand: false
+})
+
+const dataTableServerProps = computed(() => {
+    return {
+        ...toValue(defaultDataTableServerProps),
+        headers: toValue(headers),
+        itemValue: toValue(itemValue)
+    }
+})
+
+</script>
+<template>
+    <ServerDbTable title="systems" db="systems" :sortBy="sortBy" :facets="facets"
+        :data-table-server-props="dataTableServerProps">
+
+        <template #top>
+            <v-toolbar><v-toolbar-title class="text-capitalize">
+                    List Systems </v-toolbar-title><v-spacer></v-spacer>
+            </v-toolbar>
+        </template>
+
+        <template #[`item.title`]="{ item }">
+            <v-chip color="info" link :to="`/defense-systems/${item.title.toLowerCase()}`">{{
+                item.title
+            }}</v-chip>
+        </template>
+
+        <template #[`item.doi`]="{ item }">
+            <ArticleDoi v-if="item?.doi" :doi="item.doi" :abstract="item?.abstract" :divider="false" :enumerate="false" />
+        </template>
+        <template #[`item.PFAM`]="{ item }">
+
+            <pfam-chips v-if="item?.PFAM" :pfams="item.PFAM"></pfam-chips>
+        </template>
+    </ServerDbTable>
+</template>
\ No newline at end of file

content/3.defense-systems/0.index.md

@@ -11,8 +11,8 @@ The knowledge of anti-phage defense systems is ever expanding. The spectacular i
 
 
 
-
-
+::system-db
+::
 
 
 

pages/defense-systems.vue

-<script setup lang="ts">
-import { useDisplay, useLayout } from "vuetify";
-
-const { height } = useDisplay();
-// const { getLayoutItem } = useLayout()
-// console.log(getLayoutItem('app-bar'))
-const { data, error, pending } = await useAsyncData(
-  "list-defense-systems",
-  () => queryContent("/defense-systems").where({ _partial: false }).find()
-);
-const defaultHeaders = ref([{ title: "System", key: "system" }]);
-const tableKey = "tableColumns";
-
-const sanitizedData = computed(() => {
-  if (data?.value && data.value?.length > 0) {
-    return data.value?.filter((entry) => {
-      if (entry._dir === "old" || entry._dir === "") {
-        return false;
-      }
-      return true;
-    });
-  } else {
-    return [];
-  }
-});
-
-const headers = computed(() => {
-  const uniqHeaders = Array.from(
-    sanitizedData.value.reduce((headerSet, df) => {
-      if (df?.[tableKey]) {
-        return new Set([...headerSet, ...Object.keys(df[tableKey])]);
-      } else {
-        return headerSet;
-      }
-    }, new Set())
-  );
-  return [
-    ...defaultHeaders.value,
-    ...uniqHeaders.map((value) => {
-      return { title: value, key: value };
-    }),
-  ];
-});
-const systems = computed(() => {
-  return sanitizedData.value.map((content) => {
-    return {
-      system: { name: content.title, path: content._path },
-      ...content[tableKey],
-    };
-  });
-});
-
-
-</script>
-<template>
-  <v-card flat color="transparent">
-    <ListSystems :headers="headers" :systems="systems" :height="height - 220"></ListSystems>
-  </v-card>
-</template>
\ No newline at end of file