Merge pull request #192 from EliotRagueneau/master

colin-combe · web-flow · commit 0d5635f1b9be · 2022-11-10T08:34:18.000Z
Fix d3v7: transition, scale, toCircle/Stick
diff --git a/dist/complexviewer.js b/dist/complexviewer.js
diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
     <link href="./css/style.css" rel="stylesheet" type='text/css'>
     <link href="./css/demo.css" rel="stylesheet" type='text/css'>
     <!--libraries-->
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js"></script>
     <script src="./dist/complexviewer.js" type="text/javascript"></script>
     <!-- example data info -->
     <script src="./data/index.js" type="text/javascript"></script>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "complexviewer",
-  "version": "2.1.17",
+  "version": "2.2.0",
   "description": "A network visualisation that displays molecular interaction data, including detailed residue-level information such as binding sites. Used in EBI's Complex Portal and elsewhere.",
   "author": {
     "name": "Colin Combe",
@@ -22,6 +22,10 @@
     {
       "name": "Marine Dumousseau",
       "email": ""
+    },
+    {
+      "name": "Eliot Ragueneau",
+      "email": "eragueneau@ebi.ac.uk"
     }
   ],
   "license": "Apache-2.0",
@@ -54,13 +58,19 @@
     "node": ">=14.0.0"
   },
   "dependencies": {
-    "colorbrewer": "^1.3.0",
+    "colorbrewer": "1.3.0",
     "core-js": "^3.15.2",
-    "d3": "~3.5.5",
-    "d3-scale-chromatic": "^1.5.0",
-    "intersectionjs": "^1.0.1",
+    "d3": "~7.1.1",
+    "d3-ease": "~3.0.1",
+    "d3-polygon": "~3.0.1",
+    "d3-fetch": "~3.0.1",
+    "d3-scale-chromatic": "~1.5.0",
+    "d3-scale": "~4.0.2",
+    "d3-interpolate": "^3.0.1",
+    "d3-selection": "^3.0.0",
+    "intersectionjs": "1.0.1",
     "jquery": "^3.6.0",
-    "point2d": "^0.0.1",
+    "point2d": "0.0.1",
     "rgb-color": "2.1.2"
   },
   "keywords": [
diff --git a/src/js/annotation-utils.js b/src/js/annotation-utils.js
@@ -35,47 +35,62 @@ 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();
-    d3.json(url, function (json) {
+    d3.json(url).then(json => {
         let annotations = prot.annotationSets.get("UniprotKB");
         if (typeof annotations === "undefined") {
             annotations = [];
             prot.annotationSets.set("UniprotKB", annotations);
         }
         if (json) {
-            const uniprotJsonFeatures = json.features.filter(function (ft) {
-                return ft.type === "DOMAIN";
-            });
-            for (let feature of uniprotJsonFeatures) {
-                const anno = new Annotation(feature.description, new SequenceDatum(null, feature.begin + "-" + feature.end));
+            for (let feature of json.features.filter(ft => ft.type === "DOMAIN")) {
+                const anno = new Annotation(feature.description, new SequenceDatum(null, `${feature.begin}-${feature.end}`));
                 annotations.push(anno);
             }
         }
         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();
-    d3.xml(url, function (xml) {
+    d3.xml(url).then(xml => {
         let annotations = prot.annotationSets.get("Superfamily");
         if (typeof annotations === "undefined") {
             annotations = [];
             prot.annotationSets.set("Superfamily", annotations);
         }
         if (xml) {
-            const xmlDoc = new DOMParser().parseFromString(new XMLSerializer().serializeToString(xml), "text/xml");
-            const xmlFeatures = xmlDoc.getElementsByTagName("FEATURE");
+            const xmlFeatures = xml.getElementsByTagName("FEATURE");
             for (let xmlFeature of xmlFeatures) {
                 const type = xmlFeature.getElementsByTagName("TYPE")[0]; //might need to watch for text nodes getting mixed in here
                 const category = type.getAttribute("category");
                 if (category === "miscellaneous") {
-                    const name = type.getAttribute("id");
+                    const name = decodeHTML(type.getAttribute("id"));
                     const start = xmlFeature.getElementsByTagName("START")[0].textContent;
                     const end = xmlFeature.getElementsByTagName("END")[0].textContent;
-                    annotations.push(new Annotation(name, new SequenceDatum(null, start + "-" + end)));
+                    annotations.push(new Annotation(name, new SequenceDatum(null, `${start}-${end}`)));
                 }
             }
         }
         callback();
     });
-}
+}
+
+
+function decodeHTML(text) {
+    return text.replace(/&([^;]+);/gm, (match, entity) => entities[entity] || match)
+}
+
+const entities = {
+    'amp': '&',
+    'apos': '\'',
+    '#x27': '\'',
+    '#x2F': '/',
+    '#39': '\'',
+    '#47': '/',
+    'lt': '<',
+    'gt': '>',
+    'nbsp': ' ',
+    'quot': '"'
+}
diff --git a/src/js/app.js b/src/js/app.js
@@ -1,6 +1,7 @@
 import "../css/xinet.css";
 import packageInfo from "../../package.json";
 import * as d3 from "d3";
+import {scaleOrdinal} from "d3-scale";
 import * as d3_chromatic from "d3-scale-chromatic";
 import * as cola from "./cola";
 import * as Rgb_color from "rgb-color";
@@ -21,7 +22,7 @@ export class App {
         //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
         this.maxCountInitiallyExpanded = maxCountInitiallyExpanded;
-        this.d3cola = cola.d3adaptor().groupCompactness(Number.MIN_VALUE).avoidOverlaps(true); //1e-5
+        this.d3cola = cola.d3adaptor(d3).groupCompactness(Number.MIN_VALUE).avoidOverlaps(true); //1e-5
 
         const customMenuSel = d3.select(this.el)
             .append("div").classed("custom-menu-margin", true)
@@ -31,7 +32,7 @@ export class App {
         const self = this;
         const collapse = customMenuSel.append("li").classed("collapse", true); //.append("button");
         collapse.text("Collapse");
-        collapse[0][0].onclick = function (evt) {
+        collapse.node().onclick = function (evt) {
             self.collapseProtein(evt);
         };
         const scaleButtonsListItemSel = customMenuSel.append("li").text("Scale: ");
@@ -54,7 +55,7 @@ export class App {
             })
             .attr("name", "scaleButtons")
             .attr("type", "radio")
-            .on("change", function (d) {
+            .on("change", function (e, d) {
                 self.preventDefaultsAndStopPropagation(d);
                 self.contextMenuProt.setStickScale(d, self.contextMenuPoint);
             });
@@ -75,27 +76,13 @@ export class App {
         this.svgElement.classList.add("complexViewerSVG");
 
         //add listeners
-        this.svgElement.onmousedown = function (evt) {
-            self.mouseDown(evt);
-        };
-        this.svgElement.onmousemove = function (evt) {
-            self.move(evt);
-        };
-        this.svgElement.onmouseup = function (evt) {
-            self.mouseUp(evt);
-        };
-        this.svgElement.onmouseout = function (evt) {
-            self.mouseOut(evt);
-        };
-        this.svgElement.ontouchstart = function (evt) {
-            self.touchStart(evt);
-        };
-        this.svgElement.ontouchmove = function (evt) {
-            self.move(evt);
-        };
-        this.svgElement.ontouchend = function (evt) {
-            self.mouseUp(evt);
-        };
+        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.lastMouseUp = new Date().getTime();
 
         this.el.oncontextmenu = function (evt) {
@@ -230,7 +217,7 @@ export class App {
             hsl.l = 0.9;
             complexColors.push(hsl + "");
         }
-        NaryLink.naryColors = d3.scale.ordinal().range(complexColors);
+        NaryLink.naryColors = scaleOrdinal().range(complexColors);
 
         this.z = 1;
         this.hideTooltip();
@@ -648,10 +635,31 @@ export class App {
         }
         //choose appropriate color scheme
         let colorScheme;
-        if (categories.size < 11) {
-            colorScheme = d3.scale.ordinal().range(d3_chromatic.schemeTableau10);
+        if (categories.size <= 10) {
+            colorScheme = scaleOrdinal().range(d3_chromatic.schemeTableau10);
         } else {
-            colorScheme = d3.scale.category20();
+            colorScheme = d3.scaleOrdinal().range([
+                "#38cae3",
+                "#d4582b",
+                "#7d5fd7",
+                "#7cd352",
+                "#ce4bbb",
+                "#5aa33c",
+                "#93539d",
+                "#d2c33b",
+                "#5c83d4",
+                "#e19a46",
+                "#d891d7",
+                "#65da9a",
+                "#9d772f",
+                "#d43f4c",
+                "#4db186",
+                "#cf4b7e",
+                "#477c3a",
+                "#c46d5c",
+                "#b6c671",
+                "#798126"
+            ]); // Generated from https://medialab.github.io/iwanthue/
         }
 
         const self = this;
diff --git a/src/js/transform.js b/src/js/transform.js
@@ -0,0 +1,51 @@
+// Taken from https://stackoverflow.com/a/38230545/11028828
+export function transform(transform) {
+    // Create a dummy g for calculation purposes only. This will never
+    // be appended to the DOM and will be discarded once this function
+    // returns.
+    const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+
+    // Set the transform attribute to the provided string value.
+    g.setAttributeNS(null, "transform", transform);
+
+    // consolidate the SVGTransformList containing all transformations
+    // to a single SVGTransform of type SVG_TRANSFORM_MATRIX and get
+    // its SVGMatrix.
+    const matrix = g.transform.baseVal.consolidate().matrix;
+
+    // Below calculations are taken and adapted from the private function
+    // transform/decompose.js of D3's module d3-interpolate.
+    let {a, b, c, d, e, f} = matrix;   // ES6, if this doesn't work, use below assignment
+    // var a=matrix.a, b=matrix.b, c=matrix.c, d=matrix.d, e=matrix.e, f=matrix.f; // ES5
+    let scaleX = Math.sqrt(a * a + b * b),
+        scaleY = Math.sqrt(c * c + d * d),
+        skewX = a * c + b * d;
+    if (scaleX) {
+        a /= scaleX;
+        b /= scaleX;
+    }
+    if (skewX) {
+        c -= a * skewX;
+        d -= b * skewX;
+    }
+    if (scaleY) {
+        c /= scaleY;
+        d /= scaleY;
+        skewX /= scaleY;
+    }
+    if (a * d < b * c) {
+        a = -a;
+        b = -b;
+        skewX = -skewX;
+        scaleX = -scaleX;
+    }
+    return {
+        translate: [e,f],
+        translateX: e,
+        translateY: f,
+        rotate: Math.atan2(b, a) * 180 / Math.PI,
+        skewX: Math.atan(skewX) * 180 / Math.PI,
+        scaleX: scaleX,
+        scaleY: scaleY
+    };
+}
diff --git a/src/js/viz/interactor/polymer.js b/src/js/viz/interactor/polymer.js
@@ -1,4 +1,6 @@
 import * as d3 from "d3"; // transitions and other stuff
+import {transform} from "../../transform";
+import {easeCubicInOut} from "d3-ease";
 import {rotatePointAboutPoint} from "../../geom";
 import {svgns} from "../../svgns";
 import {Interactor} from "./interactor";
@@ -45,8 +47,8 @@ export class Polymer extends Interactor {
     scale() {
         const protLength = (this.size) * this.stickZoom;
         if (this.expanded) {
-            const labelTransform = d3.transform(this.labelSVG.getAttribute("transform"));
-            const k = this.app.svgElement.createSVGMatrix().rotate(labelTransform.rotate)
+            const labelTransform = transform(this.labelSVG.getAttribute("transform"));
+            const k = this.app.svgElement.createSVGMatrix()
                 .translate((-(((this.size / 2) * this.stickZoom) + (this.nTermFeatures.length > 0 ? 25 : 10))), this.labelY); //.scale(z).translate(-c.x, -c.y);
             this.labelSVG.transform.baseVal.initialize(this.app.svgElement.createSVGTransformFromMatrix(k));
             this.updateAnnotationRectanglesNoTransition();
@@ -159,7 +161,6 @@ export class Polymer extends Interactor {
     }
 
     toCircle(transition = true, svgP) {
-
         if (!svgP) {
             const width = this.app.svgElement.parentNode.clientWidth;
             const ctm = this.app.container.getCTM().inverse();
@@ -196,7 +197,7 @@ export class Polymer extends Interactor {
             .duration(transitionTime);
 
         const stickZoomInterpol = d3.interpolate(this.stickZoom, 0);
-        const labelTransform = d3.transform(this.labelSVG.getAttribute("transform"));
+        const labelTransform = transform(this.labelSVG.getAttribute("transform"));
         const labelStartPoint = labelTransform.translate[0];
         const labelTranslateInterpol = d3.interpolate(labelStartPoint, -(r + 5));
 
@@ -209,15 +210,15 @@ export class Polymer extends Interactor {
 
         const self = this;
         d3.select(this.ticks).transition().attr("opacity", 0).duration(transitionTime / 4)
-            .each("end",
+            .on("end",
                 function () {
                     d3.select(this).selectAll("*").remove();
                 }
             );
 
         const originalStickZoom = this.stickZoom;
         const originalRotation = this.rotation;
-        const cubicInOut = d3.ease("cubic-in-out");
+        const cubicInOut = easeCubicInOut;
         if (transition) {
             for (let [annotationType, annotations] of this.annotationSets) {
                 if (this.app.annotationSetsShown.get(annotationType) === true) {
@@ -242,16 +243,15 @@ export class Polymer extends Interactor {
                     }
                 }
             }
-            d3.timer(function (elapsed) {
-                return update(elapsed / transitionTime);
+            const t = d3.timer(function (elapsed) {
+                if (update(elapsed / transitionTime)) t.stop();
             });
         } else {
             update(1);
         }
 
         function update(interp) {
-            const labelTransform = d3.transform(self.labelSVG.getAttribute("transform"));
-            const k = self.app.svgElement.createSVGMatrix().rotate(labelTransform.rotate).translate(labelTranslateInterpol(cubicInOut(interp)), self.labelY); //.scale(z).translate(-c.x, -c.y);
+            const k = self.app.svgElement.createSVGMatrix().translate(labelTranslateInterpol(cubicInOut(interp)), self.labelY); //.scale(z).translate(-c.x, -c.y);
             self.labelSVG.transform.baseVal.initialize(self.app.svgElement.createSVGTransformFromMatrix(k));
 
             if (xInterpol !== null) {
@@ -339,7 +339,7 @@ export class Polymer extends Interactor {
 
 
         const self = this;
-        const cubicInOut = d3.ease("cubic-in-out");
+        const cubicInOut = easeCubicInOut;
         if (transition) {
             for (let [annotationType, annotations] of this.annotationSets) {
                 if (this.app.annotationSetsShown.get(annotationType) === true) {
@@ -374,16 +374,16 @@ export class Polymer extends Interactor {
                     }
                 }
             }
-            d3.timer(function (elapsed) {
-                return update(elapsed / transitionTime);
+            const t = d3.timer(function (elapsed) {
+                if (update(elapsed / transitionTime)) t.stop();
             });
         } else {
             update(1);
         }
 
         function update(interp) {
-            const labelTransform = d3.transform(self.labelSVG.getAttribute("transform"));
-            const k = self.app.svgElement.createSVGMatrix().rotate(labelTransform.rotate).translate(labelTranslateInterpol(cubicInOut(interp)), self.labelY); //.scale(z).translate(-c.x, -c.y);
+            const labelTransform = transform(self.labelSVG.getAttribute("transform"));
+            const k = self.app.svgElement.createSVGMatrix().rotate(labelTransform.rotate).translate(labelTranslateInterpol(cubicInOut(interp)), self.labelY)
             self.labelSVG.transform.baseVal.initialize(self.app.svgElement.createSVGTransformFromMatrix(k));
 
             const currentLength = lengthInterpol(cubicInOut(interp));
diff --git a/src/js/viz/link/nary-link.js b/src/js/viz/link/nary-link.js
