matterviz 0.4.0 → 0.4.2

package/dist/composition/BarChart.svelte

@@ -6,7 +6,12 @@
   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 {
+    chart_segment_label,
+    chart_segment_suffix,
+    type ChartSegmentData,
+    get_chart_font_scale,
+  } from './index'
   import { fractional_composition } from './parse'
 
   type BarSegmentData = ChartSegmentData & {
@@ -66,13 +71,11 @@
   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 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
+    const element_entries = Object.entries(composition).filter(
+      ([_, amount]) => amount && amount > 0,
     ) as [ElementSymbol, number][]
     if (element_entries.length === 0) return []
 
@@ -87,8 +90,13 @@
 
       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 label_text = chart_segment_label(
+        element,
+        amount,
+        fraction,
+        show_amounts,
+        show_percentages,
+      )
       const font_scale = get_chart_font_scale(
         base_scale,
         label_text,
@@ -135,9 +143,7 @@
   </tspan>
   {#if show_amounts || show_percentages}
     <tspan class="amount" style:font-size="{6.5 * segment.font_scale}px" dx="1" dy="5">
-      {show_amounts ? segment.amount : ``}{show_amounts && show_percentages ? `=` : ``}{
-        show_percentages ? format_num(segment.fraction, `.1~%`) : ``
-      }
+      {chart_segment_suffix(segment.amount, segment.fraction, show_amounts, show_percentages)}
     </tspan>
   {/if}
 {/snippet}
@@ -145,7 +151,7 @@
 <svg
   viewBox="0 0 {size} {svg_height}"
   {...rest}
-  class="bar-chart {rest.class ?? ``}"
+  class={[`bar-chart`, rest.class]}
   style:max-width="{size}px"
   bind:this={svg_node}
 >
@@ -161,8 +167,7 @@
 
   <!-- External labels above -->
   {#each segments as segment (segment.element)}
-    {#if show_labels && segment.needs_external_label &&
-      segment.external_label_position === `above`}
+    {#if show_labels && segment.needs_external_label && segment.external_label_position === `above`}
       <text
         x={segment.label_x}
         y={above_labels_y}
@@ -205,20 +210,19 @@
         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~%`)})`,
-        }
-        : {})}
+        {...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~%`)
-          })
+          {segment.element}: {segment.amount}
+          {segment.amount === 1 ? `atom` : `atoms`} ({format_num(segment.fraction, `.1~%`)})
         </title>
       </rect>
       {#if segment_content}
@@ -245,8 +249,7 @@
 
   <!-- External labels below -->
   {#each segments as segment (segment.element)}
-    {#if show_labels && segment.needs_external_label &&
-      segment.external_label_position === `below`}
+    {#if show_labels && segment.needs_external_label && segment.external_label_position === `below`}
       <text
         x={segment.label_x}
         y={below_labels_y}
@@ -274,18 +277,21 @@
   .bar-segment.interactive {
     cursor: pointer;
   }
-  .bar-segment.interactive:hover, .bar-segment.hovered {
+  .bar-segment.interactive:hover,
+  .bar-segment.hovered {
     filter: brightness(1.1);
   }
   .bar-segment.interactive:focus {
     outline: 2px solid var(--focus-color, #0066cc);
     outline-offset: 2px;
   }
-  .external-label, .bar-label {
+  .external-label,
+  .bar-label {
     transition: all 0.2s ease;
     pointer-events: none;
   }
-  .external-label.hovered, .bar-label.hovered {
+  .external-label.hovered,
+  .bar-label.hovered {
     font-weight: 700;
   }
   .element-symbol {

package/dist/composition/BubbleChart.svelte

@@ -60,14 +60,13 @@
     }
 
     // Use D3's pack layout for proper circle packing
-    const pack_layout = pack<HierarchyData | Child>().size([
-      size - 2 * padding,
-      size - 2 * padding,
-    ]).padding(padding * 0.1) // Small padding between circles
+    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),
+      hierarchy<HierarchyData | Child>(hierarchy_data).sum((data) =>
+        `amount` in data ? data.amount : 0,
       ),
     )
 
@@ -82,8 +81,7 @@
       // 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 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)
@@ -109,7 +107,7 @@
   viewBox="0 0 {size} {size}"
   style:max-width="{size}px"
   {...rest}
-  class="bubble-chart {rest.class ?? ``}"
+  class={[`bubble-chart`, rest.class]}
   bind:this={svg_node}
 >
   {#each bubbles as bubble (bubble.element)}
@@ -134,7 +132,8 @@
       }}
     >
       <title>
-        {bubble.element}: {bubble.amount} {bubble.amount === 1 ? `atom` : `atoms`}
+        {bubble.element}: {bubble.amount}
+        {bubble.amount === 1 ? `atom` : `atoms`}
       </title>
     </circle>
 
@@ -154,13 +153,13 @@
         class:hovered={hovered_element === bubble.element}
       >
         <div class="bubble-label" style:color={bubble.text_color}>
-          <span class="element-symbol" style:font-size="{14 * bubble.font_scale}px">{
-            bubble.element
-          }</span>
+          <span class="element-symbol" style:font-size="{14 * bubble.font_scale}px"
+            >{bubble.element}</span
+          >
           {#if show_amounts}
-            <sub class="amount" style:font-size="{8 * bubble.font_scale}px">{
-              bubble.amount
-            }</sub>
+            <sub class="amount" style:font-size="{8 * bubble.font_scale}px"
+              >{bubble.amount}</sub
+            >
           {/if}
         </div>
       </foreignObject>
@@ -177,7 +176,8 @@
   .bubble.interactive {
     cursor: pointer;
   }
-  .bubble.interactive:hover, .bubble.hovered {
+  .bubble.interactive:hover,
+  .bubble.hovered {
     filter: brightness(1.1);
   }
   .bubble.interactive:focus {

package/dist/composition/Composition.svelte

@@ -30,9 +30,7 @@
   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 Component = $derived({ pie: PieChart, bubble: BubbleChart, bar: BarChart }[current_mode])
   let parsed: CompositionType = $derived.by(() => {
     try {
       return parse_composition(composition)
@@ -46,13 +44,14 @@
 
   let context_menu = $state({ open: false, x: 0, y: 0 })
 
-  function handle_right_click(event: MouseEvent) { // open context menu
+  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)
+    setTimeout(() => (context_menu.open = true), 0)
   }
 
   const mode_options = [
@@ -89,10 +88,7 @@
     { title: sec_titles.export, options: export_options },
   ] as const
 
-  function handle_context_menu_select(
-    section_title: string,
-    option: { value: string },
-  ) {
+  function handle_context_menu_select(section_title: string, option: { value: string }) {
     if (section_title === sec_titles.display_mode) {
       current_mode = option.value as CompositionChartMode
     } else if (section_title === sec_titles.color_scheme) {
@@ -147,7 +143,7 @@
   aria-haspopup="menu"
   aria-expanded={context_menu.open}
   {...rest}
-  class="composition {rest.class ?? ``}"
+  class={[`composition`, rest.class]}
 />
 
 {#if context_menu.open}
@@ -160,6 +156,6 @@
     on_select={handle_context_menu_select}
     position={context_menu}
     visible={context_menu.open}
-    on_close={() => context_menu.open = false}
+    on_close={() => (context_menu.open = false)}
   />
 {/if}

package/dist/composition/Formula.svelte

@@ -6,11 +6,7 @@
   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 { 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'
 
@@ -63,9 +59,7 @@
       return sorted[0] === el1.element ? -1 : 1
     },
   }
-  const sorted_elements = $derived(
-    [...parsed_elements].sort(COMPARATORS[ordering]),
-  )
+  const sorted_elements = $derived([...parsed_elements].sort(COMPARATORS[ordering]))
 
   let hovered_element = $state<ElementSymbol | null>(null)
   let tooltip_pos = $state({ x: 0, y: 0 })
@@ -97,7 +91,8 @@
     if (
       !formula_el.contains(selection.anchorNode) ||
       !formula_el.contains(selection.focusNode)
-    ) return // Selection extends outside formula, let browser handle normally
+    )
+      return // Selection extends outside formula, let browser handle normally
     event.preventDefault()
     event.clipboardData?.setData(`text/plain`, plain_text_formula)
   }
@@ -106,8 +101,8 @@
     element: ElementSymbol,
     event: MouseEvent & { currentTarget: HTMLElement },
   ) {
-    const { left, width, top, bottom, right, height } = event.currentTarget
-      .getBoundingClientRect()
+    const { left, width, top, bottom, right, height } =
+      event.currentTarget.getBoundingClientRect()
     hovered_element = element
 
     const positions = {
@@ -121,12 +116,7 @@
   }
 </script>
 
-<svelte:element
-  this={as}
-  {...rest}
-  class="formula {rest.class ?? ``}"
-  oncopy={handle_copy}
->
+<svelte:element this={as} {...rest} class={[`formula`, rest.class]} oncopy={handle_copy}>
   {#each sorted_elements as { element, amount, oxidation_state } (element)}
     {@const color = ELEMENT_COLOR_SCHEMES[color_scheme]?.[element] ?? `#666666`}
     {@const lum = luminance(color)}
@@ -151,14 +141,16 @@
         class:light-border={lum < 0.15}
         style:color
       >
-        {element}</span>
-      <span class="script-wrapper">{#if has_oxidation}
+        {element}</span
+      >
+      <span class="script-wrapper"
+        >{#if has_oxidation}
           <sup class="oxi">{format_oxi_state(oxidation_state)}</sup>
         {/if}
         {#if amount !== 1}
-          <sub class="amt" class:no-sup={!has_oxidation}>{
-            format_num(amount, amount_format)
-          }</sub>
+          <sub class="amt" class:no-sup={!has_oxidation}
+            >{format_num(amount, amount_format)}</sub
+          >
         {/if}
       </span>
     </span>
@@ -167,8 +159,8 @@
 
 {#if hovered_elem_data}
   {@const { x, y } = tooltip_pos}
-  {@const tile_color = ELEMENT_COLOR_SCHEMES[color_scheme]?.[hovered_elem_data.symbol] ??
-    `#666666`}
+  {@const tile_color =
+    ELEMENT_COLOR_SCHEMES[color_scheme]?.[hovered_elem_data.symbol] ?? `#666666`}
   {@const transforms = {
     top: `translate(-50%, -100%)`,
     bottom: `translateX(-50%)`,
@@ -250,7 +242,8 @@
   .script-wrapper:empty {
     display: none;
   }
-  .amt, .oxi {
+  .amt,
+  .oxi {
     font-size: var(--formula-script-font-size, 0.7em);
     line-height: var(--formula-script-inner-line-height, 1);
   }