.gitattributes

 data/ filter=lfs diff=lfs merge=lfs -text
 data/**/*.csv filter=lfs diff=lfs merge=lfs -text
+data/**/*.tsv filter=lfs diff=lfs merge=lfs -text

.gitlab-ci.yml

@@ -12,7 +12,7 @@ workflow:
 # Functions that should be executed before the build script is run
 
 variables:
-  HELM_VERSION: "3.9.3"
+  HELM_VERSION: "3.13.3"
   IMAGE_NAME: "df-wiki"
   # dev
   HOST_DEV: 'defense-finder.dev.pasteur.cloud'
@@ -31,17 +31,19 @@ cache:
     
 
 stages:
+ 
+
+  - zotero
+  - get-meili-key
+  - build
+  # - build-wiki
   - delete-release
   - build-df-cli
   - lint
-  - get-data
   - deploy-meilisearch
   - update-meilisearch-indexes
-  - get-meili-key
-  - build
-  - build-wiki
   - deploy
-
+  # - load-website
 
 .docker-login: &docker-login
   - i=0; while [ "$i" -lt 12 ]; do docker info && break; sleep 5; i=$(( i + 1 )) ; done
@@ -111,6 +113,7 @@ build:df-wiki-cli:
     #     sleep 1
     #     kubectl -n=${KUBE_NAMESPACE} get po
     #   done
+  when: manual
 
 
 deploy:meilisearch:dev:
@@ -188,14 +191,20 @@ lint:
     - find . -name '*.md' ! -name '0.index.md' | sort | xargs -I {} df-wiki-cli content lint --file {}
   when: manual
 
-# Update Meili search indexes
-
+# Update Meili search indexes + generate some file that goes to meilisearch
 .update-meilisearch-index:
   extends: .df-wiki-cli-run
   stage: update-meilisearch-indexes
   variables:
     MEILI_HOST: "http://localhost:7700"
   script:
+    # - rm data/list-systems.json
+    - >
+      df-wiki-cli 
+      content systems 
+      --dir content/3.defense-systems/ 
+      --pfam public/pfam-a-hmm.csv 
+      --output data/list-systems.json
     - >
       df-wiki-cli
       meilisearch 
@@ -210,7 +219,7 @@ lint:
       --host ${MEILI_HOST} 
       --key ${MEILI_MASTER_KEY}
       update
-      --file data/all_predictions_statistics.csv
+      --file data/all_predictions_statistics_clean.csv
       --document structure
     - >
       df-wiki-cli
@@ -221,14 +230,13 @@ lint:
       --file data/list-systems.json
       --document systems
   allow_failure: false
+  when: manual
 
 
 update-meilisearch-index:dev:
   rules:
     - if: $CI_COMMIT_BRANCH != "main"
   extends: .update-meilisearch-index
-  needs: 
-    - deploy:meilisearch:dev
   variables:
     MEILI_HOST: "https://${MEILI_HOST_DEV}"
 
@@ -237,8 +245,6 @@ update-meilisearch-index:prod:
   rules:
     - if: $CI_COMMIT_BRANCH == "main"
   extends: .update-meilisearch-index
-  needs: 
-    - deploy:meilisearch:prod
   variables:
     MEILI_HOST: "https://${MEILI_HOST_PROD}"
 
@@ -265,8 +271,6 @@ update-meilisearch-index:prod:
 
 set-meili-env:dev:
   extends: .set-meili-env
-  needs: 
-    - deploy:meilisearch:dev
   variables:
     MEILI_HOST: "https://${MEILI_HOST_DEV}"
   rules:
@@ -282,7 +286,7 @@ set-meili-env:prod:
 ##############################
 get-zotero:
   extends: .df-wiki-cli-run
-  stage: get-data
+  stage: zotero
   script:
     - df-wiki-cli articles --key ${ZOTERO_API_KEY} --output content/_data/_articles.json
   artifacts:
@@ -312,7 +316,7 @@ get-zotero:
   variables:
     CONTEXT: "."
     DOCKERFILE: "Dockerfile"
-    BASE_URL: /wiki/
+    BASE_URL: /
     MEILI_HOST: "http://localhost:7700"
   before_script:
     - *docker-login
@@ -321,7 +325,7 @@ get-zotero:
       docker buildx build --pull -t "$CI_REGISTRY_IMAGE/$IMAGE_NAME:$CI_COMMIT_SHORT_SHA" 
       --build-arg "BASE_URL=$BASE_URL" 
       --build-arg "MEILI_HOST=$MEILI_HOST" 
-      --build-arg "MEILI_API_KEY=$MEILI_API_KEY" 
+      --build-arg "MEILI_API_KEY=$MEILI_API_KEY"
       -f $DOCKERFILE $CONTEXT
     - docker push "$CI_REGISTRY_IMAGE/$IMAGE_NAME:$CI_COMMIT_SHORT_SHA"
 
@@ -334,6 +338,7 @@ build:dev:wiki:
     # - get-pfam
   variables:
     BASE_URL: /wiki/
+    HOST_URL: https://${HOST_DEV}
   before_script:
     - *docker-login
     # - "sed -i 's/MEILISEARCH_API_KEY/${$MEILI_API_KEY}/g' nuxt.config.ts"
@@ -349,29 +354,100 @@ build:prod:wiki:
     # - get-pfam
   variables:
     BASE_URL: /wiki/
+    HOST_URL: https://${HOST_PROD}
+
   rules:
     - if: $CI_COMMIT_BRANCH == "main"  
 
 
+# build-wiki:dev:
+#   stage: build-wiki
+#   needs:
+#     - set-meili-env:dev
+#   rules:
+#     - if: $CI_COMMIT_BRANCH != "main"    
+#   image: node:21.1-bookworm-slim
+#   variables:
+#     NODE_OPTIONS: --max_old_space_size=12288
+#     NUXT_APP_BASE_URL: /wiki/
+#     NUXT_PUBLIC_MEILISEARCH_CLIENT_HOST_URL: ${MEILI_HOST}
+#     NUXT_PUBLIC_MEILISEARCH_CLIENT_SEARCH_API_KEY: ${MEILI_API_KEY}
+#     NUXT_PUBLIC_MEILI_HOST: ${MEILI_HOST}
+#     NUXT_PUBLIC_MEILI_API_KEY: ${MEILI_API_KEY}
+#   before_script:
+#     - npm install
+#   script:
+#     - npm run generate
+#   artifacts:
+#     paths:
+#       - .output/public
+
+# build-wiki:prod:
+#   stage: build-wiki
+#   rules:
+#     - if: $CI_COMMIT_BRANCH == "main"
+#   needs:
+#     - set-meili-env:prod
+#     - get-zotero
+#   image: node:21.1-bookworm-slim
+#   variables:
+#     NODE_OPTIONS: --max_old_space_size=12288
+#     NUXT_APP_BASE_URL: /wiki/
+#     NUXT_PUBLIC_MEILISEARCH_CLIENT_HOST_URL: ${MEILI_HOST}
+#     NUXT_PUBLIC_MEILISEARCH_CLIENT_SEARCH_API_KEY: ${MEILI_API_KEY}
+#     NUXT_PUBLIC_MEILI_HOST: ${MEILI_HOST}
+#     NUXT_PUBLIC_MEILI_API_KEY: ${MEILI_API_KEY}
+#   before_script:
+#     - npm install
+#   script:
+#     - npm run generate
+#   artifacts:
+#     paths:
+#       - .output/public
+
+
+# load-website:dev:
+#   image: harbor.pasteur.fr/kube-system/helm-kubectl:$HELM_VERSION
+#   stage: load-website
+#   needs: 
+#     - build-wiki:dev
+#     - deploy:dev
+#   variables:
+#     NAMESPACE: "defense-finder-dev"
+#   environment:
+#     name: "k8sdev-01"
+#   rules:
+#     - if: $CI_COMMIT_BRANCH != "main"
+#   script:
+#     - kubectl --namespace ${NAMESPACE} wait pod -l "app.kubernetes.io/name=df-wiki" --for condition=Ready --timeout=600s 
+#     - echo "Le pod est ready"
+#     - WIKI_POD=$(kubectl --namespace ${NAMESPACE} get pods -l "app.kubernetes.io/name=df-wiki" --output jsonpath='{.items[0].metadata.name}')
+#     - kubectl --namespace ${NAMESPACE} cp .output/public/ ${WIKI_POD}:/website
+#     - |
+#       kubectl --namespace ${NAMESPACE}
+#       exec ${WIKI_POD} -- bash -c 'cd /structure-data/sanitized-dump && find * -type d -exec sh -c "for d in "$@"; do (cd "/usr/share/nginx/html/$d"; cp --archive --recursive --symbolic-link /structure-data/sanitized-dump/$d/* .) done" argv0 {} +'
+
+
+# load-website:prod:
+#   image: harbor.pasteur.fr/kube-system/helm-kubectl:$HELM_VERSION
+#   stage: load-website
+#   needs: 
+#     - build-wiki:prod
+#     - deploy:prod
+#   environment:
+#     name: "k8sprod-02"
+#   variables: 
+#     NAMESPACE: "defense-finder-prod"
+#   rules:
+#     - if: $CI_COMMIT_BRANCH == "main"
+#   script:
+#     - kubectl --namespace ${NAMESPACE} wait pod -l "app.kubernetes.io/name=df-wiki" --for condition=Ready --timeout=600s 
+#     - echo "Le pod est ready"
+#     - WIKI_POD=$(kubectl --namespace ${NAMESPACE} get pods -l "app.kubernetes.io/name=df-wiki" --output jsonpath='{.items[0].metadata.name}')
 
-build-wiki:
-  stage: build-wiki
-  image: node:21.1-bookworm-slim
-  variables:
-    NODE_OPTIONS: --max_old_space_size=12288
-    NUXT_APP_BASE_URL: /wiki/
-    NUXT_PUBLIC_MEILISEARCH_CLIENT_HOST_URL: ${MEILI_HOST}
-    NUXT_PUBLIC_MEILISEARCH_CLIENT_SEARCH_API_KEY: ${MEILI_API_KEY}
-    NUXT_PUBLIC_MEILI_HOST: ${MEILI_HOST}
-    NUXT_PUBLIC_MEILI_API_KEY: ${MEILI_API_KEY}
-  before_script:
-    - npm install
-  script:
-    - npm run generate
-  artifacts:
-    paths:
-      - .output/public
-
+#     - kubectl --namespace ${NAMESPACE} cp .output/public/ ${WIKI_POD}:/website
+#     - kubectl --namespace ${NAMESPACE} cp scripts/copy-structure-data.sh ${WIKI_POD}:/structure-data/sanitized-dump
+#     - kubectl --namespace ${NAMESPACE} exec ${WIKI_POD} -- bash -c 'cd /structure-data/sanitized-dump && bash copy-structure-data.sh'
 
 
 
@@ -397,11 +473,20 @@ build-wiki:
       --set env="${ENV:-development}"
       --values deploy/df-wiki/values.yaml
       --values deploy/df-wiki/values.${ENV:-development}.yaml
+  after_script:
+    - kubectl --namespace ${KUBE_NAMESPACE} wait pod -l "app.kubernetes.io/name=df-wiki" --for condition=Ready --timeout=600s 
+    - echo "Wiki pod is ready"
+    - WIKI_POD=$(kubectl --namespace ${KUBE_NAMESPACE} get pods -l "app.kubernetes.io/name=df-wiki" --output jsonpath='{.items[0].metadata.name}')
+    - echo ${WIKI_POD}
+    - kubectl --namespace ${KUBE_NAMESPACE} cp scripts/copy-structure-data.sh ${WIKI_POD}:/structure-data/sanitized-dump
+    - kubectl --namespace ${KUBE_NAMESPACE} exec ${WIKI_POD} -- bash -c 'cd /structure-data/sanitized-dump && bash copy-structure-data.sh'
+    
+    
 
 deploy:dev:
   extends: .deploy
   rules:
-    - if: $CI_COMMIT_BRANCH != "main"
+    - if: $CI_COMMIT_BRANCH == "dev" || $CI_COMMIT_BRANCH == "foldseek-pages"
   needs:
     - "build:dev:wiki"
   when: manual
@@ -464,3 +549,5 @@ delete-helm-release:prod:
   script:
     - echo "Removing $CI_PROJECT_NAME-$CI_ENVIRONMENT_NAME"
     - helm delete -n ${NAMESPACE} $CI_PROJECT_NAME-$CI_ENVIRONMENT_NAME
+
+

Dockerfile

@@ -15,14 +15,14 @@ FROM node:21.1-bookworm-slim as dev
 ARG BASE_URL=/
 ARG MEILI_HOST=http://localhost:7700
 ARG MEILI_API_KEY=api_key
-
+ARG HOST_URL
 ENV NUXT_APP_BASE_URL=${BASE_URL}
 # nuxt module
 ENV NUXT_PUBLIC_MEILISEARCH_CLIENT_HOST_URL=${MEILI_HOST}
 ENV NUXT_PUBLIC_MEILISEARCH_CLIENT_SEARCH_API_KEY=${MEILI_API_KEY}
-
-ENV NUXT_PUBLIC_MEILI_HOST=${MEILI_HOST}
-ENV NUXT_PUBLIC_MEILI_API_KEY=${MEILI_API_KEY}
+ENV NUXT_PUBLIC_HOST_URL=${HOST_URL}
+# ENV NUXT_PUBLIC_MEILI_HOST=${MEILI_HOST}
+# ENV NUXT_PUBLIC_MEILI_API_KEY=${MEILI_API_KEY}
 
 
 WORKDIR /usr/src/app
@@ -43,10 +43,21 @@ RUN npm run build
 
 ### STAGE: serve ###
 FROM node:21.1-bookworm-slim as serve
+ARG BASE_URL=/
+ARG MEILI_HOST=http://localhost:7700
+ARG MEILI_API_KEY
+ARG HOST_URL
 
-WORKDIR /usr/src/app
-COPY --from=build /usr/src/app/.output ./
+ENV NUXT_APP_BASE_URL=${BASE_URL}
 
+# nuxt module
+ENV NUXT_PUBLIC_MEILISEARCH_CLIENT_HOST_URL=${MEILI_HOST}
+ENV NUXT_PUBLIC_MEILISEARCH_CLIENT_SEARCH_API_KEY=${MEILI_API_KEY}
+ENV NUXT_PUBLIC_HOST_URL=${HOST_URL}
+
+WORKDIR /usr/src/app
+COPY  --chown=node:node --from=build /usr/src/app/.output ./
+USER node
 CMD [ "node", "server/index.mjs"]
 
 
@@ -55,6 +66,7 @@ FROM node:21.1-bookworm-slim as generate
 ARG BASE_URL=/
 ARG MEILI_HOST=http://localhost:7700
 ARG MEILI_API_KEY
+ARG HOST_URL
 
 ENV NODE_OPTIONS=--max_old_space_size=12288
 ENV NUXT_APP_BASE_URL=${BASE_URL}
@@ -62,9 +74,11 @@ ENV NUXT_APP_BASE_URL=${BASE_URL}
 # nuxt module
 ENV NUXT_PUBLIC_MEILISEARCH_CLIENT_HOST_URL=${MEILI_HOST}
 ENV NUXT_PUBLIC_MEILISEARCH_CLIENT_SEARCH_API_KEY=${MEILI_API_KEY}
+ENV NUXT_PUBLIC_HOST_URL=${HOST_URL}
+
 
-ENV NUXT_PUBLIC_MEILI_HOST=${MEILI_HOST}
-ENV NUXT_PUBLIC_MEILI_API_KEY=${MEILI_API_KEY}
+# ENV NUXT_PUBLIC_MEILI_HOST=${MEILI_HOST}
+# ENV NUXT_PUBLIC_MEILI_API_KEY=${MEILI_API_KEY}
 
 
 WORKDIR /usr/src/app

components/AutocompleteMeiliFacets.vue

+<script setup lang="ts">
+import { filter } from '@observablehq/plot'
+
+export interface FilterItem {
+    type: 'facet' | 'innerOperator' | 'outerOperator' | 'value'
+    value: string
+    title: string
+    count?: number
+    deletable: boolean
+    props: Record<string, any>
+}
+
+export interface FacetItem {
+    title: string
+    value: string
+    type: "facet"
+    icon?: string
+    count?: number
+
+}
+
+export interface OperatorItem {
+    title: string,
+    type: 'operator'
+
+}
+export interface FacetCategory {
+    title: string
+    type: "subheader"
+}
+export interface FacetDivider {
+    type: "divider"
+}
+
+export type FacetInputItem = FacetItem | FacetCategory | FacetDivider
+
+
+export interface Props {
+    db: string
+    modelValue: FilterItem[] | undefined
+    facets: MaybeRef<FacetInputItem[] | undefined>
+    facetDistribution: MaybeRef<Record<string, Record<string, number>> | undefined>
+    isValidFilters?: MaybeRef<boolean>
+    autocompleteProps?: Record<string, any>
+
+}
+
+
+const emit = defineEmits(['update:modelValue', "meiliFilters"])
+const filterId = ref<number>(0)
+const props = withDefaults(defineProps<Props>(), {
+    modelValue: undefined,
+    autocompleteProps: () => {
+        return {
+            chips: true,
+            clearable: true,
+            multiple: true,
+            "auto-select-first": true,
+            "return-object": true,
+            "prepend-inner-icon": "md:filter_alt",
+            "hide-details": "auto",
+            "item-value": "value", "item-title": "title",
+            label: "Filter results...",
+            "single-line": true,
+
+        }
+    },
+    isValidFilters: false
+});
+// const { result: msResult } = useMeiliSearch(props.db)
+const isAutocompleteFocused = ref<boolean>(false)
+// const facetDistribution: Ref<Record<string, Record<string, number>>>  = useState('facetDistribution')
+
+
+
+const autocompleteProps = computed(() => {
+    return {
+        ...props.autocompleteProps,
+        items: toValue(autocompleteItems)
+    }
+})
+
+const filterStep = computed(() => {
+    const toValFilterItems = toValue(props.modelValue)
+    if (toValFilterItems !== undefined) {
+        return toValFilterItems.length % 4
+    }
+})
+
+const innerOperatorItems = ref<FilterItem[]>([
+    {
+        type: "innerOperator", value: '=', title: "is", deletable: false, props: {
+            type: "innerOperator", deletable: false
+        }
+    }, {
+        type: "innerOperator", value: '!=', title: "is not", deletable: false, props: {
+            type: "innerOperator",
+            deletable: false
+        }
+    },
+
+])
+
+const outerOperatorItems = ref<FilterItem[]>([
+    {
+        type: "outerOperator", value: 'AND', title: "AND", deletable: false, props: {
+            type: "outerOperator", deletable: false
+        }
+    }, {
+        type: "outerOperator", value: 'OR', title: "OR", deletable: false, props: {
+            type: "outerOperator",
+            deletable: false
+        }
+    },
+
+])
+
+const autocompleteItems = computed(() => {
+    const toValFilterItems = toValue(props.modelValue)
+    // const index = toValFilterItems?.length ?? 0
+    if (filterStep.value === undefined || filterStep.value === 0) {
+        filterId.value++
+        return toValue(props.facets)?.map(facetItem => {
+            switch (facetItem.type) {
+                case "facet":
+                    return {
+                        type: "facet",
+                        value: `${facetItem.value}-${filterId.value}`,
+                        title: facetItem.title,
+                        deletable: false,
+                        icon: facetItem?.icon,
+                        count: facetItem?.count,
+                        props: {
+                            deletable: false,
+                            type: "facet"
+                        }
+                    }
+                case "subheader":
+                    return {
+                        type: "subheader",
+                        title: facetItem.title,
+                        deletable: false,
+
+                        props: {
+                            type: "subheader"
+                        }
+                    }
+                case "divider":
+                    return { type: "divider" }
+                default:
+                    break;
+            }
+
+        })
+    }
+    if (filterStep.value === 1) {
+        filterId.value++
+        return innerOperatorItems.value.map(it => { return { ...it, value: `${it.value}-${filterId.value}`, } })
+    }
+    if (filterStep.value === 2) {
+        filterId.value++
+
+        // get the facet value
+        if (Array.isArray(toValFilterItems)) {
+            const { type, value } = toValFilterItems?.slice(-2, -1)[0]
+            const sanitizedValue = value.split("-")[0]
+            const facetDistri = toValue(props.facetDistribution)
+            return facetDistri?.[sanitizedValue] ? Object.entries(facetDistri[sanitizedValue]).map(([key, val]) => {
+                return {
+                    type: "value", value: `${key}-${filterId.value}`, title: key, count: val, deletable: true, props: {
+                        type: "value", count: val, deletable: true
+                    }
+                }
+            }) : []
+        }
+    }
+    if (filterStep.value === 3) {
+        filterId.value++
+        return outerOperatorItems.value.map(it => { return { ...it, value: `${it.value}-${filterId.value}`, } })
+    }
+})
+
+const hasFacetDistribution = computed(() => {
+
+    const toValFacetDistribution = toValue(props.facetDistribution)
+
+    return toValFacetDistribution !== undefined && Object.keys(toValFacetDistribution).length > 0
+})
+
+function updateAutocompleteFocused(isFocused: boolean) {
+    isAutocompleteFocused.value = isFocused
+}
+
+
+function emitUpdateModelValue(filters: MaybeRef<FilterItem[] | undefined>) {
+    emit('update:modelValue', toValue(filters))
+
+}
+
+function clearFilters() {
+    emitUpdateModelValue(undefined)
+}
+function deleteOneFilter(index: number) {
+
+    const toValFilterItems = toValue(props.modelValue)
+    // check if the next item is an outeroperator
+    const nextFilterItem = toValFilterItems?.slice(index + 1, index + 2)
+    if (index + 1 === toValFilterItems?.length && toValFilterItems?.length >= 7) {
+        // need to remove the previous outer operator
+        toValFilterItems?.splice(index - 3, 4)
+    }
+    else if (nextFilterItem?.length === 1 && nextFilterItem[0].type === 'outerOperator') {
+        toValFilterItems?.splice(index - 2, 4)
+
+    }
+    else {
+        toValFilterItems?.splice(index - 2, 3)
+    }
+
+    emitUpdateModelValue(toValFilterItems)
+}
+
+function isItemFilter(type: string | undefined) {
+    return type === "facet" || type === "innerOperator" || type === "outerOperator" || type === "value"
+}
+
+const hint = ref<string>('All <span class="font-weight-bold">OR</span> in a row are grouped together. Example: <span class="font-weight-bold">brex OR avs AND Archea</span> &rArr; <span class="font-weight-bold">(brex OR avs) AND Archea</span>')
+
+</script>
+<template>
+    <v-autocomplete :model-value="props.modelValue" @click:clear="clearFilters" v-bind="autocompleteProps" :hint="hint"
+        persistent-hint @update:focused="updateAutocompleteFocused" @update:modelValue="emitUpdateModelValue"
+        :loading="!hasFacetDistribution" :disabled="!hasFacetDistribution">
+        <template #message="{ message }">
+            <span v-html="message"></span>
+        </template>
+        <template #item="{ props, item }">
+            <v-list-item v-if="isItemFilter(item?.raw?.type)" v-bind="{ ...props, active: false }" :title="item.title"
+                :prepend-icon="item?.raw?.icon ? item.raw.icon : undefined"
+                :subtitle="item.raw?.count ? item.raw.count : ''" :value="props.value">
+            </v-list-item>
+            <v-divider v-if="item.raw.type === 'divider'"></v-divider>
+            <v-list-subheader v-if="item.raw.type === 'subheader'" :title="item.raw.title"></v-list-subheader>
+        </template>
+        <template #chip="{ props, item, index }">
+            <v-chip v-bind="props" :text="item.raw.title" :closable="item.props.deletable"
+                @click:close="item.props.type === deleteOneFilter(index)"></v-chip>
+        </template>
+        <!-- <template #append>
+            <v-btn variant="text" icon="md:filter_alt" @click="emitUpdateModelValue(props.modelValue)"
+                :disabled="!isValidFilters"></v-btn>
+        </template> -->
+
+    </v-autocomplete>
+</template>
\ No newline at end of file

components/EditGitlab.vue

 <template>
   <v-row>
     <v-col>
-      <v-btn prepend-icon="mdi-gitlab" variant="text" size="small" :href="path" target="_blank">Edit on gitlab</v-btn>
+      <v-btn prepend-icon="i-vscode-icons:file-type-gitlab" variant="text" size="small" :href="path" target="_blank">Edit on gitlab</v-btn>
       <v-divider> </v-divider>
     </v-col>
   </v-row>

components/FoldseekDialog.vue

+<script setup lang="ts">
+
+interface Props {
+    foldseekPath: string
+    title: string
+}
+
+const props = withDefaults(defineProps<Props>(), { title: "Result of Foldseek search" });
+const { width, height } = useDisplay()
+const dialog = ref(false)
+const iframe = ref()
+const layout = ref({
+    scrollbarWidth: 15,
+    paddingLeft: 24,
+    paddingRight: 24,
+    toolbarHeight: 48,
+    containerPaddingTop: 16,
+    containerPaddingBottom: 10
+
+
+})
+
+const xMargin = computed(() => {
+    const toValLayout = toValue(layout)
+    return toValLayout.scrollbarWidth + toValLayout.paddingLeft + toValLayout.paddingRight
+})
+
+const yMargin = computed(() => {
+    const toValLayout = toValue(layout)
+    return toValLayout.toolbarHeight + toValLayout.containerPaddingBottom + toValLayout.containerPaddingTop
+})
+
+const computedWidth = computed(() => {
+    return toValue(width) - toValue(xMargin)
+})
+const computedHeight = computed(() => {
+    return toValue(height) - toValue(yMargin)
+})
+
+
+function fullscreen() {
+    console.log(iframe.value)
+    iframe.value.requestFullscreen();
+}
+
+
+
+</script>
+<template>
+    <v-dialog v-model="dialog" fullscreen transition="dialog-bottom-transition">
+        <template v-slot:activator="{ props }">
+            <v-avatar>
+                <v-img src="~/assets/foldseek.png" alt="Foldseek results" v-bind="props" class="cursor-pointer"></v-img>
+                <!-- <v-btn color="primary" dark v-bind="props">
+                <v-img src="~/assets/foldseek.png" alt="Foldseek results"></v-img>
+            </v-btn> -->
+            </v-avatar>
+        </template>
+        <v-card variant="flat">
+            <v-toolbar flat color="transparent" density="compact">
+                <v-btn variant="text" color="primary" prepend-icon="mdi-arrow-left" @click="dialog = false">
+                    Return to structure list
+                </v-btn>
+
+                <v-divider vertical inset></v-divider>
+                <v-toolbar-title> {{ props.title }}</v-toolbar-title>
+                <v-spacer></v-spacer>
+                <v-toolbar-items>
+                    <v-btn @click="fullscreen()" icon="md:fullscreen"></v-btn>
+
+                </v-toolbar-items>
+            </v-toolbar>
+            <v-card-text>
+                <iframe ref="iframe" :width="computedWidth" :height="computedHeight" allow="fullscreen" loading="eager"
+                    :src="props.foldseekPath"></iframe>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
+</template>
+<style scoped>
+.cursor-pointer {
+    cursor: pointer
+}
+</style>
\ No newline at end of file

components/LayoutWrapper.vue

@@ -9,6 +9,7 @@ export interface Props {
   edit?: boolean
   navDrawer?: boolean
   title?: string
+  density?: 'compact' | 'prominent'
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -16,15 +17,31 @@ const props = withDefaults(defineProps<Props>(), {
   toc: true,
   edit: true,
   navDrawer: true,
-  title: null
+  title: "",
+  density: undefined
 });
 const drawer = ref(true);
 
 const { page } = useContent();
 const scrollThreshold = ref(200)
 const density = ref<'compact' | 'prominent'>("prominent")
+
+onMounted(() => {
+  if (props?.density) {
+    density.value = props.density
+  } else {
+    density.value = "prominent"
+  }
+})
+
+
+
 function onScroll() {
-  if (window.scrollY > scrollThreshold.value) {
+
+  if (props?.density) {
+    return props.density
+  }
+  else if (window.scrollY > scrollThreshold.value) {
     density.value = "compact"
   }
   else { density.value = "prominent" }
@@ -36,9 +53,9 @@ function onScroll() {
     <v-main style="min-height: 300px">
       <v-container v-scroll="onScroll" :fluid="fluid">
         <v-row justify="center">
-          <v-col cols="auto">
+          <v-col cols="auto" class="pa-0">
             <v-card flat color="transparent" :min-width="mobile ? undefined : 900" :max-width="fluid ? undefined : 1500">
-              <v-card-text>
+              <v-card-text class="pa-0">
                 <slot />
               </v-card-text>
               <EditGitlab v-if="edit" />
@@ -48,6 +65,10 @@ function onScroll() {
         </v-row>
       </v-container>
       <!-- <Footer></Footer> -->
+      <!-- <div class="i-ph-anchor-simple-thin d-none" />
+      <div class="i-tabler:database d-none" />
+      <div class="i-mdi:book-education-outline d-none" />
+      <div class="i-tabler:help d-none" /> -->
     </v-main>
     <NavNavbar v-model:drawer="drawer" :title="title !== null ? title : undefined" :density="density"
       :drawer-enabled="navDrawer" />

components/Nav/Navbar.vue

@@ -32,7 +32,7 @@ watchEffect(() => {
 const sections = ref([
   {
     id: "webservice",
-    label: "webservice",
+    label: "Webservice",
     href: runtimeConfig.public.defenseFinderWebservice,
   },
   { id: "wiki", label: "Wiki", to: '/', },

components/PlotFigure.js

@@ -148,7 +148,7 @@ export default {
     const options = {
       ...(method === "plot" && {
         marks: this.mark == null ? [] : [this.mark],
-        width: 688 // better default for VitePress
+        // width: 688 // better default for VitePress
       }),
       ...this.options,
       className: "plot"

components/ServerDbTable.vue

 <script setup lang="ts">
 // import type { FacetDistribution } from "meilisearch";
+import { useCsvDownload } from "@/composables/useCsvDownload"
+import { useMeiliFilters } from "@/composables/useMeiliFilters"
 import { useSlots } from 'vue'
 import { useDisplay } from "vuetify";
-import * as Plot from "@observablehq/plot";
-import PlotFigure from "~/components/PlotFigure";
-import * as d3 from "d3";
 import { useThrottleFn } from '@vueuse/core'
+import type { FacetInputItem, FilterItem } from '@/components/AutocompleteMeiliFacets.vue'
 import { useMeiliSearch } from "#imports"
+import type { Filter } from "meilisearch";
+// import { saveAs } from "file-saver";
 export interface SortItem {
     key: string,
     order: boolean | 'asc' | 'desc'
 }
 
+export interface NumericalFilter {
+    id: string
+    name: string
+    range: [number, number]
+}
+
+export interface NumericalFilterModel extends NumericalFilter {
+    model: [number, number]
+}
+
+
+
+
+
+export interface AutocompleteMeiliFacetProps {
+    db: string
+    facets: FacetInputItem[] | undefined
+    facetDistribution: Record<string, Record<string, number>> | undefined
+
+}
 export interface Props {
     title?: string
-    db?: string
     sortBy?: SortItem[]
-    facets: MaybeRef<string[]>
+    numericalFilters?: Ref<string[] | undefined>
     dataTableServerProps: Record<string, any>
+    columnsToDownload?: MaybeRef<string[] | undefined>
+    autocompleteMeiliFacetsProps: AutocompleteMeiliFacetProps
 }
 
-export interface FilterItem {
-    type: 'facet' | 'operator' | 'value' | 'text'
-    value: string
-    title: string
-    count?: number
-    deletable: boolean
-    props: Record<string, any>
-}
 
 const props = withDefaults(defineProps<Props>(), {
     title: '',
-    db: 'refseq',
+    columnsToDownload: undefined,
     sortBy: () => [{ key: "type", order: "asc" }],
+    numericalFilters: () => ref(undefined),
+    autocompleteMeiliFacetsProps: () => {
+        return {
+            db: 'refseq',
+            facetDistribution: undefined,
+            facets: undefined
+
+        }
+    }
 });
 
 
 
+// const facetDistribution: Ref<Record<string, Record<string, number>> | undefined> = useState(`refseqFacetDistribution`)
+
+
 const slots = useSlots()
 const sortByRef = toRef(props.sortBy)
-const facetsRef = toRef(props.facets)
 const emit = defineEmits(["refresh:search"])
-const { search: msSearch, result: msResult } = useMeiliSearch(props.db)
+const { search: msSearch, result: msResult } = useMeiliSearch(props.autocompleteMeiliFacetsProps.db)
 const search: Ref<string> = ref("");
 const filterOrSearch: Ref<FilterItem[] | null> = ref(null)
 const hitsPerPage: Ref<number> = ref(25)
 const itemsPerPage: Ref<number[]> = ref([25, 50, 100])
 const filterError: Ref<string | null> = ref(null)
-const msFilter: Ref<string | undefined> = ref(undefined)
+// const msFilter: Ref<string | undefined> = ref(undefined)
 const page = ref(1)
 let loading = ref(false)
 const expanded = ref([])
-const { height } = useDisplay();
+const { height, mobile } = useDisplay();
 const minTableHeight = ref(400)
 const computedTableHeight = computed(() => {
     const computedHeight = height.value - 350
     return computedHeight > minTableHeight.value ? computedHeight : minTableHeight.value
 })
-const plddtRange = ref([0, 100])
 
-// const { pending: pendingDownloadData, downloadCsv } = useCsvDownload(props.db, `df-${props.db}`)
+const pendingDownloadData = ref(false)
+
+const toRefNumericalFilters = toRef(props.numericalFilters)
+// const meiliFilters = ref<string | undefined>(undefined)
 
 const filterInputValues = computed(() => {
-    // console.log("recompouted FILTER value")
     if (filterOrSearch.value != null) {
         return filterOrSearch.value.filter(({ props }) => props.type !== 'text')
     } else {
@@ -70,27 +97,6 @@ const filterInputValues = computed(() => {
     }
 })
 
-// const queryInputValue = computed(() => {
-//     if (filterOrSearch.value !== null) {
-//         const phrase = filterOrSearch.value
-//             .filter((f) => {
-//                 return f.props.type === 'text'
-//             })
-//             .map((f) => {
-//                 return f.value
-//             })
-//         if (phrase.length > 1) {
-//             return `${phrase.join(" ")}`
-//         }
-//         else { return phrase[0] }
-//     } else {
-//         return null
-//     }
-// })
-
-const isFilter = computed(() => {
-    return Array.isArray(filterOrSearch.value)
-})
 
 const msSortBy = computed(() => {
     if (sortByRef.value.length > 0) {
@@ -119,263 +125,215 @@ const notPaginatedParams = computed(() => {
 
 
 watch([paginationParams, msSortBy, page], ([newParams, newSort, newPage]) => {
-    searchOrFilter()
+    if (toValue(isValidFilters)) {
+        searchOrFilter()
+    }
 })
 
 
-onMounted(async () => {
+
+onBeforeMount(async () => {
     searchOrFilter()
+    emitRefreshRes()
+
+
 })
 
-const hasPlddt = computed(() => props.db === 'structure')
+const msFilterCompo = ref<FilterItem[] | undefined>(undefined)
+
+
+const computedFilterStr = computed(() => {
+    const toValFilters = toValue(msFilterCompo)
+    let filtersStr: string | undefined = undefined
+    if (toValFilters !== undefined && toValFilters.length > 0) {
+        const tmpFilterItems = [...toValFilters]
+        if (tmpFilterItems.length % 4 === 0) {
+            tmpFilterItems.splice(-1)
+        }
+        filtersStr = "(" + tmpFilterItems.map((it, index) => {
+            const sanitizedValue = it.value.split("-").slice(0, -1).join("-")
+            if ((index + 1) % 4 === 3) {
+                return `"${sanitizedValue}"`
+            } else if ((index + 1) % 4 === 0) {
+                return ` ${sanitizedValue} `
+            }
+            else {
+                return `${sanitizedValue}`
+            }
+
+        }).join("") + ")"
 
-// Fetch results
-const plddtFilter = computed(() => {
-    const plddtRangeValue = plddtRange.value
-    if (hasPlddt.value && plddtRangeValue?.length === 2 && (plddtRangeValue[0] !== 0 || plddtRangeValue[1] !== 100)) {
-        return `plddts ${plddtRangeValue[0]} TO ${plddtRangeValue[1]}`
-    } else {
-        return undefined
     }
 
+    return [filtersStr, props.numericalFilters].filter(f => f !== undefined && f !== null).join(" AND ")
+
 })
 
 
-const computedFilter = computed(() => {
-    if (toValue(msFilter)) {
-        if (toValue(plddtFilter)) {
-            return `${toValue(msFilter)} AND ${toValue(plddtFilter)}`
-        }
-        else {
-            return toValue(msFilter)
-        }
-    } else {
-        if (toValue(plddtFilter)) {
-            return `${toValue(plddtFilter)}`
-        }
-        else {
-            return undefined
-        }
+const computedF = computed(() => toValue(props.numericalFilters))
+const { arrayFilters: computedFilter } = useMeiliFilters(msFilterCompo, computedF)
+// const computedFilter = computed(() => {
+//     const toValFilters = toValue(msFilterCompo)
+//     if (toValFilters !== undefined && toValFilters.length > 0) {
+//         meiliFilterAsArray
+//     }
+// })
+
+
+watch(computedFilter, () => {
+    console.log(toValue(computedFilter))
+    if (toValue(isValidFilters) && (toValue(computedFilter) !== undefined || toValue(filterInputValues) === null)) {
+        searchOrFilter()
+        emitRefreshRes()
     }
 })
 
 
-
 const msError = computed(() => {
     if (filterError.value?.type && filterError.value?.message) {
         return filterError.value?.message
     } else { return false }
 })
 
-const throttleSearch = useThrottleFn(async () => { searchOrFilter() }, 300)
+const throttleSearch = useThrottleFn(async () => {
+    searchOrFilter()
+    emitRefreshRes()
+}, 300)
+
+
+const lastFilterItem = computed(() => {
+    const toValFilterItems = toValue(msFilterCompo)
+    if (toValFilterItems !== undefined && Array.isArray(toValFilterItems)) {
+        return toValFilterItems.slice(-1)[0]
+    }
+})
+
+const isValidFilters = computed(() => {
+    const toValFilterItems = toValue(msFilterCompo)
+    if (toValFilterItems === undefined || Array.isArray(toValFilterItems) && toValFilterItems?.length === 0) {
+        return true
+    }
+    else {
+        const toValLastFilterItem = toValue(lastFilterItem)
+        if (toValLastFilterItem !== undefined) {
+            console.log(toValLastFilterItem.type)
+            console.log(toValLastFilterItem.type === 'value')
+            return toValLastFilterItem.type === 'value'
+            // && isAutocompleteFocused.value === false
+            // || (toValFilterStep === 0 && toValLastFilterItem.type === "outerOperator" && toValLastFilterItem.value.split("-")[0] === "AND")
+        }
+    }
+    return false
+})
 
-async function searchOrFilter(pagination = true) {
 
-    // do something, it will be called at most 1 time per second
-    try {
-        loading.value = true
-        // const q = queryInputValue.value === null ? "" : queryInputValue.value
-        const q = search.value
-        emit("refresh:search", {
-            index: props.db,
-            query: q,
-            params: { ...notPaginatedParams.value, filter: toValue(computedFilter), sort: msSortBy.value }
-        })
-        if (pagination) {
+async function searchOrFilter() {
+    if (toValue(isValidFilters)) {
+        // do something, it will be called at most 1 time per second
+        try {
+            loading.value = true
+            // const q = queryInputValue.value === null ? "" : queryInputValue.value
+            const q = search.value
             await msSearch(q, { ...paginationParams.value, filter: toValue(computedFilter), sort: msSortBy.value })
-
+        } catch (error: any) {
+            filterError.value = error
+            console.log(error)
         }
-        else {
-            await msSearch(q, { ...notPaginatedParams.value, filter: toValue(computedFilter), sort: msSortBy.value })
+        finally {
+            loading.value = false
         }
-
-    } catch (error: any) {
-        filterError.value = error
-        console.log(error)
-    }
-    finally {
-        loading.value = false
     }
 
 }
 
 
 
-function clearFilterOrSearch() {
-    filterOrSearch.value = null
-    searchOrFilter()
+function emitRefreshRes() {
+    const q = search.value
+    emit("refresh:search", {
+        index: props.autocompleteMeiliFacetsProps.db,
+        query: q,
+        params: { ...notPaginatedParams.value, filter: toValue(computedFilter), sort: msSortBy.value }
+    })
 }
 
-watch(msFilter, async (fos) => {
-    searchOrFilter()
-    search.value = ''
-
-})
 
 
 const totalHits = computed(() => {
     return toValue(msResult)?.totalHits ?? toValue(msResult)?.estimatedTotalHits ?? 0
 })
 
-watch(filterInputValues, (newSoF) => {
-    if (isFilter.value && filterInputValues.value !== null && filterInputValues.value?.length % 3 === 0) {
-        msFilter.value = filterInputValues.value.map((it, index) => {
 
-            const sanitizedValue = it.value.split("-").slice(0, -1).join("-")
-            if (index >= 1 && (index + 1) % 3 === 1) {
-                return ` AND ${sanitizedValue}`
-            } else if ((index + 1) % 3 === 0) {
-                return `"${sanitizedValue}"`
-            } else {
-                return `${sanitizedValue}`
-            }
-
-        }).join("")
-    }
-})
+watch(search, () => {
+    searchOrFilter()
+    // emitRefreshRes()
 
-watch(search, () => { searchOrFilter() })
-// watch(plddtRange, () => { searchOrFilter() })
-const filterStep = computed(() => {
-    return filterInputValues.value !== null && filterInputValues.value.length > 0 ? filterInputValues.value?.length % 3 : null
-})
-const operatorItems = ref([
-    {
-        type: "operator", value: '=', title: "is", deletable: false, props: {
-            type: "operator", deletable: false
-        }
-    }, {
-        type: "operator", value: '!=', title: "is not", deletable: false, props: {
-            type: "operator",
-            deletable: false
-        }
-    },
-
-])
-
-const autocompleteItems = computed(() => {
-    const index = filterOrSearch.value?.length ?? 0
-    // console.log(index)
-    if (filterStep.value === null || filterStep.value === 0) {
-        return toValue(facetsRef).map(value => {
-            return {
-                type: "facet",
-                value: `${value}-${index}`,
-                title: value,
-                deletable: false,
-                props: {
-                    deletable: false,
-                    type: "facet"
-                }
-            }
-        })
-    }
-    if (filterStep.value === 1) {
-        return operatorItems.value.map(it => { return { ...it, value: `${it.value}-${index}`, } })
-    }
-    if (filterStep.value === 2) {
-        // get the facet value
-        if (Array.isArray(filterOrSearch.value)) {
-            const { type, value } = filterOrSearch.value?.slice(-2, -1)[0]
-            const sanitizedValue = value.split("-")[0]
-            // console.log("compute new facets")
-            const facetDistri = msResult.value?.facetDistribution
-            // console.log(facetDistri)
-            return facetDistri?.[sanitizedValue] ? Object.entries(facetDistri[sanitizedValue]).map(([key, val]) => {
-                return {
-                    type: "value", value: `${key}-${index}`, title: key, count: val, deletable: true, props: {
-                        type: "value", count: val, deletable: true
-                    }
-                }
-            }) : []
-        }
-    }
 })
+// watch(msFilterCompo, () => {
+//     searchOrFilter()
 
-// const canAddTextSearch = computed(() => {
-//     if (filterOrSearch.value !== null && filterOrSearch.value.length > 0) {
-//         const lastItem = filterOrSearch.value.slice(-1)[0]
-//         return lastItem?.props.type === 'value' || lastItem?.props.type === "text"
-//     }
-//     return true
 // })
 
-function selectItem(item) {
-    filterOrSearch.value = Array.isArray(filterOrSearch.value) ? [...filterOrSearch.value, item] : [item]
-}
+async function downloadData() {
+    pendingDownloadData.value = true
+    try {
+        const { data } = await useAsyncMeiliSearch({
+            index: props.autocompleteMeiliFacetsProps.db,
+            params: { ...toValue(notPaginatedParams), filter: toValue(computedFilter), sort: toValue(msSortBy) },
+            query: toValue(search),
+        })
 
-function deleteOneFilter(index: number) {
-    if (isFilter.value) {
-        filterOrSearch.value?.splice(index - 2, 2)
+        useCsvDownload(data, props.columnsToDownload, props.title)
+    } finally {
+        pendingDownloadData.value = false
     }
 }
 
-function clearSearch() {
-    search.value = ""
-}
-
-
+function focusedOrBlur(isFocused: boolean) {
 
-
-// const groupSortDomain = computed(() => {
-//     console.log(msResult.value)
-//     return msResult.value ? d3.groupSort(msResult.value?.hits?.filter((d) => d.phylum), (g) => d3.median(g, (d) => d.phylum), (d) => d.type) : []
-// })
+    if (!isFocused) {
+        emitRefreshRes()
+    }
+}
 
 
 
 </script>
 <template>
     <v-card flat color="transparent">
-        <v-card-text>
-        </v-card-text>
-        <v-card-text>
-            <v-row>
-                <v-col cols="5">
-                    <v-text-field v-model="search" label="Search..." hide-details prepend-inner-icon="mdi-magnify"
-                        single-line clearable></v-text-field>
-                </v-col>
-                <v-col>
-                    <v-autocomplete ref="autocompleteInput" hide-details v-model:model-value="filterOrSearch"
-                        auto-select-first chips clearable label="Filter results..." :items="autocompleteItems" single-line
-                        item-value="value" item-title="title" multiple return-object prepend-inner-icon="md:search"
-                        @click:appendInner="searchOrFilter" @click:clear="clearFilterOrSearch"
-                        @update:modelValue="() => clearSearch()">
-                        <template #chip="{ props, item, index }">
-                            <v-chip v-bind="props" :text="item.raw.title" :closable="item.props.deletable"
-                                @click:close="item.props.type === deleteOneFilter(index)"></v-chip>
-                        </template>
-                        <template #item="{ props, item }">
-                            <v-list-item v-bind="{ ...props, active: false, onClick: () => selectItem(item) }"
-                                :title="item.title" :subtitle="item.raw?.count ? item.raw.count : ''" :value="props.value">
-
-                            </v-list-item>
-                        </template>
-                    </v-autocomplete>
-                </v-col>
-            </v-row>
-            <v-row v-if="props.db === 'structure'">
-                <v-col>
-                    <v-range-slider v-model="plddtRange" density="compact" hide-details="auto" label="pLDDT" step="0.1"
-                        @update:modelValue="throttleSearch()">
-                        <template v-slot:prepend>
-                            <span hide-details single-line type="number" variant="outlined" density="compact"
-                                style="width: 70px">{{ plddtRange[0] }}</span>
-                        </template>
-                        <template v-slot:append>
-                            <span hide-details single-line type="number" variant="outlined" style="width: 70px"
-                                density="compact">{{ plddtRange[1] }}</span>
-                        </template>
-
-                    </v-range-slider>
-                </v-col>
-            </v-row>
-        </v-card-text>
+        <slot name="numerical-filters" :search="throttleSearch"></slot>
         <v-data-table-server v-if="!msError" v-model:page="page" color="primary" v-bind="dataTableServerProps"
             v-model:items-per-page="hitsPerPage" v-model:sortBy="sortByRef" v-model:expanded="expanded" fixed-header
             :loading="loading" :items="msResult?.hits ?? []" :items-length="totalHits" density="compact"
             :items-per-page-options="itemsPerPage" :height="computedTableHeight" class="elevation-1 mt-2">
 
+            <template #top>
+                <v-card variant="flat" color="transparent">
+                    <v-card-title>
+                        <v-badge :content="totalHits" color="primary" class="mr-3">
+                            <v-btn prepend-icon="md:download" :loading="pendingDownloadData" variant="text" color="primary"
+                                @click="downloadData()">{{
+                                    props.title }}
+                            </v-btn>
+                        </v-badge>
+                    </v-card-title>
+                    <v-card-title>
+                        <v-text-field v-model="search" label="Search..." hide-details="auto" :disabled="pendingDownloadData"
+                            prepend-inner-icon="mdi-magnify" single-line clearable
+                            @update:focused="focusedOrBlur"></v-text-field>
+                    </v-card-title>
+                    <v-card-title>
+                        <AutocompleteMeiliFacets v-model="msFilterCompo" v-bind="props.autocompleteMeiliFacetsProps"
+                            :is-valid-filters="isValidFilters">
+                        </AutocompleteMeiliFacets>
+
+
+                    </v-card-title>
+
+
+                </v-card>
+            </template>
+
             <template v-for="(slot, index) of Object.keys(slots)" :key="index" v-slot:[slot]="data">
                 <slot :name="slot" v-bind="data"></slot>
             </template>

components/content/ListSystems.vue

-<script setup lang="ts">
-import { usePfamStore } from "@/stores/pfam";
-
-export interface Props {
-  headers: Array<Object>;
-  systems: Array<Object>;
-  height?: number;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  height: 800,
-});
-
-const itemsPerParge = ref(25);
-const search = ref("");
-const sortBy = ref([{ key: "system", order: "asc" }]);
-const expanded = ref([]);
-
-function filterOnlyCapsText(value, query, item) {
-  if (value != null && query != null) {
-    if (typeof value === "string") {
-      return value.toString().toLowerCase().indexOf(query.toLowerCase()) !== -1;
-    }
-    if (typeof value == "object") {
-      if (value?.name) {
-        return (
-          value.name.toString().toLowerCase().indexOf(query.toLowerCase()) !==
-          -1
-        );
-      }
-    }
-  }
-  return false;
-}
-const { initPfam } = usePfamStore();
-onMounted(() => {
-  initPfam();
-})
-</script>
-<template>
-  <v-card>
-    <v-toolbar density="compact">
-      <v-toolbar-title>Defense Systems</v-toolbar-title>
-
-      <v-text-field v-model="search" density="compact" variant="underlined" prepend-inner-icon="mdi-magnify"
-        label="Search for defense systems" single-line hide-details class="mx-2" clearable></v-text-field>
-    </v-toolbar>
-    <v-data-table-virtual fixed-header :height="height" :items-per-page="itemsPerParge" v-model:sort-by="sortBy"
-      :headers="props.headers" density="compact" :custom-filter="filterOnlyCapsText" :items="props.systems"
-      :search="search" item-value="system.name">
-      <template #[`item.system`]="{ item }">
-        <v-chip variant="text" link :to="item?.system?.path ? `${item?.system?.path}` : null">{{
-          item?.system?.name ?? 'None'
-        }}</v-chip>
-      </template>
-      <template #[`item.article`]="{ item }">
-        <ArticleDoi v-if="item?.article" :doi="item.article.doi" :title="item.article?.title"
-          :abstract="item.article?.abstract" :divider="false" :enumerate="false" />
-      </template>
-      <template #[`item.PFAM`]="{ item }">
-
-        <pfam-chips v-if="item?.PFAM" :pfam-string="item.PFAM"></pfam-chips>
-      </template>
-    </v-data-table-virtual>
-  </v-card>
-</template>
\ No newline at end of file

components/content/Mermaid.vue

@@ -10,7 +10,7 @@
   
 <script setup lang="ts">
 const slot = useSlots()
-const el = ref(null)
+const el: Ref<HTMLElement | null> = ref(null)
 const rendered = ref(false)
 
 async function render() {

components/content/MolstarPdbePlugin.vue

@@ -83,7 +83,7 @@ useHead({
     link: [
         {
             rel: 'stylesheet',
-            href: 'https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-3.1.2.css'
+            href: 'https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-3.1.3.css'
         },
     ],
     script: [
@@ -96,7 +96,7 @@ useHead({
         },
         {
             type: "text/javascript",
-            src: "https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdbe-molstar-component-3.1.2.js",
+            src: "https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdbe-molstar-component-3.1.3.js",
             // tagPosition: 'bodyClose'
         }
     ]
@@ -105,86 +105,43 @@ useHead({
 const pdbeMolstarComponent = ref(null)
 // const selectedPdb = ref("/wiki/avs/AVAST_I,AVAST_I__Avs1A,0,V-plddts_85.07081.pdb")
 const selectedPdb: Ref<string | null> = ref(null)
-
+const structureToDownload: Ref<string | null> = ref(null)
 const selectedPaePath = computed(() => {
-    return selectedPdb.value ? `${selectedPdb.value.split(".").slice(0, -1).join('.')}.png` : null
+    return selectedPdb.value ? `${selectedPdb.value.split(".").slice(0, -1).join('.')}.png` : undefined
 })
 
-// const paeData = ref([])
-// watch(selectedPaePath, async (newPaePath) => {
-//     if (newPaePath !== null) {
-//         try {
-//             const data = await d3.tsv(newPaePath);
-//             if (data.length > 500) {
-//                 paeError.value = `The PAE is too large to be displayed (${data.length} residus)`
-//                 paeData.value = []
-//             }
-//             else if (data?.[0]?.[0] === undefined) {
-//                 paeError.value = "The PAE cannot be downloaded"
-//                 paeData.value = []
-//             }
-//             else {
-//                 paeData.value = data
-//                 paeError.value = null
-//             }
-
-//         }
-//         catch (error) {
-//             console.log(error)
-//         }
-//     } else {
-//         paeData.value = []
-//     }
-
-// })
-
-// const sanitizedPaeData = computed(() => {
-//     return paeData.value.reduce((acc, curr, index) => {
-//         const scoredResidue = index
-//         // let newAcc = [...acc]
-//         for (const [alignedResidue, value] of Object.entries(curr)) {
-//             // console.log(value)
-//             acc.push({ alignedResidue: parseInt(alignedResidue), scoredResidue: parseInt(scoredResidue), value: parseFloat(value) })
-//             // newAcc = [...newAcc, ...[{ alignedResidue: parseInt(alignedResidue), scoredResidue: parseInt(scoredResidue), value: parseFloat(value) }]]
-//         }
-
-//         return acc
-//     }, [])
-// })
-
-
-// const plotPaeOptions = computed(() => {
-//     return {
-//         width: 640,
-//         height: 640,
-//         color: { scheme: "Greens", legend: true, reverse: true, label: "Expected position error (Ångströms)" },
-//         y: { reverse: true },
-//         marks: [
-//             Plot.dot(sanitizedPaeData.value, { x: "scoredResidue", y: "alignedResidue", stroke: "value" })
-//         ]
-//     }
-// })
-
 watch(selectedPdb, (newSelectedPdb, prevSelectPdb) => {
     viewPdb(newSelectedPdb)
+    structureToDownload.value = newSelectedPdb
 })
 
 
+onMounted(() => {
+    const urls = toValue(refinedDataUrls)
+    if (props.uniq && urls.length >= 1) {
+        structureToDownload.value = urls[0]
+
+    }
+})
 function viewPdb(pdbPath: string | null) {
     if (pdbPath !== null) {
         dialog.value = true
         const format = toValue(pdbPath)?.split(".").slice(-1)[0]?.toLowerCase() ?? "pdb"
         moleculeFormat.value = format
         if (pdbeMolstarComponent.value?.viewerInstance) {
-            console.log(pdbeMolstarComponent.value)
             const viewerInstance = pdbeMolstarComponent.value.viewerInstance
             const customData = { url: pdbPath, format: format, binary: false }
             viewerInstance.visual.update({ customData })
-            
+
         }
     }
 }
 
+
+
+
+
+
 function setSelectedPdbToFirst() {
     const urls = toValue(refinedDataUrls)
     if (urls.length >= 1) {
@@ -200,109 +157,118 @@ const moleculeFormat: Ref<string> = ref("pdb")
 
 
 <template>
-    <span class="d-flex flex-wrap align-center justify-center">
+    <template v-if="uniq">
+        <v-row>
+            <v-btn size="x-small" variant="text" icon="md:visibility" @click="setSelectedPdbToFirst()"></v-btn>
+            <v-btn :disabled="!structureToDownload" size="x-small" variant="text" icon="md:download" class="ml-1"
+                :href="structureToDownload"></v-btn>
+        </v-row>
+    </template>
+    <v-row v-else>
         <v-col>
-            <v-btn v-if="uniq" size="x-small" variant="tonal" icon="md:visibility" @click="setSelectedPdbToFirst()"></v-btn>
-            <v-select v-else v-model="selectedPdb" label="Select PDB" :items="refinedDataUrls" hide-details="auto">
-            </v-select>
+            <span class="d-flex flex-wrap align-center justify-center">
+                <v-select v-model="selectedPdb" label="Select PDB" :items="refinedDataUrls" hide-details="auto">
+                </v-select>
+            </span>
         </v-col>
-
-        <v-dialog v-model="dialog" transition="dialog-bottom-transition" fullscreen :scrim="false">
-            <v-card flat :rounded="false">
-                <v-toolbar>
-                    <v-toolbar-title>Structures</v-toolbar-title>
-                    <v-select v-model="selectedPdb" label="Select PDB" :items="refinedDataUrls"
-                        hide-details="auto"></v-select>
-                    <v-spacer></v-spacer>
-
-                    <v-btn :disabled="!selectedPdb" icon="md:download" :href="selectedPdb"></v-btn>
-                    <v-btn icon @click="closeStructure">
-                        <v-icon>mdi-close</v-icon>
-                    </v-btn>
-
-                </v-toolbar>
-                <v-card-text>
-                    <v-row>
-                        <v-col :cols="mobile ? 12 : 'auto'">
-                            <v-sheet v-if="selectedPdb"
-                                class="d-flex align-center justify-center flex-wrap text-center mx-auto px-4 my-3"
-                                :height="computedHeight" :width="computedWidth" position="relative">
-                                <pdbe-molstar ref="pdbeMolstarComponent" hide-controls="true" landscape="true"
-                                    :custom-data-url="selectedPdb" alphafold-view="true"
-                                    :custom-data-format="moleculeFormat"></pdbe-molstar>
-                            </v-sheet>
-                        </v-col>
-                        <v-col :cols="mobile ? 12 : undefined">
-                            <v-img :src="selectedPaePath"></v-img>
-
-                            <!-- <PlotFigure v-if="sanitizedPaeData?.length > 0 && paeError === null" defer
+    </v-row>
+    <v-dialog v-model="dialog" transition="dialog-bottom-transition" fullscreen :scrim="false">
+        <v-card flat :rounded="false">
+            <v-toolbar>
+                <v-toolbar-title>Structures</v-toolbar-title>
+                <v-select v-model="selectedPdb" label="Select PDB" :items="refinedDataUrls" hide-details="auto"></v-select>
+                <v-spacer></v-spacer>
+
+                <v-btn :disabled="!selectedPdb" icon="md:download" :href="structureToDownload"></v-btn>
+                <v-btn icon @click="closeStructure">
+                    <v-icon>mdi-close</v-icon>
+                </v-btn>
+
+            </v-toolbar>
+            <v-card-text>
+                <v-row>
+                    <v-col :cols="mobile ? 12 : 'auto'">
+                        <v-sheet v-if="selectedPdb"
+                            class="d-flex align-center justify-center flex-wrap text-center mx-auto px-4 my-3"
+                            :height="computedHeight" :width="computedWidth" style="position:relative;">
+                            <pdbe-molstar ref="pdbeMolstarComponent" :custom-data-url="selectedPdb" alphafold-view
+                                sequence-panel="true" landscape="false" :custom-data-format="moleculeFormat"></pdbe-molstar>
+                        </v-sheet>
+                    </v-col>
+                    <v-col :cols="mobile ? 12 : undefined">
+                        <v-img :src="selectedPaePath"></v-img>
+
+                        <!-- <PlotFigure v-if="sanitizedPaeData?.length > 0 && paeError === null" defer
                                 :options="plotPaeOptions"></PlotFigure>
                             <v-alert v-else type="warning" variant="tonal">{{ paeError }}</v-alert> -->
-                            <v-card flat color="transparent">
-                                <v-card-title>Model Confidence</v-card-title>
-                                <v-card-text>
-                                    AlphaFold produces a per-residue model
-                                    confidence score (pLDDT) between 0 and 100. Some regions below 50 pLDDT may be
-                                    unstructured
-                                    in isolation.
-                                </v-card-text>
-                                <v-list>
-                                    <v-list-item>
-                                        <template #prepend>
-                                            <div class="legendColor mr-2" style="background-color: rgb(0, 83, 214);">
-                                                &nbsp;</div>
-                                        </template>
-                                        <v-list-item-title>
-                                            Very high (pLDDT > 90)
-                                        </v-list-item-title>
-
-                                    </v-list-item>
-                                    <v-list-item>
-                                        <template #prepend>
-                                            <div class="legendColor mr-2" style="background-color: rgb(101, 203, 243);">
-                                                &nbsp;</div>
-                                        </template>
-                                        <v-list-item-title>
-                                            High (90 > pLDDT > 70)
-                                        </v-list-item-title>
-
-                                    </v-list-item>
-                                    <v-list-item>
-                                        <template #prepend>
-                                            <div class="legendColor mr-2" style="background-color: rgb(255, 219, 19);">
-                                                &nbsp;</div>
-                                        </template>
-                                        <v-list-item-title>
-                                            Low (70 > pLDDT > 50) </v-list-item-title>
-
-                                    </v-list-item>
-                                    <v-list-item>
-                                        <template #prepend>
-                                            <div class="legendColor mr-2" style="background-color: rgb(255, 125, 69);">
-                                                &nbsp;</div>
-                                        </template>
-                                        <v-list-item-title>
-                                            Very low (pLDDT &lt; 50) </v-list-item-title>
-
-                                    </v-list-item>
-                                </v-list>
-                            </v-card>
-                        </v-col>
-                    </v-row>
-                </v-card-text>
-            </v-card>
-        </v-dialog>
-    </span>
+                        <v-card flat color="transparent">
+                            <v-card-title>Model Confidence</v-card-title>
+                            <v-card-text>
+                                AlphaFold produces a per-residue model
+                                confidence score (pLDDT) between 0 and 100. Some regions below 50 pLDDT may be
+                                unstructured
+                                in isolation.
+                            </v-card-text>
+                            <v-list>
+                                <v-list-item>
+                                    <template #prepend>
+                                        <div class="legendColor mr-2" style="background-color: rgb(0, 83, 214);">
+                                            &nbsp;</div>
+                                    </template>
+                                    <v-list-item-title>
+                                        Very high (pLDDT > 90)
+                                    </v-list-item-title>
+
+                                </v-list-item>
+                                <v-list-item>
+                                    <template #prepend>
+                                        <div class="legendColor mr-2" style="background-color: rgb(101, 203, 243);">
+                                            &nbsp;</div>
+                                    </template>
+                                    <v-list-item-title>
+                                        High (90 > pLDDT > 70)
+                                    </v-list-item-title>
+
+                                </v-list-item>
+                                <v-list-item>
+                                    <template #prepend>
+                                        <div class="legendColor mr-2" style="background-color: rgb(255, 219, 19);">
+                                            &nbsp;</div>
+                                    </template>
+                                    <v-list-item-title>
+                                        Low (70 > pLDDT > 50) </v-list-item-title>
+
+                                </v-list-item>
+                                <v-list-item>
+                                    <template #prepend>
+                                        <div class="legendColor mr-2" style="background-color: rgb(255, 125, 69);">
+                                            &nbsp;</div>
+                                    </template>
+                                    <v-list-item-title>
+                                        Very low (pLDDT &lt; 50) </v-list-item-title>
+
+                                </v-list-item>
+                            </v-list>
+                        </v-card>
+                    </v-col>
+                </v-row>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
 </template>
 
 
-<style scoped>
-.msp-plugin .msp-plugin-content {
+<style>
+/* .msp-plugin .msp-plugin-content {
     color: black !important;
+} */
+
+div.msp-plugin-content.msp-layout-expanded {
+    z-index: 5 !important
 }
 
 .legendColor {
     height: 16px;
     width: 16px;
 }
-</style>
\ No newline at end of file
+</style>

components/content/StructureDb.vue

 <script setup lang="ts">
-import * as Plot from "@observablehq/plot";
-import PlotFigure from "~/components/PlotFigure";
-import type { SortItem } from "@/components/ServerDbTable.vue"
+import type { SortItem, AutocompleteMeiliFacetProps } from "@/components/ServerDbTable.vue"
+import { useNumericalFilter } from "@/composables/useNumericalfilter"
+import { useRefinedUrl } from "@/composables/useRefinedUrl"
 import { ServerDbTable } from "#components"
-const sortBy: Ref<SortItem[]> = ref([{ key: 'system', order: "asc" }])
+
+import { withQuery, joinURL, withTrailingSlash } from 'ufo'
+
+
+interface Item {
+
+    Foldseek_name: string
+    System_name_ok: string
+
+}
+const sortBy: Ref<SortItem[]> = ref([{ key: 'System', order: "asc" }])
 const itemValue = ref("id");
-const facets: Ref<string[]> = ref(["system", "completed", "prediction_type", ])
+const dbName = ref("structure")
+
+onBeforeMount(async () => {
+    console.log("dans le mounted refseq")
+    const { data } = await useAsyncMeiliSearch({
+        index: toValue(dbName), query: "", params: {
+            facets: ["*"],
+            filter: [],
+            page: 1,
+            hitsPerPage: 25,
+        }
+    })
+    autocompleteMeiliFacetsProps.value.facetDistribution = toValue(data)?.facetDistribution
+
+})
+
+
+const autocompleteMeiliFacetsProps = ref<AutocompleteMeiliFacetProps>({
+    db: toValue(dbName),
+    facets: [
+        { title: "Defense System", type: "subheader" },
+        { title: "System", value: "System", type: "facet", icon: "i-tabler:virus-off", },
+        { title: "Subsystem", value: "subtype", type: "facet", icon: "i-tabler:virus-off" },
+        { type: "divider" },
+        { title: "Gene name", value: "gene_name", type: "facet", icon: "mdi-dna" },
+        { title: "Completed", value: "completed", type: "facet", icon: "md:done" },
+        { title: "Prediction type", value: "prediction_type", type: "facet", icon: "i-gravity-ui:molecule" },
+    ],
+    facetDistribution: undefined
+})
+
+
+
+const computedAutocompleteMeiliFacetsProps = computed(() => {
+    const toValFacetDistribution = toValue(autocompleteMeiliFacetsProps).facetDistribution
+    const toValFacets = toValue(autocompleteMeiliFacetsProps).facets
+    if (toValFacetDistribution !== undefined && toValFacets !== undefined) {
+        return {
+            ...toValue(autocompleteMeiliFacetsProps), facets: toValFacets.map(facet => {
+                if (facet.type === "facet") {
+                    const count = toValFacetDistribution?.[facet.value] ? Object.keys(toValFacetDistribution[facet.value]).length : undefined
+
+                    return count ? { ...facet, count } : { ...facet }
+                }
+                else {
+                    return { ...facet }
+                }
+            })
+        }
+    }
+    else {
+        return toValue(autocompleteMeiliFacetsProps)
+    }
+})
+
+
 const headers: Ref<Object[]> = ref([
     { title: 'Structure', key: 'structure', sortable: false, removable: false },
-    { title: "Type", key: "system", removable: false },
+    { title: 'Foldseek', key: 'Foldseek_name', sortable: false },
+    { title: "System", key: "System", removable: false },
+    { title: "Gene name", key: "gene_name", removable: false },
+    { title: "Subtype", key: "subtype", removable: false },
     // { title: "pdb file", key: "pdb" },
     // { title: "fasta", key: "fasta_file" },
     { title: "Proteins in structure", key: 'proteins_in_the_prediction', sortable: false, removable: true },
@@ -24,7 +92,21 @@ const headers: Ref<Object[]> = ref([
     // { title: "Type", key: "type", removable: true },
 
 ])
-const { search: msSearch, result: msResult } = useMeiliSearch('structure')
+
+const { range: plddtsRange, stringifyFilter: plddtsFilter, reset: plddtsReset } = useNumericalFilter("plddts", 0, 100)
+const { range: iptmRange, stringifyFilter: iptmFilter, reset: iptmReset } = useNumericalFilter("iptm+ptm", 0, 1)
+const { range: pdockqRange, stringifyFilter: pdockqFilter, reset: pdockqReset } = useNumericalFilter("pDockQ", 0, 1)
+
+
+function isString(item: Ref<string | undefined>): item is Ref<string> {
+    return toValue(item) !== undefined
+
+}
+
+const numericalFilters = computed(() => {
+    const listFilters = [plddtsFilter, iptmFilter, pdockqFilter].filter(isString).map(f => toValue(f))
+    return listFilters.length > 0 ? listFilters : undefined
+})
 
 const defaultDataTableServerProps = ref({
     showExpand: false
@@ -40,12 +122,19 @@ const dataTableServerProps = computed(() => {
 
 
 
+function toFolseekUrl(item: Item) {
+    const url = joinURL("/" + item.System_name_ok, item.Foldseek_name)
+    const { refinedUrl } = useRefinedUrl(url)
+    console.log(toValue(refinedUrl))
+    return toValue(refinedUrl)
+}
+
 
-function namesToCollapsibleChips(names: string[], file: string | null = null) {
+function namesToCollapsibleChips(names: string[], systemDir: string, file: string | null = null) {
     if (file === null) {
-        return names.filter((it) => it !== "").map(it => ({ title: it.split("__").pop() }))
+        return names.filter((it) => it !== "").map(it => ({ title: it.split("__")[1] }))
     } else {
-        return names.filter((it) => it !== "").map(it => ({ title: it.split("__").pop(), href: `/wiki/${toSystemName(file)}/${file}` }))
+        return names.filter((it) => it !== "").map(it => ({ title: it.split("__")[1], href: `/wiki/${systemDir}/${file}` }))
     }
 }
 
@@ -54,50 +143,79 @@ function pdbNameToCif(pdbPath: string) {
     return `${cifPath}.cif`
 }
 
-
-function toSystemName(rawName: string) {
-    return rawName.split(/_|-0/)[0].toLocaleLowerCase()
-
-}
-
-
-const plddtDistribution = computed(() => {
-    if (toValue(msResult)?.facetDistribution?.plddts) {
-        return Object.entries(toValue(msResult).facetDistribution.plddts).map(([key, value]) => { })
-    }
-})
-
-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>
+    <ServerDbTable title="Predicted Structures" :sortBy="sortBy" :data-table-server-props="dataTableServerProps"
+        :autocomplete-meili-facets-props="computedAutocompleteMeiliFacetsProps"
+        :numerical-filters="toRef(numericalFilters)">
+        <template #numerical-filters="{ search }">
+            <v-list>
+                <v-list-item>
+                    <v-list-item-title class="text-subtitle-1 text-medium-emphasis">
+                        pLDDT
+                    </v-list-item-title>
+                    <v-row>
+                        <v-col class="pt-8 pl-8" :lg="8">
+                            <v-range-slider v-model="plddtsRange" strict density="compact" hide-details="auto" step="0.5"
+                                :min="0" :max="100" thumb-label="always" @update:modelValue="search()">
+                                <template #append>
+                                    <v-btn variant="text" icon="md:restart_alt" @click="plddtsReset()"></v-btn>
+                                </template>
+
+                            </v-range-slider>
+                        </v-col></v-row>
+                </v-list-item>
+                <v-list-item>
+                    <v-list-item-title class="text-subtitle-1 text-medium-emphasis">
+                        iptm+ptm
+                    </v-list-item-title>
+                    <v-row>
+                        <v-col class="pt-8 pl-8" :lg="8">
+                            <v-range-slider v-model="iptmRange" strict density="compact" hide-details="auto" step="0.1"
+                                :min="0" :max="1" thumb-label="always" @update:modelValue="search()">
+                                <template #append>
+                                    <v-btn variant="text" icon="md:restart_alt" @click="iptmReset()"></v-btn>
+                                </template>
+                            </v-range-slider>
+                        </v-col></v-row>
+                </v-list-item>
+                <v-list-item>
+                    <v-list-item-title class="text-subtitle-1 text-medium-emphasis">pDockQ</v-list-item-title>
+                    <v-row>
+                        <v-col class="pt-8 pl-8" :lg="8">
+                            <v-range-slider v-model="pdockqRange" density="compact" strict hide-details="auto" step="0.1"
+                                :min="0" :max="1" thumb-label="always" @update:modelValue="search()">
+                                <template #append>
+                                    <v-btn variant="text" icon="md:restart_alt" @click="pdockqReset()"></v-btn>
+                                </template>
+                            </v-range-slider>
+                        </v-col></v-row>
+                </v-list-item>
+            </v-list>
+        </template>
+        <template #[`item.Foldseek_name`]="{ item }">
+            <FoldseekDialog v-if="item.Foldseek_name !== 'na'" :foldseek-path="toFolseekUrl(item)"></FoldseekDialog>
+            <!-- <NuxtLink v-if="item.Foldseek_name !== 'na'" :to="toFolseekUrl(item)" :external="false">
+                <v-avatar>
+                    <v-img src="~/assets/foldseek.png" alt="Foldseek results"></v-img>
+                </v-avatar>
+            </NuxtLink> -->
         </template>
-
         <template #[`item.proteins_in_the_prediction`]="{ item }">
-            <CollapsibleChips :items="namesToCollapsibleChips(item.proteins_in_the_prediction, item.fasta_file)">
+            <CollapsibleChips
+                :items="namesToCollapsibleChips(item.proteins_in_the_prediction, item.System_name_ok, item.fasta_file)">
             </CollapsibleChips>
         </template>
         <template #[`item.system_genes`]="{ item }">
-            <CollapsibleChips :items="namesToCollapsibleChips(item.system_genes)"></CollapsibleChips>
+            <CollapsibleChips :items="namesToCollapsibleChips(item.system_genes, item.System_name_ok)"></CollapsibleChips>
         </template>
         <template #[`item.structure`]="{ item }">
             <MolstarPdbePlugin v-if="item?.pdb && item.pdb !== 'na'"
-                :data-urls="[`/${toSystemName(item.system)}/${pdbNameToCif(item.pdb)}`]" uniq>
+                :data-urls="[`/${item.System_name_ok}/${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>
+
+            <!-- <v-icon v-else color="warning" icon="md:dangerous"></v-icon> -->
+
         </template>
         <template #[`item.completed`]="{ item }">
             <v-icon v-if="item.completed" color="success" icon="md:check"></v-icon>

components/content/SystemDb.vue

 <script setup lang="ts">
-import type { SortItem } from "@/components/ServerDbTable.vue"
+import type { SortItem, AutocompleteMeiliFacetProps } 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", "Effector", "Activator", "PFAM.AC"])
+const dbName = ref("systems")
+
+onBeforeMount(async () => {
+    const { data } = await useAsyncMeiliSearch({
+        index: toValue(dbName), query: "", params: {
+            facets: ["*"],
+            filter: [],
+            page: 1,
+            hitsPerPage: 25,
+        }
+    })
+
+    autocompleteMeiliFacetsProps.value.facetDistribution = toValue(data)?.facetDistribution
+
+})
+
+const autocompleteMeiliFacetsProps = ref<AutocompleteMeiliFacetProps>({
+    db: toValue(dbName),
+    facets: [
+        { title: "Defense System", type: "subheader" },
+        { title: 'System', value: "title", type: "facet", icon: "i-tabler:virus-off" },
+
+        { type: "divider" },
+        { title: "Mechanism", type: "subheader" },
+        { title: 'Sensor', value: "Sensor", type: "facet", icon: "i-tabler:shield-cog" },
+        { title: 'Effector', value: "Effector", type: "facet", icon: "i-tabler:shield-cog" },
+        { title: 'Activator', value: "Activator", type: "facet", icon: "i-tabler:shield-cog" },
+
+
+        { type: "divider" },
+        { title: "PFAM", type: "subheader" },
+        { title: 'Acession', value: "PFAM.AC", type: "facet", icon: "i-tabler:circle-key" },
+        { title: 'Description', value: "PFAM.DE", type: "facet", icon: "i-tabler:file-description" },
+
+        { type: "divider" },
+        { title: 'Contributor', value: "contributors", type: "facet", icon: "i-tabler:user-heart" },
+    ],
+    facetDistribution: undefined
+})
+
+
+const computedAutocompleteMeiliFacetsProps = computed(() => {
+    const toValFacetDistribution = toValue(autocompleteMeiliFacetsProps).facetDistribution
+    const toValFacets = toValue(autocompleteMeiliFacetsProps).facets
+    if (toValFacetDistribution !== undefined && toValFacets !== undefined) {
+        return {
+            ...toValue(autocompleteMeiliFacetsProps), facets: toValFacets.map(facet => {
+                if (facet.type === "facet") {
+                    const count = toValFacetDistribution?.[facet.value] ? Object.keys(toValFacetDistribution[facet.value]).length : undefined
+
+                    return count ? { ...facet, count } : { ...facet }
+                }
+                else {
+                    return { ...facet }
+                }
+            })
+        }
+    }
+    else {
+        return toValue(autocompleteMeiliFacetsProps)
+    }
+
+
+})
+
 const headers: Ref<Object[]> = ref([
     { title: "System", key: "title", removable: false },
     { title: "Article", key: "doi", removable: false },
@@ -16,7 +80,6 @@ const headers: Ref<Object[]> = ref([
 
 
 ])
-const { search: msSearch, result: msResult } = useMeiliSearch('systems')
 
 const defaultDataTableServerProps = ref({
     showExpand: false
@@ -30,16 +93,14 @@ const dataTableServerProps = computed(() => {
     }
 })
 
+const columnsToDownload = ref(['title', 'doi', 'Sensor', 'Activator', 'Effector', 'PFAM', 'contributors',])
+
 </script>
 <template>
-    <ServerDbTable title="systems" db="systems" :sortBy="sortBy" :facets="facets"
-        :data-table-server-props="dataTableServerProps">
+    <ServerDbTable title="List Systems" :db="dbName" :sortBy="sortBy"
+        :autocomplete-meili-facets-props="computedAutocompleteMeiliFacetsProps"
+        :data-table-server-props="dataTableServerProps" :columns-to-download="columnsToDownload">
 
-        <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()}`">{{
@@ -51,8 +112,11 @@ const dataTableServerProps = computed(() => {
             <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>
+        <template #[`item.contributors`]="{ item }">
+            <CollapsibleChips v-if="item?.contributors" :items="item.contributors.map(it => ({ title: it }))">
+            </CollapsibleChips>
+        </template>
     </ServerDbTable>
 </template>
\ No newline at end of file

composables/useCsvDownload.ts

-import { ref } from 'vue';
 import Papa from 'papaparse';
-import { saveAs } from "file-saver";
-
-export function useCsvDownload(index: MaybeRef<string>, baseName: MaybeRef<string> = "df"
+// import { saveAs } from "file-saver";
+import { useDownloadBlob } from './useDownloadBlob';
+const { download } = useDownloadBlob()
+
+export function useCsvDownload(
+  rawData: MaybeRef<Record<string, any>>,
+  columns: MaybeRef<string[] | undefined> = undefined,
+  baseName: MaybeRef<string> = 'data'
 ) {
-  const pending = ref(false)
-  const { search: msSearch, result: msResult } = useMeiliSearch(toValue(index))
-  const filename = ref(`${toValue(baseName)}-data.csv`)
-  const downloadCsv = async (
-
-    query: MaybeRef<string>,
-    filter: MaybeRef<string>,
-    sortBy: MaybeRef<string[]>,
-    params: MaybeRef<Record<string, any>>,
-  ) => {
-
-
-    filename.value = `${toValue(baseName)}-${toValue(filter)}.csv`
-    pending.value = true
-    try {
-      await msSearch(
-        toValue(query),
-        {
-          ...toValue(params),
-          filter: toValue(filter),
-          sort: toValue(sortBy)
-        })
-      const csvContent = Papa.unparse(toValue(msResult).hits);
-      // console.log(csvContent)
-      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-      saveAs(blob, `${toValue(filename)}`);
-    } finally {
-      pending.value = false
-    }
-
-
+  const filename = ref(`df-${toValue(baseName)}.csv`)
+  const data = ref()
+  const blob = ref()
+  if (toValue(rawData)?.hits?.length > 0) {
+    data.value = toValue(rawData).hits.map(row => {
+      let sanitizedRow = { ...row }
+      if (sanitizedRow?.PFAM?.length > 0) {
+        sanitizedRow = {
+          ...sanitizedRow,
+          PFAM: sanitizedRow.PFAM.map(({ AC }) => AC).join(", ")
+        }
+      }
+      if (sanitizedRow?.contributors?.length > 0) {
+        sanitizedRow = {
+          ...sanitizedRow,
+          contributors: sanitizedRow.contributors.join(", ")
+        }
+      }
+      return sanitizedRow
+
+    })
+    const csvContent = Papa.unparse(toValue(data), { columns: toValue(columns) });
+    blob.value = new Blob([csvContent], { type: "text/csv" });
+    download(blob, filename)
   }
-  // watch(msResult, (newRes) => {
-  //   console.log("save file !!!!!!")
-
-
-  // })
-
-  return {
-    pending, downloadCsv,
-  };
+  return { data, filename }
 }

composables/useDownloadBlob.ts

+export function useDownloadBlob() {
+    function download(blob: MaybeRef<Blob>, filename: MaybeRef<string>) {
+        const toValueBlob = toValue(blob)
+        const toValueFilename = toValue(filename)
+        var a = document.createElement("a");
+        a.href = URL.createObjectURL(toValueBlob);
+        a.download = toValueFilename;
+        a.click();
+        URL.revokeObjectURL(a.href);
+    }
+
+    return { download }
+
+}
\ No newline at end of file