Skip to content

Commit

Permalink
annotations...
Browse files Browse the repository at this point in the history
  • Loading branch information
@colin-combe
colin-combe committed Jul 7, 2020
1 parent 9bf7629 commit b1b6c3f
Show file tree
Hide file tree
Showing 8 changed files with 63 additions and 46 deletions.
12 changes: 6 additions & 6 deletions dist/complexviewer.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ <h1><a href="https://doi.org/10.1093/bioinformatics/btx497" target="_blank"
<div>
Annotations:

<input type="checkbox" id="mifeatures" name="mifeatures" value="MIFEATURES"
<input type="checkbox" id="mifeatures" name="mifeatures" value="MIFEATURES" checked
onchange="setAnnotations(this);">
<label for="mifeatures"> MI Features</label>
<input type="checkbox" id="uniprotkb" name="uniprotkb" value="UNIPROTKB"
Expand Down
14 changes: 7 additions & 7 deletions src/js/annotations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export function fetchAnnotations(annotationChoice, /*App*/ app, callback) {
getSuperFamFeatures(prot, function () {
protsAnnotated++;
if (protsAnnotated === molCount) {
clearHighlights();
// clearHighlights();
callback();
}
});
Expand All @@ -51,7 +51,7 @@ export function fetchAnnotations(annotationChoice, /*App*/ app, callback) {
getUniProtFeatures(prot, function () {
protsAnnotated++;
if (protsAnnotated === molCount) {
clearHighlights();
// clearHighlights();
callback();
}
});
Expand Down Expand Up @@ -80,7 +80,7 @@ function getUniProtFeatures(prot, callback) {
feature.seqDatum = new SequenceDatum(null, feature.begin + "-" + feature.end);
annotations.push(feature);
}
prot.showHighlight(true);
// prot.showHighlight(true);
callback();
});
}
Expand All @@ -106,7 +106,7 @@ function getSuperFamFeatures(prot, callback) {
}
}
//~ console.log(JSON.stringify(features));
prot.showHighlight(true);
// prot.showHighlight(true);
callback();
});
}
Expand Down Expand Up @@ -150,15 +150,15 @@ export function chooseColors(app) {
const checkedFill = "url('#checkers_" + anno.description + "')";
if (anno.fuzzyStart) {
anno.fuzzyStart.setAttribute("fill", checkedFill);
anno.fuzzyStart.setAttribute("stroke", color);
// anno.fuzzyStart.setAttribute("stroke", color);
}
if (anno.certain) {
anno.certain.setAttribute("fill", color);
anno.certain.setAttribute("stroke", color);
// anno.certain.setAttribute("stroke", color);
}
if (anno.fuzzyEnd) {
anno.fuzzyEnd.setAttribute("fill", checkedFill);
anno.fuzzyEnd.setAttribute("stroke", color);
// anno.fuzzyEnd.setAttribute("stroke", color);
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -982,12 +982,12 @@ App.prototype.showAnnotations = function (annoChoice, show) {
annoChoice = annoChoice.toUpperCase();
const self = this;
let setShown = this.annotationSetsShown.get(annoChoice);
if (annoChoice !== "MIFEATURES" && show) {
if (typeof setShown === "undefined" && annoChoice !== "MIFEATURES") {
fetchAnnotations(annoChoice, this, function () {
self.annotationSetsShown.set(annoChoice, show);
self.updateAnnotations();
});
} else if (!(annoChoice !== "MIFEATURES")) {
} else {
this.annotationSetsShown.set(annoChoice, show);
this.updateAnnotations();
}
Expand Down
6 changes: 6 additions & 0 deletions src/js/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,9 @@ export const LABEL_Y = -5; // todo this isn't needed
// transitionTime: 650
// }
// };
export function rotatePointAboutPoint (p, o, theta) {
theta = (theta / 360) * Math.PI * 2; //TODO: change theta arg to radians not degrees
const rx = Math.cos(theta) * (p[0] - o[0]) - Math.sin(theta) * (p[1] - o[1]) + o[0];
const ry = Math.sin(theta) * (p[0] - o[0]) + Math.cos(theta) * (p[1] - o[1]) + o[1];
return [rx, ry];
}
60 changes: 38 additions & 22 deletions src/js/viz/interactor/polymer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as d3 from "d3"; // transitions and other stuff
import {Interactor, trig} from "./interactor";
import {Annotation} from "./annotation";
import {SequenceDatum} from "../sequence-datum";
import {svgns, LABEL_Y} from "../../config";
import {svgns, LABEL_Y, rotatePointAboutPoint} from "../../config";

Polymer.STICKHEIGHT = 20; //height of stick in pixels
Polymer.MAXSIZE = 0; // residue count of longest sequence
Expand All @@ -21,7 +21,7 @@ Polymer.prototype.setSequence = function (sequence) {
};

Polymer.prototype.getSymbolRadius = function () {
return 10;
return 15;
};

Polymer.prototype.showHighlight = function (show) {
Expand Down Expand Up @@ -600,7 +600,7 @@ Polymer.prototype.setPositionalFeatures = function () {
}
}
}
this.annotationTypes = Array.from(annotationTypesSet.values());
this.annotationTypes = Array.from(annotationTypesSet.values()).sort();

for (let [annotationType, annotationSet] of this.annotationSets) {
if (this.app.annotationSetsShown.get(annotationType) === true) {
Expand All @@ -617,7 +617,7 @@ Polymer.prototype.setPositionalFeatures = function () {
anno.fuzzyStart.setAttribute("d", this.getAnnotationRectPath(anno.seqDatum.uncertainBegin, anno.seqDatum.begin, anno));
}
anno.fuzzyStart.setAttribute("stroke", "none");//-width", "1"); // todo - should be css
anno.fuzzyStart.setAttribute("fill-opacity", "0.6");
// anno.fuzzyStart.setAttribute("fill-opacity", "0.6");
anno.fuzzyStart.name = text;
anno.fuzzyStart.onmouseover = toolTipFunc;
this.annotationsSvgGroup.appendChild(anno.fuzzyStart);
Expand All @@ -638,7 +638,7 @@ Polymer.prototype.setPositionalFeatures = function () {
} else {
anno.certain.setAttribute("d", this.getAnnotationRectPath(tempBegin, tempEnd, anno));
}
anno.certain.setAttribute("stroke-width", "1");
anno.certain.setAttribute("stroke", "none");//-width", "1");
// anno.certain.setAttribute("fill-opacity", "0.6");
anno.certain.name = text;
anno.certain.onmouseover = toolTipFunc;
Expand All @@ -652,7 +652,7 @@ Polymer.prototype.setPositionalFeatures = function () {
anno.fuzzyEnd.setAttribute("d", this.getAnnotationRectPath(anno.seqDatum.end, anno.seqDatum.uncertainEnd, anno));
}
anno.fuzzyEnd.setAttribute("stroke", "none"); //-width", "1");
anno.fuzzyEnd.setAttribute("fill-opacity", "0.6");
// anno.fuzzyEnd.setAttribute("fill-opacity", "0.6");
anno.fuzzyEnd.name = text;
anno.fuzzyEnd.onmouseover = toolTipFunc;
this.annotationsSvgGroup.appendChild(anno.fuzzyEnd);
Expand All @@ -665,18 +665,23 @@ Polymer.prototype.setPositionalFeatures = function () {
Polymer.stepsInArc = 5;

Polymer.prototype.getAnnotationPieSliceArcPath = function (startRes, endRes, annotation) {
const radius = this.getSymbolRadius();// - 2;

// let top, bottom, rungHeight;
// const rung = this.annotationTypes.indexOf(annotation.description);
// // console.log("rung", rung, this.annotationTypes);
// if (rung === -1) {
// bottom = Polymer.STICKHEIGHT / 2;
// top = -Polymer.STICKHEIGHT / 2;
// } else {
// rungHeight = Polymer.STICKHEIGHT / this.annotationTypes.length;
// top = (-Polymer.STICKHEIGHT / 2) + (rung * rungHeight);
// bottom = top + rungHeight;
// }
let top, bottom, rungHeight;
const rung = this.annotationTypes.indexOf(annotation.description);
// console.log("rung", rung, this.annotationTypes);
if (rung === -1) {
bottom = 0;
top = radius;
} else {
//Math.sqrt(this.participant.size / Math.PI) * 0.6
rungHeight = radius / this.annotationTypes.length;
bottom = (rung * rungHeight);
top = bottom + rungHeight;
//
// bottom = Math.sqrt(rung / this.annotationTypes.length) * radius;
// top = Math.sqrt(rung + 1 / this.annotationTypes.length) * radius;
}

// var startAngle = ((startRes - 1) / this.size) * 360;
// var endAngle = ((endRes - 1) / this.size) * 360;
Expand All @@ -691,15 +696,26 @@ Polymer.prototype.getAnnotationPieSliceArcPath = function (startRes, endRes, ann
startAngle = ((startRes - 1) / this.size) * 360;
endAngle = ((endRes - 1) / this.size) * 360;
}
const radius = this.getSymbolRadius() - 2;
const arcStart = trig(radius, startAngle - 90);
const arcEnd = trig(radius, endAngle - 90);
// const arcStart = trig(radius, startAngle - 90);
// const arcEnd = trig(radius, endAngle - 90);
let largeArch = 0;
if ((endAngle - startAngle) > 180 || (endAngle === startAngle)) {
largeArch = 1;
}
return "M0,0 L" + arcStart.x + "," + arcStart.y + " A" + radius + "," +
radius + " 0 " + largeArch + " 1 " + arcEnd.x + "," + arcEnd.y + " Z";

const p1 = rotatePointAboutPoint([0, bottom], [0, 0], startAngle - 180);
const p2 = rotatePointAboutPoint([0, top], [0, 0], startAngle - 180);
const p3 = rotatePointAboutPoint([0, top], [0, 0], endAngle - 180);
const p4 = rotatePointAboutPoint([0, bottom], [0, 0], endAngle - 180);

//const r = (bottom + top) / 2;
const path = "M" + p1[0] + "," + p1[1] + " L" + p2[0] + "," + p2[1]
+ " A" + top + "," + top + " 0 " + largeArch + " 1 " + p3[0] + "," + p3[1] + " L" + p4[0] + "," + p4[1]
+ " A" + bottom + "," + bottom + " 0 " + largeArch + " 0 " + p1[0] + "," + p1[1] + " Z";
console.log("**", path);
return path;
// return "M0,0 L" + arcStart.x + "," + arcStart.y + " A" + radius + "," +
// radius + " 0 " + largeArch + " 1 " + arcEnd.x + "," + arcEnd.y + " Z";
};

Polymer.prototype.getAnnotationPieSliceApproximatePath = function (startRes, endRes, annotation) {
Expand Down
9 changes: 2 additions & 7 deletions src/js/viz/link/nary-link.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as d3 from "d3"; //used for d3.geom.hull
import {Link} from "./link";
import {svgns} from "../../config";
import {svgns, rotatePointAboutPoint} from "../../config";

//NaryLink.naryColors; // init'ed in clear function of util
NaryLink.orbitNodes = 20;
Expand Down Expand Up @@ -119,12 +119,7 @@ NaryLink.prototype.getMappedCoordinates = function () {

//'orbit' nodes - several nodes around participant positions to give margin
NaryLink.prototype.orbitNodes = function (mapped) {
function rotatePointAboutPoint (p, o, theta) {
theta = (theta / 360) * Math.PI * 2; //TODO: change theta arg to radians not degrees
const rx = Math.cos(theta) * (p[0] - o[0]) - Math.sin(theta) * (p[1] - o[1]) + o[0];
const ry = Math.sin(theta) * (p[0] - o[0]) + Math.cos(theta) * (p[1] - o[1]) + o[1];
return [rx, ry];
}


const orbitNodes = [];
const mc = mapped.length;
Expand Down
2 changes: 1 addition & 1 deletion webpack.dev.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const common = require("./webpack.common.js");

module.exports = merge(common, {
mode: "development",
devtool: "eval-source-map",
devtool: "source-map",
module: {
rules: [
// {
Expand Down

0 comments on commit b1b6c3f

Please sign in to comment.