@xulab-research/vue-anatomogram/index.js

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

// index.js - Fixed entry file
import Main from './src/Main.js'
import { Anatomogram } from './src/Anatomogram.js'
import AnatomogramComponent from './src/AnatomogramComponent.js'
import Switcher from './src/Switcher.js'
import AnatomogramSvg from './src/AnatomogramSvg.js'
import { supportedSpecies, getDefaultView, getAnatomogramViews } from './src/Assets.js'

// Main export - the most commonly used class by users
export default Main

// Named exports provide more options
export { 
  Main,
  Anatomogram, 
  AnatomogramComponent,
  Switcher,
  AnatomogramSvg,
  supportedSpecies,
  getDefaultView,
  getAnatomogramViews
}

// Vue plugin
export const VueAnatomogram = {
  install(app, options = {}) {
    // Register global component
    app.component('Anatomogram', AnatomogramComponent)
    
    // Provide global configuration
    app.provide('anatomogram-config', options)
    
    // Global methods
    app.config.globalProperties.$anatomogram = (options) => new Main(options)
    app.config.globalProperties.$anatomogramSpecies = supportedSpecies
  }
}

// Helper function - create anatomogram with one line of code
export const createAnatomogram = (options = {}) => {
  return new Main(options)
}

/**
 * Foolproof rendering function - render with just one command
 * @param {string|HTMLElement} elementOrSelector - The DOM element or CSS selector to render to
 * @param {Object} options - Configuration options
 * @returns {Main} Anatomogram instance
 */
export function render(elementOrSelector, options = {}) {
  // Support selector string or DOM element
  const container = typeof elementOrSelector === 'string' 
    ? document.querySelector(elementOrSelector) 
    : elementOrSelector;
  
  if (!container) {
    console.error(`[Vue-Anatomogram] Cannot find target element: ${elementOrSelector}`);
    return null;
  }
  
  // Default configuration
  const defaultOptions = {
    species: 'homo_sapiens',
    showTitle: true,
    showControls: true
  };
  
  // Create instance and render
  try {
    const instance = new Main({...defaultOptions, ...options});
    instance.mount(container);
    return instance;
  } catch (error) {
    console.error(`[Vue-Anatomogram] Rendering failed:`, error);
    
    // Show error message
    container.innerHTML = `
      <div style="
        padding: 20px;
        color: #721c24;
        background-color: #f8d7da;
        border: 1px solid #f5c6cb;
        border-radius: 4px;
        text-align: center;
      ">
        <h3>Failed to load Anatomogram</h3>
        <p>${error.message}</p>
        <button onclick="location.reload()" style="
          margin-top: 10px;
          padding: 5px 10px;
          background: #dc3545;
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
        ">Reload</button>
      </div>
    `;
    return null;
  }
}

// Browser compatibility
if (typeof window !== 'undefined') {
  window.VueAnatomogram = { 
    Main, 
    Anatomogram, 
    AnatomogramComponent,
    VueAnatomogram,
    createAnatomogram,
    supportedSpecies,
    render
  }
  
  // Browser global methods - Minimal API
  window.createAnatomogram = createAnatomogram
  window.renderAnatomogram = render
}