matterviz 0.4.0 → 0.4.2

package/dist/phase-diagram/PhaseDiagramExportPane.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+  import type { PaneToggleProps } from '../overlays'
+  import type { ExportSection } from '../io'
+  import ExportPane from '../io/ExportPane.svelte'
   import { export_svg_as_png, export_svg_as_svg } from '../io/export'
-  import DraggablePane from '../overlays/DraggablePane.svelte'
+  import { download } from '../io/fetch'
   import type { ComponentProps } from 'svelte'
-  import { CopyButton } from 'svelte-multiselect'
-  import { tooltip } from 'svelte-multiselect/attachments'
   import type { HTMLAttributes } from 'svelte/elements'
   import type { PhaseDiagramData } from './types'
 
@@ -29,12 +30,9 @@
     filename?: string
     png_dpi?: number
     icon_style?: string
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+    toggle_props?: PaneToggleProps
   } = $props()
 
-  let json_copy_state = $state<ComponentProps<typeof CopyButton>[`state`]>(`ready`)
-  let svg_copy_state = $state<ComponentProps<typeof CopyButton>[`state`]>(`ready`)
-
   // Generate filename with components if available (requires exactly 2 components)
   const full_filename = $derived(
     data?.components?.length === 2
@@ -43,142 +41,59 @@
   )
 
   const svg = $derived(
-    svg_element ??
-      (wrapper?.querySelector(svg_query_selector) as SVGSVGElement | null),
+    svg_element ?? (wrapper?.querySelector(svg_query_selector) as SVGSVGElement | null),
   )
 
   const json_export_data = $derived(json_payload ?? data)
+  const json_string = (): string | null =>
+    json_export_data ? JSON.stringify(json_export_data, null, 2) : null
 
-  const svg_string = $derived(svg ? new XMLSerializer().serializeToString(svg) : null)
-
-  function download_json() {
-    if (!json_export_data) return
-
-    const json_string = JSON.stringify(json_export_data, null, 2)
-    const blob = new Blob([json_string], { type: `application/json` })
-    const url = URL.createObjectURL(blob)
-
-    const link = document.createElement(`a`)
-    link.href = url
-    link.download = `${full_filename}.json`
-    link.click()
-
-    URL.revokeObjectURL(url)
-  }
-
-  const json_string = $derived(
-    json_export_data ? JSON.stringify(json_export_data, null, 2) : null,
-  )
+  const sections = $derived<ExportSection[]>([
+    {
+      title: `Image`,
+      tooltip: `Download or copy the phase diagram`,
+      items: [
+        {
+          label: `SVG`,
+          disabled: !svg,
+          on_download: () => svg && export_svg_as_svg(svg, `${full_filename}.svg`),
+          copy_text: () => (svg ? new XMLSerializer().serializeToString(svg) : null),
+        },
+        {
+          label: `PNG`,
+          disabled: !svg,
+          show_dpi: true,
+          on_download: () => svg && export_svg_as_png(svg, `${full_filename}.png`, png_dpi),
+        },
+      ],
+    },
+    {
+      title: `Data`,
+      tooltip: `Export phase diagram data as JSON`,
+      items: [
+        {
+          label: `JSON`,
+          disabled: !json_export_data,
+          on_download: () => {
+            const content = json_string()
+            if (content) download(content, `${full_filename}.json`, `application/json`)
+          },
+          copy_text: json_string,
+        },
+      ],
+    },
+  ])
 </script>
 
-<DraggablePane
-  bind:show={export_pane_open}
-  open_icon="Cross"
-  closed_icon="Export"
-  pane_props={{ ...rest, class: `export-pane ${rest.class ?? ``}` }}
+<ExportPane
+  bind:export_pane_open
+  bind:png_dpi
+  {sections}
   {icon_style}
   toggle_props={{
     class: `pd-export-toggle`,
     title: export_pane_open ? `` : `Export phase diagram`,
     ...caller_toggle_props,
   }}
->
-  <div class="export-grid">
-    <h4 id="image" {@attach tooltip({ content: `Download or copy the phase diagram` })}>
-      Image
-    </h4>
-    <label>
-      SVG
-      <button
-        type="button"
-        onclick={() => svg && export_svg_as_svg(svg, `${full_filename}.svg`)}
-        disabled={!svg}
-        title="Download SVG"
-      >
-        ⬇
-      </button>
-      <CopyButton
-        content={svg_string ?? ``}
-        title="Copy SVG to clipboard"
-        bind:state={svg_copy_state}
-        disabled={!svg_string}
-      />
-    </label>
-    <label>
-      PNG
-      <button
-        type="button"
-        onclick={() => svg && export_svg_as_png(svg, `${full_filename}.png`, png_dpi)}
-        disabled={!svg}
-        title={`Download PNG (${png_dpi} DPI)`}
-      >
-        ⬇
-      </button>
-      <span class="dpi-input"
-      >(DPI: <input
-          type="number"
-          min={50}
-          max={600}
-          bind:value={png_dpi}
-          title="Export resolution in dots per inch"
-        />)</span>
-    </label>
-
-    <h4 id="data" {@attach tooltip({ content: `Export phase diagram data as JSON` })}>
-      Data
-    </h4>
-    <label>
-      JSON
-      <button
-        type="button"
-        onclick={download_json}
-        disabled={!json_export_data}
-        title="Download JSON"
-      >
-        ⬇
-      </button>
-      <CopyButton
-        content={json_string ?? ``}
-        title="Copy JSON to clipboard"
-        bind:state={json_copy_state}
-        disabled={!json_string}
-      />
-    </label>
-  </div>
-</DraggablePane>
-
-<style>
-  .export-grid {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 4pt 10pt;
-  }
-  .export-grid h4 {
-    display: inline-flex;
-    align-items: center;
-    margin: 0;
-  }
-  label {
-    display: flex;
-    align-items: center;
-    gap: 8pt;
-    font-size: 0.95em;
-    white-space: nowrap;
-  }
-  .dpi-input {
-    display: inline-flex;
-    align-items: center;
-    gap: 2pt;
-    white-space: nowrap;
-  }
-  button {
-    width: 1.9em;
-    height: 1.6em;
-    padding: 0 6pt;
-    box-sizing: border-box;
-  }
-  input {
-    width: 3.5em;
-  }
-</style>
+  {...rest}
+/>

package/dist/phase-diagram/PhaseDiagramExportPane.svelte.d.ts

@@ -1,5 +1,4 @@
-import DraggablePane from '../overlays/DraggablePane.svelte';
-import type { ComponentProps } from 'svelte';
+import type { PaneToggleProps } from '../overlays';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { PhaseDiagramData } from './types';
 type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
@@ -12,8 +11,8 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     filename?: string;
     png_dpi?: number;
     icon_style?: string;
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
+    toggle_props?: PaneToggleProps;
 };
-declare const PhaseDiagramExportPane: import("svelte").Component<$$ComponentProps, {}, "png_dpi" | "export_pane_open">;
+declare const PhaseDiagramExportPane: import("svelte").Component<$$ComponentProps, {}, "export_pane_open" | "png_dpi">;
 type PhaseDiagramExportPane = ReturnType<typeof PhaseDiagramExportPane>;
 export default PhaseDiagramExportPane;

package/dist/phase-diagram/PhaseDiagramTooltip.svelte

@@ -51,8 +51,7 @@
   const safe_formula = (comp: string) => sanitize_formula(comp, use_subscripts)
 
   // Convert a temperature from data unit to display unit
-  const to_display = (temp: number): number =>
-    convert_temp(temp, data_unit, temperature_unit)
+  const to_display = (temp: number): number => convert_temp(temp, data_unit, temperature_unit)
 
   // Convert atomic fraction to weight fraction: wt_B = (x_B * M_B) / (x_A * M_A + x_B * M_B)
   const wt_fraction_b = $derived.by(() => {
@@ -136,14 +135,8 @@
         phase_b: vlr.top_phase,
         fraction_a: vlr.fraction_bottom,
         fraction_b: vlr.fraction_top,
-        detail_a: format_temperature(
-          to_display(vlr.bottom_temperature),
-          temperature_unit,
-        ),
-        detail_b: format_temperature(
-          to_display(vlr.top_temperature),
-          temperature_unit,
-        ),
+        detail_a: format_temperature(to_display(vlr.bottom_temperature), temperature_unit),
+        detail_b: format_temperature(to_display(vlr.top_temperature), temperature_unit),
       }
     }
     if (lever_rule_mode === `horizontal` && hover_info.lever_rule) {
@@ -165,10 +158,14 @@
 <TooltipContent data={hover_info} snippet_arg={hover_info} {tooltip}>
   <div class="phase-diagram-tooltip">
     <header>
-      <strong>{@html sanitize_html(format_label_html(hover_info.region.name, use_subscripts))}</strong>
-      {#if special_point_info}<span class="special-point-badge">{
-          special_point_info.badge
-        }</span>{/if}
+      <strong
+        >{@html sanitize_html(
+          format_label_html(hover_info.region.name, use_subscripts),
+        )}</strong
+      >
+      {#if special_point_info}<span class="special-point-badge"
+          >{special_point_info.badge}</span
+        >{/if}
     </header>
 
     {#if special_point_info?.description}
@@ -178,54 +175,51 @@
     <dl>
       <dt>Temperature</dt>
       <dd>
-        {
-          format_temperature(
-            to_display(hover_info.temperature),
-            temperature_unit,
-          )
-        }
+        {format_temperature(to_display(hover_info.temperature), temperature_unit)}
         {#if temperature_unit !== `°C`}
-          <small>({
-              format_temperature(
-                convert_temp(hover_info.temperature, data_unit, `°C`),
-                `°C`,
-              )
-            })</small>
+          <small
+            >({format_temperature(
+              convert_temp(hover_info.temperature, data_unit, `°C`),
+              `°C`,
+            )})</small
+          >
         {/if}
       </dd>
       <dt>Composition</dt>
       <dd>
         {format_composition(hover_info.composition, composition_unit)}
         {@html safe_formula(component_b)}
-        <small>({format_composition(1 - hover_info.composition, composition_unit)}
-          {@html safe_formula(component_a)})</small>
+        <small
+          >({format_composition(1 - hover_info.composition, composition_unit)}
+          {@html safe_formula(component_a)})</small
+        >
       </dd>
       {#if wt_fraction_b !== null}
         <dt>Weight</dt>
         <dd>
           {format_num(wt_fraction_b * 100, `.1f`)}%
           {@html safe_formula(component_b)}
-          <small>({format_num((1 - wt_fraction_b) * 100, `.1f`)}%
-            {@html safe_formula(component_a)})</small>
+          <small
+            >({format_num((1 - wt_fraction_b) * 100, `.1f`)}%
+            {@html safe_formula(component_a)})</small
+          >
         </dd>
       {/if}
       {#if stability}
-        <dt>Stable</dt><dd>
-          {format_num(to_display(stability.t_min), `.0f`)} – {
-            format_num(to_display(stability.t_max), `.0f`)
-          } {temperature_unit}
+        <dt>Stable</dt>
+        <dd>
+          {format_num(to_display(stability.t_min), `.0f`)} – {format_num(
+            to_display(stability.t_max),
+            `.0f`,
+          )}
+          {temperature_unit}
           {#if temperature_unit !== `°C`}
-            <small>({
-                format_num(
-                  convert_temp(stability.t_min, data_unit, `°C`),
-                  `.0f`,
-                )
-              } – {
-                format_num(
-                  convert_temp(stability.t_max, data_unit, `°C`),
-                  `.0f`,
-                )
-              } °C)</small>
+            <small
+              >({format_num(convert_temp(stability.t_min, data_unit, `°C`), `.0f`)} – {format_num(
+                convert_temp(stability.t_max, data_unit, `°C`),
+                `.0f`,
+              )} °C)</small
+            >
           {/if}
         </dd>
       {/if}
@@ -239,22 +233,22 @@
           <div
             style:width="{ld.fraction_a * 100}%"
             title="{ld.phase_a}: {format_num(ld.fraction_a * 100, `.1f`)}%"
-          >
-          </div>
+          ></div>
           <div
             style:width="{ld.fraction_b * 100}%"
             title="{ld.phase_b}: {format_num(ld.fraction_b * 100, `.1f`)}%"
-          >
-          </div>
+          ></div>
           <i style:left="{ld.fraction_a * 100}%"></i>
         </div>
         <div class="phase-info">
-          <span>{@html safe_formula(ld.phase_a)}: {
-              format_num(ld.fraction_a * 100, `.0f`)
-            }% <small>at {ld.detail_a}</small></span>
-          <span>{@html safe_formula(ld.phase_b)}: {
-              format_num(ld.fraction_b * 100, `.0f`)
-            }% <small>at {ld.detail_b}</small></span>
+          <span
+            >{@html safe_formula(ld.phase_a)}: {format_num(ld.fraction_a * 100, `.0f`)}%
+            <small>at {ld.detail_a}</small></span
+          >
+          <span
+            >{@html safe_formula(ld.phase_b)}: {format_num(ld.fraction_b * 100, `.0f`)}%
+            <small>at {ld.detail_b}</small></span
+          >
         </div>
       </div>
     {/if}
@@ -263,11 +257,13 @@
       {@const { type, delta_t } = boundary_distance}
       {@const label = delta_t > 0 ? `above` : `below`}
       {@const display_delta = Math.abs(
-        to_display(hover_info.temperature) -
-          to_display(hover_info.temperature - delta_t),
+        to_display(hover_info.temperature) - to_display(hover_info.temperature - delta_t),
       )}
       <div class="boundary-info">
-        {Math.round(display_delta)} {temperature_unit} {label} {type}
+        {Math.round(display_delta)}
+        {temperature_unit}
+        {label}
+        {type}
       </div>
     {/if}
   </div>

package/dist/phase-diagram/TdbInfoPanel.svelte

@@ -20,12 +20,8 @@
     style = ``,
   }: Props = $props()
 
-  const reference = $derived(
-    result.data ? extract_tdb_reference(result.data.comments) : null,
-  )
-  const model_summary = $derived(
-    result.data ? summarize_models(result.data.phases) : null,
-  )
+  const reference = $derived(result.data ? extract_tdb_reference(result.data.comments) : null)
+  const model_summary = $derived(result.data ? summarize_models(result.data.phases) : null)
 </script>
 
 <div class="tdb-info-panel" {style}>
@@ -38,23 +34,30 @@
       <dt>System</dt>
       <dd>{sys}</dd>
       <dt>Phases</dt>
-      <dd class="phases">{#each phases as { name } (name)}<span>{name}</span>{/each}</dd>
-      {#if model_summary}<dt>Models</dt><dd>{model_summary}</dd>{/if}
+      <dd class="phases">
+        {#each phases as { name } (name)}<span>{name}</span>{/each}
+      </dd>
+      {#if model_summary}<dt>Models</dt>
+        <dd>{model_summary}</dd>{/if}
       <dt>Funcs / Params</dt>
       <dd>{functions.length} / {parameters.length}</dd>
       {#if result.temperature_range}
         {@const [t_min, t_max] = result.temperature_range}
-        <dt>T Range</dt><dd>{t_min} – {t_max} K</dd>
+        <dt>T Range</dt>
+        <dd>{t_min} – {t_max} K</dd>
       {/if}
-      {#if reference}<dt>Ref</dt><dd class="ref" title={reference}>{reference}</dd>{/if}
+      {#if reference}<dt>Ref</dt>
+        <dd class="ref" title={reference}>{reference}</dd>{/if}
     </dl>
 
     {#if has_precomputed}
       <p class="notice success">
         ✓ {#if is_precomputed_loaded}
           <strong>Phase diagram loaded</strong> ({sys}.json)
-          <small>TDB contains model parameters. Boundaries computed offline via
-            <a href="https://pycalphad.org" target="_blank">pycalphad</a>.</small>
+          <small
+            >TDB contains model parameters. Boundaries computed offline via
+            <a href="https://pycalphad.org" target="_blank">pycalphad</a>.</small
+          >
         {:else}
           Pre-computed diagram available!
           {#if on_load_precomputed}
@@ -71,16 +74,19 @@
       <div class="notice warning">
         <p>
           ℹ No pre-computed diagram. Use <a href="https://pycalphad.org" target="_blank"
-          >pycalphad</a>:
+            >pycalphad</a
+          >:
         </p>
         <pre>
-<code>from pycalphad import Database, binplot
+<code
+            >from pycalphad import Database, binplot
 import pycalphad.variables as v
 
 db = Database('{tdb}.tdb')
 binplot(db, ['{el_a}', '{el_b}', 'VA'], list(db.phases.keys()), {`{`}
     v.X('{el_b}'): (0, 1, 0.01), v.T: (300, 2000, 10), v.P: 101325, v.N: 1
-})</code></pre>
+})</code
+          ></pre>
       </div>
     {/if}
   {:else}

package/dist/phase-diagram/build-diagram.js

@@ -19,11 +19,11 @@ export function parse_curve_ref(ref) {
         name = name.slice(1);
     }
     // Check for slice suffix [start:end]
-    const slice_match = /^(.+)\[(-?\d*):(-?\d*)\]$/.exec(name);
+    const slice_match = /^(?<base>.+)\[(?<start>-?\d*):(?<end>-?\d*)\]$/.exec(name);
     if (slice_match) {
         name = slice_match[1];
-        start = slice_match[2] ? parseInt(slice_match[2], 10) : null;
-        end = slice_match[3] ? parseInt(slice_match[3], 10) : null;
+        start = slice_match[2] ? Number(slice_match[2]) : null;
+        end = slice_match[3] ? Number(slice_match[3]) : null;
     }
     return { name, reverse, start, end };
 }

package/dist/phase-diagram/colors.js

@@ -1,6 +1,6 @@
 // Phase diagram color palette
 // Keys can be referenced in diagram JSON files
-const rgba = (r, g, b, a = 0.6) => `rgba(${r}, ${g}, ${b}, ${a})`;
+const rgba = (red, green, blue, alpha = 0.6) => `rgba(${red}, ${green}, ${blue}, ${alpha})`;
 // Color palette for diagram JSON files - keyed colors that can be referenced by name
 export const DIAGRAM_COLORS = {
     // Single-phase regions (alpha=0.6)

package/dist/phase-diagram/diagram-input.d.ts

@@ -20,10 +20,9 @@ export interface RegionInput {
     bounds: BoundElement[];
     label_position?: DiagramPoint;
 }
-export type SpecialPointInput = SpecialPoint;
 export interface DiagramInput {
     meta: DiagramInputMeta;
     curves: Record<string, DiagramPoint[]>;
     regions: RegionInput[];
-    special_points?: SpecialPointInput[];
+    special_points?: SpecialPoint[];
 }

package/dist/phase-diagram/parse.d.ts

@@ -1,3 +1,4 @@
+import type { Vec2 } from '../math';
 export declare const TDB_TEMP_DEFAULTS: {
     readonly min: 298.15;
     readonly max_fallback: 3000;
@@ -47,7 +48,7 @@ export interface TdbParseResult {
     error?: string;
     binary_system?: [string, string];
     available_phases?: string[];
-    temperature_range?: [number, number];
+    temperature_range?: Vec2;
 }
 export declare function parse_tdb(content: string): TdbParseResult;
 export declare const get_system_name: (elements: string[]) => string;

package/dist/phase-diagram/parse.js

@@ -86,31 +86,31 @@ const LINE_PARSERS = [
     {
         // ELEMENT AL FCC_A1 2.698154E-02 4.5773304E+03 2.871870E+01!
         prefix: `ELEMENT `,
-        pattern: /ELEMENT\s+(\S+)\s+(\S+)\s+([\d.E+-]+)\s+([\d.E+-]+)\s+([\d.E+-]+)/i,
+        pattern: /ELEMENT\s+(?<symbol>\S+)\s+(?<reference_phase>\S+)\s+(?<mass>[\d.E+-]+)\s+(?<enthalpy>[\d.E+-]+)\s+(?<entropy>[\d.E+-]+)/i,
         handler: (match, data) => {
             data.elements.push({
                 symbol: match[1].toUpperCase(),
                 reference_phase: match[2],
-                mass: parseFloat(match[3]),
-                enthalpy: parseFloat(match[4]),
-                entropy: parseFloat(match[5]),
+                mass: Number(match[3]),
+                enthalpy: Number(match[4]),
+                entropy: Number(match[5]),
             });
         },
     },
     {
         // PHASE LIQUID % 1 1.0 !
         prefix: `PHASE `,
-        pattern: /PHASE\s+(\S+)\s+(%\S*)\s+(\d+)\s+(.+?)!/i,
+        pattern: /PHASE\s+(?<name>\S+)\s+(?<model_hints>%\S*)\s+(?<count>\d+)\s+(?<sites>.+?)!/i,
         handler: (match, data) => {
             const sublattice_sites = match[4]
                 .trim()
                 .split(/\s+/)
-                .map((val) => parseFloat(val))
+                .map(Number)
                 .filter((val) => !isNaN(val));
             data.phases.push({
                 name: match[1],
                 model_hints: match[2],
-                sublattice_count: parseInt(match[3], 10),
+                sublattice_count: Math.trunc(Number(match[3])),
                 sublattice_sites,
             });
         },
@@ -118,7 +118,7 @@ const LINE_PARSERS = [
     {
         // CONSTITUENT FCC_A1 :AL,ZN : VA : !
         prefix: `CONSTITUENT `,
-        pattern: /CONSTITUENT\s+(\S+)\s*:\s*(.+?)!/i,
+        pattern: /CONSTITUENT\s+(?<phase_name>\S+)\s*:\s*(?<constituents>.+?)!/i,
         handler: (match, data) => {
             const phase_name = match[1];
             const constituents = match[2].split(`:`).map((sub) => sub
@@ -133,7 +133,7 @@ const LINE_PARSERS = [
     {
         // FUNCTION GHSERAL 298.15 expr1; 700 Y expr2; 933.47 Y expr3; 2900 N !
         prefix: `FUNCTION `,
-        pattern: /FUNCTION\s+(\S+)\s+(.+?)!/i,
+        pattern: /FUNCTION\s+(?<name>\S+)\s+(?<body>.+?)!/i,
         handler: (match, data) => {
             const ranges = parse_temperature_ranges(match[2]);
             if (ranges.length > 0) {
@@ -148,15 +148,15 @@ const LINE_PARSERS = [
     {
         // PARAMETER G(LIQUID,AL;0) 298.15 +GHSERAL+11005.029-11.841867*T; 6000 N !
         prefix: `PARAMETER `,
-        pattern: /PARAMETER\s+(\w+)\(([^)]+)\)\s+(.+?)!/i,
+        pattern: /PARAMETER\s+(?<type>\w+)\((?<spec>[^)]+)\)\s+(?<expression>.+?)!/i,
         handler: (match, data) => {
-            const spec_match = /([^,]+),([^;]+);(\d+)/.exec(match[2]);
+            const spec_match = /(?<phase>[^,]+),(?<constituents>[^;]+);(?<order>\d+)/.exec(match[2]);
             if (spec_match) {
                 data.parameters.push({
                     type: match[1],
                     phase: spec_match[1],
                     constituents: spec_match[2].split(`,`).map((name) => name.trim()),
-                    order: parseInt(spec_match[3], 10),
+                    order: Math.trunc(Number(spec_match[3])),
                     expression: match[3],
                 });
             }
@@ -170,9 +170,9 @@ function parse_temperature_ranges(body) {
         const trimmed = segment.trim();
         if (!trimmed)
             continue;
-        const temp_match = /^([\d.E+-]+)\s+(.+)/i.exec(trimmed);
+        const temp_match = /^(?<temp>[\d.E+-]+)\s+(?<expr>.+)/i.exec(trimmed);
         if (temp_match) {
-            const next_temp = parseFloat(temp_match[1]);
+            const next_temp = Number(temp_match[1]);
             const expr = temp_match[2].replace(/\s+[YN]\s*$/, ``).trim();
             if (ranges.length > 0)
                 ranges[ranges.length - 1].max = next_temp;
@@ -191,7 +191,7 @@ function parse_tdb_line(line, data) {
                 parser.handler(match, data);
             else if (parser.prefix === `ELEMENT `) {
                 // Fallback for simpler ELEMENT format: ELEMENT AL FCC_A1!
-                const simple_match = /ELEMENT\s+(\S+)\s+(\S+)/i.exec(line);
+                const simple_match = /ELEMENT\s+(?<symbol>\S+)\s+(?<reference_phase>\S+)/i.exec(line);
                 if (simple_match) {
                     data.elements.push({
                         symbol: simple_match[1].toUpperCase(),