From 6dcd91250e04eefe5f8dd7d1fef94602c53f364a Mon Sep 17 00:00:00 2001 From: Peter Kerpedjiev Date: Sun, 17 May 2020 10:00:06 -0700 Subject: [PATCH] Added arcStyle options-info --- package-lock.json | 106 ++++++++++++++++++++++++++++++++------------- package.json | 3 +- src/Arcs1DTrack.js | 81 +++++++++++++++++++++------------- 3 files changed, 130 insertions(+), 60 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3c8b027..018fff2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4915,7 +4915,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.1.1", @@ -4966,7 +4967,8 @@ "balanced-match": { "version": "0.4.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "bcrypt-pbkdf": { "version": "1.0.1", @@ -4981,6 +4983,7 @@ "version": "0.0.9", "bundled": true, "dev": true, + "optional": true, "requires": { "inherits": "~2.0.0" } @@ -4989,6 +4992,7 @@ "version": "2.10.1", "bundled": true, "dev": true, + "optional": true, "requires": { "hoek": "2.x.x" } @@ -4997,6 +5001,7 @@ "version": "1.1.7", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^0.4.1", "concat-map": "0.0.1" @@ -5005,7 +5010,8 @@ "buffer-shims": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "caseless": { "version": "0.12.0", @@ -5022,12 +5028,14 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "combined-stream": { "version": "1.0.5", "bundled": true, "dev": true, + "optional": true, "requires": { "delayed-stream": "~1.0.0" } @@ -5035,22 +5043,26 @@ "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "cryptiles": { "version": "2.0.5", "bundled": true, "dev": true, + "optional": true, "requires": { "boom": "2.x.x" } @@ -5090,7 +5102,8 @@ "delayed-stream": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "delegates": { "version": "1.0.0", @@ -5122,7 +5135,8 @@ "extsprintf": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "forever-agent": { "version": "0.6.1", @@ -5144,12 +5158,14 @@ "fs.realpath": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "fstream": { "version": "1.0.11", "bundled": true, "dev": true, + "optional": true, "requires": { "graceful-fs": "^4.1.2", "inherits": "~2.0.0", @@ -5205,6 +5221,7 @@ "version": "7.1.2", "bundled": true, "dev": true, + "optional": true, "requires": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -5217,7 +5234,8 @@ "graceful-fs": { "version": "4.1.11", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "har-schema": { "version": "1.0.5", @@ -5245,6 +5263,7 @@ "version": "3.1.3", "bundled": true, "dev": true, + "optional": true, "requires": { "boom": "2.x.x", "cryptiles": "2.x.x", @@ -5255,7 +5274,8 @@ "hoek": { "version": "2.16.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "http-signature": { "version": "1.1.1", @@ -5272,6 +5292,7 @@ "version": "1.0.6", "bundled": true, "dev": true, + "optional": true, "requires": { "once": "^1.3.0", "wrappy": "1" @@ -5280,7 +5301,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.4", @@ -5292,6 +5314,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5305,7 +5328,8 @@ "isarray": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "isstream": { "version": "0.1.2", @@ -5378,12 +5402,14 @@ "mime-db": { "version": "1.27.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "mime-types": { "version": "2.1.15", "bundled": true, "dev": true, + "optional": true, "requires": { "mime-db": "~1.27.0" } @@ -5392,6 +5418,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -5399,12 +5426,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "mkdirp": { "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -5459,7 +5488,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "oauth-sign": { "version": "0.8.2", @@ -5477,6 +5507,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5506,7 +5537,8 @@ "path-is-absolute": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "performance-now": { "version": "0.2.0", @@ -5517,7 +5549,8 @@ "process-nextick-args": { "version": "1.0.7", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "punycode": { "version": "1.4.1", @@ -5555,6 +5588,7 @@ "version": "2.2.9", "bundled": true, "dev": true, + "optional": true, "requires": { "buffer-shims": "~1.0.0", "core-util-is": "~1.0.0", @@ -5599,6 +5633,7 @@ "version": "2.6.1", "bundled": true, "dev": true, + "optional": true, "requires": { "glob": "^7.0.5" } @@ -5606,7 +5641,8 @@ "safe-buffer": { "version": "5.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "semver": { "version": "5.3.0", @@ -5630,6 +5666,7 @@ "version": "1.0.9", "bundled": true, "dev": true, + "optional": true, "requires": { "hoek": "2.x.x" } @@ -5663,6 +5700,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -5673,6 +5711,7 @@ "version": "1.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.0.1" } @@ -5687,6 +5726,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -5701,6 +5741,7 @@ "version": "2.2.1", "bundled": true, "dev": true, + "optional": true, "requires": { "block-stream": "*", "fstream": "^1.0.2", @@ -5756,7 +5797,8 @@ "util-deprecate": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "uuid": { "version": "3.0.1", @@ -5785,7 +5827,8 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -6366,10 +6409,10 @@ "requires": { "babel-plugin-react-css-modules": "^3.1.1", "box-intersect": "^1.0.1", - "css-element-queries": "github:marcj/css-element-queries#cbc9d1afd4a04926b389079af4802bac9cd08ab6", + "css-element-queries": "css-element-queries@github:marcj/css-element-queries#cbc9d1afd4a04926b389079af4802bac9cd08ab6", "d3-array": "^1.0.2", "d3-axis": "^1.0.4", - "d3-brush": "github:flekschas/d3-brush#39c15e016ef5253a65da20eee78d192dba3d095d", + "d3-brush": "d3-brush@github:flekschas/d3-brush#39c15e016ef5253a65da20eee78d192dba3d095d", "d3-color": "^1.0.3", "d3-drag": "^1.0.2", "d3-dsv": "^1.0.7", @@ -6385,7 +6428,7 @@ "pixi.js": "^4.5.2", "prop-types": "^15.5.10", "react": "^15.5.4", - "react-autocomplete": "github:tiemevanveen/react-autocomplete#a97a5d8d564fa30968cf0b39b6f9dfd2d5eafb24", + "react-autocomplete": "react-autocomplete@github:tiemevanveen/react-autocomplete#a97a5d8d564fa30968cf0b39b6f9dfd2d5eafb24", "react-bootstrap": "^0.31.0", "react-color": "^2.11.1", "react-contextmenu": "^2.0.0-beta.2", @@ -11748,10 +11791,9 @@ "dev": true }, "prettier": { - "version": "1.12.0", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.12.0.tgz", - "integrity": "sha512-Wz0SMncgaglBzDcohH3ZIAi4nVpzOIEweFzCOmgVEoRSeO72b4dcKGfgxoRGVMaFlh1r7dlVaJ+f3CIHfeH6xg==", - "dev": true + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz", + "integrity": "sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==" }, "pretty-bytes": { "version": "4.0.2", @@ -15105,6 +15147,12 @@ "mem": "^1.1.0" } }, + "prettier": { + "version": "1.19.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz", + "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==", + "dev": true + }, "strip-ansi": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", diff --git a/package.json b/package.json index dfd60c2..6380c3b 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "dependencies": { "d3-geo": "^1.10.0", "d3-scale": "^2.0.0", - "higlass-register": "^0.1.0" + "higlass-register": "^0.1.0", + "prettier": "^2.0.5" } } diff --git a/src/Arcs1DTrack.js b/src/Arcs1DTrack.js index 8f9e828..a764f38 100644 --- a/src/Arcs1DTrack.js +++ b/src/Arcs1DTrack.js @@ -3,28 +3,21 @@ import { scaleLinear, scaleLog } from 'd3-scale'; const Arcs1DTrack = (HGC, ...args) => { if (!new.target) { throw new Error( - 'Uncaught TypeError: Class constructor cannot be invoked without "new"', + 'Uncaught TypeError: Class constructor cannot be invoked without "new"' ); } class Arcs1DTrackClass extends HGC.tracks.HorizontalLine1DPixiTrack { - initTile(tile) { + initTile(tile) {} - } - - renderTile(tile) { - - } + renderTile(tile) {} maxWidth() { let maxWidth = 0; for (const tile of Object.values(this.fetchedTiles)) { for (const item of tile.tileData) { - maxWidth = Math.max( - maxWidth, - item.fields[2] - item.fields[1], - ); + maxWidth = Math.max(maxWidth, item.fields[2] - item.fields[1]); } } @@ -39,23 +32,25 @@ const Arcs1DTrack = (HGC, ...args) => { const h = (x2 - x1) / 2; // const h = this.dimensions[1]; const d = (x2 - x1) / 2; - const r = ((d * d) + (h * h)) / (2 * h); + const r = (d * d + h * h) / (2 * h); const cx = (x1 + x2) / 2; let cy = this.dimensions[1] - h + r; // tile.graphics.beginFill(0xff0000); let polyStr = ''; - if (storePolyStr) polyStr += `M${x1},${this.position[1] + this.dimensions[1]}`; + if (storePolyStr) + polyStr += `M${x1},${this.position[1] + this.dimensions[1]}`; graphics.moveTo(x1, this.position[1] + this.dimensions[1]); const limitX1 = Math.max(0, x1); const limitX2 = Math.min(this.dimensions[0], x2); - const opacity = opacityScale(h); graphics.lineStyle(this.strokeWidth, this.strokeColor, opacity); - const startAngle = Math.acos(Math.min(Math.max(-(limitX1 - cx) / r, -1), 1)); + const startAngle = Math.acos( + Math.min(Math.max(-(limitX1 - cx) / r, -1), 1) + ); let endAngle = Math.acos(Math.min(Math.max(-(limitX2 - cx) / r, -1), 1)); // const startAngle = 0; // const endAngle = 2 * Math.PI; @@ -69,7 +64,8 @@ const Arcs1DTrack = (HGC, ...args) => { } const resolution = 10; - const angleScale = scaleLinear().domain([0, resolution - 1]) + const angleScale = scaleLinear() + .domain([0, resolution - 1]) .range([startAngle, endAngle]); for (let k = 0; k < resolution; k++) { @@ -118,7 +114,8 @@ const Arcs1DTrack = (HGC, ...args) => { graphics.lineStyle(this.strokeWidth, this.strokeColor, opacity); const resolution = 10; - const angleScale = scaleLinear().domain([0, resolution - 1]) + const angleScale = scaleLinear() + .domain([0, resolution - 1]) .range([startAngle, endAngle]); for (let k = 0; k < resolution; k++) { @@ -147,12 +144,14 @@ const Arcs1DTrack = (HGC, ...args) => { const maxWidth = this.maxWidth(); const heightScale = scaleLinear() .domain([0, maxWidth]) - .range([this.dimensions[1] / 4, 3 * this.dimensions[1] / 4]); + .range([this.dimensions[1] / 4, (3 * this.dimensions[1]) / 4]); this.strokeColor = HGC.utils.colorToHex( - this.options.strokeColor ? this.options.strokeColor : 'blue', + this.options.strokeColor ? this.options.strokeColor : 'blue' ); - this.strokeWidth = this.options.strokeWidth ? this.options.strokeWidth : 2; + this.strokeWidth = this.options.strokeWidth + ? this.options.strokeWidth + : 2; this.flip = false; if (this.options.flip1D) { @@ -168,7 +167,13 @@ const Arcs1DTrack = (HGC, ...args) => { if (this.options.arcStyle === 'circle') { this.drawCircle(tile.graphics, item, opacityScale, storePolyStr); } else { - this.drawEllipse(tile.graphics, item, heightScale, opacityScale, storePolyStr); + this.drawEllipse( + tile.graphics, + item, + heightScale, + opacityScale, + storePolyStr + ); } // tile.graphics.arc(cx, cy, r, startAngle, endAngle); @@ -177,9 +182,7 @@ const Arcs1DTrack = (HGC, ...args) => { } } - getMouseOverHtml() { - - } + getMouseOverHtml() {} zoomed(newXScale, newYScale) { this.xScale(newXScale); @@ -189,7 +192,6 @@ const Arcs1DTrack = (HGC, ...args) => { this.draw(); } - /** * Export an SVG representation of this track * @@ -210,11 +212,15 @@ const Arcs1DTrack = (HGC, ...args) => { track.appendChild(output); output.setAttribute( 'transform', - `translate(${this.position[0]},${this.position[1]})`, + `translate(${this.position[0]},${this.position[1]})` ); - const strokeColor = this.options.strokeColor ? this.options.strokeColor : 'blue'; - const strokeWidth = this.options.strokeWidth ? this.options.strokeWidth : 2; + const strokeColor = this.options.strokeColor + ? this.options.strokeColor + : 'blue'; + const strokeWidth = this.options.strokeWidth + ? this.options.strokeWidth + : 2; this.visibleAndFetchedTiles().forEach((tile) => { this.polys = []; @@ -241,8 +247,8 @@ const Arcs1DTrack = (HGC, ...args) => { return new Arcs1DTrackClass(...args); }; -const icon = ''; - +const icon = + ''; Arcs1DTrack.config = { type: '1d-arcs', @@ -272,6 +278,21 @@ Arcs1DTrack.config = { trackBorderWidth: 0, trackBorderColor: 'black', }, + optionsInfo: { + arcStyle: { + name: 'Arc Style', + inlineOptions: { + circle: { + name: 'Circle', + value: 'circle', + }, + si: { + name: 'Ellipse', + value: 'ellipse', + }, + }, + }, + }, }; export default Arcs1DTrack;