sort heatmap X with no system found first

components/content/RefseqDb.vue

@@ -323,13 +323,30 @@ function namesToAccessionChips(names: string[]) {
 }
 const systemPanel: Ref<string[]> = ref([])
 const layoutPlot: Ref<string> = ref("grid")
+function compareBySystem(a, b) {
+    if (a === "No system found") {
+        return -1
+    }
+    if (b === "No system found") {
+        return 1
+    }
+    return a - b
+
+}
+
+const sortedCellDomain = computed(() => {
+    const toValueAllHits = toValue(allHits)
+    if (toValueAllHits && toValueAllHits?.hits?.length > 0) {
+        return toValueAllHits.hits.map(d => d.type).sort(compareBySystem)
+    }
+})
 const binPlotOptions = computed(() => {
     return {
         marginLeft: 150,
         marginBottom: 200,
         padding: 0,
         grid: true,
-        x: { tickRotate: 90, label: "Systems" },
+        x: { tickRotate: 90, label: "Systems", domain: toValue(sortedCellDomain) },
         // y: { tickFormat: 's' },
         color: { scheme: "plasma", legend: true, label: `Proportion per ${selectedTaxoRank.value}`, domain: [0, 100] },
     }
@@ -351,13 +368,12 @@ const binPlotGroup = computed(() => {
                             return X[index]
                         }), D => D.length, d => d.type, d => d.Assembly)
                         const countForClade = toValTaxonomyFacet[selectedTaxoRank.value][clade]
-                        console.log(`${itemsPerGroup.get(system).size} / ${countForClade}`)
                         const frequency = (itemsPerGroup.get(system).size / countForClade) * 100
                         return frequency
                     }
                     return I.length
                 }
-            }
+            },
         },
         {
             x: "type",
@@ -365,9 +381,14 @@ const binPlotGroup = computed(() => {
             tip: true,
             inset: 0.5,
             sort: { y: "fill" }
-        })
+        }
+
+    )
 })
 
+
+
+
 const binPlotDataOptions = computed(() => {
     const toValueAllHits = toValue(allHits)
     const data = toValueAllHits?.hits ?? []
@@ -380,12 +401,12 @@ const binPlotDataOptions = computed(() => {
             type: scaleType.value,
             tickFormat: '~s',
             ticks: scaleType.value === 'symlog' ? 3 : 5,
-
         },
         marks: [
-            Plot.cell(data, toValue(binPlotGroup)),
-        ]
-
+            Plot.cell(data,
+                toValue(binPlotGroup)
+            ),
+        ],
     } : null
 })