# HG changeset patch
# User Raphaël Gomès <rgomes@octobus.net>
# Date 1657578116 -7200
#      Tue Jul 12 00:21:56 2022 +0200
# Node ID d1a5264dbb6ee45b6deec0953584410b156dc5bc
# Parent  43127194326e6de9d91dfb45be14c9c2e888a0a4
web-ui: sort everything to make the experience predictable and consistent

diff --git a/web-ui/src/App.svelte b/web-ui/src/App.svelte
--- a/web-ui/src/App.svelte
+++ b/web-ui/src/App.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import Benchmark from "./lib/Benchmark.svelte";
+  import {sortByFirst} from "./utils";
 </script>
 
 <main>
@@ -8,7 +9,7 @@
   {#await import("../../results-new.json")}
     <h2>Loading...</h2>
   {:then allResults}
-    {#each Object.entries(allResults.default) as [name, results]}
+    {#each Object.entries(allResults.default).sort(sortByFirst) as [name, results]}
       <Benchmark {name} {results} />
     {/each}
   {/await}
diff --git a/web-ui/src/lib/Benchmark.svelte b/web-ui/src/lib/Benchmark.svelte
--- a/web-ui/src/lib/Benchmark.svelte
+++ b/web-ui/src/lib/Benchmark.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import Graph from "./Graph.svelte";
+    import { sortByFirst } from "../utils";
 
     export let name;
     export let results;
@@ -23,7 +24,7 @@
 <div class="benchmark">
     <h2>{name}</h2>
     <div class="graphs">
-        {#each Object.entries(groupResults(results)) as [repoName, data]}
+        {#each Object.entries(groupResults(results)).sort(sortByFirst) as [repoName, data]}
             <Graph title={repoName} {data} />
         {/each}
     </div>
diff --git a/web-ui/src/lib/Graph.svelte b/web-ui/src/lib/Graph.svelte
--- a/web-ui/src/lib/Graph.svelte
+++ b/web-ui/src/lib/Graph.svelte
@@ -2,7 +2,7 @@
   import Chart from "chart.js/auto";
   import { onMount } from "svelte";
   import { COLORS } from "../config.js";
-  import { getNodeForResult, getRankForResult, sortVersions } from "../utils";
+  import { getNodeForResult, getRankForResult, sortVersions, sortByFirst } from "../utils";
 
   export let title: string;
   export let data;
@@ -36,7 +36,7 @@
 
     for (const [index, [dataEnvName, results]] of Object.entries(
       groupResults(data)
-    ).entries()) {
+    ).sort(sortByFirst).entries()) {
       const graphData = [];
       const sorted = [...results].sort((a, b) => {
         const nodeA = getRankForResult(a);
diff --git a/web-ui/src/utils.ts b/web-ui/src/utils.ts
--- a/web-ui/src/utils.ts
+++ b/web-ui/src/utils.ts
@@ -52,6 +52,16 @@
     return 0;
 };
 
+export const sortByFirst = (a: [string, any], b: [string, any]): number => {
+    if (a[0] < b[0]) {
+        return -1
+    } else if (a[0] == b[0]) {
+        return 0
+    } else {
+        return 1
+    }
+}
+
 export const getNodeForResult = (result) => {
     return result["bin-env-vars"]["hg"]["changeset"]["node"];
 };