matterviz 0.4.0 → 0.4.1

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,35 @@
     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({
@@ -126,15 +124,6 @@
     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
-  }
 
   // === Diagram computation (off main thread via Web Worker) ===
   let diagram_data = $state<ChemPotDiagramData | null>(null)
@@ -340,8 +329,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) {
@@ -366,7 +355,7 @@
     pts: number[][],
     event: MouseEvent,
   ): void {
-    const bounds = scatter_wrapper?.getBoundingClientRect()
+    const bounds = wrapper?.getBoundingClientRect()
     hover_info = with_hover_pointer<ChemPotHoverInfo>(
       {
         formula,
@@ -426,51 +415,45 @@
   })
 
   // === 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
+    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)
-  }
-
-  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,10 +470,9 @@
 {/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`,
@@ -498,57 +480,7 @@
       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 +490,7 @@
     <input
       type="checkbox"
       checked={formal_chempots}
-      onchange={() => {
-        formal_chempots_override = !formal_chempots
-      }}
+      onchange={() => overrides.set(`formal_chempots`, !formal_chempots)}
     />
   </label>
   <label>
@@ -568,9 +498,7 @@
     <input
       type="checkbox"
       checked={label_stable}
-      onchange={() => {
-        label_stable_override = !label_stable
-      }}
+      onchange={() => overrides.set(`label_stable`, !label_stable)}
     />
   </label>
   <label>
@@ -580,9 +508,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 +522,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 +533,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 +546,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,7 +589,7 @@
     onpointerdown={(event) => {
       const target = event.target
       if (!locked_hover_formula) return
-      const is_background_click = target === scatter_wrapper ||
+      const is_background_click = target === wrapper ||
         (target instanceof SVGElement &&
           target.closest(`g[data-series-id]`) === null)
       if (is_background_click) {
@@ -682,7 +599,8 @@
   >
     {@render export_toggle()}
     <ScatterPlot
-      bind:wrapper={scatter_wrapper}
+      bind:wrapper
+      bind:fullscreen
       {series}
       bind:x_axis
       bind:y_axis
@@ -765,15 +683,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;

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" | "temperature" | "fullscreen" | "wrapper" | "export_pane_open" | "hover_info">;
 type ChemPotDiagram2D = ReturnType<typeof ChemPotDiagram2D>;
 export default ChemPotDiagram2D;