auto-regenerate API docs on production builds

replace periodic-tables with renamed sveriodic-table, add active element panel to WBM element heatmap

Author: janosh

site/package.json

@@ -28,7 +28,6 @@
     "hastscript": "^7.1.0",
     "highlight.js": "^11.7.0",
     "mdsvex": "^0.10.6",
-    "periodic-tables": "^0.1.4",
     "prettier": "^2.8.1",
     "prettier-plugin-svelte": "^2.9.0",
     "rehype-autolink-headings": "^6.1.1",
@@ -39,9 +38,10 @@
     "svelte-preprocess": "^5.0.0",
     "svelte-toc": "^0.5.1",
     "svelte2tsx": "^0.6.0",
+    "sveriodic-table": "^0.1.1",
     "tslib": "^2.4.1",
     "typescript": "^4.9.4",
-    "vite": "^4.0.3"
+    "vite": "^4.0.4"
   },
   "prettier": {
     "semi": false,

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

@@ -1,20 +1,20 @@
 <script lang="ts">
   import FormEnergyHist from '$root/data/wbm/2022-12-07-hist-e-form-per-atom.svelte'
   import DataReadme from '$root/data/wbm/readme.md'
-  // import { PeriodicTable, Toggle } from 'periodic-tables'
-  import PeriodicTable from 'periodic-tables'
-  import Toggle from 'periodic-tables/Toggle.svelte'
+  import type { ChemicalElement } from 'sveriodic-table'
+  import { PeriodicTable, TableInset, Toggle } from 'sveriodic-table'
+  import { pretty_num } from 'sveriodic-table/labels'
   import elem_counts from './2022-12-30-wbm-element-counts.json'
 
+  let log_color_scale = false
   const heatmap_values = Object.values(elem_counts)
   const color_map = {
     200: `blue`,
     35_000: `green`,
     80_000: `yellow`,
     150_000: `red`,
   }
-
-  let log = true
+  let active_element: ChemicalElement
 </script>
 
 <DataReadme>
@@ -24,8 +24,16 @@
     {/if}
   </svelte:fragment>
   <svelte:fragment slot="wbm-elements-log">
-    <span>Log color scale? <Toggle bind:checked={log} /></span>
-    <PeriodicTable {heatmap_values} {color_map} {log} />
+    <span>Log color scale <Toggle bind:checked={log_color_scale} /></span>
+    <PeriodicTable {heatmap_values} {color_map} log={log_color_scale} bind:active_element>
+      <TableInset slot="inset" grid_row="3">
+        {#if active_element?.name}
+          <strong>
+            {active_element?.name}: {pretty_num(elem_counts[active_element?.symbol])}
+          </strong>
+        {/if}
+      </TableInset>
+    </PeriodicTable>
   </svelte:fragment>
 </DataReadme>
 
@@ -38,4 +46,7 @@
     transform: translateX(-50%);
     z-index: 1;
   }
+  strong {
+    text-align: center;
+  }
 </style>

site/vite.config.ts

@@ -1,5 +1,6 @@
 import yaml from '@rollup/plugin-yaml'
 import { sveltekit } from '@sveltejs/kit/vite'
+import { exec } from 'child_process'
 import { resolve } from 'path'
 import type { UserConfig } from 'vite'
 
@@ -25,3 +26,21 @@ const vite_config: UserConfig = {
 }
 
 export default vite_config
+
+if (process.env.PROD) {
+  // update generated API docs on production builds
+  const src_url = `https://github.com/janosh/matbench-discovery/blob/main`
+  const route = `src/routes/api`
+  await exec(`rm -f ${route}/*.md`)
+  await exec(
+    `cd .. && lazydocs matbench_discovery --output-path site/${route} --no-watermark --src-base-url ${src_url}`
+  )
+
+  // remove <b> tags from generated markdown
+  await exec(`sed -i 's/<b>//g' ${route}/*.md`)
+  await exec(`sed -i 's/<\\/b>//g' ${route}/*.md`)
+  // tweak look of badges linking to source code
+  const old_src = `src="https://img.shields.io/badge/-source-cccccc?style=flat-square"`
+  const new_src = `src="https://img.shields.io/badge/source-blue?style=flat" alt="source link"`
+  await exec(`sed -i 's/${old_src}/${new_src}/g' ${route}/*.md`)
+}