Skip to content
Snippets Groups Projects
Commit 3b3648d0 authored by Remi  PLANEL's avatar Remi PLANEL
Browse files

delete old page files

parent 49ccf367
No related branches found
No related tags found
1 merge request!131Merge relevant Abstract and references
Pipeline #117868 passed
<script setup lang="ts">
import { useRuntimeConfig, useFetch, type MaybeRefOrGetter, ref, computed, toValue, type Ref } from '#imports'
import JsonCSV from 'vue-json-csv'
import { useDisplay } from "vuetify";
import { useFacetsStore, type Facets } from '~~/stores/facets'
const facetStore = useFacetsStore()
const { height } = useDisplay();
const minTableHeight = ref(400)
const computedTableHeight = computed(() => {
const computedHeight = height.value - 500
return computedHeight > minTableHeight.value ? computedHeight : minTableHeight.value
})
// SORTING
const sortBy: Ref<{ key: string, order: string }[]> = ref([{ key: 'system', order: "asc" }])
const msSortBy = computed(() => {
if (sortBy.value.length > 0) {
return sortBy.value.map((curr) => {
if (curr?.key && curr?.order) {
return `${curr.key}:${curr.order}`
}
else { return "" }
})
} else { return [""] }
})
const itemValue = ref("id");
const search: Ref<string> = ref("");
const filter: Ref<string> = ref('')
const hitsPerPage: Ref<number> = ref(25)
const limit: Ref<number> = ref(500000)
const facets = ref(["system"])
const page = ref(1)
const headers: Ref<Object[]> = ref([
{ title: "System", key: "system" },
{ title: "Completed", key: "completed" },
{ title: "Predition type", key: "prediction_type" },
{ title: "Num of genes", key: "system_number_of_genes" },
{ title: "pLDDT", key: "plddts" },
{ title: "Type", key: "type" }
])
const {
hits: items,
pending,
totalHits: itemsLength,
filterError,
facetDistribution
} = useFetchMsDocument(
"structure", search, filter, limit, hitsPerPage, page, facets, msSortBy)
watch(facetDistribution, (facetDistri) => {
facetStore.setFacets({ facetDistribution: facetDistri, facetStat: undefined })
})
</script>
<template>
<v-card flat>
<v-card-text>
text here
</v-card-text>
<v-toolbar color="primary" density="compact">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Predicted Structures summary ({{ itemsLength }})
</v-toolbar-title>
<JsonCSV :data="items" name="predicted-structures-summary-defense-system.csv">
<v-btn disabled icon>
<v-icon icon="md:download"></v-icon>
<v-tooltip activator="parent" location="bottom">Download {{ itemsLength }} entries</v-tooltip>
</v-btn>
</JsonCSV>
</v-toolbar>
<v-card-text>
text here
</v-card-text>
<v-col>
<v-text-field v-model="search" prepend-inner-icon="mdi-magnify"
label="Search for defense systems predicted structures" hide-details class="mx-2"
clearable></v-text-field></v-col>
<v-col cols="auto">
<v-text-field v-model="filter" prepend-inner-icon="mdi-magnify" label="Filter" hide-details="auto" class="mx-2"
clearable :error-messages="filterError"></v-text-field></v-col>
<v-data-table-server v-model:page="page" v-model:items-per-page="hitsPerPage" v-model:sortBy="sortBy"
ref="datatable" fixed-header :loading="pending" :headers="headers" :items="items" :item-value="itemValue"
:items-length="itemsLength" multi-sort density="compact" :height="computedTableHeight" class="elevation-1 mt-2">
<!-- <template v-if="refseqData?.length >= 10000" #top>
<v-alert type="warning" variant="tonal" title="Results table"
text="Results won't be displayed since there is over 10000 hits"></v-alert>
</template> -->
<template #[`item.completed`]="{ item }">
<v-icon v-if="item.completed" color="success" icon="md:check"></v-icon>
<v-icon v-else color="warning" icon="md:dangerous"></v-icon>
</template>
</v-data-table-server>
</v-card>
</template>
\ No newline at end of file
<script setup lang="ts">
import * as Plot from "@observablehq/plot";
import PlotFigure from "~/components/PlotFigure";
import { useDisplay } from "vuetify";
import JsonCSV from 'vue-json-csv';
import { useFacetsStore, type Facets } from '~~/stores/facets'
const runtimeConfig = useRuntimeConfig();
const facetStore = useFacetsStore()
const { width, height } = useDisplay();
const minTableHeight = ref(400)
const computedTableHeight = computed(() => {
const computedHeight = height.value - 500
return computedHeight > minTableHeight.value ? computedHeight : minTableHeight.value
})
// SORTING
const sortBy: Ref<{ key: string, order: string }[]> = ref([{ key: 'type', order: "asc" }])
const msSortBy = computed(() => {
if (sortBy.value.length > 0) {
return sortBy.value.map((curr) => {
if (curr?.key && curr?.order) {
return `${curr.key}:${curr.order}`
}
else { return "" }
})
} else { return [""] }
})
const availableTaxo: Ref<string[]> = ref(["species", "genus", "family", "order", "phylum", "Superkingdom"]);
const selectedTaxoRank = ref("phylum");
const computedWidth = computed(() => {
return Math.max(width.value, 550);
});
const plotHeight = computed(() => {
return computedWidth.value / 4;
});
// const filterError = ref(null)
const search: Ref<string> = ref("");
const filter: Ref<string> = ref('')
const hitsPerPage: Ref<number> = ref(25)
const limit = ref(1000)
const itemValue = ref("id");
const facets = ref([
"type",
"Superkingdom",
"phylum",
"order",
"family",
"genus",
"species",
])
const page = ref(1)
const prependHeaders = ref([
{ title: "Replicon", key: "replicon" },
{
title: "System",
key: "type",
},
{
title: "Subtype",
key: "subtype",
},
]);
const appendHeaders = ref([
{
title: "Accessions",
key: "accession_in_sys"
}
])
function capitalize([first, ...rest]) {
return first.toUpperCase() + rest.join('').toLowerCase();
}
const {
hits: items,
pending,
totalHits: itemsLength,
filterError,
facetDistribution }
= useFetchMsDocument(
"refseq",
search,
filter,
limit,
hitsPerPage,
page,
facets,
msSortBy
)
watch(facetDistribution, (facetDistri) => {
facetStore.setFacets({ facetDistribution: facetDistri, facetStat: undefined })
})
const computedSystemDistribution = computed(() => {
if (facetDistribution.value?.type) {
return Object.entries(facetDistribution.value.type).map(([key, value]) => {
return { type: key, count: value }
}).sort()
} else { return [] }
})
const computedTaxonomyDistribution = computed(() => {
if (facetDistribution.value?.[selectedTaxoRank.value]) {
return Object.entries(facetDistribution.value[selectedTaxoRank.value]).map(([key, value]) => {
return { [selectedTaxoRank.value]: key, count: value }
}).sort()
} else { return [] }
})
const computedHeaders = computed(() => {
return [...prependHeaders.value, ...availableTaxo.value.map(taxo => {
return {
title: capitalize(taxo),
key: taxo
}
}), ...appendHeaders.value]
})
function itemToFilter(item, key) {
const value = item[key]
const filterToAdd = /\s/g.test(value) ? `${key}="${value}"` : `${key}=${value}`
return filter.value === '' ? filterToAdd : `${filter.value} AND ${filterToAdd}`
}
const itemFilterKeys = computed(() => {
return [...availableTaxo.value, 'type', 'subtype']
})
const defaultBarPlotOptions = computed(() => {
return {
x: { label: null, tickRotate: 70 },
y: { nice: true, grid: true },
color: { legend: true },
width: computedWidth.value,
height: plotHeight.value,
}
})
const computedDistriSystemOptions = computed(() => {
return {
...defaultBarPlotOptions.value,
marginBottom: 120,
marks: [
// Plot.frame(),
Plot.barY(
toValue(computedSystemDistribution),
{
y: "count", x: 'type', tip: true,
fill: "#6750a4",
sort: { x: "-y" },
},
),
],
};
});
const computedDistriTaxoOptions = computed(() => {
return {
...defaultBarPlotOptions.value,
marginBottom: 200,
marks: [
Plot.barY(
toValue(computedTaxonomyDistribution),
{
y: "count",
x: selectedTaxoRank.value,
tip: true,
fill: "#6750a4",
sort: { x: "-y" },
}
),
],
};
});
// const datatable = ref(null)
const hasToGenerateDownload = ref(false)
let itemsToDownload = ref([])
watch(hasToGenerateDownload, (val) => {
console.log(val)
if (val === true) {
const { hits: items, pending, totalHits: itemsLength, filterError, facetDistribution } = useFetchMsDocument("refseq", search, filter, limit, hitsPerPage, page, facets)
itemsToDownload.value = items.value
}
})
</script>
<template>
<v-card flat>
<v-toolbar color="primary" density="compact">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>RefSeq Entries ({{ itemsLength }})
</v-toolbar-title>
<JsonCSV :data="itemsToDownload" name="refseq-defenes-system.csv">
<v-btn disabled icon @click="hasToGenerateDownload = true">
<v-icon icon="md:download"></v-icon>
<v-tooltip activator="parent" location="bottom">Download {{ itemsLength }} entries</v-tooltip>
</v-btn>
</JsonCSV>
</v-toolbar>
<!-- </template> -->
<v-card-text>
Tu peux mettre du texte ici
</v-card-text>
<v-col>
<v-text-field v-model="search" prepend-inner-icon="mdi-magnify" label="Search for defense systems" hide-details
class="mx-2 mb-1" clearable></v-text-field>
</v-col>
<v-col class="pt-1">
Examples: <v-chip color="primary" @click="search = 'RADAR'">RADAR</v-chip> <v-chip color="primary"
@click="search = 'BREX'">BREX</v-chip>
</v-col>
<v-col cols="auto">
<v-text-field v-model="filter" prepend-inner-icon="mdi-magnify" label="Filter" hide-details="auto" class="mx-2"
clearable :error-messages="filterError"></v-text-field></v-col>
<v-data-table-server v-model:page="page" v-model:items-per-page="hitsPerPage" v-model:sortBy="sortBy" fixed-header
:loading="pending" :headers="computedHeaders" :items="items" :items-length="itemsLength" :item-value="itemValue"
multi-sort density="compact" :height="computedTableHeight" class="elevation-1 mt-2">
<template #[`item.${key}`]="{ item }" v-for="key in itemFilterKeys" :key="key">
<v-chip @click="filter = itemToFilter(item, key)">{{ item[key] }}</v-chip>
</template>
<template #[`item.accession_in_sys`]="{ item }">
<accession-chips :accessions="item.accession_in_sys" baseUrl="http://toto.pasteur.cloud"></accession-chips>
</template>
</v-data-table-server>
</v-card>
<v-card flat class="my-3" :loading="pending">
<v-card-title> Systems Distribution</v-card-title>
<v-card-text>
<PlotFigure :options="unref(computedDistriSystemOptions)" defer></PlotFigure>
</v-card-text>
</v-card>
<v-card flat :loading="pending">
<v-card-title> Taxonomic Distribution</v-card-title>
<v-card-text>
<v-select v-model="selectedTaxoRank" :items="availableTaxo" density="compact"
label="Select taxonomic rank"></v-select>
<PlotFigure defer :options="unref(computedDistriTaxoOptions)"></PlotFigure>
</v-card-text>
</v-card>
</template>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment