matterviz 0.4.0 → 0.4.2

package/dist/chempot-diagram/ChemPotDiagram2D.svelte

@@ -5,17 +5,21 @@
   import TemperatureSlider from '../convex-hull/TemperatureSlider.svelte'
   import type { PhaseData } from '../convex-hull/types'
   import Spinner from '../feedback/Spinner.svelte'
+  import type { ExportSection } from '../io'
+  import ExportPane from '../io/ExportPane.svelte'
   import { export_svg_as_png, export_svg_as_svg } from '../io/export'
-  import { download } from '../io/fetch'
-  import DraggablePane from '../overlays/DraggablePane.svelte'
   import { ColorBar, ScatterPlot } from '../plot'
   import { constrain_tooltip_position } from '../plot/core/layout'
   import type { DataSeries, UserContentProps } from '../plot/core/types'
   import { sanitize_html } from '../sanitize'
-  import { onDestroy } from 'svelte'
   import { SvelteMap } from 'svelte/reactivity'
   import { compute_chempot_async } from './async-compute.svelte'
   import { get_chempot_color_bar_config, make_chempot_color_scale } from './color'
+  import {
+    CHEMPOT_COLOR_MODE_OPTIONS,
+    CHEMPOT_COLOR_SCALE_OPTIONS,
+    create_chempot_overrides,
+  } from './controls-state.svelte'
   import {
     apply_element_padding,
     best_form_energy_for_formula,
@@ -26,6 +30,7 @@
     orthonormal_2d,
     pad_domain_points,
   } from './compute'
+  import { export_json_file, get_json_string } from './export'
   import { with_hover_pointer } from './pointer'
   import { get_temp_filter_payload, get_valid_temperature } from './temperature'
   import type {
@@ -47,6 +52,9 @@
     max_interpolation_gap = CHEMPOT_DEFAULTS.max_interpolation_gap,
     hover_info = $bindable<ChemPotHoverInfo | null>(null),
     render_local_tooltip = true,
+    wrapper = $bindable(),
+    fullscreen = $bindable(false),
+    export_pane_open = $bindable(false),
   }: {
     entries: PhaseData[]
     config?: ChemPotDiagramConfig
@@ -57,45 +65,38 @@
     max_interpolation_gap?: number
     hover_info?: ChemPotHoverInfo | null
     render_local_tooltip?: boolean
+    // bindable: plot wrapper element (used for export and pointer hit-testing)
+    wrapper?: HTMLDivElement
+    // bindable: fullscreen state (managed by the internal ScatterPlot)
+    fullscreen?: boolean
+    // bindable: whether the export pane is currently open
+    export_pane_open?: boolean
   } = $props()
   let container_width = $state(0)
   const base_aspect_ratio = $derived(height > 0 && width > 0 ? height / width : 1)
   const render_width = $derived(container_width > 0 ? container_width : width)
   const render_height = $derived(Math.round(render_width * base_aspect_ratio))
 
-  // === Control overrides ===
-  let formal_chempots_override = $state<boolean | null>(null)
-  let label_stable_override = $state<boolean | null>(null)
-  let element_padding_override = $state<number | null>(null)
-  let default_min_limit_override = $state<number | null>(null)
-  const formal_chempots = $derived(
-    formal_chempots_override ??
-      (config.formal_chempots ?? CHEMPOT_DEFAULTS.formal_chempots),
-  )
-  const label_stable = $derived(
-    label_stable_override ?? (config.label_stable ?? CHEMPOT_DEFAULTS.label_stable),
-  )
-  const element_padding = $derived(
-    element_padding_override ??
-      (config.element_padding ?? CHEMPOT_DEFAULTS.element_padding),
-  )
-  const default_min_limit = $derived(
-    default_min_limit_override ??
-      (config.default_min_limit ?? CHEMPOT_DEFAULTS.default_min_limit),
-  )
-  let color_mode_override = $state<ChemPotColorMode | null>(null)
-  let color_scale_override = $state<D3InterpolateName | null>(null)
-  let reverse_color_scale_override = $state<boolean | null>(null)
-  const color_mode = $derived(
-    color_mode_override ?? (config.color_mode ?? CHEMPOT_DEFAULTS.color_mode),
-  )
-  const color_scale = $derived(
-    color_scale_override ?? (config.color_scale ?? CHEMPOT_DEFAULTS.color_scale),
-  )
-  const reverse_color_scale = $derived(
-    reverse_color_scale_override ??
-      (config.reverse_color_scale ?? CHEMPOT_DEFAULTS.reverse_color_scale),
+  // === 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 formal_chempots = $derived(overrides.resolve(`formal_chempots`))
+  const label_stable = $derived(overrides.resolve(`label_stable`))
+  const element_padding = $derived(overrides.resolve(`element_padding`))
+  const default_min_limit = $derived(overrides.resolve(`default_min_limit`))
+  const color_mode = $derived(overrides.resolve(`color_mode`))
+  const color_scale = $derived(overrides.resolve(`color_scale`))
+  const reverse_color_scale = $derived(overrides.resolve(`reverse_color_scale`))
   const arity_colors = [`#3498db`, `#2ecc71`, `#e67e22`, `#9b59b6`] as const
   const show_tooltip = $derived(config.show_tooltip ?? CHEMPOT_DEFAULTS.show_tooltip)
   const effective_config = $derived({
@@ -122,19 +123,7 @@
     if (next_temperature !== temperature) temperature = next_temperature
   })
 
-  const show_temperature_slider = $derived(
-    has_temp_data && available_temperatures.length > 0,
-  )
-
-  function reset_controls(): void {
-    formal_chempots_override = null
-    label_stable_override = null
-    element_padding_override = null
-    default_min_limit_override = null
-    color_mode_override = null
-    color_scale_override = null
-    reverse_color_scale_override = null
-  }
+  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)
@@ -159,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 {}
@@ -202,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>()
@@ -240,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
   }
@@ -286,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[]>(
@@ -340,8 +321,8 @@
     const result: { formula: string; data_x: number; data_y: number }[] = []
     for (const [formula, pts] of Object.entries(draw_domains)) {
       if (pts.length === 0) continue
-      const center_x = pts.reduce((s, p) => s + p[0], 0) / pts.length
-      const center_y = pts.reduce((s, p) => s + p[1], 0) / pts.length
+      const center_x = pts.reduce((sum, point) => sum + point[0], 0) / pts.length
+      const center_y = pts.reduce((sum, point) => sum + point[1], 0) / pts.length
       let offset_x = 0
       let offset_y = 0
       if (pts.length >= 2) {
@@ -361,12 +342,8 @@
   // === Hover info for external consumers ===
   let locked_hover_formula = $state<string | null>(null)
 
-  function set_hover_info(
-    formula: string,
-    pts: number[][],
-    event: MouseEvent,
-  ): void {
-    const bounds = scatter_wrapper?.getBoundingClientRect()
+  function set_hover_info(formula: string, pts: number[][], event: MouseEvent): void {
+    const bounds = wrapper?.getBoundingClientRect()
     hover_info = with_hover_pointer<ChemPotHoverInfo>(
       {
         formula,
@@ -398,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
@@ -417,60 +392,58 @@
     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 },
     )
   })
 
   // === Export ===
-  let scatter_wrapper = $state<HTMLDivElement>()
-  let export_pane_open = $state(false)
-  let copy_status = $state(false)
-  let copy_timeout_id: ReturnType<typeof setTimeout> | null = null
-
   const get_svg_element = (): SVGSVGElement | null =>
-    scatter_wrapper?.querySelector<SVGSVGElement>(`svg`) ?? null
-
-  const get_json_string = (): string =>
-    JSON.stringify(
-      {
-        elements: diagram_data?.elements ?? [],
-        domains: draw_domains,
-        lims: diagram_data?.lims ?? [],
-      },
-      null,
-      2,
-    )
-
-  function export_json_file(): void {
-    download(
-      get_json_string(),
-      `chempot-${plot_elements.join(`-`)}.json`,
-      `application/json`,
-    )
-  }
-
-  async function copy_json(): Promise<void> {
-    try {
-      await navigator.clipboard.writeText(get_json_string())
-      copy_status = true
-    } catch (err) {
-      copy_status = false
-      console.error(`Failed to copy JSON to clipboard:`, err)
-    }
-    if (copy_timeout_id !== null) clearTimeout(copy_timeout_id)
-    copy_timeout_id = setTimeout(() => {
-      copy_status = false
-      copy_timeout_id = null
-    }, 1000)
-  }
+    wrapper?.querySelector<SVGSVGElement>(`svg`) ?? null
 
-  onDestroy(() => {
-    if (copy_timeout_id !== null) clearTimeout(copy_timeout_id)
+  const export_basename = $derived(`chempot-${plot_elements.join(`-`)}`)
+  const json_payload = $derived({
+    elements: diagram_data?.elements ?? [],
+    domains: draw_domains,
+    lims: diagram_data?.lims ?? [],
   })
+
+  const export_sections = $derived<ExportSection[]>([
+    {
+      title: `Export Image`,
+      items: [
+        {
+          label: `SVG`,
+          on_download: () => {
+            const svg = get_svg_element()
+            if (svg) export_svg_as_svg(svg, `${export_basename}.svg`)
+          },
+        },
+        {
+          label: `PNG`,
+          on_download: () => {
+            const svg = get_svg_element()
+            if (svg) export_svg_as_png(svg, `${export_basename}.png`)
+          },
+        },
+      ],
+    },
+    {
+      title: `Export Data`,
+      items: [
+        {
+          label: `JSON`,
+          on_download: () => export_json_file(json_payload, export_basename),
+          copy_text: () => get_json_string(json_payload),
+        },
+      ],
+    },
+  ])
 </script>
 
 {#snippet domain_labels(props: UserContentProps)}
@@ -487,68 +460,16 @@
 {/snippet}
 
 {#snippet export_toggle()}
-  <DraggablePane
-    bind:show={export_pane_open}
-    open_icon="Cross"
-    closed_icon="Export"
+  <ExportPane
+    bind:export_pane_open
+    sections={export_sections}
     pane_props={{ class: `chempot-export-pane` }}
     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`,
     }}
-  >
-    <h4 id="export-image">Export Image</h4>
-    <div class="export-row">
-      <label>
-        SVG
-        <button
-          type="button"
-          onclick={() => {
-            const svg = get_svg_element()
-            if (svg) {
-              export_svg_as_svg(svg, `chempot-${plot_elements.join(`-`)}.svg`)
-            }
-          }}
-          aria-label="Download SVG"
-        >
-          ⬇
-        </button>
-      </label>
-      <label>
-        PNG
-        <button
-          type="button"
-          onclick={() => {
-            const svg = get_svg_element()
-            if (svg) {
-              export_svg_as_png(svg, `chempot-${plot_elements.join(`-`)}.png`)
-            }
-          }}
-          aria-label="Download PNG"
-        >
-          ⬇
-        </button>
-      </label>
-    </div>
-    <h4 id="export-data">Export Data</h4>
-    <div class="export-row">
-      <label>
-        JSON
-        <button type="button" onclick={export_json_file} aria-label="Download JSON">
-          ⬇
-        </button>
-        <button
-          type="button"
-          onclick={copy_json}
-          aria-label="Copy JSON to clipboard"
-        >
-          {copy_status ? `✅` : `📋`}
-        </button>
-      </label>
-    </div>
-  </DraggablePane>
+  />
 {/snippet}
 
 {#snippet chempot_controls(_props: unknown)}
@@ -558,9 +479,7 @@
     <input
       type="checkbox"
       checked={formal_chempots}
-      onchange={() => {
-        formal_chempots_override = !formal_chempots
-      }}
+      onchange={() => overrides.set(`formal_chempots`, !formal_chempots)}
     />
   </label>
   <label>
@@ -568,9 +487,7 @@
     <input
       type="checkbox"
       checked={label_stable}
-      onchange={() => {
-        label_stable_override = !label_stable
-      }}
+      onchange={() => overrides.set(`label_stable`, !label_stable)}
     />
   </label>
   <label>
@@ -580,9 +497,8 @@
       min="0"
       step="0.1"
       value={element_padding}
-      oninput={(event) => {
-        element_padding_override = Number(event.currentTarget.value) || 0
-      }}
+      oninput={(event) =>
+        overrides.set(`element_padding`, Number(event.currentTarget.value) || 0)}
     />
   </label>
   <label>
@@ -595,9 +511,10 @@
       oninput={(event) => {
         const raw = event.currentTarget.value
         const parsed = parseFloat(raw)
-        default_min_limit_override = raw === `` || isNaN(parsed)
-          ? default_min_limit
-          : parsed
+        overrides.set(
+          `default_min_limit`,
+          raw === `` || isNaN(parsed) ? default_min_limit : parsed,
+        )
       }}
     />
   </label>
@@ -605,15 +522,12 @@
     <span>Color mode:</span>
     <select
       value={color_mode}
-      onchange={(event) => {
-        color_mode_override = event.currentTarget.value as typeof color_mode
-      }}
+      onchange={(event) =>
+        overrides.set(`color_mode`, event.currentTarget.value as typeof color_mode)}
     >
-      <option value="none">None</option>
-      <option value="energy">Energy/atom</option>
-      <option value="formation_energy">Formation energy</option>
-      <option value="arity">Element count</option>
-      <option value="entries">Entry count</option>
+      {#each CHEMPOT_COLOR_MODE_OPTIONS as [value, label] (value)}
+        <option {value}>{label}</option>
+      {/each}
     </select>
   </label>
   {#if color_mode !== `none` && color_mode !== `arity`}
@@ -621,32 +535,24 @@
       <span>Color scale:</span>
       <select
         value={color_scale}
-        onchange={(event) => {
-          color_scale_override = event.currentTarget.value as D3InterpolateName
-        }}
+        onchange={(event) =>
+          overrides.set(`color_scale`, event.currentTarget.value as D3InterpolateName)}
       >
-        <option value="interpolateViridis">Viridis</option>
-        <option value="interpolatePlasma">Plasma</option>
-        <option value="interpolateInferno">Inferno</option>
-        <option value="interpolateMagma">Magma</option>
-        <option value="interpolateCividis">Cividis</option>
-        <option value="interpolateTurbo">Turbo</option>
-        <option value="interpolateRdYlBu">RdYlBu</option>
-        <option value="interpolateSpectral">Spectral</option>
+        {#each CHEMPOT_COLOR_SCALE_OPTIONS as [value, label] (value)}
+          <option {value}>{label}</option>
+        {/each}
       </select>
       <span class="reverse-scale-toggle">
         <span>Reverse:</span>
         <input
           type="checkbox"
           checked={reverse_color_scale}
-          onchange={() => {
-            reverse_color_scale_override = !reverse_color_scale
-          }}
+          onchange={() => overrides.set(`reverse_color_scale`, !reverse_color_scale)}
         />
       </span>
     </label>
   {/if}
-  <button type="button" onclick={reset_controls}>Reset defaults</button>
+  <button type="button" onclick={overrides.reset}>Reset defaults</button>
 {/snippet}
 
 {#if diagram_computing}
@@ -672,9 +578,9 @@
     onpointerdown={(event) => {
       const target = event.target
       if (!locked_hover_formula) return
-      const is_background_click = target === scatter_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()
       }
@@ -682,7 +588,8 @@
   >
     {@render export_toggle()}
     <ScatterPlot
-      bind:wrapper={scatter_wrapper}
+      bind:wrapper
+      bind:fullscreen
       {series}
       bind:x_axis
       bind:y_axis
@@ -696,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]}
@@ -751,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),
@@ -765,15 +674,6 @@
     margin: 4pt 0;
     font-size: 0.95em;
   }
-  .chempot-diagram-2d :global(.export-row) {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 4pt 10pt;
-    margin: 0 0 4pt;
-  }
-  .chempot-diagram-2d :global(.export-row > label) {
-    margin: 0;
-  }
   .chempot-diagram-2d :global(.chempot-temp-slider) {
     top: var(--chempot-temp-slider-top, calc(1ex + 108px));
     right: 4px;
@@ -807,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

@@ -10,7 +10,10 @@ type $$ComponentProps = {
     max_interpolation_gap?: number;
     hover_info?: ChemPotHoverInfo | null;
     render_local_tooltip?: boolean;
+    wrapper?: HTMLDivElement;
+    fullscreen?: boolean;
+    export_pane_open?: boolean;
 };
-declare const ChemPotDiagram2D: import("svelte").Component<$$ComponentProps, {}, "temperature" | "height" | "width" | "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;