DiscoveryMetricsTable add 3-way button to select different discovery …

…test sets
janosh · Dec 14, 2024 · 85f65b6 · 85f65b6
1 parent 2a77456
commit 85f65b6
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 10 deletions.
diff --git a/site/src/lib/DiscoveryMetricsTable.svelte b/site/src/lib/DiscoveryMetricsTable.svelte
@@ -3,11 +3,11 @@
     HeatmapTable,
     MODEL_METADATA,
     TRAINING_SETS,
-    model_is_compliant,
     get_metric_rank_order,
+    model_is_compliant,
   } from '$lib'
   import { pretty_num } from 'elementari'
-  import type { ModelData, HeatmapColumn } from './types.ts'
+  import type { HeatmapColumn, ModelData } from './types.ts'
 
   export let discovery_set: `full_test_set` | `most_stable_10k` | `unique_prototypes` =
     `unique_prototypes`

diff --git a/site/src/lib/HeatmapTable.svelte b/site/src/lib/HeatmapTable.svelte
@@ -206,7 +206,7 @@
     position: sticky;
     left: 0;
     background: var(--heatmap-header-bg, var(--night));
-    z-index: 2;
+    z-index: 1;
   }
   tr:nth-child(odd) td.sticky-col {
     background: var(--heatmap-row-odd-bg, rgb(15, 14, 14));

diff --git a/site/src/lib/ModelCard.svelte b/site/src/lib/ModelCard.svelte
@@ -82,12 +82,7 @@
       <small>({missing_percent})</small>
     {/if}
     {#if notes.html?.missing_preds}
-      <Tooltip
-        text={notes.html.missing_preds ?? ``}
-        tip_style="font-size: 9pt;"
-        max_width="20em"
-        min_width="20em"
-      >
+      <Tooltip text={notes.html.missing_preds ?? ``} tip_style="font-size: 9pt;">
         &nbsp;<Icon icon="octicon:info-24" inline />
       </Tooltip>
     {/if}

diff --git a/site/src/routes/+page.svelte b/site/src/routes/+page.svelte
@@ -47,6 +47,22 @@
     .map(([col]) => col)
 
   let column_panel_open: boolean = false
+
+  const discovery_set_labels = {
+    full_test_set: {
+      title: `Full Test Set`,
+      tooltip: `Metrics computed on the full test set including duplicate structure prototypes`,
+    },
+    unique_prototypes: {
+      title: `Unique Prototypes`,
+      tooltip: `Metrics computed only on unique structure prototypes`,
+    },
+    most_stable_10k: {
+      title: `10k Most Stable`,
+      tooltip: `Metrics computed on the 10k structures predicted to be most stable (different for each model)`,
+    },
+  }
+  let discovery_set: keyof typeof discovery_set_labels = `unique_prototypes`
 </script>
 
 <svelte:body
@@ -59,10 +75,23 @@
 
 <Readme>
   <figure style="margin-top: 4em;" slot="metrics-table">
+    <div class="discovery-set-toggle">
+      {#each Object.entries(discovery_set_labels) as [key, { title, tooltip }]}
+        <Tooltip text={tooltip} tip_style="z-index: 2; font-size: 0.8em;" max_width="3em">
+          <button
+            class:active={discovery_set === key}
+            on:click={() => (discovery_set = key)}
+          >
+            {title}
+          </button>
+        </Tooltip>
+      {/each}
+    </div>
     <DiscoveryMetricsTable
       {show_non_compliant}
       {hide_cols}
       {show_energy_only}
+      {discovery_set}
       style="width: 100%;"
     />
     <div class="downloads">
@@ -95,7 +124,7 @@
         </Tooltip>&ensp;</Toggle
       >
       <Toggle bind:checked={show_energy_only} style="gap: 3pt;">
-        Show energy-only models <Tooltip max_width="20em">
+        Show energy-only models <Tooltip max_width="12em">
           <span slot="tip">
             Models that only predict energy (E) perform worse<br /> and can't be evaluated
             on force-modeling tasks such as κ<sub>SRME</sub>
@@ -163,6 +192,24 @@
     padding: 2pt 6pt;
     background-color: rgba(255, 255, 255, 0.06);
   }
+  .discovery-set-toggle {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 5pt;
+    margin-bottom: 5pt;
+  }
+  .discovery-set-toggle button {
+    padding: 4px 8px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: transparent;
+  }
+  .discovery-set-toggle button:hover {
+    background: rgba(255, 255, 255, 0.05);
+  }
+  .discovery-set-toggle button.active {
+    background: rgba(255, 255, 255, 0.1);
+  }
   div.downloads {
     display: flex;
     gap: 1ex;