matterviz 0.3.4 → 0.3.6

package/dist/convex-hull/ConvexHull4D.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { BaseConvexHullProps, Hull3DProps } from './index';
-import type { ConvexHullEntry, HighlightStyle } from './types';
-type $$ComponentProps = BaseConvexHullProps<ConvexHullEntry> & Hull3DProps & {
-    highlight_style?: HighlightStyle;
-};
-declare const ConvexHull4D: import("svelte").Component<$$ComponentProps, {}, "temperature" | "fullscreen" | "show_hull_faces" | "hull_face_opacity" | "hull_face_color_mode" | "color_mode" | "color_scale" | "show_stable" | "show_unstable" | "show_stable_labels" | "show_unstable_labels" | "max_hull_dist_show_phases" | "max_hull_dist_show_labels" | "info_pane_open" | "legend_pane_open" | "wrapper" | "energy_source_mode" | "stable_entries" | "unstable_entries" | "phase_stats" | "highlighted_entries" | "selected_entry" | "gas_pressures">;
-type ConvexHull4D = ReturnType<typeof ConvexHull4D>;
-export default ConvexHull4D;

package/dist/convex-hull/ConvexHullControls.svelte

@@ -1,546 +0,0 @@
-<script lang="ts">
-  import type { D3InterpolateName } from '../colors'
-  import { format_num } from '../labels'
-  import DraggablePane from '../overlays/DraggablePane.svelte'
-  import { sanitize_html } from '../sanitize'
-  import { ColorScaleSelect } from '../plot'
-  import type { ComponentProps } from 'svelte'
-  import { tooltip } from 'svelte-multiselect'
-  import type { HTMLAttributes } from 'svelte/elements'
-  import type {
-    ConvexHullControlsType,
-    ConvexHullEntry,
-    HullFaceColorMode,
-  } from './types'
-  import { HULL_FACE_COLOR_MODES } from './types'
-
-  interface CameraState {
-    elevation?: number // Elevation angle in degrees (for ternary)
-    azimuth?: number // Azimuth angle in degrees (for ternary)
-    rotation_x?: number // X rotation in radians (for quaternary)
-    rotation_y?: number // Y rotation in radians (for quaternary)
-    zoom: number
-    center_x: number
-    center_y: number
-  }
-
-  // Face color mode display labels and tooltips
-  const FACE_COLOR_MODES: Record<HullFaceColorMode, { label: string; tip: string }> =
-    {
-      uniform: { label: `Uniform`, tip: `Single uniform color for all faces` },
-      formation_energy: {
-        label: `Energy`,
-        tip: `Color by average formation energy of face vertices`,
-      },
-      dominant_element: {
-        label: `Element`,
-        tip: `Color by element with highest concentration at face centroid`,
-      },
-      facet_index: { label: `Index`, tip: `Distinct categorical color per facet` },
-    }
-
-  let {
-    color_mode = $bindable(`stability`),
-    color_scale = $bindable(`interpolateViridis`),
-    show_stable = $bindable(true),
-    show_unstable = $bindable(true),
-    show_stable_labels = $bindable(true),
-    show_unstable_labels = $bindable(false),
-    show_hull_faces = undefined,
-    on_hull_faces_change,
-    hull_face_color = `#0072B2`,
-    on_hull_face_color_change,
-    hull_face_opacity = $bindable(0.03),
-    on_hull_face_opacity_change,
-    hull_face_color_mode = `uniform` as HullFaceColorMode,
-    on_hull_face_color_mode_change,
-    max_hull_dist_show_phases = $bindable(0),
-    max_hull_dist_show_labels = $bindable(0.1),
-    max_hull_dist_in_data = 0.5,
-    energy_source_mode = $bindable(`precomputed`),
-    has_precomputed_hull = false,
-    can_compute_hull = false,
-    has_precomputed_e_form = false,
-    can_compute_e_form = false,
-    stable_entries,
-    unstable_entries,
-    camera,
-    merged_controls,
-    controls_open = $bindable(false),
-    toggle_props = {},
-    pane_props = {},
-    ...rest
-  }: Omit<HTMLAttributes<HTMLDivElement>, `onclose`> & {
-    // Display controls
-    color_mode?: `stability` | `energy`
-    color_scale?: D3InterpolateName
-    show_stable?: boolean
-    show_unstable?: boolean
-    show_stable_labels?: boolean
-    show_unstable_labels?: boolean
-    // 3D specific controls
-    show_hull_faces?: boolean
-    on_hull_faces_change?: (value: boolean) => void
-    hull_face_color?: string
-    on_hull_face_color_change?: (value: string) => void
-    hull_face_opacity?: number
-    on_hull_face_opacity_change?: (value: number) => void
-    hull_face_color_mode?: HullFaceColorMode
-    on_hull_face_color_mode_change?: (value: HullFaceColorMode) => void
-    energy_source_mode?: `precomputed` | `on-the-fly` // whether to read formation and above hull distance from entries or compute them on the fly
-    has_precomputed_hull?: boolean
-    can_compute_hull?: boolean
-    has_precomputed_e_form?: boolean
-    can_compute_e_form?: boolean
-    // Thresholds
-    max_hull_dist_show_phases?: number
-    max_hull_dist_show_labels?: number
-    max_hull_dist_in_data?: number
-    // Data for visualization
-    stable_entries: ConvexHullEntry[]
-    unstable_entries: ConvexHullEntry[]
-    // Camera state (optional - only used for 3D/4D diagrams)
-    camera?: CameraState
-    // Legend configuration
-    merged_controls: ConvexHullControlsType
-    // Pane state
-    controls_open?: boolean
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
-  } = $props()
-
-  // Focus the multiselect input next to the "Color scale" label
-  function focus_multiselect(evt: Event): void {
-    ;(evt.currentTarget as HTMLElement).nextElementSibling
-      ?.querySelector<HTMLInputElement>(`input`)?.focus()
-  }
-</script>
-
-<DraggablePane
-  bind:show={controls_open}
-  pane_props={{
-    ...pane_props,
-    class: `convex-hull-controls-pane ${pane_props?.class ?? ``}`,
-    style: `${pane_props?.style ?? ``}`,
-  }}
-  toggle_props={{
-    title: controls_open ? `` : `Convex hull controls`,
-    class: `convex-hull-controls-toggle`,
-    ...toggle_props,
-  }}
-  closed_icon="Settings"
-  open_icon="Cross"
-  {...rest}
->
-  <h4>
-    {@html sanitize_html(merged_controls.title || `Convex Hull Controls`)}
-  </h4>
-
-  <!-- Energy source selection (only if both options are available) -->
-  {#if has_precomputed_e_form && has_precomputed_hull && can_compute_e_form &&
-      can_compute_hull}
-    <div class="control-row">
-      <span class="control-label">Energy source</span>
-      <button
-        class="toggle-btn {energy_source_mode === `precomputed` ? `active` : ``}"
-        onclick={() => energy_source_mode = `precomputed`}
-        {@attach tooltip({
-          content: `Use precomputed formation energies (E<sub>form</sub>)`,
-        })}
-      >
-        Precomputed
-      </button>
-      <button
-        class="toggle-btn {energy_source_mode === `on-the-fly` ? `active` : ``}"
-        onclick={() => energy_source_mode = `on-the-fly`}
-        {@attach tooltip({
-          content:
-            `Compute formation energies and hull distances on the fly. Note: Missing pure-element reference entries default to E<sub>form</sub> = 0 eV/atom if not provided explicitly.`,
-        })}
-      >
-        On the fly
-      </button>
-    </div>
-  {/if}
-
-  <!-- Color mode toggle -->
-  <div class="control-row">
-    <span class="control-label">Color mode</span>
-    <button
-      class="toggle-btn {color_mode === `stability` ? `active` : ``}"
-      onclick={() => color_mode = `stability`}
-      {@attach tooltip({ content: `Color points by stable/unstable` })}
-    >
-      Stability
-    </button>
-    <button
-      class="toggle-btn {color_mode === `energy` ? `active` : ``}"
-      onclick={() => color_mode = `energy`}
-      {@attach tooltip({ content: `Color points by energy above hull` })}
-    >
-      Energy
-    </button>
-  </div>
-
-  <!-- Energy threshold slider - shown in both color modes -->
-  <div
-    class="control-row"
-    {@attach tooltip({ content: `Max eV/atom above hull to display unstable points` })}
-  >
-    <span class="control-label">Points threshold</span>
-    <label style="display: flex; align-items: center; gap: 4px; flex: 1">
-      <input
-        type="number"
-        min="0"
-        max={max_hull_dist_in_data}
-        step="0.01"
-        bind:value={max_hull_dist_show_phases}
-        class="threshold-input"
-      />
-      <span style="white-space: nowrap">eV/atom</span>
-      <input
-        type="range"
-        min="0"
-        max={max_hull_dist_in_data}
-        step="0.01"
-        bind:value={max_hull_dist_show_phases}
-        class="threshold-slider"
-      />
-    </label>
-  </div>
-
-  {#if color_mode === `stability`}
-    <div class="control-row">
-      <span class="control-label">Points</span>
-      <div class="legend-items-container">
-        <div
-          class="legend-item clickable {show_stable ? `active` : `inactive`}"
-          onclick={() => show_stable = !show_stable}
-          onkeydown={(evt) =>
-          [`Enter`, ` `].includes(evt.key) && (show_stable = !show_stable)}
-          role="button"
-          tabindex="0"
-          {@attach tooltip({ content: `Toggle visibility of stable points` })}
-        >
-          <div class="marker stable"></div>
-          <span>Stable{
-              merged_controls.show_counts ? ` (${stable_entries.length})` : ``
-            }</span>
-        </div>
-        <div
-          class="legend-item clickable {show_unstable ? `active` : `inactive`}"
-          onclick={() => show_unstable = !show_unstable}
-          onkeydown={(evt) =>
-          [`Enter`, ` `].includes(evt.key) && (show_unstable = !show_unstable)}
-          role="button"
-          tabindex="0"
-          {@attach tooltip({ content: `Toggle visibility of above-hull points` })}
-        >
-          <div class="marker unstable"></div>
-          <span>Above hull{
-              merged_controls.show_counts
-              ? ` (${
-                unstable_entries.filter((e) => e.visible).length
-              }/${unstable_entries.length})`
-              : ``
-            }</span>
-        </div>
-      </div>
-    </div>
-  {:else}
-    <!-- Color scale selector -->
-    <div class="color-scale-row">
-      <span
-        {@attach tooltip({ content: `Choose energy colormap` })}
-        onclick={focus_multiselect}
-        onkeydown={(evt) => {
-          if (evt.key === `Enter` || evt.key === ` `) focus_multiselect(evt)
-        }}
-        role="button"
-        tabindex="0"
-        style="cursor: pointer"
-      >Color scale</span>
-      <ColorScaleSelect
-        bind:value={color_scale}
-        selected={[color_scale]}
-        placeholder="Select color scale"
-        {@attach tooltip({ content: `Set interpolator for energy colors` })}
-      />
-    </div>
-  {/if}
-
-  {#if merged_controls.show_label_controls}
-    <div class="control-row">
-      <span class="control-label">Labels</span>
-      <div style="display: flex; gap: 12px; flex: 1">
-        <label {@attach tooltip({ content: `Show labels for stable points` })}>
-          <input
-            type="checkbox"
-            checked={show_stable_labels}
-            oninput={(
-              evt,
-            ) => (show_stable_labels = (evt.target as HTMLInputElement).checked)}
-          />
-          <span>Stable</span>
-        </label>
-        <label {@attach tooltip({ content: `Show labels for unstable points` })}>
-          <input
-            type="checkbox"
-            checked={show_unstable_labels}
-            oninput={(
-              evt,
-            ) => (show_unstable_labels =
-              (evt.target as HTMLInputElement).checked)}
-          />
-          <span>Unstable</span>
-        </label>
-      </div>
-    </div>
-
-    {#if show_unstable_labels}
-      <div
-        class="control-row"
-        {@attach tooltip({ content: `Max eV/atom for labeling unstable points` })}
-      >
-        <span class="control-label">Label threshold</span>
-        <label style="display: flex; align-items: center; gap: 4px; flex: 1">
-          <span style="white-space: nowrap">{max_hull_dist_show_labels.toFixed(2)}
-            eV/atom</span>
-          <input
-            type="range"
-            min="0"
-            max={max_hull_dist_in_data}
-            step="0.01"
-            bind:value={max_hull_dist_show_labels}
-            class="threshold-slider"
-          />
-        </label>
-      </div>
-    {/if}
-  {/if}
-
-  <!-- Hull faces toggle (for 3D ternary and 4D quaternary diagrams) -->
-  {#if show_hull_faces !== undefined}
-    <div class="control-row">
-      <span class="control-label">Hull Faces</span>
-      <label {@attach tooltip({ content: `Toggle convex hull faces` })}>
-        <input
-          type="checkbox"
-          checked={show_hull_faces}
-          oninput={(e) => on_hull_faces_change?.((e.target as HTMLInputElement).checked)}
-        />
-        <span>Show</span>
-      </label>
-      <div style="display: flex; gap: 6px; align-items: center; flex: 1">
-        {#if hull_face_color_mode === `uniform`}
-          <input
-            type="color"
-            value={hull_face_color}
-            oninput={(e) => on_hull_face_color_change?.((e.target as HTMLInputElement).value)}
-            {@attach tooltip({ content: `Set hull face color` })}
-            style="width: 40px; height: 20px"
-          />
-        {/if}
-        <input
-          type="range"
-          min="0"
-          max="1"
-          step="0.01"
-          aria-label="Hull face opacity"
-          bind:value={hull_face_opacity}
-          oninput={() => on_hull_face_opacity_change?.(hull_face_opacity)}
-          {@attach tooltip({ content: `Hull face opacity (0 = transparent, 1 = opaque)` })}
-          class="threshold-slider"
-          style="flex: 1; min-width: 80px"
-        />
-        <span style="font-size: 0.9em; min-width: 2em; text-align: right">{
-          format_num(hull_face_opacity, `.1%`)
-        }</span>
-      </div>
-    </div>
-
-    <!-- Face color mode selector -->
-    <div class="control-row">
-      <span class="control-label">Face color</span>
-      <div class="face-color-mode-buttons">
-        {#each HULL_FACE_COLOR_MODES as mode (mode)}
-          <button
-            class="toggle-btn face-mode-btn {hull_face_color_mode === mode ? `active` : ``}"
-            onclick={() => on_hull_face_color_mode_change?.(mode)}
-            {@attach tooltip({ content: FACE_COLOR_MODES[mode].tip })}
-          >
-            {FACE_COLOR_MODES[mode].label}
-          </button>
-        {/each}
-      </div>
-    </div>
-  {/if}
-
-  {#if camera}
-    <div class="camera-controls">
-      <span class="control-label">Camera</span>
-      {#if camera.elevation !== undefined && camera.azimuth !== undefined}
-        <!-- Ternary camera controls (elevation/azimuth) -->
-        <label
-          class="angle-input"
-          {@attach tooltip({
-            content:
-              `Elevation angle (0° = look down z-axis, 90° = side view, 180° = look up z-axis)`,
-          })}
-        >
-          <span>Elev</span>
-          <input
-            type="number"
-            value={camera.elevation.toFixed(0)}
-            step="5"
-            oninput={(e) =>
-            camera.elevation = parseFloat(
-              (e.target as HTMLInputElement).value,
-            )}
-            style="width: 3em"
-          />
-          <span>°</span>
-        </label>
-        <label
-          class="angle-input"
-          {@attach tooltip({ content: `Azimuth rotation around z-axis` })}
-        >
-          <span>Azim</span>
-          <input
-            type="number"
-            value={camera.azimuth.toFixed(0)}
-            step="15"
-            oninput={(e) =>
-            camera.azimuth = parseFloat(
-              (e.target as HTMLInputElement).value,
-            )}
-            style="width: 3em"
-          />
-          <span>°</span>
-        </label>
-      {:else}
-        <!-- Quaternary camera controls (rotation_x/rotation_y) -->
-        <label
-          class="angle-input"
-          {@attach tooltip({ content: `Vertical tilt (up/down rotation)` })}
-        >
-          <span>φ</span>
-          <input
-            type="number"
-            value={(camera.rotation_x ?? 0).toFixed(2)}
-            step="0.1"
-            min={-Math.PI / 3}
-            max={Math.PI / 3}
-            oninput={(e) =>
-            camera.rotation_x = parseFloat(
-              (e.target as HTMLInputElement).value,
-            )}
-            style="width: 3em"
-          />
-        </label>
-        <label
-          class="angle-input"
-          {@attach tooltip({ content: `Horizontal rotation (left/right)` })}
-        >
-          <span>θ</span>
-          <input
-            type="number"
-            value={(camera.rotation_y ?? 0).toFixed(2)}
-            step="0.1"
-            oninput={(e) =>
-            camera.rotation_y = parseFloat(
-              (e.target as HTMLInputElement).value,
-            )}
-            style="width: 3em"
-          />
-        </label>
-      {/if}
-    </div>
-  {/if}
-</DraggablePane>
-
-<style>
-  :global(.convex-hull-controls-pane) {
-    --pane-max-height: max(350px, calc(100cqh - 40px));
-    --pane-padding: 1ex;
-    --pane-gap: 0;
-    font-size: 0.85em;
-    pointer-events: auto;
-  }
-  .control-row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-top: 12px;
-  }
-  .control-label {
-    font-weight: 500;
-    min-width: 80px;
-  }
-  button {
-    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.2));
-  }
-  .toggle-btn.active, .toggle-btn:hover.active {
-    background: light-dark(rgba(25, 118, 210, 0.15), rgba(100, 180, 255, 0.2));
-  }
-  .legend-items-container {
-    display: flex;
-    gap: 12px;
-    flex: 1;
-  }
-  .legend-item {
-    display: flex;
-    align-items: center;
-    border-radius: var(--hull-border-radius, var(--border-radius, 3pt));
-    cursor: pointer;
-    white-space: nowrap;
-  }
-  .legend-item:hover {
-    background: var(--btn-bg-hover, rgba(0, 0, 0, 0.05));
-  }
-  .legend-item.inactive {
-    opacity: 0.5;
-  }
-  .marker {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    margin-right: 8px;
-    aspect-ratio: 1;
-  }
-  .marker.stable {
-    background: var(--stable-color, #0072b2);
-  }
-  .marker.unstable {
-    background: var(--unstable-color, #e69f00);
-  }
-  .camera-controls {
-    display: flex;
-    gap: 12px;
-    flex: 1;
-    margin-top: 12px;
-  }
-  .threshold-input {
-    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.2));
-  }
-  .face-color-mode-buttons {
-    display: flex;
-    gap: 4px;
-    flex: 1;
-    flex-wrap: wrap;
-  }
-  .face-mode-btn {
-    min-width: auto;
-    flex: 0 1 auto;
-  }
-  .color-scale-row {
-    display: grid;
-    gap: 8px;
-    grid-template-columns: auto 1fr;
-    align-items: center;
-    margin-top: 12px;
-  }
-  .color-scale-row :global(.multiselect) {
-    --sms-min-height: 24px;
-  }
-</style>

package/dist/convex-hull/ConvexHullControls.svelte.d.ts

@@ -1,48 +0,0 @@
-import type { D3InterpolateName } from '../colors';
-import DraggablePane from '../overlays/DraggablePane.svelte';
-import type { ComponentProps } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-import type { ConvexHullControlsType, ConvexHullEntry, HullFaceColorMode } from './types';
-interface CameraState {
-    elevation?: number;
-    azimuth?: number;
-    rotation_x?: number;
-    rotation_y?: number;
-    zoom: number;
-    center_x: number;
-    center_y: number;
-}
-type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `onclose`> & {
-    color_mode?: `stability` | `energy`;
-    color_scale?: D3InterpolateName;
-    show_stable?: boolean;
-    show_unstable?: boolean;
-    show_stable_labels?: boolean;
-    show_unstable_labels?: boolean;
-    show_hull_faces?: boolean;
-    on_hull_faces_change?: (value: boolean) => void;
-    hull_face_color?: string;
-    on_hull_face_color_change?: (value: string) => void;
-    hull_face_opacity?: number;
-    on_hull_face_opacity_change?: (value: number) => void;
-    hull_face_color_mode?: HullFaceColorMode;
-    on_hull_face_color_mode_change?: (value: HullFaceColorMode) => void;
-    energy_source_mode?: `precomputed` | `on-the-fly`;
-    has_precomputed_hull?: boolean;
-    can_compute_hull?: boolean;
-    has_precomputed_e_form?: boolean;
-    can_compute_e_form?: boolean;
-    max_hull_dist_show_phases?: number;
-    max_hull_dist_show_labels?: number;
-    max_hull_dist_in_data?: number;
-    stable_entries: ConvexHullEntry[];
-    unstable_entries: ConvexHullEntry[];
-    camera?: CameraState;
-    merged_controls: ConvexHullControlsType;
-    controls_open?: boolean;
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
-};
-declare const ConvexHullControls: import("svelte").Component<$$ComponentProps, {}, "controls_open" | "hull_face_opacity" | "color_mode" | "color_scale" | "show_stable" | "show_unstable" | "show_stable_labels" | "show_unstable_labels" | "max_hull_dist_show_phases" | "max_hull_dist_show_labels" | "energy_source_mode">;
-type ConvexHullControls = ReturnType<typeof ConvexHullControls>;
-export default ConvexHullControls;