Structure

  <script>
  import { Structure } from 'matterviz'
  import Select from 'svelte-multiselect'
  import { FilePicker } from '$site'
  import { structure_files } from '$site/structures'
  import { molecule_files } from '$site/molecules'
  import { get_electro_neg_formula } from '$lib'

  let current_filename = $state(`Bi2Zr2O8-Fm3m.json`)
</script>

<Structure
  data_url="/structures/{current_filename}"
  on_file_load={(data) => current_filename = data.filename}
>
  <h3 style="position: absolute; margin: 1ex 1em; font-family: monospace; z-index: 1">
    {current_filename}
  </h3>
</Structure>

<FilePicker
  files={[...structure_files, ...molecule_files]}
  show_category_filters
  category_labels={{ '🔷': `🔷 Crystal`, '🧬': `🧬 Molecule`, '❓': `❓ Unknown` }}
  style="margin-block: 2em"
/>

• mp-10018

  Crystal System cubic

  Ac ₁

• mp-1183085

  Crystal System orthorhombic

  Ac ₄ Mg ₂

• mp-1183089

  Crystal System monoclinic

  Ac ₄ Mg ₂

• mp-1207297

  Crystal System tetragonal

  Ac ₂ Br ₂ O ₁

• mp-686119

  Crystal System triclinic

  Ag ₁₃ Bi ₁₄ I ₅₆

• mp-862690

  Crystal System hexagonal

  Ac ₄

  <script>
  import { crystal_systems, Structure } from 'matterviz'
  import { structures } from '$site/structures'
</script>

<ul class="crystal-systems">
  {#each structures.filter((struct) =>
      crystal_systems.some((system) => struct.id.includes(system))
    ) as
    structure
  }
    {@const mp_id = structure.id.split(`-`).slice(0, 2).join(`-`)}
    {@const href = `https://materialsproject.org/materials/${mp_id}`}
    {@const crystal_system = structure.id.split(`-`).at(-1) || 'unknown'}
    <li>
      <h3><a {href}>{mp_id}</a></h3>
      <p class="crystal-system">Crystal System <strong>{crystal_system}</strong></p>
      <Structure {structure} />
    </li>
  {/each}
</ul>