@oncojs/lolliplot - npm Package Compare versions

Comparing version 0.5.10 to 0.5.11

animator.js

@@ -22,2 +22,3 @@ // @flow
   mutationChartCircles: Object,
+  selectedMutationBox: Object,
   consequences: Object,
@@ -57,2 +58,3 @@ impacts: Object,
   mutationChartCircles,
+  selectedMutationBox,
   consequences,
@@ -167,2 +169,5 @@ impacts,
 
+    selectedMutationBox
+      .attr(`x`, d => scaleLinear(d.x) - (d.size / 2))
+
     animateScaleY({
@@ -178,2 +183,3 @@ d3,
       mutationChartCircles,
+      selectedMutationBox,
       height,
@@ -197,2 +203,3 @@ xAxisOffset,
         mutationChartCircles,
+        selectedMutationBox,
         height,
@@ -225,2 +232,3 @@ xAxisOffset,
   mutationChartCircles: Object,
+  selectedMutationBox: Object,
   height: number,
@@ -242,2 +250,3 @@ xAxisOffset: number,
   mutationChartCircles,
+  selectedMutationBox,
   height,
@@ -259,5 +268,7 @@ xAxisOffset,
 
+    let highestValue = Math.max(10, maxDonors)
+
     let scaleLinearY = d3.scaleLinear()
-      .domain([0, Math.round(maxDonors + 5)])
-      .range([height - xAxisOffset, 0])
+      .domain([0, highestValue])
+      .range([height - xAxisOffset, 15])
 
@@ -270,2 +281,5 @@ mutationChartLines
 
+    selectedMutationBox
+      .attr(`y`, d => scaleLinearY(d.donors) - (d.size / 2))
+
     // Vertical ticks
@@ -272,0 +286,0 @@

data.js

@@ -31,3 +31,3 @@ export default mutations => ({
       id: `MU${i}`,
-      donors: Math.round((i * Math.random() / 2) % 20),
+      donors: Math.round((i * Math.random())),
       x: (i * Date.now()) % 500,
@@ -34,0 +34,0 @@ consequence: `type_${(i % 4) + 1}**`,

dist/es6/animator.js

@@ -20,2 +20,3 @@ import { shouldAnimationFinish, calculateNextCoordinate } from './animation';
       mutationChartCircles = _ref.mutationChartCircles,
+      selectedMutationBox = _ref.selectedMutationBox,
       consequences = _ref.consequences,
@@ -125,2 +126,6 @@ impacts = _ref.impacts,
 
+    selectedMutationBox.attr('x', function (d) {
+      return scaleLinear(d.x) - d.size / 2;
+    });
+
     animateScaleY({
@@ -136,2 +141,3 @@ d3: d3,
       mutationChartCircles: mutationChartCircles,
+      selectedMutationBox: selectedMutationBox,
       height: height,
@@ -155,2 +161,3 @@ xAxisOffset: xAxisOffset,
         mutationChartCircles: mutationChartCircles,
+        selectedMutationBox: selectedMutationBox,
         height: height,
@@ -181,2 +188,3 @@ xAxisOffset: xAxisOffset,
       mutationChartCircles = _ref2.mutationChartCircles,
+      selectedMutationBox = _ref2.selectedMutationBox,
       height = _ref2.height,
@@ -199,4 +207,6 @@ xAxisOffset = _ref2.xAxisOffset,
 
-      var scaleLinearY = d3.scaleLinear().domain([0, Math.round(maxDonors + 5)]).range([height - xAxisOffset, 0]);
+      var highestValue = Math.max(10, maxDonors);
 
+      var scaleLinearY = d3.scaleLinear().domain([0, highestValue]).range([height - xAxisOffset, 15]);
+
       mutationChartLines.attr('y2', function (d) {
@@ -210,2 +220,6 @@ return scaleLinearY(d.donors);
 
+      selectedMutationBox.attr('y', function (d) {
+        return scaleLinearY(d.donors) - d.size / 2;
+      });
+
       // Vertical ticks
@@ -212,0 +226,0 @@

dist/es6/data.js

@@ -27,3 +27,3 @@ export default (function (mutations) {
         id: "MU" + i,
-        donors: Math.round(i * Math.random() / 2 % 20),
+        donors: Math.round(i * Math.random()),
         x: i * Date.now() % 500,
@@ -30,0 +30,0 @@ consequence: "type_" + (i % 4 + 1) + "**",

dist/es6/index.js

@@ -99,4 +99,6 @@ import invariant from 'invariant';
 
-  var scaleLinearY = d3.scaleLinear().domain([0, Math.round(maxDonors + 5)]).range([height - xAxisOffset, 0]);
+  var highestValue = Math.max(10, maxDonors);
 
+  var scaleLinearY = d3.scaleLinear().domain([0, highestValue]).range([height - xAxisOffset, 15]);
+
   // Main Chart
@@ -228,3 +230,4 @@
       mutationChartLines = _setupMutations.mutationChartLines,
-      mutationChartCircles = _setupMutations.mutationChartCircles;
+      mutationChartCircles = _setupMutations.mutationChartCircles,
+      selectedMutationBox = _setupMutations.selectedMutationBox;
 
@@ -299,2 +302,3 @@ var minimapSlideTarget = svg.append('g').append('rect').attrs(Object.assign({
     mutationChartCircles: mutationChartCircles,
+    selectedMutationBox: selectedMutationBox,
     height: height,
@@ -327,2 +331,3 @@ xAxisOffset: xAxisOffset,
     mutationChartCircles: mutationChartCircles,
+    selectedMutationBox: selectedMutationBox,
     consequences: consequences,
@@ -382,2 +387,3 @@ impacts: impacts,
         mutationChartCircles: mutationChartCircles,
+        selectedMutationBox: selectedMutationBox,
         consequencesCheckboxContainers: consequencesCheckboxContainers,
@@ -384,0 +390,0 @@ impactsCheckboxContainers: impactsCheckboxContainers,

dist/es6/mutations.js

@@ -72,2 +72,42 @@ import { halfPixel } from './spatial';
 
+  var selectedMutation = data.mutations.filter(function (d) {
+    return d.id === mutationId;
+  }).map(function (d) {
+    return Object.assign({}, d, { size: theme.mutationRadius * 3 });
+  });
+
+  var selectedMutationBox = chart.append('g').selectAll('rect').data(selectedMutation).enter().append('rect').attrs({
+    class: 'selected-mutation-box',
+    x: function x(d) {
+      return d.x * scale + yAxisOffset - d.size / 2;
+    },
+    y: function y(d) {
+      return scaleLinearY(d.donors) - d.size / 2;
+    },
+    width: function width(d) {
+      return d.size;
+    },
+    height: function height(d) {
+      return d.size;
+    },
+    fill: 'none',
+    stroke: 'rgb(251, 94, 45)',
+    'stroke-width': 2
+  }).on('mouseover', function (d) {
+    if (!store.getState().animating) {
+      if (onMutationMouseover) {
+        onMutationMouseover(d, d3.event);
+      } else {
+        d3.select('.tooltip').style('pointer-events', 'none').style('left', d3.event.pageX + 20 + 'px').style('top', d3.event.pageY - 22 + 'px').html('\n              <div>Mutation ID: ' + d.id + '</div>\n              <div># of Cases: ' + d.donors + '</div>\n              <div>Amino Acid Change: Arg<b>' + d.x + '</b>Ter</div>\n              <div>Functional Impact: ' + d.impact + '</div>\n            ');
+      }
+    }
+  }).on('mouseout', function (d) {
+    if (!store.getState().animating) {
+      d3.select('.tooltip').style('left', '-9999px');
+      if (onMutationMouseout) onMutationMouseout(d, d3.event);
+    }
+  }).on('click', function (d) {
+    return onMutationClick(d, d3.event);
+  });
+
   data.mutations.forEach(function (d) {
@@ -87,3 +127,3 @@ // Mutation lines on minimap
 
-  return { mutationChartLines: mutationChartLines, mutationChartCircles: mutationChartCircles };
+  return { mutationChartLines: mutationChartLines, mutationChartCircles: mutationChartCircles, selectedMutationBox: selectedMutationBox };
 };
@@ -90,0 +130,0 @@

dist/es6/stats.js

@@ -35,2 +35,3 @@ import startCase from 'lodash.startcase';
       mutationChartCircles = _ref2.mutationChartCircles,
+      selectedMutationBox = _ref2.selectedMutationBox,
       height = _ref2.height,
@@ -73,2 +74,3 @@ xAxisOffset = _ref2.xAxisOffset,
       mutationChartCircles: mutationChartCircles,
+      selectedMutationBox: selectedMutationBox,
       height: height,
@@ -132,2 +134,3 @@ xAxisOffset: xAxisOffset,
         mutationChartCircles: mutationChartCircles,
+        selectedMutationBox: selectedMutationBox,
         height: height,
@@ -180,2 +183,3 @@ xAxisOffset: xAxisOffset,
         mutationChartCircles: mutationChartCircles,
+        selectedMutationBox: selectedMutationBox,
         height: height,
@@ -211,2 +215,3 @@ xAxisOffset: xAxisOffset,
       mutationChartCircles = _ref3.mutationChartCircles,
+      selectedMutationBox = _ref3.selectedMutationBox,
       height = _ref3.height,
@@ -262,2 +267,3 @@ xAxisOffset = _ref3.xAxisOffset,
       mutationChartCircles: mutationChartCircles,
+      selectedMutationBox: selectedMutationBox,
       height: height,
@@ -264,0 +270,0 @@ xAxisOffset: xAxisOffset,

dist/es6/ticks.js

@@ -21,6 +21,6 @@ import range from 'lodash.range';
 
-  var yTicks = d3Root.select('.yTicks').append('g').selectAll('text').data(range(maxDonors + 5).map(function (x) {
-    return x + 1;
-  })).enter().append('text').text(function (i) {
-    return i;
+  var highestValue = Math.max(10, maxDonors);
+
+  var yTicks = d3Root.select('.yTicks').append('g').selectAll('text').data(range(1, highestValue, highestValue / 7)).enter().append('text').text(function (i) {
+    return Math.round(i);
   }).attrs({
@@ -38,7 +38,3 @@ class: function _class(i) {
 
-  var yTicksLine = d3Root.select('.yTicks').append('g').selectAll('line').data(range(maxDonors + 5).map(function (x) {
-    return x + 1;
-  })).enter().append('line').text(function (i) {
-    return i;
-  }).attrs({
+  var yTicksLine = d3Root.select('.yTicks').append('g').selectAll('line').data(range(1, highestValue, highestValue / 7)).enter().append('line').attrs({
     class: function _class(i) {
@@ -45,0 +41,0 @@ return 'yTick-line-' + i;

dist/lib/animator.js

@@ -27,2 +27,3 @@ 'use strict';
       mutationChartCircles = _ref.mutationChartCircles,
+      selectedMutationBox = _ref.selectedMutationBox,
       consequences = _ref.consequences,
@@ -132,2 +133,6 @@ impacts = _ref.impacts,
 
+    selectedMutationBox.attr('x', function (d) {
+      return scaleLinear(d.x) - d.size / 2;
+    });
+
     animateScaleY({
@@ -143,2 +148,3 @@ d3: d3,
       mutationChartCircles: mutationChartCircles,
+      selectedMutationBox: selectedMutationBox,
       height: height,
@@ -162,2 +168,3 @@ xAxisOffset: xAxisOffset,
         mutationChartCircles: mutationChartCircles,
+        selectedMutationBox: selectedMutationBox,
         height: height,
@@ -188,2 +195,3 @@ xAxisOffset: xAxisOffset,
       mutationChartCircles = _ref2.mutationChartCircles,
+      selectedMutationBox = _ref2.selectedMutationBox,
       height = _ref2.height,
@@ -206,4 +214,6 @@ xAxisOffset = _ref2.xAxisOffset,
 
-      var scaleLinearY = d3.scaleLinear().domain([0, Math.round(maxDonors + 5)]).range([height - xAxisOffset, 0]);
+      var highestValue = Math.max(10, maxDonors);
 
+      var scaleLinearY = d3.scaleLinear().domain([0, highestValue]).range([height - xAxisOffset, 15]);
+
       mutationChartLines.attr('y2', function (d) {
@@ -217,2 +227,6 @@ return scaleLinearY(d.donors);
 
+      selectedMutationBox.attr('y', function (d) {
+        return scaleLinearY(d.donors) - d.size / 2;
+      });
+
       // Vertical ticks
@@ -219,0 +233,0 @@

dist/lib/data.js

@@ -31,3 +31,3 @@ "use strict";
         id: "MU" + i,
-        donors: Math.round(i * Math.random() / 2 % 20),
+        donors: Math.round(i * Math.random()),
         x: i * Date.now() % 500,
@@ -34,0 +34,0 @@ consequence: "type_" + (i % 4 + 1) + "**",

dist/lib/index.js

@@ -144,4 +144,6 @@ 'use strict';
 
-  var scaleLinearY = d3.scaleLinear().domain([0, Math.round(maxDonors + 5)]).range([height - xAxisOffset, 0]);
+  var highestValue = Math.max(10, maxDonors);
 
+  var scaleLinearY = d3.scaleLinear().domain([0, highestValue]).range([height - xAxisOffset, 15]);
+
   // Main Chart
@@ -273,3 +275,4 @@
       mutationChartLines = _setupMutations.mutationChartLines,
-      mutationChartCircles = _setupMutations.mutationChartCircles;
+      mutationChartCircles = _setupMutations.mutationChartCircles,
+      selectedMutationBox = _setupMutations.selectedMutationBox;
 
@@ -344,2 +347,3 @@ var minimapSlideTarget = svg.append('g').append('rect').attrs(Object.assign({
     mutationChartCircles: mutationChartCircles,
+    selectedMutationBox: selectedMutationBox,
     height: height,
@@ -372,2 +376,3 @@ xAxisOffset: xAxisOffset,
     mutationChartCircles: mutationChartCircles,
+    selectedMutationBox: selectedMutationBox,
     consequences: consequences,
@@ -427,2 +432,3 @@ impacts: impacts,
         mutationChartCircles: mutationChartCircles,
+        selectedMutationBox: selectedMutationBox,
         consequencesCheckboxContainers: consequencesCheckboxContainers,
@@ -429,0 +435,0 @@ impactsCheckboxContainers: impactsCheckboxContainers,

dist/lib/mutations.js

@@ -82,2 +82,42 @@ 'use strict';
 
+  var selectedMutation = data.mutations.filter(function (d) {
+    return d.id === mutationId;
+  }).map(function (d) {
+    return Object.assign({}, d, { size: _theme2.default.mutationRadius * 3 });
+  });
+
+  var selectedMutationBox = chart.append('g').selectAll('rect').data(selectedMutation).enter().append('rect').attrs({
+    class: 'selected-mutation-box',
+    x: function x(d) {
+      return d.x * scale + yAxisOffset - d.size / 2;
+    },
+    y: function y(d) {
+      return scaleLinearY(d.donors) - d.size / 2;
+    },
+    width: function width(d) {
+      return d.size;
+    },
+    height: function height(d) {
+      return d.size;
+    },
+    fill: 'none',
+    stroke: 'rgb(251, 94, 45)',
+    'stroke-width': 2
+  }).on('mouseover', function (d) {
+    if (!store.getState().animating) {
+      if (onMutationMouseover) {
+        onMutationMouseover(d, d3.event);
+      } else {
+        d3.select('.tooltip').style('pointer-events', 'none').style('left', d3.event.pageX + 20 + 'px').style('top', d3.event.pageY - 22 + 'px').html('\n              <div>Mutation ID: ' + d.id + '</div>\n              <div># of Cases: ' + d.donors + '</div>\n              <div>Amino Acid Change: Arg<b>' + d.x + '</b>Ter</div>\n              <div>Functional Impact: ' + d.impact + '</div>\n            ');
+      }
+    }
+  }).on('mouseout', function (d) {
+    if (!store.getState().animating) {
+      d3.select('.tooltip').style('left', '-9999px');
+      if (onMutationMouseout) onMutationMouseout(d, d3.event);
+    }
+  }).on('click', function (d) {
+    return onMutationClick(d, d3.event);
+  });
+
   data.mutations.forEach(function (d) {
@@ -97,3 +137,3 @@ // Mutation lines on minimap
 
-  return { mutationChartLines: mutationChartLines, mutationChartCircles: mutationChartCircles };
+  return { mutationChartLines: mutationChartLines, mutationChartCircles: mutationChartCircles, selectedMutationBox: selectedMutationBox };
 };
@@ -100,0 +140,0 @@

dist/lib/stats.js

@@ -52,2 +52,3 @@ 'use strict';
       mutationChartCircles = _ref2.mutationChartCircles,
+      selectedMutationBox = _ref2.selectedMutationBox,
       height = _ref2.height,
@@ -90,2 +91,3 @@ xAxisOffset = _ref2.xAxisOffset,
       mutationChartCircles: mutationChartCircles,
+      selectedMutationBox: selectedMutationBox,
       height: height,
@@ -149,2 +151,3 @@ xAxisOffset: xAxisOffset,
         mutationChartCircles: mutationChartCircles,
+        selectedMutationBox: selectedMutationBox,
         height: height,
@@ -197,2 +200,3 @@ xAxisOffset: xAxisOffset,
         mutationChartCircles: mutationChartCircles,
+        selectedMutationBox: selectedMutationBox,
         height: height,
@@ -228,2 +232,3 @@ xAxisOffset: xAxisOffset,
       mutationChartCircles = _ref3.mutationChartCircles,
+      selectedMutationBox = _ref3.selectedMutationBox,
       height = _ref3.height,
@@ -279,2 +284,3 @@ xAxisOffset = _ref3.xAxisOffset,
       mutationChartCircles: mutationChartCircles,
+      selectedMutationBox: selectedMutationBox,
       height: height,
@@ -281,0 +287,0 @@ xAxisOffset: xAxisOffset,

dist/lib/ticks.js

@@ -32,6 +32,6 @@ 'use strict';
 
-  var yTicks = d3Root.select('.yTicks').append('g').selectAll('text').data((0, _lodash2.default)(maxDonors + 5).map(function (x) {
-    return x + 1;
-  })).enter().append('text').text(function (i) {
-    return i;
+  var highestValue = Math.max(10, maxDonors);
+
+  var yTicks = d3Root.select('.yTicks').append('g').selectAll('text').data((0, _lodash2.default)(1, highestValue, highestValue / 7)).enter().append('text').text(function (i) {
+    return Math.round(i);
   }).attrs({
@@ -49,7 +49,3 @@ class: function _class(i) {
 
-  var yTicksLine = d3Root.select('.yTicks').append('g').selectAll('line').data((0, _lodash2.default)(maxDonors + 5).map(function (x) {
-    return x + 1;
-  })).enter().append('line').text(function (i) {
-    return i;
-  }).attrs({
+  var yTicksLine = d3Root.select('.yTicks').append('g').selectAll('line').data((0, _lodash2.default)(1, highestValue, highestValue / 7)).enter().append('line').attrs({
     class: function _class(i) {
@@ -56,0 +52,0 @@ return 'yTick-line-' + i;

index.js

@@ -116,5 +116,7 @@ // @flow
 
+  let highestValue = Math.max(10, maxDonors)
+
   let scaleLinearY = d3.scaleLinear()
-    .domain([0, Math.round(maxDonors + 5)])
-    .range([height - xAxisOffset, 0])
+    .domain([0, highestValue])
+    .range([height - xAxisOffset, 15])
 
@@ -254,3 +256,3 @@ // Main Chart
 
-  let { mutationChartLines, mutationChartCircles } = setupMutations({
+  let { mutationChartLines, mutationChartCircles, selectedMutationBox } = setupMutations({
     d3,
@@ -352,2 +354,3 @@ chart,
     mutationChartCircles,
+    selectedMutationBox,
     height,
@@ -376,2 +379,3 @@ xAxisOffset,
     mutationChartCircles,
+    selectedMutationBox,
     consequences,
@@ -434,2 +438,3 @@ impacts,
         mutationChartCircles,
+        selectedMutationBox,
         consequencesCheckboxContainers,
@@ -436,0 +441,0 @@ impactsCheckboxContainers,

mutations.js

@@ -100,2 +100,48 @@ // @flow
 
+  let selectedMutation = data.mutations
+    .filter(d => d.id === mutationId)
+    .map(d => ({ ...d, size: theme.mutationRadius * 3 }))
+
+  let selectedMutationBox = chart
+    .append(`g`)
+    .selectAll(`rect`)
+    .data(selectedMutation)
+    .enter()
+    .append(`rect`)
+    .attrs({
+      class: `selected-mutation-box`,
+      x: d => ((d.x * scale) + yAxisOffset) - (d.size / 2),
+      y: d => scaleLinearY(d.donors) - (d.size / 2),
+      width: d => d.size,
+      height: d => d.size,
+      fill: `none`,
+      stroke: `rgb(251, 94, 45)`,
+      'stroke-width': 2,
+    })
+    .on(`mouseover`, d => {
+      if (!store.getState().animating) {
+        if (onMutationMouseover) {
+          onMutationMouseover(d, d3.event)
+        } else {
+          d3.select(`.tooltip`)
+            .style(`pointer-events`, `none`)
+            .style(`left`, d3.event.pageX + 20 + `px`)
+            .style(`top`, d3.event.pageY - 22 + `px`)
+            .html(`
+              <div>Mutation ID: ${d.id}</div>
+              <div># of Cases: ${d.donors}</div>
+              <div>Amino Acid Change: Arg<b>${d.x}</b>Ter</div>
+              <div>Functional Impact: ${d.impact}</div>
+            `)
+        }
+      }
+    })
+    .on(`mouseout`, d => {
+      if (!store.getState().animating) {
+        d3.select(`.tooltip`).style(`left`, `-9999px`)
+        if (onMutationMouseout) onMutationMouseout(d, d3.event)
+      }
+    })
+    .on(`click`, d => onMutationClick(d, d3.event))
+
   data.mutations.forEach(d => {
@@ -120,3 +166,3 @@ // Mutation lines on minimap
 
-  return { mutationChartLines, mutationChartCircles }
+  return { mutationChartLines, mutationChartCircles, selectedMutationBox }
 }
@@ -123,0 +169,0 @@

package.json

@@ -29,3 +29,3 @@ {
   "name": "@oncojs/lolliplot",
-  "version": "0.5.10",
+  "version": "0.5.11",
   "description": "A protein viewer built with d3",
@@ -32,0 +32,0 @@ "browser": "dist/umd/index.min.js",

stats.js

@@ -60,2 +60,3 @@ // @flow
   mutationChartCircles: Object,
+  selectedMutationBox: Object,
   height: number,
@@ -81,2 +82,3 @@ xAxisOffset: number,
   mutationChartCircles,
+  selectedMutationBox,
   height,
@@ -142,2 +144,3 @@ xAxisOffset,
         mutationChartCircles,
+        selectedMutationBox,
         height,
@@ -219,2 +222,3 @@ xAxisOffset,
           mutationChartCircles,
+          selectedMutationBox,
           height,
@@ -280,2 +284,3 @@ xAxisOffset,
           mutationChartCircles,
+          selectedMutationBox,
           height,
@@ -312,2 +317,3 @@ xAxisOffset,
   mutationChartCircles: Object,
+  selectedMutationBox: Object,
   height: number,
@@ -331,2 +337,3 @@ xAxisOffset: number,
   mutationChartCircles,
+  selectedMutationBox,
   height,
@@ -381,2 +388,3 @@ xAxisOffset,
       mutationChartCircles,
+      selectedMutationBox,
       height,
@@ -383,0 +391,0 @@ xAxisOffset,

ticks.js

@@ -41,9 +41,11 @@ // @flow
 
+  let highestValue = Math.max(10, maxDonors)
+
   let yTicks = d3Root.select(`.yTicks`)
     .append(`g`)
     .selectAll(`text`)
-    .data(range(maxDonors + 5).map(x => x + 1))
+    .data(range(1, highestValue, highestValue / 7))
     .enter()
     .append(`text`)
-    .text(i => i)
+    .text(i => Math.round(i))
     .attrs({
@@ -60,6 +62,5 @@ class: i => `yTick-text-${i}`,
     .selectAll(`line`)
-    .data(range(maxDonors + 5).map(x => x + 1))
+    .data(range(1, highestValue, highestValue / 7))
     .enter()
     .append(`line`)
-    .text(i => i)
     .attrs({
@@ -66,0 +67,0 @@ class: i => `yTick-line-${i}`,

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

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

Improved metrics

Total package byte prevSize

1838659

increased by0.73%

Lines of code

16880

increased by1.41%

No dependency changes