genome-module/dist/genome-map.js

Reusable genome-map web component for Angular, React, and Vanilla JS

(function () {
  'use strict';

  function drawGenomeMap(ctx, productId, species) {
    ctx.fillStyle = '#fafafa';
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.fillStyle = '#333';
    ctx.font = '20px Arial';
    ctx.fillText(`Genome: ${species} (${productId})`, 50, 100);
  }

  class GenomeMap extends HTMLElement {
    static get observedAttributes() {
      return ['product-id', 'species'];
    }

    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
      this.render();
      this.draw();
    }

    attributeChangedCallback(name, oldValue, newValue) {
      if (oldValue !== newValue) {
        this.render();
        this.draw();
      }
    }

    render() {
      this.shadowRoot.innerHTML = `
      <style>@import "./style.css";</style>
      <div id="genome-map-container">
        <p>Genome Map for <strong>${this.getAttribute('species')}</strong> (ID: ${this.getAttribute('product-id')})</p>
        <canvas id="genome-map-canvas" width="900" height="300"></canvas>
      </div>
    `;
    }

    draw() {
      const canvas = this.shadowRoot.querySelector('#genome-map-canvas');
      if (canvas) {
        const ctx = canvas.getContext('2d');
        drawGenomeMap(ctx, this.getAttribute('product-id'), this.getAttribute('species'));
      }
    }
  }

  customElements.define('genome-map', GenomeMap);

})();