Structure add prop show_image_atoms, expand MaterialCard to show more…

… attrs, mp-[slug] pages sync material ID with url
janosh · Jul 7, 2023 · f43dd31 · f43dd31
1 parent 0517186
commit f43dd31
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 49 deletions.
diff --git a/src/lib/InfoCard.svelte b/src/lib/InfoCard.svelte
@@ -6,6 +6,8 @@
     value: string | number | number[]
     unit?: string
     fmt?: string
+    condition?: boolean
+    tooltip?: string
   }[] = []
   export let title: string = ``
   export let fallback: string = ``
@@ -24,14 +26,16 @@
       </slot>
     </h2>
   {/if}
-  {#each data as { title, value, unit, fmt = default_fmt }}
+  {#each data as { title, value, unit, fmt = default_fmt, tooltip }}
     <div>
       <span class="title" {title}>
         {@html title}
       </span>
-      <strong>
+      <strong title={tooltip ?? null}>
         {@html typeof value == `number` ? pretty_num(value, fmt) : value}
-        {unit ?? ``}
+        {#if unit}
+          <small>{unit}</small>
+        {/if}
       </strong>
     </div>
   {:else}
@@ -77,4 +81,7 @@
     padding: var(--ic-value-padding, 0 4pt);
     border-radius: var(--ic-value-radius, 3pt);
   }
+  strong small {
+    font-weight: normal;
+  }
 </style>
diff --git a/src/lib/material/MaterialCard.svelte b/src/lib/material/MaterialCard.svelte
@@ -3,14 +3,19 @@
   import type { SummaryDoc } from '$lib/material'
 
   export let material: SummaryDoc
-</script>
 
-<InfoCard
-  data={[
-    { title: `Band Gap`, value: material.band_gap, unit: `eV` },
+  $: data = [
+    {
+      title: `Band Gap`,
+      value: material.band_gap,
+      unit: `eV`,
+      tooltip:
+        material.vbm && material.cbm ? `VBM: ${material.vbm}, CBM: ${material.cbm}` : ``,
+    },
     {
       title: `Space Group`,
-      value: `${material.symmetry.number} (${material.symmetry.symbol})`,
+      value: `${material.symmetry.number}`,
+      unit: `(${material.symmetry.symbol})`,
     },
     {
       title: `E<sub>above hull</sub>`,
@@ -24,6 +29,46 @@
     },
     { title: `Experimentally Observed`, value: material.theoretical ? `No` : `Yes` },
     { title: `Total Energy`, value: material.energy_per_atom, unit: `eV/atom` },
-  ]}
-  {...$$restProps}
-/>
+    {
+      title: `Uncorrected Energy`,
+      value: material.uncorrected_energy_per_atom,
+      unit: `eV/atom`,
+      condition: material.uncorrected_energy_per_atom != material.energy_per_atom,
+    },
+    {
+      title: `Last updated`,
+      value: material.last_updated.$date.split(`T`)[0],
+    },
+    {
+      title: `Origins`,
+      value: material.origins,
+      condition: material.origins?.length,
+    },
+    {
+      title: `Database IDs`,
+      value: material.database_IDs.icsd,
+      condition: material.database_IDs?.icsd?.length,
+    },
+  ].filter((itm) => itm?.condition ?? true)
+</script>
+
+<InfoCard {data} {...$$restProps} />
+
+{#if material.task_ids?.length}
+  <p>
+    Task IDs: {@html material.task_ids
+      .filter((id) => id != material.material_id)
+      .map((id) => `<a href="https://materialsproject.org/tasks/${id}">${id}</a>`)
+      .join(`, `)}
+  </p>
+{/if}
+
+<p class="warning">
+  {material.warnings}
+</p>
+
+<style>
+  .warning {
+    color: var(--warning-color, darkred);
+  }
+</style>
diff --git a/src/lib/structure/Structure.svelte b/src/lib/structure/Structure.svelte
@@ -73,6 +73,7 @@
   export let bond_color_mode: 'single' | 'split-midpoint' | 'gradient' = `single`
   export let bond_color: string = `#ffffff` // must be hex code for <input type='color'>
   export let style: string | null = null
+  export let show_image_atoms: boolean = true
 
   // interactivity()
   $: $element_colors = element_color_schemes[color_scheme]
@@ -187,6 +188,14 @@
           <input type="checkbox" bind:checked={show_vectors} />
           lattice vectors
         </label>
+        <label>
+          <input type="checkbox" bind:checked={show_cell} />
+          unit cell
+        </label>
+        <label>
+          <input type="checkbox" bind:checked={show_image_atoms} />
+          image atoms
+        </label>
       </div>
       <label>
         Show unit cell as
@@ -292,7 +301,7 @@
 
     <Canvas>
       <StructureScene
-        structure={symmetrize_structure(structure)}
+        structure={show_image_atoms ? symmetrize_structure(structure) : structure}
         {show_atoms}
         {show_bonds}
         {show_cell}
@@ -395,7 +404,7 @@
   dialog.controls label {
     display: flex;
     align-items: center;
-    gap: var(--struct-controls-label-gap, 4pt);
+    gap: var(--struct-controls-label-gap, 2pt);
   }
   dialog.controls input[type='range'] {
     margin-left: auto;

diff --git a/src/lib/structure/StructureCard.svelte b/src/lib/structure/StructureCard.svelte
@@ -11,7 +11,7 @@
 <InfoCard
   data={[
     { title: `Formula`, value: alphabetical_formula(structure) },
-    { title: `Number of atoms`, value: structure?.sites.length },
+    { title: `Number of atoms`, value: structure?.sites.length, fmt: `.0f` },
     { title: `Volume`, value: volume, unit: `Å³` },
     { title: `Density`, value: density(structure), unit: `g/cm³` },
     {

diff --git a/src/lib/structure/StructureScene.svelte b/src/lib/structure/StructureScene.svelte
@@ -72,7 +72,7 @@
 
   // naive max dist bond strategy
   let bond_pairs: [Vector, Vector][] = []
-  $: if (structure?.sites) {
+  $: if (structure?.sites && show_bonds) {
     bond_pairs = []
     for (const { xyz } of structure.sites) {
       for (const { xyz: other_xyz } of structure.sites) {

diff --git a/src/routes/mp-[slug]/+page.svelte b/src/routes/mp-[slug]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { goto } from '$app/navigation'
   import { page } from '$app/stores'
   import { MaterialCard, Structure, StructureCard } from '$lib'
   import { aws_bucket, download, fetch_zipped } from '$lib/api'
@@ -11,45 +12,55 @@
 </script>
 
 <main>
-  <h1>Materials Explorer</h1>
+  <center>
+    <h1>Materials Explorer</h1>
 
-  <input
-    placeholder="Enter MP material ID"
-    bind:value={mp_id}
-    on:keydown={async (event) => {
-      if (event.key === `Enter`) data.summary = await fetch_zipped(aws_url)
-    }}
-  />
-  <button on:click={async () => (data.summary = await fetch_zipped(aws_url))}>
-    Fetch material
-  </button>
-  <span class="download">
-    <button>Save material summary</button>
-    <div>
-      <button
-        on:click={() => {
-          if (!data.summary) return alert(`No data to download`)
-          download(
-            JSON.stringify(data.summary, null, 2),
-            `${mp_id}.json`,
-            `application/json`
-          )
-        }}>JSON</button
-      >
-      <button
-        on:click={async () => {
-          const blob = await fetch_zipped(aws_url, { unzip: false })
-          if (!blob) return
-          download(blob, `${mp_id}.json.gz`, `application/gzip`)
-        }}>Zipped JSON</button
-      >
-    </div>
-  </span>
+    <input
+      placeholder="Enter MP material ID"
+      bind:value={mp_id}
+      on:keydown={async (event) => {
+        if (event.key === `Enter`) {
+          goto(`/${mp_id}`)
+          data.summary = await fetch_zipped(aws_url)
+        }
+      }}
+    />
+    <button
+      on:click={async () => {
+        goto(`/${mp_id}`)
+        data.summary = await fetch_zipped(aws_url)
+      }}
+    >
+      Fetch material
+    </button>
+    <span class="download">
+      <button>Save material summary</button>
+      <div>
+        <button
+          on:click={() => {
+            if (!data.summary) return alert(`No data to download`)
+            download(
+              JSON.stringify(data.summary, null, 2),
+              `${mp_id}.json`,
+              `application/json`
+            )
+          }}>JSON</button
+        >
+        <button
+          on:click={async () => {
+            const blob = await fetch_zipped(aws_url, { unzip: false })
+            if (!blob) return
+            download(blob, `${mp_id}.json.gz`, `application/gzip`)
+          }}>Zipped JSON</button
+        >
+      </div>
+    </span>
+  </center>
   <MaterialCard material={data.summary} />
   <StructureCard structure={data.summary.structure}>
     <a slot="title" {href}>{mp_id}</a>
   </StructureCard>
-  <Structure structure={data.summary.structure} />
+  <Structure structure={data.summary.structure} show_image_atoms={false} />
 </main>
 
 <style>