add @pbenner to citation.cff, /models page add color bar for ModelCard bg color

redesign site footer

Author: janosh

citation.cff

@@ -10,16 +10,24 @@ authors:
     orcid: https://orcid.org/0000-0001-5233-3462
     corresponding: true
     affil_key: 1, 2
+    github: https://github.com/janosh
   - given-names: Rhys
     family-names: Goodall
     affiliation: University of Cambridge
     orcid: https://orcid.org/0000-0002-6589-1700
     affil_key: 1
+    github: https://github.com/comprhys
   - given-names: Anubhav
     family-names: Jain
     orcid: 0000-0001-5893-9967
     affiliation: Lawrence Berkeley National Laboratory
     affil_key: 2
+    github: https://github.com/computron
+  - given-names: Philipp
+    family-names: Benner
+    affiliation: German Federal Institute of Materials Research and Testing (BAM)
+    affil_key: 3
+    github: https://github.com/pbenner
   - given-names: Kristin
     family-names: Persson
     orcid: 0000-0003-2495-5509
@@ -30,6 +38,7 @@ authors:
     orcid: 0000-0002-9616-3108
     affiliation: University of Cambridge
     affil_key: 1
+    github: https://github.com/alphaleegroup
 affiliations:
   - Cavendish Laboratory, University of Cambridge, UK
   - Lawrence Berkeley National Laboratory, Berkeley, USA

matbench_discovery/data.py

@@ -126,7 +126,7 @@ def load(
             if not isinstance(df[col].iloc[0], dict):
                 continue
             try:
-                # convert dicts to pymatgen Structures and ComputedStructureEntrys
+                # convert dicts to pymatgen Structures and ComputedStructureEntries
                 df[col] = [
                     MontyDecoder().process_decoded(dct)
                     for dct in tqdm(df[col], desc=col)

readme.md

@@ -23,6 +23,6 @@ So far, we've tested 8 models covering multiple methodologies ranging from rando
 
 We welcome contributions that add new models to the leaderboard through GitHub PRs. See the [contributing guide](https://janosh.github.io/matbench-discovery/contribute) for details.
 
-Anyone interested in joining this effort please [open a GitHub discussion](https://github.com/janosh/matbench-discovery/discussions) or [reach out privately](mailto:[email protected]?subject=Matbench%20Discovery).
+If you're interested in joining this work, feel free to [open a GitHub discussion](https://github.com/janosh/matbench-discovery/discussions) or [send an email](mailto:[email protected]?subject=Collaborate%20on%20Matbench%20Discovery).
 
-For detailed results and analysis, check out our [preprint](https://janosh.github.io/matbench-discovery/preprint) and [SI](https://janosh.github.io/matbench-discovery/si).
+For detailed results and analysis, check out the [preprint](https://janosh.github.io/matbench-discovery/preprint) and [SI](https://janosh.github.io/matbench-discovery/si).

site/src/lib/Footer.svelte

@@ -8,12 +8,8 @@
   let btn: HTMLButtonElement
 
   function close_if_outside_click(event: MouseEvent) {
-    if (
-      dialog &&
-      show_tips &&
-      !dialog.contains(event.target as Node) &&
-      !btn.contains(event.target as Node)
-    ) {
+    const is_outside = dialog && !dialog.contains(event.target as Node)
+    if (show_tips && is_outside && !btn.contains(event.target as Node)) {
       show_tips = false
     }
   }
@@ -27,22 +23,25 @@
 <svelte:window on:click={close_if_outside_click} on:keydown={toggle} />
 
 <footer>
-  Questions/feedback?
-  <a href="{repository}/issues"><Icon icon="octicon:mark-github" inline /></a>
-  <a href="mailto:[email protected]?subject=Matbench Discovery">
-    <Icon icon="mdi:email" inline />
-  </a>
-  <!-- open modal on clicking tips icon -->
-  <button on:click={() => (show_tips = true)} bind:this={btn} title={tips_title}>
-    <Icon icon="mdi:lightbulb-on-outline" inline />
-  </button>
-
-  <p>
-    <a href="/changelog">
-      <Icon icon="octicon:history" inline />
-      Changelog
-    </a>
-  </p>
+  <nav>
+    <a href="{repository}/issues">Issues</a>
+    <a href="mailto:[email protected]?subject=Matbench Discovery">Contact</a>
+    <a href="/changelog">Changelog</a>
+    <button
+      on:click={() => (show_tips = true)}
+      bind:this={btn}
+      title={tips_title}
+      style="padding: 0; transform: scale(1.2);"
+    >
+      <Icon icon="mdi:lightbulb-on-outline" inline />
+    </button>
+  </nav>
+  <img
+    src="/favicon.svg"
+    alt="Logo"
+    width="30px"
+    style="vertical-align:middle;"
+  />&emsp;Matbench Discovery
 </footer>
 
 <dialog bind:this={dialog} open={show_tips}>
@@ -61,10 +60,13 @@
     background: #00061a;
     text-align: center;
   }
-  footer > a {
-    margin: 0 0 0 4pt;
+  footer nav {
+    display: flex;
+    gap: 1em;
+    justify-content: center;
+    margin: 2em 0;
   }
-  footer > button {
+  footer > nav > button {
     background: none;
     color: var(--blue);
   }
@@ -85,7 +87,7 @@
     visibility: visible;
     opacity: 1;
   }
-  dialog > * {
+  dialog > :is(p, h3) {
     margin: 0;
   }
   p kbd {

site/src/lib/References.svelte

@@ -25,9 +25,9 @@
         —
         <small>
           {#if DOI}
-            DOI: <a href="https://doi.org/{DOI}">{DOI}</a>
+            <a href="https://doi.org/{DOI}">{DOI}</a>
           {:else if href}
-            preprint: <a {href}>{href}</a>
+            <a {href}>{href}</a>
           {/if}
           {#if issued}
             &mdash; {issued[0].year}
@@ -39,10 +39,16 @@
 {/key}
 
 <style>
+  ol {
+    padding: 0 0 0 1em;
+  }
   ol > li {
     margin: 1ex 0;
   }
   ol > li > strong {
     display: block;
   }
+  ol > li > :is(small, span) {
+    font-weight: lighter;
+  }
 </style>

site/src/routes/models/+page.svelte

@@ -3,6 +3,7 @@
   import { ModelCard } from '$lib'
   import Icon from '@iconify/svelte'
   import { interpolatePuOr } from 'd3-scale-chromatic'
+  import { ColorBar } from 'elementari'
   import { RadioButtons, Tooltip } from 'svelte-zoo'
   import { flip } from 'svelte/animate'
   import { fade } from 'svelte/transition'
@@ -53,7 +54,7 @@
   $: order = lower_is_better.includes(sort_by) ? `asc` : `desc`
 
   function bg_color(val: number, min: number, max: number) {
-    return interpolatePuOr(1 - (val - min) / (max - min)).replace(`)`, `, 0.3)`)
+    return interpolatePuOr(1 - (val - min) / (max - min)).replace(`)`, `, 0.4)`)
   }
 </script>
 
@@ -84,6 +85,12 @@
     {/each}
   </ul>
 
+  <legend>
+    best
+    <ColorBar color_scale={interpolatePuOr} style="min-width: min(70vw, 400px);" />
+    worst
+  </legend>
+
   <ol>
     {#each models.slice(0, Math.max(min_models, show_n_best)) as model (model.model_name)}
       <li
@@ -114,6 +121,14 @@
 </div>
 
 <style>
+  legend {
+    display: flex;
+    gap: 8pt;
+    place-content: center;
+    opacity: 0.8;
+    margin: 2em auto;
+    font-weight: lighter;
+  }
   :is(ul, ol) {
     padding: 0;
     list-style: none;