From 8ca970f2b53eb98409c31dab4e004583ac3a7504 Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Fri, 29 Mar 2024 14:11:40 +0100
Subject: [PATCH] try to have a better ratio h, w for cell
---
components/content/RefseqDb.vue | 48 ++++++++++++++++++++++++++++-----
1 file changed, 42 insertions(+), 6 deletions(-)
diff --git a/components/content/RefseqDb.vue b/components/content/RefseqDb.vue
index f0528b29..b0b16752 100644
--- a/components/content/RefseqDb.vue
+++ b/components/content/RefseqDb.vue
@@ -18,7 +18,12 @@ const itemValue = ref("id");
const { width } = useDisplay();
const dbName = ref("refseq")
const taxonomyFacet = ref<Record<string, any> | undefined>(undefined)
-
+const cellPlotMargin = ref({
+ marginLeft: 150,
+ marginBottom: 200,
+ marginTop: 0,
+ marginRight: 50
+})
onBeforeMount(async () => {
@@ -150,7 +155,7 @@ const availableTaxo: Ref<string[]> = ref([
"Superkingdom"
]);
-const scaleTypes = ref<string[]>(['linear', 'sqrt', 'log', 'symlog'])
+const scaleTypes = ref<string[]>(['linear', 'sqrt', 'symlog'])
const selectedTaxoRank = ref<"species" | "genus" | "family" | "order" | "class" | "phylum" | "Superkingdom">("Superkingdom");
const headers = ref([
@@ -190,7 +195,18 @@ const computedWidth = computed(() => {
return Math.max(currentWidth, 550);
});
+const cellPlotComputedDimension = computed(() => {
+ const { marginLeft, marginBottom, marginRight, marginTop } = toValue(cellPlotMargin)
+ const toValWidth = toValue(width)
+ const widthFixCell = countSystem.value * 50 + marginLeft + marginRight
+ const heigthFix = countClade.value * 50 + marginTop + marginBottom
+ if (widthFixCell > toValWidth) {
+ return { width: toValWidth - marginLeft - marginRight, height: undefined }
+ } else {
+ return { width: widthFixCell, height: heigthFix }
+ }
+})
const allHits: Ref<Record<string, any> | undefined> = ref(undefined)
@@ -360,17 +376,33 @@ const sortedCellDomain = computed(() => {
}
})
const binPlotOptions = computed(() => {
+ const { marginLeft, marginBottom } = toValue(cellPlotMargin)
+ const { height } = toValue(cellPlotComputedDimension)
+
return {
- marginLeft: 150,
- marginBottom: 200,
+ marginLeft,
+ marginBottom,
padding: 0,
grid: true,
- aspectRatio: true,
+ aspectRatio: height ? undefined : 1,
x: { tickRotate: 90, label: "Systems", domain: toValue(sortedCellDomain) },
color: { scheme: "plasma", legend: true, label: `Proportion per ${selectedTaxoRank.value}`, domain: [0, 100] },
}
})
+const countSystem = computed(() => {
+ const toValueAllHits = toValue(allHits)
+ const data = toValueAllHits?.hits ?? []
+ const setSystem = new Set(data.map(d => d.type))
+ return setSystem.size
+})
+
+const countClade = computed(() => {
+ const toValueAllHits = toValue(allHits)
+ const data = toValueAllHits?.hits ?? []
+ const setSystem = new Set(data.map(d => d[selectedTaxoRank.value]))
+ return setSystem.size
+})
const binPlotGroup = computed(() => {
return Plot.group(
@@ -419,9 +451,13 @@ const binPlotDataOptions = computed(() => {
const toValBinPlotGroup = toValue(binPlotGroup)
const data = toValueAllHits?.hits ?? []
const plotCellMark = Plot.cell(data, toValBinPlotGroup)
+ const { width, height } = toValue(cellPlotComputedDimension)
+
+ const dim = height ? { width, height } : { width }
+
return toValueAllHits?.hits?.length > 0 ? {
...binPlotOptions.value,
- width: width.value,
+ ...dim,
title: `Proportion of genomes with defense system X per ${selectedTaxoRank.value} taxonomic rank`,
color: {
...binPlotOptions.value.color,
--
GitLab