diff --git a/components/PfamChips.vue b/components/PfamChips.vue
index 64d4f4b9f6982386aacc9c7aefc487e5d22f9195..9f3039832a12b924c46d94d06d79e22d1119a360 100644
--- a/components/PfamChips.vue
+++ b/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>
diff --git a/components/content/SystemDb.vue b/components/content/SystemDb.vue
new file mode 100644
index 0000000000000000000000000000000000000000..571df61219336f7edf4aeaf72d54caebd1542d2b
--- /dev/null
+++ b/components/content/SystemDb.vue
@@ -0,0 +1,58 @@
+<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
diff --git a/content/3.defense-systems/0.index.md b/content/3.defense-systems/0.index.md
index 11206af5c5f67e70e15fe5b329d80937a4d12b56..ac361fd017876ecafa0ae97b6516bcc426c3fe95 100644
--- a/content/3.defense-systems/0.index.md
+++ b/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
+::
diff --git a/pages/defense-systems.vue b/pages/defense-systems.vue
deleted file mode 100644
index 2e866bd4cb1b4f4a20bd0563a06977eb610d81e6..0000000000000000000000000000000000000000
--- a/pages/defense-systems.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<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