make PNG of WBM e_form hist in data/wbm/readme.md interactive plotly figure

Author: janosh

.pre-commit-config.yaml

@@ -55,7 +55,7 @@ repos:
     hooks:
       - id: codespell
         stages: [commit, commit-msg]
-        exclude_types: [csv, json]
+        exclude_types: [csv, json, svg]
 
   - repo: https://github.com/PyCQA/autoflake
     rev: v2.0.0

data/wbm/2022-12-07-hist-e-form-per-atom.svg

@@ -22,6 +22,7 @@
 
 from matbench_discovery import ROOT, today
 from matbench_discovery.energy import get_e_form_per_atom
+from matbench_discovery.plots import pio
 
 try:
     import gdown
@@ -41,6 +42,8 @@
 module_dir = os.path.dirname(__file__)
 warnings.filterwarnings("ignore", category=UserWarning, module="pymatgen")
 
+assert pio.templates.default == "plotly_dark+global"
+
 
 # %% links to google drive files received via email from 1st author Hai-Chen Wang
 # on 2021-06-15 containing initial and relaxed structures
@@ -429,7 +432,7 @@ def fix_bad_struct_index_mismatch(material_id: str) -> str:
 n_too_unstable = sum(df_summary.e_form_per_atom_wbm > e_form_cutoff)
 print(f"{n_too_unstable = }")  # n_too_unstable = 22
 
-fig = df_summary.hist(x="e_form_per_atom_wbm", bins=100, backend="plotly", log_y=True)
+fig = df_summary.hist(x="e_form_per_atom_wbm", backend="plotly", log_y=True)
 fig.add_vline(x=e_form_cutoff, line=dict(width=2, dash="dash", color="green"))
 fig.add_vline(x=-e_form_cutoff, line=dict(width=2, dash="dash", color="green"))
 fig.add_annotation(
@@ -441,8 +444,18 @@ def fix_bad_struct_index_mismatch(material_id: str) -> str:
     xaxis_title="WBM formation energy (eV/atom)", margin=dict(l=10, r=10, t=40, b=10)
 )
 
-fig.write_image(
-    f"{module_dir}/{today}-hist-e-form-per-atom.png", scale=5, width=800, height=300
+
+# %%
+# no need to store all 250k x values in plot, leads to 1.7 MB file, subsample every 10th
+# point is enough to see the distribution
+fig.data[0].x = fig.data[0].x[::10]
+# recommended to upload to vecta.io/nano afterwards for compression
+fig.write_image(f"{module_dir}/{today}-hist-e-form-per-atom.svg", width=800, height=300)
+fig.write_html(
+    f"{module_dir}/{today}-hist-e-form-per-atom.svelte",
+    include_plotlyjs=False,
+    full_html=False,
+    config=dict(showTips=False, displayModeBar=False, scrollZoom=True),
 )
 
 

data/wbm/fetch_process_wbm_dataset.py

@@ -20,7 +20,11 @@ The full set of processing steps used to curate the WBM test set from the raw da
 - correctly aligning initial structures to DFT-relaxed [`ComputedStructureEntries`](https://pymatgen.org/pymatgen.entries.computed_entries.html#pymatgen.entries.computed_entries.ComputedStructureEntry)
 - remove 6 pathological structures (with 0 volume)
 - remove formation energy outliers below -5 and above 5 eV/atom (502 and 22 crystals respectively out of 257,487 total, including an anomaly of 500 structures at exactly -10 eV/atom)
-  ![WBM formation energy histogram indicating outlier cutoffs](2022-12-07-hist-e-form-per-atom.png)
+
+  <slot name="hist-e-form-per-atom">
+    <img src="./2022-12-07-hist-e-form-per-atom.svg" alt="WBM formation energy histogram indicating outlier cutoffs">
+  </slot>
+
 - apply the [`MaterialsProject2020Compatibility`](https://pymatgen.org/pymatgen.entries.compatibility.html#pymatgen.entries.compatibility.MaterialsProject2020Compatibility) energy correction scheme to the formation energies
 - compute energy to the Materials Project convex hull constructed from all MP `ComputedStructureEntries` queried on 2022-09-16 ([database release 2021.05.13](https://docs.materialsproject.org/changes/database-versions#v2021.05.13))
 

data/wbm/readme.md

@@ -48,7 +48,11 @@
 
 
 # %%
-img_path = f"{ROOT}/figures/{today}-precision-recall-curves"
+img_path = f"{ROOT}/figures/{today}-cumulative-clf-metrics"
+# for trace in fig.data:
+#     assert isinstance(trace.y[0], float)
+#     trace.y = [round(y, 3) for y in trace.y]
+# fig
 # if hasattr(fig, "write_image"):
 #     fig.write_image(f"{img_path}.pdf")
 #     fig.write_html(

scripts/cumulative_clf_metrics.py

@@ -19,12 +19,6 @@ body {
   color: var(--text-color);
   line-height: 1.5;
 }
-main {
-  margin: auto;
-  margin-bottom: 3em;
-  width: 100%;
-  max-width: 50em;
-}
 button {
   color: var(--text-color);
   cursor: pointer;
@@ -68,6 +62,10 @@ label {
   font-weight: bold;
   cursor: pointer;
 }
+img {
+  max-width: 100%;
+  margin: 1em auto;
+}
 
 table {
   border-collapse: collapse;

site/src/app.css

@@ -2,10 +2,20 @@
   import { page } from '$app/stores'
   import Nav from '$lib/Nav.svelte'
   import { repository } from '$site/package.json'
+  import { onMount } from 'svelte'
   import GitHubCorner from 'svelte-github-corner'
   import Toc from 'svelte-toc'
   import '../app.css'
 
+  onMount(() => {
+    // make markdown links starting with site/src/routes/ files deployment-compatible
+    for (const link of [
+      ...document.querySelectorAll(`a[href^='site/src/routes']`),
+    ] as HTMLAnchorElement[]) {
+      link.href = link.href.replace(`/site/src/routes`, ``).split(`/+page`)[0]
+    }
+  })
+
   const routes = Object.keys(import.meta.glob(`./*/+page.{svx,svelte,md}`)).map(
     (filename) => `/` + filename.split(`/`)[1]
   )
@@ -30,6 +40,12 @@
 </main>
 
 <style>
+  main {
+    margin: auto;
+    margin-bottom: 3em;
+    width: 100%;
+    max-width: 50em;
+  }
   a[href='/'] {
     font-size: 15pt;
     position: absolute;

site/src/routes/+layout.svelte

@@ -1,17 +1,6 @@
 <script lang="ts">
-  import CumulativeMetricsPlot from '$root/figures/2022-12-25-precision-recall-curves.svelte'
+  import CumulativeMetricsPlot from '$root/figures/2022-12-26-cumulative-clf-metrics.svelte'
   import Readme from '$root/readme.md'
-  import { onMount } from 'svelte'
-
-  onMount(() => {
-    // make links to site/src/routes/ files deployment-compatible
-    const site_links: NodeListOf<HTMLAnchorElement> = document.querySelectorAll(
-      `a[href^='site/src/routes']`
-    )
-    for (const link of site_links) {
-      link.href = link.href.replace(`/site/src/routes`, ``).split('/+page')[0]
-    }
-  })
 </script>
 
 <Readme />

site/src/routes/+page.svelte

@@ -1,27 +1,12 @@
 <script lang="ts">
+  import Plot from '$root/data/wbm/2022-12-07-hist-e-form-per-atom.svelte'
   import DataReadme from '$root/data/wbm/readme.md'
-  import { onMount } from 'svelte'
-
-  const figs = import.meta.glob(`$root/data/wbm/*.{png,svg,pdf}`, {
-    eager: true,
-    as: `url`,
-  })
-
-  onMount(() => {
-    for (const img of document.querySelectorAll(`img`)) {
-      const src = `../data/wbm/${img.getAttribute(`src`)}`
-      if (figs[src]) img.src = figs[src]
-    }
-  })
 </script>
 
-<main>
-  <DataReadme />
-</main>
-
-<style>
-  :global(img) {
-    max-width: 100%;
-    margin: 1em auto;
-  }
-</style>
+<DataReadme>
+  <svelte:fragment slot="hist-e-form-per-atom">
+    {#if typeof document !== `undefined`}
+      <Plot />
+    {/if}
+  </svelte:fragment>
+</DataReadme>

site/src/routes/about-the-test-set/+page.svelte

@@ -0,0 +1 @@
+<!-- needed for /api page to show up -->

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

@@ -28,7 +28,10 @@ export default {
 
   preprocess: [
     preprocess(),
-    mdsvex({ rehypePlugins, extensions: [`.svx`, `.md`] }),
+    mdsvex({
+      rehypePlugins,
+      extensions: [`.svx`, `.md`],
+    }),
   ],
 
   kit: {