From ef9953d3557f88525c049718c849636a43e4d94f Mon Sep 17 00:00:00 2001 From: EliotRagueneau Date: Thu, 24 Nov 2022 13:00:28 +0000 Subject: [PATCH] Refactor: Use template string instead of concatenation --- index.html | 2 +- src/js/annotation-utils.js | 4 +- src/js/app.js | 24 ++++---- src/js/clone-complex-interactors.js | 16 +++--- src/js/expand.js | 10 ++-- src/js/read-mijson.js | 30 +++++----- src/js/svgexp.js | 4 +- src/js/viz/interactor/annotation.js | 6 +- src/js/viz/interactor/interactor.js | 16 +++--- src/js/viz/interactor/polymer.js | 26 ++++----- src/js/viz/interactor/protein.js | 4 +- src/js/viz/interactor/rna.js | 2 +- src/js/viz/link/feature-link.js | 88 +++++++++-------------------- src/js/viz/link/nary-link.js | 5 +- src/js/viz/link/unary-link.js | 61 ++++++++++++++------ 15 files changed, 144 insertions(+), 154 deletions(-) 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})` + ); } }