@oncojs/react-lolliplot
Advanced tools
Comparing version 0.10.5 to 0.10.6
@@ -1,8 +0,8 @@ | ||
import React from 'react'; | ||
import invariant from 'invariant'; | ||
import ReactFauxDOM from 'react-faux-dom'; | ||
import attrs from './utils/attrs'; | ||
import { dim, halfPixel } from './utils/spatial'; | ||
import uuid from './utils/uuid'; | ||
import theme from './theme'; | ||
import React from "react"; | ||
import invariant from "invariant"; | ||
import ReactFauxDOM from "react-faux-dom"; | ||
import attrs from "./utils/attrs"; | ||
import { dim, halfPixel } from "./utils/spatial"; | ||
import uuid from "./utils/uuid"; | ||
import theme from "./theme"; | ||
@@ -32,3 +32,3 @@ /*----------------------------------------------------------------------------*/ | ||
invariant(d3, 'You must pass in the d3 library, either v3 || v4'); | ||
invariant(d3, "You must pass in the d3 library, either v3 || v4"); | ||
@@ -40,5 +40,5 @@ d3.selection.prototype.attrs = attrs; | ||
// Similar to a React target element | ||
var root = ReactFauxDOM.createElement('div'); | ||
var root = ReactFauxDOM.createElement("div"); | ||
invariant(root, 'Must provide an element or selector!'); | ||
invariant(root, "Must provide an element or selector!"); | ||
@@ -54,13 +54,13 @@ width = width || root.clientWidth; | ||
var d3Root = d3.select(root).style('position', 'relative'); | ||
var d3Root = d3.select(root).style("position", "relative"); | ||
var svg = d3Root.append('svg').attrs(Object.assign({ | ||
class: 'chart' | ||
var svg = d3Root.append("svg").attrs(Object.assign({ | ||
class: "chart" | ||
}, dim(width, height))); | ||
var defs = svg.append('defs'); | ||
var defs = svg.append("defs"); | ||
// Chart clipPath | ||
defs.append('clipPath').attr('id', uniqueSelector + '-chart-clip').append('rect').attrs(Object.assign({ | ||
defs.append("clipPath").attr("id", uniqueSelector + "-chart-clip").append("rect").attrs(Object.assign({ | ||
x: yAxisOffset, | ||
@@ -72,15 +72,15 @@ y: 0 | ||
var chart = d3Root.select('.chart'); | ||
var chart = d3Root.select(".chart"); | ||
svg.append('g').append('rect').attrs(Object.assign({ | ||
class: 'minimap', | ||
svg.append("g").append("rect").attrs(Object.assign({ | ||
class: "minimap", | ||
x: yAxisOffset, | ||
y: 0 | ||
}, dim(xAxisLength, 50), { | ||
stroke: 'rgb(138, 138, 138)', | ||
fill: 'rgba(212, 212, 212, 0.4)', | ||
cursor: 'text' | ||
stroke: "rgb(138, 138, 138)", | ||
fill: "rgba(212, 212, 212, 0.4)", | ||
cursor: "text" | ||
})); | ||
svg.append('g').append('clipPath').attr('id', uniqueSelector + '-minimap-clip').append('rect').attrs(Object.assign({ | ||
svg.append("g").append("clipPath").attr("id", uniqueSelector + "-minimap-clip").append("rect").attrs(Object.assign({ | ||
x: yAxisOffset, | ||
@@ -90,4 +90,4 @@ y: 0 | ||
svg.append('g').append('rect').attrs({ | ||
class: 'minimap-zoom-area', | ||
svg.append("g").append("rect").attrs({ | ||
class: "minimap-zoom-area", | ||
x: min * scale + yAxisOffset + halfPixel, | ||
@@ -97,8 +97,8 @@ y: halfPixel, | ||
width: Math.max(1, (max - min) * scale - 1), | ||
fill: 'white', | ||
'pointer-events': 'none' | ||
fill: "white", | ||
"pointer-events": "none" | ||
}); | ||
svg.append('g').append('line').attrs({ | ||
class: 'minimap-protein-mutation-divider', | ||
svg.append("g").append("line").attrs({ | ||
class: "minimap-protein-mutation-divider", | ||
x1: yAxisOffset, | ||
@@ -111,14 +111,14 @@ y1: height - 10, | ||
svg.append('g').append('text').text('aa 1').attrs({ | ||
svg.append("g").append("text").text("aa 1").attrs({ | ||
x: yAxisOffset, | ||
y: height + 110, | ||
'font-size': '11px', | ||
'text-anchor': 'start' | ||
"font-size": "11px", | ||
"text-anchor": "start" | ||
}); | ||
svg.append('g').append('text').text('aa ' + domainWidth).attrs({ | ||
svg.append("g").append("text").text("aa " + domainWidth).attrs({ | ||
x: width, | ||
y: height + 110, | ||
'font-size': '11px', | ||
'text-anchor': 'end' | ||
"font-size": "11px", | ||
"text-anchor": "end" | ||
}); | ||
@@ -129,4 +129,4 @@ | ||
svg.append('g').append('rect').attrs({ | ||
'clip-path': 'url(#' + uniqueSelector + '-clip)', | ||
svg.append("g").append("rect").attrs({ | ||
"clip-path": "url(#" + uniqueSelector + "-clip)", | ||
x: difference < 0 ? offsetX : zoomStart, | ||
@@ -136,5 +136,5 @@ y: 0, | ||
height: 50, | ||
fill: 'rgba(83, 215, 88, 0.51)', | ||
cursor: 'text', | ||
'pointer-events': 'none' | ||
fill: "rgba(83, 215, 88, 0.51)", | ||
cursor: "text", | ||
"pointer-events": "none" | ||
}); | ||
@@ -144,4 +144,4 @@ } | ||
data.mutations.forEach(function (d) { | ||
return chart.append('line').attrs({ | ||
class: 'mutation-line-' + d.id, | ||
return chart.append("line").attrs({ | ||
class: "mutation-line-" + d.id, | ||
x1: d.x * scale + yAxisOffset, | ||
@@ -152,9 +152,9 @@ y1: height - 10, | ||
stroke: theme.black, | ||
'pointer-events': 'none' | ||
"pointer-events": "none" | ||
}); | ||
}); | ||
chart.append('g').selectAll('rect').data(data.proteins).enter().append('rect').attrs({ | ||
chart.append("g").selectAll("rect").data(data.proteins).enter().append("rect").attrs({ | ||
class: function _class(d) { | ||
return 'domain-' + d.id; | ||
return "domain-" + d.id; | ||
}, | ||
@@ -170,5 +170,5 @@ x: function x(d) { | ||
fill: function fill(d, i) { | ||
return 'hsl(' + i * 100 + ', 80%, 90%)'; | ||
return d.getProteinColor ? d.getProteinColor() : "hsl(" + i * 100 + ", 80%, 90%)"; | ||
}, | ||
'pointer-events': 'none' | ||
"pointer-events": "none" | ||
}); | ||
@@ -178,18 +178,18 @@ | ||
svg.append('g').append('rect').attrs(Object.assign({ | ||
class: 'minimap-slide-target', | ||
svg.append("g").append("rect").attrs(Object.assign({ | ||
class: "minimap-slide-target", | ||
x: min * scale + yAxisOffset + halfPixel + minimapWidth - 20, | ||
y: 5 | ||
}, dim(15, 15), { | ||
fill: 'rgb(255, 255, 255)', | ||
stroke: 'rgb(57, 57, 57)', | ||
cursor: 'move' | ||
fill: "rgb(255, 255, 255)", | ||
stroke: "rgb(57, 57, 57)", | ||
cursor: "move" | ||
})); | ||
svg.append('text').text('\u27FA').attrs({ | ||
class: 'minimap-slide-target-arrow', | ||
svg.append("text").text("\u27FA").attrs({ | ||
class: "minimap-slide-target-arrow", | ||
x: min * scale + yAxisOffset + halfPixel + minimapWidth - 19, | ||
y: 16, | ||
'font-size': '11px', | ||
'pointer-events': 'none' | ||
"font-size": "11px", | ||
"pointer-events": "none" | ||
}); | ||
@@ -196,0 +196,0 @@ |
@@ -1,28 +0,28 @@ | ||
'use strict'; | ||
"use strict"; | ||
exports.__esModule = true; | ||
var _react = require('react'); | ||
var _react = require("react"); | ||
var _react2 = _interopRequireDefault(_react); | ||
var _invariant = require('invariant'); | ||
var _invariant = require("invariant"); | ||
var _invariant2 = _interopRequireDefault(_invariant); | ||
var _reactFauxDom = require('react-faux-dom'); | ||
var _reactFauxDom = require("react-faux-dom"); | ||
var _reactFauxDom2 = _interopRequireDefault(_reactFauxDom); | ||
var _attrs = require('./utils/attrs'); | ||
var _attrs = require("./utils/attrs"); | ||
var _attrs2 = _interopRequireDefault(_attrs); | ||
var _spatial = require('./utils/spatial'); | ||
var _spatial = require("./utils/spatial"); | ||
var _uuid = require('./utils/uuid'); | ||
var _uuid = require("./utils/uuid"); | ||
var _uuid2 = _interopRequireDefault(_uuid); | ||
var _theme = require('./theme'); | ||
var _theme = require("./theme"); | ||
@@ -56,3 +56,3 @@ var _theme2 = _interopRequireDefault(_theme); | ||
(0, _invariant2.default)(d3, 'You must pass in the d3 library, either v3 || v4'); | ||
(0, _invariant2.default)(d3, "You must pass in the d3 library, either v3 || v4"); | ||
@@ -64,5 +64,5 @@ d3.selection.prototype.attrs = _attrs2.default; | ||
// Similar to a React target element | ||
var root = _reactFauxDom2.default.createElement('div'); | ||
var root = _reactFauxDom2.default.createElement("div"); | ||
(0, _invariant2.default)(root, 'Must provide an element or selector!'); | ||
(0, _invariant2.default)(root, "Must provide an element or selector!"); | ||
@@ -78,13 +78,13 @@ width = width || root.clientWidth; | ||
var d3Root = d3.select(root).style('position', 'relative'); | ||
var d3Root = d3.select(root).style("position", "relative"); | ||
var svg = d3Root.append('svg').attrs(Object.assign({ | ||
class: 'chart' | ||
var svg = d3Root.append("svg").attrs(Object.assign({ | ||
class: "chart" | ||
}, (0, _spatial.dim)(width, height))); | ||
var defs = svg.append('defs'); | ||
var defs = svg.append("defs"); | ||
// Chart clipPath | ||
defs.append('clipPath').attr('id', uniqueSelector + '-chart-clip').append('rect').attrs(Object.assign({ | ||
defs.append("clipPath").attr("id", uniqueSelector + "-chart-clip").append("rect").attrs(Object.assign({ | ||
x: yAxisOffset, | ||
@@ -96,15 +96,15 @@ y: 0 | ||
var chart = d3Root.select('.chart'); | ||
var chart = d3Root.select(".chart"); | ||
svg.append('g').append('rect').attrs(Object.assign({ | ||
class: 'minimap', | ||
svg.append("g").append("rect").attrs(Object.assign({ | ||
class: "minimap", | ||
x: yAxisOffset, | ||
y: 0 | ||
}, (0, _spatial.dim)(xAxisLength, 50), { | ||
stroke: 'rgb(138, 138, 138)', | ||
fill: 'rgba(212, 212, 212, 0.4)', | ||
cursor: 'text' | ||
stroke: "rgb(138, 138, 138)", | ||
fill: "rgba(212, 212, 212, 0.4)", | ||
cursor: "text" | ||
})); | ||
svg.append('g').append('clipPath').attr('id', uniqueSelector + '-minimap-clip').append('rect').attrs(Object.assign({ | ||
svg.append("g").append("clipPath").attr("id", uniqueSelector + "-minimap-clip").append("rect").attrs(Object.assign({ | ||
x: yAxisOffset, | ||
@@ -114,4 +114,4 @@ y: 0 | ||
svg.append('g').append('rect').attrs({ | ||
class: 'minimap-zoom-area', | ||
svg.append("g").append("rect").attrs({ | ||
class: "minimap-zoom-area", | ||
x: min * scale + yAxisOffset + _spatial.halfPixel, | ||
@@ -121,8 +121,8 @@ y: _spatial.halfPixel, | ||
width: Math.max(1, (max - min) * scale - 1), | ||
fill: 'white', | ||
'pointer-events': 'none' | ||
fill: "white", | ||
"pointer-events": "none" | ||
}); | ||
svg.append('g').append('line').attrs({ | ||
class: 'minimap-protein-mutation-divider', | ||
svg.append("g").append("line").attrs({ | ||
class: "minimap-protein-mutation-divider", | ||
x1: yAxisOffset, | ||
@@ -135,14 +135,14 @@ y1: height - 10, | ||
svg.append('g').append('text').text('aa 1').attrs({ | ||
svg.append("g").append("text").text("aa 1").attrs({ | ||
x: yAxisOffset, | ||
y: height + 110, | ||
'font-size': '11px', | ||
'text-anchor': 'start' | ||
"font-size": "11px", | ||
"text-anchor": "start" | ||
}); | ||
svg.append('g').append('text').text('aa ' + domainWidth).attrs({ | ||
svg.append("g").append("text").text("aa " + domainWidth).attrs({ | ||
x: width, | ||
y: height + 110, | ||
'font-size': '11px', | ||
'text-anchor': 'end' | ||
"font-size": "11px", | ||
"text-anchor": "end" | ||
}); | ||
@@ -153,4 +153,4 @@ | ||
svg.append('g').append('rect').attrs({ | ||
'clip-path': 'url(#' + uniqueSelector + '-clip)', | ||
svg.append("g").append("rect").attrs({ | ||
"clip-path": "url(#" + uniqueSelector + "-clip)", | ||
x: difference < 0 ? offsetX : zoomStart, | ||
@@ -160,5 +160,5 @@ y: 0, | ||
height: 50, | ||
fill: 'rgba(83, 215, 88, 0.51)', | ||
cursor: 'text', | ||
'pointer-events': 'none' | ||
fill: "rgba(83, 215, 88, 0.51)", | ||
cursor: "text", | ||
"pointer-events": "none" | ||
}); | ||
@@ -168,4 +168,4 @@ } | ||
data.mutations.forEach(function (d) { | ||
return chart.append('line').attrs({ | ||
class: 'mutation-line-' + d.id, | ||
return chart.append("line").attrs({ | ||
class: "mutation-line-" + d.id, | ||
x1: d.x * scale + yAxisOffset, | ||
@@ -176,9 +176,9 @@ y1: height - 10, | ||
stroke: _theme2.default.black, | ||
'pointer-events': 'none' | ||
"pointer-events": "none" | ||
}); | ||
}); | ||
chart.append('g').selectAll('rect').data(data.proteins).enter().append('rect').attrs({ | ||
chart.append("g").selectAll("rect").data(data.proteins).enter().append("rect").attrs({ | ||
class: function _class(d) { | ||
return 'domain-' + d.id; | ||
return "domain-" + d.id; | ||
}, | ||
@@ -194,5 +194,5 @@ x: function x(d) { | ||
fill: function fill(d, i) { | ||
return 'hsl(' + i * 100 + ', 80%, 90%)'; | ||
return d.getProteinColor ? d.getProteinColor() : "hsl(" + i * 100 + ", 80%, 90%)"; | ||
}, | ||
'pointer-events': 'none' | ||
"pointer-events": "none" | ||
}); | ||
@@ -202,18 +202,18 @@ | ||
svg.append('g').append('rect').attrs(Object.assign({ | ||
class: 'minimap-slide-target', | ||
svg.append("g").append("rect").attrs(Object.assign({ | ||
class: "minimap-slide-target", | ||
x: min * scale + yAxisOffset + _spatial.halfPixel + minimapWidth - 20, | ||
y: 5 | ||
}, (0, _spatial.dim)(15, 15), { | ||
fill: 'rgb(255, 255, 255)', | ||
stroke: 'rgb(57, 57, 57)', | ||
cursor: 'move' | ||
fill: "rgb(255, 255, 255)", | ||
stroke: "rgb(57, 57, 57)", | ||
cursor: "move" | ||
})); | ||
svg.append('text').text('\u27FA').attrs({ | ||
class: 'minimap-slide-target-arrow', | ||
svg.append("text").text("\u27FA").attrs({ | ||
class: "minimap-slide-target-arrow", | ||
x: min * scale + yAxisOffset + _spatial.halfPixel + minimapWidth - 19, | ||
y: 16, | ||
'font-size': '11px', | ||
'pointer-events': 'none' | ||
"font-size": "11px", | ||
"pointer-events": "none" | ||
}); | ||
@@ -220,0 +220,0 @@ |
// @flow | ||
import React from 'react' | ||
import invariant from 'invariant' | ||
import ReactFauxDOM from 'react-faux-dom' | ||
import attrs from './utils/attrs' | ||
import { dim, halfPixel } from './utils/spatial' | ||
import uuid from './utils/uuid' | ||
import theme from './theme' | ||
import React from "react" | ||
import invariant from "invariant" | ||
import ReactFauxDOM from "react-faux-dom" | ||
import attrs from "./utils/attrs" | ||
import { dim, halfPixel } from "./utils/spatial" | ||
import uuid from "./utils/uuid" | ||
import theme from "./theme" | ||
/*----------------------------------------------------------------------------*/ | ||
let Minimap = ({ | ||
d3, | ||
data, | ||
height = 50, | ||
width, | ||
domainWidth = 500, | ||
yAxisOffset = 45, | ||
min, | ||
max, | ||
dragging, | ||
sliding, | ||
offsetX, | ||
zoomStart, | ||
slideStartMin, | ||
slideStartMax, | ||
slideStart, | ||
} = {}) => { | ||
let Minimap = ( | ||
{ | ||
d3, | ||
data, | ||
height = 50, | ||
width, | ||
domainWidth = 500, | ||
yAxisOffset = 45, | ||
min, | ||
max, | ||
dragging, | ||
sliding, | ||
offsetX, | ||
zoomStart, | ||
slideStartMin, | ||
slideStartMax, | ||
slideStart, | ||
} = {} | ||
) => { | ||
invariant(d3, `You must pass in the d3 library, either v3 || v4`) | ||
@@ -53,8 +54,6 @@ | ||
let svg = d3Root | ||
.append(`svg`) | ||
.attrs({ | ||
class: `chart`, | ||
...dim(width, height), | ||
}) | ||
let svg = d3Root.append(`svg`).attrs({ | ||
class: `chart`, | ||
...dim(width, height), | ||
}) | ||
@@ -65,11 +64,7 @@ let defs = svg.append(`defs`) | ||
defs | ||
.append(`clipPath`) | ||
.attr(`id`, `${uniqueSelector}-chart-clip`) | ||
.append(`rect`) | ||
.attrs({ | ||
x: yAxisOffset, | ||
y: 0, | ||
...dim(xAxisLength, height), | ||
}) | ||
defs.append(`clipPath`).attr(`id`, `${uniqueSelector}-chart-clip`).append(`rect`).attrs({ | ||
x: yAxisOffset, | ||
y: 0, | ||
...dim(xAxisLength, height), | ||
}) | ||
@@ -80,14 +75,11 @@ // Chart zoom area | ||
svg | ||
.append(`g`) | ||
.append(`rect`) | ||
.attrs({ | ||
class: `minimap`, | ||
x: yAxisOffset, | ||
y: 0, | ||
...dim(xAxisLength, 50), | ||
stroke: `rgb(138, 138, 138)`, | ||
fill: `rgba(212, 212, 212, 0.4)`, | ||
cursor: `text`, | ||
}) | ||
svg.append(`g`).append(`rect`).attrs({ | ||
class: `minimap`, | ||
x: yAxisOffset, | ||
y: 0, | ||
...dim(xAxisLength, 50), | ||
stroke: `rgb(138, 138, 138)`, | ||
fill: `rgba(212, 212, 212, 0.4)`, | ||
cursor: `text`, | ||
}) | ||
@@ -105,48 +97,34 @@ svg | ||
svg | ||
.append(`g`) | ||
.append(`rect`) | ||
.attrs({ | ||
class: `minimap-zoom-area`, | ||
x: (min * scale) + yAxisOffset + halfPixel, | ||
y: halfPixel, | ||
height: 50 - 1, | ||
width: Math.max(1, ((max - min) * scale) - 1), | ||
fill: `white`, | ||
'pointer-events': `none`, | ||
}) | ||
svg.append(`g`).append(`rect`).attrs({ | ||
class: `minimap-zoom-area`, | ||
x: min * scale + yAxisOffset + halfPixel, | ||
y: halfPixel, | ||
height: 50 - 1, | ||
width: Math.max(1, (max - min) * scale - 1), | ||
fill: `white`, | ||
"pointer-events": `none`, | ||
}) | ||
svg | ||
.append(`g`) | ||
.append(`line`) | ||
.attrs({ | ||
class: `minimap-protein-mutation-divider`, | ||
x1: yAxisOffset, | ||
y1: height - 10, | ||
x2: xAxisLength + yAxisOffset, | ||
y2: height - 10, | ||
stroke: theme.black, | ||
}) | ||
svg.append(`g`).append(`line`).attrs({ | ||
class: `minimap-protein-mutation-divider`, | ||
x1: yAxisOffset, | ||
y1: height - 10, | ||
x2: xAxisLength + yAxisOffset, | ||
y2: height - 10, | ||
stroke: theme.black, | ||
}) | ||
svg | ||
.append(`g`) | ||
.append(`text`) | ||
.text(`aa 1`) | ||
.attrs({ | ||
x: yAxisOffset, | ||
y: height + 110, | ||
'font-size': `11px`, | ||
'text-anchor': `start`, | ||
}) | ||
svg.append(`g`).append(`text`).text(`aa 1`).attrs({ | ||
x: yAxisOffset, | ||
y: height + 110, | ||
"font-size": `11px`, | ||
"text-anchor": `start`, | ||
}) | ||
svg | ||
.append(`g`) | ||
.append(`text`) | ||
.text(`aa ${domainWidth}`) | ||
.attrs({ | ||
x: width, | ||
y: height + 110, | ||
'font-size': `11px`, | ||
'text-anchor': `end`, | ||
}) | ||
svg.append(`g`).append(`text`).text(`aa ${domainWidth}`).attrs({ | ||
x: width, | ||
y: height + 110, | ||
"font-size": `11px`, | ||
"text-anchor": `end`, | ||
}) | ||
@@ -156,75 +134,57 @@ if (dragging) { | ||
svg | ||
.append(`g`) | ||
.append(`rect`) | ||
.attrs({ | ||
'clip-path': `url(#${uniqueSelector}-clip)`, | ||
x: difference < 0 ? offsetX : zoomStart, | ||
y: 0, | ||
width: Math.abs(difference), | ||
height: 50, | ||
fill: `rgba(83, 215, 88, 0.51)`, | ||
cursor: `text`, | ||
'pointer-events': `none`, | ||
}) | ||
svg.append(`g`).append(`rect`).attrs({ | ||
"clip-path": `url(#${uniqueSelector}-clip)`, | ||
x: difference < 0 ? offsetX : zoomStart, | ||
y: 0, | ||
width: Math.abs(difference), | ||
height: 50, | ||
fill: `rgba(83, 215, 88, 0.51)`, | ||
cursor: `text`, | ||
"pointer-events": `none`, | ||
}) | ||
} | ||
data.mutations.forEach(d => | ||
chart | ||
.append(`line`) | ||
.attrs({ | ||
class: `mutation-line-${d.id}`, | ||
x1: (d.x * scale) + yAxisOffset, | ||
y1: height - 10, | ||
x2: (d.x * scale) + yAxisOffset, | ||
y2: height - (d.y * 2) - 10, | ||
stroke: theme.black, | ||
'pointer-events': `none`, | ||
}) | ||
chart.append(`line`).attrs({ | ||
class: `mutation-line-${d.id}`, | ||
x1: d.x * scale + yAxisOffset, | ||
y1: height - 10, | ||
x2: d.x * scale + yAxisOffset, | ||
y2: height - d.y * 2 - 10, | ||
stroke: theme.black, | ||
"pointer-events": `none`, | ||
}) | ||
) | ||
chart | ||
.append(`g`) | ||
.selectAll(`rect`) | ||
.data(data.proteins) | ||
.enter() | ||
.append(`rect`) | ||
.attrs({ | ||
class: d => `domain-${d.id}`, | ||
x: d => (d.start * scale) + yAxisOffset, | ||
y: height - 10, | ||
width: d => ((d.end - d.start) * scale), | ||
height: 10 - halfPixel, | ||
fill: (d, i) => `hsl(${i * 100}, 80%, 90%)`, | ||
'pointer-events': `none`, | ||
}) | ||
chart.append(`g`).selectAll(`rect`).data(data.proteins).enter().append(`rect`).attrs({ | ||
class: d => `domain-${d.id}`, | ||
x: d => d.start * scale + yAxisOffset, | ||
y: height - 10, | ||
width: d => (d.end - d.start) * scale, | ||
height: 10 - halfPixel, | ||
fill: (d, i) => (d.getProteinColor ? d.getProteinColor() : `hsl(${i * 100}, 80%, 90%)`), | ||
"pointer-events": `none`, | ||
}) | ||
let minimapWidth = Math.max(1, ((max - min) * scale) - 1) | ||
let minimapWidth = Math.max(1, (max - min) * scale - 1) | ||
svg | ||
.append(`g`) | ||
.append(`rect`) | ||
.attrs({ | ||
class: `minimap-slide-target`, | ||
x: (min * scale) + yAxisOffset + halfPixel + minimapWidth - 20, | ||
y: 5, | ||
...dim(15, 15), | ||
fill: `rgb(255, 255, 255)`, | ||
stroke: `rgb(57, 57, 57)`, | ||
cursor: `move`, | ||
}) | ||
svg.append(`g`).append(`rect`).attrs({ | ||
class: `minimap-slide-target`, | ||
x: min * scale + yAxisOffset + halfPixel + minimapWidth - 20, | ||
y: 5, | ||
...dim(15, 15), | ||
fill: `rgb(255, 255, 255)`, | ||
stroke: `rgb(57, 57, 57)`, | ||
cursor: `move`, | ||
}) | ||
svg | ||
.append(`text`) | ||
.text(`⟺`) | ||
.attrs({ | ||
class: `minimap-slide-target-arrow`, | ||
x: (min * scale) + yAxisOffset + halfPixel + minimapWidth - 19, | ||
y: 16, | ||
'font-size': `11px`, | ||
'pointer-events': `none`, | ||
}) | ||
svg.append(`text`).text(`⟺`).attrs({ | ||
class: `minimap-slide-target-arrow`, | ||
x: min * scale + yAxisOffset + halfPixel + minimapWidth - 19, | ||
y: 16, | ||
"font-size": `11px`, | ||
"pointer-events": `none`, | ||
}) | ||
return root.toReact() | ||
} | ||
@@ -231,0 +191,0 @@ |
@@ -29,3 +29,3 @@ { | ||
"name": "@oncojs/react-lolliplot", | ||
"version": "0.10.5", | ||
"version": "0.10.6", | ||
"description": "A protein viewer built with d3 (React Component)", | ||
@@ -32,0 +32,0 @@ "browser": "dist/umd/index.min.js", |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
1297950
8723