diff --git a/index.html b/index.html
index 45ae740..7a10b01 100644
--- a/index.html
+++ b/index.html
@@ -170,7 +170,7 @@
function loadData() {
cv.clear();
const dataSetsSelect = document.getElementById("dataSets");
- const path = "./data/" + dataSetsSelect.options[dataSetsSelect.selectedIndex].value + ".json";
+ const path = `./data/${dataSetsSelect.options[dataSetsSelect.selectedIndex].value}.json`;
d3.json(path, function (data) {
cv.readMIJSON(data);
makeLegend(cv.getColorKeyJson());
diff --git a/src/js/annotation-utils.js b/src/js/annotation-utils.js
index cfc881d..3ddc138 100644
--- a/src/js/annotation-utils.js
+++ b/src/js/annotation-utils.js
@@ -34,7 +34,7 @@ export function fetchAnnotations(/*App*/ app, callback) {
}
function getUniProtFeatures(prot, callback) {
- const url = "https://www.ebi.ac.uk/proteins/api/proteins/" + prot.json.identifier.id.trim();
+ const url = `https://www.ebi.ac.uk/proteins/api/proteins/${prot.json.identifier.id.trim()}`;
d3.json(url).then(json => {
let annotations = prot.annotationSets.get("UniprotKB");
if (typeof annotations === "undefined") {
@@ -53,7 +53,7 @@ function getUniProtFeatures(prot, callback) {
function getSuperFamFeatures(prot, callback) {
- const url = "https://supfam.mrc-lmb.cam.ac.uk/SUPERFAMILY/cgi-bin/das/up/features?segment=" + prot.json.identifier.id.trim();
+ const url = `https://supfam.mrc-lmb.cam.ac.uk/SUPERFAMILY/cgi-bin/das/up/features?segment=${prot.json.identifier.id.trim()}`;
d3.xml(url).then(xml => {
let annotations = prot.annotationSets.get("Superfamily");
if (typeof annotations === "undefined") {
diff --git a/src/js/app.js b/src/js/app.js
index 93ece6f..a9fb3c2 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -215,7 +215,7 @@ export class App {
for (let c of d3_chromatic.schemePastel2) {//colorbrewer.Pastel2[8]) {
const hsl = d3.hsl(c);
hsl.l = 0.9;
- complexColors.push(hsl + "");
+ complexColors.push(`${hsl}`);
}
NaryLink.naryColors = scaleOrdinal().range(complexColors);
@@ -315,23 +315,23 @@ export class App {
let x = -bbox.x + (20 / scaleFactor);
//box.y + y = 0
let y = -bbox.y + (20 / scaleFactor);
- this.container.setAttribute("transform", "scale(" + scaleFactor + ") translate(" + x + " " + y + ") ");
+ this.container.setAttribute("transform", `scale(${scaleFactor}) translate(${x} ${y}) `);
this.z = this.container.getCTM().inverse().a;
} else {
//console.log("fit", scaleFactor);
- // this.container.setAttribute("transform", "scale(" + 1 + ") translate(" + -(width/2) + " " + -bbox.y + ")");
+ // this.container.setAttribute("transform", `scale(1) translate(${-(width / 2)} ${-bbox.y})`);
const deltaWidth = width - bbox.width;
const deltaHeight = height - bbox.height;
//bbox.x + x = deltaWidth /2;
let x = (deltaWidth / 2) - bbox.x;
//box.y + y = deltaHeight / 2
let y = (deltaHeight / 2) - bbox.y;
- this.container.setAttribute("transform", "scale(" + 1 + ") translate(" + x + " " + y + ")");
+ this.container.setAttribute("transform", `scale(1) translate(${x} ${y})`);
this.z = 1;
}
//todo - following could be tided up by using acknowledgement bbox or positioning att's of text
- this.acknowledgement.setAttribute("transform", "translate(" + (width - 150) + ", " + (height - 30) + ")");
+ this.acknowledgement.setAttribute("transform", `translate(${width - 150}, ${height - 30})`);
}
autoLayout() {
@@ -709,11 +709,11 @@ export class App {
if (!this.uncertainCategories.has(name)) {
// make transparent version of color
const temp = new Rgb_color(color);
- const transpColor = "rgba(" + temp.r + "," + temp.g + "," + temp.b + ", 0.6)";
- createHatchedFill("hatched_" + anno.description + "_" + color.toString(), transpColor);
+ const transpColor = `rgba(${temp.r},${temp.g},${temp.b}, 0.6)`;
+ createHatchedFill(`hatched_${anno.description}_${color.toString()}`, transpColor);
this.uncertainCategories.add(anno.description);
}
- const checkedFill = "url('#hatched_" + anno.description + "_" + color.toString() + "')";
+ const checkedFill = `url('#hatched_${anno.description}_${color.toString()}')`;
if (anno.fuzzyStart) {
anno.fuzzyStart.setAttribute("fill", checkedFill);
anno.fuzzyStart.setAttribute("stroke", color);
@@ -758,7 +758,7 @@ export class App {
if (this.uncertainCategories.has(desc)) {
// make transparent version of color
const temp = new Rgb_color(this.featureColors(desc));
- const transpColor = "rgba(" + temp.r + "," + temp.g + "," + temp.b + ", 0.6)";
+ const transpColor = `rgba(${temp.r},${temp.g},${temp.b}, 0.6)`;
featureType.uncertain = {"color": transpColor};
}
featureTypes.push(featureType);
@@ -850,7 +850,7 @@ export class App {
}
setCTM(element, matrix) {
- const s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")";
+ const s = `matrix(${matrix.a},${matrix.b},${matrix.c},${matrix.d},${matrix.e},${matrix.f})`;
element.setAttribute("transform", s);
}
@@ -940,8 +940,8 @@ export class App {
pageX = this.dragStart.touches[0].pageX;
pageY = this.dragStart.touches[0].pageY;
}
- menu.style("top", (pageY - 20) + "px").style("left", (pageX - 20) + "px").style("display", "block");
- d3.select(".scaleButton_" + (this.dragElement.stickZoom * 100)).property("checked", true);
+ menu.style("top", `${pageY - 20}px`).style("left", `${pageX - 20}px`).style("display", "block");
+ d3.select(`.scaleButton_${this.dragElement.stickZoom * 100}`).property("checked", true);
}
}
}
diff --git a/src/js/clone-complex-interactors.js b/src/js/clone-complex-interactors.js
index 9ac5222..b5c783a 100644
--- a/src/js/clone-complex-interactors.js
+++ b/src/js/clone-complex-interactors.js
@@ -37,23 +37,23 @@ export function cloneComplexInteractors(json) {
let i = count;
if (i > 1) {
- participantComplex.interactorRef = participantComplex.interactorRef + "_" + i;
+ participantComplex.interactorRef = `${participantComplex.interactorRef}_${i}`;
// update features of complex
if (participantComplex.features) {
participantComplex.features.forEach(function (feature) {
feature.copiedfrom = feature.id;
- // feature.id = feature.id + "_" + i;
+ // feature.id = `${feature.id}_${i}`;
// Also, adjust our sequence data
feature.sequenceData.forEach(function (sequenceData) {
- sequenceData.participantRef = sequenceData.participantRef + "_" + i;
+ sequenceData.participantRef = `${sequenceData.participantRef}_${i}`;
//~ sequenceData.interactorRef = clonedInteractor.id;
});
});
}
const clonedInteractor = JSON.parse(JSON.stringify(foundInteractor));
- clonedInteractor.id = clonedInteractor.id + "_" + i;
+ clonedInteractor.id = `${clonedInteractor.id}_${i}`;
json.data.push(clonedInteractor);
@@ -61,14 +61,14 @@ export function cloneComplexInteractors(json) {
/********** PARTICIPANTS **********/
const clonedParticipant = participant;//JSON.parse(JSON.stringify(participant));
- clonedParticipant.id = clonedParticipant.id + "_" + i;
+ clonedParticipant.id = `${clonedParticipant.id}_${i}`;
// We need to relink to our binding site IDs:
if (clonedParticipant.features) {
clonedParticipant.features.forEach(function (feature) {
// feature.copiedfrom = feature.id;
- feature.id = feature.id + "_" + i;
+ feature.id = `${feature.id}_${i}`;
// Also, adjust our sequence data
feature.sequenceData.forEach(function (sequenceData) {
sequenceData.participantRef = clonedParticipant.id;
@@ -78,7 +78,7 @@ export function cloneComplexInteractors(json) {
const lnCount = feature.linkedFeatures.length;
for (let ln = 0; ln < lnCount; ln++){
// console.log(linkedFeature);
- feature.linkedFeatures[ln] = feature.linkedFeatures[ln] + "_" + i;
+ feature.linkedFeatures[ln] = `${feature.linkedFeatures[ln]}_${i}`;
}
});
@@ -100,4 +100,4 @@ function findFirstObjWithAttr(collection, attribute, value) {
return collection[i];
}
}
-}
\ No newline at end of file
+}
diff --git a/src/js/expand.js b/src/js/expand.js
index 303dcab..aee2d1c 100644
--- a/src/js/expand.js
+++ b/src/js/expand.js
@@ -35,7 +35,7 @@ export function matrix(json) {
const clonedParticipant = JSON.parse(JSON.stringify(participant));
//~ clonedParticipant.interactorRef = clonedInteractor.id;
- clonedParticipant.id = clonedParticipant.id + "_" + i;
+ clonedParticipant.id = `${clonedParticipant.id}_${i}`;
// Store a reference from where we were cloned
clonedParticipant.cloneParentID = participant.id;
@@ -47,7 +47,7 @@ export function matrix(json) {
clonedParticipant.features.forEach(function (feature) {
feature.clonedfrom = feature.id;
- feature.id = feature.id + "_" + i;
+ feature.id = `${feature.id}_${i}`;
// Also, adjust our sequence data
feature.sequenceData.forEach(function (sequenceData) {
@@ -86,7 +86,7 @@ export function matrix(json) {
if (linkedFeatures) {
if (linkedFeatures.indexOf(feature.clonedfrom) > -1) {
const clonedFeature = JSON.parse(JSON.stringify(nFeature));
- clonedFeature.id = nFeature.id + "_" + feature.id;
+ clonedFeature.id = `${nFeature.id}_${feature.id}`;
clonedFeature.linkedFeatures = [];
clonedFeature.linkedFeatures.push(feature.id);
@@ -108,7 +108,7 @@ export function matrix(json) {
});
//actually the expansion code doesn't seem to take up that much time
- //console.log("Expand time:" + ( +new Date() - startTime));
+ // console.log(`Expand time:${+new Date() - startTime}`);
return json;
}
@@ -119,4 +119,4 @@ function findFirstObjWithAttr(collection, attribute, value) {
return collection[i];
}
}
-}
\ No newline at end of file
+}
diff --git a/src/js/read-mijson.js b/src/js/read-mijson.js
index 5e4bb2d..597d6de 100644
--- a/src/js/read-mijson.js
+++ b/src/js/read-mijson.js
@@ -63,7 +63,7 @@ export function readMijson(/*miJson*/miJson, /*App*/ app, expand = true) {
for (let seqData of linkedFeature.sequenceData) {
let nodeId = seqData.interactorRef;
if (expand) {
- nodeId = nodeId + "(" + seqData.participantRef + ")";
+ nodeId = `${nodeId}(${seqData.participantRef})`;
}
let toSequenceData = toSequenceData_indexedByNodeId.get(nodeId);
if (typeof toSequenceData === "undefined") {
@@ -119,7 +119,7 @@ export function readMijson(/*miJson*/miJson, /*App*/ app, expand = true) {
//make mi features into annotations
for (let feature of app.features.values()) {
// add features to interactors/participants/nodes
- //console.log("FEATURE:" + feature.name, feature.sequenceData);
+ // console.log(`FEATURE:${feature.name}`, feature.sequenceData);
let annotName = "";
if (typeof feature.name !== "undefined") {
annotName += feature.name + " ";
@@ -132,7 +132,7 @@ export function readMijson(/*miJson*/miJson, /*App*/ app, expand = true) {
for (let seqDatum of feature.sequenceData) {
let mID = seqDatum.interactorRef;
if (expand) {
- mID = mID + "(" + seqDatum.participantRef + ")";
+ mID = `${mID}(${seqDatum.participantRef})`;
}
// console.log("*", mID, seqDatum);
const molecule = app.participants.get(mID);
@@ -146,7 +146,7 @@ export function readMijson(/*miJson*/miJson, /*App*/ app, expand = true) {
}
miFeatures.push(annotation);
} else {
- console.log("participant " + mID + " not found!");
+ console.log(`participant ${mID} not found!`);
}
}
}
@@ -190,7 +190,7 @@ export function readMijson(/*miJson*/miJson, /*App*/ app, expand = true) {
for (let jsonParticipant of datum.participants) {
const intRef = jsonParticipant.interactorRef;
const partRef = jsonParticipant.id;
- const participantId = intRef + "(" + partRef + ")";
+ const participantId = `${intRef}(${partRef})`;
let participant = app.participants.get(participantId);
if (typeof participant === "undefined") {
const interactor = app.interactors.get(intRef);
@@ -301,7 +301,7 @@ export function readMijson(/*miJson*/miJson, /*App*/ app, expand = true) {
} else {
// MI:0329 - unknown participant ?
// MI:0383 - biopolymer ?
- alert("Unrecognised type:" + interactor.type.name);
+ alert(`Unrecognised type:${interactor.type.name}`);
}
return participant;
}
@@ -414,7 +414,7 @@ export function readMijson(/*miJson*/miJson, /*App*/ app, expand = true) {
for (let pi = 0; pi < participantCount; pi++) {
let pID = jsonParticipants[pi].interactorRef;
if (expand) {
- pID = pID + "(" + jsonParticipants[pi].id + ")";
+ pID = `${pID}(${jsonParticipants[pi].id})`;
}
pIDs.add(pID);
}
@@ -425,7 +425,7 @@ export function readMijson(/*miJson*/miJson, /*App*/ app, expand = true) {
function getNode(seqDatum) {
let id = seqDatum.interactorRef;
if (expand) {
- id = id + "(" + seqDatum.participantRef + ")";
+ id = `${id}(${seqDatum.participantRef})`;
}
return app.participants.get(id);
}
@@ -438,9 +438,9 @@ export function readMijson(/*miJson*/miJson, /*App*/ app, expand = true) {
const seq = seqData[s];
let id = seq.interactorRef;
if (expand) {
- id = id + "(" + seq.participantRef + ")";
+ id = `${id}(${seq.participantRef})`;
}
- id = id + ":" + seq.pos;
+ id = `${id}:${seq.pos}`;
nodeIds.add(id);
}
//sort ids
@@ -452,10 +452,10 @@ export function readMijson(/*miJson*/miJson, /*App*/ app, expand = true) {
const end = seqDataToString(toSeqData);
let seqLinkId;//, endsSwapped;
if (start < end) {
- seqLinkId = start + "><" + end;
+ seqLinkId = `${start}><${end}`;
//endsSwapped = false;
} else {
- seqLinkId = end + "><" + start;
+ seqLinkId = `${end}><${start}`;
//endsSwapped = true;
}
let sequenceLink = app.allSequenceLinks.get(seqLinkId);
@@ -484,7 +484,7 @@ export function readMijson(/*miJson*/miJson, /*App*/ app, expand = true) {
}
function getUnaryLink(interactor, interaction) {
- const linkID = "-" + interactor.id + "-" + interactor.id;
+ const linkID = `-${interactor.id}-${interactor.id}`;
let link = app.allUnaryLinks.get(linkID);
if (typeof link === "undefined") {
link = new UnaryLink(linkID, app, interactor);
@@ -503,11 +503,11 @@ export function readMijson(/*miJson*/miJson, /*App*/ app, expand = true) {
// these links are undirected and should have same ID regardless of which way round
// source and target are
if (sourceInteractor.id < targetInteractor.id) {
- linkID = "-" + sourceInteractor.id + "-" + targetInteractor.id;
+ linkID = `-${sourceInteractor.id}-${targetInteractor.id}`;
fi = sourceInteractor;
ti = targetInteractor;
} else {
- linkID = "-" + targetInteractor.id + "-" + sourceInteractor.id;
+ linkID = `-${targetInteractor.id}-${sourceInteractor.id}`;
fi = targetInteractor;
ti = sourceInteractor;
}
diff --git a/src/js/svgexp.js b/src/js/svgexp.js
index 8ca2827..530be6b 100644
--- a/src/js/svgexp.js
+++ b/src/js/svgexp.js
@@ -127,7 +127,7 @@ export const svgUtils = {
for (var i = 0; i < style.length; i++) {
var styleName = style[i];
var propVal = style.getPropertyValue(styleName);
- cssText += styleName + ": " + propVal + "; ";
+ cssText += `${styleName}: ${propVal}; `;
}
return cssText;
@@ -265,4 +265,4 @@ export const svgUtils = {
// saveAs(blob, "saved"+i+".svg");
// });
// },
-};
\ No newline at end of file
+};
diff --git a/src/js/viz/interactor/annotation.js b/src/js/viz/interactor/annotation.js
index 7472d38..38c17be 100644
--- a/src/js/viz/interactor/annotation.js
+++ b/src/js/viz/interactor/annotation.js
@@ -6,8 +6,6 @@ export class Annotation {
}
toString() {
- return this.description + " ["
- + (this.seqDatum ? this.seqDatum.toString() : this.seqDatum.begin + " - " + this.seqDatum.end)
- + "]";
+ return `${this.description} [${this.seqDatum ? this.seqDatum.toString() : `${this.seqDatum.begin} - ${this.seqDatum.end}`}]`;
}
-}
\ No newline at end of file
+}
diff --git a/src/js/viz/interactor/interactor.js b/src/js/viz/interactor/interactor.js
index b022ed1..3f338ef 100644
--- a/src/js/viz/interactor/interactor.js
+++ b/src/js/viz/interactor/interactor.js
@@ -57,13 +57,13 @@ export class Interactor {
this.labelText = this.id;
}
if (this.labelText.length > 25) {
- this.labelText = this.labelText.substr(0, 16) + "...";
+ this.labelText = `${this.labelText.substr(0, 16)}...`;
}
this.labelText = this.name;
this.labelTextNode = document.createTextNode(this.labelText);
this.labelSVG.appendChild(this.labelTextNode);
this.labelSVG.setAttribute("transform",
- "translate( -" + this.getSymbolRadius() + " " + this.labelY + ")");
+ `translate( -${this.getSymbolRadius()} ${this.labelY})`);
this.upperGroup.appendChild(this.labelSVG);
}
@@ -94,7 +94,7 @@ export class Interactor {
addStoichiometryLabel(stoichiometry) {
if (this.labelSVG) { //complexes don't have labels (yet?)
// noinspection JSUndefinedPropertyAssignment
- this.labelSVG.childNodes[0].data = this.labelSVG.childNodes[0].data + " [" + stoichiometry + "]";
+ this.labelSVG.childNodes[0].data = `${this.labelSVG.childNodes[0].data} [${stoichiometry}]`;
}
}
@@ -164,7 +164,7 @@ export class Interactor {
setPosition(x, y) {
this.ix = x;
this.iy = y;
- this.upperGroup.setAttribute("transform", "translate(" + this.ix + " " + this.iy + ")");
+ this.upperGroup.setAttribute("transform", `translate(${this.ix} ${this.iy})`);
}
changePosition(x, y) {
@@ -172,7 +172,7 @@ export class Interactor {
// this.py = this.iy;
this.ix -= x;
this.iy -= y;
- this.upperGroup.setAttribute("transform", "translate(" + this.ix + " " + this.iy + ")");
+ this.upperGroup.setAttribute("transform", `translate(${this.ix} ${this.iy})`);
// this.setAllLinkCoordinates(); // todo - look at calls
}
@@ -184,9 +184,9 @@ export class Interactor {
const cp1 = trig(intraR, 40 + sectorSize);
const cp2 = trig(intraR, -40 + sectorSize);
return "M 0,0 " +
- "Q " + cp1.x + "," + -cp1.y + " " + arcStart.x + "," + -arcStart.y +
- " A " + intraR + " " + intraR + " 0 0 1 " + arcEnd.x + "," + -arcEnd.y +
- " Q " + cp2.x + "," + -cp2.y + " 0,0";
+ `Q ${cp1.x},${-cp1.y} ${arcStart.x},${-arcStart.y} ` +
+ `A ${intraR} ${intraR} 0 0 1 ${arcEnd.x},${-arcEnd.y} ` +
+ `Q ${cp2.x},${-cp2.y} 0,0`;
}
checkLinks() {
diff --git a/src/js/viz/interactor/polymer.js b/src/js/viz/interactor/polymer.js
index 93f3558..7e2f165 100644
--- a/src/js/viz/interactor/polymer.js
+++ b/src/js/viz/interactor/polymer.js
@@ -95,7 +95,7 @@ export class Polymer extends Interactor {
}
if (this.stickZoom >= 8) {
const seqLabelGroup = document.createElementNS(svgns, "g");
- seqLabelGroup.setAttribute("transform", "translate(" + this.getResXWithStickZoom(res) + " " + 0 + ")");
+ seqLabelGroup.setAttribute("transform", `translate(${this.getResXWithStickZoom(res)} 0)`);
const seqLabel = document.createElementNS(svgns, "text");
seqLabel.classList.add("label", "sequence");
@@ -128,7 +128,7 @@ export class Polymer extends Interactor {
function scaleLabelAt(self, text, tickX) {
const scaleLabelGroup = document.createElementNS(svgns, "g");
- scaleLabelGroup.setAttribute("transform", "translate(" + tickX + " " + 0 + ")");
+ scaleLabelGroup.setAttribute("transform", `translate(${tickX} 0)`);
const scaleLabel = document.createElementNS(svgns, "text");
scaleLabel.classList.add("label", "scale-label");
scaleLabel.setAttribute("x", "0");
@@ -661,33 +661,33 @@ export class Polymer extends Interactor {
const p4 = rotatePointAboutPoint([0, bottom], [0, 0], endAngle - 180);
//'left' edge
- let path = "M" + p1[0] + "," + p1[1] + " L" + p2[0] + "," + p2[1];
+ let path = `M${p1[0]},${p1[1]} L${p2[0]},${p2[1]}`;
//top edge
if (arc) {
- path += " A" + top + "," + top + " 0 " + largeArch + " 1 " + p3[0] + "," + p3[1];
+ path += ` A${top},${top} 0 ${largeArch} 1 ${p3[0]},${p3[1]}`;
} else {
- //path += " L" + p3[0] + "," + p3[1];
+ // path += ` L${p3[0]},${p3[1]}`;
for (let sia = 0; sia <= Polymer.stepsInArc; sia++) {
const angle = startAngle + ((endAngle - startAngle) / Polymer.stepsInArc) * sia;
const p = rotatePointAboutPoint([0, top], [0, 0], angle - 180);
- path += " L" + p[0] + "," + p[1];
+ path += ` L${p[0]},${p[1]}`;
}
}
//bottom edge
if (arc) {
//'right' edge
- path += " L" + p4[0] + "," + p4[1];
+ path += ` L${p4[0]},${p4[1]}`;
//bottom edge
- path += " A" + bottom + "," + bottom + " 0 " + largeArch + " 0 " + p1[0] + "," + p1[1];
+ path += ` A${bottom},${bottom} 0 ${largeArch} 0 ${p1[0]},${p1[1]}`;
} else {
- // path += " L" + p1[0] + "," + p1[1];
+ // path += ` L${p1[0]},${p1[1]}`;
//bottom edge
for (let sia = Polymer.stepsInArc; sia >= 0; sia--) {
const angle = startAngle + ((endAngle - startAngle) / Polymer.stepsInArc) * sia;
const p = rotatePointAboutPoint([0, bottom], [0, 0], angle - 180);
- path += " L" + p[0] + "," + p[1];
+ path += ` L${p[0]},${p[1]}`;
}
}
@@ -718,17 +718,17 @@ export class Polymer extends Interactor {
const bottom = top + rungHeight;
//'left' edge
- let path = "M" + annoX + "," + bottom + " L" + annoX + "," + top;
+ let path = `M${annoX},${bottom} L${annoX},${top}`;
//top edge
for (let sia = 0; sia <= Polymer.stepsInArc; sia++) {
const step = annoX + (annoLength * (sia / Polymer.stepsInArc));
- path += " L " + step + "," + top;
+ path += ` L ${step},${top}`;
}
//'right' edge - no need
// bottom edge
for (let sia = Polymer.stepsInArc; sia >= 0; sia--) {
const step = annoX + (annoLength * (sia / Polymer.stepsInArc));
- path += " L " + step + "," + bottom;
+ path += ` L ${step},${bottom}`;
}
//close
path += " Z";
diff --git a/src/js/viz/interactor/protein.js b/src/js/viz/interactor/protein.js
index 8a0dcc0..275db0c 100644
--- a/src/js/viz/interactor/protein.js
+++ b/src/js/viz/interactor/protein.js
@@ -70,7 +70,7 @@ export class Protein extends Polymer {
this.highlight.setAttribute("ry", r + 2.5);
this.highlight.setAttribute("stroke-opacity", "0");
- this.labelSVG.setAttribute("transform", "translate(" + (-(r + 5)) + "," + "-5)");
+ this.labelSVG.setAttribute("transform", `translate(${-(r + 5)},-5)`);
this.initListeners();
@@ -94,7 +94,7 @@ export class Protein extends Polymer {
//annotations indexed by annotation set name ("MI Features", "Superfamily", etc)
//this.annotationSets // = new Map(); is declared in Interactor, other types of interactor can have features from MIJSON
- this.annotationSets.set("Interactor", [new Annotation(this.json.label, new SequenceDatum(null, 1 + "-" + this.size))]);
+ this.annotationSets.set("Interactor", [new Annotation(this.json.label, new SequenceDatum(null, `1-${this.size}`))]);
}
}
diff --git a/src/js/viz/interactor/rna.js b/src/js/viz/interactor/rna.js
index db0c98f..cdaec28 100644
--- a/src/js/viz/interactor/rna.js
+++ b/src/js/viz/interactor/rna.js
@@ -17,7 +17,7 @@ export class RNA extends Interactor {
/*
RNA.prototype.showData = function(evt) {
- const url = "http://rnacentral.org/rna/" + this.json.identifier.id;
+ const url = `http://rnacentral.org/rna/${this.json.identifier.id}`;
window.open(url, '_blank');
}
*/
diff --git a/src/js/viz/link/feature-link.js b/src/js/viz/link/feature-link.js
index 826bfa9..9443eb0 100644
--- a/src/js/viz/link/feature-link.js
+++ b/src/js/viz/link/feature-link.js
@@ -5,66 +5,38 @@ import {svgns} from "../../svgns";
export class FeatureLink extends Link {
constructor(id, fromFeatPos, toFeatPos, app) {
- super();
- this.init(id, fromFeatPos, toFeatPos, app);
- }
-
- init(id, fromFeatPos, toFeatPos, app) {
- this.id = id;
- this.app = app;
+ super(id, app);
this.fromSequenceData = fromFeatPos;
this.toSequenceData = toFeatPos;
-
this.participants = [this.fromSequenceData[0].participant, this.toSequenceData[0].participant]; //*
// *potentially, this over simplifies the situation,
// but there is a workaround in way ReadMiJson init's links so OK for now
+ }
- this.glyph = document.createElementNS(svgns, "path");
- this.uncertainGlyph = document.createElementNS(svgns, "path");
- this.glyph.classList.add("link", "feature-link", "certain-link");
- this.uncertainGlyph.classList.add("link", "feature-link", "uncertain-link");
-
- //set the events for it
- const self = this;
- this.uncertainGlyph.onmousedown = function (evt) {
- self.mouseDown(evt);
- };
- this.uncertainGlyph.onmouseover = function (evt) {
- self.mouseOver(evt);
- };
- this.uncertainGlyph.onmouseout = function (evt) {
- self.mouseOut(evt);
- };
- this.glyph.onmousedown = function (evt) {
- self.mouseDown(evt);
- };
- this.glyph.onmouseover = function (evt) {
- self.mouseOver(evt);
- };
- this.glyph.onmouseout = function (evt) {
- self.mouseOut(evt);
- };
- // this.highlightGlyph.onmousedown = function (evt) {
- // self.mouseDown(evt);
- // };
- // this.highlightGlyph.onmouseover = function (evt) {
- // self.mouseOver(evt);
- // };
- // this.highlightGlyph.onmouseout = function (evt) {
- // self.mouseOut(evt);
- // };
+ get glyph() {
+ if (!this._glyph) {
+ this._glyph = document.createElementNS(svgns, "path");
+ this._glyph.classList.add("link", "feature-link", "certain-link");
+ this._glyph.onmousedown = evt => this.mouseDown(evt);
+ this._glyph.onmouseover = evt => this.mouseOver(evt);
+ this._glyph.onmouseout = evt => this.mouseOut(evt);
+ }
+ return this._glyph;
}
-//andAlternatives means highlight alternative links in case of site ambiguity
-// FeatureLink.prototype.showHighlight = function (show) {
-// if (show) {
-// this.highlightGlyph.setAttribute("stroke-opacity", "1");
-// } else {
-// this.highlightGlyph.setAttribute("stroke-opacity", "0");
-// }
-// };
+ get uncertainGlyph() {
+ if (!this._uncertainGlyph) {
+ this._uncertainGlyph = document.createElementNS(svgns, "path");
+ this._uncertainGlyph.classList.add("link", "feature-link", "uncertain-link");
+ const self = this;
+ this._uncertainGlyph.onmousedown = evt => self.mouseDown(evt);
+ this._uncertainGlyph.onmouseover = evt => self.mouseOver(evt);
+ this._uncertainGlyph.onmouseout = evt => self.mouseOut(evt);
+ }
+ return this._uncertainGlyph;
+ }
-//used when filter changed
+ //used when filter changed
check() {
if (this.anyParticipantIsBar() === true) {
this.show();
@@ -119,9 +91,9 @@ export class FeatureLink extends Link {
startPoint = participant.getResidueCoordinates(startRes, yOffset);
endPoint = participant.getResidueCoordinates(endRes, yOffset);
}
- return " Q" + controlPoint[0] + "," + controlPoint[1] + " " + startPoint[0] + "," + startPoint[1] +
- " L" + endPoint[0] + "," + endPoint[1] +
- " Q" + controlPoint[0] + "," + controlPoint[1] + " " + midPoint[0] + "," + midPoint[1];
+ return ` Q${controlPoint[0]},${controlPoint[1]} ${startPoint[0]},${startPoint[1]} ` +
+ `L${endPoint[0]},${endPoint[1]} ` +
+ `Q${controlPoint[0]},${controlPoint[1]} ${midPoint[0]},${midPoint[1]} `;
}
function sequenceDataMidPoint(sequenceData, participant) {
@@ -248,8 +220,8 @@ export class FeatureLink extends Link {
const fSDCount = this.fromSequenceData.length;
const tSDCount = this.toSequenceData.length;
let seqDatum;//, highlightStartRes, highlightEndRes;
- let glyphPath = "M" + triPointMid[0] + "," + triPointMid[1];
- let uncertainGlyphPath = "M" + triPointMid[0] + "," + triPointMid[1];
+ let glyphPath = `M${triPointMid[0]},${triPointMid[1]}`;
+ let uncertainGlyphPath = `M${triPointMid[0]},${triPointMid[1]}`;
// let highlightGlyphPath = "M" + triPointMid[0] + "," + triPointMid[1];
for (let f = 0; f < fSDCount; f++) {
seqDatum = this.fromSequenceData[f];
@@ -292,10 +264,6 @@ export class FeatureLink extends Link {
// highlightStartRes, highlightEndRes, toParticipant, tyOffset);
}
- if (!this.glyph) {
- this.initSVG();
- }
-
this.glyph.setAttribute("d", glyphPath);
this.uncertainGlyph.setAttribute("d", uncertainGlyphPath);
// this.highlightGlyph.setAttribute("d", highlightGlyphPath);
diff --git a/src/js/viz/link/nary-link.js b/src/js/viz/link/nary-link.js
index 911d351..f68fcbc 100644
--- a/src/js/viz/link/nary-link.js
+++ b/src/js/viz/link/nary-link.js
@@ -2,7 +2,6 @@
import {polygonHull} from "d3-polygon";
import {Link} from "./link";
import {rotatePointAboutPoint} from "../../geom";
-import {svgns} from "../../svgns";
export class NaryLink extends Link {
constructor(id, app) {
@@ -90,8 +89,8 @@ export class NaryLink extends Link {
// Uses d3.geom.hull to calculate a bounding path around an array of vertices
const calculateHullPath = function (values) {
const hullPath = polygonHull(values);
- self.hull = hullPath; //hack?
- return "M" + hullPath.join("L") + "Z";
+ this.hull = hullPath;
+ return `M${hullPath.join("L")}Z`;
};
const self = this; // TODO: - tidy hack above?
this.mapped = this.orbitNodes(this.getMappedCoordinates());
diff --git a/src/js/viz/link/unary-link.js b/src/js/viz/link/unary-link.js
index 899c36d..183656e 100644
--- a/src/js/viz/link/unary-link.js
+++ b/src/js/viz/link/unary-link.js
@@ -1,20 +1,36 @@
//todo - is this even working? you never see it
import {Link} from "./link";
-import {svgns} from "../../svgns";
-
-// var FeatureLink = require('./FeatureLink');
export class UnaryLink extends Link {
constructor(id, app, participant) {
- super();
- this.id = id;
+ super(id, app);
this.participants = [participant];
- this.sequenceLinks = new Map();
- this.app = app;
- this.line = document.createElementNS(svgns, "path");
- this.highlightLine = document.createElementNS(svgns, "path");
- this.initSVG();
+ participant.selfLink = this;
+ }
+
+ get line (){
+ if (!this._line) {
+ this._line = document.createElementNS("http://www.w3.org/2000/svg", "path");
+ this._line.classList.add("link", "link-line");//, "certain-link");
+ const self = this;
+ this._line.onmousedown = evt => self.mouseDown(evt);
+ this._line.onmouseover = evt => self.mouseOver(evt);
+ this._line.onmouseout = evt => self.mouseOut(evt);
+ }
+ return this._line;
+ }
+
+ get highlightLine (){
+ if (!this._highlightLine) {
+ this._highlightLine = document.createElementNS("http://www.w3.org/2000/svg", "path");
+ this._highlightLine.classList.add("link", "highlight", "link-highlight");
+ const self = this;
+ this._highlightLine.onmousedown = evt => self.mouseDown(evt);
+ this._highlightLine.onmouseover = evt => self.mouseOver(evt);
+ this._highlightLine.onmouseout = evt => self.mouseOut(evt);
+ }
+ return this._highlightLine;
}
initSelfLinkSVG () {
@@ -34,19 +50,28 @@ export class UnaryLink extends Link {
}
show() {
- this.line.setAttribute("transform", "translate(" + this.participants[0].ix +
- " " + this.participants[0].iy + ")" + " scale(" + (this.app.z) + ")");
- this.highlightLine.setAttribute("transform", "translate(" + this.participants[0].ix +
- " " + this.participants[0].iy + ")" + " scale(" + (this.app.z) + ")");
+ this.initSelfLinkSVG();
+ this.line.setAttribute(
+ "transform",
+ `translate(${this.participants[0].ix} ${this.participants[0].iy}) scale(${this.app.z})`
+ );
+ this.highlightLine.setAttribute(
+ "transform",
+ `translate(${this.participants[0].ix} ${this.participants[0].iy}) scale(${this.app.z})`
+ );
this.app.highlights.appendChild(this.highlightLine);
this.app.p_pLinks.appendChild(this.line);
}
setLinkCoordinates() {
const participant = this.participants[0];
- this.line.setAttribute("transform", "translate(" + participant.ix +
- " " + participant.iy + ")" + " scale(" + (this.app.z) + ")");
- this.highlightLine.setAttribute("transform", "translate(" + participant.ix +
- " " + participant.iy + ")" + " scale(" + (this.app.z) + ")");
+ this.line.setAttribute(
+ "transform",
+ `translate(${participant.ix} ${participant.iy}) scale(${this.app.z})`
+ );
+ this.highlightLine.setAttribute(
+ "transform",
+ `translate(${participant.ix} ${participant.iy}) scale(${this.app.z})`
+ );
}
}