matterviz 0.3.4 → 0.3.6

package/dist/src/lib/fermi-surface/FermiSurfaceControls.svelte

@@ -0,0 +1,448 @@
+<script lang="ts">
+  import SettingsSection from '$lib/layout/SettingsSection.svelte'
+  import DraggablePane from '$lib/overlays/DraggablePane.svelte'
+  import type { CameraProjection } from '$lib/settings'
+  import { make_change_detector } from '$lib/utils'
+  import type { Snippet } from 'svelte'
+  import type {
+    BandGridData,
+    ColorProperty,
+    FermiSurfaceData,
+    RepresentationMode,
+  } from './types'
+
+  let {
+    controls_open = $bindable(false),
+    fermi_data,
+    band_data,
+    mu = $bindable(0),
+    color_property = $bindable(`band`),
+    color_scale = $bindable(`interpolateViridis`),
+    custom_property_label,
+    representation = $bindable(`solid`),
+    surface_opacity = $bindable(0.8),
+    selected_bands = $bindable(),
+    show_bz = $bindable(true),
+    bz_opacity = $bindable(0.1),
+    show_vectors = $bindable(true),
+    tile_bz = $bindable(false),
+    // Clipping plane
+    clip_enabled = $bindable(false),
+    clip_axis = $bindable(`z`),
+    clip_position = $bindable(0),
+    clip_flip = $bindable(false),
+    // Interpolation
+    interpolation_factor = $bindable(1),
+    // Camera
+    camera_projection = $bindable(`perspective`),
+    on_mu_change,
+    on_interpolation_change,
+    on_export,
+    children,
+  }: {
+    controls_open?: boolean
+    fermi_data?: FermiSurfaceData
+    band_data?: BandGridData
+    mu?: number | undefined
+    color_property?: ColorProperty
+    color_scale?: string
+    // Label for custom property coloring (e.g. "λ(k)", "DOS", etc.)
+    custom_property_label?: string
+    representation?: RepresentationMode
+    surface_opacity?: number
+    selected_bands?: number[]
+    show_bz?: boolean
+    bz_opacity?: number
+    show_vectors?: boolean
+    tile_bz?: boolean
+    clip_enabled?: boolean
+    clip_axis?: `x` | `y` | `z`
+    clip_position?: number
+    clip_flip?: boolean
+    interpolation_factor?: number
+    camera_projection?: CameraProjection
+    on_mu_change?: (mu: number) => void
+    on_interpolation_change?: (factor: number) => void
+    on_export?: (format: `stl` | `obj` | `gltf`) => void
+    children?: Snippet<[{ fermi_data?: FermiSurfaceData; band_data?: BandGridData }]>
+  } = $props()
+
+  // Color scale options
+  const color_scales = [
+    { value: `interpolateViridis`, label: `Viridis` },
+    { value: `interpolatePlasma`, label: `Plasma` },
+    { value: `interpolateInferno`, label: `Inferno` },
+    { value: `interpolateMagma`, label: `Magma` },
+    { value: `interpolateCool`, label: `Cool` },
+    { value: `interpolateWarm`, label: `Warm` },
+    { value: `interpolateRainbow`, label: `Rainbow` },
+    { value: `interpolateTurbo`, label: `Turbo` },
+    { value: `interpolateRdYlBu`, label: `RdYlBu` },
+    { value: `interpolateSpectral`, label: `Spectral` },
+  ]
+
+  let has_custom_color = $derived(
+    Boolean(custom_property_label) ||
+      (fermi_data?.isosurfaces?.some((iso) => iso.properties?.length) ?? false),
+  )
+
+  // Get unique band indices from Fermi surface data
+  let available_bands = $derived(
+    fermi_data
+      ? [...new Set(fermi_data.isosurfaces.map((iso) => iso.band_index))].toSorted(
+        (a, b) => a - b,
+      )
+      : [],
+  )
+  let available_bands_key = $derived(available_bands.join(`,`))
+  const available_bands_changed = make_change_detector()
+
+  $effect(() => {
+    if (color_property === `custom` && !has_custom_color) color_property = `band`
+    const bands_changed = available_bands_changed(available_bands_key)
+    if (available_bands.length > 0 && (selected_bands === undefined || bands_changed)) {
+      selected_bands = [...available_bands]
+    }
+  })
+
+  function toggle_band(band_idx: number) {
+    if (!selected_bands) {
+      selected_bands = [band_idx]
+      return
+    }
+    const idx = selected_bands.indexOf(band_idx)
+    if (idx >= 0) {
+      selected_bands = selected_bands.filter((band) => band !== band_idx)
+    } else {
+      selected_bands = [...selected_bands, band_idx].toSorted((a, b) => a - b)
+    }
+  }
+
+  function handle_mu_change(event: Event & { currentTarget: HTMLInputElement }) {
+    const trimmed = event.currentTarget.value.trim()
+    const parsed = parseFloat(trimmed)
+    // Only update mu when input is valid; keep last valid value during transient
+    // invalid states (e.g. empty string while user is typing a new value)
+    if (Number.isFinite(parsed)) {
+      mu = parsed
+      on_mu_change?.(parsed)
+    }
+  }
+</script>
+
+<DraggablePane
+  bind:show={controls_open}
+  open_icon="Cross"
+  closed_icon="Settings"
+  pane_props={{ class: `fermi-controls` }}
+  toggle_props={{ class: `controls-toggle`, title: `Fermi surface controls` }}
+>
+  <SettingsSection
+    title="Chemical Potential"
+    current_values={{ mu }}
+    on_reset={() => {
+      mu = 0
+      on_mu_change?.(0)
+    }}
+  >
+    <label>
+      <span>μ offset (eV):</span>
+      <input
+        type="range"
+        min="-1"
+        max="1"
+        step="0.01"
+        value={mu}
+        oninput={handle_mu_change}
+      />
+      <input
+        type="number"
+        step="0.01"
+        value={mu}
+        oninput={handle_mu_change}
+        style="width: 4em"
+      />
+    </label>
+    {#if fermi_data}
+      <small>E_F = {fermi_data.fermi_energy.toFixed(3)} eV</small>
+    {/if}
+  </SettingsSection>
+
+  {#if available_bands.length > 0}
+    <SettingsSection
+      title="Bands"
+      current_values={{ selected_bands }}
+      on_reset={() => {
+        selected_bands = [...available_bands]
+      }}
+    >
+      <div class="band-checkboxes">
+        {#each available_bands as band_idx (band_idx)}
+          <label class="band-checkbox">
+            <input
+              type="checkbox"
+              checked={selected_bands?.includes(band_idx)}
+              onchange={() => toggle_band(band_idx)}
+            />
+            <span>Band {band_idx}</span>
+          </label>
+        {/each}
+      </div>
+      <div class="band-actions">
+        <button type="button" onclick={() => (selected_bands = [...available_bands])}>
+          All
+        </button>
+        <button type="button" onclick={() => (selected_bands = [])}>None</button>
+      </div>
+    </SettingsSection>
+  {/if}
+
+  <SettingsSection
+    title="Appearance"
+    current_values={{ color_property, representation, surface_opacity }}
+    on_reset={() => {
+      color_property = `band`
+      representation = `solid`
+      surface_opacity = 0.8
+    }}
+  >
+    <label>
+      <span>Color by:</span>
+      <select bind:value={color_property}>
+        <option value="band">Band</option>
+        <option value="velocity">Velocity</option>
+        <option value="spin">Spin</option>
+        {#if has_custom_color}
+          <option value="custom">{custom_property_label ?? `Custom`}</option>
+        {/if}
+      </select>
+    </label>
+    {#if color_property === `velocity` || color_property === `custom`}
+      <label>
+        <span>Color scale:</span>
+        <select bind:value={color_scale}>
+          {#each color_scales as scale (scale.value)}
+            <option value={scale.value}>{scale.label}</option>
+          {/each}
+        </select>
+      </label>
+    {/if}
+    <label>
+      <span>Style:</span>
+      <select bind:value={representation}>
+        <option value="solid">Solid</option>
+        <option value="wireframe">Wireframe</option>
+        <option value="transparent">Transparent</option>
+      </select>
+    </label>
+    <label>
+      <span>Opacity:</span>
+      <input type="range" min="0.1" max="1" step="0.05" bind:value={surface_opacity} />
+      <span class="value">{surface_opacity.toFixed(2)}</span>
+    </label>
+  </SettingsSection>
+
+  <SettingsSection
+    title="Brillouin Zone"
+    current_values={{ show_bz, bz_opacity, show_vectors, tile_bz }}
+    on_reset={() => {
+      show_bz = true
+      bz_opacity = 0.1
+      show_vectors = true
+      tile_bz = false
+    }}
+  >
+    <label>
+      <span>Show BZ:</span>
+      <input type="checkbox" bind:checked={show_bz} />
+    </label>
+    {#if show_bz}
+      <label>
+        <span>BZ Opacity:</span>
+        <input type="range" min="0" max="0.5" step="0.01" bind:value={bz_opacity} />
+        <span class="value">{bz_opacity.toFixed(2)}</span>
+      </label>
+    {/if}
+    <label>
+      <span>Show Vectors:</span>
+      <input type="checkbox" bind:checked={show_vectors} />
+    </label>
+    <label
+      title="Tile Fermi surface from irreducible part to fill full Brillouin zone using symmetry"
+    >
+      <span>Tile to full BZ:</span>
+      <input type="checkbox" bind:checked={tile_bz} />
+    </label>
+  </SettingsSection>
+
+  <SettingsSection
+    title="Clipping Plane"
+    current_values={{ clip_enabled, clip_axis, clip_position, clip_flip }}
+    on_reset={() => {
+      clip_enabled = false
+      clip_axis = `z`
+      clip_position = 0
+      clip_flip = false
+    }}
+  >
+    <label>
+      <span>Enable:</span>
+      <input type="checkbox" bind:checked={clip_enabled} />
+    </label>
+    {#if clip_enabled}
+      <label>
+        <span>Axis:</span>
+        <select bind:value={clip_axis}>
+          <option value="x">X</option>
+          <option value="y">Y</option>
+          <option value="z">Z</option>
+        </select>
+      </label>
+      <label>
+        <span>Position:</span>
+        <input
+          type="range"
+          min="-1"
+          max="1"
+          step="0.01"
+          bind:value={clip_position}
+        />
+        <span class="value">{clip_position.toFixed(2)}</span>
+      </label>
+      <label>
+        <span>Flip:</span>
+        <input type="checkbox" bind:checked={clip_flip} />
+      </label>
+    {/if}
+  </SettingsSection>
+
+  {#if band_data}
+    <SettingsSection
+      title="Interpolation"
+      current_values={{ interpolation_factor }}
+      on_reset={() => {
+        interpolation_factor = 1
+        on_interpolation_change?.(1)
+      }}
+    >
+      <label>
+        <span>Grid density:</span>
+        <select
+          value={interpolation_factor}
+          onchange={(event) => {
+            const val = parseFloat(event.currentTarget.value)
+            if (!Number.isFinite(val)) return
+            interpolation_factor = val
+            on_interpolation_change?.(val)
+          }}
+        >
+          <option value={1}>1× (original)</option>
+          <option value={1.5}>1.5×</option>
+          <option value={2}>2×</option>
+          <option value={3}>3×</option>
+          <option value={4}>4×</option>
+        </select>
+      </label>
+      <small>Higher = smoother surface, slower</small>
+    </SettingsSection>
+  {/if}
+
+  <SettingsSection title="Export" current_values={{}}>
+    <div class="export-buttons">
+      <button
+        type="button"
+        onclick={() => on_export?.(`stl`)}
+        title="Export as STL (3D printing)"
+      >
+        STL
+      </button>
+      <button
+        type="button"
+        onclick={() => on_export?.(`obj`)}
+        title="Export as OBJ (Wavefront)"
+      >
+        OBJ
+      </button>
+      <button
+        type="button"
+        onclick={() => on_export?.(`gltf`)}
+        title="Export as GLTF (web/AR)"
+      >
+        GLTF
+      </button>
+    </div>
+    <small>Export visible Fermi surfaces</small>
+  </SettingsSection>
+
+  <SettingsSection
+    title="Camera"
+    current_values={{ camera_projection }}
+    on_reset={() => {
+      camera_projection = `perspective`
+    }}
+  >
+    <label>
+      <span>Projection:</span>
+      <select bind:value={camera_projection}>
+        <option value="perspective">Perspective</option>
+        <option value="orthographic">Orthographic</option>
+      </select>
+    </label>
+  </SettingsSection>
+
+  {@render children?.({ fermi_data, band_data })}
+</DraggablePane>
+
+<style>
+  .band-checkboxes {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5em;
+  }
+  .band-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 0.3em;
+    font-size: 0.9em;
+  }
+  .band-actions {
+    display: flex;
+    gap: 0.5em;
+    margin-top: 0.5em;
+  }
+  .band-actions button {
+    padding: 0.2em 0.6em;
+    font-size: 0.85em;
+  }
+  small {
+    color: var(--text-color-muted, #888);
+    font-size: 0.85em;
+  }
+  label {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    flex-wrap: wrap;
+  }
+  .value {
+    min-width: 3em;
+    font-family: monospace;
+    font-size: 0.9em;
+  }
+  .export-buttons {
+    display: flex;
+    gap: 0.5em;
+  }
+  .export-buttons button {
+    padding: 0.3em 0.8em;
+    font-size: 0.85em;
+    background: var(--btn-bg, #4488cc);
+    color: white;
+    border: none;
+    border-radius: 3pt;
+    cursor: pointer;
+  }
+  .export-buttons button:hover {
+    background: var(--btn-bg-hover, #3377bb);
+  }
+</style>