@xulab-research/vue-anatomogram/src/Switcher.js

Interactive anatomical diagrams for Vue.js applications - A Vue-compatible rewrite of EBI anatomogram

import { getAnatomogramViews } from './Assets.js';

export class Switcher {
  constructor(options = {}) {
    this.atlasUrl = options.atlasUrl || 'https://www.ebi.ac.uk/gxa/';
    this.species = options.species || '';
    this.selectedView = options.selectedView || '';
    this.onChangeView = options.onChangeView || (() => {});
    this.container = null;
  }

  loadIcon(view, selectedView) {

    const suffix = view === selectedView ? "selected" : "unselected";
    return `./img/${view}.${suffix}.png`;
  }

  resolve(uri, baseUrl) {
    try {
      if (uri.startsWith('http://') || uri.startsWith('https://')) {
        return uri;
      }
      return baseUrl.endsWith('/') ? baseUrl + uri : baseUrl + '/' + uri;
    } catch (e) {
      return uri;
    }
  }

  render() {
    const views = getAnatomogramViews(this.species);
    
    const wrapperDiv = document.createElement('div');
    wrapperDiv.style.cssText = `
      display: inline-block;
      vertical-align: top;
      width: 10%;
      max-width: 44px;
      line-height: 0;
    `;

    views.forEach(view => {
      const img = document.createElement('img');
      img.style.cssText = `
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 100%;
        height: auto;
        padding: 2px;
        cursor: pointer;
      `;
      
      img.src = this.resolve(this.loadIcon(view, this.selectedView), this.atlasUrl);
      
      img.addEventListener('mouseenter', () => {
        img.style.border = '1px solid orange';
        img.style.background = 'lightgoldenrodyellow';
      });
      
      img.addEventListener('mouseleave', () => {
        img.style.border = '1px solid #ccc';
        img.style.background = '';
      });
      
      img.addEventListener('click', () => {
        this.onChangeView(view);
      });
      
      wrapperDiv.appendChild(img);
    });

    return wrapperDiv;
  }

  mount(container) {
    this.container = container;
    const element = this.render();
    container.appendChild(element);
    return this;
  }

  update(options = {}) {
    Object.assign(this, options);
    if (this.container) {
      this.container.innerHTML = '';
      const element = this.render();
      this.container.appendChild(element);
    }
    return this;
  }
}

export default Switcher;