matterviz 0.3.6 → 0.4.0

package/dist/src/lib/composition/PieChart.svelte

@@ -1,323 +0,0 @@
-<script lang="ts">
-  import type { ColorSchemeName } from '$lib/colors'
-  import { ELEMENT_COLOR_SCHEMES, pick_contrast_color } from '$lib/colors'
-  import type { CompositionType } from '$lib/composition'
-  import type { ElementSymbol } from '$lib/element'
-  import { format_num } from '$lib/labels'
-  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, fractional_composition } from './parse'
-
-  // Constants for pie chart calculations
-  const VERY_THIN_SLICE_THRESHOLD = 20 // degrees
-  const MEDIUM_SLICE_THRESHOLD = 90 // degrees - increased to move more slices toward outer edge
-  const MAX_ANGLE_FOR_FULL_SCALE = 120 // degrees
-
-  type PieSegmentData = ChartSegmentData & {
-    start_angle: number
-    end_angle: number
-    path: string
-    label_x: number
-    label_y: number
-    is_outside_slice: boolean
-  }
-  let {
-    composition,
-    size = 200,
-    stroke_width = 0.5,
-    inner_radius = 0,
-    show_labels = true,
-    show_percentages = false,
-    show_amounts = true,
-    color_scheme = `Vesta`,
-    center_content,
-    segment_content,
-    interactive = true,
-    svg_node = $bindable(null),
-    children,
-    ...rest
-  }: SVGAttributes<SVGSVGElement> & {
-    composition: CompositionType
-    size?: number
-    stroke_width?: number
-    inner_radius?: number
-    show_labels?: boolean
-    show_percentages?: boolean
-    show_amounts?: boolean
-    color_scheme?: ColorSchemeName
-    center_content?: Snippet<[{ composition: CompositionType; total_atoms: number }]>
-    segment_content?: Snippet<[PieSegmentData]>
-    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 total_atoms = $derived(count_atoms_in_composition(composition))
-  let outer_radius = $derived(size / 2 - stroke_width)
-  let inner_radius_adjusted = $derived(Math.min(inner_radius, outer_radius - 10))
-  let center = $derived(size / 2)
-
-  // Calculate pie segments
-  let segments = $derived.by(() => {
-    let current_angle = -90 // Start from top
-
-    return Object.entries(composition)
-      .filter(([_, amount]) => amount && amount > 0)
-      .map(([element_key, amount]) => {
-        const element = element_key as ElementSymbol
-        const fraction = fractions[element] || 0
-        const color = element_colors[element] || `#cccccc`
-
-        // Single element: full circle with no radial stroke line, label at center
-        if (fraction === 1) {
-          const r = outer_radius
-          const ir = inner_radius_adjusted
-          // Two semicircular arcs to form a full circle (avoids SVG 360° arc bug)
-          const outer_arc = `M ${center} ${center - r} A ${r} ${r} 0 1 1 ${center} ${
-            center + r
-          } A ${r} ${r} 0 1 1 ${center} ${center - r} Z`
-          const path = ir > 0
-            ? `${outer_arc} M ${center} ${
-              center - ir
-            } A ${ir} ${ir} 0 1 0 ${center} ${
-              center + ir
-            } A ${ir} ${ir} 0 1 0 ${center} ${center - ir} Z`
-            : outer_arc
-          const label_text = element + (show_amounts ? String(amount) : ``) +
-            (show_percentages ? `${format_num(fraction, `.1~%`)}` : ``)
-          return {
-            element,
-            amount,
-            fraction,
-            color,
-            start_angle: -90,
-            end_angle: 270,
-            path,
-            label_x: center,
-            label_y: center,
-            is_outside_slice: false,
-            font_scale: get_chart_font_scale(2.6, label_text, r * 2),
-            text_color: pick_contrast_color({ bg_color: color }),
-          }
-        }
-
-        const angle_span = fraction * 360
-        const start_angle = current_angle
-        const end_angle = current_angle + angle_span
-
-        current_angle = end_angle
-
-        // Convert to radians for calculations
-        const start_rad = (start_angle * Math.PI) / 180
-        const end_rad = (end_angle * Math.PI) / 180
-        const mid_rad = (((start_angle + end_angle) / 2) * Math.PI) / 180
-
-        // Arc coordinates for outer radius
-        const x1_outer = center + outer_radius * Math.cos(start_rad)
-        const y1_outer = center + outer_radius * Math.sin(start_rad)
-        const x2_outer = center + outer_radius * Math.cos(end_rad)
-        const y2_outer = center + outer_radius * Math.sin(end_rad)
-
-        // Arc coordinates for inner radius
-        const x1_inner = center + inner_radius_adjusted * Math.cos(start_rad)
-        const y1_inner = center + inner_radius_adjusted * Math.sin(start_rad)
-        const x2_inner = center + inner_radius_adjusted * Math.cos(end_rad)
-        const y2_inner = center + inner_radius_adjusted * Math.sin(end_rad)
-
-        const large_arc = angle_span > 180 ? 1 : 0
-
-        // Create donut path if inner radius > 0, otherwise regular pie slice
-        const path = inner_radius_adjusted > 0
-          ? `M ${x1_outer} ${y1_outer} A ${outer_radius} ${outer_radius} 0 ${large_arc} 1 ${x2_outer} ${y2_outer} L ${x2_inner} ${y2_inner} A ${inner_radius_adjusted} ${inner_radius_adjusted} 0 ${large_arc} 0 ${x1_inner} ${y1_inner} Z`
-          : `M ${center} ${center} L ${x1_outer} ${y1_outer} A ${outer_radius} ${outer_radius} 0 ${large_arc} 1 ${x2_outer} ${y2_outer} Z`
-
-        // Position labels with three-tier strategy
-        const is_very_thin_slice = angle_span < VERY_THIN_SLICE_THRESHOLD // Place outside
-        const is_medium_slice = angle_span >= VERY_THIN_SLICE_THRESHOLD &&
-          angle_span < MEDIUM_SLICE_THRESHOLD // Near outer edge
-
-        let label_radius: number
-        let is_outside_slice = false
-
-        if (is_very_thin_slice) {
-          // Very thin slices: place outside with distance proportional to chart size
-          label_radius = outer_radius + outer_radius * 0.2
-          is_outside_slice = true
-        } else if (is_medium_slice) {
-          // Medium slices: place closer to outer edge, proportional to chart size
-          label_radius = outer_radius - outer_radius * 0.3
-          is_outside_slice = false
-        } else {
-          // Large slices: place in middle of ring
-          label_radius = (outer_radius + inner_radius_adjusted) / 2
-          is_outside_slice = false
-        }
-
-        // Calculate font scale based on slice size and smart text fitting
-        const [min_font_scale, max_font_scale] = [1.4, 2] as const
-        const scale_factor = angle_span / MAX_ANGLE_FOR_FULL_SCALE
-        const base_scale = min_font_scale +
-          scale_factor * (max_font_scale - min_font_scale)
-        const label_text = element + (show_amounts ? amount?.toString() ?? `` : ``) +
-          (show_percentages ? `${format_num(fraction, `.1~%`)}` : ``)
-        const available_space = is_very_thin_slice
-          ? outer_radius * 0.8 // More space outside the slice
-          : Math.min(
-            outer_radius - inner_radius_adjusted, // Radial space
-            (angle_span * Math.PI / 180) * label_radius * 0.8, // Arc space at label radius
-          )
-
-        const font_scale = get_chart_font_scale(
-          base_scale,
-          label_text,
-          available_space,
-        )
-
-        return {
-          element,
-          amount,
-          fraction,
-          color,
-          start_angle,
-          end_angle,
-          path,
-          label_x: center + label_radius * Math.cos(mid_rad),
-          label_y: center + label_radius * Math.sin(mid_rad),
-          is_outside_slice,
-          font_scale,
-          text_color: is_outside_slice
-            ? `var(--text-color, #333)`
-            : pick_contrast_color({ bg_color: color }),
-        }
-      })
-  })
-
-  let hovered_element: ElementSymbol | null = $state(null)
-</script>
-
-<svg
-  viewBox="0 0 {size} {size}"
-  style:max-width="{size}px"
-  {...rest}
-  class="pie-chart {rest.class ?? ``}"
-  bind:this={svg_node}
->
-  {#each segments as segment (segment.element)}
-    <path
-      d={segment.path}
-      fill={segment.color}
-      stroke="white"
-      stroke-width={segments.length === 1
-      ? 0
-      : hovered_element === segment.element
-      ? stroke_width + 1
-      : stroke_width}
-      class="pie-segment"
-      class:interactive
-      class:hovered={hovered_element === segment.element}
-      onmouseenter={() => interactive && (hovered_element = segment.element)}
-      onmouseleave={() => interactive && (hovered_element = null)}
-      {...interactive && {
-        role: `button`,
-        tabindex: 0,
-        'aria-label': `${segment.element}: ${segment.amount} ${
-          segment.amount === 1 ? `atom` : `atoms`
-        } (${format_num(segment.fraction, `.1~%`)})`,
-      }}
-    >
-      <title>
-        {segment.element}: {segment.amount}
-        {segment.amount === 1 ? `atom` : `atoms`} ({format_num(segment.fraction, `.1~%`)})
-      </title>
-    </path>
-
-    {#if segment_content}
-      {@render segment_content(segment)}
-    {/if}
-  {/each}
-
-  {#if show_labels}
-    {#each segments as segment (segment.element)}
-      <foreignObject
-        x={segment.label_x - (size * 0.15 * segment.font_scale) / 2}
-        y={segment.label_y - (size * 0.075 * segment.font_scale) / 2}
-        width={size * 0.15 * segment.font_scale}
-        height={size * 0.075 * segment.font_scale}
-        class:hovered={hovered_element === segment.element}
-      >
-        <div
-          class="pie-label"
-          class:inside-slice={!segment.is_outside_slice}
-          class:outside-slice={segment.is_outside_slice}
-          style:color={segment.text_color}
-        >
-          <span class="element-symbol" style:font-size="{14 * segment.font_scale}px">{
-            segment.element
-          }</span>
-          {#if show_amounts || show_percentages}
-            <sub class="amount" style:font-size="{8 * segment.font_scale}px">{
-              show_amounts ? segment.amount : ``
-            }{show_amounts && show_percentages ? `=` : ``}{
-              show_percentages ? format_num(segment.fraction, `.1~%`) : ``
-            }</sub>
-          {/if}
-        </div>
-      </foreignObject>
-    {/each}
-  {/if}
-
-  {#if center_content}
-    <g class="center-content">
-      {@render center_content({ composition, total_atoms })}
-    </g>
-  {/if}
-
-  {@render children?.({ hovered_element })}
-</svg>
-
-<style>
-  .pie-segment {
-    transition: all 0.2s ease;
-  }
-  .pie-segment.interactive {
-    cursor: pointer;
-  }
-  .pie-segment.interactive:hover, .pie-segment.hovered {
-    filter: brightness(1.1);
-  }
-  .pie-segment.interactive:focus {
-    outline: none;
-  }
-  foreignobject {
-    pointer-events: none;
-    transition: all 0.2s ease;
-  }
-  foreignobject.hovered {
-    font-weight: 700;
-  }
-  .pie-label {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    width: 100%;
-    height: 100%;
-    transition: all 0.2s ease;
-    white-space: nowrap;
-  }
-  foreignobject {
-    overflow: visible;
-  }
-  .pie-label.hovered {
-    font-weight: 700;
-  }
-  .amount {
-    margin-left: 1px;
-    transform: translateY(5pt);
-  }
-</style>

package/dist/src/lib/composition/format.ts

@@ -1,155 +0,0 @@
-import type { ElementSymbol } from '$lib/element'
-import type { AnyStructure } from '$lib/structure'
-import type { CompositionType } from '$lib/composition'
-import { format_num } from '$lib/labels'
-import { ELEMENT_ELECTRONEGATIVITY_MAP, is_valid_element, parse_composition } from './parse'
-
-// Extract composition from structure object
-const structure_to_composition = (structure: AnyStructure): CompositionType => {
-  if (!structure.sites || !Array.isArray(structure.sites)) {
-    throw new Error(`Invalid structure object`)
-  }
-
-  const composition: CompositionType = {}
-  for (const site of structure.sites) {
-    if (site.species && Array.isArray(site.species)) {
-      for (const species of site.species) {
-        const element = species.element
-        const occu = species.occu ?? 1
-        composition[element] = (composition[element] ?? 0) + occu
-      }
-    }
-  }
-  return composition
-}
-
-const is_structure_like = (input: CompositionType | AnyStructure): input is AnyStructure =>
-  `sites` in input || `lattice` in input
-
-// Format composition into chemical formula string
-export const format_composition_formula = (
-  composition: CompositionType,
-  sort_fn: (symbols: ElementSymbol[]) => ElementSymbol[],
-  plain_text = false,
-  delim = ` `,
-  amount_format = `.3~s`,
-): string => {
-  const symbols = Object.keys(composition).filter(is_valid_element)
-
-  return sort_fn(symbols)
-    .filter((el) => composition[el] && composition[el] > 0)
-    .map((el) => {
-      const amount = composition[el]
-      if (amount === 1) return el
-      const formatted_amount = format_num(Number(amount), amount_format)
-      return plain_text ? `${el}${formatted_amount}` : `${el}<sub>${formatted_amount}</sub>`
-    })
-    .join(delim)
-}
-
-// Generic formula formatter with error handling
-const format_formula_generic = (
-  input: string | CompositionType | AnyStructure,
-  sort_fn: (symbols: ElementSymbol[]) => ElementSymbol[],
-  plain_text = false,
-  delim = ` `,
-  amount_format = `.3~s`,
-): string => {
-  try {
-    let composition: CompositionType
-
-    if (typeof input === `string`) composition = parse_composition(input)
-    else if (is_structure_like(input)) composition = structure_to_composition(input)
-    else composition = input
-
-    return format_composition_formula(composition, sort_fn, plain_text, delim, amount_format)
-  } catch {
-    return ``
-  }
-}
-
-// Create alphabetical formula
-export const get_alphabetical_formula = (
-  input: string | CompositionType | AnyStructure,
-  plain_text = false,
-  delim = ` `,
-  amount_format = `.3~s`,
-): string =>
-  format_formula_generic(input, (symbols) => symbols.sort(), plain_text, delim, amount_format)
-
-export const sort_by_electronegativity = (symbols: ElementSymbol[]): ElementSymbol[] =>
-  symbols.sort((el_1, el_2) => {
-    const elec_neg_1 = ELEMENT_ELECTRONEGATIVITY_MAP.get(el_1) ?? 0
-    const elec_neg_2 = ELEMENT_ELECTRONEGATIVITY_MAP.get(el_2) ?? 0
-    return elec_neg_1 !== elec_neg_2 ? elec_neg_1 - elec_neg_2 : el_1.localeCompare(el_2)
-  })
-
-// Sort element symbols according to Hill notation (C first, H second, then alphabetical).
-// This is the standard notation for organic compounds in chemistry.
-export const sort_by_hill_notation = (symbols: ElementSymbol[]): ElementSymbol[] => {
-  const has_carbon = symbols.includes(`C`)
-  return symbols.sort((el_a, el_b) => {
-    // Equal elements must return 0 (sort invariant)
-    if (el_a === el_b) return 0
-    // Carbon always comes first
-    if (el_a === `C`) return -1
-    if (el_b === `C`) return 1
-    // If carbon present, hydrogen comes second
-    if (has_carbon) {
-      if (el_a === `H`) return -1
-      if (el_b === `H`) return 1
-    }
-    return el_a.localeCompare(el_b) // All other elements alphabetically
-  })
-}
-
-// Create electronegativity-sorted formula
-export const get_electro_neg_formula = (
-  input: string | CompositionType | AnyStructure,
-  plain_text = false,
-  delim = ` `,
-  amount_format = `.3~f`,
-): string =>
-  format_formula_generic(input, sort_by_electronegativity, plain_text, delim, amount_format)
-
-export interface FormulaLabelSegment {
-  text: string
-  subscript: boolean
-}
-
-export function get_formula_label_segments(formula: string): FormulaLabelSegment[] {
-  const segments: FormulaLabelSegment[] = []
-  let cursor = 0
-
-  for (const match of formula.matchAll(/([A-Za-z])(\d+(?:\.\d+)?)/g)) {
-    const match_idx = match.index ?? 0
-    const prefix = match[1]
-    const amount = match[2]
-    const amount_idx = match_idx + prefix.length
-    if (amount_idx > cursor) {
-      segments.push({ text: formula.slice(cursor, amount_idx), subscript: false })
-    }
-    segments.push({ text: amount, subscript: true })
-    cursor = amount_idx + amount.length
-  }
-
-  if (cursor < formula.length) {
-    segments.push({ text: formula.slice(cursor), subscript: false })
-  }
-  return segments.length > 0 ? segments : [{ text: formula, subscript: false }]
-}
-
-// Create Hill notation formula (C first, H second, then alphabetical)
-export const get_hill_formula = (
-  input: string | CompositionType | AnyStructure,
-  plain_text = false,
-  delim = ` `,
-  amount_format = `.3~s`,
-): string =>
-  format_formula_generic(input, sort_by_hill_notation, plain_text, delim, amount_format)
-
-export function format_oxi_state(oxidation?: number): string {
-  if (oxidation === undefined || oxidation === 0) return ``
-  const sign = oxidation > 0 ? `+` : `-`
-  return `${sign}${Math.abs(oxidation)}`
-}

package/dist/src/lib/composition/index.ts

@@ -1,37 +0,0 @@
-import type { ElementSymbol } from '$lib/element'
-
-export { default as BarChart } from './BarChart.svelte'
-export { default as BubbleChart } from './BubbleChart.svelte'
-export { default as Composition } from './Composition.svelte'
-export * from './format'
-export { default as Formula } from './Formula.svelte'
-export { default as FormulaFilter } from './FormulaFilter.svelte'
-export * from './parse'
-export { default as PieChart } from './PieChart.svelte'
-
-export type CompositionType = Partial<Record<ElementSymbol, number>>
-export type FormulaSearchMode = `elements` | `chemsys` | `exact`
-
-// Base data type for args of all (bar, bubble, pie) chart segment snippets
-export type ChartSegmentData = {
-  element: ElementSymbol
-  amount: number
-  fraction: number
-  color: string
-  font_scale: number
-  text_color: string
-}
-
-export function get_chart_font_scale(
-  base_scale: number,
-  label_text: string,
-  available_space: number,
-  min_scale_factor = 0.7,
-  base_font_size = 16,
-): number {
-  const text_width = label_text.length * 0.6 * base_font_size * base_scale
-
-  return available_space > 0 && text_width > available_space
-    ? Math.max(base_scale * (available_space / text_width), base_scale * min_scale_factor)
-    : base_scale
-}