MolSpec is a standalone JavaScript module for embedding metabolite spectrum data into any page. It provides two entry points: MolSpec.init fetches and displays all available spectra for a given metabolite as a summary table, and MolSpec.initViewer renders a full single-spectrum show page — including the spectrum graph, experimental conditions, references, and (for NMR) an assignment table and 3D structure viewer. Both functions communicate with the /spectra_proxy backend routes and delegate rendering to the appropriate JSV viewer.

Supported Spectrum Types

MolSpec handles the following spectrum types, identified by their string key:

Key	Label
nmr_one_d	1D NMR
nmr_two_d	2D NMR
c_ms	GC-MS
ei_ms	MS (EI)
ms_ms	LC-MS/MS
ms_ir	MS-IR

MolSpec.init

Fetches all available spectra for a metabolite and renders a summary table inside a container element. Use this on metabolite show pages where you want to list every spectrum type in one place.

MolSpec.init(metaboliteId, databaseId, containerId, options);

Parameters

Internal numeric ID of the metabolite record (used for display only; not sent to the proxy).

number | required

External database identifier for the metabolite (e.g. HMDB accession). Sent to the proxy as ?database_id= when fetching each spectrum type.

string | required

ID (without #) of the DOM element that will receive the rendered table.

string | required

Optional configuration object.

• prefix — string. URL prefix for "View Spectrum" links. Links are built as /<prefix>/<type>/<id>. Defaults to /spectrum/<type>/<id> when omitted.
• onResults — function. Custom callback receiving the full results array instead of rendering the default table. Signature: function(results) where each element is { type: { key, label }, spectra: [...] }.
• spectraTypes — array. Override the list of spectrum types to fetch. Defaults to all six types in MolSpec.SPECTRUM_TYPES.

object | default: {}

Example

MolSpec.init(1234, "HMDB0000001", "spectra-list");
// With options:
MolSpec.init(1234, "HMDB0000001", "spectra-list", {
  prefix: "specdb",
  spectraTypes: [{ key: "nmr_one_d", label: "1D NMR" }],
  onResults: function(results) {
    console.log(results);
  },
});

MolSpec.initViewer

Renders a complete spectrum show page inside a container element. Reads the spectrum type and ID from data-type and data-id attributes on the container, fetches the spectrum record from the proxy, then builds and inserts four panels: Spectrum Details, Spectrum View (delegated to the appropriate JSV viewer), Experimental Conditions, and References. For 1D NMR with an nmrML file, an assignment table and 3D structure viewer are also appended.

// Container element must have data-type and data-id attributes:
// <div id="spectrum-viewer" data-type="nmr_one_d" data-id="42"></div>
MolSpec.initViewer("spectrum-viewer");

Parameters

ID (without #) of the container element. Must have data-type and data-id attributes set.

string | required

Optional configuration object.

• onRender — function. Custom callback that receives control instead of the default panel rendering. Signature: function(spectrum, container, type, id). When provided, no panels are inserted — full rendering responsibility passes to the caller.

object | default: {}

data-type values and viewer delegation

initViewer delegates spectrum rendering based on data-type:

data-type	Viewer called	Notes
nmr_one_d	window.initNmrOneD()	Loads 3Dmol.js first if an nmrML document is present; renders assignment table and 3D structure
nmr_two_d	window.initNmrTwoD()	Falls back to a PNG image if no JSON spectrum data is available
ms_ir	window.initIrViewer()	Fetches XML format from the proxy
c_ms, ei_ms, ms_ms	window.initMsViewer(chartType)	Fetches peak list from /peaks; renders bar chart via SpectraViewer1D

Example

MolSpec.initViewer("spectrum-viewer");
// With custom render callback:
MolSpec.initViewer("spectrum-viewer", {
  onRender: function(spectrum, container, type, id) {
    container.innerHTML = "
" + JSON.stringify(spectrum, null, 2) + "
";
  },
});

MolSpec.renderTable

Low-level helper that renders a results array (as returned by onResults) into a summary table inside a container. Called internally by MolSpec.init when no onResults callback is provided. Exposed publicly for cases where you fetch and post-process results yourself before rendering.

MolSpec.renderTable(containerId, results, prefix);

string | required — ID of the target DOM element

Array of { type: { key, label }, spectra: [...] } objects, as returned by the onResults callback.

array | required

URL prefix for "View Spectrum" links — same as options.prefix in MolSpec.init.

string | default: null

MolSpec.SPECTRUM_TYPES

The default array of spectrum type objects used when no spectraTypes override is given. Each entry has a key (proxy route segment) and a label (display name).

MolSpec.SPECTRUM_TYPES
// [
//   { key: "c_ms",      label: "GC-MS" },
//   { key: "ei_ms",     label: "MS" },
//   { key: "ms_ms",     label: "LC-MS/MS" },
//   { key: "nmr_one_d", label: "1D NMR" },
//   { key: "nmr_two_d", label: "2D NMR" },
//   { key: "ms_ir",     label: "MS-IR" },
// ]