Vue Anatomogram

🔬 Vue.js compatible anatomical structure viewer - A rewrite of @ebi-gene-expression-group/anatomogram for modern Vue applications.

This project is a Vue.js compatible rewrite of the original EBI Gene Expression Group anatomogram package, enabling interactive display and highlighting of anatomical structures across different species in Vue applications.

You need to move the src/svg, src/img, and src/png folders to the public directory.

Features

• 🎯 Interactive organ highlighting and selection
• 🐭 Multi-species support (human, mouse, etc.)
• 🖱️ Mouse events (hover, click)
• 🎨 Customizable colors and opacity
• 📱 Responsive SVG rendering
• 🔄 Dynamic view switching
• ⚡ Vue.js compatibility with plugin support
• ✨ NEW: One-line rendering with the simple render function

Quick Start

npm install @xulab-research/vue-anatomogram

Traditional Usage

import Main from '@xulab-research/vue-anatomogram';

const anatomogram = new Main({
    species: 'homo_sapiens',
    showIds: ['UBERON_0000955'], // brain
    highlightIds: ['UBERON_0000948'], // heart
    selectIds: ['UBERON_0002048'], // lungs
    onClick: (ids) => console.log('Clicked:', ids)
});

anatomogram.mount(document.getElementById('container'));

Configuration Options

Basic Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | species | string | 'homo_sapiens' | Target species identifier | | atlasUrl | string | 'https://www.ebi.ac.uk/gxa/' | Base URL for atlas resources |

Organ Display Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | showIds | array | [] | Array of organ UBERON IDs to display with basic styling | | highlightIds | array | [] | Array of organ UBERON IDs to highlight (emphasis styling) | | selectIds | array | [] | Array of organ UBERON IDs to mark as selected (active styling) |

Color Customization

| Option | Type | Default | Description | |--------|------|---------|-------------| | showColour | string | 'grey' | Fill color for organs in showIds | | highlightColour | string | 'red' | Fill color for organs in highlightIds | | selectColour | string | 'purple' | Fill color for organs in selectIds |

Opacity Settings

| Option | Type | Default | Range | Description | |--------|------|---------|-------|-------------| | showOpacity | number | 0.4 | 0.0-1.0 | Opacity level for shown organs | | highlightOpacity | number | 0.6 | 0.0-1.0 | Opacity level for highlighted organs | | selectOpacity | number | 0.8 | 0.0-1.0 | Opacity level for selected organs |

Event Callbacks

| Option | Type | Default | Parameters | Description | |--------|------|---------|------------|-------------| | onMouseOver | function | console.log | (ids: string[]) | Triggered when mouse enters organ area | | onMouseOut | function | console.log | (ids: string[]) | Triggered when mouse leaves organ area | | onClick | function | console.log | (ids: string[]) | Triggered when organ is clicked | | onViewChanged | function | console.log | (view: string) | Triggered when anatomical view changes |

Original Package

This is a Vue.js compatible rewrite of the original @ebi-gene-expression-group/anatomogram package. The original package provides similar functionality but was not optimized for modern Vue.js applications.

License

MIT