Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@oncojs/react-lolliplot

Package Overview
Dependencies
Maintainers
6
Versions
22
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@oncojs/react-lolliplot - npm Package Compare versions

Comparing version 0.10.5 to 0.10.6

110

dist/es6/MinimapNode.js

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc