matterviz 0.3.2 → 0.3.3

package/dist/structure/StructureInfoPane.svelte

@@ -1,254 +1,321 @@
-<script lang="ts">import { get_electro_neg_formula } from '../composition';
-import { element_data } from '../element';
-import Icon from '../Icon.svelte';
-import { format_num } from '../labels';
-import DraggablePane from '../overlays/DraggablePane.svelte';
-import { get_density } from './';
-import { wyckoff_positions_from_moyo, WyckoffTable } from '../symmetry';
-import { SvelteSet } from 'svelte/reactivity';
-let { structure, pane_open = $bindable(false), atom_count_thresholds = [50, 500], toggle_props = {}, pane_props = {}, highlighted_sites = $bindable([]), selected_sites = $bindable([]), sym_data = null, ...rest } = $props();
-let copied_items = new SvelteSet();
-let sites_expanded = $state(false);
-async function copy_to_clipboard(label, value, key) {
+<script lang="ts">
+  import { get_electro_neg_formula } from '../composition'
+  import { element_data } from '../element'
+  import Icon from '../Icon.svelte'
+  import { format_num } from '../labels'
+  import type { InfoItem } from '../layout'
+  import DraggablePane from '../overlays/DraggablePane.svelte'
+  import type { AnyStructure, Site } from './'
+  import { get_density } from './'
+  import { wyckoff_positions_from_moyo, WyckoffTable } from '../symmetry'
+  import type { MoyoDataset } from '@spglib/moyo-wasm'
+  import type { ComponentProps } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { sanitize_html } from '../sanitize'
+  import { SvelteSet } from 'svelte/reactivity'
+
+  let {
+    structure,
+    pane_open = $bindable(false),
+    atom_count_thresholds = [50, 500],
+    toggle_props = {},
+    pane_props = {},
+    highlighted_sites = $bindable([]),
+    selected_sites = $bindable([]),
+    sym_data = null,
+    ...rest
+  }: Omit<HTMLAttributes<HTMLDivElement>, `onclose`> & {
+    structure: AnyStructure
+    pane_open?: boolean
+    atom_count_thresholds?: [number, number] // if atom count is less than min_threshold, show sites, if atom count is greater than max_threshold, hide sites. in between, show sites behind a toggle button.
+    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
+    highlighted_sites?: number[] // Sites highlighted from Wyckoff table hover
+    selected_sites?: number[] // Sites selected from Wyckoff table click
+    sym_data?: MoyoDataset | null // Symmetry analysis data (bindable for external access)
+  } = $props()
+
+  let copied_items = new SvelteSet<string>()
+  let sites_expanded = $state(false)
+
+  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);
+      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 handle_click(item, section_title) {
-    if (section_title === `Usage Tips`)
-        return;
-    if (item.key === `sites-toggle`)
-        sites_expanded = !sites_expanded;
-    else
-        copy_to_clipboard(item.label, String(item.value), item.key ?? item.label);
-}
-let pane_data = $derived.by(() => {
-    if (!structure)
-        return [];
-    const sections = [];
-    const [min_threshold, max_threshold] = atom_count_thresholds;
+  }
+
+  function handle_click(item: InfoItem, section_title: string) {
+    if (section_title === `Usage Tips`) return
+    if (item.key === `sites-toggle`) sites_expanded = !sites_expanded
+    else copy_to_clipboard(item.label, String(item.value), item.key ?? item.label)
+  }
+
+  let pane_data = $derived.by(() => {
+    if (!structure) return []
+    const sections: { title: string; items: InfoItem[] }[] = []
+    const [min_threshold, max_threshold] = atom_count_thresholds
+
     // Structure Info
-    const structure_items = [
-        {
-            label: `Formula`,
-            value: `${get_electro_neg_formula(structure)} (${structure.sites.length} sites)`,
-            key: `structure-formula`,
-        },
-        {
-            label: `Charge`,
-            value: `${structure.charge || 0}e`,
-            key: `structure-charge`,
-        },
-    ];
+    const structure_items: InfoItem[] = [
+      {
+        label: `Formula`,
+        value: `${
+          get_electro_neg_formula(structure)
+        } (${structure.sites.length} sites)`,
+        key: `structure-formula`,
+      },
+      {
+        label: `Charge`,
+        value: `${structure.charge || 0}e`,
+        key: `structure-charge`,
+      },
+    ]
+
     if (`properties` in structure) {
-        for (const [key, value] of Object.entries(structure.properties ?? {})) {
-            // Only display scalar values (skip arrays and objects)
-            if (value == null || typeof value === `object`)
-                continue;
-            structure_items.push({
-                label: key.replace(/_/g, ` `).replace(/\b\w/g, (char) => char.toUpperCase()),
-                value: String(value),
-                key: `structure-prop-${key}`,
-            });
-        }
+      for (const [key, value] of Object.entries(structure.properties ?? {})) {
+        // Only display scalar values (skip arrays and objects)
+        if (value == null || typeof value === `object`) continue
+        structure_items.push({
+          label: key.replace(/_/g, ` `).replace(
+            /\b\w/g,
+            (char) => char.toUpperCase(),
+          ),
+          value: String(value),
+          key: `structure-prop-${key}`,
+        })
+      }
     }
-    sections.push({ title: `Structure`, items: structure_items });
+    sections.push({ title: `Structure`, items: structure_items })
+
     // Cell Info
     if (`lattice` in structure) {
-        const { a, b, c, alpha, beta, gamma, volume } = structure.lattice;
-        sections.push({
-            title: `Cell`,
-            items: [
-                {
-                    label: `Volume, Density`,
-                    value: `${format_num(volume, `.3~s`)} ų, ${format_num(get_density(structure), `.3~f`)} g/cm³`,
-                    key: `cell-volume-density`,
-                },
-                {
-                    label: `a, b, c`,
-                    value: `${format_num(a, `.4~f`)}, ${format_num(b, `.4~f`)}, ${format_num(c, `.4~f`)} Å`,
-                    key: `cell-abc`,
-                },
-                {
-                    label: `α, β, γ`,
-                    value: `${format_num(alpha, `.2~f`)}°, ${format_num(beta, `.2~f`)}°, ${format_num(gamma, `.2~f`)}°`,
-                    key: `cell-angles`,
-                },
-            ],
-        });
+      const { a, b, c, alpha, beta, gamma, volume } = structure.lattice
+      sections.push({
+        title: `Cell`,
+        items: [
+          {
+            label: `Volume, Density`,
+            value: `${format_num(volume, `.3~s`)} ų, ${
+              format_num(get_density(structure), `.3~f`)
+            } g/cm³`,
+            key: `cell-volume-density`,
+          },
+          {
+            label: `a, b, c`,
+            value: `${format_num(a, `.4~f`)}, ${format_num(b, `.4~f`)}, ${
+              format_num(c, `.4~f`)
+            } Å`,
+            key: `cell-abc`,
+          },
+          {
+            label: `α, β, γ`,
+            value: `${format_num(alpha, `.2~f`)}°, ${format_num(beta, `.2~f`)}°, ${
+              format_num(gamma, `.2~f`)
+            }°`,
+            key: `cell-angles`,
+          },
+        ],
+      })
     }
+
     // Symmetry Info
     if (`lattice` in structure && sym_data) {
-        const { operations } = sym_data;
-        let translations = 0, rotations = 0, roto_translations = 0;
-        for (const op of operations) {
-            const has_translation = op.translation.some((t) => t !== 0);
-            const is_identity = String(op.rotation) === `1,0,0,0,1,0,0,0,1`;
-            if (is_identity && has_translation)
-                translations++;
-            else if (!has_translation)
-                rotations++;
-            else
-                roto_translations++;
-        }
-        const international_symbol = sym_data.international_short;
-        const space_group_symbol = (sym_data.hm_symbol ?? international_symbol)
-            ?.replace(/\s+/g, ``);
-        const space_group_value = space_group_symbol
-            ? `${sym_data.number} (${space_group_symbol})`
-            : String(sym_data.number);
-        sections.push({
-            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: `Symmetry Ops`,
-                    value: `${operations.length} (${translations} trans, ${rotations} rot, ${roto_translations} roto-trans)`,
-                    key: `symmetry-operations-total`,
-                },
-            ],
-        });
+      const { operations } = sym_data
+      let translations = 0, rotations = 0, roto_translations = 0
+      for (const op of operations) {
+        const has_translation = op.translation.some((t) => t !== 0)
+        const is_identity = String(op.rotation) === `1,0,0,0,1,0,0,0,1`
+        if (is_identity && has_translation) translations++
+        else if (!has_translation) rotations++
+        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)
+        ?.replace(
+          /\s+/g,
+          ``,
+        )
+      const space_group_value = space_group_symbol
+        ? `${sym_data.number} (${space_group_symbol})`
+        : String(sym_data.number)
+
+      sections.push({
+        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: `Symmetry Ops`,
+            value:
+              `${operations.length} (${translations} trans, ${rotations} rot, ${roto_translations} roto-trans)`,
+            key: `symmetry-operations-total`,
+          },
+        ],
+      })
     }
+
     // Sites Section
-    const atom_count = structure.sites.length;
+    const atom_count = structure.sites.length
     if (atom_count <= max_threshold) {
-        const site_items = [];
-        // Merged toggle button with Sites title
-        if (atom_count >= min_threshold) {
-            const toggle_label = sites_expanded
-                ? `Hide Sites`
-                : `Show ${atom_count} sites`;
+      const site_items: InfoItem[] = []
+
+      // Merged toggle button with Sites title
+      if (atom_count >= min_threshold) {
+        const toggle_label = sites_expanded
+          ? `Hide Sites`
+          : `Show ${atom_count} sites`
+        site_items.push({
+          label: toggle_label,
+          value: sites_expanded ? `▲` : `▼`,
+          key: `sites-toggle`,
+          tooltip: `Click to ${
+            sites_expanded ? `hide` : `show`
+          } all site information`,
+        })
+      }
+
+      if (atom_count < min_threshold || sites_expanded) {
+        structure.sites.forEach((site: Site, idx: number) => {
+          const element = site.species?.[0]?.element || `Unknown`
+          const element_name = element_data?.find((el) =>
+            el.symbol === element
+          )?.name || element
+
+          site_items.push({
+            label: `${element}${idx + 1}`,
+            value: element_name,
+            key: `site-${idx}-header`,
+          })
+
+          if (site.abc) {
             site_items.push({
-                label: toggle_label,
-                value: sites_expanded ? `▲` : `▼`,
-                key: `sites-toggle`,
-                tooltip: `Click to ${sites_expanded ? `hide` : `show`} all site information`,
-            });
-        }
-        if (atom_count < min_threshold || sites_expanded) {
-            structure.sites.forEach((site, idx) => {
-                const element = site.species?.[0]?.element || `Unknown`;
-                const element_name = element_data?.find((el) => el.symbol === element)?.name || element;
-                site_items.push({
-                    label: `${element}${idx + 1}`,
-                    value: element_name,
-                    key: `site-${idx}-header`,
-                });
-                if (site.abc) {
-                    site_items.push({
-                        label: `  Fractional`,
-                        value: `(${site.abc.map((x) => format_num(x, `.4~f`)).join(`, `)})`,
-                        key: `site-${idx}-fractional`,
-                    });
-                }
-                if (site.xyz) {
-                    site_items.push({
-                        label: `  Cartesian`,
-                        value: `(${site.xyz.map((x) => format_num(x, `.4~f`)).join(`, `)}) Å`,
-                        key: `site-${idx}-cartesian`,
-                    });
-                }
-                if (site.properties) {
-                    for (const [prop_key, prop_value] of Object.entries(site.properties)) {
-                        if (prop_value != null && prop_value !== undefined) {
-                            let formatted_value;
-                            let tooltip;
-                            if (prop_key === `force` && Array.isArray(prop_value) &&
-                                prop_value.length === 3 && prop_value.every((v) => typeof v === `number`)) {
-                                const force_magnitude = Math.hypot(...prop_value);
-                                formatted_value = `${format_num(force_magnitude, `.3~f`)} eV/Å`;
-                                tooltip = `Force vector: (${prop_value.map((force) => format_num(force, `.3~f`)).join(`, `)}) eV/Å`;
-                            }
-                            else if (prop_key === `magmom` || prop_key.includes(`magnet`)) {
-                                const num_val = Number(prop_value);
-                                if (isNaN(num_val))
-                                    continue;
-                                formatted_value = `${format_num(num_val, `.3~f`)} μB`;
-                                tooltip = `Magnetic moment in Bohr magnetons`;
-                            }
-                            else if (Array.isArray(prop_value)) {
-                                formatted_value = `(${prop_value.map((v) => {
-                                    const num_val = Number(v);
-                                    return isNaN(num_val) ? String(v) : format_num(num_val, `.3~f`);
-                                }).join(`, `)})`;
-                            }
-                            else {
-                                const num_val = Number(prop_value);
-                                formatted_value = isNaN(num_val)
-                                    ? String(prop_value)
-                                    : format_num(num_val, `.3~f`);
-                            }
-                            site_items.push({
-                                label: `  ${prop_key}`,
-                                value: formatted_value,
-                                key: `site-${idx}-${prop_key}`,
-                                tooltip,
-                            });
-                        }
-                    }
+              label: `  Fractional`,
+              value: `(${site.abc.map((x) => format_num(x, `.4~f`)).join(`, `)})`,
+              key: `site-${idx}-fractional`,
+            })
+          }
+          if (site.xyz) {
+            site_items.push({
+              label: `  Cartesian`,
+              value: `(${site.xyz.map((x) => format_num(x, `.4~f`)).join(`, `)}) Å`,
+              key: `site-${idx}-cartesian`,
+            })
+          }
+
+          if (site.properties) {
+            for (const [prop_key, prop_value] of Object.entries(site.properties)) {
+              if (prop_value != null && prop_value !== undefined) {
+                let formatted_value: string
+                let tooltip: string | undefined
+
+                if (
+                  prop_key === `force` && Array.isArray(prop_value) &&
+                  prop_value.length === 3 && prop_value.every((v) =>
+                    typeof v === `number`
+                  )
+                ) {
+                  const force_magnitude = Math.hypot(...prop_value)
+                  formatted_value = `${format_num(force_magnitude, `.3~f`)} eV/Å`
+                  tooltip = `Force vector: (${
+                    prop_value.map((force) => format_num(force, `.3~f`)).join(`, `)
+                  }) eV/Å`
+                } else if (prop_key === `magmom` || prop_key.includes(`magnet`)) {
+                  const num_val = Number(prop_value)
+                  if (isNaN(num_val)) continue
+                  formatted_value = `${format_num(num_val, `.3~f`)} μB`
+                  tooltip = `Magnetic moment in Bohr magnetons`
+                } else if (Array.isArray(prop_value)) {
+                  formatted_value = `(${
+                    prop_value.map((v) => {
+                      const num_val = Number(v)
+                      return isNaN(num_val) ? String(v) : format_num(num_val, `.3~f`)
+                    }).join(`, `)
+                  })`
+                } else {
+                  const num_val = Number(prop_value)
+                  formatted_value = isNaN(num_val)
+                    ? String(prop_value)
+                    : format_num(num_val, `.3~f`)
                 }
-            });
-        }
-        if (site_items.length > 0) {
-            sections.push({
-                title: atom_count >= min_threshold ? `` : `Sites`,
-                items: site_items,
-            });
-        }
+
+                site_items.push({
+                  label: `  ${prop_key}`,
+                  value: formatted_value,
+                  key: `site-${idx}-${prop_key}`,
+                  tooltip,
+                })
+              }
+            }
+          }
+        })
+      }
+
+      if (site_items.length > 0) {
+        sections.push({
+          title: atom_count >= min_threshold ? `` : `Sites`,
+          items: site_items,
+        })
+      }
     }
+
     // Usage Tips
     sections.push({
-        title: `Usage Tips`,
-        items: [
-            {
-                label: `File Drop`,
-                value: `Drop POSCAR, XYZ, CIF or JSON files to load structures`,
-            },
-            {
-                label: `Atom Selection`,
-                value: `Click atoms to select them, then pick distance or angle mode to measure all pairwise distances/angles`,
-            },
-            {
-                label: `Navigation`,
-                value: `Hold Shift/Cmd/Ctrl + drag to pan the scene`,
-            },
-            {
-                label: `Camera Reset`,
-                value: `Double-click anywhere to reset camera to default view`,
-            },
-            {
-                label: `Colors`,
-                value: `Click legend labels to change colors, double-click to reset, right-click to remap elements`,
-            },
-            {
-                label: `Keyboard`,
-                value: `Press 'f' for fullscreen, 'i' to toggle this pane`,
-            },
-        ],
-    });
-    return sections;
-});
-// Compute Wyckoff positions from symmetry data
-let wyckoff_positions = $derived(wyckoff_positions_from_moyo(sym_data));
+      title: `Usage Tips`,
+      items: [
+        {
+          label: `File Drop`,
+          value: `Drop POSCAR, XYZ, CIF or JSON files to load structures`,
+        },
+        {
+          label: `Atom Selection`,
+          value:
+            `Click atoms to select them, then pick distance or angle mode to measure all pairwise distances/angles`,
+        },
+        {
+          label: `Navigation`,
+          value: `Hold Shift/Cmd/Ctrl + drag to pan the scene`,
+        },
+        {
+          label: `Camera Reset`,
+          value: `Double-click anywhere to reset camera to default view`,
+        },
+        {
+          label: `Colors`,
+          value:
+            `Click legend labels to change colors, double-click to reset, right-click to remap elements`,
+        },
+        {
+          label: `Keyboard`,
+          value: `Press 'f' for fullscreen, 'i' to toggle this pane`,
+        },
+      ],
+    })
+
+    return sections
+  })
+
+  // Compute Wyckoff positions from symmetry data
+  let wyckoff_positions = $derived(wyckoff_positions_from_moyo(sym_data))
 </script>
 
 <DraggablePane
@@ -275,8 +342,8 @@ let wyckoff_positions = $derived(wyckoff_positions_from_moyo(sym_data));
         {@const { key, label, value, tooltip } = item}
         {#if section.title === `Usage Tips`}
           <div class="tips-item">
-            <span>{@html label}</span>
-            <span>{@html value}</span>
+            <span>{@html sanitize_html(label)}</span>
+            <span>{@html sanitize_html(value)}</span>
           </div>
         {:else}
           <div
@@ -294,8 +361,8 @@ let wyckoff_positions = $derived(wyckoff_positions_from_moyo(sym_data));
               }
             }}
           >
-            <span>{@html label}</span>
-            <span title={tooltip}>{@html value}</span>
+            <span>{@html sanitize_html(label)}</span>
+            <span title={tooltip}>{@html sanitize_html(value)}</span>
             {#if key !== `sites-toggle` && key && copied_items.has(key)}
               <Icon
                 icon="Check"