From 91385820a69f5873815e4a321b37a7a9af33be18 Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Sat, 15 Jul 2023 15:03:26 -0700
Subject: [PATCH] fix find_image_atoms() for non-cuboid lattices

use shear matrix to render lattice (fixes rendering lattice as parallelepiped, i.e. when show_cell = 'surface')
use <Bond> + <T.ConeGeometry> to render lattice vectors
---
 package.json                                  |  2 +-
 src/lib/InfoCard.svelte                       |  9 ++-
 src/lib/material/MaterialCard.svelte          | 48 +++++++----
 src/lib/math.ts                               |  4 +-
 src/lib/structure/Bond.svelte                 |  7 +-
 src/lib/structure/Lattice.svelte              | 81 ++++++++-----------
 src/lib/structure/Structure.svelte            | 34 ++++----
 src/lib/structure/StructureScene.svelte       | 13 ++-
 src/lib/structure/index.ts                    | 26 +++---
 .../(demos)/periodic-table/+page.svelte       |  4 +-
 src/routes/api/+page.svelte                   |  2 +-
 src/routes/mp-[slug]/+page.svelte             | 27 ++++---
 12 files changed, 141 insertions(+), 116 deletions(-)

diff --git a/package.json b/package.json
index d69cd3c..28126e3 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,7 @@
     "jsdom": "^22.1.0",
     "mdsvex": "^0.11.0",
     "mdsvexamples": "^0.3.3",
-    "prettier": "^3.0.0",
+    "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.1",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-katex-svelte": "^1.2.0",
diff --git a/src/lib/InfoCard.svelte b/src/lib/InfoCard.svelte
index a787b79..748f228 100644
--- a/src/lib/InfoCard.svelte
+++ b/src/lib/InfoCard.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
   import { pretty_num } from '$lib'
+  import type { PropertyOrigin } from '$types'
 
   export let data: {
     title: string
-    value: string | number | number[]
+    value?: string | number | number[] | null | PropertyOrigin
     unit?: string
     fmt?: string
-    condition?: boolean
+    condition?: boolean | number | null
     tooltip?: string
   }[] = []
   export let title: string = ``
@@ -26,7 +27,7 @@
       </slot>
     </h2>
   {/if}
-  {#each data as { title, value, unit, fmt = default_fmt, tooltip }}
+  {#each data.filter((itm) => (!(`condition` in itm) || itm?.condition) && ![undefined, null].includes(itm.value)) as { title, value, unit, fmt = default_fmt, tooltip }}
     <div>
       <span class="title" {title}>
         {@html title}
@@ -53,7 +54,7 @@
     border-radius: var(--ic-radius, 3pt);
     padding: var(--ic-padding, 10pt 12pt);
     margin: var(--ic-margin, 1em 0);
-    gap: var(--ic-gap, 10pt 1em);
+    gap: var(--ic-gap, 10pt 5%);
     background-color: var(--ic-bg, rgba(255, 255, 255, 0.1));
     font-size: var(--ic-font-size);
     width: var(--ic-width);
diff --git a/src/lib/material/MaterialCard.svelte b/src/lib/material/MaterialCard.svelte
index 88dcb44..7d85100 100644
--- a/src/lib/material/MaterialCard.svelte
+++ b/src/lib/material/MaterialCard.svelte
@@ -46,7 +46,25 @@
       value: material.origins,
       condition: material.origins?.length,
     },
-  ].filter((itm) => itm?.condition ?? true)
+    {
+      title: `Is magnetic`,
+      value: `${material.is_magnetic ? `yes` : `no`} ${
+        material.is_magnetic ? `(${material.total_magnetization})` : ``
+      }`,
+    },
+    {
+      title: `Voigt bulk modulus`,
+      value: material.k_voigt,
+      unit: `GPa`,
+    },
+    {
+      title: `Voig shear modulus`,
+      value: material.g_voigt,
+      unit: `GPa`,
+    },
+    { title: `Refractive index`, value: material.n },
+    { title: `Ordering`, value: material.ordering },
+  ]
 </script>
 
 <InfoCard {data} {...$$restProps} />
@@ -54,20 +72,20 @@
 <details>
   <summary>Related materials IDs</summary>
   {#if material.task_ids?.length}
-  <p>
-    Task IDs: {#each material.task_ids as id}
-      <a href="https://materialsproject.org/tasks/{id}">{id}</a>
-    {/each}
-  </p>
-{/if}
-{#if material.database_IDs.icsd?.length}
-
-<p>
-  ICSD IDs: {#each material.database_IDs.icsd as id}
-    <a href="https://ccdc.cam.ac.uk/structures/Search?Ccdcid={id}&DatabaseToSearch=ICSD">{id}</a>
-  {/each}
-</p>
-{/if}
+    <p>
+      Task IDs: {#each material.task_ids as id}
+        <a href="https://materialsproject.org/tasks/{id}">{id}</a>
+      {/each}
+    </p>
+  {/if}
+  {#if material.database_IDs?.icsd?.length}
+    <p>
+      ICSD IDs: {#each material.database_IDs.icsd as id}
+        {@const href = `https://ccdc.cam.ac.uk/structures/Search?Ccdcid=${id}&DatabaseToSearch=ICSD`}
+        <a {href}>{id}</a>
+      {/each}
+    </p>
+  {/if}
 </details>
 
 <p class="warning">
diff --git a/src/lib/math.ts b/src/lib/math.ts
index 60a9991..f9ccdd2 100644
--- a/src/lib/math.ts
+++ b/src/lib/math.ts
@@ -5,7 +5,7 @@ export function norm(vec: NdVector): number {
   return Math.sqrt(vec.reduce((acc, val) => acc + val ** 2, 0))
 }
 
-export function scale(vec: NdVector, factor: number): NdVector {
+export function scale<T extends Vector>(vec: T, factor: number): T {
   return vec.map((val) => val * factor)
 }
 
@@ -13,7 +13,7 @@ export function euclidean_dist(vec1: Vector, vec2: Vector): number {
   return norm(add(vec1, scale(vec2, -1)))
 }
 
-export function add(...vecs: NdVector[]): NdVector {
+export function add<T extends Vector>(...vecs: T[]): T {
   // add up any number of same-length vectors
   const result = vecs[0].slice()
   for (const vec of vecs.slice(1)) {
diff --git a/src/lib/structure/Bond.svelte b/src/lib/structure/Bond.svelte
index c62bee5..c4044e6 100644
--- a/src/lib/structure/Bond.svelte
+++ b/src/lib/structure/Bond.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
+  import type { Vector } from '$lib'
   import { Instance } from '@threlte/extras'
   import { Euler, Quaternion, Vector3 } from 'three'
 
-  export let from: [number, number, number]
-  export let to: [number, number, number]
+  export let from: Vector = [0, 0, 0]
+  export let to: Vector
   export let offset: number = 0
   export let radius: number = 0.1
   export let color: string = `white`
@@ -19,7 +20,7 @@
     // length of the bond
     const height = delta_vec.length()
     // calculate position
-    let position: [number, number, number]
+    let position: Vector
     if (offset === 0) {
       position = from_vec.clone().add(delta_vec.multiplyScalar(0.5)).toArray()
     } else {
diff --git a/src/lib/structure/Lattice.svelte b/src/lib/structure/Lattice.svelte
index 3f50945..d1b7a33 100644
--- a/src/lib/structure/Lattice.svelte
+++ b/src/lib/structure/Lattice.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
-  import { add, type Vector } from '$lib'
+  import { add, scale, type Vector } from '$lib'
   import { T } from '@threlte/core'
-  import { BufferGeometry, Vector3 } from 'three'
+  import { InstancedMesh } from '@threlte/extras'
+  import { BoxGeometry, Matrix4, Vector3 } from 'three'
+  import Bond from './Bond.svelte'
 
   export let matrix: [Vector, Vector, Vector]
   export let show_cell: 'surface' | 'wireframe' | null = `wireframe`
@@ -19,57 +21,44 @@
   // lattice vector origin (all arrows start from this point)
   export let vector_origin: Vector = [-1, -1, -1]
 
-  $: [vec_a, vec_b, vec_c] = matrix
-
-  const origin = [0, 0, 0]
-
-  $: points = [
-    origin,
-    add(origin, vec_a),
-    origin,
-    add(origin, vec_b),
-    origin,
-    add(origin, vec_c),
-    add(origin, vec_a),
-    add(origin, vec_a, vec_b),
-    add(origin, vec_a),
-    add(origin, vec_a, vec_c),
-    add(origin, vec_b),
-    add(origin, vec_b, vec_a),
-    add(origin, vec_b),
-    add(origin, vec_b, vec_c),
-    add(origin, vec_c),
-    add(origin, vec_c, vec_a),
-    add(origin, vec_c),
-    add(origin, vec_c, vec_b),
-    add(origin, vec_a, vec_b),
-    add(origin, vec_a, vec_b, vec_c),
-    add(origin, vec_a, vec_c),
-    add(origin, vec_a, vec_b, vec_c),
-    add(origin, vec_b, vec_c),
-    add(origin, vec_a, vec_b, vec_c),
-  ]
+  $: geometry = new BoxGeometry(1, 1, 1)
+  $: shear_matrix = new Matrix4().makeBasis(
+    ...matrix.map((vec) => new Vector3(...vec, 0))
+  )
+  $: geometry.applyMatrix4(shear_matrix)
+  $: lattice_center = scale(add(...matrix), 0.5)
 </script>
 
 {#if show_cell}
-  <T.LineSegments
-    geometry={new BufferGeometry().setFromPoints(points.map((p) => new Vector3(...p)))}
-  >
-    <T.LineBasicMaterial
+  <T.Mesh {geometry} position={lattice_center}>
+    <T.MeshBasicMaterial
       color={cell_color}
       opacity={cell_opacity}
-      linewidth={cell_line_width}
+      transparent={cell_opacity !== undefined}
+      wireframe={show_cell === `wireframe`}
+      line_width={cell_line_width}
     />
-  </T.LineSegments>
+  </T.Mesh>
 {/if}
 
 {#if show_vectors}
-  {#each matrix as vec, idx}
-    {@const [x, y, z] = vec ?? []}
-    <T.Group position={vector_origin}>
-      <T.ArrowHelper
-        args={[{ x, y, z }, { x: 0, y: 0, z: 0 }, 6, vector_colors[idx], 1, 1, 1]}
-      />
-    </T.Group>
-  {/each}
+  <T.Group position={vector_origin}>
+    <InstancedMesh>
+      <T.CylinderGeometry args={[0.1, 0.1, 1, 16]} />
+
+      <T.MeshStandardMaterial />
+      {#each matrix as vec, idx}
+        <Bond to={scale(vec, 0.5)} color={vector_colors[idx]} />
+      {/each}
+    </InstancedMesh>
+    <InstancedMesh>
+      <T.MeshStandardMaterial />
+      <!-- [thickness, length, radial segments] -->
+      <T.ConeGeometry args={[0.25, 0.12, 16]} />
+
+      {#each matrix as vec, idx}
+        <Bond to={vec} color={vector_colors[idx]} />
+      {/each}
+    </InstancedMesh>
+  </T.Group>
 {/if}
diff --git a/src/lib/structure/Structure.svelte b/src/lib/structure/Structure.svelte
index 9b5ad43..c0b65fe 100644
--- a/src/lib/structure/Structure.svelte
+++ b/src/lib/structure/Structure.svelte
@@ -1,16 +1,17 @@
 <script lang="ts">
-  import { element_color_schemes } from '$lib/colors'
-  import { element_colors } from '$lib/stores'
-  import { Canvas } from '@threlte/core'
-  import { Tooltip } from 'svelte-zoo'
-  import type { ElementSymbol } from '..'
-  import { download } from '../api'
-  import type { PymatgenStructure } from '../structure'
+  import type { ElementSymbol, PymatgenStructure, Vector } from '$lib'
   import {
+    add,
     alphabetical_formula,
     get_elem_amounts,
+    scale,
     symmetrize_structure,
-  } from '../structure'
+  } from '$lib'
+  import { download } from '$lib/api'
+  import { element_color_schemes } from '$lib/colors'
+  import { element_colors } from '$lib/stores'
+  import { Canvas } from '@threlte/core'
+  import { Tooltip } from 'svelte-zoo'
   import StructureLegend from './StructureLegend.svelte'
   import StructureScene from './StructureScene.svelte'
 
@@ -22,7 +23,7 @@
   // determined by the atomic radius of the element
   export let same_size_atoms: boolean = true
   // initial camera position from which to render the scene
-  export let camera_position: [number, number, number] = [10, 10, 10]
+  export let camera_position: Vector = [10, 10, 10]
   // zoom level of the camera
   export let initial_zoom: number | undefined = undefined
   // auto rotate speed. set to 0 to disable auto rotation.
@@ -44,7 +45,7 @@
   export let show_bonds: boolean = true
   export let bond_radius: number | undefined = undefined
   export let show_cell: 'surface' | 'wireframe' | null = `wireframe`
-  export let cell_opacity: number | undefined = 0.15
+  export let cell_opacity: number | undefined = 0.5
   export let cell_line_width: number = 1
   export let wrapper: HTMLDivElement | undefined = undefined
   // the control panel DOM element
@@ -84,11 +85,11 @@
     }
   }
 
-  $: ({ a, b, c } = structure?.lattice ?? { a: 0, b: 0, c: 0 })
   $: {
     // set camera position based on structure size
-    const scale = initial_zoom ?? 1000 / Math.min(width, height)
-    camera_position = [scale * a, scale * b, scale * c]
+    const factor = initial_zoom ?? 700 / Math.min(width, height)
+    const [vec_a, vec_b, vec_c] = structure?.lattice?.matrix ?? [[], [], []]
+    camera_position = scale(add(vec_a, vec_b, vec_c), factor)
   }
   const on_window_click =
     (node: (HTMLElement | null)[], cb: () => void) => (event: MouseEvent) => {
@@ -303,16 +304,13 @@
         <button type="button" on:click={download_json} title={save_json_btn_text}>
           {save_json_btn_text}
         </button>
-        <button type=button on:click={download_png} title={save_png_btn_text}>
+        <button type="button" on:click={download_png} title={save_png_btn_text}>
           {save_png_btn_text}
         </button>
       </span>
-
     </dialog>
 
-    <Canvas rendererParameters={{
-      preserveDrawingBuffer: true
-    }}>
+    <Canvas rendererParameters={{ preserveDrawingBuffer: true }}>
       <StructureScene
         structure={show_image_atoms ? symmetrize_structure(structure) : structure}
         {show_atoms}
diff --git a/src/lib/structure/StructureScene.svelte b/src/lib/structure/StructureScene.svelte
index 5901918..d18c142 100644
--- a/src/lib/structure/StructureScene.svelte
+++ b/src/lib/structure/StructureScene.svelte
@@ -19,7 +19,7 @@
   // determined by the atomic radius of the element
   export let same_size_atoms: boolean = true
   // initial camera position from which to render the scene
-  export let camera_position: [number, number, number] = [10, 10, 10]
+  export let camera_position: Vector = [10, 10, 10]
   // zoom level of the camera
   export let orbit_controls: OrbitControls | undefined = undefined
   export let max_zoom: number | undefined = undefined
@@ -117,6 +117,17 @@
       />
     {/each}
   </InstancedMesh>
+  <!-- TODO find a performant way of rendering labels for each site -->
+  <!-- {#each structure.sites as site, idx}
+    {@const { species, xyz } = site}
+    {@const elem = species[0].element}
+
+    {#if $$slots[`atom-label`]}
+      <HTML center as="div">
+        <slot name="atom-label" {elem} {xyz} {species} />
+      </HTML>
+    {/if}
+  {/each} -->
 {/if}
 
 {#if show_bonds}
diff --git a/src/lib/structure/index.ts b/src/lib/structure/index.ts
index 8adc437..531fa8f 100644
--- a/src/lib/structure/index.ts
+++ b/src/lib/structure/index.ts
@@ -1,6 +1,6 @@
 // Utilities for dealing with pymatgen Structures
 import type { ElementSymbol, Vector } from '$lib'
-import { pretty_num } from '$lib'
+import { add, pretty_num, scale } from '$lib'
 import element_data from '$lib/element/data'
 
 export { default as Bond } from './Bond.svelte'
@@ -110,47 +110,47 @@ function generate_permutations(length: number): number[][] {
   return result
 }
 
+// this function finds all atoms needed to make the unit cell symmetrically occupied
 export function find_image_atoms(
   structure: PymatgenStructure,
   { tolerance = 0.05 }: { tolerance?: number } = {},
   // fractional tolerance for determining if a site is at the edge of the unit cell
-): Array<[number, Vector]> {
+): [number, Vector][] {
   const edge_sites: Array<[number, Vector]> = []
   const permutations = generate_permutations(3)
+  const lattice_vecs = structure.lattice.matrix
 
-  structure.sites.forEach((site, idx) => {
+  for (const [idx, site] of structure.sites.entries()) {
     const abc = site.abc
-    const xyz = site.xyz
-
-    edge_sites.push([idx, xyz])
+    edge_sites.push([idx, site.xyz])
 
     // Check if the site is at the edge and determine its image
     const edges: number[] = [0, 1, 2].filter(
       (i) => Math.abs(abc[i]) < tolerance || Math.abs(abc[i] - 1) < tolerance,
     )
 
-    const { a, b, c } = structure.lattice
     if (edges.length > 0) {
       for (const perm of permutations) {
-        const img_xyz: Vector = xyz.slice()
-        for (const [idx, edge] of edges.entries()) {
-          if (perm[idx] === 1) {
+        let img_xyz: Vector = [...site.xyz] // Make a copy of the array
+        for (const edge of edges) {
+          if (perm[edge] === 1) {
             // Image atom at the opposite edge
             if (Math.abs(abc[edge]) < tolerance) {
-              img_xyz[edge] += edge === 0 ? a : edge === 1 ? b : c
+              img_xyz = add(img_xyz, lattice_vecs[edge])
             } else {
-              img_xyz[edge] -= edge === 0 ? a : edge === 1 ? b : c
+              img_xyz = add(img_xyz, scale(lattice_vecs[edge], -1))
             }
           }
         }
         edge_sites.push([idx, img_xyz])
       }
     }
-  })
+  }
 
   return edge_sites
 }
 
+// this function takes a pymatgen Structure and returns a new one with all the image atoms added
 export function symmetrize_structure(
   ...args: Parameters<typeof find_image_atoms>
 ): PymatgenStructure {
diff --git a/src/routes/(demos)/periodic-table/+page.svelte b/src/routes/(demos)/periodic-table/+page.svelte
index c6660e0..dbe91cc 100644
--- a/src/routes/(demos)/periodic-table/+page.svelte
+++ b/src/routes/(demos)/periodic-table/+page.svelte
@@ -8,7 +8,7 @@
     PeriodicTable,
     PropertySelect,
     TableInset,
-    element_data
+    element_data,
   } from '$lib'
   import { property_labels } from '$lib/labels'
   import { active_category, active_element, last_element } from '$lib/stores'
@@ -29,7 +29,6 @@
 
 <svelte:window bind:innerWidth={window_width} />
 
-
 <form>
   <PropertySelect empty id="heatmap-select" bind:key={heatmap_key} />
   {#if heatmap_key}
@@ -41,7 +40,6 @@
   {/if}
 </form>
 
-
 <PeriodicTable
   tile_props={{ show_name: window_width > 1000 }}
   {heatmap_values}
diff --git a/src/routes/api/+page.svelte b/src/routes/api/+page.svelte
index 48ba4b8..f65aab3 100644
--- a/src/routes/api/+page.svelte
+++ b/src/routes/api/+page.svelte
@@ -51,7 +51,7 @@
       }}
     >
       <summary>
-        <h3>{idx+1}. <code>{bucket_name}</code> bucket</h3>
+        <h3>{idx + 1}. <code>{bucket_name}</code> bucket</h3>
       </summary>
       <details open>
         <summary><h4>Top-level keys</h4> </summary>
diff --git a/src/routes/mp-[slug]/+page.svelte b/src/routes/mp-[slug]/+page.svelte
index 261d4f0..05f7935 100644
--- a/src/routes/mp-[slug]/+page.svelte
+++ b/src/routes/mp-[slug]/+page.svelte
@@ -56,7 +56,7 @@
       </div>
     </span>
   </center>
-  <Structure structure={data.summary.structure}  />
+  <Structure structure={data.summary.structure} />
 
   <MaterialCard material={data.summary} />
 
@@ -64,18 +64,27 @@
     <a slot="title" {href}>{mp_id}</a>
   </StructureCard>
 
-  <h3>Crystal description <small>(generated by <a href="https://github.com/hackingmaterials/robocrystallographer">Robocrystallographer</a>)</small></h3>
+  <h3>
+    Crystal description
+    <small>
+      (generated by <a href="https://github.com/hackingmaterials/robocrystallographer"
+        >Robocrystallographer
+      </a>)
+    </small>
+  </h3>
   <p>{data.robocrys.description}</p>
 
   <h2>Similar structures</h2>
   <ol class="similar-structures">
-    {#each data?.similarity?.sim?.slice(0, 6) ?? [] as {task_id, dissimilarity, formula}}
-    <li>
-      <strong><a href="https://materialsproject.org/tasks/{task_id}">{task_id}</a></strong><span>{formula}</span>
-      <br>
-    <small>dissimilarity: {pretty_num(dissimilarity)}</small>
-    </li>
-      {:else}
+    {#each data?.similarity?.sim?.slice(0, 6) ?? [] as { task_id, dissimilarity, formula }}
+      <li>
+        <strong>
+          <a href="https://materialsproject.org/tasks/{task_id}">{task_id}</a>
+        </strong><span>{formula}</span>
+        <br />
+        <small>dissimilarity: {pretty_num(dissimilarity)}</small>
+      </li>
+    {:else}
       <li>No similar structures found</li>
     {/each}
   </ol>