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

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

import svgsMetadata from './json/svgsMetadata.json';

const unique = (element, index, array) => {
  return array.indexOf(element) === index;
};

const isNotBlank = (str) => {
  return typeof str === "string" && str.trim() !== "";
};

export default class Assets {
  constructor() {
    this.metadata = svgsMetadata;
    this.initialized = false;
  }

  async init() {
    this.initialized = true;
    return this;
  }

  getMetadata() {
    return this.metadata;
  }

  getSupportedSpecies() {
    return supportedSpecies;
  }

  getAnatomogramViews(species) {
    return getAnatomogramViews(species);
  }

  getDefaultView(species) {
    return getDefaultView(species);
  }
}


export const supportedSpecies = svgsMetadata
  .map(svgMetadata => svgMetadata.species)
  .filter(unique);

const multipleViewsSpecies = svgsMetadata
  .filter(svgMetadata => svgMetadata.view !== "")
  .map(svgMetadata => svgMetadata.species)
  .filter(unique);

const anatomogramViews = multipleViewsSpecies.reduce((acc, species) => {
  acc[species] = svgsMetadata
    .filter(svgMetadata => svgMetadata.species === species)
    .map(svgMetadata => svgMetadata.view)
    .filter(isNotBlank)
    .sort()
    .reverse();
  
  return acc;
}, {});

export const getAnatomogramViews = (species) => {
  if (supportedSpecies.includes(species)) {
    return anatomogramViews[species] || [];
  }
  return [];
};

export const getDefaultView = (species) => {
  if (supportedSpecies.includes(species)) {
    return getAnatomogramViews(species)[0] || null;
  }
  return null;
};

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

export const loadSvg = (species, view) => {
  const svgData = svgsMetadata.find(metadata => 
    metadata.species === species && metadata.view === view
  );
  return svgData ? svgData.path : null;
};

export const getSvgElementById = (svgDomNode) => {
  return (id) => {
    return svgDomNode ? svgDomNode.getElementById(id) : null;
  };
};