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