anatomogram - npm Package Compare versions

Comparing version 1.3.4 to 1.3.5

lib/Anatomogram.js

@@ -7,4 +7,2 @@ 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -20,14 +18,18 @@
 
-var _Switcher = require('./Switcher');
+var _reactSvg = require('react-svg');
 
-var _Switcher2 = _interopRequireDefault(_Switcher);
+var _reactSvg2 = _interopRequireDefault(_reactSvg);
 
-var _AnatomogramSvg = require('./AnatomogramSvg');
+var _objectHash = require('object-hash');
 
-var _AnatomogramSvg2 = _interopRequireDefault(_AnatomogramSvg);
+var _Assets = require('./Assets.js');
 
-var _Assets = require('./Assets');
+require('./Anatomogram.css');
 
+var _lodash = require('lodash');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -39,2 +41,56 @@
 
+var groupIntoPairs = function groupIntoPairs(arr, f) {
+  return Object.entries((0, _lodash.groupBy)(arr, f));
+};
+
+var arrayDifference = function arrayDifference(arr1, arr2) {
+  return Array.isArray(arr1) && Array.isArray(arr2) ? arr1.filter(function (e) {
+    return !arr2.includes(e);
+  }) : arr1;
+};
+
+var getSvgElementById = function getSvgElementById(svgDomNode) {
+  var getEfoLayerGroup = function getEfoLayerGroup(svgDomNode) {
+    var svgGroups = svgDomNode.getElementsByTagName('g');
+    for (var i = 0; i < svgGroups.length; i++) {
+      if (svgGroups[i].id === 'LAYER_EFO') {
+        return svgGroups[i];
+      }
+    }
+  };
+
+  var efoLayerGroup = getEfoLayerGroup(svgDomNode);
+
+  function _getSvgElementById(id) {
+    if (efoLayerGroup) {
+      for (var i = 0; i < efoLayerGroup.children.length; i++) {
+        if (efoLayerGroup.children[i].id === id) {
+          if (efoLayerGroup.children[i].attributes['xlink:href']) {
+            return _getSvgElementById(efoLayerGroup.children[i].attributes['xlink:href'].value.substring(1));
+          } else {
+            return efoLayerGroup.children[i];
+          }
+        }
+      }
+    }
+  }
+
+  return _getSvgElementById;
+};
+
+var paintSvgElement = function paintSvgElement(element, elementMarkup) {
+  return element && elementMarkup && Object.assign(element.style, elementMarkup);
+};
+
+var elementMarkup = function elementMarkup(colour, opacity) {
+  return { fill: colour, opacity: opacity };
+};
+
+var registerEvent = function registerEvent(element, eventType, elementMarkup, callback) {
+  element && element.addEventListener(eventType, function () {
+    paintSvgElement(element, elementMarkup);
+    callback();
+  });
+};
+
 var Anatomogram = function (_React$Component) {
@@ -46,20 +102,77 @@ _inherits(Anatomogram, _React$Component);
 
-    var _this = _possibleConstructorReturn(this, (Anatomogram.__proto__ || Object.getPrototypeOf(Anatomogram)).call(this, props));
-
-    _this.state = { selectedView: (0, _Assets.getDefaultView)(props.species) };
-    _this._switchAnatomogramView = _this._switchAnatomogramView.bind(_this);
-    return _this;
+    return _possibleConstructorReturn(this, (Anatomogram.__proto__ || Object.getPrototypeOf(Anatomogram)).call(this, props));
   }
 
   _createClass(Anatomogram, [{
-    key: '_switchAnatomogramView',
-    value: function _switchAnatomogramView(anatomogramView) {
-      this.setState({ selectedView: anatomogramView });
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps) {
+      return (0, _objectHash.MD5)([nextProps.filename, nextProps.showIds, nextProps.highlightIds, nextProps.selectIds]) !== (0, _objectHash.MD5)([this.props.filename, this.props.showIds, this.props.highlightIds, this.props.selectIds]);
     }
+
+    // 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. We can see this
+    // happening when we Show All in human, and we switch to male/female for the first time, only the outline is shown.
+
   }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      if (nextProps.species !== this.props.species) {
-        this.setState({ selectedView: (0, _Assets.getDefaultView)(nextProps.species) });
-      }
+    key: '_initialiseSvgElements',
+    value: function _initialiseSvgElements(getSvgElementById) {
+      var _this2 = this;
+
+      var _props = this.props,
+          showIds = _props.showIds,
+          showColour = _props.showColour,
+          showOpacity = _props.showOpacity,
+          highlightIds = _props.highlightIds,
+          highlightColour = _props.highlightColour,
+          highlightOpacity = _props.highlightOpacity,
+          selectIds = _props.selectIds,
+          selectColour = _props.selectColour,
+          selectOpacity = _props.selectOpacity,
+          onMouseOver = _props.onMouseOver,
+          onMouseOut = _props.onMouseOut,
+          onClick = _props.onClick;
+
+
+      var uniqueShowIds = arrayDifference(showIds, [].concat(_toConsumableArray(highlightIds), _toConsumableArray(selectIds)));
+      var uniqueHighlightIds = arrayDifference(highlightIds, selectIds);
+
+      //Given an element and its ids, we take the first element of this array having one of the ids
+      var markups = [].concat(selectIds.map(function (id) {
+        return {
+          id: id,
+          markupNormal: elementMarkup(selectColour, selectOpacity),
+          markupUnderFocus: elementMarkup(selectColour, selectOpacity + 0.2)
+        };
+      }), uniqueHighlightIds.map(function (id) {
+        return {
+          id: id,
+          markupNormal: elementMarkup(highlightColour, highlightOpacity),
+          markupUnderFocus: elementMarkup(highlightColour, highlightOpacity + 0.2)
+        };
+      }), uniqueShowIds.map(function (id) {
+        return {
+          id: id,
+          markupNormal: elementMarkup(showColour, showOpacity),
+          markupUnderFocus: elementMarkup(highlightColour, highlightOpacity)
+        };
+      }));
+
+      //More than one id can correspond to an element - see the svg "use" elements
+      groupIntoPairs([].concat(_toConsumableArray(uniqueShowIds), _toConsumableArray(uniqueHighlightIds), _toConsumableArray(selectIds)).map(function (id) {
+        return [getSvgElementById(id), id];
+      }), '[0].id').forEach(function (a) {
+        var element = a[1][0][0];
+        var ids = a[1].map(function (t) {
+          return t[1];
+        });
+        var markupNormalAndUnderFocus = markups.find(function (m) {
+          return ids.includes(m.id);
+        });
+
+        paintSvgElement(element, markupNormalAndUnderFocus.markupNormal);
+
+        registerEvent(element, "mouseover", markupNormalAndUnderFocus.markupUnderFocus, onMouseOver.bind(_this2, ids));
+        registerEvent(element, "mouseout", markupNormalAndUnderFocus.markupNormal, onMouseOut.bind(_this2, ids));
+        registerEvent(element, "click", {}, onClick.bind(_this2, ids));
+      });
     }
@@ -69,10 +182,14 @@ }, {
     value: function render() {
+      var _this3 = this;
+
       return _react2.default.createElement(
         'div',
-        null,
-        _react2.default.createElement(_Switcher2.default, { species: this.props.species,
-          selectedView: this.state.selectedView,
-          onChangeView: this._switchAnatomogramView }),
-        _react2.default.createElement(_AnatomogramSvg2.default, _extends({}, this.props, {
-          selectedView: this.state.selectedView }))
+        { className: 'gxa-anatomogram' },
+        _react2.default.createElement(_reactSvg2.default, {
+          path: (0, _Assets.resolveUrlToAnatomogram)(this.props.urlToResources, this.props.filename),
+          callback: function callback(svgDomNode) {
+            _this3._initialiseSvgElements(getSvgElementById(svgDomNode));
+          },
+          className: 'gxa-anatomogram-svg'
+        })
       );
@@ -86,35 +203,22 @@ }
 Anatomogram.propTypes = {
-  species: _propTypes2.default.string.isRequired,
+  urlToResources: _propTypes2.default.string.isRequired,
+  filename: _propTypes2.default.string.isRequired,
 
-  showIds: _propTypes2.default.arrayOf(_propTypes2.default.string),
-  highlightIds: _propTypes2.default.arrayOf(_propTypes2.default.string),
-  selectIds: _propTypes2.default.arrayOf(_propTypes2.default.string),
+  showIds: _propTypes2.default.arrayOf(_propTypes2.default.string).isRequired,
+  highlightIds: _propTypes2.default.arrayOf(_propTypes2.default.string).isRequired,
+  selectIds: _propTypes2.default.arrayOf(_propTypes2.default.string).isRequired,
 
-  showColour: _propTypes2.default.string,
-  highlightColour: _propTypes2.default.string,
-  selectColour: _propTypes2.default.string,
+  showColour: _propTypes2.default.string.isRequired,
+  highlightColour: _propTypes2.default.string.isRequired,
+  selectColour: _propTypes2.default.string.isRequired,
 
-  onMouseOver: _propTypes2.default.func,
-  onMouseOut: _propTypes2.default.func,
-  onClick: _propTypes2.default.func
-};
+  showOpacity: _propTypes2.default.number.isRequired,
+  highlightOpacity: _propTypes2.default.number.isRequired,
+  selectOpacity: _propTypes2.default.number.isRequired,
 
-Anatomogram.defaultProps = {
-  showIds: [],
-  highlightIds: [],
-  selectIds: [],
-
-  showColour: 'grey',
-  highlightColour: 'red',
-  selectColour: 'purple',
-
-  showOpacity: 0.4,
-  highlightOpacity: 0.4,
-  selectOpacity: 0.4,
-
-  onMouseOver: function onMouseOver() {},
-  onMouseOut: function onMouseOut() {},
-  onClick: function onClick() {}
+  onMouseOver: _propTypes2.default.func.isRequired,
+  onMouseOut: _propTypes2.default.func.isRequired,
+  onClick: _propTypes2.default.func.isRequired
 };
 
 exports.default = Anatomogram;

lib/Assets.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+	value: true
 });
-exports.getDefaultView = exports.getAnatomogramViews = undefined;
+exports.resolveUrlToIcon = exports.resolveUrlToAnatomogram = undefined;
 
-var _svgsMetadata = require('./json/svgsMetadata.json');
+var _urijs = require('urijs');
 
-var _svgsMetadata2 = _interopRequireDefault(_svgsMetadata);
+var _urijs2 = _interopRequireDefault(_urijs);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var unique = function unique(value, index, self) {
-  return self.indexOf(value) === index;
-};
-var isNotBlank = function isNotBlank(str) {
-  return typeof str === 'string' && str !== '';
-};
+/*
+Note the require!
+We want webpack to bundle these up and replace them with context modules:
+https://webpack.github.io/docs/context.html
+*/
 
-var anatomogramViews = _svgsMetadata2.default.map(function (svgMetadata) {
-  return svgMetadata.species;
-}).filter(unique).reduce(function (acc, species) {
-  acc[species] = _svgsMetadata2.default.filter(function (svgMetadata) {
-    return svgMetadata.species === species;
-  }).map(function (svgMetadata) {
-    return svgMetadata.view;
-  }).filter(isNotBlank).sort().reverse(); // The order we want is `male`, `female`, `brain` and `whole_plant`, `flower_parts` :)
-  return acc;
-}, {});
-
-var getAnatomogramViews = function getAnatomogramViews(species) {
-  var canonicalSpecies = typeof species === 'string' ? species.trim().toLowerCase().replace(/ +/, '_') : '';
-  return anatomogramViews[canonicalSpecies] || [];
+var resolveUrlToAnatomogram = function resolveUrlToAnatomogram(urlToResources, fileName) {
+	return (0, _urijs2.default)(require('./svg/' + fileName), urlToResources).toString();
 };
 
-var getDefaultView = function getDefaultView(species) {
-  return getAnatomogramViews(species)[0];
+var resolveUrlToIcon = function resolveUrlToIcon(urlToResources, selectedType, anatomogramType) {
+	return (0, _urijs2.default)(require('./img/' + (selectedType === anatomogramType ? '' : 'un') + 'selected' + anatomogramType + '.png'), urlToResources).toString();
 };
 
-exports.getAnatomogramViews = getAnatomogramViews;
-exports.getDefaultView = getDefaultView;
+exports.resolveUrlToAnatomogram = resolveUrlToAnatomogram;
+exports.resolveUrlToIcon = resolveUrlToIcon;

lib/index.js

@@ -6,23 +6,9 @@ 'use strict';
 });
-exports.render = exports.default = undefined;
 
-var _react = require('react');
+var _AnatomogramContainer = require('./AnatomogramContainer.js');
 
-var _react2 = _interopRequireDefault(_react);
+var _AnatomogramContainer2 = _interopRequireDefault(_AnatomogramContainer);
 
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-var _Anatomogram = require('./Anatomogram');
-
-var _Anatomogram2 = _interopRequireDefault(_Anatomogram);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var render = function render(options, target) {
-  _reactDom2.default.render(_react2.default.createElement(_Anatomogram2.default, options), document.getElementById(target));
-};
-
-exports.default = _Anatomogram2.default;
-exports.render = render;
+exports.default = _AnatomogramContainer2.default;

lib/json/svgsMetadata.json

@@ -1,6 +0,5 @@
-[
-  {
-    "filename": "anolis_carolinensis.svg",
-    "species": "anolis_carolinensis",
-    "view": "",
+{
+  "anolis_carolinensis.svg": {
+    "width": 129.00903,
+    "height": 56.242912,
     "ids": [
@@ -13,6 +12,5 @@ "UBERON_0000955",
   },
-  {
-    "filename": "arabidopsis_thaliana.svg",
-    "species": "arabidopsis_thaliana",
-    "view": "",
+  "arabidopsis_thaliana.svg": {
+    "width": 91.01709,
+    "height": 161.43347,
     "ids": [
@@ -25,6 +23,5 @@ "PO_0025034",
   },
-  {
-    "filename": "bos_taurus.svg",
-    "species": "bos_taurus",
-    "view": "",
+  "bos_taurus.svg": {
+    "width": 108.98891,
+    "height": 60.884159,
     "ids": [
@@ -44,6 +41,5 @@ "UBERON_0001013",
   },
-  {
-    "filename": "brachypodium_distachyon.flower_parts.svg",
-    "species": "brachypodium_distachyon",
-    "view": "flower_parts",
+  "brachypodium_distachyon_flower_parts.svg": {
+    "width": 127.44675,
+    "height": 158.60735,
     "ids": [
@@ -57,6 +53,5 @@ "PO_0009066",
   },
-  {
-    "filename": "brachypodium_distachyon.whole_plant.svg",
-    "species": "brachypodium_distachyon",
-    "view": "whole_plant",
+  "brachypodium_distachyon_whole_plant.svg": {
+    "width": 81.542793,
+    "height": 177.13345,
     "ids": [
@@ -68,6 +63,5 @@ "PO_0009010",
   },
-  {
-    "filename": "gallus_gallus.svg",
-    "species": "gallus_gallus",
-    "view": "",
+  "gallus_gallus.svg": {
+    "width": 118.43517,
+    "height": 137.11394,
     "ids": [
@@ -84,6 +78,5 @@ "UBERON_0000955",
   },
-  {
-    "filename": "homo_sapiens.brain.svg",
-    "species": "homo_sapiens",
-    "view": "brain",
+  "homo_sapiens_brain.svg": {
+    "width": 143.50569,
+    "height": 121.65815,
     "ids": [
@@ -120,6 +113,5 @@ "UBERON_0002148",
   },
-  {
-    "filename": "homo_sapiens.female.svg",
-    "species": "homo_sapiens",
-    "view": "female",
+  "homo_sapiens_female.svg": {
+    "width": 105.43713,
+    "height": 194.70567,
     "ids": [
@@ -210,6 +202,5 @@ "UBERON_0001981",
   },
-  {
-    "filename": "homo_sapiens.male.svg",
-    "species": "homo_sapiens",
-    "view": "male",
+  "homo_sapiens_male.svg": {
+    "width": 106.00675,
+    "height": 195.36273,
     "ids": [
@@ -300,6 +291,5 @@ "UBERON_0000956",
   },
-  {
-    "filename": "hordeum_vulgare.flower_parts.svg",
-    "species": "hordeum_vulgare",
-    "view": "flower_parts",
+  "hordeum_vulgare_flower_parts.svg": {
+    "width": 138.40977,
+    "height": 145.59451,
     "ids": [
@@ -314,6 +304,5 @@ "PO_0009001",
   },
-  {
-    "filename": "hordeum_vulgare.whole_plant.svg",
-    "species": "hordeum_vulgare",
-    "view": "whole_plant",
+  "hordeum_vulgare_whole_plant.svg": {
+    "width": 23.929974,
+    "height": 45.215504,
     "ids": [
@@ -327,6 +316,5 @@ "PO_0020142",
   },
-  {
-    "filename": "macaca_mulatta.svg",
-    "species": "macaca_mulatta",
-    "view": "",
+  "macaca_mulatta.svg": {
+    "width": 33.433189,
+    "height": 27.061121,
     "ids": [
@@ -342,6 +330,5 @@ "UBERON_0000955",
   },
-  {
-    "filename": "monodelphis_domestica.svg",
-    "species": "monodelphis_domestica",
-    "view": "",
+  "monodelphis_domestica.svg": {
+    "width": 127.79726,
+    "height": 59.702709,
     "ids": [
@@ -356,6 +343,5 @@ "UBERON_0000955",
   },
-  {
-    "filename": "mus_musculus.brain.svg",
-    "species": "mus_musculus",
-    "view": "brain",
+  "mus_musculus_brain.svg": {
+    "width": 142.0164,
+    "height": 81.638588,
     "ids": [
@@ -377,6 +363,5 @@ "UBERON_0001896",
   },
-  {
-    "filename": "mus_musculus.female.svg",
-    "species": "mus_musculus",
-    "view": "female",
+  "mus_musculus_female.svg": {
+    "width": 82.377632,
+    "height": 156.22629,
     "ids": [
@@ -436,6 +421,5 @@ "UBERON_0000947",
   },
-  {
-    "filename": "mus_musculus.male.svg",
-    "species": "mus_musculus",
-    "view": "male",
+  "mus_musculus_male.svg": {
+    "width": 81.136559,
+    "height": 156.68759,
     "ids": [
@@ -495,6 +479,5 @@ "UBERON_0000947",
   },
-  {
-    "filename": "oryza_sativa.flower_parts.svg",
-    "species": "oryza_sativa",
-    "view": "flower_parts",
+  "oryza_sativa_flower_parts.svg": {
+    "width": 120.96103,
+    "height": 139.71811,
     "ids": [
@@ -508,6 +491,5 @@ "PO_0009010",
   },
-  {
-    "filename": "oryza_sativa.whole_plant.svg",
-    "species": "oryza_sativa",
-    "view": "whole_plant",
+  "oryza_sativa_whole_plant.svg": {
+    "width": 95.575813,
+    "height": 151.60188,
     "ids": [
@@ -521,6 +503,5 @@ "PO_0025034",
   },
-  {
-    "filename": "papio_anubis.svg",
-    "species": "papio_anubis",
-    "view": "",
+  "papio_anubis.svg": {
+    "width": 144.21588,
+    "height": 122.64954,
     "ids": [
@@ -545,6 +526,5 @@ "UBERON_0000948",
   },
-  {
-    "filename": "rattus_norvegicus.svg",
-    "species": "rattus_norvegicus",
-    "view": "",
+  "rattus_norvegicus.svg": {
+    "width": 123.11169,
+    "height": 89.384377,
     "ids": [
@@ -565,6 +545,5 @@ "UBERON_0000955",
   },
-  {
-    "filename": "solanum_lycopersicum.flower_parts.svg",
-    "species": "solanum_lycopersicum",
-    "view": "flower_parts",
+  "solanum_lycopersicum_flower_parts.svg": {
+    "width": 140.86603,
+    "height": 110.25008,
     "ids": [
@@ -580,6 +559,5 @@ "PO_0009084",
   },
-  {
-    "filename": "solanum_lycopersicum.whole_plant.svg",
-    "species": "solanum_lycopersicum",
-    "view": "whole_plant",
+  "solanum_lycopersicum_whole_plant.svg": {
+    "width": 93.723885,
+    "height": 157.46359,
     "ids": [
@@ -593,12 +571,10 @@ "PO_0025034",
   },
-  {
-    "filename": "solanum_tuberosum.svg",
-    "species": "solanum_tuberosum",
-    "view": "",
+  "solanum_tuberosum.svg": {
+    "width": 254.74318,
+    "height": 403.44812,
     "ids": []
   },
-  {
-    "filename": "sorghum_bicolor.flower_parts.svg",
-    "species": "sorghum_bicolor",
-    "view": "flower_parts",
+  "sorghum_bicolor_flower_parts.svg": {
+    "width": 136.8109,
+    "height": 131.06259,
     "ids": [
@@ -614,6 +590,5 @@ "PO_0009049",
   },
-  {
-    "filename": "sorghum_bicolor.whole_plant.svg",
-    "species": "sorghum_bicolor",
-    "view": "whole_plant",
+  "sorghum_bicolor_whole_plant.svg": {
+    "width": 122.55083,
+    "height": 159.40355,
     "ids": [
@@ -629,6 +604,5 @@ "PO_0009006",
   },
-  {
-    "filename": "tetraodon_nigroviridis.svg",
-    "species": "tetraodon_nigroviridis",
-    "view": "",
+  "tetraodon_nigroviridis.svg": {
+    "width": 122.26315,
+    "height": 47.05262,
     "ids": [
@@ -641,6 +615,5 @@ "UBERON_0000955",
   },
-  {
-    "filename": "triticum_aestivum.flower_parts.svg",
-    "species": "triticum_aestivum",
-    "view": "flower_parts",
+  "triticum_aestivum_flower_parts.svg": {
+    "width": 132.27861,
+    "height": 154.28635,
     "ids": [
@@ -660,6 +633,5 @@ "PO_0020033",
   },
-  {
-    "filename": "triticum_aestivum.whole_plant.svg",
-    "species": "triticum_aestivum",
-    "view": "whole_plant",
+  "triticum_aestivum_whole_plant.svg": {
+    "width": 78.069733,
+    "height": 158.28831,
     "ids": [
@@ -672,6 +644,5 @@ "PO_0009047",
   },
-  {
-    "filename": "xenopus_tropicalis.svg",
-    "species": "xenopus_tropicalis",
-    "view": "",
+  "xenopus_tropicalis.svg": {
+    "width": 122.72871,
+    "height": 107.09201,
     "ids": [
@@ -685,6 +656,5 @@ "UBERON_0000955",
   },
-  {
-    "filename": "zea_mays.flower_parts.svg",
-    "species": "zea_mays",
-    "view": "flower_parts",
+  "zea_mays_flower_parts.svg": {
+    "width": 140.97224,
+    "height": 156.4857,
     "ids": [
@@ -702,6 +672,5 @@ "PO_0009001",
   },
-  {
-    "filename": "zea_mays.whole_plant.svg",
-    "species": "zea_mays",
-    "view": "whole_plant",
+  "zea_mays_whole_plant.svg": {
+    "width": 81.500832,
+    "height": 155.09863,
     "ids": [
@@ -717,2 +686,2 @@ "PO_0020126",
   }
-]
+}

lib/Switcher.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
@@ -15,34 +15,38 @@
 
-var _Assets = require('./Assets');
+var _urijs = require('urijs');
 
+var _urijs2 = _interopRequireDefault(_urijs);
+
 require('./Switcher.css');
 
+var _Assets = require('./Assets.js');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var loadIcon = function loadIcon(view, selectedView) {
-  return require('./img/' + view + '.' + (view === selectedView ? '' : 'un') + 'selected.png');
-};
-
 var Switcher = function Switcher(_ref) {
-  var species = _ref.species,
-      selectedView = _ref.selectedView,
-      onChangeView = _ref.onChangeView;
-  return _react2.default.createElement(
-    'div',
-    { className: 'gxa-anatomogram-switcher' },
-    (0, _Assets.getAnatomogramViews)(species).map(function (view) {
-      return _react2.default.createElement('img', { key: view, className: 'gxa-anatomogram-switcher-icon', onClick: function onClick() {
-          return onChangeView(view);
-        },
-        src: loadIcon(view, selectedView) });
-    })
-  );
+    var anatomogramTypes = _ref.anatomogramTypes,
+        urlToResources = _ref.urlToResources,
+        selectedType = _ref.selectedType,
+        onChangeSelectedType = _ref.onChangeSelectedType;
+    return anatomogramTypes.length > 1 && _react2.default.createElement(
+        'div',
+        { className: 'gxa-anatomogram-switcher' },
+        anatomogramTypes.map(function (anatomogramType) {
+            return _react2.default.createElement('img', { key: anatomogramType,
+                className: 'gxa-selection-icon',
+                onClick: function onClick() {
+                    return onChangeSelectedType(anatomogramType);
+                },
+                src: (0, _Assets.resolveUrlToIcon)(urlToResources, selectedType, anatomogramType) });
+        })
+    );
 };
 
 Switcher.propTypes = {
-  species: _propTypes2.default.string.isRequired,
-  selectedView: _propTypes2.default.string,
-  onChangeView: _propTypes2.default.func.isRequired
+    anatomogramTypes: _propTypes2.default.arrayOf(_propTypes2.default.string).isRequired,
+    selectedType: _propTypes2.default.string.isRequired,
+    onChangeSelectedType: _propTypes2.default.func.isRequired,
+    urlToResources: _propTypes2.default.string.isRequired
 };
 
 exports.default = Switcher;

package.json

 {
   "name": "anatomogram",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "description": "Anatomogram component for Expression Atlas heatmap",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Lines of code

1065

increased by4.51%

Worsened metrics

Total package byte prevSize

13403784

decreased by-1.53%

No dependency changes