Skip to content

Commit

Permalink
proteins stay centred in same place when changing bar scale
Browse files Browse the repository at this point in the history
  • Loading branch information
@colin-combe
colin-combe committed Aug 19, 2021
1 parent 29193b0 commit aad6b00
Show file tree
Hide file tree
Showing 6 changed files with 116 additions and 1,562 deletions.
22 changes: 11 additions & 11 deletions data/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,17 +38,17 @@ const exampleIndex = [
{
"ac": "EBI-25816865",
"name": "EBI-25816865",
"url": "http://www.ebi.ac.uk/intact/complex/details/EBI-25816865",
"url": "https://www.ebi.ac.uk/intact/complex/details/EBI-25816865",
},
{
"ac": "EBI-25570228",
"name": "EBI-25570228",
"url": "http://www.ebi.ac.uk/intact/complex/details/EBI-25570228",
"url": "https://www.ebi.ac.uk/intact/complex/details/EBI-25570228",
},
{
"ac": "~EBI-6884640",
"name": "~EBI-6884640",
"url": "http://www.ebi.ac.uk/intact/complex/details/EBI-6884640",
"url": "https://www.ebi.ac.uk/intact/complex/details/EBI-6884640",
},
{
"ac": "CPX-1920",
Expand All @@ -58,7 +58,7 @@ const exampleIndex = [
{
"ac": "EBI-9008420",
"name": "Hemoglobin HbA complex",
"url": "http://www.ebi.ac.uk/intact/complex/details/EBI-9008420",
"url": "https://www.ebi.ac.uk/intact/complex/details/EBI-9008420",
},
{
"ac": "EBI-4371590",
Expand Down Expand Up @@ -121,37 +121,37 @@ const exampleIndex = [
{
"ac": "EBI-1202920",
"name": "PCNA homotrimer",
"url": "http://www.ebi.ac.uk/intact/complex/details/EBI-1202920",
"url": "https://www.ebi.ac.uk/intact/complex/details/EBI-1202920",
},
{
"ac": "EBI-6554207",
"name": "DnaB helicase complex",
"url": "http://www.ebi.ac.uk/intact/complex/details/EBI-6554207",
"url": "https://www.ebi.ac.uk/intact/complex/details/EBI-6554207",
},
{
"ac": "EBI-8869931",
"name": "IscS-TusA complex",
"url": "http://www.ebi.ac.uk/intact/complex/details/EBI-8869931",
"url": "https://www.ebi.ac.uk/intact/complex/details/EBI-8869931",
},
{
"ac": "EBI-9008283",
"name": "Chaperonin-containing T-complex",
"url": "http://www.ebi.ac.uk/intact/complex/details/EBI-9008283",
"url": "https://www.ebi.ac.uk/intact/complex/details/EBI-9008283",
},
{
"ac": "EBI-9696567",
"name": "Core mediator complex",
"url": "http://www.ebi.ac.uk/intact/complex/details/EBI-9696567",
"url": "https://www.ebi.ac.uk/intact/complex/details/EBI-9696567",
},
{
"ac": "EBI-9997373",
"name": "Telomerase holoenzyme complex",
"url": "http://www.ebi.ac.uk/intact/complex/details/EBI-9997373",
"url": "https://www.ebi.ac.uk/intact/complex/details/EBI-9997373",
},
{
"ac": "EBI-10828997",
"name": "GLI3-SUFU complex",
"url": "http://www.ebi.ac.uk/intact/complex/details/EBI-10828997",
"url": "https://www.ebi.ac.uk/intact/complex/details/EBI-10828997",
},
{
"ac": "CPX-1599",
Expand Down
1,497 changes: 25 additions & 1,472 deletions dist/complexviewer.js
View file

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,15 +123,15 @@
</div> <!-- centreDiv -->

<div class="logo-bar space-between">
<a class="logo" href="http://rappsilberlab.org/" target="_blank"><img src="images/logos/rappsilber-logo.png"
<a class="logo" href="https://rappsilberlab.org/" target="_blank"><img src="images/logos/rappsilber-logo.png"
alt="Rappsilber Laboratory"></a>
<a class="logo" href="http://www.ed.ac.uk/" target="_blank"><img src="./images/logos/eduni.jpeg"
<a class="logo" href="https://www.ed.ac.uk/" target="_blank"><img src="./images/logos/eduni.jpeg"
alt="Edinburgh University"></a>
<a class="logo" href="http://www.wcb.ed.ac.uk/" target="_blank"><img src="images/logos/wtccb.png"
<a class="logo" href="https://www.wcb.ed.ac.uk/" target="_blank"><img src="images/logos/wtccb.png"
alt="Wellcome Trust Centre for Cell Biology"></a>
<a class="logo" href="http://www.ebi.ac.uk/" target="_blank"><img src="images/logos/ebi-logo.jpeg"
<a class="logo" href="https://www.ebi.ac.uk/" target="_blank"><img src="images/logos/ebi-logo.jpeg"
alt="European Bioinformatics Institute"></a>
<a class="logo" href="http://intermine.org/" target="_blank"><img src="./images/logos/intermine.png"
<a class="logo" href="https://intermine.org/" target="_blank"><img src="./images/logos/intermine.png"
alt="Intermine"></a>
<a class="logo" href="https://www.cam.ac.uk/" target="_blank"><img src="./images/logos/cambridge-blue.png"
alt="Cambridge University"></a>
Expand Down
104 changes: 60 additions & 44 deletions src/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export class App {
.attr("type", "radio")
.on("change", function (d) {
self.preventDefaultsAndStopPropagation(d);
self.contextMenuProt.setStickScale(d, self.contextMenuPoint);
self.contextMenuProt.setStickScale(d, self.contextMenuResNo, self.contextMenuPoint);
});
const contextMenu = d3.select(".custom-menu-margin").node();
contextMenu.onmouseout = function (evt) {
Expand Down Expand Up @@ -136,7 +136,7 @@ export class App {
this.acknowledgement = document.createElementNS(svgns, "g");
const ackText = document.createElementNS(svgns, "text");
ackText.innerHTML = "<a href='https://academic.oup.com/bioinformatics/article/33/22/3673/4061280' target='_blank'><tspan x='0' dy='1.2em' style='text-decoration: underline'>ComplexViewer "
+ version + "</tspan></a><tspan x='0' dy='1.2em'>by <a href='http://rappsilberlab.org/' target='_blank'>Rappsilber Laboratory</a></tspan>";
+ version + "</tspan></a><tspan x='0' dy='1.2em'>by <a href='https://rappsilberlab.org/' target='_blank'>Rappsilber Laboratory</a></tspan>";

this.acknowledgement.appendChild(ackText);
ackText.setAttribute("font-size", "8pt");
Expand Down Expand Up @@ -285,7 +285,7 @@ export class App {
// participant.initSelfLinkSVG(); // todo - may not even do anything, not sure its working
participant.stickZoom = this.defaultBarScale;
if (this.participants.size < this.maxCountInitiallyExpanded) {
participant.toStickNoTransition();
participant.toStick(false);//param means don't animate change to circle
}
}
}
Expand Down Expand Up @@ -412,22 +412,22 @@ export class App {

self.d3cola.nodes(nodes).links(links);

/*let groupDebugSel, participantDebugSel;
let groupDebugSel, participantDebugSel;
if (self.debug) {
groupDebugSel = d3.select(self.container).selectAll(".group")
.data(groups);
groupDebugSel.enter().append("rect")
.classed("group", true)
.attr({
rx: 5,
ry: 5
})
.style("stroke", "blue")
.style("fill", "none");
// groupDebugSel = d3.select(self.container).selectAll(".group")
// .data(groups);
//
// groupDebugSel.enter().append("rect")
// .classed("group", true)
// .attr({
// rx: 5,
// ry: 5
// })
// .style("stroke", "blue")
// .style("fill", "none");
//
participantDebugSel = d3.select(self.container).selectAll(".node")
.data(layoutObj.nodes);
.data(nodes);

participantDebugSel.enter().append("rect")
.classed("node", true)
Expand All @@ -438,9 +438,9 @@ export class App {
.style("stroke", "red")
.style("fill", "none");

groupDebugSel.exit().remove();
// groupDebugSel.exit().remove();
participantDebugSel.exit().remove();
}*/
}

if (preRun) {
self.d3cola.groups([]).start(23, 10, 0, 0, false);
Expand Down Expand Up @@ -481,21 +481,21 @@ export class App {
self.setAllLinkCoordinates();
self.zoomToExtent();

/*if (self.debug) {
groupDebugSel.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();
}
});
if (self.debug) {
// groupDebugSel.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();
// }
// });

participantDebugSel.attr({
x: function (d) {
Expand All @@ -511,7 +511,7 @@ export class App {
return d.bounds.height();
}
});
}*/
}
});
}
}
Expand Down Expand Up @@ -771,7 +771,7 @@ export class App {
collapseAll() {
for (let participant of this.participants.values()) {
if (participant.expanded) {
participant.toCircleNoTransition();//.setExpanded(0);
participant.toCircle(false);//param means don't animate change to circle
}
}
this.autoLayout();
Expand All @@ -781,7 +781,7 @@ export class App {
expandAll() {
for (let participant of this.participants.values()) {
if (participant.type === "protein" && !participant.expanded) {
participant.toStickNoTransition();//setExpanded(1);
participant.toStick(false);//param means don't animate change to circle
}
}
this.autoLayout();
Expand Down Expand Up @@ -917,12 +917,28 @@ export class App {
this.notifyExpandListeners();
} else {
this.contextMenuProt = this.dragElement;

let p = this.getEventPoint(evt);
if (isNaN(p.x)) { //?
alert(p.x);
p = this.getEventPoint(this.dragStart);
}
this.contextMenuPoint = p.matrixTransform(this.container.getCTM().inverse());
// if (isNaN(p.x)) { //?
// alert("isNaN", p);
// alert(p.x);
// p = this.getEventPoint(this.dragStart);
// }
// this.contextMenuPoint = p.matrixTransform(this.container.getCTM().inverse());
//

/*
let xOffset = (this.width / 2 - (this.getSymbolRadius()));
if (this.expanded) {
xOffset = xOffset - (this.size / 2 * this.stickZoom);
}
*/

// this.contextMenuResNo = ((p.x - this.dragElement.ix) / (this.z * this.dragElement.stickZoom ))
// + (this.dragElement.size / 2);//+
// console.log(this.contextMenuResNo);


const menu = d3.select(".custom-menu-margin");
let pageX, pageY;
if (evt.pageX) {
Expand Down Expand Up @@ -964,7 +980,7 @@ export class App {
return false;
}

mouseOut(evt) {
mouseOut() {
this.hideTooltip();
// don't, causes prob's - RenderedInteractor mouseOut getting propogated?
// d3.select(".custom-menu-margin").style("display", "none");
Expand Down Expand Up @@ -1070,4 +1086,4 @@ App.STATES = {
DRAGGING: 2 //set by mouse down on Protein or Link
};

App.barScales = [0.01, 0.015, 0.2, 1, 2, 4, 8];
App.barScales = [0.01, /*0.015,*/ 0.2, 1, 2, 4, 8];
2 changes: 1 addition & 1 deletion src/js/viz/interactor/complex.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export class Complex extends Interactor {
}

setPosition () {
console.error("bad - called setPosition on ", this);
console.error("error - called setPosition on ", this);
}

changePosition (dx, dy) {
Expand Down
43 changes: 14 additions & 29 deletions src/js/viz/interactor/polymer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,32 +20,26 @@ export class Polymer extends Interactor {
this.highlight.setAttribute("stroke-opacity", show ? "1" : "0");
}

setStickScale(scale, svgP) {
const oldScale = this.stickZoom;
setStickScale(scale, residuePos, svgP) { // scale to @scale, leaving residue number @residuePos at position @svgP

//dist from centre
const dx = (this.ix - svgP.x);
// const dy = (this.iy - svgP.y);

// new dist from centre
const nx = dx * scale / oldScale;
// const ny = dy * scale / oldScale;

//required change
const rx = nx - dx;
// let ry = ny - dy;

// if (this.rotation === 0 || this.rotation === 180) {
// ry = 0;
// }

//new pos
const x = this.ix + rx;
// const y = this.iy + ry;
// const oldScale = this.stickZoom;
// //dist from centre
// const dx = (this.ix - svgP.x);
// // new dist from centre
// const nx = dx * scale / oldScale;
// //required change
// const rx = nx - dx;
// //new pos
// const x = this.ix + rx;
// // const y = this.iy + ry;

this.stickZoom = scale;
// const x = (-1 * ((residuePos - (this.size / 2)) * this.stickZoom)) + svgP.x;

this.scale();
this.setPosition(x, this.iy);//y);
// this.setPosition(this.ix, this.iy);//y);
this.setAllLinkCoordinates();
}

Expand Down Expand Up @@ -294,11 +288,6 @@ export class Polymer extends Interactor {
}
}

//TODO - this can be tidied up
toCircleNoTransition() {
this.toCircle(false);
}

toStick(transition = true) {
const transitionTime = transition ? Polymer.transitionTime : 0;

Expand Down Expand Up @@ -411,10 +400,6 @@ export class Polymer extends Interactor {
.delay(transitionTime * 0.8).duration(transitionTime / 2);
}

toStickNoTransition() {
this.toStick(false);
}

updateAnnotationRectanglesNoTransition() {
for (let [annotationType, annotations] of this.annotationSets) {
if (this.app.annotationSetsShown.get(annotationType) === true) {
Expand Down

0 comments on commit aad6b00

Please sign in to comment.