matterviz 0.3.2 → 0.3.3

package/dist/chempot-diagram/types.js

@@ -13,6 +13,7 @@ export const CHEMPOT_DEFAULTS = {
     reverse_color_scale: true,
     interpolate_temperature: true,
     max_interpolation_gap: 500,
+    projection_mode: `single`,
     // Dark2 qualitative palette (same as pymatgen/plotly default)
     formula_colors: [
         `#1b9e77`,

package/dist/colors/index.d.ts

@@ -3,7 +3,7 @@ import type { Vec3 } from '../math';
 import type { ELEM_SYMBOLS } from '../labels';
 export type D3InterpolateName = keyof typeof d3_sc & `interpolate${string}`;
 export type D3ColorSchemeName = D3InterpolateName extends `interpolate${infer Name}` ? Name : never;
-export declare const get_d3_interpolator: (name: D3InterpolateName) => (t: number) => string;
+export declare const get_d3_interpolator: (name: D3InterpolateName) => ((t: number) => string);
 export declare const COLOR_SCALE_TYPES: readonly ["continuous", "categorical"];
 export type ColorScaleType = (typeof COLOR_SCALE_TYPES)[number];
 export declare const DEFAULT_CATEGORY_COLORS: Record<string, string>;

package/dist/colors/index.js

@@ -61,10 +61,10 @@ export const is_color = (val) => {
         return false;
     // Check for hex colors, rgb/rgba, hsl/hsla, color(), var(), and named colors
     // Exclude incomplete function prefixes like 'rgb', 'hsl', 'var', 'color'
-    return /^(#[0-9a-f]{3,8}|rgba?\([^)]+\)|hsla?\([^)]+\)|color\([^)]+\)|var\([^)]+\)|(?!rgb$|hsl$|var$|color$)[a-z]+)$/i
-        .test(val.toString().trim());
+    return /^(#[0-9a-f]{3,8}|rgba?\([^)]+\)|hsla?\([^)]+\)|color\([^)]+\)|var\([^)]+\)|(?!rgb$|hsl$|var$|color$)[a-z]+)$/i.test(val.trim());
 };
 export const PLOT_COLORS = [
+    // Color series for e.g. line plots
     `#63b3ed`,
     `#68d391`,
     `#fbd38d`,
@@ -133,7 +133,9 @@ export function is_dark_mode() {
         if (stored === `dark` || stored === `light`)
             return stored === `dark`;
     }
-    catch { /* localStorage throws in private browsing mode */ }
+    catch {
+        /* localStorage throws in private browsing mode */
+    }
     return globalThis.matchMedia?.(`(prefers-color-scheme: dark)`).matches ?? false;
 }
 // Watch for dark mode changes and call callback on each change. Returns cleanup function.

package/dist/composition/BarChart.svelte

@@ -1,59 +1,132 @@
-<script lang="ts">import { ELEMENT_COLOR_SCHEMES, pick_contrast_color } from '../colors';
-import { format_num } from '../labels';
-import { get_chart_font_scale } from './index';
-import { fractional_composition } from './parse';
-let { composition, size = 200, bar_height = 30, label_height = 20, gap = 2, min_segment_size_for_label = 15, thin_segment_threshold = 0.2, external_label_size_threshold = 5, outer_corners_only = true, show_labels = true, show_percentages = false, show_amounts = true, color_scheme = `Vesta`, segment_content, interactive = true, svg_node = $bindable(null), children, ...rest } = $props();
-let element_colors = $derived(ELEMENT_COLOR_SCHEMES[color_scheme] || ELEMENT_COLOR_SCHEMES.Vesta);
-let fractions = $derived(fractional_composition(composition));
-let svg_height = $derived(label_height + gap + bar_height + gap + label_height);
-let bar_y = $derived(label_height + gap);
-let above_labels_y = $derived(label_height / 2);
-let below_labels_y = $derived(label_height + gap + bar_height + gap + label_height / 2);
-let segments = $derived.by(() => {
-    const element_entries = Object.entries(composition).filter(([_, amount]) => amount && amount > 0);
-    if (element_entries.length === 0)
-        return [];
-    let [current_x, above_labels, below_labels] = [0, 0, 0];
+<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 { format_num } from '../labels'
+  import type { Snippet } from 'svelte'
+  import type { SVGAttributes } from 'svelte/elements'
+  import { type ChartSegmentData, get_chart_font_scale } from './index'
+  import { fractional_composition } from './parse'
+
+  type BarSegmentData = ChartSegmentData & {
+    x: number
+    width: number
+    can_show_label: boolean
+    needs_external_label: boolean
+    external_label_position: `above` | `below` | null
+    label_x: number
+    label_y: number
+  }
+
+  let {
+    composition,
+    size = 200,
+    bar_height = 30,
+    label_height = 20,
+    gap = 2,
+    min_segment_size_for_label = 15,
+    thin_segment_threshold = 0.2,
+    external_label_size_threshold = 5,
+    outer_corners_only = true,
+    show_labels = true,
+    show_percentages = false,
+    show_amounts = true,
+    color_scheme = `Vesta`,
+    segment_content,
+    interactive = true,
+    svg_node = $bindable(null),
+    children,
+    ...rest
+  }: SVGAttributes<SVGSVGElement> & {
+    composition: CompositionType
+    size?: number
+    bar_height?: number
+    label_height?: number
+    gap?: number
+    min_segment_size_for_label?: number
+    thin_segment_threshold?: number
+    external_label_size_threshold?: number
+    outer_corners_only?: boolean
+    show_labels?: boolean
+    show_percentages?: boolean
+    show_amounts?: boolean
+    color_scheme?: ColorSchemeName
+    segment_content?: Snippet<[BarSegmentData]>
+    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,
+  )
+  let fractions = $derived(fractional_composition(composition))
+
+  let svg_height = $derived(label_height + gap + bar_height + gap + label_height)
+  let bar_y = $derived(label_height + gap)
+  let above_labels_y = $derived(label_height / 2)
+  let below_labels_y = $derived(
+    label_height + gap + bar_height + gap + label_height / 2,
+  )
+
+  let segments = $derived.by(() => {
+    const element_entries = Object.entries(composition).filter(([_, amount]) =>
+      amount && amount > 0
+    ) as [ElementSymbol, number][]
+    if (element_entries.length === 0) return []
+
+    let [current_x, above_labels, below_labels] = [0, 0, 0]
+
     return element_entries.map(([element, amount]) => {
-        const fraction = fractions[element] || 0;
-        const color = element_colors[element] || `#cccccc`;
-        const width = fraction * size;
-        const x = current_x;
-        current_x += width;
-        const segment_size = Math.min(width, size);
-        const base_scale = Math.min(2, Math.max(1, segment_size / 40));
-        const label_text = element + (show_amounts ? amount.toString() : ``) +
-            (show_percentages ? `${format_num(fraction, `.1~%`)}` : ``);
-        const font_scale = get_chart_font_scale(base_scale, label_text, segment_size * 0.9, 0.6, 12);
-        // Label positioning
-        const can_show_label = segment_size >= min_segment_size_for_label;
-        const is_thin = fraction < thin_segment_threshold;
-        const can_show_external_label = segment_size >= external_label_size_threshold;
-        const needs_external_label = is_thin && can_show_external_label;
-        let external_label_position = null;
-        if (needs_external_label) {
-            external_label_position = above_labels <= below_labels ? `above` : `below`;
-            if (external_label_position === `above`)
-                above_labels++;
-            else
-                below_labels++;
-        }
-        const text_color = pick_contrast_color({ bg_color: color });
-        const label_props = {
-            font_scale,
-            text_color,
-            can_show_label,
-            needs_external_label,
-            external_label_position,
-            label_x: x + width / 2,
-            label_y: bar_y + bar_height / 2,
-        };
-        return { element, amount, fraction, color, x, width, ...label_props };
-    });
-});
-let hovered_element = $state(null);
-// Generate unique ID for clipPath to avoid collisions across BarCharts
-let clip_path_id = $derived(`bar-clip-${crypto.randomUUID()}`);
+      const fraction = fractions[element] || 0
+      const color = element_colors[element] || `#cccccc`
+      const width = fraction * size
+      const x = current_x
+      current_x += width
+
+      const segment_size = Math.min(width, size)
+      const base_scale = Math.min(2, Math.max(1, segment_size / 40))
+      const label_text = element + (show_amounts ? amount?.toString() ?? `` : ``) +
+        (show_percentages ? `${format_num(fraction, `.1~%`)}` : ``)
+      const font_scale = get_chart_font_scale(
+        base_scale,
+        label_text,
+        segment_size * 0.9,
+        0.6,
+        12,
+      )
+
+      // Label positioning
+      const can_show_label = segment_size >= min_segment_size_for_label
+      const is_thin = fraction < thin_segment_threshold
+      const can_show_external_label = segment_size >= external_label_size_threshold
+      const needs_external_label = is_thin && can_show_external_label
+
+      let external_label_position: `above` | `below` | null = null
+      if (needs_external_label) {
+        external_label_position = above_labels <= below_labels ? `above` : `below`
+        if (external_label_position === `above`) above_labels++
+        else below_labels++
+      }
+
+      const text_color = pick_contrast_color({ bg_color: color })
+      const label_props = {
+        font_scale,
+        text_color,
+        can_show_label,
+        needs_external_label,
+        external_label_position,
+        label_x: x + width / 2,
+        label_y: bar_y + bar_height / 2,
+      }
+      return { element, amount, fraction, color, x, width, ...label_props }
+    })
+  })
+
+  let hovered_element: ElementSymbol | null = $state(null)
+  // Generate unique ID for clipPath to avoid collisions across BarCharts
+  let clip_path_id = $derived(`bar-clip-${crypto.randomUUID()}`)
 </script>
 
 {#snippet label_content(segment: BarSegmentData)}

package/dist/composition/BubbleChart.svelte

@@ -1,55 +1,108 @@
-<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

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