Refactor: Use template string instead of concatenation

colin-combe · Nov 24, 2022 · ef9953d · ef9953d
1 parent 0d5635f
commit ef9953d
Show file tree

Hide file tree

Showing 15 changed files with 144 additions and 154 deletions.
diff --git 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
@@ -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
@@ -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
@@ -37,38 +37,38 @@ 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);
 
                     for (let participant of clonedInteractor.participants) {
                         /********** 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];
         }
     }
-}
+}
diff --git 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];
         }
     }
-}
+}
diff --git 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
@@ -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");
     //     });
     // },
-};
+};
diff --git 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}`}]`;
     }
-}
+}