matterviz 0.4.1 → 0.4.2

package/dist/brillouin/BrillouinZoneScene.svelte

@@ -25,7 +25,7 @@
     surface_color = $bindable(`#4488ff`),
     surface_opacity = $bindable(0.3),
     edge_color = $bindable(`#000000`),
-    edge_width = $bindable(0.05),
+    edge_width = $bindable(0.002),
     show_vectors = $bindable(true),
     vector_scale = $bindable(1.0),
     // Irreducible BZ options
@@ -90,22 +90,24 @@
     camera_position || default_camera_position(bz_size),
   )
 
-  const orbit_controls_props = $derived(build_orbit_props({
-    camera_projection,
-    target: rotation_target,
-    rotate_speed,
-    zoom_speed,
-    zoom_to_cursor,
-    pan_speed,
-    max_zoom,
-    min_zoom,
-    auto_rotate,
-    rotation_damping,
-  }))
+  const orbit_controls_props = $derived(
+    build_orbit_props({
+      camera_projection,
+      target: rotation_target,
+      rotate_speed,
+      zoom_speed,
+      zoom_to_cursor,
+      pan_speed,
+      max_zoom,
+      min_zoom,
+      auto_rotate,
+      rotation_damping,
+    }),
+  )
 
   // K-path styling. The invisible hover proxy is twice the visible thickness so the cursor
   // snaps to the path even when it isn't directly over the thin visible segment.
-  const KPATH_THICKNESS = 0.12
+  const KPATH_THICKNESS = 0.012
   const KPATH_HOVER_THICKNESS = KPATH_THICKNESS * 2
 
   // Threshold for skipping k-path segments that bridge a path discontinuity (e.g. `U|K`).
@@ -124,9 +126,7 @@
     bz_data ? polyhedron_geometry(bz_data.vertices, bz_data.faces) : null,
   )
   const ibz_geometry = $derived(
-    show_ibz && ibz_data
-      ? polyhedron_geometry(ibz_data.vertices, ibz_data.faces)
-      : null,
+    show_ibz && ibz_data ? polyhedron_geometry(ibz_data.vertices, ibz_data.faces) : null,
   )
 
   // Separate effects to avoid disposing one geometry when only the other changes
@@ -166,10 +166,7 @@
   })
 
   // Create hover data from pointer event
-  function create_hover_data(
-    event: ThreltePointerEvent,
-    is_ibz: boolean,
-  ): BZHoverData | null {
+  function create_hover_data(event: ThreltePointerEvent, is_ibz: boolean): BZHoverData | null {
     if (!bz_data) return null
 
     const position_cartesian: Vec3 = [event.point.x, event.point.y, event.point.z]
@@ -178,9 +175,8 @@
     const { clientX, clientY } = event.nativeEvent
     const ibz_vol = ibz_data?.volume ?? null
     // Round to nearest integer since symmetry multiplicity is the point group order
-    const symmetry_multiplicity = ibz_vol != null && ibz_vol > 0
-      ? Math.round(bz_data.volume / ibz_vol)
-      : null
+    const symmetry_multiplicity =
+      ibz_vol != null && ibz_vol > 0 ? Math.round(bz_data.volume / ibz_vol) : null
 
     return {
       position_cartesian,
@@ -295,17 +291,12 @@
 
     <!-- K-path visualization -->
     {#if k_path_points && k_path_points.length > 1}
-      {#each k_path_points.slice(0, -1) as
-        from_point,
-        idx
-        (`${from_point}-${k_path_points[idx + 1]}#${idx}`)
-      }
+      {#each k_path_points.slice(0, -1) as from_point, idx (`${from_point}-${k_path_points[idx + 1]}#${idx}`)}
         {@const to_point = k_path_points[idx + 1]}
-        {@const seg_len = Math.hypot(
-      ...math.subtract(to_point as Vec3, from_point as Vec3),
-    )}
-        {@const is_hovered = hovered_qpoint_index !== null &&
-      (idx === hovered_qpoint_index || idx === hovered_qpoint_index - 1)}
+        {@const seg_len = Math.hypot(...math.subtract(to_point as Vec3, from_point as Vec3))}
+        {@const is_hovered =
+          hovered_qpoint_index !== null &&
+          (idx === hovered_qpoint_index || idx === hovered_qpoint_index - 1)}
         {#if seg_len <= k_path_seg_cutoff}
           <Cylinder
             from={from_point as Vec3}
@@ -357,11 +348,7 @@
     {#if hovered_k_point}
       <T.Mesh position={hovered_k_point}>
         <T.SphereGeometry args={[0.03, 16, 16]} />
-        <T.MeshStandardMaterial
-          color="#ff0000"
-          emissive="#ff0000"
-          emissiveIntensity={1.2}
-        />
+        <T.MeshStandardMaterial color="#ff0000" emissive="#ff0000" emissiveIntensity={1.2} />
       </T.Mesh>
     {/if}
   {/if}

package/dist/brillouin/BrillouinZoneScene.svelte.d.ts

@@ -24,6 +24,6 @@ type $$ComponentProps = SceneControlProps & {
     hover_data?: BZHoverData | null;
     on_kpath_hover?: (qpoint_index: number | null) => void;
 };
-declare const BrillouinZoneScene: import("svelte").Component<$$ComponentProps, {}, "scene" | "camera" | "camera_projection" | "camera_position" | "vector_scale" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors" | "bz_data" | "hover_data">;
+declare const BrillouinZoneScene: import("svelte").Component<$$ComponentProps, {}, "camera" | "camera_projection" | "camera_position" | "vector_scale" | "scene" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors" | "bz_data" | "hover_data">;
 type BrillouinZoneScene = ReturnType<typeof BrillouinZoneScene>;
 export default BrillouinZoneScene;

package/dist/chempot-diagram/ChemPotDiagram.svelte

@@ -9,11 +9,7 @@
   import ChemPotDiagram2D from './ChemPotDiagram2D.svelte'
   import ChemPotDiagram3D from './ChemPotDiagram3D.svelte'
   import { get_ternary_combinations } from './compute'
-  import type {
-      ChemPotDiagramConfig,
-      ChemPotHoverInfo,
-      ChemPotHoverInfo3D,
-  } from './types'
+  import type { ChemPotDiagramConfig, ChemPotHoverInfo, ChemPotHoverInfo3D } from './types'
   import { CHEMPOT_DEFAULTS } from './types'
   import { to_error } from '../utils'
 
@@ -37,27 +33,25 @@
   // Extract unique elements from all entries (composition keys are element symbols)
   const all_elements = $derived(
     [
-      ...new Set(entries.flatMap((entry) =>
-        Object.entries(entry.composition)
-          .filter(([, amount]) => amount > 0)
-          .map(([element]) => element)
-      )),
+      ...new Set(
+        entries.flatMap((entry) =>
+          Object.entries(entry.composition)
+            .filter(([, amount]) => amount > 0)
+            .map(([element]) => element),
+        ),
+      ),
     ].toSorted(),
   )
 
   // How many display axes (2 = binary/2D, 3+ = ternary/3D)
   const display_elements = $derived(config.elements ?? all_elements)
   const n_display = $derived(display_elements.length)
-  const show_tooltip = $derived(
-    config.show_tooltip ?? CHEMPOT_DEFAULTS.show_tooltip,
-  )
+  const show_tooltip = $derived(config.show_tooltip ?? CHEMPOT_DEFAULTS.show_tooltip)
   const tooltip_detail_level = $derived(
     config.tooltip_detail_level ?? CHEMPOT_DEFAULTS.tooltip_detail_level,
   )
 
-  const projection_mode = $derived(
-    config.projection_mode ?? CHEMPOT_DEFAULTS.projection_mode,
-  )
+  const projection_mode = $derived(config.projection_mode ?? CHEMPOT_DEFAULTS.projection_mode)
   // For quaternary+ in grid mode, generate all C(n,3) ternary projections
   // Uses display_elements (not all_elements) so config.elements scopes the grid
   const ternary_combos = $derived(
@@ -81,25 +75,32 @@
     if (!show_grid) return
     let cancelled = false
     compute_chempot_async(entries, { ...config, elements: ternary_combos[0] })
-      .then(() => { if (!cancelled) grid_cache_ready = true })
+      .then(() => {
+        if (!cancelled) grid_cache_ready = true
+      })
       .catch((err) => {
         if (cancelled) return
         console.error(`Grid precompute failed:`, err)
         grid_error = to_error(err).message
       })
-    return () => { cancelled = true }
+    return () => {
+      cancelled = true
+    }
   })
-const is_hover_info_3d = (value: ChemPotHoverInfo | null): value is ChemPotHoverInfo3D => value?.view === `3d`
+  const is_hover_info_3d = (value: ChemPotHoverInfo | null): value is ChemPotHoverInfo3D =>
+    value?.view === `3d`
 
   let tooltip_el = $state<HTMLElement>()
   const tooltip_pos = $derived.by(() => {
     const pointer = hover_info?.pointer
     if (!pointer) return { x: 4, y: 4 }
     return constrain_tooltip_position(
-      pointer.x, pointer.y,
+      pointer.x,
+      pointer.y,
       tooltip_el?.offsetWidth ?? 200,
       tooltip_el?.offsetHeight ?? 100,
-      width, height,
+      width,
+      height,
       { offset: 0 },
     )
   })
@@ -184,7 +185,9 @@ const is_hover_info_3d = (value: ChemPotHoverInfo | null): value is ChemPotHover
       style:left="{tooltip_pos.x}px"
       style:top="{tooltip_pos.y}px"
     >
-      <h4>{@html sanitize_html(get_electro_neg_formula(hover_info.formula, false, ``, `.3~s`))}</h4>
+      <h4>
+        {@html sanitize_html(get_electro_neg_formula(hover_info.formula, false, ``, `.3~s`))}
+      </h4>
       {#if hover_info.view === `2d`}
         <p>2D domain · Points: {hover_info.n_points}</p>
         {#if tooltip_detail_level === `detailed`}
@@ -209,8 +212,7 @@ const is_hover_info_3d = (value: ChemPotHoverInfo | null): value is ChemPotHover
         </p>
         <p>
           Entries: {hover_info.matching_entry_count}
-          {#if hover_info.min_energy_per_atom !== null &&
-          hover_info.max_energy_per_atom !== null}
+          {#if hover_info.min_energy_per_atom !== null && hover_info.max_energy_per_atom !== null}
             · E/atom: {format_num(hover_info.min_energy_per_atom, `.4~g`)}
             to {format_num(hover_info.max_energy_per_atom, `.4~g`)} eV
           {/if}
@@ -224,20 +226,16 @@ const is_hover_info_3d = (value: ChemPotHoverInfo | null): value is ChemPotHover
             </p>
           {/each}
           <p>
-            Centroid: ({
-              hover_info.ann_loc.map((value) => format_num(value, `.3~g`)).join(
-                `, `,
-              )
-            })
+            Centroid: ({hover_info.ann_loc
+              .map((value) => format_num(value, `.3~g`))
+              .join(`, `)})
           </p>
           {#if hover_info.neighbors.length > 0}
             <h5 id="neighbors">Neighbors ({hover_info.neighbors.length})</h5>
             <p>
-              {
-                hover_info.neighbors.map((formula) =>
-                  get_electro_neg_formula(formula, true, ``, `.3~s`)
-                ).join(`, `)
-              }
+              {hover_info.neighbors
+                .map((formula) => get_electro_neg_formula(formula, true, ``, `.3~s`))
+                .join(`, `)}
             </p>
           {/if}
           {#if hover_info.touches_limits.length > 0}
@@ -295,10 +293,7 @@ const is_hover_info_3d = (value: ChemPotHoverInfo | null): value is ChemPotHover
   .chempot-tooltip {
     position: absolute;
     max-width: min(32rem, 92vw);
-    background: var(
-      --tooltip-bg,
-      light-dark(rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0.9))
-    );
+    background: var(--tooltip-bg, light-dark(rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0.9)));
     color: var(--tooltip-text, var(--text-color, #222));
     border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
     border-radius: 6px;

package/dist/chempot-diagram/ChemPotDiagram2D.svelte

@@ -78,15 +78,18 @@
   const render_height = $derived(Math.round(render_width * base_aspect_ratio))
 
   // === Control overrides (override ?? config ?? default, cleared by Reset) ===
-  const overrides = create_chempot_overrides(() => config, [
-    `formal_chempots`,
-    `label_stable`,
-    `element_padding`,
-    `default_min_limit`,
-    `color_mode`,
-    `color_scale`,
-    `reverse_color_scale`,
-  ])
+  const overrides = create_chempot_overrides(
+    () => config,
+    [
+      `formal_chempots`,
+      `label_stable`,
+      `element_padding`,
+      `default_min_limit`,
+      `color_mode`,
+      `color_scale`,
+      `reverse_color_scale`,
+    ],
+  )
   const formal_chempots = $derived(overrides.resolve(`formal_chempots`))
   const label_stable = $derived(overrides.resolve(`label_stable`))
   const element_padding = $derived(overrides.resolve(`element_padding`))
@@ -120,10 +123,7 @@
     if (next_temperature !== temperature) temperature = next_temperature
   })
 
-  const show_temperature_slider = $derived(
-    has_temp_data && available_temperatures.length > 0,
-  )
-
+  const show_temperature_slider = $derived(has_temp_data && available_temperatures.length > 0)
 
   // === Diagram computation (off main thread via Web Worker) ===
   let diagram_data = $state<ChemPotDiagramData | null>(null)
@@ -148,12 +148,12 @@
         diagram_data = null
         diagram_computing = false
       })
-    return () => { cancelled = true }
+    return () => {
+      cancelled = true
+    }
   })
 
-  const plot_elements = $derived(
-    (diagram_data?.elements ?? config.elements ?? []).slice(0, 2),
-  )
+  const plot_elements = $derived((diagram_data?.elements ?? config.elements ?? []).slice(0, 2))
 
   const draw_domains = $derived.by(() => {
     if (!diagram_data || plot_elements.length < 2) return {}
@@ -191,9 +191,7 @@
   }
   type NumericColorMode = Exclude<ChemPotColorMode, `none` | `arity`>
 
-  const raw_el_refs = $derived(
-    get_min_entries_and_el_refs(temp_filtered_entries).el_refs,
-  )
+  const raw_el_refs = $derived(get_min_entries_and_el_refs(temp_filtered_entries).el_refs)
   const entry_energy_stats_by_formula = $derived.by(
     (): SvelteMap<string, FormulaEnergyStats> => {
       const stats = new SvelteMap<string, FormulaEnergyStats>()
@@ -229,11 +227,7 @@
       return entry_energy_stats_by_formula.get(formula)?.min_energy_per_atom ?? null
     }
     if (active_color_mode === `formation_energy`) {
-      return best_form_energy_for_formula(
-        temp_filtered_entries,
-        formula,
-        raw_el_refs,
-      ) ?? null
+      return best_form_energy_for_formula(temp_filtered_entries, formula, raw_el_refs) ?? null
     }
     return entry_energy_stats_by_formula.get(formula)?.matching_entry_count ?? 0
   }
@@ -275,24 +269,22 @@
     }
     return colors
   })
-  const color_range = $derived.by(
-    (): { min: number; max: number; label: string } | null => {
-      const values = domain_color_values?.values ?? []
-      if (values.length === 0) return null
-      let min_val = values[0], max_val = values[0]
-      for (let idx = 1; idx < values.length; idx++) {
-        if (values[idx] < min_val) min_val = values[idx]
-        if (values[idx] > max_val) max_val = values[idx]
-      }
-      return {
-        min: min_val,
-        max: Math.max(max_val, min_val + 1e-6),
-        label: color_mode === `none` || color_mode === `arity`
-          ? ``
-          : color_mode_labels[color_mode],
-      }
-    },
-  )
+  const color_range = $derived.by((): { min: number; max: number; label: string } | null => {
+    const values = domain_color_values?.values ?? []
+    if (values.length === 0) return null
+    let min_val = values[0],
+      max_val = values[0]
+    for (let idx = 1; idx < values.length; idx++) {
+      if (values[idx] < min_val) min_val = values[idx]
+      if (values[idx] > max_val) max_val = values[idx]
+    }
+    return {
+      min: min_val,
+      max: Math.max(max_val, min_val + 1e-6),
+      label:
+        color_mode === `none` || color_mode === `arity` ? `` : color_mode_labels[color_mode],
+    }
+  })
 
   // === Convert domains to ScatterPlot DataSeries ===
   const series = $derived<DataSeries[]>(
@@ -350,11 +342,7 @@
   // === Hover info for external consumers ===
   let locked_hover_formula = $state<string | null>(null)
 
-  function set_hover_info(
-    formula: string,
-    pts: number[][],
-    event: MouseEvent,
-  ): void {
+  function set_hover_info(formula: string, pts: number[][], event: MouseEvent): void {
     const bounds = wrapper?.getBoundingClientRect()
     hover_info = with_hover_pointer<ChemPotHoverInfo>(
       {
@@ -387,9 +375,7 @@
     set_hover_info(formula, pts, data.event)
   }
 
-  function handle_click(
-    data: { point: { series_idx: number }; event: MouseEvent },
-  ): void {
+  function handle_click(data: { point: { series_idx: number }; event: MouseEvent }): void {
     const entry = domain_entries[data.point.series_idx]
     if (!entry) return
     const [formula, pts] = entry
@@ -406,10 +392,12 @@
     const pointer = hover_info?.pointer
     if (!pointer) return { x: 4, y: 4 }
     return constrain_tooltip_position(
-      pointer.x, pointer.y,
+      pointer.x,
+      pointer.y,
       tooltip_el?.offsetWidth ?? 150,
       tooltip_el?.offsetHeight ?? 40,
-      render_width, render_height,
+      render_width,
+      render_height,
       { offset: 0 },
     )
   })
@@ -447,11 +435,13 @@
     },
     {
       title: `Export Data`,
-      items: [{
-        label: `JSON`,
-        on_download: () => export_json_file(json_payload, export_basename),
-        copy_text: () => get_json_string(json_payload),
-      }],
+      items: [
+        {
+          label: `JSON`,
+          on_download: () => export_json_file(json_payload, export_basename),
+          copy_text: () => get_json_string(json_payload),
+        },
+      ],
     },
   ])
 </script>
@@ -477,8 +467,7 @@
     toggle_props={{
       class: `chempot-export-toggle`,
       title: `Export chemical potential diagram`,
-      style:
-        `position: absolute; top: var(--ctrl-btn-top, 5pt); right: 36px; z-index: 10`,
+      style: `position: absolute; top: var(--ctrl-btn-top, 5pt); right: 36px; z-index: 10`,
     }}
   />
 {/snippet}
@@ -509,7 +498,7 @@
       step="0.1"
       value={element_padding}
       oninput={(event) =>
-      overrides.set(`element_padding`, Number(event.currentTarget.value) || 0)}
+        overrides.set(`element_padding`, Number(event.currentTarget.value) || 0)}
     />
   </label>
   <label>
@@ -534,7 +523,7 @@
     <select
       value={color_mode}
       onchange={(event) =>
-      overrides.set(`color_mode`, event.currentTarget.value as typeof color_mode)}
+        overrides.set(`color_mode`, event.currentTarget.value as typeof color_mode)}
     >
       {#each CHEMPOT_COLOR_MODE_OPTIONS as [value, label] (value)}
         <option {value}>{label}</option>
@@ -547,7 +536,7 @@
       <select
         value={color_scale}
         onchange={(event) =>
-        overrides.set(`color_scale`, event.currentTarget.value as D3InterpolateName)}
+          overrides.set(`color_scale`, event.currentTarget.value as D3InterpolateName)}
       >
         {#each CHEMPOT_COLOR_SCALE_OPTIONS as [value, label] (value)}
           <option {value}>{label}</option>
@@ -589,9 +578,9 @@
     onpointerdown={(event) => {
       const target = event.target
       if (!locked_hover_formula) return
-      const is_background_click = target === wrapper ||
-        (target instanceof SVGElement &&
-          target.closest(`g[data-series-id]`) === null)
+      const is_background_click =
+        target === wrapper ||
+        (target instanceof SVGElement && target.closest(`g[data-series-id]`) === null)
       if (is_background_click) {
         clear_hover_lock()
       }
@@ -614,9 +603,9 @@
     />
     {#if color_mode !== `none` && color_mode !== `arity` && color_range}
       {@const color_bar_config = get_chempot_color_bar_config(
-      color_scale,
-      reverse_color_scale,
-    )}
+        color_scale,
+        reverse_color_scale,
+      )}
       <ColorBar
         title={color_range.label}
         range={[color_range.min, color_range.max]}
@@ -669,7 +658,9 @@
   }
   .chempot-diagram-2d > :global(.pane-toggle) {
     opacity: 0;
-    transition: opacity 0.2s, background-color 0.2s;
+    transition:
+      opacity 0.2s,
+      background-color 0.2s;
   }
   .chempot-diagram-2d:hover > :global(.pane-toggle),
   .chempot-diagram-2d > :global(.pane-toggle:focus-visible),
@@ -716,10 +707,7 @@
   }
   .tooltip {
     position: absolute;
-    background: var(
-      --tooltip-bg,
-      light-dark(rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0.9))
-    );
+    background: var(--tooltip-bg, light-dark(rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0.9)));
     color: var(--tooltip-text, var(--text-color, #fff));
     padding: 4px 8px;
     border-radius: 4px;

package/dist/chempot-diagram/ChemPotDiagram2D.svelte.d.ts

@@ -14,6 +14,6 @@ type $$ComponentProps = {
     fullscreen?: boolean;
     export_pane_open?: boolean;
 };
-declare const ChemPotDiagram2D: import("svelte").Component<$$ComponentProps, {}, "height" | "width" | "temperature" | "fullscreen" | "wrapper" | "export_pane_open" | "hover_info">;
+declare const ChemPotDiagram2D: import("svelte").Component<$$ComponentProps, {}, "height" | "width" | "fullscreen" | "wrapper" | "export_pane_open" | "temperature" | "hover_info">;
 type ChemPotDiagram2D = ReturnType<typeof ChemPotDiagram2D>;
 export default ChemPotDiagram2D;