Fix dimension names sorting

src/system/footer/sort/dimensions.js

@@ -8,12 +8,6 @@ export const sortDimensionsArray = function (dimensionsArray, dimensionNames) {
 }
 
 // Sort each dimension within a given `dimensions` by its dimension name.
-//  - Instead of using lexicographic order, we use the order of dimensions as
-//    specified by the user in the `system` configuration property
-//  - This is persisted in results and we ensure it does not change until it
-//    reaches this logic
-//  - We only use a single system for this, for consistency, and we use the
-//    one from the target result.
 // Then sort each dimension value's array item.
 const sortDimensionsEntries = function (dimensionNames, dimensionsEntries) {
   const dimensionsEntriesA = dimensionsEntries.map((dimensionsEntry) =>

src/system/footer/sort/dimensions_names.js

@@ -0,0 +1,20 @@
+// Retrieve `dimensionNames` used for sorting.
+//  - Instead of using lexicographic order, we use the order of dimensions as
+//    specified by the user in the `system` configuration property
+//  - This is persisted in results and we ensure it does not change until it
+//    reaches this logic
+//  - We use the most recent results in priority
+export const getDimensionNames = function (firstSystem, systems) {
+  const firstDimensionNames = getSystemDimensionNames(firstSystem)
+  const uniqueDimensionNames = [
+    ...new Set(systems.flatMap(getSystemDimensionNames)),
+  ]
+  const otherDimensionNames = uniqueDimensionNames.filter(
+    (dimensionName) => !firstDimensionNames.includes(dimensionName),
+  )
+  return [...firstDimensionNames, ...otherDimensionNames]
+}
+
+const getSystemDimensionNames = function ({ dimensions }) {
+  return Object.keys(dimensions)
+}

src/system/footer/sort/main.js

@@ -1,11 +1,12 @@
 import { sortDimensionsArray } from './dimensions.js'
+import { getDimensionNames } from './dimensions_names.js'
 import { addPropOrder, sortPropEntries, removePropOrder } from './props.js'
 import { compareSystems } from './systems.js'
 
 // Sort systems deeply so they are shown in a user-friendly and predictable way
 // in the footer
-export const sortSystems = function (footer, { dimensions }) {
-  const dimensionNames = Object.keys(dimensions)
+export const sortSystems = function (footer, firstSystem) {
+  const dimensionNames = getDimensionNames(firstSystem, footer.systems)
   // eslint-disable-next-line fp/no-mutating-methods
   const systems = footer.systems
     .map((system) => addSortProps(system, dimensionNames))