Add SymmetryCard.svelte (#42)

* add SymmetryCard.svelte

add superscript_digits() helper in labels.ts for pretty-printing oxidation states
Cr3+ O2- Ac3+ -> Cr³⁺ O²⁻ Ac³⁺

* add test superscript_digits

* delete CI install-cmd: npm install --force

* update deps

* mock ResizeObserver in unit tests

* update molecules mention in readme

.github/workflows/gh-pages.yml

@@ -10,5 +10,3 @@ on:
 jobs:
   build:
     uses: janosh/workflows/.github/workflows/nodejs-gh-pages.yml@main
-    with:
-      install-cmd: npm install --force

.github/workflows/test.yml

@@ -12,5 +12,3 @@ on:
 jobs:
   tests:
     uses: janosh/workflows/.github/workflows/npm-test-release.yml@main
-    with:
-      install-cmd: npm install --force

.pre-commit-config.yaml

@@ -17,7 +17,7 @@ repos:
       - id: trailing-whitespace
 
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v3.0.0
+    rev: v3.0.1
     hooks:
       - id: prettier
         args: [--write] # edit files in-place

package.json

@@ -24,9 +24,9 @@
   },
   "dependencies": {
     "@iconify/svelte": "^3.1.4",
-    "@sveltejs/kit": "^1.22.4",
-    "@threlte/core": "6.0.1",
-    "@threlte/extras": "5.0.2",
+    "@sveltejs/kit": "^1.25.2",
+    "@threlte/core": "6.0.10",
+    "@threlte/extras": "7.0.1",
     "d3": "^7.8.5",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
@@ -35,47 +35,46 @@
     "d3-scale": "^4.0.2",
     "d3-scale-chromatic": "^3.0.0",
     "d3-shape": "^3.2.0",
-    "highlight.js": "^11.8.0",
-    "svelte": "4.1.2",
-    "svelte-multiselect": "^10.1.0",
-    "three": "^0.155.0"
+    "highlight.js": "^11.9.0",
+    "svelte": "4.2.1",
+    "svelte-multiselect": "^10.2.0",
+    "three": "^0.157.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.36.2",
+    "@playwright/test": "^1.38.1",
     "@sveltejs/adapter-static": "2.0.3",
-    "@sveltejs/package": "^2.2.0",
-    "@types/d3-array": "^3.0.5",
-    "@types/d3-color": "^3.1.0",
-    "@types/d3-interpolate-path": "^2.0.0",
-    "@types/d3-scale": "^4.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.1",
-    "@types/three": "^0.155.0",
-    "@typescript-eslint/eslint-plugin": "^6.2.1",
-    "@typescript-eslint/parser": "^6.2.1",
-    "@vitest/coverage-v8": "^0.34.1",
-    "eslint": "^8.46.0",
-    "eslint-plugin-svelte": "^2.32.4",
+    "@types/d3-shape": "^3.1.3",
+    "@types/three": "^0.157.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@typescript-eslint/parser": "^6.7.5",
+    "@vitest/coverage-v8": "^0.34.6",
+    "eslint": "^8.51.0",
+    "eslint-plugin-svelte": "^2.34.0",
     "hastscript": "^8.0.0",
     "jsdom": "^22.1.0",
     "mdsvex": "^0.11.0",
-    "mdsvexamples": "^0.3.3",
-    "prettier": "^3.0.1",
+    "mdsvexamples": "^0.4.1",
+    "prettier": "^3.0.3",
     "prettier-plugin-svelte": "^3.0.3",
-    "rehype-autolink-headings": "^6.1.1",
+    "rehype-autolink-headings": "^7.0.0",
     "rehype-katex-svelte": "^1.2.0",
-    "rehype-slug": "^5.1.0",
+    "rehype-slug": "^6.0.0",
     "remark-math": "3.0.0",
-    "rollup": "3.27.0",
-    "sharp": "^0.32.4",
-    "svelte-check": "^3.4.6",
+    "sharp": "^0.32.6",
+    "svelte-check": "^3.5.2",
     "svelte-preprocess": "^5.0.4",
-    "svelte-toc": "^0.5.5",
+    "svelte-toc": "^0.5.6",
     "svelte-zoo": "^0.4.9",
-    "svelte2tsx": "^0.6.19",
-    "typescript": "5.1.6",
-    "vite": "^4.4.8",
-    "vitest": "^0.34.1"
+    "svelte2tsx": "^0.6.23",
+    "typescript": "5.2.2",
+    "vite": "^4.4.11",
+    "vitest": "^0.34.6"
   },
   "keywords": [
     "svelte",
@@ -107,6 +106,7 @@
       "default": "./dist/stores.js"
     }
   },
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ]

readme.md

@@ -13,7 +13,7 @@
 
 </h4>
 
-`elementari` is a toolkit for building interactive web UIs for materials science: periodic tables, 3d crystal structures (molecules coming soon!), Bohr atoms, nuclei, heatmaps, scatter plots. It's under active development and not yet ready for production use but we appreciate any feedback from beta testers! 🙏
+`elementari` is a toolkit for building interactive web UIs for materials science: periodic tables, 3d crystal structures (and molecules, though needs some improvements!), Bohr atoms, nuclei, heatmaps, scatter plots. It's under active development and not yet ready for production use but we appreciate any feedback from beta testers! 🙏
 
 ![Screenshot of landing page](static/2023-02-13-landing-page.webp)
 

src/app.css

@@ -69,13 +69,17 @@ a.btn {
 a:hover {
   color: orange;
 }
-code {
+code,
+kbd {
   overflow-wrap: break-word;
   padding: 1pt 3pt;
   border-radius: 3pt;
   font-size: 1.3em;
   background-color: black;
 }
+kbd {
+  font-size: larger;
+}
 pre code {
   background-color: transparent;
   display: inline-block;

src/lib/InfoCard.svelte

@@ -61,8 +61,8 @@
   }
   h2 {
     grid-column: 1 / -1;
-    margin: 1ex 0;
-    text-align: center;
+    margin: 0;
+    border-bottom: 1px solid var(--ic-title-border-color, rgba(255, 255, 255, 0.3));
   }
   div {
     display: flex;

src/lib/labels.ts

@@ -121,3 +121,23 @@ export function choose_bw_for_contrast(
     luminance(get_bg_color(node, bg_color)) > text_color_threshold
   return light_bg ? `black` : `white` // white text for dark backgrounds, black for light
 }
+
+export const superscript_map = {
+  '0': `⁰`,
+  '1': `¹`,
+  '2': `²`,
+  '3': `³`,
+  '4': `⁴`,
+  '5': `⁵`,
+  '6': `⁶`,
+  '7': `⁷`,
+  '8': `⁸`,
+  '9': `⁹`,
+  '+': `⁺`,
+  '-': `⁻`,
+}
+
+export function superscript_digits(input: string): string {
+  // use replace all signs and digits with their unicode superscript equivalent
+  return input.replace(/[\d+-]/g, (match) => superscript_map[match])
+}

src/lib/material/MaterialCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { InfoCard } from '$lib'
+  import { InfoCard, pretty_num, superscript_digits } from '$lib'
   import type { SummaryDoc } from '$types'
+  import SymmetryCard from './SymmetryCard.svelte'
 
   export let material: SummaryDoc
 
@@ -22,14 +23,22 @@
       title: `E<sub>above hull</sub>`,
       value: 1000 * (material?.energy_above_hull ?? 0),
       unit: `meV/atom`,
-      condition: material?.energy_above_hull,
+      condition: `energy_above_hull` in material,
+    },
+    {
+      title: `Predicted stable`,
+      value: material?.energy_above_hull ?? 0 > 0 ? `❌ No` : `✅ Yes`,
+      condition: `energy_above_hull` in material,
     },
     {
       title: `Formation Energy`,
       value: material.formation_energy_per_atom,
       unit: `eV/atom`,
     },
-    { title: `Experimentally Observed`, value: material.theoretical ? `No` : `Yes` },
+    {
+      title: `Experimentally Observed`,
+      value: material.theoretical ? `❌ No` : `✅ Yes`,
+    },
     { title: `Total Energy`, value: material.energy_per_atom, unit: `eV/atom` },
     {
       title: `Uncorrected Energy`,
@@ -46,12 +55,6 @@
       value: material.origins,
       condition: material.origins?.length,
     },
-    {
-      title: `Is magnetic`,
-      value: `${material.is_magnetic ? `yes` : `no`} ${
-        material.is_magnetic ? `(${material.total_magnetization})` : ``
-      }`,
-    },
     {
       title: `Voigt bulk modulus`,
       value: material.k_voigt,
@@ -63,14 +66,32 @@
       unit: `GPa`,
     },
     { title: `Refractive index`, value: material.n },
-    { title: `Ordering`, value: material.ordering },
+    {
+      title: `Is magnetic`,
+      value: `${material.is_magnetic ? `yes` : `no`} ${
+        material.is_magnetic
+          ? `(${pretty_num(material.total_magnetization)} µB/f.u.)`
+          : ``
+      }`,
+      tooltip: `µB: Bohr magneton, f.u.: formula unit`,
+    },
+    { title: `Ordering`, value: { NM: `non-magnetic` }[material.ordering] },
+    {
+      title: `Possible oxidation states`,
+      value: superscript_digits(material.possible_species?.join(` `) ?? ``),
+      condition: material.possible_species?.length,
+    },
   ]
 </script>
 
-<InfoCard {data} {...$$restProps} />
+<InfoCard {data} {...$$restProps} title="Material" />
+
+<SymmetryCard {material} />
+
+<slot name="after-symmetry" />
 
 <details>
-  <summary>Related materials IDs</summary>
+  <summary>Related material IDs</summary>
   {#if material.task_ids?.length}
     <p>
       Task IDs: {#each material.task_ids as id}
@@ -99,6 +120,12 @@
   p {
     display: flex;
     flex-wrap: wrap;
-    gap: 0 1em;
+    gap: 1ex 1em;
+    font-size: smaller;
+  }
+  p a {
+    background-color: rgba(255, 255, 255, 0.1);
+    padding: 0 3pt;
+    border-radius: 3pt;
   }
 </style>

src/lib/material/SymmetryCard.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { InfoCard } from '$lib'
+  import type { SummaryDoc } from '$types'
+
+  export let title: string = `Symmetry`
+
+  export let material: SummaryDoc
+
+  $: data = [
+    {
+      title: `Crystal System`,
+      value: `${material.symmetry?.crystal_system}`,
+    },
+    {
+      title: `International Number`,
+      value: material.symmetry?.number,
+    },
+    {
+      title: `Point Group`,
+      value: `${material.symmetry?.point_group}`,
+    },
+    {
+      title: `Symbol`,
+      value: `${material.symmetry?.symbol}`,
+    },
+  ]
+</script>
+
+<InfoCard {data} {...$$restProps} {title} />

src/lib/structure/Structure.svelte

@@ -106,7 +106,7 @@
   }
 
   function on_file_drop(event: DragEvent) {
-    // TODO support dragging CIF files
+    // TODO support dragging CIF/XYZ files
     dragover = false
     if (!allow_file_drop) return
     const file = event.dataTransfer?.items[0].getAsFile()
@@ -456,7 +456,7 @@
     box-sizing: border-box;
     top: var(--struct-controls-top, 30pt);
     right: var(--struct-controls-right, 6pt);
-    background: var(--struct-controls-bg, rgba(0, 0, 0, 0.8));
+    background: var(--struct-controls-bg, rgba(10, 10, 10, 0.8));
     padding: var(--struct-controls-padding, 6pt 9pt);
     border-radius: var(--struct-controls-border-radius, 3pt);
     width: var(--struct-controls-width, 20em);
@@ -509,7 +509,7 @@
   .atom-label {
     background: var(--struct-atom-label-bg, rgba(0, 0, 0, 0.2));
     border-radius: var(--struct-atom-label-border-radius, 3pt);
-    padding: var(--struct-atom-label-padding, 1px 6px);
+    padding: var(--struct-atom-label-padding, 0 3px);
   }
   input[type='color'] {
     width: var(--struct-input-color-width, 40px);

src/lib/structure/StructureCard.svelte

@@ -4,14 +4,15 @@
   import InfoCard from '../InfoCard.svelte'
 
   export let structure: PymatgenStructure
+  export let title: string = `Structure`
 
   $: ({ volume, a, b, c, alpha, beta, gamma } = structure?.lattice ?? {})
 </script>
 
 <InfoCard
   data={[
     { title: `Formula`, value: alphabetical_formula(structure) },
-    { title: `Number of atoms`, value: structure?.sites.length, fmt: `.0f` },
+    { title: `Number of atoms`, value: structure?.sites?.length, fmt: `.0f` },
     { title: `Volume`, value: volume, unit: `ų` },
     { title: `Density`, value: density(structure), unit: `g/cm³` },
     {
@@ -21,10 +22,10 @@
     },
     {
       title: `Lattice angles α, β, γ`,
-      value: [alpha, beta, gamma].map(pretty_num).join(`, `),
-      unit: `°`,
+      value: [alpha, beta, gamma].map(pretty_num).join(`°, `) + `°`,
     },
     // { title: 'Charge', value: structure?.charge },
   ]}
   {...$$restProps}
+  {title}
 />

src/lib/structure/StructureLegend.svelte

@@ -53,6 +53,9 @@
       Click on an atom to make it active. Then hover another atom to get its distance to
       the active atom.
     </p>
+    <p>
+      Hold <kbd>shift</kbd> or <kbd>cmd</kbd> or <kbd>ctrl</kbd> and drag to pan the scene.
+    </p>
   </slot>
 </dialog>
 

src/routes/+page.md

@@ -9,7 +9,7 @@
 
 # Elementari
 
-`elementari` is a toolkit for building interactive web UIs for materials science: periodic tables, 3d crystal structures (molecules coming soon!), Bohr atoms, nuclei, heatmaps, scatter plots. It's under active development and not yet ready for production use but we appreciate any feedback from beta testers! 🙏
+`elementari` is a toolkit for building interactive web UIs for materials science: periodic tables, 3d crystal structures (and molecules, though could use some improvements), Bohr atoms, nuclei, heatmaps, scatter plots. It's under active development and not yet ready for production use but we appreciate any feedback from beta testers! 🙏
 
 Check out some of the examples in the navigation bar above.
 

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

@@ -62,9 +62,9 @@
   </center>
   <Structure structure={data.summary.structure} />
 
-  <MaterialCard material={data.summary} />
-
-  <StructureCard structure={data.summary.structure} />
+  <MaterialCard material={data.summary}>
+    <StructureCard structure={data.summary.structure} slot="after-symmetry" />
+  </MaterialCard>
 
   <h3>
     Crystal description