StructureScene add prop fov: number | undefined = undefined

add InfoCard style prop and Structure --struct-controls-text-color CSS var
move svelte-zoo from dev deps to deps, fixes import error for users

.pre-commit-config.yaml

@@ -49,4 +49,4 @@ repos:
     hooks:
       - id: codespell
         stages: [commit, commit-msg]
-        args: [--ignore-words-list, 'te,ba,nd,ore,claus']
+        args: [--ignore-words-list, 'te,ba,nd,ore,claus', --check-filenames]

package.json

@@ -24,9 +24,9 @@
   },
   "dependencies": {
     "@iconify/svelte": "^3.1.4",
-    "@sveltejs/kit": "^1.25.2",
-    "@threlte/core": "6.0.10",
-    "@threlte/extras": "7.0.1",
+    "@sveltejs/kit": "^1.27.1",
+    "@threlte/core": "6.1.0",
+    "@threlte/extras": "7.5.0",
     "d3": "^7.8.5",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
@@ -36,25 +36,26 @@
     "d3-scale-chromatic": "^3.0.0",
     "d3-shape": "^3.2.0",
     "highlight.js": "^11.9.0",
-    "svelte": "4.2.1",
+    "svelte": "4.2.2",
     "svelte-multiselect": "^10.2.0",
-    "three": "^0.157.0"
+    "three": "^0.158.0",
+    "svelte-zoo": "^0.4.9"
   },
   "devDependencies": {
-    "@playwright/test": "^1.38.1",
+    "@playwright/test": "^1.39.0",
     "@sveltejs/adapter-static": "2.0.3",
     "@sveltejs/package": "^2.2.2",
-    "@types/d3-array": "^3.0.8",
-    "@types/d3-color": "^3.1.1",
-    "@types/d3-interpolate-path": "^2.0.1",
-    "@types/d3-scale": "^4.0.5",
-    "@types/d3-scale-chromatic": "^3.0.0",
-    "@types/d3-shape": "^3.1.3",
-    "@types/three": "^0.157.0",
-    "@typescript-eslint/eslint-plugin": "^6.7.5",
-    "@typescript-eslint/parser": "^6.7.5",
+    "@types/d3-array": "^3.0.9",
+    "@types/d3-color": "^3.1.2",
+    "@types/d3-interpolate-path": "^2.0.2",
+    "@types/d3-scale": "^4.0.6",
+    "@types/d3-scale-chromatic": "^3.0.1",
+    "@types/d3-shape": "^3.1.4",
+    "@types/three": "^0.158.0",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
     "@vitest/coverage-v8": "^0.34.6",
-    "eslint": "^8.51.0",
+    "eslint": "^8.52.0",
     "eslint-plugin-svelte": "^2.34.0",
     "hastscript": "^8.0.0",
     "jsdom": "^22.1.0",
@@ -70,10 +71,9 @@
     "svelte-check": "^3.5.2",
     "svelte-preprocess": "^5.0.4",
     "svelte-toc": "^0.5.6",
-    "svelte-zoo": "^0.4.9",
     "svelte2tsx": "^0.6.23",
     "typescript": "5.2.2",
-    "vite": "^4.4.11",
+    "vite": "^4.5.0",
     "vitest": "^0.34.6"
   },
   "keywords": [

src/lib/InfoCard.svelte

@@ -14,12 +14,13 @@
   export let fallback: string = ``
   export let fmt: string = `.2f`
   export let as: string = `section`
+  export let style: string | null = null
 
   // rename fmt as default_fmt internally
   $: default_fmt = fmt
 </script>
 
-<svelte:element this={as} class="info-card">
+<svelte:element this={as} class="info-card" {style}>
   {#if title || $$slots.title}
     <h2>
       <slot name="title">

src/lib/api.ts

@@ -9,7 +9,7 @@ export async function decompress(blob: ReadableStream<Uint8Array> | null) {
 
 export async function fetch_zipped<T>(
   url: string,
-  { unzip = true, fetch = window.fetch } = {},
+  { unzip = true } = {},
 ): Promise<T | null> {
   const response = await fetch(url)
   if (!response.ok) {

src/lib/labels.ts

@@ -87,16 +87,16 @@ export const categories = [
 // prettier-ignore
 export const elem_symbols = [`H`,`He`,`Li`,`Be`,`B`,`C`,`N`,`O`,`F`,`Ne`,`Na`,`Mg`,`Al`,`Si`,`P`,`S`,`Cl`,`Ar`,`K`,`Ca`,`Sc`,`Ti`,`V`,`Cr`,`Mn`,`Fe`,`Co`,`Ni`,`Cu`,`Zn`,`Ga`,`Ge`,`As`,`Se`,`Br`,`Kr`,`Rb`,`Sr`,`Y`,`Zr`,`Nb`,`Mo`,`Tc`,`Ru`,`Rh`,`Pd`,`Ag`,`Cd`,`In`,`Sn`,`Sb`,`Te`,`I`,`Xe`,`Cs`,`Ba`,`La`,`Ce`,`Pr`,`Nd`,`Pm`,`Sm`,`Eu`,`Gd`,`Tb`,`Dy`,`Ho`,`Er`,`Tm`,`Yb`,`Lu`,`Hf`,`Ta`,`W`,`Re`,`Os`,`Ir`,`Pt`,`Au`,`Hg`,`Tl`,`Pb`,`Bi`,`Po`,`At`,`Rn`,`Fr`,`Ra`,`Ac`,`Th`,`Pa`,`U`,`Np`,`Pu`,`Am`,`Cm`,`Bk`,`Cf`,`Es`,`Fm`,`Md`,`No`,`Lr`,`Rf`,`Db`,`Sg`,`Bh`,`Hs`,`Mt`,`Ds`,`Rg`,`Cn`,`Nh`,`Fl`,`Mc`,`Lv`,`Ts`,`Og`] as const
 
-// function combo used to retrieve background color and to compute text color to maximize contrast
+// calculate human-perceived brightness from RGB color
 export function luminance(clr: string) {
-  // calculate human-perceived lightness from RGB
   const { r, g, b } = rgb(clr)
   // if (![r, g, b].every((c) => c >= 0 && c <= 255)) {
   //   console.error(`invalid RGB color: ${clr}, parsed to rgb=${r},${g},${b}`)
   // }
   return (0.299 * r + 0.587 * g + 0.114 * b) / 255 // https://stackoverflow.com/a/596243
 }
 
+// get background color of passed DOM node, or recurse up the DOM tree if current node is transparent
 export function get_bg_color(
   elem: HTMLElement | null,
   bg_color: string | null = null,
@@ -111,6 +111,7 @@ export function get_bg_color(
   return get_bg_color(elem.parentElement) // otherwise recurse up the DOM tree
 }
 
+// pick black or white text color to maximize contrast with background
 export function choose_bw_for_contrast(
   node: HTMLElement | null,
   // you can explicitly pass bg_color to avoid DOM recursion and in case get_bg_color() fails

src/lib/structure/Structure.svelte

@@ -416,6 +416,7 @@
     background: var(--struct-bg, rgba(0, 0, 255, 0.1));
     --struct-controls-transition-duration: 0.3s;
     overflow: var(--struct-overflow, hidden);
+    color: var(--struct-text-color);
   }
   .structure:fullscreen :global(canvas) {
     height: 100vh !important;
@@ -461,6 +462,7 @@
     border-radius: var(--struct-controls-border-radius, 3pt);
     width: var(--struct-controls-width, 20em);
     max-width: var(--struct-controls-max-width, 90cqw);
+    color: var(--struct-controls-text-color);
   }
   dialog.controls hr {
     border: none;
@@ -507,13 +509,15 @@
     text-align: center;
   }
   .atom-label {
-    background: var(--struct-atom-label-bg, rgba(0, 0, 0, 0.2));
+    background: var(--struct-atom-label-bg, rgba(0, 0, 0, 0.1));
     border-radius: var(--struct-atom-label-border-radius, 3pt);
     padding: var(--struct-atom-label-padding, 0 3px);
   }
   input[type='color'] {
     width: var(--struct-input-color-width, 40px);
     height: var(--struct-input-color-height, 16px);
     margin: var(--struct-input-color-margin, 0 0 0 5pt);
+    border: var(--struct-input-color-border, 1px solid rgba(255, 255, 255, 0.05));
+    box-sizing: border-box;
   }
 </style>

src/lib/structure/StructureScene.svelte

@@ -61,6 +61,8 @@
     width: 0.1,
     opacity: 0.5,
   }
+  // field of view of the camera. 50 is THREE.js default
+  export let fov: number = 50
 
   $: hovered_site = structure?.sites?.[hovered_idx ?? -1] ?? null
   $: active_site = structure?.sites?.[active_idx ?? -1] ?? null
@@ -75,7 +77,7 @@
   $: bond_thickness = bond_radius ?? 0.1 * atom_radius
 </script>
 
-<T.PerspectiveCamera makeDefault position={camera_position}>
+<T.PerspectiveCamera makeDefault position={camera_position} {fov}>
   <!-- fix the ugly target -->
   <OrbitControls
     enableZoom={zoom_speed > 0}

src/routes/api/+page.ts

@@ -6,7 +6,16 @@ const mp_build_url = `https://materialsproject-build.s3.amazonaws.com?delimiter=
 
 async function fetch_bucket_names() {
   const text = await fetch(mp_build_url).then((res) => res.text())
-  const doc = new window.DOMParser().parseFromString(text, `text/xml`)
+
+  // mock DOMParser when server-rendering
+  if (typeof DOMParser === `undefined`) {
+    // eslint-disable-next-line no-global-assign
+    globalThis.DOMParser = {
+      parseFromString: () => ({}),
+    }
+  }
+
+  const doc = new DOMParser().parseFromString(text, `text/xml`)
   return [...doc.querySelectorAll(`Prefix`)]
     .map((el) => el.textContent?.split(`/`)[2])
     .filter(Boolean)

src/routes/mp-[slug]/+page.ts

@@ -3,15 +3,15 @@ import type { RobocrystallogapherDoc, SimilarityDoc, SummaryDoc } from '$types'
 
 export const prerender = false
 
-export const load = async ({ params, fetch }) => {
+export const load = async ({ params }) => {
   const file = `mp-${params.slug}.json.gz`
   const summary_url = `${mp_build_bucket}/summary/${file}`
   const similarity_url = `${mp_build_bucket}/similarity/${file}`
   const robocrys_url = `${mp_build_bucket}/robocrys/${file}`
 
   return {
-    summary: fetch_zipped<SummaryDoc>(summary_url, { fetch }),
-    similarity: fetch_zipped<SimilarityDoc>(similarity_url, { fetch }),
-    robocrys: fetch_zipped<RobocrystallogapherDoc>(robocrys_url, { fetch }),
+    summary: fetch_zipped<SummaryDoc>(summary_url),
+    similarity: fetch_zipped<SimilarityDoc>(similarity_url),
+    robocrys: fetch_zipped<RobocrystallogapherDoc>(robocrys_url),
   }
 }