matterviz 0.4.2 → 0.4.3

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'
@@ -93,11 +92,6 @@
   const copy_to_clipboard = (label: string, value: string, key: string): Promise<void> =>
     copy(`${label}: ${value}`, key)
 
-  function copy_event(event: MouseEvent, label: string, value: string, key: string) {
-    event.stopPropagation()
-    copy_to_clipboard(label, value, key)
-  }
-
   function copy_info_item(item: InfoItem) {
     copy_to_clipboard(item.label, String(item.value), item.key ?? item.label)
   }
@@ -153,19 +147,22 @@
     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(
       `; `,
     )
 
+  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(`, `)})`
@@ -241,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`,
           },
           {
@@ -319,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, ``],
@@ -329,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) {
@@ -404,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>
@@ -446,7 +448,7 @@
           {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"
+          style="width: 100%; margin-top: 2pt; font-size: 0.8em"
         />
       {/if}
     </section>
@@ -531,42 +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.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.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>
@@ -591,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;
@@ -610,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 {
@@ -630,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);
@@ -646,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;
@@ -659,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) {
@@ -676,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 {
@@ -700,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;
     }
@@ -735,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/StructureScene.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import type { D3InterpolateName } from '../colors'
-  import { get_d3_interpolator } from '../colors'
+  import { get_d3_interpolator, is_dark_mode, watch_dark_mode } from '../colors'
   import type { ElementSymbol } from '../element'
-  import { element_data } from '../element'
+  import { element_by_symbol } from '../element'
   import Isosurface from '../isosurface/Isosurface.svelte'
   import type { IsosurfaceSettings, VolumetricData } from '../isosurface/types'
   import { DEFAULT_ISOSURFACE_SETTINGS } from '../isosurface/types'
@@ -211,13 +211,14 @@
     dragging_atoms = $bindable(false),
     volumetric_data = undefined,
     isosurface_settings = DEFAULT_ISOSURFACE_SETTINGS,
+    active_volume_idx = 0,
+    volume_scaling = [1, 1, 1],
     interactive = true,
   }: SceneControlProps & {
     structure?: AnyStructure
     base_structure?: AnyStructure // The original structure without image atoms, used for property color calculation
     atom_radius?: number // scale factor for atomic radii
-    same_size_atoms?: boolean // whether to use the same radius for all atoms. if not, the radius will be
-    // determined by the atomic radius of the element
+    same_size_atoms?: boolean // uniform radius for all atoms (else per-element atomic radii)
     camera_position?: [x: number, y: number, z: number] // initial camera position from which to render the scene
     camera_target?: Vec3 // external orbit-controls target for pan synchronization
     // When set (and camera_position is unset/zero), auto-place the camera along this
@@ -316,8 +317,12 @@
     add_element?: ElementSymbol // element to add when clicking in add-atom mode
     cursor?: string // cursor style for the 3D canvas
     dragging_atoms?: boolean // true while TransformControls drag is active (skips expensive recalculations)
-    volumetric_data?: VolumetricData // Active volumetric data for isosurface rendering
+    // Loaded volumetric datasets for isosurface rendering (single volume accepted
+    // for backwards compatibility)
+    volumetric_data?: VolumetricData | VolumetricData[]
     isosurface_settings?: IsosurfaceSettings // Isosurface rendering settings
+    active_volume_idx?: number // Volume implicit single-isovalue settings apply to
+    volume_scaling?: Vec3 // Supercell tiling applied to isosurface geometry
     // When false, render the scene without hover/edit raycast helpers. Used by multi-side
     // view so inactive panes skip interaction-only work while the active pane stays editable.
     interactive?: boolean
@@ -328,6 +333,8 @@
     { step: 0.015, frequency: 5 },
   )
   let pulse_opacity = $derived(0.15 + 0.25 * pulse.unit)
+  let dark_mode = $state(is_dark_mode())
+  $effect(() => watch_dark_mode((dark) => (dark_mode = dark)))
 
   bind_renderer((threlte_scene, threlte_camera) => {
     scene = threlte_scene
@@ -431,6 +438,22 @@
     bond_context_target = null
   }
 
+  // Shared handlers for bond context-menu buttons: act on pointerdown (a click would
+  // arrive after orbit-controls' start handler already closed the menu) or Enter/Space
+  const menu_action_props = (action: () => void) => {
+    const run = (event: Event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      action()
+    }
+    return {
+      onpointerdown: run,
+      onkeydown: (event: KeyboardEvent) => {
+        if (event.key === `Enter` || event.key === ` `) run(event)
+      },
+    }
+  }
+
   const canonical_bond_target = (bond: BondKeyTarget): BondKeyTarget =>
     canonicalize_bond_target(bond, structure?.sites)
 
@@ -500,20 +523,14 @@
   const BOND_ENDPOINT_HIT_FRACTION = 0.3
   const BOND_ENDPOINT_SITE_MATCH_TOLERANCE = 1e-6
   const EDITABLE_ATOM_HIT_RADIUS_SCALE = 1.15
-  const skip_raycast = (): void => undefined
 
   function apply_bond_transform(mesh: Mesh, bond: BondPair): void {
     mesh.matrix.fromArray(bond.transform_matrix)
     mesh.matrixWorldNeedsUpdate = true
   }
 
-  function apply_non_raycastable_bond_hit_transform(mesh: Mesh, bond: BondPair): void {
-    apply_bond_transform(mesh, bond)
-    disable_raycast(mesh)
-  }
-
   function disable_raycast(mesh: Mesh): void {
-    mesh.raycast = skip_raycast
+    mesh.raycast = () => undefined
   }
 
   function site_world_position(parent: Object3D, site: Site): Vector3 {
@@ -1464,7 +1481,7 @@
           : get_site_radius(site, site_idx)
       targets.push({ kind, site, site_idx, color, radius })
     }
-    add(`hover`, hovered_site, hovered_idx, `white`)
+    add(`hover`, hovered_site, hovered_idx, dark_mode ? `white` : `#333`)
     for (const idx of selected_sites ?? []) {
       add(`selected`, structure?.sites?.[idx] ?? null, idx, selection_highlight_color)
     }
@@ -1689,12 +1706,6 @@
   })
 </script>
 
-{#snippet bond_instanced_mesh_snippet(group: ComponentProps<typeof Bond>[`group`])}
-  {#key group.instances.length}
-    <Bond {group} />
-  {/key}
-{/snippet}
-
 {#snippet site_label_snippet(site_idx: number)}
   {@const site = structure!.sites[site_idx]}
   {#if site}
@@ -1800,42 +1811,27 @@
               />
             </T.Mesh>
 
-            {#if atom.render_start_cap}
-              <T.Mesh rotation={[0, atom.start_phi, 0]}>
-                <T.CircleGeometry
-                  args={[
-                    0.5,
-                    sphere_segments,
-                    PARTIAL_OCCUPANCY_CAP_ARC.start_cap_arc_start,
-                    PARTIAL_OCCUPANCY_CAP_ARC.arc_length,
-                  ]}
-                />
-                <T.MeshStandardMaterial
-                  color={partial_color}
-                  side={2}
-                  opacity={ghost_opacity}
-                  transparent={partial_edit_image}
-                />
-              </T.Mesh>
-            {/if}
-            {#if atom.render_end_cap}
-              <T.Mesh rotation={[0, atom.end_phi, 0]}>
-                <T.CircleGeometry
-                  args={[
-                    0.5,
-                    sphere_segments,
-                    PARTIAL_OCCUPANCY_CAP_ARC.end_cap_arc_start,
-                    PARTIAL_OCCUPANCY_CAP_ARC.arc_length,
-                  ]}
-                />
-                <T.MeshStandardMaterial
-                  color={partial_color}
-                  side={2}
-                  opacity={ghost_opacity}
-                  transparent={partial_edit_image}
-                />
-              </T.Mesh>
-            {/if}
+            <!-- Flat caps closing the wedge at its start/end azimuthal angles -->
+            {#each [[atom.render_start_cap, atom.start_phi, PARTIAL_OCCUPANCY_CAP_ARC.start_cap_arc_start], [atom.render_end_cap, atom.end_phi, PARTIAL_OCCUPANCY_CAP_ARC.end_cap_arc_start]] as const as [render_cap, phi, arc_start], cap_idx (cap_idx)}
+              {#if render_cap}
+                <T.Mesh rotation={[0, phi, 0]}>
+                  <T.CircleGeometry
+                    args={[
+                      0.5,
+                      sphere_segments,
+                      arc_start,
+                      PARTIAL_OCCUPANCY_CAP_ARC.arc_length,
+                    ]}
+                  />
+                  <T.MeshStandardMaterial
+                    color={partial_color}
+                    side={2}
+                    opacity={ghost_opacity}
+                    transparent={partial_edit_image}
+                  />
+                </T.Mesh>
+              {/if}
+            {/each}
           </T.Group>
         {/each}
 
@@ -1881,11 +1877,11 @@
       {/each}
 
       <!-- Instanced bond rendering with gradient colors -->
-      {#if instanced_bond_groups.length > 0}
-        {#each instanced_bond_groups as group (group.thickness + group.instances.length)}
-          {@render bond_instanced_mesh_snippet(group)}
-        {/each}
-      {/if}
+      {#each instanced_bond_groups as group (group.thickness + group.instances.length)}
+        {#key group.instances.length}
+          <Bond {group} />
+        {/key}
+      {/each}
 
       <!-- Coordination polyhedra: all faces in one merged mesh, edges in one
         LineSegments (1-2 draw calls regardless of supercell size) -->
@@ -1954,7 +1950,10 @@
           {#if is_hovered}
             <T.Mesh
               matrixAutoUpdate={false}
-              oncreate={(ref) => apply_non_raycastable_bond_hit_transform(ref, bond)}
+              oncreate={(ref) => {
+                apply_bond_transform(ref, bond)
+                disable_raycast(ref)
+              }}
             >
               <T.CylinderGeometry args={[bond_hover_radius, bond_hover_radius, 1, 6]} />
               <T.MeshBasicMaterial
@@ -1996,52 +1995,15 @@
             {#each BOND_ORDER_OPTIONS as { order, label } (label)}
               <button
                 type="button"
-                onpointerdown={(event: PointerEvent) => {
-                  event.preventDefault()
-                  event.stopPropagation()
-                  set_context_bond_order(order)
-                }}
-                onkeydown={(event: KeyboardEvent) => {
-                  if (event.key !== `Enter` && event.key !== ` `) return
-                  event.preventDefault()
-                  event.stopPropagation()
-                  set_context_bond_order(order)
-                }}
+                {...menu_action_props(() => set_context_bond_order(order))}
               >
                 {label}
               </button>
             {/each}
-            <button
-              type="button"
-              class="remove"
-              onpointerdown={(event: PointerEvent) => {
-                event.preventDefault()
-                event.stopPropagation()
-                remove_context_bond()
-              }}
-              onkeydown={(event: KeyboardEvent) => {
-                if (event.key !== `Enter` && event.key !== ` `) return
-                event.preventDefault()
-                event.stopPropagation()
-                remove_context_bond()
-              }}
-            >
+            <button type="button" class="remove" {...menu_action_props(remove_context_bond)}>
               Remove
             </button>
-            <button
-              type="button"
-              onpointerdown={(event: PointerEvent) => {
-                event.preventDefault()
-                event.stopPropagation()
-                close_bond_context_menu()
-              }}
-              onkeydown={(event: KeyboardEvent) => {
-                if (event.key !== `Enter` && event.key !== ` `) return
-                event.preventDefault()
-                event.stopPropagation()
-                close_bond_context_menu()
-              }}
-            >
+            <button type="button" {...menu_action_props(close_bond_context_menu)}>
               Close
             </button>
           </div>
@@ -2122,7 +2084,7 @@
           <div class="elements">
             {#each tooltip_species as { element, occu, oxidation_state: oxi_state }, idx (`${element ?? ``}-${occu ?? ``}-${oxi_state ?? ``}-${idx}`)}
               {@const element_name =
-                element_data.find((elem) => elem.symbol === element)?.name ?? ``}
+                element_by_symbol.get(element as ElementSymbol)?.name ?? ``}
               <span class="species">
                 {#if occu !== 1}<span class="occupancy">{format_num(occu, `.3~f`)}</span>{/if}
                 <strong>
@@ -2228,7 +2190,15 @@
 
       <!-- Isosurface rendering from volumetric data (CHGCAR, .cube files) -->
       {#if volumetric_data && isosurface_settings}
-        <Isosurface volume={volumetric_data} settings={isosurface_settings} />
+        {@const volume_list = Array.isArray(volumetric_data)
+          ? volumetric_data
+          : [volumetric_data]}
+        <Isosurface
+          volumes={volume_list}
+          settings={isosurface_settings}
+          {active_volume_idx}
+          tiling={volume_scaling}
+        />
       {/if}
 
       <!-- Measurement overlays for measured sites -->
@@ -2241,17 +2211,13 @@
               {@const pos_i = site_i.xyz}
               {@const pos_j = site_j.xyz}
               <Cylinder from={pos_i} to={pos_j} thickness={0.12} color={measure_line_color} />
-              {@const midpoint = [
-                (pos_i[0] + pos_j[0]) / 2,
-                (pos_i[1] + pos_j[1]) / 2,
-                (pos_i[2] + pos_j[2]) / 2,
-              ] as Vec3}
+              {@const mid_pos = midpoint(pos_i, pos_j)}
               {@const direct = math.euclidean_dist(pos_i, pos_j)}
               {@const pbc = lattice
                 ? measure.distance_pbc(pos_i, pos_j, lattice.matrix, undefined, lattice.pbc)
                 : direct}
               {@const differ = lattice ? Math.abs(pbc - direct) > 1e-6 : false}
-              <extras.HTML center position={midpoint}>
+              <extras.HTML center position={mid_pos}>
                 <span class="measure-label">
                   {#if differ}
                     PBC: {format_num(pbc, float_fmt)} Å<br /><small>

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

@@ -106,8 +106,10 @@ type $$ComponentProps = SceneControlProps & {
     add_element?: ElementSymbol;
     cursor?: string;
     dragging_atoms?: boolean;
-    volumetric_data?: VolumetricData;
+    volumetric_data?: VolumetricData | VolumetricData[];
     isosurface_settings?: IsosurfaceSettings;
+    active_volume_idx?: number;
+    volume_scaling?: Vec3;
     interactive?: boolean;
 };
 declare const StructureScene: import("svelte").Component<$$ComponentProps, {}, "cursor" | "camera" | "site_label_offset" | "vector_configs" | "orbit_controls" | "hovered_idx" | "hovered_site" | "polyhedra_rendered_elements" | "camera_is_moving" | "selected_sites" | "measured_sites" | "added_bonds" | "removed_bonds" | "bond_order_overrides" | "bond_edit_mode" | "active_sites" | "scene" | "rotation_target_ref" | "initial_computed_zoom" | "hidden_elements" | "hidden_prop_vals" | "element_radius_overrides" | "site_radius_overrides" | "add_atom_mode" | "add_element" | "dragging_atoms">;