From 857bb72aaadd908165b84498a382e8ee477841ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alfonso=20Mu=C3=B1oz-Pomer?= <amunoz@ebi.ac.uk>
Date: Tue, 10 Oct 2017 13:45:58 +0100
Subject: [PATCH] Resolve images against atlasUrl iff the result from require
 is not absolute

---
 src/AnatomogramSvg.js | 5 +++--
 src/Switcher.js       | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/AnatomogramSvg.js b/src/AnatomogramSvg.js
index ca5e90a..011e033 100644
--- a/src/AnatomogramSvg.js
+++ b/src/AnatomogramSvg.js
@@ -74,13 +74,14 @@ const initialiseSvgElements = (getSvgElementById, {idsWithMarkup, onMouseOver,on
 }
 
 const loadSvg = (species, selectedView) => require(`./svg/${species}${selectedView ? `.${selectedView}` : ``}.svg`)
+const resolve = (uri, baseUrl) => URI(uri).is(`absolute`) ? URI(uri) : URI(uri, baseUrl)
 
 // ReactSVG loads the SVG file asynchronously (hence the callback prop). We don’t use componentDidUpdate or
-// componentDidMount because they can’t guarantee that the SVG is already loaded when they’re run. If
+// componentDidMount because they can’t guarantee that the SVG is already loaded when they’re run.
 const AnatomogramSvg = (props) =>
   <div className={`gxa-anatomogram-svg-wrapper`}>
     <ReactSVG
-      path={URI(loadSvg(props.species, props.selectedView), props.atlasUrl)}
+      path={resolve(loadSvg(props.species, props.selectedView), props.atlasUrl).toString()}
       callback={svgDomNode => { initialiseSvgElements(getSvgElementById(svgDomNode), props) }}
       className={`gxa-anatomogram-svg`}
       style={{paddingLeft: props.selectedView ? `10px` : ``}} />
diff --git a/src/Switcher.js b/src/Switcher.js
index 01cbabe..a304cfc 100644
--- a/src/Switcher.js
+++ b/src/Switcher.js
@@ -6,12 +6,13 @@ import {getAnatomogramViews} from './Assets'
 import './Switcher.css'
 
 const loadIcon = (view, selectedView) => require(`./img/${view}.${view === selectedView ? `` : `un`}selected.png`)
+const resolve = (uri, baseUrl) => URI(uri).is(`absolute`) ? URI(uri) : URI(uri, baseUrl)
 
 const Switcher = ({atlasUrl, species, selectedView, onChangeView}) =>
   <div className={`gxa-anatomogram-switcher`}>
     {getAnatomogramViews(species).map((view) =>
       <img key={view} className={`gxa-anatomogram-switcher-icon`} onClick={() => onChangeView(view)}
-           src={URI(loadIcon(view, selectedView), atlasUrl).toString()} />
+           src={resolve(loadIcon(view, selectedView), atlasUrl).toString()} />
     )}
   </div>