matterviz 0.3.0 → 0.3.2

package/dist/spectral/Bands.svelte.d.ts

@@ -1,6 +1,6 @@
 import ScatterPlot from '../plot/ScatterPlot.svelte';
 import type { AxisConfig } from '../plot/types';
-import type { BandStructureType, BaseBandStructure, LineKwargs, PathMode, RibbonConfig } from './types';
+import type { BandsSpinMode, BandStructureType, BaseBandStructure, FrequencyUnit, LineKwargs, PathMode, RibbonConfig } from './types';
 import type { ComponentProps } from 'svelte';
 type $$ComponentProps = ComponentProps<typeof ScatterPlot> & {
     band_structs: BaseBandStructure | Record<string, BaseBandStructure>;
@@ -14,7 +14,27 @@ type $$ComponentProps = ComponentProps<typeof ScatterPlot> & {
     reference_frequency?: number | null;
     ribbon_config?: RibbonConfig | Record<string, RibbonConfig>;
     fermi_level?: number;
+    units?: FrequencyUnit;
+    band_spin_mode?: BandsSpinMode;
+    highlight_regions?: {
+        y_min: number;
+        y_max: number;
+        color?: string;
+        opacity?: number;
+        label?: string;
+    }[];
+    shade_imaginary_modes?: boolean;
+    show_gap_annotation?: boolean;
+    show_controls?: boolean;
+    show_path_mode_control?: boolean;
+    show_units_control?: boolean;
+    show_spin_control?: boolean;
+    show_annotation_controls?: boolean;
+    id?: string;
+    class?: string;
+    style?: string;
+    'data-testid'?: string;
 };
-declare const Bands: import("svelte").Component<$$ComponentProps, {}, "y_axis" | "x_positions">;
+declare const Bands: import("svelte").Component<$$ComponentProps, {}, "y_axis" | "units" | "x_positions" | "band_spin_mode">;
 type Bands = ReturnType<typeof Bands>;
 export default Bands;

package/dist/spectral/helpers.d.ts

@@ -4,7 +4,6 @@ import type { RibbonConfig } from './types';
 export declare const is_valid_range: (range: unknown) => range is Vec2;
 export declare const ranges_equal: (a: Vec2 | undefined | null, b: Vec2 | undefined | null, tol?: number) => boolean;
 export declare function detect_zoom_change(bands_range: unknown, dos_range: unknown, shared_range: Vec2, current_synced: Vec2 | null, dos_enabled?: boolean): Vec2 | null | undefined;
-export declare const N_ACOUSTIC_MODES = 3;
 export declare const IMAGINARY_MODE_NOISE_THRESHOLD = 0.005;
 export declare function pretty_sym_point(symbol: string): string;
 export declare const get_segment_key: (start_label?: string, end_label?: string) => string;
@@ -92,4 +91,27 @@ export declare const DEFAULT_UNITS: types.FrequencyUnit;
 export declare function format_sigma(val: number): string;
 export declare function validate_sigma_range([min, max]: [number, number]): [number, number];
 export declare function calculate_sigma_step(range: [number, number]): number;
+export interface BandPointMeta extends Record<string, unknown> {
+    band_idx: number;
+    spin: `up` | `down`;
+    is_acoustic: boolean | null;
+    nb_bands: number;
+    frac_coords: Vec3 | null;
+    qpoint_label: string | null;
+    band_width: number | null;
+    slope: number | null;
+}
+export declare function compute_slope(x_vals: number[], y_vals: number[], idx: number): number | null;
+export declare function find_gamma_indices(bs: types.BaseBandStructure): number[];
+export declare const ACOUSTIC_FREQ_THRESHOLD = 0.5;
+export declare function classify_acoustic(bs: types.BaseBandStructure, band_idx: number, gamma_indices: number[], threshold?: number): boolean | null;
+export declare function build_point_metadata(opts: {
+    x_vals: number[];
+    y_vals: number[];
+    band_idx: number;
+    spin: `up` | `down`;
+    is_acoustic: boolean | null;
+    bs: types.BaseBandStructure;
+    start_idx: number;
+}): BandPointMeta[];
 export {};

package/dist/spectral/helpers.js

@@ -52,7 +52,6 @@ const THz_TO_MEV = THz_TO_EV * 1000;
 const THz_TO_HA = THz_TO_EV / 27.211386245988; // Hartree
 const THz_TO_CM = THz_TO_HZ / (C_LIGHT * 100); // cm^-1 (c in cm/s)
 // Band structure constants
-export const N_ACOUSTIC_MODES = 3; // Number of acoustic modes in typical 3D crystals
 export const IMAGINARY_MODE_NOISE_THRESHOLD = 0.005; // Clamp negatives < 0.5% as noise
 // Convert symmetry point symbols to pretty-printed versions.
 // Handles Greek letters (both plain and LaTeX backslash-prefixed) and subscripts.
@@ -311,11 +310,6 @@ const CM_TO_THZ = 1 / THz_TO_CM;
 // Spin key constants for pymatgen spin-polarized data
 const SPIN_UP_KEYS = [`1`, `Spin.up`];
 const SPIN_DOWN_KEYS = [`-1`, `Spin.down`];
-// Extract first spin channel from pymatgen spin-keyed data.
-// Thin wrapper around extract_spin_channels for backwards compatibility.
-function extract_first_spin_channel(data) {
-    return extract_spin_channels(data)?.up ?? null;
-}
 // Extract both spin channels from pymatgen spin-keyed data.
 // Returns { up: T, down: T | null } where down is null for non-spin-polarized data.
 export function extract_spin_channels(data) {
@@ -359,7 +353,9 @@ function convert_pymatgen_band_structure(pmg) {
     // 1. Standard pymatgen: bands as dict with spin keys {1: [[...], ...]}
     // 2. Custom phonon format: frequencies_cm as 2D array [[...], ...]
     // 3. Already normalized: bands as 2D array [[...], ...]
-    let raw_bands = extract_first_spin_channel(pmg.bands);
+    const spin_channels = extract_spin_channels(pmg.bands);
+    let raw_bands = spin_channels?.up ?? null;
+    let raw_spin_down_bands = spin_channels?.down ?? null;
     const has_frequencies_cm = Array.isArray(pmg.frequencies_cm);
     if (!raw_bands && has_frequencies_cm) {
         // Phonon format: frequencies_cm is [n_qpoints x n_branches] - needs transpose
@@ -367,6 +363,7 @@ function convert_pymatgen_band_structure(pmg) {
         if (freqs.length > 0 && Array.isArray(freqs[0])) {
             // Transpose: [n_qpoints x n_branches] -> [n_branches x n_qpoints]
             raw_bands = Array.from({ length: freqs[0].length }, (_, band_idx) => freqs.map((qpt_freqs) => qpt_freqs[band_idx]));
+            raw_spin_down_bands = null;
         }
     }
     const labels_dict = pmg.labels_dict;
@@ -377,7 +374,7 @@ function convert_pymatgen_band_structure(pmg) {
     if (!Array.isArray(raw_qpts) || !Array.isArray(raw_bands) ||
         !raw_qpts.length || !raw_bands.length)
         return null;
-    const qpoints = raw_qpts.map((q) => parse_qpoint(q, labels_dict)).filter(Boolean);
+    const qpoints = raw_qpts.map((q) => parse_qpoint(q, labels_dict)).filter((q) => q !== null);
     if (!qpoints.length)
         return null;
     // Step distances and discontinuity detection (5x median threshold)
@@ -432,11 +429,19 @@ function convert_pymatgen_band_structure(pmg) {
             return val * CM_TO_THZ;
         return val; // THz (default) - no conversion
     };
+    const converted_bands = raw_bands.map((band) => band.map(convert_to_thz));
+    const valid_spin_down_bands = Array.isArray(raw_spin_down_bands) &&
+        raw_spin_down_bands.length === raw_bands.length &&
+        raw_spin_down_bands.every((band, band_idx) => Array.isArray(band) && band.length === raw_bands[band_idx]?.length)
+        ? raw_spin_down_bands
+        : null;
+    const converted_spin_down_bands = valid_spin_down_bands?.map((band) => band.map(convert_to_thz));
     return {
         qpoints,
         branches,
         distance,
-        bands: raw_bands.map((band) => band.map(convert_to_thz)),
+        bands: converted_bands,
+        spin_down_bands: converted_spin_down_bands,
         nb_bands: raw_bands.length,
         labels_dict: labels_dict ?? {},
         recip_lattice: { matrix: lattice_rec?.matrix ?? [[1, 0, 0], [0, 1, 0], [0, 0, 1]] },
@@ -953,3 +958,54 @@ export function calculate_sigma_step(range) {
     const [min, max] = validate_sigma_range(range);
     return (max - min) / 100 || 0.01;
 }
+// Central difference for local slope (dω/dk or dE/dk).
+// Uses forward/backward difference at endpoints, central difference for interior points.
+export function compute_slope(x_vals, y_vals, idx) {
+    const len = Math.min(x_vals.length, y_vals.length);
+    if (len < 2 || idx < 0 || idx >= len)
+        return null;
+    const lo = idx === 0 ? 0 : idx - 1;
+    const hi = idx >= len - 1 ? len - 1 : idx + 1;
+    const dx = x_vals[hi] - x_vals[lo];
+    return dx ? (y_vals[hi] - y_vals[lo]) / dx : null;
+}
+// Find Gamma-point indices (q ≈ integer lattice point) in a band structure.
+// Returns indices of q-points whose fractional coordinates are all within 0.01 of integers.
+export function find_gamma_indices(bs) {
+    const indices = [];
+    for (let q_idx = 0; q_idx < bs.qpoints.length; q_idx++) {
+        const coords = bs.qpoints[q_idx]?.frac_coords;
+        if (coords?.every((coord) => Math.abs(coord - Math.round(coord)) < 0.01)) {
+            indices.push(q_idx);
+        }
+    }
+    return indices;
+}
+// Threshold below which a band's frequency at Gamma is considered acoustic (THz).
+// Assumes bands are stored in THz (normalize_band_structure converts to THz).
+export const ACOUSTIC_FREQ_THRESHOLD = 0.5;
+// Classify a band as acoustic based on near-zero frequency at Gamma points.
+// Returns true (acoustic), false (optical), or null (no Gamma points → can't determine).
+export function classify_acoustic(bs, band_idx, gamma_indices, threshold = ACOUSTIC_FREQ_THRESHOLD) {
+    if (gamma_indices.length === 0)
+        return null;
+    return gamma_indices.some((gamma_idx) => Math.abs(bs.bands[band_idx]?.[gamma_idx] ?? Infinity) < threshold);
+}
+// Build per-point metadata array for a band series in the tooltip.
+export function build_point_metadata(opts) {
+    const { x_vals, y_vals, band_idx, spin, is_acoustic, bs, start_idx } = opts;
+    return x_vals.map((_, pt_idx) => {
+        const global_idx = start_idx + pt_idx;
+        const qpoint = bs.qpoints[global_idx];
+        return {
+            band_idx,
+            spin,
+            is_acoustic,
+            nb_bands: bs.nb_bands,
+            frac_coords: qpoint?.frac_coords ?? null,
+            qpoint_label: qpoint?.label ?? null,
+            band_width: bs.band_widths?.[band_idx]?.[global_idx] ?? null,
+            slope: compute_slope(x_vals, y_vals, pt_idx),
+        };
+    });
+}

package/dist/spectral/types.d.ts

@@ -25,6 +25,7 @@ export interface BaseBandStructure {
     distance: number[];
     nb_bands: number;
     bands: number[][];
+    spin_down_bands?: number[][];
     band_widths?: number[][];
 }
 export interface RibbonConfig {
@@ -62,6 +63,7 @@ export interface ElectronicDos {
     dos_at_e_fermi?: number;
 }
 export type SpinMode = `mirror` | `overlay` | `up_only` | `down_only` | null;
+export type BandsSpinMode = Exclude<SpinMode, `mirror`>;
 export type PdosType = `atom` | `orbital`;
 export interface StackedAreaData {
     x_values: number[];

package/dist/structure/AtomLegend.svelte

@@ -12,7 +12,7 @@ let { atom_color_config = $bindable({
     mode: `element`,
     scale: undefined,
     scale_type: `continuous`,
-}), property_colors = null, elements, elem_color_picker_title = `Double click to reset color`, labels = $bindable([]), amount_format = `.3~f`, show_amounts = true, get_element_label, hidden_elements = $bindable(new Set()), hidden_prop_vals = $bindable(new Set()), 
+}), property_colors = null, elements, elem_color_picker_title = `Double click to reset color`, labels = $bindable([]), amount_format = `.3~f`, show_amounts = true, get_element_label, hidden_elements = $bindable(new SvelteSet()), hidden_prop_vals = $bindable(new SvelteSet()), 
 // Element remapping: maps original element symbols to new ones
 element_mapping = $bindable(), 
 // Per-element and per-site radius overrides
@@ -31,7 +31,7 @@ let mode_menu_open = $state(false);
 let previous_mode = $state(atom_color_config.mode);
 $effect(() => {
     if (atom_color_config.mode !== previous_mode) {
-        hidden_prop_vals = new Set();
+        hidden_prop_vals.clear();
         previous_mode = atom_color_config.mode;
     }
 });
@@ -85,6 +85,21 @@ let filtered_elements = $derived.by(() => {
             data?.name?.toLowerCase().includes(query);
     });
 });
+const known_element_symbols = new Set(ELEM_SYMBOLS);
+let sorted_element_entries = $derived.by(() => {
+    if (!elements)
+        return [];
+    const element_amounts = elements;
+    const ordered_known_entries = ELEM_SYMBOLS
+        .flatMap((element_symbol) => {
+        const amount = element_amounts[element_symbol];
+        return amount === undefined ? [] : [[element_symbol, amount]];
+    });
+    const unknown_entries = Object.entries(element_amounts)
+        .filter(([element_symbol]) => !known_element_symbols.has(element_symbol))
+        .sort(([element_a], [element_b]) => element_a.localeCompare(element_b));
+    return [...ordered_known_entries, ...unknown_entries];
+});
 function remap_element(from, to) {
     if (from === to && element_mapping?.[from]) {
         // Remove mapping if mapping back to original element
@@ -195,8 +210,11 @@ const get_site_radius = (site_idx) => {
             max={MAX_RADIUS}
             step={0.05}
             value={get_site_radius(site_idx)}
-            oninput={(event) =>
-            update_site_radius(site_idx, (event.target as HTMLInputElement).value)}
+            oninput={(event) => {
+              if (event.target instanceof HTMLInputElement) {
+                update_site_radius(site_idx, event.target.value)
+              }
+            }}
           />
           <span class="unit">Å</span>
         </label>
@@ -217,7 +235,7 @@ const get_site_radius = (site_idx) => {
 
 {#if show_element_legend}
   <div {...rest} class="atom-legend element-legend {rest.class ?? ``}">
-    {#each Object.entries(elements!) as [elem, amt], idx (elem + amt)}
+    {#each sorted_element_entries as [elem, amt], idx (elem)}
       {@const is_hidden = hidden_elements.has(elem as ElementSymbol)}
       {@const displayed_elem = element_mapping?.[elem as ElementSymbol] || elem}
       <div class="legend-item">
@@ -293,11 +311,14 @@ const get_site_radius = (site_idx) => {
                   max={MAX_RADIUS}
                   step={0.05}
                   value={get_element_radius(elem as ElementSymbol)}
-                  oninput={(event) =>
-                  update_element_radius(
-                    elem as ElementSymbol,
-                    (event.target as HTMLInputElement).value,
-                  )}
+                  oninput={(event) => {
+                    if (event.target instanceof HTMLInputElement) {
+                      update_element_radius(
+                        elem as ElementSymbol,
+                        event.target.value,
+                      )
+                    }
+                  }}
                 />
                 <span class="unit">Å</span>
               </label>

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

@@ -29,6 +29,6 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `children`> & {
         structure?: AnyStructure | null;
     }]>;
 };
-declare const AtomLegend: import("svelte").Component<$$ComponentProps, {}, "atom_color_config" | "labels" | "hidden_elements" | "hidden_prop_vals" | "element_mapping" | "element_radius_overrides" | "site_radius_overrides">;
+declare const AtomLegend: import("svelte").Component<$$ComponentProps, {}, "labels" | "atom_color_config" | "hidden_elements" | "hidden_prop_vals" | "element_mapping" | "element_radius_overrides" | "site_radius_overrides">;
 type AtomLegend = ReturnType<typeof AtomLegend>;
 export default AtomLegend;

package/dist/structure/CellSelect.svelte

@@ -20,6 +20,8 @@ const cell_tooltips = {
     primitive: `Primitive cell (smallest repeating unit)`,
     conventional: `Conventional cell (standardized representation)`,
 };
+const hair_space = `\u200A`;
+const format_supercell_label = (supercell_value) => supercell_value.replaceAll(`x`, `${hair_space}x${hair_space}`);
 function apply_preset(preset) {
     supercell_scaling = preset;
     input_value = preset;
@@ -31,6 +33,20 @@ function handle_input_submit() {
         menu_open = false;
     }
 }
+function handle_focus_out(event) {
+    const next_target = event.relatedTarget;
+    const current_target = event.currentTarget;
+    if (!(current_target instanceof Node) ||
+        !(next_target instanceof Node) ||
+        !current_target.contains(next_target))
+        menu_open = false;
+}
+function handle_key_down(event, submit_on_enter = false) {
+    if (event.key === `Escape`)
+        menu_open = false;
+    if (submit_on_enter && event.key === `Enter`)
+        handle_input_submit();
+}
 // Sync input value when external prop changes
 $effect(() => {
     if (!menu_open && supercell_scaling && supercell_scaling !== input_value) {
@@ -46,10 +62,12 @@ $effect(() => {
   onmouseenter={() => (menu_open = true)}
   onmouseleave={() => (menu_open = false)}
   onfocusin={() => (menu_open = true)}
+  onfocusout={handle_focus_out}
 >
   <button
     type="button"
     onclick={() => (menu_open = !menu_open)}
+    onkeydown={handle_key_down}
     class="toggle-btn"
     class:active={menu_open}
     aria-expanded={menu_open}
@@ -60,7 +78,9 @@ $effect(() => {
         style="--spinner-border-width: 2px; --spinner-size: 1em; --spinner-margin: 0; display: inline-block; vertical-align: middle"
       />
     {:else}
-      {cell_type !== `original` ? `${cell_labels[cell_type]} ` : ``}{supercell_scaling}
+      {cell_type !== `original` ? `${cell_labels[cell_type]} ` : ``}{
+        format_supercell_label(supercell_scaling)
+      }
     {/if}
   </button>
 
@@ -101,7 +121,7 @@ $effect(() => {
             class:selected={supercell_scaling === preset}
             onclick={() => apply_preset(preset)}
           >
-            {preset}
+            {format_supercell_label(preset)}
           </button>
         {/each}
       </div>
@@ -113,7 +133,7 @@ $effect(() => {
           bind:value={input_value}
           placeholder="e.g. 2x2x2"
           class:invalid={!input_valid}
-          onkeydown={(event) => event.key === `Enter` && handle_input_submit()}
+          onkeydown={(event) => handle_key_down(event, true)}
         />
         <button
           class="apply-btn"
@@ -131,27 +151,47 @@ $effect(() => {
 <style>
   .cell-select {
     position: relative;
-    font-size: var(--struct-legend-font, clamp(9pt, 3.5cqmin, 12pt));
+    font-size: inherit;
+    align-self: center;
+    --cell-select-accent: var(--accent-color, light-dark(#2563eb, #60a5fa));
+    --cell-select-surface: var(--surface-bg, light-dark(rgba(255, 255, 255, 0.96), #222));
+    --cell-select-border: var(
+      --border-color,
+      light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.25))
+    );
   }
   .toggle-btn {
     padding: var(--struct-legend-padding, 0 4pt);
     line-height: var(--struct-legend-line-height, 1.3);
     vertical-align: middle;
+    color: var(--text-color);
+    background: var(--btn-bg, light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)));
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius, 3pt);
+    transition: background 0.15s ease;
+  }
+  @media (hover: hover) {
+    .toggle-btn:hover {
+      background: var(
+        --btn-bg-hover,
+        light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.15))
+      );
+    }
   }
   .dropdown {
     position: absolute;
     top: 100%;
     right: 0;
     margin-top: 2px;
-    background: var(--surface-bg, #222);
-    padding: 5px;
+    background: var(--surface-bg, light-dark(rgba(255, 255, 255, 0.96), #222));
+    padding: 6px;
     border-radius: var(--struct-border-radius, var(--border-radius, 3pt));
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 5px;
     z-index: 100;
-    min-width: 95px;
+    min-width: 118px;
   }
   /* Invisible bridge to prevent menu closing when moving mouse from toggle to dropdown */
   .dropdown::before {
@@ -180,26 +220,41 @@ $effect(() => {
   /* Cell type row - compact buttons with minimal padding */
   .cell-type-row {
     display: flex;
-    gap: 1px;
-    padding-bottom: 3px;
-    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
+    gap: 3px;
+    padding-bottom: 5px;
+    border-bottom: 1px solid var(--border-color, rgba(128, 128, 128, 0.3));
   }
   .cell-type-btn {
     flex: 1;
-    padding: 1px 0;
+    padding: 2px 6px;
     font-size: 0.9em;
+    color: var(--text-color);
+    background: var(--btn-bg, light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)));
+    border: 1px solid var(--border-color);
     border-radius: var(--border-radius, 3pt);
     transition: background 0.15s ease;
     white-space: nowrap;
   }
   @media (hover: hover) {
     .cell-type-btn:hover:not(.disabled) {
-      background: rgba(255, 255, 255, 0.15);
+      background: var(
+        --btn-bg-hover,
+        light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.15))
+      );
     }
   }
   .cell-type-btn.selected {
-    background: rgba(0, 255, 255, 0.4);
-    border-color: rgba(0, 255, 255, 0.5);
+    color: var(--cell-select-accent);
+    background: color-mix(
+      in srgb,
+      var(--cell-select-accent) 18%,
+      var(--cell-select-surface)
+    );
+    border-color: color-mix(
+      in srgb,
+      var(--cell-select-accent) 45%,
+      var(--cell-select-border)
+    );
   }
   .cell-type-btn.disabled {
     opacity: 0.4;
@@ -215,16 +270,31 @@ $effect(() => {
   .preset-btn {
     padding: 2px 4px;
     font-size: 0.9em;
+    color: var(--text-color);
+    background: var(--btn-bg, light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)));
+    border: 1px solid var(--border-color);
     border-radius: var(--border-radius, 3pt);
   }
   @media (hover: hover) {
     .preset-btn:hover {
-      background: rgba(255, 255, 255, 0.15);
+      background: var(
+        --btn-bg-hover,
+        light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.15))
+      );
     }
   }
   .preset-btn.selected {
-    border-color: rgba(0, 255, 255, 0.5);
-    background: rgba(0, 255, 255, 0.4);
+    color: var(--cell-select-accent);
+    background: color-mix(
+      in srgb,
+      var(--cell-select-accent) 18%,
+      var(--cell-select-surface)
+    );
+    border-color: color-mix(
+      in srgb,
+      var(--cell-select-accent) 45%,
+      var(--cell-select-border)
+    );
   }
 
   /* Custom input row */
@@ -234,10 +304,10 @@ $effect(() => {
     gap: 4px;
   }
   .custom-input-row input {
-    max-width: 50px;
-    padding: 2px 4px;
-    margin-inline: 6px 0;
-    font-size: 0.9em;
+    max-width: 60px;
+    min-height: 0;
+    padding: 1px 4px;
+    font-size: 0.85em;
   }
   .custom-input-row input.invalid {
     border-color: rgba(255, 100, 100, 0.6);

package/dist/structure/Lattice.svelte

@@ -66,6 +66,7 @@ function get_cylinder_transform(start, end) {
               color={cell_edge_color}
               opacity={cell_edge_opacity}
               transparent
+              depthWrite={false}
             />
           </T.Mesh>
         {/each}
@@ -79,6 +80,7 @@ function get_cylinder_transform(start, end) {
           color={cell_surface_color}
           opacity={cell_surface_opacity}
           transparent
+          depthWrite={false}
         />
       </T.Mesh>
     {/if}