Skip to content

Commit

Permalink
Merge pull request #196 from MICommunity/temp/refactor
Browse files Browse the repository at this point in the history 
Further refactoring + Fix #193
  • Loading branch information
@EliotRagueneau
EliotRagueneau authored Nov 25, 2022
2 parents 2265e73 + 26c9b65 commit 3fda502
Show file tree
Hide file tree
Showing 19 changed files with 221 additions and 8,545 deletions.
8,350 changes: 25 additions & 8,325 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 @@ -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());
Expand Down
4 changes: 2 additions & 2 deletions src/js/annotation-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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") {
Expand All @@ -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") {
Expand Down
118 changes: 51 additions & 67 deletions src/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import * as $ from "jquery";

export class App {
constructor(/*HTMLDivElement*/networkDiv, maxCountInitiallyExpanded = 4) {
// this.debug = true;
this.debug = false;
this.el = networkDiv;
//avoids prob with 'save - web page complete'
this.el.textContent = ""; //https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript
Expand All @@ -29,37 +29,31 @@ export class App {
.append("div").classed("custom-menu", true)
.append("ul");

const self = this;
const collapse = customMenuSel.append("li").classed("collapse", true); //.append("button");
collapse.text("Collapse");
collapse.node().onclick = function (evt) {
self.collapseProtein(evt);
};
collapse.node().onclick = evt => this.collapseProtein(evt);
const scaleButtonsListItemSel = customMenuSel.append("li").text("Scale: ");

const scaleButtons = scaleButtonsListItemSel.selectAll("ul.custom-menu")
.data(App.barScales)
.enter()
.append("div")
.attr("class", "bar-scale")
.append("label");

scaleButtons.append("span")
.text(function (d) {
if (d === 8) return "AA";
else return d;
});
.text(d => d === 8 ? "AA" : d);
scaleButtons.append("input")
// .attr ("id", function(d) { return d*100; })
.attr("class", function (d) {
return "scaleButton scaleButton_" + (d * 100);
})
.attr("class", d => `scaleButton scaleButton_${d * 100}`)
.attr("name", "scaleButtons")
.attr("type", "radio")
.on("change", function (e, d) {
self.preventDefaultsAndStopPropagation(d);
self.contextMenuProt.setStickScale(d, self.contextMenuPoint);
.on("change", (e, d) => {
this.preventDefaultsAndStopPropagation(d);
this.contextMenuProt.setStickScale(d, this.contextMenuPoint);
});
const contextMenu = d3.select(".custom-menu-margin").node();

const self = this;
contextMenu.onmouseout = function (evt) {
let e = evt.relatedTarget;
do {
Expand All @@ -76,13 +70,13 @@ export class App {
this.svgElement.classList.add("complexViewerSVG");

//add listeners
this.svgElement.onmousedown = evt => self.mouseDown(evt);
this.svgElement.onmousemove = evt => self.move(evt);
this.svgElement.onmouseup = evt => self.mouseUp(evt);
this.svgElement.onmouseout = evt => self.mouseOut(evt);
this.svgElement.ontouchstart = evt => self.touchStart(evt);
this.svgElement.ontouchmove = evt => self.move(evt);
this.svgElement.ontouchend = evt => self.mouseUp(evt);
this.svgElement.onmousedown = evt => this.mouseDown(evt);
this.svgElement.onmousemove = evt => this.move(evt);
this.svgElement.onmouseup = evt => this.mouseUp(evt);
this.svgElement.onmouseout = evt => this.mouseOut(evt);
this.svgElement.ontouchstart = evt => this.touchStart(evt);
this.svgElement.ontouchmove = evt => this.move(evt);
this.svgElement.ontouchend = evt => this.mouseUp(evt);
this.lastMouseUp = new Date().getTime();

this.el.oncontextmenu = function (evt) {
Expand All @@ -96,13 +90,9 @@ export class App {

const mouseWheelEvt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"; //FF doesn't recognize mousewheel as of FF3.x
if (document.attachEvent) { //if IE (and Opera depending on user setting)
this.svgElement.attachEvent("on" + mouseWheelEvt, function (evt) {
self.mouseWheel(evt);
});
this.svgElement.attachEvent(`on${mouseWheelEvt}`, evt => this.mouseWheel(evt));
} else if (document.addEventListener) { //WC3 browsers
this.svgElement.addEventListener(mouseWheelEvt, function (evt) {
self.mouseWheel(evt);
}, false);
this.svgElement.addEventListener(mouseWheelEvt, evt => this.mouseWheel(evt), false);
}


Expand Down Expand Up @@ -215,7 +205,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);

Expand Down Expand Up @@ -275,11 +265,7 @@ export class App {
}
}
this.updateAnnotations(); //?
const self = this;
fetchAnnotations(this, function () {
self.updateAnnotations();
});

fetchAnnotations(this, () => this.updateAnnotations());
this.checkLinks();
this.autoLayout();
}
Expand Down Expand Up @@ -315,23 +301,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() {
Expand Down Expand Up @@ -416,10 +402,7 @@ export class App {

participantDebugSel.enter().append("rect")
.classed("node", true)
.attr({
rx: 5,
ry: 5
})
.attr({rx: 5, ry: 5})
.style("stroke", "red")
.style("fill", "none");

Expand Down Expand Up @@ -458,7 +441,7 @@ export class App {
// self.setAllLinkCoordinates();
// self.zoomToExtent();
// })
.on("tick", function () {
.on("tick", () => {
const nodes = self.d3cola.nodes();
for (let node of nodes) {
node.setPositionFromCola(node.x, node.y);
Expand All @@ -483,18 +466,10 @@ export class App {
// });

participantDebugSel.attr({
x: function (d) {
return d.bounds.x;// + (width / 2);
},
y: function (d) {
return d.bounds.y;// + (height / 2);
},
width: function (d) {
return d.bounds.width();
},
height: function (d) {
return d.bounds.height();
}
x: d => d.bounds.x, // + (width / 2);
y: d => d.bounds.y, // + (height / 2);
width: d => d.bounds.width(),
height: d => d.bounds.height()
});
}
});
Expand Down Expand Up @@ -545,7 +520,7 @@ export class App {
}
}

showTooltip(p) {
moveTooltip(p) {
let ttX, ttY;
const length = this.tooltip.getComputedTextLength() + 16;
const width = this.svgElement.parentNode.clientWidth;
Expand All @@ -570,6 +545,8 @@ export class App {
}

setTooltip(text, color) {
if (this.dragStart) return;

if (text) {
this.tooltip.firstChild.data = text.toString().replace(/&(quot);/g, "\"");
this.tooltip.setAttribute("display", "block");
Expand All @@ -594,6 +571,13 @@ export class App {
}
}

showTooltip(p) {
this.moveTooltip(p);
this.tooltip.setAttribute("display", "block");
this.tooltip_bg.setAttribute("display", "block");
this.tooltip_subBg.setAttribute("display", "block");
}

hideTooltip() {
this.tooltip.setAttribute("display", "none");
this.tooltip_bg.setAttribute("display", "none");
Expand Down Expand Up @@ -709,11 +693,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);
Expand Down Expand Up @@ -758,7 +742,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);
Expand Down Expand Up @@ -850,7 +834,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);
}

Expand Down Expand Up @@ -906,7 +890,7 @@ export class App {
}
} else { // !this.dragStart
// console.log("TOOLTIP POSITION!");
this.showTooltip(p);
this.moveTooltip(p);
}
}
}
Expand All @@ -916,15 +900,14 @@ export class App {
this.preventDefaultsAndStopPropagation(evt);
const time = new Date().getTime();
//eliminate some spurious mouse up events - a simple version of debouncing but it seems to work better than for e.g. _.debounce
const p = this.getEventPoint(evt);
if ((time - this.lastMouseUp) > 150) {
if (this.dragElement && this.dragElement.type === "protein" && this.state !== App.STATES.DRAGGING && !this.dragElement.busy) {
if (!this.dragElement.expanded) {
this.dragElement.setExpanded(true);
this.notifyExpandListeners();
} else {
this.contextMenuProt = this.dragElement;

let p = this.getEventPoint(evt);
// if (isNaN(p.x)) { //?
// // alert("isNaN", p);
// // alert(p.x);
Expand All @@ -940,11 +923,12 @@ 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);
}
}
}
this.showTooltip(p);
this.dragElement = null;
this.dragStart = null;//{};// should prob make that null here and use it as a check in move()
this.state = App.STATES.MOUSE_UP;
Expand Down
16 changes: 8 additions & 8 deletions src/js/clone-complex-interactors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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}`;
}

});
Expand All @@ -100,4 +100,4 @@ function findFirstObjWithAttr(collection, attribute, value) {
return collection[i];
}
}
}
}
Loading

0 comments on commit 3fda502

Please sign in to comment.