try to have a better ratio h, w for cell

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,