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
janosh · Oct 11, 2023 · 2df8493 · 2df8493
1 parent 45e3dc2
commit 2df8493
Show file tree

Hide file tree

Showing 19 changed files with 165 additions and 72 deletions.
diff --git a/.github/workflows/gh-pages.yml b/.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
diff --git a/.github/workflows/test.yml b/.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
diff --git a/.pre-commit-config.yaml b/.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

diff --git a/package.json b/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"
   ]

diff --git a/readme.md b/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)
 

diff --git a/src/app.css b/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;

diff --git a/src/lib/InfoCard.svelte b/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;

diff --git a/src/lib/labels.ts b/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])
+}
diff --git a/src/lib/material/MaterialCard.svelte b/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>
diff --git a/src/lib/material/SymmetryCard.svelte b/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} />
diff --git a/src/lib/structure/Structure.svelte b/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);

diff --git a/src/lib/structure/StructureCard.svelte b/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}
 />
diff --git a/src/lib/structure/StructureLegend.svelte b/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>
 

diff --git a/src/routes/+page.md b/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.
 

diff --git a/src/routes/mp-[slug]/+page.svelte b/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
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,5 +10,3 @@ on: @@
     jobs:
       build:
         uses: janosh/workflows/.github/workflows/nodejs-gh-pages.yml@main
-        with:
-          install-cmd: npm install --force