From 072d57ab91b495eb8b68d1f1b04efa3468284dc8 Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Fri, 21 Apr 2023 20:44:07 -0700
Subject: [PATCH] add option to show cell as surface, wireframe or not at all,
 add range slider for cell opacity

close structure control panel on click outside
fix build + drop non-functional structure tooltip
---
 src/lib/ScatterPlot.svelte            |   1 -
 src/lib/Structure.svelte              | 110 +++++++++++++-------------
 src/lib/StructureCard.svelte          |   7 ++
 src/routes/(demos)/structure/+page.md |  10 +--
 src/site/DemoNav.svelte               |   1 +
 vite.config.ts                        |   4 +
 6 files changed, 71 insertions(+), 62 deletions(-)

diff --git a/src/lib/ScatterPlot.svelte b/src/lib/ScatterPlot.svelte
index 086cfea..5289fae 100644
--- a/src/lib/ScatterPlot.svelte
+++ b/src/lib/ScatterPlot.svelte
@@ -58,7 +58,6 @@
     hovered = true
 
     // returns point to right of our current mouse position
-
     let idx = bisect(data, x_scale.invert(event.offsetX))
 
     if (idx < data.length) {
diff --git a/src/lib/Structure.svelte b/src/lib/Structure.svelte
index e2d5ba7..78d1f33 100644
--- a/src/lib/Structure.svelte
+++ b/src/lib/Structure.svelte
@@ -17,6 +17,14 @@
   export let show_controls: boolean = false
   // TODO whether to make the canvas fill the whole screen
   // export let fullscreen: boolean = false
+  // whether to show the structure's lattice cell as a wireframe
+  export let show_cell: 'surface' | 'wireframe' | null = 'wireframe'
+  // the control panel DOM element
+  export let controls: HTMLElement | null = null
+  // the button to toggle the control panel
+  export let toggle_controls_btn: HTMLButtonElement | null = null
+  // cell opacity
+  export let cell_opacity: number | undefined = undefined
 
   function on_keydown(event: KeyboardEvent) {
     if (event.key === 'Escape') {
@@ -24,34 +32,34 @@
     }
   }
 
-  let tooltip = { visible: false, content: '', x: 0, y: 0 }
-
-  function on_mouse_enter(event, position, element) {
-    console.log(`event`, event)
-
-    const { clientX, clientY } = event.detail.event
-    tooltip.visible = true
-    tooltip.content = `${element} - (${position.join(', ')})`
-    tooltip.x = clientX
-    tooltip.y = clientY
-  }
-
-  function on_mouse_leave() {
-    tooltip.visible = false
-  }
+  $: ({ a, b, c } = structure.lattice)
 
-  const lattice = structure.lattice.matrix
+  const on_window_click =
+    (node: (HTMLElement | null)[], cb: () => void) => (event: MouseEvent) => {
+      if (!node || !event.target) return
 
-  $: ({ a, b, c } = structure.lattice)
+      if (node && !node.some((n) => n?.contains(event.target as Node))) {
+        cb()
+      }
+    }
 </script>
 
-<svelte:window on:keydown={on_keydown} />
+<svelte:window
+  on:keydown={on_keydown}
+  on:click={on_window_click([controls, toggle_controls_btn], () => {
+    if (show_controls) show_controls = false
+  })}
+/>
 
 <div>
-  <button class="controls-toggle" on:click={() => (show_controls = !show_controls)}>
+  <button
+    class="controls-toggle"
+    on:click={() => (show_controls = !show_controls)}
+    bind:this={toggle_controls_btn}
+  >
     {show_controls ? 'Hide' : 'Show'} controls
   </button>
-  <section class="controls" class:open={show_controls}>
+  <section bind:this={controls} class="controls" class:open={show_controls}>
     <label>
       Atom radius
       <input type="range" min="0.1" max="2" step="0.05" bind:value={atom_radius} />
@@ -60,17 +68,20 @@
       <input type="checkbox" bind:checked={same_size_atoms} />
       Scale atoms according to atomic radius (if false, all atoms have same size)
     </label>
+    <label>
+      Show lattice matrix as
+      <select bind:value={show_cell}>
+        <option value="surface">surface</option>
+        <option value="wireframe">wireframe</option>
+        <option value={null}>none</option>
+      </select>
+    </label>
+    <label>
+      Cell opacity
+      <input type="range" min="0" max="1" step="0.01" bind:value={cell_opacity} />
+    </label>
   </section>
 
-  <div
-    class="tooltip"
-    style="top: {tooltip.y}px; left: {tooltip.x}px; display: {tooltip.visible
-      ? 'block'
-      : 'none'};"
-  >
-    {tooltip.content}
-  </div>
-
   <Canvas>
     <T.PerspectiveCamera makeDefault position={camera_position} fov={zoom}>
       <OrbitControls enableZoom enablePan target={{ x: a / 2, y: b / 2, z: c / 2 }} />
@@ -80,15 +91,10 @@
     <T.DirectionalLight position={[-3, 10, -10]} intensity={0.2} />
     <T.AmbientLight intensity={0.2} />
 
-    {#each structure.sites as { xyz: position, species }}
+    {#each structure.sites as { xyz, species }}
       {@const symbol = species[0].element}
       {@const radius = (same_size_atoms ? 1 : atomic_radii[symbol]) * atom_radius}
-      <T.Mesh
-        {position}
-        interactive
-        on:pointerenter={(e) => on_mouse_enter(e, position, symbol)}
-        on:pointerleave={on_mouse_leave}
-      >
+      <T.Mesh position={xyz}>
         <T.SphereGeometry args={[radius, 20, 20]} />
         <T.MeshStandardMaterial
           color="rgb({atomic_colors[symbol].map((x) => Math.floor(x * 255)).join(',')})"
@@ -96,15 +102,16 @@
       </T.Mesh>
     {/each}
 
-    <!-- Render lattice as a cuboid of white lines -->
-    <T.Mesh position={[lattice[0][0] / 2, lattice[1][1] / 2, lattice[2][2] / 2]}>
-      <T.BoxGeometry args={[lattice[0][0], lattice[1][1], lattice[2][2]]} />
-      <T.MeshBasicMaterial transparent opacity={0.2} />
-      <T.LineSegments>
-        <T.EdgesGeometry />
-        <T.LineBasicMaterial color="white" />
-      </T.LineSegments>
-    </T.Mesh>
+    {#if show_cell}
+      <T.Mesh position={[a / 2, b / 2, c / 2]}>
+        <T.BoxGeometry args={[a, b, c]} />
+        <T.MeshBasicMaterial
+          transparent
+          opacity={cell_opacity ?? (show_cell === 'surface' ? 0.2 : 1)}
+          wireframe={show_cell === 'wireframe'}
+        />
+      </T.Mesh>
+    {/if}
   </Canvas>
 </div>
 
@@ -130,7 +137,7 @@
     top: 5pt;
     right: 5pt;
     background-color: rgba(255, 255, 255, 0.2);
-    padding: 2em 5pt 0;
+    padding: 2em 6pt 3pt;
     border-radius: 3pt;
     visibility: hidden;
     opacity: 0;
@@ -141,13 +148,10 @@
     visibility: visible;
     opacity: 1;
   }
-
-  .tooltip {
-    position: absolute;
-    background-color: rgba(0, 0, 0, 0.7);
+  select {
+    margin-left: 5pt;
     color: white;
-    padding: 5px;
-    border-radius: 5px;
-    pointer-events: none;
+    /* transparent */
+    background-color: rgba(255, 255, 255, 0.2);
   }
 </style>
diff --git a/src/lib/StructureCard.svelte b/src/lib/StructureCard.svelte
index 2bc679d..777e1a1 100644
--- a/src/lib/StructureCard.svelte
+++ b/src/lib/StructureCard.svelte
@@ -47,6 +47,12 @@
       {pretty_num(alpha)}°, {pretty_num(beta)}°, {pretty_num(gamma)}°
     </span>
   </strong>
+  {#if structure?.charge}
+    <strong>
+      Charge:
+      <span class="value">{pretty_num(structure?.charge)}</span>
+    </strong>
+  {/if}
 </div>
 
 <style>
@@ -55,6 +61,7 @@
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     border-radius: var(--sc-radius, 3pt);
     padding: var(--sc-padding, 1ex 1em);
+    margin: var(--sc-margin, 1em 0);
     gap: var(--sc-gap, 1ex 1em);
     background-color: var(--sc-bg, rgba(255, 255, 255, 0.1));
     font-size: var(--sc-font-size);
diff --git a/src/routes/(demos)/structure/+page.md b/src/routes/(demos)/structure/+page.md
index e0523d8..7a4298a 100644
--- a/src/routes/(demos)/structure/+page.md
+++ b/src/routes/(demos)/structure/+page.md
@@ -6,23 +6,17 @@
 
 ```svelte example stackblitz code_above
 <script>
-  import { Structure, StructureCard, alphabetical_formula } from '$lib'
+  import { Structure, StructureCard } from '$lib'
   import structure from './mp-1234.json'
 
   const mp_id = 'mp-1234'
   const href = `https://materialsproject.org/materials/${mp_id}`
 </script>
 
-<StructureCard {structure} --sc-padding="1ex 1em 2em">
+<StructureCard {structure}>
   <a slot="title" {href}>{mp_id}</a>
 </StructureCard>
 <Structure {structure} />
-
-<style>
-  h2 {
-    text-align: center;
-  }
-</style>
 ```
 
 <details>
diff --git a/src/site/DemoNav.svelte b/src/site/DemoNav.svelte
index f91e4be..0b88d6a 100644
--- a/src/site/DemoNav.svelte
+++ b/src/site/DemoNav.svelte
@@ -25,6 +25,7 @@
     margin: 1em auto 3em;
     max-width: 45em;
     flex-wrap: wrap;
+    font-size: 14pt;
   }
   nav > a {
     padding: 0 4pt;
diff --git a/vite.config.ts b/vite.config.ts
index 87fac59..749b8ed 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -26,6 +26,10 @@ export default {
     port: 3000,
   },
 
+  ssr: {
+    noExternal: [`three`],
+  },
+
   preview: {
     port: 3000,
   },