use svelte-zoo click_outside action for closing modals

- refactored Footer.svelte, HeatmapTable.svelte, MetricsTable.svelte to utilize svelte-zoo click_outside action
- bump deps in package.json except svelte + vite

data/wbm/readme.md

@@ -23,7 +23,8 @@ The full set of processing steps used to curate the WBM test set from the raw da
 - 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)
 
-  <caption style="margin: 1em;">WBM Formation energy distribution. 524 materials outside dashed lines were discarded.</caption>
+  > WBM Formation energy distribution. 524 materials outside dashed lines were discarded.
+
   <slot name="hist-e-form-per-atom">
     <img src="./figs/hist-wbm-e-form-per-atom.svg" alt="WBM formation energy histogram indicating outlier cutoffs">
   </slot>

site/package.json

@@ -18,46 +18,45 @@
     "changelog": "npx auto-changelog --output ../changelog.md --hide-credit --commit-limit false"
   },
   "devDependencies": {
-    "@iconify/svelte": "^4.0.2",
+    "@iconify/svelte": "^4.2.0",
     "@rollup/plugin-yaml": "^4.1.2",
     "@stylistic/eslint-plugin": "^2.12.1",
-    "@sveltejs/adapter-static": "^3.0.6",
-    "@sveltejs/kit": "^2.10.1",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.15.2",
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "d3-array": "^3.2.4",
     "d3-scale": "^4.0.2",
     "d3-scale-chromatic": "^3.1.0",
     "elementari": "^0.2.3",
-    "eslint": "^9.16.0",
+    "eslint": "^9.18.0",
     "eslint-plugin-svelte": "^2.46.1",
     "hastscript": "^9.0.0",
-    "highlight.js": "^11.10.0",
     "js-yaml": "^4.1.0",
-    "jsdom": "^25.0.1",
+    "jsdom": "^26.0.0",
     "json-schema-to-typescript": "^15.0.3",
-    "katex": "^0.16.15",
+    "katex": "^0.16.19",
     "mdsvex": "^0.12.3",
     "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.2",
     "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.0",
+    "remark-math": "6.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.1",
     "svelte": "^4.2.19",
-    "svelte-check": "^4.1.1",
+    "svelte-check": "^4.1.3",
     "svelte-multiselect": "11.0.0-rc.1",
     "svelte-preprocess": "^6.0.3",
     "svelte-toc": "^0.5.9",
-    "svelte-zoo": "^0.4.15",
-    "svelte2tsx": "^0.7.30",
+    "svelte-zoo": "^0.4.16",
+    "svelte2tsx": "^0.7.34",
     "tslib": "^2.8.1",
-    "typescript": "5.7.2",
-    "typescript-eslint": "^8.18.0",
+    "typescript": "5.7.3",
+    "typescript-eslint": "^8.19.1",
     "unified": "^11.0.5",
-    "vite": "^5.4.10",
+    "vite": "^5.4.11",
     "vitest": "^2.1.8"
   },
   "prettier": {

site/src/lib/Footer.svelte

@@ -1,34 +1,30 @@
 <script lang="ts">
   import { repository } from '$site/package.json'
   import Icon from '@iconify/svelte'
+  import { click_outside } from 'svelte-zoo/actions'
 
-  export let show_tips: boolean = false
   export let tips_title = `Usage Tips`
   export let dialog: HTMLDialogElement | null = null
   export let btn: HTMLButtonElement | null = null
 
-  function close_if_outside_click(event: MouseEvent) {
-    const is_outside = dialog && !dialog.contains(event.target as Node)
-    if (show_tips && is_outside && !btn.contains(event.target as Node)) {
-      show_tips = false
-    }
-  }
-
   function toggle(event: KeyboardEvent) {
-    if (event.key == `Escape`) show_tips = false
-    if (event.key == `j` && event.metaKey) show_tips = !show_tips
+    if (!dialog) return
+    if (event.key == `Escape`) dialog.open = false
+    if (event.key == `j` && event.metaKey) dialog.open = !dialog.open
   }
 </script>
 
-<svelte:window on:click={close_if_outside_click} on:keydown={toggle} />
+<svelte:window on:keydown={toggle} />
 
 <footer>
   <nav>
     <a href="{repository}/issues">Issues</a>
     <a href="mailto:janosh.riebesell@gmail.com?subject=Matbench Discovery">Contact</a>
     <a href="/changelog">Changelog</a>
     <button
-      on:click={() => (show_tips = true)}
+      on:click={() => {
+        if (dialog) dialog.open = true
+      }}
       bind:this={btn}
       title={tips_title}
       style="padding: 0; transform: scale(1.2);"
@@ -40,7 +36,14 @@
   &ensp;Matbench Discovery (2023)
 </footer>
 
-<dialog bind:this={dialog} open={show_tips}>
+<dialog
+  bind:this={dialog}
+  use:click_outside={{
+    callback: (node) => {
+      if (node.open) node.open = false
+    },
+  }}
+>
   <h3>{tips_title}</h3>
   <p title="For keyboard-only site navigation">
     <kbd>cmd</kbd> + <kbd>k</kbd> to bring up a nav palette.

site/src/lib/HeatmapTable.svelte

@@ -106,7 +106,7 @@
         <tr class="group-header">
           {#each visible_columns as col}
             {#if !col.group}
-              <th />
+              <th></th>
             {:else}
               {@const group_cols = visible_columns.filter((c) => c.group === col.group)}
               {#if columns.indexOf(col) === columns.findIndex((c) => c.group === col.group)}

site/src/lib/MetricsTable.svelte

@@ -8,6 +8,7 @@
     model_is_compliant,
   } from '$lib'
   import { pretty_num } from 'elementari'
+  import { click_outside } from 'svelte-zoo/actions'
   import { METADATA_COLS, METRICS_COLS } from './metrics'
   import type { HeatmapColumn, ModelData } from './types'
 
@@ -19,7 +20,6 @@
   export let hide_cols: string[] = []
   export let metadata_cols = METADATA_COLS
 
-  let show_pred_files_modal = false
   let active_files: { name: string; url: string }[] = []
   let active_model_name = ``
   let pred_file_modal: HTMLDialogElement | null = null
@@ -149,8 +149,8 @@
 
 <svelte:window
   on:keydown={(event) => {
-    if (event.key === `Escape` && show_pred_files_modal) {
-      show_pred_files_modal = false
+    if (event.key === `Escape` && pred_file_modal?.open) {
+      pred_file_modal.open = false
       event.preventDefault()
     }
   }}
@@ -181,7 +181,8 @@
           class="pred-files-btn"
           title="Download model prediction files"
           on:click={() => {
-            show_pred_files_modal = true
+            if (!pred_file_modal) return
+            pred_file_modal.open = true
             active_files = links.pred_files.files
             active_model_name = links.pred_files.name
           }}
@@ -195,11 +196,20 @@
   </svelte:fragment>
 </HeatmapTable>
 
-<dialog bind:this={pred_file_modal} open={show_pred_files_modal}>
+<dialog
+  bind:this={pred_file_modal}
+  use:click_outside={{
+    callback: () => {
+      if (pred_file_modal?.open) pred_file_modal.open = false
+    },
+  }}
+>
   <div class="modal-content">
     <button
       class="close-btn"
-      on:click={() => (show_pred_files_modal = false)}
+      on:click={() => {
+        if (pred_file_modal?.open) pred_file_modal.open = false
+      }}
       title="Close (or click escape)"
     >
       ×
@@ -208,12 +218,7 @@
     <ol class="pred-files-list">
       {#each active_files as file}
         <li>
-          <a
-            href={file.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            on:click={() => (show_pred_files_modal = false)}
-          >
+          <a href={file.url} target="_blank" rel="noopener noreferrer">
             {file.name}
           </a>
         </li>

site/src/routes/models/[slug]/+page.svelte

@@ -14,27 +14,14 @@
     TableInset,
   } from 'elementari'
   import { CopyButton, Tooltip } from 'svelte-zoo'
+  import { click_outside } from 'svelte-zoo/actions'
 
   export let data
   export let color_scale: string[] = [`Viridis`]
   export let active_element: ChemicalElement | null = null
 
   $: model = data.model
 
-  let pred_files_details: HTMLDetailsElement | undefined
-
-  function handle_click_outside(event: MouseEvent) {
-    const target = event.target
-    // If click is outside the details element, close it
-    if (
-      pred_files_details &&
-      target instanceof Node &&
-      !pred_files_details.contains(target)
-    ) {
-      pred_files_details.open = false
-    }
-  }
-
   // TODO make this dynamic (static n_days_ago from time of last site build is misleading)
   function n_days_ago(dateString: string): string {
     return (
@@ -150,15 +137,10 @@
         {#if pred_files.length > 0}
           <details
             class="pred-files"
-            bind:this={pred_files_details}
-            on:toggle={(event) => {
-              if (event.target.open) {
-                // Add click outside listener when opening
-                window.addEventListener(`click`, handle_click_outside)
-              } else {
-                // Remove listener when closing
-                window.removeEventListener(`click`, handle_click_outside)
-              }
+            use:click_outside={{
+              callback: (node) => {
+                if (node.open) node.open = false
+              },
             }}
           >
             <summary>

site/svelte.config.js

@@ -1,5 +1,5 @@
 import adapter from '@sveltejs/adapter-static'
-import { s } from 'hastscript'
+import { s as hastscript } from 'hastscript'
 import { mdsvex } from 'mdsvex'
 import link_headings from 'rehype-autolink-headings'
 import katex from 'rehype-katex-svelte'
@@ -28,11 +28,11 @@ export default {
           {
             behavior: `append`,
             test: [`h2`, `h3`, `h4`, `h5`, `h6`], // don't auto-link <h1>
-            content: s(
+            content: hastscript(
               `svg`,
               { width: 16, height: 16, viewBox: `0 0 16 16` },
               // symbol #octicon-link defined in app.html
-              s(`use`, { 'xlink:href': `#octicon-link` }),
+              hastscript(`use`, { 'xlink:href': `#octicon-link` }),
             ),
           },
         ],