<bmx-sequence-viewer>

<bmx-sequence-viewer id="ex-seq" style="--bmx-sequence-viewer-height: 38rem"></bmx-sequence-viewer>
<p class="note">The sample is pBMX-demo, a made-up 4,600 bp cloning vector - not a real plasmid - with two genes, a T7 promoter, a multiple cloning site between M13 primer sites, and an origin. Choose a feature on the map or in the Features list; drag along the map to select; switch to Sequence for both strands and translations, or to Digest to cut it with the enzymes ticked (EcoRI, BamHI and HindIII to start). Find motifs with IUPAC letters, list open reading frames, add features and primers from a selection, and save GenBank, FASTA or the map as SVG. The alignment sample shows eight made-up isolates with consensus and conservation. For research use, not clinical.</p>

<div class="row" style="gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-block: 0.5rem 1.5rem">
  <label>Open your own sequence <input type="file" id="ex-seq-file" accept=".gb,.gbk,.genbank,.ape,.embl,.fasta,.fa,.fna,.faa,.dna,.aln,.sto,.txt" /></label>
  <button type="button" id="ex-seq-plasmid">Show the plasmid</button>
  <button type="button" id="ex-seq-alignment">Show the alignment</button>
</div>
<p class="note" id="ex-seq-out" role="status"></p>

<script type="module">
  await customElements.whenDefined('bmx-sequence-viewer');
  const viewer = document.getElementById('ex-seq');
  const out = document.getElementById('ex-seq-out');
  viewer.addEventListener('bmxLoad', e => {
    const { name, length, alphabet, topology, features, alignmentRows } = e.detail;
    out.textContent = alignmentRows ? `An alignment of ${alignmentRows} sequences, ${length.toLocaleString()} columns.` : `${name}: ${length.toLocaleString()} ${alphabet === 'protein' ? 'aa' : 'bp'}, ${topology}, ${features} features.`;
  });
  viewer.addEventListener('bmxFeatureSelect', e => (out.textContent = e.detail ? `Chose ${e.detail.qualifiers.label?.[0] ?? e.detail.type}.` : ''));
  viewer.addEventListener('bmxSelect', e => {
    if (e.detail.length) out.textContent = `Selected ${e.detail.length.toLocaleString()} bp from ${(e.detail.start + 1).toLocaleString()}.`;
  });
  viewer.addEventListener('bmxSave', e => (out.textContent = `Saved ${e.detail.name}.`));
  viewer.addEventListener('bmxError', e => (out.textContent = e.detail.message));
  document.getElementById('ex-seq-file').addEventListener('change', e => {
    if (e.target.files.length) viewer.open(e.target.files[0]);
  });
  document.getElementById('ex-seq-plasmid').addEventListener('click', () => viewer.loadSample('plasmid').then(() => (viewer.view = 'map')));
  document.getElementById('ex-seq-alignment').addEventListener('click', () => viewer.loadSample('alignment'));
  await viewer.loadSample('plasmid');
</script>