Split website by categories too

Author: penelopeysm

web/src/App.svelte

@@ -2,6 +2,30 @@
     import data from "./data/adtests.json";
     import modelDefinitions from "./data/model_definitions.json";
 
+    // Parse data into nice JS objects.
+    // Obviously, the nested strings are a bit ugly. From outer to inner, they are:
+    // category -> model_name -> adtype -> result
+    let categorisedData = new Map<
+        string,
+        Map<string, Map<string, string | number>>
+    >();
+    for (const [model_name, results] of Object.entries(data)) {
+        let category = results.__category__;
+        delete results.__category__;
+        let resultsMap = new Map<string, string | number>();
+        for (const [adtype, result] of Object.entries(results)) {
+            resultsMap.set(adtype, result);
+        }
+        if (!categorisedData.has(category)) {
+            categorisedData.set(
+                category,
+                new Map<string, Map<string, string | number>>(),
+            );
+        }
+        categorisedData.get(category).set(model_name, resultsMap);
+    }
+    console.log(categorisedData);
+
     import Manifest from "./lib/Manifest.svelte";
     import ResultsTable from "./lib/ResultsTable.svelte";
 </script>
@@ -78,7 +102,10 @@
                 >Download the raw data (JSON)</a
             >
         </p>
-        <ResultsTable {data} {modelDefinitions} />
+        {#each categorisedData.entries() as [category, modelData]}
+            <h3>{category}</h3>
+            <ResultsTable data={modelData} {modelDefinitions} />
+        {/each}
 
         <h2>Manifest</h2>
         <p>The tests above were run with the following package versions:</p>

web/src/lib/Manifest.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
-    import manifest from "../data/manifest.json";
+    import manifestObj from "../data/manifest.json";
+
+    // convert manifest to a Map
+    let manifest = new Map<string, string | null>();
+    for (const [packageName, version] of Object.entries(manifestObj)) {
+        manifest.set(packageName, version === "" ? null : version);
+    }
 
     import { getSortedEntries } from "./utils";
 </script>

web/src/lib/ResultsTable.svelte

@@ -5,13 +5,14 @@
     import { getSortedEntries } from "./utils";
 
     interface Props {
-        data: object;
+        // model name -> adtype -> result
+        data: Map<string, Map<string, string | number>>;
         modelDefinitions: object;
     }
     const { data, modelDefinitions }: Props = $props();
 
-    const models = Object.keys(data);
-    const adtypes = Object.keys(data[models[0]]);
+    const models = [...data.keys()];
+    const adtypes = data.get(models[0]).keys();
 
     // Known errors
     const ENZYME_FWD_BLAS = "https://github.com/EnzymeAD/Enzyme.jl/issues/1995";

web/src/lib/utils.ts

@@ -1,5 +1,5 @@
-export function getSortedEntries(obj: object) {
-    return Object.entries(obj).sort(([a, _x], [b, _y]) =>
-        a.localeCompare(b),
+export function getSortedEntries(m: Map<string, any>) {
+    return [...m.entries()].sort(([k1, _v1], [k2, _v2]) =>
+        k1.localeCompare(k2),
     );
 }