anatomogram - npm Package Compare versions

Comparing version 1.2.10 to 1.2.11

lib/Anatomogram.js

@@ -25,2 +25,6 @@ 'use strict';
 
+require('./Anatomogram.css');
+
+var _lodash = require('lodash');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,2 +40,6 @@
 
+var groupIntoPairs = function groupIntoPairs(arr, f) {
+  return Object.entries((0, _lodash.groupBy)(arr, f));
+};
+
 var arrayDifference = function arrayDifference(arr1, arr2) {
@@ -72,45 +80,14 @@ return Array.isArray(arr1) && Array.isArray(arr2) ? arr1.filter(function (e) {
 
-var paintIds = function paintIds(ids, colour, opacity, getSvgElementById) {
-  ids.forEach(function (id) {
-    var e = getSvgElementById(id);
-
-    // We might be showing an ID which is not part of the displayed anatomogram (e.g. heart in brain)
-    if (e) {
-      e.style.fill = colour;
-      e.style.opacity = opacity;
-    }
-  });
+var paintSvgElement = function paintSvgElement(element, elementMarkup) {
+  return element && elementMarkup && Object.assign(element.style, elementMarkup);
 };
 
-var addMouseOverMouseOutListeners = function addMouseOverMouseOutListeners(ids, mouseOverColour, mouseOverOpacity, mouseOverCallback, mouseOutCallback, getSvgElementById) {
-  ids.forEach(function (id) {
-    var e = getSvgElementById(id);
-
-    if (e) {
-      e.addEventListener('mouseover', function () {
-        e.style.fill = mouseOverColour;
-        e.style.opacity = mouseOverOpacity;
-        mouseOverCallback(id);
-      });
-
-      var originalColour = e.style.fill;
-      var originalOpacity = e.style.opacity;
-      e.addEventListener('mouseout', function () {
-        e.style.fill = originalColour;
-        e.style.opacity = originalOpacity;
-        mouseOutCallback(id);
-      });
-    }
-  });
+var elementMarkup = function elementMarkup(colour, opacity) {
+  return { fill: colour, opacity: opacity };
 };
 
-var attachCallbacks = function attachCallbacks(ids, eventName, callback, getSvgElementById) {
-  ids.forEach(function (id) {
-    var e = getSvgElementById(id);
-
-    if (e) {
-      e.addEventListener(eventName, function () {
-        callback(id);
-      });
-    }
+var registerEvent = function registerEvent(element, eventType, elementMarkup, callback) {
+  element && element.addEventListener(eventType, function () {
+    paintSvgElement(element);
+    callback();
   });
@@ -141,2 +118,4 @@ };
     value: function _initialiseSvgElements(getSvgElementById) {
+      var _this2 = this;
+
       var _props = this.props,
@@ -160,11 +139,41 @@ showIds = _props.showIds,
 
-      paintIds(uniqueShowIds, showColour, showOpacity, getSvgElementById);
-      paintIds(uniqueHighlightIds, highlightColour, highlightOpacity, getSvgElementById);
-      paintIds(selectIds, selectColour, selectOpacity, getSvgElementById);
+      //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(showColour, showOpacity)
+        };
+      }));
 
-      addMouseOverMouseOutListeners(uniqueShowIds, highlightColour, highlightOpacity, onMouseOver, onMouseOut, getSvgElementById);
-      addMouseOverMouseOutListeners(uniqueHighlightIds, highlightColour, highlightOpacity + 0.2, onMouseOver, onMouseOut, getSvgElementById);
-      addMouseOverMouseOutListeners(selectIds, selectColour, selectOpacity + 0.2, onMouseOver, onMouseOut, getSvgElementById);
+      //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);
+        });
 
-      attachCallbacks([].concat(_toConsumableArray(uniqueShowIds), _toConsumableArray(uniqueHighlightIds), _toConsumableArray(selectIds)), 'click', onClick, getSvgElementById);
+        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));
+      });
     }
@@ -174,13 +183,13 @@ }, {
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
       return _react2.default.createElement(
         'div',
-        { style: { display: 'inline-block', verticalAlign: 'top', width: '90%' } },
+        { className: 'gxa-anatomogram' },
         _react2.default.createElement(_reactSvg2.default, {
           path: (0, _Assets.resolveUrlToAnatomogram)(this.props.urlToResources, this.props.filename),
           callback: function callback(svgDomNode) {
-            _this2._initialiseSvgElements(getSvgElementById(svgDomNode));
+            _this3._initialiseSvgElements(getSvgElementById(svgDomNode));
           },
-          style: { width: '100%', height: 'auto' }
+          className: 'gxa-anatomogram-svg'
         })
@@ -187,0 +196,0 @@ );

lib/AnatomogramContainer.js

@@ -142,2 +142,3 @@ 'use strict';
 
+  //::List[OntologyId] -> ?
   onMouseOver: _propTypes2.default.func,
@@ -144,0 +145,0 @@ onMouseOut: _propTypes2.default.func,

lib/Switcher.js

@@ -32,3 +32,3 @@ 'use strict';
         'div',
-        { style: { display: 'inline-block', verticalAlign: 'top', width: '10%', maxWidth: '32px' } },
+        { className: 'gxa-anatomogram-switcher' },
         anatomogramTypes.map(function (anatomogramType) {
@@ -35,0 +35,0 @@ return _react2.default.createElement('img', { key: anatomogramType,

package.json

 {
   "name": "anatomogram",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "description": "Anatomogram component for Expression Atlas heatmap",
@@ -15,4 +15,4 @@ "main": "lib/index.js",
     "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./__mocks__/fileMock.js",
-      "\\.(css|less)$": "./__mocks__/styleMock.js"
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
     }
@@ -27,2 +27,4 @@ },
   "dependencies": {
+    "babel-preset-es2015": "^6.24.1",
+    "lodash": "^4.17.4",
     "object-hash": "^1.1.8",
@@ -42,3 +44,2 @@ "prop-types": "^15.5.10",
     "babel-preset-env": "^1.5.2",
-    "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
@@ -45,0 +46,0 @@ "clean-webpack-plugin": "^0.1.16",

No alert changes

Improved metrics

Total package byte prevSize

13399693

Dev dependency count

21

decreased by-4.55%

Number of package files

52

increased by1.96%

Lines of code

1065

increased by1.62%

Worsened metrics

Dependency count

8

increased by33.33%

Dependency changes

• + Addedbabel-preset-es2015@^6.24.1

• + Addedlodash@^4.17.4

• + Addedansi-regex@2.1.1(transitive)

• + Addedansi-styles@2.2.1(transitive)

• + Addedbabel-code-frame@6.26.0(transitive)

• + Addedbabel-helper-call-delegate@6.24.1(transitive)

• + Addedbabel-helper-define-map@6.26.0(transitive)

• + Addedbabel-helper-function-name@6.24.1(transitive)

• + Addedbabel-helper-get-function-arity@6.24.1(transitive)

• + Addedbabel-helper-hoist-variables@6.24.1(transitive)

• + Addedbabel-helper-optimise-call-expression@6.24.1(transitive)

• + Addedbabel-helper-regex@6.26.0(transitive)

• + Addedbabel-helper-replace-supers@6.24.1(transitive)

• + Addedbabel-messages@6.23.0(transitive)

• + Addedbabel-plugin-check-es2015-constants@6.22.0(transitive)

• + Addedbabel-plugin-transform-es2015-arrow-functions@6.22.0(transitive)

• + Addedbabel-plugin-transform-es2015-block-scoped-functions@6.22.0(transitive)

• + Addedbabel-plugin-transform-es2015-block-scoping@6.26.0(transitive)

• + Addedbabel-plugin-transform-es2015-classes@6.24.1(transitive)

• + Addedbabel-plugin-transform-es2015-computed-properties@6.24.1(transitive)

• + Addedbabel-plugin-transform-es2015-destructuring@6.23.0(transitive)

• + Addedbabel-plugin-transform-es2015-duplicate-keys@6.24.1(transitive)

• + Addedbabel-plugin-transform-es2015-for-of@6.23.0(transitive)

• + Addedbabel-plugin-transform-es2015-function-name@6.24.1(transitive)

• + Addedbabel-plugin-transform-es2015-literals@6.22.0(transitive)

• + Addedbabel-plugin-transform-es2015-modules-amd@6.24.1(transitive)

• + Addedbabel-plugin-transform-es2015-modules-commonjs@6.26.2(transitive)

• + Addedbabel-plugin-transform-es2015-modules-systemjs@6.24.1(transitive)

• + Addedbabel-plugin-transform-es2015-modules-umd@6.24.1(transitive)

• + Addedbabel-plugin-transform-es2015-object-super@6.24.1(transitive)

• + Addedbabel-plugin-transform-es2015-parameters@6.24.1(transitive)

• + Addedbabel-plugin-transform-es2015-shorthand-properties@6.24.1(transitive)

• + Addedbabel-plugin-transform-es2015-spread@6.22.0(transitive)

• + Addedbabel-plugin-transform-es2015-sticky-regex@6.24.1(transitive)

• + Addedbabel-plugin-transform-es2015-template-literals@6.22.0(transitive)

• + Addedbabel-plugin-transform-es2015-typeof-symbol@6.23.0(transitive)

• + Addedbabel-plugin-transform-es2015-unicode-regex@6.24.1(transitive)

• + Addedbabel-plugin-transform-regenerator@6.26.0(transitive)

• + Addedbabel-plugin-transform-strict-mode@6.24.1(transitive)

• + Addedbabel-preset-es2015@6.24.1(transitive)

• + Addedbabel-runtime@6.26.0(transitive)

• + Addedbabel-template@6.26.0(transitive)

• + Addedbabel-traverse@6.26.0(transitive)

• + Addedbabel-types@6.26.0(transitive)

• + Addedbabylon@6.18.0(transitive)

• + Addedchalk@1.1.3(transitive)

• + Addedcore-js@2.6.12(transitive)

• + Addeddebug@2.6.9(transitive)

• + Addedescape-string-regexp@1.0.5(transitive)

• + Addedesutils@2.0.3(transitive)

• + Addedglobals@9.18.0(transitive)

• + Addedhas-ansi@2.0.0(transitive)

• + Addedinvariant@2.2.4(transitive)

• + Addedjs-tokens@3.0.2(transitive)

• + Addedjsesc@0.5.0(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedms@2.0.0(transitive)

• + Addedprivate@0.1.8(transitive)

• + Addedregenerate@1.4.2(transitive)

• + Addedregenerator-runtime@0.11.1(transitive)

• + Addedregenerator-transform@0.10.1(transitive)

• + Addedregexpu-core@2.0.0(transitive)

• + Addedregjsgen@0.2.0(transitive)

• + Addedregjsparser@0.1.5(transitive)

• + Addedstrip-ansi@3.0.1(transitive)

• + Addedsupports-color@2.0.0(transitive)

• + Addedto-fast-properties@1.0.3(transitive)

• - Removedjs-tokens@4.0.0(transitive)