Site: swap rehype-autolink-headings for heading-anchors, use ToggleMenu from matterviz, improve DynamicScatter with interactive axes labels (#315)

* Replace rehype-autolink-headings with svelte-multiselect heading_anchors

- Use heading_ids() preprocessor to add IDs to headings at build time
- Use heading_anchors() attachment in layout for runtime anchor icons
- Add :target CSS styling for headings when navigated to
- Fix link fragment in WBM readme (#links-to-wbm-files)
- Disable MD051 markdownlint rule (link defined at runtime)

* Fix gh-pages workflow to use valid pre-build input

The reusable deno-gh-pages workflow only supports pre-build and post-build
inputs, not post-install. Move matterviz symlink commands into pre-build.

Fix DynamicScatter and MetricsTable test selectors and async handling

- Update DynamicScatter tests to use .controls-row instead of .controls-grid
- Fix checkbox indexing to account for log-toggle checkboxes in DOM order
- Add tick() calls after mount in MetricsTable tests for proper rendering
- Simplify heatmap toggle test assertions

* Delete local TableColumnToggleMenu, import ToggleMenu from matterviz

Now that matterviz is installed from main, use the ToggleMenu component
from matterviz instead of maintaining a local copy. Also adds SvelteKit
sync step to the CI workflow to ensure types are generated before packaging.

* Fix gh-pages workflow: run matterviz build in subshell to preserve working directory

* Install matterviz from main in vitest CI job

* Refactor org logos, fix DynamicScatter types, improve test stability

- Extract Logo component from MetricsTable and [slug]/+page.svelte
- Add icon name validation in labels.ts for matterviz icons
- Remove unused rehype-autolink-headings and rehype-slug packages
- Fix DynamicScatter type errors (remove AxisConfig casts, add y2 to data_loader)
- Add optional chaining to axes.x/y in tooltip for null safety
- Update test selectors to use label titles instead of index-based queries
- Change toBeDefined() to not.toBeNull() for querySelector results

* Fix test failures: matterviz mocks and table-export recursion

- Use importOriginal in matterviz mocks to preserve ICON_DATA export
- Save original createElement before mocking to prevent infinite recursion

* Refactor label keys to use property names for data access

- Add property field to Label type for cases where key differs from
  property name (e.g. geo_opt symmetry metrics)
- Update METADATA_COLS, HYPERPARAMS to use actual property names as keys
- Extract get_label_path/get_label_value helpers in DynamicScatter
- Add data_loader to color bar for dynamic property switching
- Update test expectations for new label structure

* Fix test failures from label key refactoring

- Add matterviz/table mock for ToggleMenu component
- Update metadata_cols test to use keys for filtering, labels for header checks
- Update metrics test to use graph_construction_radius key

* Skip tests for ToggleMenu component now from matterviz

The column toggle functionality is now provided by matterviz's
ToggleMenu component which is mocked in tests. Skip tests that
depend on its internal DOM structure (.column-toggles summary).

Move document binding inside describe block for Deno compatibility

The top-level document.createElement.bind(document) was throwing in
non-DOM environments (Deno) before describe.skipIf(IS_DENO) could
skip the tests. Now bound lazily in beforeAll inside the skip block.

Increase timeout for flaky MetricsTable tests

Author: janosh

.github/workflows/gh-pages.yml

@@ -21,3 +21,7 @@ jobs:
       working-directory: site
       pre-build: |
         uv run --with-editable .. ../scripts/make_api_docs.py
+        git clone --depth 1 https://github.com/janosh/matterviz ../matterviz
+        (cd ../matterviz && deno install && deno run -A npm:@sveltejs/kit sync && deno task package)
+        rm -rf node_modules/.deno/matterviz* node_modules/matterviz
+        ln -s ../../matterviz node_modules/matterviz

.github/workflows/test.yml

@@ -41,6 +41,12 @@ jobs:
       working-directory: site
       test-cmd: npx vitest run
       deno-version: 2.3.7 # https://github.com/denoland/deno/issues/29968
+      install-cmd: |
+        git clone --depth 1 https://github.com/janosh/matterviz ../matterviz
+        (cd ../matterviz && deno install && deno run -A npm:@sveltejs/kit sync && deno task package)
+        deno install
+        rm -rf node_modules/.deno/matterviz* node_modules/matterviz
+        ln -s ../../matterviz node_modules/matterviz
 
   scripts:
     runs-on: ubuntu-latest

data/wbm/readme.md

@@ -1,3 +1,5 @@
+<!-- markdownlint-disable MD051 -->
+
 # WBM Dataset
 
 [The **WBM dataset**](/data/wbm) was published in [Predicting stable crystalline compounds using chemical similarity][wbm paper] (nat comp mat, Jan 2021). The authors generated 257,487 structures through single-element substitutions on Materials Project (MP) source structures. The replacement element was chosen based on chemical similarity determined by a matrix data-mined from the [Inorganic Crystal Structure Database (ICSD)](https://icsd.products.fiz-karlsruhe.de).
@@ -16,7 +18,7 @@ Each iteration has varying numbers of materials which are counted by the 2nd int
 
 ## 🪓 &thinsp; Data Processing Steps
 
-The full set of processing steps used to curate the WBM test set from the raw data files (downloaded from [URLs listed below](#--links-to-wbm-files)) can be found in [`data/wbm/compile_wbm_test_set.py`](https://github.com/janosh/matbench-discovery/blob/-/data/wbm/compile_wbm_test_set.py). Processing steps taken:
+The full set of processing steps used to curate the WBM test set from the raw data files (downloaded from [URLs listed below](#links-to-wbm-files)) can be found in [`data/wbm/compile_wbm_test_set.py`](https://github.com/janosh/matbench-discovery/blob/-/data/wbm/compile_wbm_test_set.py). Processing steps taken:
 
 - re-format material IDs: `step_1-0->wbm-1-1`, `step_1-1->wbm-1-2`, ...
 - correctly align initial structures to DFT-relaxed [`ComputedStructureEntries`](https://github.com/materialsproject/pymatgen/blob/02a4ca8aa/pymatgen/entries/computed_entries.py#L536) (the initial structure files had 6 extra structures inserted towards the end of step 3 which had no corresponding IDs in the summary file)

site/package.json

@@ -22,38 +22,36 @@
     "@rollup/plugin-yaml": "^4.1.2",
     "@stylistic/eslint-plugin": "^5.7.0",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.49.4",
+    "@sveltejs/kit": "^2.50.0",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@types/d3-array": "^3.2.2",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-scale-chromatic": "^3.1.0",
     "@types/js-yaml": "^4.0.9",
     "@types/json-schema": "^7.0.15",
-    "@types/node": "^25.0.8",
+    "@types/node": "^25.0.9",
     "@vitest/coverage-v8": "^4.0.17",
     "d3-array": "^3.2.4",
     "d3-scale": "^4.0.2",
     "d3-scale-chromatic": "^3.1.0",
     "eslint": "^9.39.2",
     "eslint-plugin-svelte": "^3.14.0",
-    "happy-dom": "^20.3.0",
+    "happy-dom": "^20.3.3",
     "hastscript": "^9.0.1",
     "iconify-icon": "^3.0.2",
     "js-yaml": "^4.1.1",
     "json-schema-to-typescript": "^15.0.4",
     "katex": "^0.16.27",
     "matterviz": "^0.2.2",
     "mdsvex": "^0.12.6",
-    "rehype-autolink-headings": "^7.1.0",
     "rehype-katex-svelte": "^1.2.0",
-    "rehype-slug": "^6.0.0",
     "rehype-stringify": "^10.0.1",
     "remark-math": "3.0.1",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
-    "svelte": "^5.46.3",
+    "svelte": "^5.47.0",
     "svelte-check": "^4.3.5",
-    "svelte-multiselect": "^11.5.1",
+    "svelte-multiselect": "^11.5.2",
     "svelte-preprocess": "^6.0.3",
     "svelte-toc": "^0.6.2",
     "svelte2tsx": "^0.7.46",

site/src/app.css

@@ -242,16 +242,20 @@ blockquote > :is(:first-child, :last-child) {
   scroll-margin-top: 50px;
   transition: 0.3s;
 }
+:where(h1, h2, h3, h4, h5, h6):target {
+  color: var(--accent-color, cornflowerblue);
+}
 :where(h2, h3, h4, h5, h6).toc-clicked {
   color: var(--link-hover);
 }
-/* style heading anchors added by rehype-autolink-headings, see svelte.config.js */
+/* style heading anchors added by heading_anchors attachment from svelte-multiselect */
 :where(h2, h3, h4, h5, h6, strong) a[aria-hidden='true'] {
   transition: 0.3s;
   margin-left: 4pt;
   opacity: 0;
 }
-:where(h2, h3, h4, h5, h6, strong):hover a[aria-hidden='true'] {
+:where(h2, h3, h4, h5, h6, strong):is(:hover, :focus-within) a[aria-hidden='true'],
+:where(h2, h3, h4, h5, h6, strong) a[aria-hidden='true']:focus-visible {
   opacity: 1;
 }
 strong a[aria-hidden='true'] {