matterviz 0.4.1 → 0.4.3

package/dist/structure/StructureControls.svelte.d.ts

@@ -28,6 +28,6 @@ type $$ComponentProps = Omit<ComponentProps<typeof DraggablePane>, `children`> &
     pane_props?: PaneProps;
     toggle_props?: PaneToggleProps;
 };
-declare const StructureControls: import("svelte").Component<$$ComponentProps, {}, "color_scheme" | "controls_open" | "background_color" | "background_opacity" | "atom_color_config" | "supercell_scaling" | "cell_type" | "active_volume_idx" | "scene_props" | "lattice_props" | "show_image_atoms" | "supercell_loading" | "volumetric_data" | "isosurface_settings">;
+declare const StructureControls: import("svelte").Component<$$ComponentProps, {}, "color_scheme" | "controls_open" | "active_volume_idx" | "background_color" | "background_opacity" | "show_image_atoms" | "lattice_props" | "atom_color_config" | "volumetric_data" | "isosurface_settings" | "scene_props" | "supercell_scaling" | "cell_type" | "supercell_loading">;
 type StructureControls = ReturnType<typeof StructureControls>;
 export default StructureControls;

package/dist/structure/StructureExportPane.svelte

@@ -34,26 +34,22 @@
     {
       label: `JSON`,
       format: `json`,
-      hint:
-        `<a href="https://pymatgen.org" target="_blank">Pymatgen</a> JSON format - Python Materials Genomics structure serialization, widely used in computational materials science`,
+      hint: `<a href="https://pymatgen.org" target="_blank">Pymatgen</a> JSON format - Python Materials Genomics structure serialization, widely used in computational materials science`,
     },
     {
       label: `XYZ`,
       format: `xyz`,
-      hint:
-        `<a href="https://wiki.fysik.dtu.dk/ase" target="_blank">ASE</a> extended XYZ format - human-readable atomic coordinates used by the Atomic Simulation Environment`,
+      hint: `<a href="https://wiki.fysik.dtu.dk/ase" target="_blank">ASE</a> extended XYZ format - human-readable atomic coordinates used by the Atomic Simulation Environment`,
     },
     {
       label: `CIF`,
       format: `cif`,
-      hint:
-        `Crystallographic Information File - standard format from the <a href="https://iucr.org" target="_blank">IUCr</a> for crystal structure data exchange`,
+      hint: `Crystallographic Information File - standard format from the <a href="https://iucr.org" target="_blank">IUCr</a> for crystal structure data exchange`,
     },
     {
       label: `POSCAR`,
       format: `poscar`,
-      hint:
-        `<a href="https://vasp.at" target="_blank">VASP</a> POSCAR format - input geometry file for the Vienna Ab initio Simulation Package`,
+      hint: `<a href="https://vasp.at" target="_blank">VASP</a> POSCAR format - input geometry file for the Vienna Ab initio Simulation Package`,
     },
   ] as const
 
@@ -61,14 +57,12 @@
     {
       label: `GLB`,
       format: `glb`,
-      hint:
-        `Export as GLB (binary GLTF) - preserves element colors and materials, ideal for visualization in Blender, Unity, web viewers`,
+      hint: `Export as GLB (binary GLTF) - preserves element colors and materials, ideal for visualization in Blender, Unity, web viewers`,
     },
     {
       label: `OBJ`,
       format: `obj`,
-      hint:
-        `Export as OBJ (Wavefront Object) - widely supported 3D format with material references, works in most 3D applications`,
+      hint: `Export as OBJ (Wavefront Object) - widely supported 3D format with material references, works in most 3D applications`,
     },
   ] as const
 
@@ -113,16 +107,18 @@
     },
     {
       title: `Export as image`,
-      items: [{
-        label: `PNG`,
-        disabled: !has_canvas,
-        show_dpi: true,
-        on_download: () => {
-          const canvas = wrapper?.querySelector(`canvas`)
-          if (canvas) export_canvas_as_png(canvas, structure, png_dpi, scene, camera)
-          else console.warn(`Canvas element not found for PNG export`)
+      items: [
+        {
+          label: `PNG`,
+          disabled: !has_canvas,
+          show_dpi: true,
+          on_download: () => {
+            const canvas = wrapper?.querySelector(`canvas`)
+            if (canvas) export_canvas_as_png(canvas, structure, png_dpi, scene, camera)
+            else console.warn(`Canvas element not found for PNG export`)
+          },
         },
-      }],
+      ],
     },
     {
       title: `Export as 3D model`,

package/dist/structure/StructureInfoPane.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
   import type { PaneProps, PaneToggleProps } from '../overlays'
   import { get_electro_neg_formula } from '../composition'
-  import { element_data, type ElementSymbol } from '../element'
+  import { element_by_symbol, type ElementSymbol } from '../element'
   import Icon from '../Icon.svelte'
   import { format_num } from '../labels'
   import type { InfoItem } from '../layout'
   import type { Vec2 } from '../math'
-  import CopyButton from '../overlays/CopyButton.svelte'
   import DraggablePane from '../overlays/DraggablePane.svelte'
   import { sanitize_html } from '../sanitize'
   import { colors } from '../state.svelte'
@@ -16,7 +15,7 @@
   import type { MoyoDataset } from '@spglib/moyo-wasm'
   import type { ComponentProps } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
-  import { SvelteSet } from 'svelte/reactivity'
+  import { create_clipboard_feedback } from '../overlays'
 
   type SiteDetail = {
     label: string
@@ -41,8 +40,7 @@
     },
     {
       label: `Atom Selection`,
-      value:
-        `Click atoms to select them, then pick distance or angle mode to measure all pairwise distances/angles`,
+      value: `Click atoms to select them, then pick distance or angle mode to measure all pairwise distances/angles`,
     },
     {
       label: `Navigation`,
@@ -54,8 +52,7 @@
     },
     {
       label: `Colors`,
-      value:
-        `Click legend labels to change colors, double-click to reset, right-click to remap elements`,
+      value: `Click legend labels to change colors, double-click to reset, right-click to remap elements`,
     },
     {
       label: `Keyboard`,
@@ -86,31 +83,14 @@
     sym_data?: MoyoDataset | null // Symmetry analysis data (bindable for external access)
   } = $props()
 
-  let copied_items = new SvelteSet<string>()
+  const { copied, copy } = create_clipboard_feedback()
   let sites_expanded = $state(false)
   let site_filter = $state(``)
   let site_window_start = $state(0)
   let site_cards_el = $state<HTMLDivElement>()
 
-  async function copy_to_clipboard(label: string, value: string, key: string) {
-    try {
-      await navigator.clipboard.writeText(`${label}: ${value}`)
-      copied_items.add(key)
-      setTimeout(() => copied_items.delete(key), 1000)
-    } catch (error) {
-      console.error(`Failed to copy to clipboard:`, error)
-    }
-  }
-
-  function copy_event(
-    event: MouseEvent,
-    label: string,
-    value: string,
-    key: string,
-  ) {
-    event.stopPropagation()
-    copy_to_clipboard(label, value, key)
-  }
+  const copy_to_clipboard = (label: string, value: string, key: string): Promise<void> =>
+    copy(`${label}: ${value}`, key)
 
   function copy_info_item(item: InfoItem) {
     copy_to_clipboard(item.label, String(item.value), item.key ?? item.label)
@@ -128,9 +108,8 @@
         : [...selected_sites, site_idx]
       return
     }
-    selected_sites = selected_sites.length === 1 && selected_sites[0] === site_idx
-      ? []
-      : [site_idx]
+    selected_sites =
+      selected_sites.length === 1 && selected_sites[0] === site_idx ? [] : [site_idx]
   }
 
   function update_site_filter(event: Event): void {
@@ -161,40 +140,45 @@
       current_card.parentElement?.querySelectorAll<HTMLDivElement>(`.site-card`) ?? [],
     )
     const current_idx = sibling_cards.indexOf(current_card)
-    const next_idx = event.key === `ArrowDown`
-      ? Math.min(current_idx + 1, sibling_cards.length - 1)
-      : Math.max(current_idx - 1, 0)
+    const next_idx =
+      event.key === `ArrowDown`
+        ? Math.min(current_idx + 1, sibling_cards.length - 1)
+        : Math.max(current_idx - 1, 0)
     sibling_cards[next_idx]?.focus()
   }
 
-  const get_element_name = (element: string): string =>
-    element_data?.find((element_record) => element_record.symbol === element)?.name || element
-
   const site_summary = (card: SiteCard): string =>
-    [
-      card.element_name,
-      ...card.details.map(({ label, value }) => `${label}: ${value}`),
-    ].join(`; `)
+    [card.element_name, ...card.details.map(({ label, value }) => `${label}: ${value}`)].join(
+      `; `,
+    )
+
+  function compact_site_detail_label(detail: SiteDetail): string {
+    if (detail.key === `fractional`) return `Frac.`
+    if (detail.key === `cartesian`) return `Cart.`
+    return detail.label
+  }
 
   function format_site_property(prop_key: string, prop_value: unknown): SiteDetail | null {
     if (prop_value == null) return null
-    const format_numeric_value = (value: unknown, format = `.3~f`): string | null => {
+    const format_numeric_value = (value: unknown): string | null => {
       const numeric_value = Number(value)
-      return Number.isNaN(numeric_value) ? null : format_num(numeric_value, format)
+      return Number.isNaN(numeric_value) ? null : format_num(numeric_value, `.3~f`)
     }
     const format_value_list = (values: unknown[]): string =>
       `(${values.map((value) => format_numeric_value(value) ?? String(value)).join(`, `)})`
     let tooltip: string | undefined
 
     if (
-      prop_key === `force` && Array.isArray(prop_value) &&
-      prop_value.length === 3 && prop_value.every((value) => typeof value === `number`)
+      prop_key === `force` &&
+      Array.isArray(prop_value) &&
+      prop_value.length === 3 &&
+      prop_value.every((value) => typeof value === `number`)
     ) {
       const force_values = prop_value as [number, number, number]
       const value = `${format_num(Math.hypot(...force_values), `.3~f`)} eV/Å`
-      tooltip = `Force vector: ${
-        force_values.map((force) => format_num(force, `.3~f`)).join(`, `)
-      } eV/Å`
+      tooltip = `Force vector: ${force_values
+        .map((force) => format_num(force, `.3~f`))
+        .join(`, `)} eV/Å`
       return { label: prop_key, value, key: prop_key, tooltip }
     }
     if (prop_key === `magmom` || prop_key.includes(`magnet`)) {
@@ -206,7 +190,7 @@
 
     const value = Array.isArray(prop_value)
       ? format_value_list(prop_value)
-      : format_numeric_value(prop_value) ?? String(prop_value)
+      : (format_numeric_value(prop_value) ?? String(prop_value))
     return { label: prop_key, value, key: prop_key }
   }
 
@@ -254,7 +238,7 @@
           },
           {
             label: `a, b, c`,
-            value: `${format_num(a, `.4~f`)}, ${format_num(b, `.4~f`)}, ${format_num(c, `.4~f`)} Å`,
+            value: `${format_num(a, `.3~f`)}, ${format_num(b, `.3~f`)}, ${format_num(c, `.3~f`)} Å`,
             key: `cell-abc`,
           },
           {
@@ -269,7 +253,9 @@
     // Symmetry Info
     if (`lattice` in structure && sym_data) {
       const { operations } = sym_data
-      let translations = 0, rotations = 0, roto_translations = 0
+      let translations = 0,
+        rotations = 0,
+        roto_translations = 0
       for (const op of operations) {
         const has_translation = op.translation.some((offset) => offset !== 0)
         const is_identity = String(op.rotation) === `1,0,0,0,1,0,0,0,1`
@@ -278,14 +264,15 @@
         else roto_translations++
       }
 
-      const international_symbol = (sym_data as MoyoDataset & {
-        international_short?: string
-      }).international_short
-      const space_group_symbol = (sym_data.hm_symbol ?? international_symbol)
-        ?.replaceAll(
-          /\s+/g,
-          ``,
-        )
+      const international_symbol = (
+        sym_data as MoyoDataset & {
+          international_short?: string
+        }
+      ).international_short
+      const space_group_symbol = (sym_data.hm_symbol ?? international_symbol)?.replaceAll(
+        /\s+/g,
+        ``,
+      )
       const space_group_value = space_group_symbol
         ? `${sym_data.number} (${space_group_symbol})`
         : String(sym_data.number)
@@ -294,8 +281,16 @@
         title: `Symmetry`,
         items: [
           { label: `Space Group`, value: space_group_value, key: `symmetry-space-group` },
-          { label: `Hall Number`, value: String(sym_data.hall_number), key: `symmetry-hall-number` },
-          { label: `Pearson Symbol`, value: sym_data.pearson_symbol, key: `symmetry-pearson-symbol` },
+          {
+            label: `Hall Number`,
+            value: String(sym_data.hall_number),
+            key: `symmetry-hall-number`,
+          },
+          {
+            label: `Pearson Symbol`,
+            value: sym_data.pearson_symbol,
+            key: `symmetry-pearson-symbol`,
+          },
           {
             label: `Symmetry Ops`,
             value: `${operations.length} (${translations} trans, ${rotations} rot, ${roto_translations} roto-trans)`,
@@ -321,7 +316,7 @@
     if (!structure || !site_cards_visible) return []
     return structure.sites.map((site: Site, idx: number) => {
       const element = site.species?.[0]?.element || `Unknown`
-      const element_name = get_element_name(element)
+      const element_name = element_by_symbol.get(element as ElementSymbol)?.name ?? element
       const details: SiteDetail[] = []
       for (const [label, key, coords, unit] of [
         [`Fractional`, `fractional`, site.abc, ``],
@@ -331,7 +326,7 @@
         details.push({
           label,
           key,
-          value: `(${coords.map((coord) => format_num(coord, `.4~f`)).join(`, `)})${unit}`,
+          value: `(${coords.map((coord) => format_num(coord, `.3~f`)).join(`, `)})${unit}`,
         })
       }
       if (site.properties) {
@@ -347,9 +342,9 @@
         element_name,
         title,
         details,
-        search_text: `${title} ${element} ${element_name} ${
-          details.map(({ label, value }) => `${label} ${value}`).join(` `)
-        }`.toLowerCase(),
+        search_text: `${title} ${element} ${element_name} ${details
+          .map(({ label, value }) => `${label} ${value}`)
+          .join(` `)}`.toLowerCase(),
       }
     })
   })
@@ -382,8 +377,7 @@
     if (!pane_open || selected_site_idx === undefined) return
     const visible_idx = visible_site_cards.findIndex(({ idx }) => idx === selected_site_idx)
     if (visible_idx === -1) return
-    const selected_window_start = Math.floor(visible_idx / SITE_WINDOW_SIZE) *
-      SITE_WINDOW_SIZE
+    const selected_window_start = Math.floor(visible_idx / SITE_WINDOW_SIZE) * SITE_WINDOW_SIZE
     if (selected_window_start !== site_window_start) {
       site_window_start = selected_window_start
       return
@@ -407,7 +401,12 @@
   }}
   open_icon="Cross"
   closed_icon="Info"
-  pane_props={{ ...pane_props, class: `structure-info-pane ${pane_props?.class ?? ``}` }}
+  icon_style="transform: scale(1.15)"
+  pane_props={{
+    ...pane_props,
+    class: `structure-info-pane ${pane_props?.class ?? ``}`,
+    style: `--pane-padding: 4pt; --pane-gap: 2pt; ${pane_props?.style ?? ``}`,
+  }}
   {...rest}
 >
   <h4 id="structure-info" style="margin-top: 0">Structure Info</h4>
@@ -434,7 +433,7 @@
         >
           <span>{@html sanitize_html(label)}</span>
           <span title={tooltip}>{@html sanitize_html(value)}</span>
-          {#if key && copied_items.has(key)}
+          {#if key && copied.has(key)}
             <Icon
               icon="Check"
               style="color: var(--success-color, #10b981); width: 12px; height: 12px"
@@ -447,9 +446,9 @@
       {#if section.title === `Symmetry` && wyckoff_positions.length > 0}
         <WyckoffTable
           {wyckoff_positions}
-          on_hover={(site_indices) => highlighted_sites = site_indices ?? []}
-          on_click={(site_indices) => selected_sites = site_indices ?? []}
-          style="width: 100%; margin-top: 0.5em; font-size: 0.8em"
+          on_hover={(site_indices) => (highlighted_sites = site_indices ?? [])}
+          on_click={(site_indices) => (selected_sites = site_indices ?? [])}
+          style="width: 100%; margin-top: 2pt; font-size: 0.8em"
         />
       {/if}
     </section>
@@ -472,7 +471,9 @@
         {/if}
       </div>
       {#if sites_hidden_by_threshold}
-        <p class="sites-note">Site list hidden for this {structure.sites.length}-site structure.</p>
+        <p class="sites-note">
+          Site list hidden for this {structure.sites.length}-site structure.
+        </p>
       {:else if site_cards.length > 0}
         <input
           class="site-filter"
@@ -491,19 +492,21 @@
                 type="button"
                 disabled={site_window_start === 0}
                 onclick={() =>
-                  site_window_start = Math.max(0, site_window_start - SITE_WINDOW_SIZE)}
+                  (site_window_start = Math.max(0, site_window_start - SITE_WINDOW_SIZE))}
               >
                 Previous
               </button>
-              <span>{site_window_start + 1}-{site_window_end} of {visible_site_cards.length}</span>
+              <span
+                >{site_window_start + 1}-{site_window_end} of {visible_site_cards.length}</span
+              >
               <button
                 type="button"
                 disabled={site_window_end >= visible_site_cards.length}
                 onclick={() =>
-                  site_window_start = Math.min(
+                  (site_window_start = Math.min(
                     Math.max(0, visible_site_cards.length - SITE_WINDOW_SIZE),
                     site_window_start + SITE_WINDOW_SIZE,
-                  )}
+                  ))}
               >
                 Next
               </button>
@@ -511,8 +514,8 @@
           {/if}
           <div class="site-cards" bind:this={site_cards_el}>
             {#each rendered_site_cards as card (card.idx)}
-              {@const is_highlighted = highlighted_sites.includes(card.idx) ||
-                hovered_site_idx === card.idx}
+              {@const is_highlighted =
+                highlighted_sites.includes(card.idx) || hovered_site_idx === card.idx}
               {@const is_selected = selected_sites.includes(card.idx)}
               <div
                 class="site-card"
@@ -530,37 +533,18 @@
                 onclick={(event) => select_site(card.idx, event)}
                 onkeydown={(event) => handle_site_keydown(event, card)}
               >
-                <div class="site-card-header">
-                  <span class="site-title">
-                    <span class="site-color" aria-hidden="true"></span>
-                    <strong>{card.title}</strong>
-                    <span>{card.element_name}</span>
-                  </span>
-                  <CopyButton
-                    label="Copy {card.title}"
-                    title="Copy {card.title}"
-                    copied={copied_items.has(`site-${card.idx}-summary`)}
-                    onclick={(event) =>
-                      copy_event(event, card.title, site_summary(card), `site-${card.idx}-summary`)}
-                  />
-                </div>
+                <span class="site-title">
+                  <span class="site-color" aria-hidden="true"></span>
+                  <strong>{card.title}</strong>
+                  <span>{card.element_name}</span>
+                </span>
                 <div class="site-card-details">
                   {#each card.details as detail (`site-${card.idx}-${detail.key}`)}
                     <div class="site-detail">
-                      <span>{@html sanitize_html(detail.label)}</span>
+                      <span title={detail.label}
+                        >{@html sanitize_html(compact_site_detail_label(detail))}</span
+                      >
                       <span title={detail.tooltip}>{@html sanitize_html(detail.value)}</span>
-                      <CopyButton
-                        label="Copy {card.title} {detail.label}"
-                        title="Copy {detail.label}"
-                        copied={copied_items.has(`site-${card.idx}-${detail.key}`)}
-                        onclick={(event) =>
-                          copy_event(
-                            event,
-                            `${card.title} ${detail.label}`,
-                            detail.value,
-                            `site-${card.idx}-${detail.key}`,
-                          )}
-                      />
                     </div>
                   {/each}
                 </div>
@@ -585,13 +569,20 @@
 </DraggablePane>
 
 <style>
-  .info-row,
-  .tips-item {
+  h4 {
+    margin: 2pt 0;
+    font-size: 0.95em;
+  }
+  hr {
+    margin: 2pt 0;
+  }
+  .info-row {
     display: flex;
     justify-content: space-between;
-    gap: 6pt;
-    padding: 1pt;
-    line-height: 1.5;
+    gap: 4pt;
+    padding: 0 1pt;
+    font-size: 0.9em;
+    line-height: 1.3;
   }
   .info-row.clickable {
     cursor: pointer;
@@ -604,10 +595,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 6pt;
-    h4 {
-      margin: 0.5em 0;
-    }
+    gap: 4pt;
   }
   .sites-toggle,
   .site-window-controls button {
@@ -624,8 +612,8 @@
   .site-filter {
     box-sizing: border-box;
     width: 100%;
-    margin-bottom: 5pt;
-    padding: 4pt 6pt;
+    margin-bottom: 3pt;
+    padding: 3pt 5pt;
     border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
     border-radius: var(--border-radius, 3pt);
     background: color-mix(in srgb, var(--pane-bg, Canvas) 88%, currentColor);
@@ -640,8 +628,8 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 5pt;
-    margin-bottom: 5pt;
+    gap: 4pt;
+    margin-bottom: 3pt;
     font-size: 0.8em;
     button {
       padding: 2pt 5pt;
@@ -653,13 +641,12 @@
   }
   .site-cards {
     display: grid;
-    gap: 5pt;
+    gap: 6pt;
   }
   .site-card {
     border-left: 3px solid var(--site-color, #888);
-    border-radius: var(--border-radius, 3pt);
     background: color-mix(in srgb, currentColor 4%, transparent);
-    padding: 5pt;
+    padding: 4pt 8pt;
     cursor: pointer;
     outline: none;
     &:is(:hover, :focus-visible, .highlighted) {
@@ -670,16 +657,12 @@
       background: color-mix(in srgb, var(--site-color, currentColor) 25%, transparent);
     }
   }
-  .site-card-header,
   .site-title,
   .site-detail {
     display: flex;
     align-items: center;
     gap: 5pt;
   }
-  .site-card-header {
-    justify-content: space-between;
-  }
   .site-title {
     min-width: 0;
     span:last-child {
@@ -694,13 +677,17 @@
     background: var(--site-color, #888);
   }
   .site-card-details {
-    display: grid;
-    gap: 2pt;
-    margin-top: 3pt;
-    font-size: 0.86em;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1pt 4pt;
+    margin-top: 2pt;
+    font-size: 0.73em;
+    line-height: 1.3;
   }
   .site-detail {
-    justify-content: space-between;
+    gap: 2pt;
+    min-width: 0;
+    max-width: 100%;
     span:first-child {
       opacity: 0.75;
     }
@@ -729,8 +716,16 @@
     }
   }
   .tips-item {
-    flex-direction: column;
-    gap: 2pt;
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 4pt;
+    padding: 1pt 0;
+    font-size: 0.8em;
+    line-height: 1.25;
+    span:first-child {
+      font-weight: 600;
+      text-align: right;
+    }
     span:last-child {
       opacity: 0.8;
     }

package/dist/structure/StructureInfoPane.svelte.d.ts

@@ -14,6 +14,6 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `onclose`> & {
     selected_sites?: number[];
     sym_data?: MoyoDataset | null;
 };
-declare const StructureInfoPane: import("svelte").Component<$$ComponentProps, {}, "selected_sites" | "pane_open" | "highlighted_sites" | "hovered_site_idx">;
+declare const StructureInfoPane: import("svelte").Component<$$ComponentProps, {}, "selected_sites" | "hovered_site_idx" | "pane_open" | "highlighted_sites">;
 type StructureInfoPane = ReturnType<typeof StructureInfoPane>;
 export default StructureInfoPane;