matterviz 0.3.1 → 0.3.3

package/dist/composition/BubbleChart.svelte

@@ -1,59 +1,113 @@
-<script lang="ts">import { ELEMENT_COLOR_SCHEMES, pick_contrast_color } from '../colors';
-import { hierarchy, pack } from 'd3-hierarchy';
-import { get_chart_font_scale } from './index';
-import { count_atoms_in_composition } from './parse';
-let { composition, size = 200, padding = 0, show_labels = true, show_amounts = true, color_scheme = `Vesta`, bubble_content, interactive = true, svg_node = $bindable(null), children, ...rest } = $props();
-let element_colors = $derived(ELEMENT_COLOR_SCHEMES[color_scheme] || ELEMENT_COLOR_SCHEMES.Vesta);
-// Calculate bubble data with proper circle packing
-let bubbles = $derived.by(() => {
-    const element_entries = Object.entries(composition).filter(([_, amount]) => amount && amount > 0);
-    if (element_entries.length === 0)
-        return [];
-    const hierarchy_data = {
-        children: element_entries.map(([element, amount]) => ({
-            element,
-            amount: amount ?? 0,
-            color: element_colors[element] || `#cccccc`,
-        })),
-    };
+<script lang="ts">
+  import type { ColorSchemeName } from '../colors'
+  import { ELEMENT_COLOR_SCHEMES, pick_contrast_color } from '../colors'
+  import type { CompositionType } from './'
+  import type { ElementSymbol } from '../element'
+  import { hierarchy, pack } from 'd3-hierarchy'
+  import type { Snippet } from 'svelte'
+  import type { SVGAttributes } from 'svelte/elements'
+  import { type ChartSegmentData, get_chart_font_scale } from './index'
+  import { count_atoms_in_composition } from './parse'
+
+  type BubbleSegmentData = ChartSegmentData & { radius: number; x: number; y: number }
+
+  let {
+    composition,
+    size = 200,
+    padding = 0,
+    show_labels = true,
+    show_amounts = true,
+    color_scheme = `Vesta`,
+    bubble_content,
+    interactive = true,
+    svg_node = $bindable(null),
+    children,
+    ...rest
+  }: SVGAttributes<SVGSVGElement> & {
+    composition: CompositionType
+    size?: number
+    padding?: number
+    show_labels?: boolean
+    show_amounts?: boolean
+    color_scheme?: ColorSchemeName
+    bubble_content?: Snippet<[BubbleSegmentData]>
+    interactive?: boolean
+    svg_node?: SVGSVGElement | null
+    children?: Snippet<[{ hovered_element: ElementSymbol | null }]>
+  } = $props()
+
+  let element_colors = $derived(
+    ELEMENT_COLOR_SCHEMES[color_scheme] || ELEMENT_COLOR_SCHEMES.Vesta,
+  )
+
+  // Calculate bubble data with proper circle packing
+  let bubbles = $derived.by<BubbleSegmentData[]>(() => {
+    const element_entries = Object.entries(composition).filter(
+      ([_, amount]) => amount && amount > 0,
+    )
+    if (element_entries.length === 0) return []
+
+    // Create hierarchy data structure for D3 pack
+    type Child = { element: string; amount: number; color: string }
+    type HierarchyData = { children: Child[] }
+
+    const hierarchy_data: HierarchyData = {
+      children: element_entries.map(([element, amount]) => ({
+        element,
+        amount: amount ?? 0,
+        color: element_colors[element] || `#cccccc`,
+      })),
+    }
+
     // Use D3's pack layout for proper circle packing
-    const pack_layout = pack().size([
-        size - 2 * padding,
-        size - 2 * padding,
-    ]).padding(padding * 0.1); // Small padding between circles
-    const root = pack_layout(hierarchy(hierarchy_data).sum((data) => (`amount` in data ? data.amount : 0)));
+    const pack_layout = pack<HierarchyData | Child>().size([
+      size - 2 * padding,
+      size - 2 * padding,
+    ]).padding(padding * 0.1) // Small padding between circles
+
+    const root = pack_layout(
+      hierarchy<HierarchyData | Child>(hierarchy_data).sum(
+        (data) => (`amount` in data ? data.amount : 0),
+      ),
+    )
+
     // Get max radius for font scaling
-    const max_radius = Math.max(...root.leaves().map((data) => data.r || 0));
-    const total_atoms = count_atoms_in_composition(composition);
+    const max_radius = Math.max(...root.leaves().map((data) => data.r || 0))
+    const total_atoms = count_atoms_in_composition(composition)
+
     return root.leaves().map((node) => {
-        const radius = node.r || 0;
-        const data = node.data;
-        // Calculate font scale based on bubble size and smart text fitting
-        const [min_font_scale, max_font_scale] = [0.6, 2];
-        const scale_factor = radius / max_radius;
-        const base_scale = min_font_scale +
-            scale_factor * (max_font_scale - min_font_scale);
-        const label_text = data.element + (show_amounts ? data.amount.toString() : ``);
-        const available_space = radius * 2 * 0.8; // 80% of bubble diameter for text
-        const font_scale = get_chart_font_scale(base_scale, label_text, available_space);
-        return {
-            element: data.element,
-            amount: data.amount,
-            fraction: total_atoms > 0 ? data.amount / total_atoms : 0,
-            radius,
-            x: (node.x || 0) + padding, // Offset by padding
-            y: (node.y || 0) + padding,
-            color: data.color,
-            font_scale,
-            text_color: pick_contrast_color({ bg_color: data.color }),
-        };
-    });
-});
-let hovered_element = $state(null);
+      const radius = node.r || 0
+      const data = node.data as Child
+
+      // Calculate font scale based on bubble size and smart text fitting
+      const [min_font_scale, max_font_scale] = [0.6, 2] as const
+      const scale_factor = radius / max_radius
+      const base_scale = min_font_scale +
+        scale_factor * (max_font_scale - min_font_scale)
+      const label_text = data.element + (show_amounts ? data.amount.toString() : ``)
+      const available_space = radius * 2 * 0.8 // 80% of bubble diameter for text
+      const font_scale = get_chart_font_scale(base_scale, label_text, available_space)
+
+      return {
+        element: data.element as ElementSymbol,
+        amount: data.amount,
+        fraction: total_atoms > 0 ? data.amount / total_atoms : 0,
+        radius,
+        x: (node.x || 0) + padding, // Offset by padding
+        y: (node.y || 0) + padding,
+        color: data.color,
+        font_scale,
+        text_color: pick_contrast_color({ bg_color: data.color }),
+      }
+    })
+  })
+
+  let hovered_element: ElementSymbol | null = $state(null)
 </script>
 
 <svg
   viewBox="0 0 {size} {size}"
+  style:max-width="{size}px"
   {...rest}
   class="bubble-chart {rest.class ?? ``}"
   bind:this={svg_node}
@@ -104,9 +158,10 @@ let hovered_element = $state(null);
             bubble.element
           }</span>
           {#if show_amounts}
-            <sub class="amount" style:font-size="{10 * bubble.font_scale}px">
-              {bubble.amount}
-            </sub>{/if}
+            <sub class="amount" style:font-size="{8 * bubble.font_scale}px">{
+              bubble.amount
+            }</sub>
+          {/if}
         </div>
       </foreignObject>
     {/each}

package/dist/composition/Composition.svelte

@@ -1,107 +1,128 @@
-<script lang="ts">import { untrack } from 'svelte';
-import { ContextMenu } from '../overlays';
-import { export_svg_as_png, export_svg_as_svg } from '../io/export';
-import { get_electro_neg_formula } from './format';
-import { BarChart, BubbleChart, PieChart } from './index';
-import { parse_composition } from './parse';
-let { composition, mode = `pie`, on_composition_change, color_scheme = `Vesta`, ...rest } = $props();
-// Using $state with untrack() - initialized from props but mutated by context menu
-let current_color_scheme = $state(untrack(() => color_scheme));
-let current_mode = $state(untrack(() => mode));
-let svg_node = $state(null);
-let Component = $derived({ pie: PieChart, bubble: BubbleChart, bar: BarChart }[current_mode]);
-let parsed = $derived.by(() => {
+<script lang="ts">
+  import type { ColorSchemeName } from '../colors'
+  import type { CompositionType } from './'
+  import { untrack } from 'svelte'
+  import { ContextMenu } from '../overlays'
+  import { export_svg_as_png, export_svg_as_svg } from '../io/export'
+  import type { SVGAttributes } from 'svelte/elements'
+  import { get_electro_neg_formula } from './format'
+  import { BarChart, BubbleChart, PieChart } from './index'
+  import { parse_composition } from './parse'
+
+  type CompositionChartMode = `pie` | `bubble` | `bar`
+  let {
+    composition,
+    mode = `pie`,
+    on_composition_change,
+    color_scheme = `Vesta`,
+    ...rest
+  }: SVGAttributes<SVGSVGElement> & {
+    composition: string | CompositionType
+    mode?: CompositionChartMode
+    on_composition_change?: (composition: CompositionType) => void
+    color_scheme?: ColorSchemeName
+    size?: number
+    interactive?: boolean
+  } = $props()
+
+  // Using $state with untrack() - initialized from props but mutated by context menu
+  let current_color_scheme = $state(untrack(() => color_scheme as ColorSchemeName))
+  let current_mode = $state(untrack(() => mode))
+  let svg_node = $state<SVGSVGElement | null>(null)
+
+  let Component = $derived(
+    { pie: PieChart, bubble: BubbleChart, bar: BarChart }[current_mode],
+  )
+  let parsed: CompositionType = $derived.by(() => {
     try {
-        return parse_composition(composition);
-    }
-    catch (error) {
-        console.error(`Failed to parse composition:`, error);
-        return {};
+      return parse_composition(composition)
+    } catch (error) {
+      console.error(`Failed to parse composition:`, error)
+      return {}
     }
-});
-// Call the composition change callback in an effect, not in the derived
-$effect(() => on_composition_change?.(parsed));
-let context_menu = $state({ open: false, x: 0, y: 0 });
-function handle_right_click(event) {
-    event.preventDefault();
-    context_menu.open = false; // Close any existing context menu first
-    context_menu.x = event.pageX;
-    context_menu.y = event.pageY;
+  })
+  // Call the composition change callback in an effect, not in the derived
+  $effect(() => on_composition_change?.(parsed))
+
+  let context_menu = $state({ open: false, x: 0, y: 0 })
+
+  function handle_right_click(event: MouseEvent) { // open context menu
+    event.preventDefault()
+    context_menu.open = false // Close any existing context menu first
+    context_menu.x = event.pageX
+    context_menu.y = event.pageY
     // Use a small delay to ensure the prev context menu closes happens before opening new one
-    setTimeout(() => context_menu.open = true, 0);
-}
-const mode_options = [
+    setTimeout(() => context_menu.open = true, 0)
+  }
+
+  const mode_options = [
     { value: `pie`, icon: `Circle`, label: `Pie Chart` },
     { value: `bubble`, icon: `Circle`, label: `Bubble Chart` },
     { value: `bar`, icon: `Graph`, label: `Bar Chart` },
-];
-const color_scheme_options = [
+  ] as const
+
+  const color_scheme_options = [
     { value: `Vesta`, icon: `ColorPalette`, label: `Vesta` },
     { value: `Jmol`, icon: `ColorPalette`, label: `Jmol` },
     { value: `Alloy`, icon: `ColorPalette`, label: `Alloy` },
     { value: `Pastel`, icon: `ColorPalette`, label: `Pastel` },
     { value: `Muted`, icon: `ColorPalette`, label: `Muted` },
     { value: `Dark Mode`, icon: `ColorPalette`, label: `Dark Mode` },
-];
-const export_options = [
+  ] as const
+
+  const export_options = [
     { value: `copy_formula`, icon: `Copy`, label: `Copy Formula` },
     { value: `copy_data`, icon: `Copy`, label: `Copy Data` },
     { value: `export_svg`, icon: `Download`, label: `Export SVG` },
     { value: `export_png`, icon: `Download`, label: `Export PNG` },
-];
-const sec_titles = {
+  ] as const
+
+  const sec_titles = {
     display_mode: `Display Mode`,
     color_scheme: `Color Scheme`,
     export: `Export`,
-};
-const context_menu_sections = [
+  } as const
+
+  const context_menu_sections = [
     { title: sec_titles.display_mode, options: mode_options },
     { title: sec_titles.color_scheme, options: color_scheme_options },
     { title: sec_titles.export, options: export_options },
-];
-function handle_context_menu_select(section_title, option) {
+  ] as const
+
+  function handle_context_menu_select(
+    section_title: string,
+    option: { value: string },
+  ) {
     if (section_title === sec_titles.display_mode) {
-        current_mode = option.value;
-    }
-    else if (section_title === sec_titles.color_scheme) {
-        current_color_scheme = option.value;
-    }
-    else if (section_title === sec_titles.export)
-        handle_export(option.value);
-    context_menu.open = false;
-}
-// Handle export actions
-function handle_export(export_type) {
+      current_mode = option.value as CompositionChartMode
+    } else if (section_title === sec_titles.color_scheme) {
+      current_color_scheme = option.value as ColorSchemeName
+    } else if (section_title === sec_titles.export) handle_export(option.value)
+    context_menu.open = false
+  }
+
+  // Handle export actions
+  function handle_export(export_type: string) {
     try {
-        if (export_type === `copy_formula`) {
-            const formula = get_electro_neg_formula(composition);
-            navigator.clipboard.writeText(formula);
-        }
-        else if (export_type === `copy_data`) {
-            const data = JSON.stringify(parsed, null, 2);
-            navigator.clipboard.writeText(data);
-        }
-        else if (export_type === `export_svg`) {
-            const filename = `${get_electro_neg_formula(composition, true, ``)}.svg`;
-            if (svg_node)
-                export_svg_as_svg(svg_node, filename);
-            else
-                console.warn(`Chart SVG not available for SVG export`);
-        }
-        else if (export_type === `export_png`) {
-            const filename = `${get_electro_neg_formula(composition, true, ``)}.png`;
-            if (svg_node)
-                export_svg_as_png(svg_node, filename, 150);
-            else
-                console.warn(`Chart SVG not available for PNG export`);
-        }
-        else
-            console.warn(`Invalid export type:`, export_type);
-    }
-    catch (error) {
-        console.error(`Export failed:`, error);
+      if (export_type === `copy_formula`) {
+        const formula = get_electro_neg_formula(composition)
+        navigator.clipboard.writeText(formula)
+      } else if (export_type === `copy_data`) {
+        const data = JSON.stringify(parsed, null, 2)
+        navigator.clipboard.writeText(data)
+      } else if (export_type === `export_svg`) {
+        const filename = `${get_electro_neg_formula(composition, true, ``)}.svg`
+        if (svg_node) export_svg_as_svg(svg_node, filename)
+        else console.warn(`Chart SVG not available for SVG export`)
+      } else if (export_type === `export_png`) {
+        const filename = `${get_electro_neg_formula(composition, true, ``)}.png`
+        if (svg_node) export_svg_as_png(svg_node, filename, 150)
+        else console.warn(`Chart SVG not available for PNG export`)
+      } else console.warn(`Invalid export type:`, export_type)
+    } catch (error) {
+      console.error(`Export failed:`, error)
     }
-}
+  }
 </script>
 
 <Component

package/dist/composition/Formula.svelte

@@ -1,75 +1,121 @@
-<script lang="ts">import { ELEMENT_COLOR_SCHEMES, luminance } from '../colors';
-import { element_data } from '../element';
-import ElementTile from '../element/ElementTile.svelte';
-import { format_num } from '../labels';
-import { format_oxi_state, sort_by_electronegativity, sort_by_hill_notation, } from './format';
-import { oxi_composition_to_elements, parse_formula_with_oxidation } from './parse';
-let { formula, color_scheme = `Vesta`, ordering = `original`, as = `span`, amount_format = `.3~s`, tooltip_side = `bottom`, tooltip_offset = 5, on_click, ...rest } = $props();
-const parsed_elements = $derived.by(() => {
+<script lang="ts">
+  import type { ColorSchemeName } from '../colors'
+  import { ELEMENT_COLOR_SCHEMES, luminance } from '../colors'
+  import type { ElementSymbol } from '../element'
+  import { element_data } from '../element'
+  import ElementTile from '../element/ElementTile.svelte'
+  import { format_num } from '../labels'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import {
+    format_oxi_state,
+    sort_by_electronegativity,
+    sort_by_hill_notation,
+  } from './format'
+  import type { ElementWithOxidation, OxiComposition } from './parse'
+  import { oxi_composition_to_elements, parse_formula_with_oxidation } from './parse'
+
+  type FormulaOrdering = `electronegativity` | `alphabetical` | `original` | `hill`
+  type TooltipSide = `top` | `bottom` | `left` | `right`
+  let {
+    formula,
+    color_scheme = `Vesta`,
+    ordering = `original`,
+    as = `span`,
+    amount_format = `.3~s`,
+    tooltip_side = `bottom`,
+    tooltip_offset = 5,
+    on_click,
+    ...rest
+  }: HTMLAttributes<HTMLElement> & {
+    formula: string | OxiComposition
+    color_scheme?: ColorSchemeName
+    ordering?: FormulaOrdering
+    as?: string
+    amount_format?: string
+    tooltip_side?: TooltipSide
+    tooltip_offset?: number
+    on_click?: (element: ElementSymbol, event: MouseEvent | KeyboardEvent) => void
+  } = $props()
+
+  const parsed_elements = $derived.by(() => {
     try {
-        return typeof formula === `string`
-            ? parse_formula_with_oxidation(formula)
-            : oxi_composition_to_elements(formula);
+      return typeof formula === `string`
+        ? parse_formula_with_oxidation(formula)
+        : oxi_composition_to_elements(formula)
+    } catch (error) {
+      console.error(`Failed to parse formula:`, error)
+      return []
     }
-    catch (error) {
-        console.error(`Failed to parse formula:`, error);
-        return [];
-    }
-});
-const COMPARATORS = {
+  })
+
+  const COMPARATORS: Record<
+    FormulaOrdering,
+    (el1: ElementWithOxidation, el2: ElementWithOxidation) => number
+  > = {
     alphabetical: (el1, el2) => el1.element.localeCompare(el2.element),
     original: (el1, el2) => el1.orig_idx - el2.orig_idx,
     electronegativity: (el1, el2) => {
-        const sorted = sort_by_electronegativity([el1.element, el2.element]);
-        return sorted[0] === el1.element ? -1 : 1;
+      const sorted = sort_by_electronegativity([el1.element, el2.element])
+      return sorted[0] === el1.element ? -1 : 1
     },
     hill: (el1, el2) => {
-        const sorted = sort_by_hill_notation([el1.element, el2.element]);
-        return sorted[0] === el1.element ? -1 : 1;
+      const sorted = sort_by_hill_notation([el1.element, el2.element])
+      return sorted[0] === el1.element ? -1 : 1
     },
-};
-const sorted_elements = $derived([...parsed_elements].sort(COMPARATORS[ordering]));
-let hovered_element = $state(null);
-let tooltip_pos = $state({ x: 0, y: 0 });
-const hovered_elem_data = $derived(hovered_element ? element_data.find((el) => el.symbol === hovered_element) : null);
-// Format formula as plain text for clipboard: "Li2 O" or "Fe(+3)2 O(-2)3"
-const plain_text_formula = $derived(sorted_elements
-    .map(({ element, amount, oxidation_state }) => {
-    let text = element;
-    if (oxidation_state !== undefined && oxidation_state !== 0) {
-        // Use parentheses to avoid ambiguity like "Fe+32" looking like oxidation +32
-        text += `(${format_oxi_state(oxidation_state)})`;
-    }
-    if (amount !== 1)
-        text += format_num(amount, amount_format);
-    return text;
-})
-    .join(` `));
-function handle_copy(event) {
-    const selection = window.getSelection();
+  }
+  const sorted_elements = $derived(
+    [...parsed_elements].sort(COMPARATORS[ordering]),
+  )
+
+  let hovered_element = $state<ElementSymbol | null>(null)
+  let tooltip_pos = $state({ x: 0, y: 0 })
+
+  const hovered_elem_data = $derived(
+    hovered_element ? element_data.find((el) => el.symbol === hovered_element) : null,
+  )
+
+  // Format formula as plain text for clipboard: "Li2 O" or "Fe(+3)2 O(-2)3"
+  const plain_text_formula = $derived(
+    sorted_elements
+      .map(({ element, amount, oxidation_state }) => {
+        let text = element
+        if (oxidation_state !== undefined && oxidation_state !== 0) {
+          // Use parentheses to avoid ambiguity like "Fe+32" looking like oxidation +32
+          text += `(${format_oxi_state(oxidation_state)})`
+        }
+        if (amount !== 1) text += format_num(amount, amount_format)
+        return text
+      })
+      .join(` `),
+  )
+
+  function handle_copy(event: ClipboardEvent) {
+    const selection = window.getSelection()
     // Only intercept if user selected text fully within this formula
-    if (!selection || selection.isCollapsed)
-        return;
-    const formula_el = event.currentTarget;
-    if (!formula_el.contains(selection.anchorNode) ||
-        !formula_el.contains(selection.focusNode))
-        return; // Selection extends outside formula, let browser handle normally
-    event.preventDefault();
-    event.clipboardData?.setData(`text/plain`, plain_text_formula);
-}
-function show_tooltip(element, event) {
-    const { left, width, top, bottom, right, height } = event.target
-        .getBoundingClientRect();
-    hovered_element = element;
+    if (!selection || selection.isCollapsed) return
+    const formula_el = event.currentTarget as HTMLElement
+    if (
+      !formula_el.contains(selection.anchorNode) ||
+      !formula_el.contains(selection.focusNode)
+    ) return // Selection extends outside formula, let browser handle normally
+    event.preventDefault()
+    event.clipboardData?.setData(`text/plain`, plain_text_formula)
+  }
+
+  function show_tooltip(element: ElementSymbol, event: MouseEvent) {
+    const { left, width, top, bottom, right, height } = (event.target as HTMLElement)
+      .getBoundingClientRect()
+    hovered_element = element
+
     const positions = {
-        top: [left + width / 2, top - tooltip_offset],
-        bottom: [left + width / 2, bottom + tooltip_offset],
-        left: [left - tooltip_offset, top + height / 2],
-        right: [right + tooltip_offset, top + height / 2],
-    };
-    const [x, y] = positions[tooltip_side];
-    tooltip_pos = { x, y };
-}
+      top: [left + width / 2, top - tooltip_offset],
+      bottom: [left + width / 2, bottom + tooltip_offset],
+      left: [left - tooltip_offset, top + height / 2],
+      right: [right + tooltip_offset, top + height / 2],
+    }
+    const [x, y] = positions[tooltip_side]
+    tooltip_pos = { x, y }
+  }
 </script>
 
 <svelte:element