matterviz 0.4.1 → 0.4.3

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

@@ -57,12 +57,10 @@ type $$ComponentProps = {
     hovered_k_point?: Vec3 | null;
     hovered_qpoint_index?: number | null;
     on_kpath_hover?: (qpoint_index: number | null) => void;
-    children?: Snippet<[
-        {
-            structure?: Crystal;
-            bz_data?: BrillouinZoneData;
-        }
-    ]>;
+    children?: Snippet<[{
+        structure?: Crystal;
+        bz_data?: BrillouinZoneData;
+    }]>;
     tooltip_config?: BZTooltipProp;
     on_file_load?: (data: BZHandlerData) => void;
     on_error?: (data: BZHandlerData) => void;
@@ -70,6 +68,6 @@ type $$ComponentProps = {
     on_point_hover?: (data: BZHoverData | null) => void;
     on_hover?: (data: BZHoverData | null) => void;
 } & HTMLAttributes<HTMLDivElement>;
-declare const BrillouinZone: import("svelte").Component<$$ComponentProps, {}, "structure" | "height" | "width" | "dragover" | "fullscreen" | "wrapper" | "hovered" | "controls_open" | "loading" | "camera_projection" | "vector_scale" | "png_dpi" | "info_pane_open" | "error_msg" | "bz_order" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors" | "show_ibz" | "ibz_color" | "ibz_opacity" | "bz_data" | "ibz_data">;
+declare const BrillouinZone: import("svelte").Component<$$ComponentProps, {}, "height" | "width" | "dragover" | "fullscreen" | "wrapper" | "hovered" | "controls_open" | "structure" | "camera_projection" | "vector_scale" | "loading" | "png_dpi" | "info_pane_open" | "error_msg" | "bz_order" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors" | "show_ibz" | "ibz_color" | "ibz_opacity" | "bz_data" | "ibz_data">;
 type BrillouinZone = ReturnType<typeof BrillouinZone>;
 export default BrillouinZone;

package/dist/brillouin/BrillouinZoneControls.svelte

@@ -9,7 +9,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),
     camera_projection = $bindable(`perspective`),
     // Irreducible BZ options
@@ -84,10 +84,7 @@
   <SettingsSection
     title="Edges"
     current_values={{ edge_color, edge_width }}
-    on_reset={() => {
-      edge_color = `#000000`
-      edge_width = 0.05
-    }}
+    on_reset={() => ([edge_color, edge_width] = [`#000000`, 0.002])}
   >
     <label>
       <span>Color:</span>
@@ -95,7 +92,7 @@
     </label>
     <label>
       <span>Width:</span>
-      <input type="range" min="0.01" max="0.2" step="0.01" bind:value={edge_width} />
+      <input type="range" min="0.002" max="0.02" step="0.001" bind:value={edge_width} />
       <span class="value">{edge_width.toFixed(2)}</span>
     </label>
   </SettingsSection>

package/dist/brillouin/BrillouinZoneExportPane.svelte

@@ -58,25 +58,29 @@
   const sections = $derived<ExportSection[]>([
     {
       title: `Export as image`,
-      items: [{
-        label: `PNG`,
-        disabled: !scene || !camera,
-        show_dpi: true,
-        on_download: export_as_png,
-      }],
+      items: [
+        {
+          label: `PNG`,
+          disabled: !scene || !camera,
+          show_dpi: true,
+          on_download: export_as_png,
+        },
+      ],
     },
     {
       title: `Export as data`,
       tooltip: `Includes vertices, faces, edges, and reciprocal lattice vectors`,
-      items: [{
-        label: `JSON`,
-        disabled: !bz_data,
-        on_download: export_as_json,
-        copy_text: () => {
-          const json_data = get_json_data()
-          return json_data ? JSON.stringify(json_data, null, 2) : null
+      items: [
+        {
+          label: `JSON`,
+          disabled: !bz_data,
+          on_download: export_as_json,
+          copy_text: () => {
+            const json_data = get_json_data()
+            return json_data ? JSON.stringify(json_data, null, 2) : null
+          },
         },
-      }],
+      ],
     },
   ])
 </script>

package/dist/brillouin/BrillouinZoneInfoPane.svelte

@@ -73,20 +73,16 @@
       items: [
         {
           label: `a, b, c`,
-          value: `${
-            [structure.lattice.a, structure.lattice.b, structure.lattice.c]
-              .map((val) => format_num(val, `.3~f`))
-              .join(`, `)
-          } Å`,
+          value: `${[structure.lattice.a, structure.lattice.b, structure.lattice.c]
+            .map((val) => format_num(val, `.3~f`))
+            .join(`, `)} Å`,
           key: `real-lattice-abc`,
         },
         {
           label: `α, β, γ`,
-          value: `${
-            [structure.lattice.alpha, structure.lattice.beta, structure.lattice.gamma]
-              .map((val) => format_num(val, `.2~f`))
-              .join(`, `)
-          }°`,
+          value: `${[structure.lattice.alpha, structure.lattice.beta, structure.lattice.gamma]
+            .map((val) => format_num(val, `.2~f`))
+            .join(`, `)}°`,
           key: `real-lattice-angles`,
         },
       ],

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
@@ -48,7 +48,7 @@
     auto_rotate = DEFAULTS.structure.auto_rotate,
     scene = $bindable(),
     camera = $bindable(),
-    k_path_points = [],
+    k_path_points: input_k_path_points = [],
     k_path_labels = [],
     hovered_k_point = null,
     hovered_qpoint_index = null,
@@ -75,6 +75,7 @@
     hover_data?: BZHoverData | null
     on_kpath_hover?: (qpoint_index: number | null) => void
   } = $props()
+  const k_path_points = $derived(input_k_path_points ?? [])
 
   bind_renderer((threlte_scene, threlte_camera) => {
     scene = threlte_scene
@@ -90,29 +91,31 @@
     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`).
   // Band paths are densely sampled, so legit segments are tiny; a discontinuity jumps by
   // a fraction of the zone. Skip segments far longer than the median sampling step.
   const k_path_seg_cutoff = $derived.by(() => {
-    if (!k_path_points || k_path_points.length < 3) return Infinity
+    if (k_path_points.length < 3) return Infinity
     const lens = k_path_points
       .slice(1)
       .map((pt, idx) => Math.hypot(...math.subtract(pt as Vec3, k_path_points[idx] as Vec3)))
@@ -124,9 +127,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 +167,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 +176,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,
@@ -294,18 +291,13 @@
     {/if}
 
     <!-- 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}`)
-      }
+    {#if k_path_points.length > 1}
+      {#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}
@@ -326,42 +318,28 @@
       {/each}
     {/if}
 
-    <!-- Symmetry point spheres at labeled k-path points -->
-    {#if k_path_labels}
-      {#each k_path_labels as { position, label }, idx (`sphere-${idx}`)}
-        {#if label}
-          <T.Mesh position={[position[0], position[1], position[2]]}>
-            <T.SphereGeometry args={[0.015, 16, 16]} />
-            <T.MeshStandardMaterial color="#ffcc00" metalness={0.3} roughness={0.7} />
-          </T.Mesh>
-        {/if}
-      {/each}
-    {/if}
-
-    <!-- Symmetry point labels on k-path -->
-    {#if k_path_labels}
-      {#each k_path_labels as { position, label }, idx (`${label}-${idx}`)}
-        {#if label}
-          <extras.HTML center position={position.map((coord) => coord * 1.1) as Vec3}>
-            <span
-              style="background: rgba(0, 0, 0, 0.3); padding: 0 3px; border-radius: 2px; color: white"
-            >
-              {label}
-            </span>
-          </extras.HTML>
-        {/if}
-      {/each}
-    {/if}
+    <!-- Symmetry point spheres + labels at labeled k-path points -->
+    {#each k_path_labels as { position, label }, idx (`${label}-${idx}`)}
+      {#if label}
+        <T.Mesh position={[position[0], position[1], position[2]]}>
+          <T.SphereGeometry args={[0.015, 16, 16]} />
+          <T.MeshStandardMaterial color="#ffcc00" metalness={0.3} roughness={0.7} />
+        </T.Mesh>
+        <extras.HTML center position={position.map((coord) => coord * 1.1) as Vec3}>
+          <span
+            style="background: rgba(0, 0, 0, 0.3); padding: 0 3px; border-radius: 2px; color: white"
+          >
+            {label}
+          </span>
+        </extras.HTML>
+      {/if}
+    {/each}
 
     <!-- Hovered k-point highlight -->
     {#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/brillouin/compute.js

@@ -3,8 +3,6 @@ import * as math from '../math';
 import { Vector3 } from 'three';
 import { ConvexGeometry } from 'three/examples/jsm/geometries/ConvexGeometry.js';
 const TOL = 1e-8;
-// Check if rotation matrix is identity
-const is_identity_rotation = (rot) => rot.every((row, idx) => row.every((val, jdx) => Math.abs(val - (idx === jdx ? 1 : 0)) < TOL));
 // Extract unique point group rotation matrices from space group operations.
 // Returns fractional-coordinate rotations (W matrices from spglib convention).
 // These must be converted to Cartesian k-space before use in clipping.
@@ -111,12 +109,11 @@ export function generate_bz_vertices(k_lattice, order = 1,
 // Higher values give more accurate zones but increase computation time significantly.
 // Default values: 26 (1st order), 80 (2nd order), 150 (3rd+ order)
 max_planes_by_order = { 1: 26, 2: 80, 3: 150 }) {
-    if (order > 3)
-        order = 3; // Performance limit
-    const k_points = generate_k_space_grid(k_lattice, order);
+    const clamped_order = Math.min(order, 3);
+    const k_points = generate_k_space_grid(k_lattice, clamped_order);
     const center_idx = Math.floor(k_points.length / 2);
-    // Determine max planes for this order (default to highest value for orders > 3)
-    const max_planes = max_planes_by_order[order] ?? 150;
+    // Fallback for partial records passed through compute_brillouin_zone
+    const max_planes = max_planes_by_order[clamped_order] ?? 150;
     // Create Bragg planes (perpendicular bisectors of k-points)
     const planes = k_points
         .map((pt, idx) => {
@@ -152,12 +149,12 @@ max_planes_by_order = { 1: 26, 2: 80, 3: 150 }) {
                         vertex[2] * normals[p_idx][2];
                     if (dot > distances[p_idx] + TOL) {
                         beyond_count++;
-                        if (beyond_count >= order)
+                        if (beyond_count >= clamped_order)
                             break;
                     }
                 }
                 // Vertex belongs to nth BZ if it's beyond fewer than n planes
-                if (beyond_count < order && !dedup.has_duplicate(vertex)) {
+                if (beyond_count < clamped_order && !dedup.has_duplicate(vertex)) {
                     vertices.push(vertex);
                     dedup.add(vertex);
                 }
@@ -166,13 +163,10 @@ max_planes_by_order = { 1: 26, 2: 80, 3: 150 }) {
     }
     return vertices;
 }
-// Compute polyhedron volume via divergence theorem (sum of signed tetrahedral volumes)
+// Compute polyhedron volume via divergence theorem (sum of signed tetrahedral volumes).
+// Faces always come from compute_convex_hull, so each is a valid triangle.
 function compute_hull_volume(vertices, faces) {
-    if (faces.length === 0)
-        return 0;
     return Math.abs(faces.reduce((sum, face) => {
-        if (face.length < 3)
-            return sum;
         const [v0, v1, v2] = face.slice(0, 3).map((idx) => vertices[idx]);
         const area_normal = math.scale(math.cross_3d(math.subtract(v1, v0), math.subtract(v2, v0)), 0.5);
         return sum + math.dot(v0, area_normal) / 3;
@@ -255,7 +249,7 @@ max_planes_by_order = { 1: 26, 2: 80, 3: 150 }) {
     }
     const hull = compute_convex_hull(vertices, edge_sharp_angle_deg);
     return {
-        order,
+        order: Math.min(order, 3),
         vertices: hull.vertices,
         faces: hull.faces,
         edges: hull.edges.map(([i1, i2]) => [hull.vertices[i1], hull.vertices[i2]]),
@@ -305,7 +299,7 @@ export function find_ibz_reference_direction(non_identity_ops) {
 // of exactly volume(BZ)/|G|. (Using a different reference point per operation — or
 // flipping individual planes — does NOT yield a fundamental domain in general.)
 export function compute_ibz_clipping_planes(point_group_ops) {
-    const non_identity_ops = point_group_ops.filter((rot) => !is_identity_rotation(rot));
+    const non_identity_ops = point_group_ops.filter((rot) => !rot.every((row, idx) => row.every((val, jdx) => Math.abs(val - (idx === jdx ? 1 : 0)) < TOL)));
     if (non_identity_ops.length === 0)
         return [];
     const ref_dir = find_ibz_reference_direction(non_identity_ops);

package/dist/brillouin/geometry.js

@@ -32,12 +32,12 @@ export function polyhedron_geometry(vertices, faces) {
     geometry.computeBoundingSphere();
     return geometry;
 }
-// Inverse of the reciprocal lattice for Cartesian -> fractional conversion; null if the lattice is missing or singular
+// Cartesian → fractional via transposed row-vector inverse; null if missing/singular
 export function k_lattice_inverse(k_lattice) {
     if (!k_lattice)
         return null;
     try {
-        return math.matrix_inverse_3x3(k_lattice);
+        return math.create_cart_to_frac_matrix(k_lattice);
     }
     catch {
         return null;

package/dist/chempot-diagram/ChemPotDiagram.svelte

@@ -10,9 +10,10 @@
   import ChemPotDiagram3D from './ChemPotDiagram3D.svelte'
   import { get_ternary_combinations } from './compute'
   import type {
-      ChemPotDiagramConfig,
-      ChemPotHoverInfo,
-      ChemPotHoverInfo3D,
+    AxisRangeData,
+    ChemPotDiagramConfig,
+    ChemPotHoverInfo,
+    ChemPotHoverInfo3D,
   } from './types'
   import { CHEMPOT_DEFAULTS } from './types'
   import { to_error } from '../utils'
@@ -37,27 +38,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,30 +80,47 @@
     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 },
     )
   })
 </script>
 
+{#snippet axis_ranges_section(ranges: AxisRangeData[])}
+  <h5 id="axis-ranges">Axis ranges</h5>
+  {#each ranges as axis_range (axis_range.element)}
+    <p>
+      {axis_range.element}: {format_num(axis_range.min_val, `.4~g`)} to
+      {format_num(axis_range.max_val, `.4~g`)} eV
+    </p>
+  {/each}
+{/snippet}
+
 <div class="chempot-diagram-wrapper">
   {#if n_display < 2}
     <div
@@ -184,17 +200,13 @@ 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`}
-          <h5 id="axis-ranges">Axis ranges</h5>
-          {#each hover_info.axis_ranges as axis_range (axis_range.element)}
-            <p>
-              {axis_range.element}: {format_num(axis_range.min_val, `.4~g`)} to
-              {format_num(axis_range.max_val, `.4~g`)} eV
-            </p>
-          {/each}
+          {@render axis_ranges_section(hover_info.axis_ranges)}
         {/if}
       {:else if is_hover_info_3d(hover_info)}
         <p>
@@ -209,35 +221,24 @@ 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}
         </p>
         {#if tooltip_detail_level === `detailed`}
-          <h5 id="axis-ranges-1">Axis ranges</h5>
-          {#each hover_info.axis_ranges as axis_range (axis_range.element)}
-            <p>
-              {axis_range.element}: {format_num(axis_range.min_val, `.4~g`)} to
-              {format_num(axis_range.max_val, `.4~g`)} eV
-            </p>
-          {/each}
+          {@render axis_ranges_section(hover_info.axis_ranges)}
           <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 +296,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;