Merge pull request #87 from Nhogs/develop

Develop

Author: Popotojs

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "popoto",
-  "version": "3.0.3",
+  "version": "4.0.0",
   "description": "Graph based search interface for Neo4j database.",
   "keywords": [
     "popoto",
@@ -34,7 +34,10 @@
   "jest": {
     "setupFiles": [
       "jest-canvas-mock"
-    ]
+    ],
+    "moduleNameMapper": {
+      "^d3$": "<rootDir>/node_modules/d3/dist/d3.min.js"
+    }
   },
   "scripts": {
     "build": "rimraf dist && mkdir dist && json2module package.json > dist/package.js && node rollup.node && rollup -c --banner \"// Copyright (c) 2018 NHOGS Interactive.\" && npm run uglify",
@@ -43,20 +46,21 @@
     "uglify": "uglifyjs -b beautify=false,preamble=\"'// Copyright (c) 2018 NHOGS Interactive.'\" dist/popoto.js -c negate_iife=false -m -o dist/popoto.min.js && uglifycss css/popoto.css css/popoto-svg.css --output dist/popoto.min.css"
   },
   "dependencies": {
-    "d3": "^5.15.0"
+    "d3": "^7.6.1"
   },
   "devDependencies": {
     "babel-core": "^6.26.3",
-    "babel-jest": "^27.0.6",
+    "babel-jest": "^29.1.2",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-    "jest": "^27.0.6",
-    "jest-canvas-mock": "^1.1.0",
+    "jest": "^29.1.2",
+    "jest-canvas-mock": "^2.4.0",
+    "jest-environment-jsdom": "^29.1.2",
     "json2module": "^0.0.3",
     "rimraf": "^3.0.2",
-    "rollup": "^2.55.1",
+    "rollup": "^2.79.1",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "uglify-js": "^3.14.1",
+    "uglify-js": "^3.17.3",
     "uglifycss": "^0.0.29"
   }
 }

package.json

@@ -262,8 +262,8 @@ graph.getSVGHeight = function () {
 /**
  * Function to call on SVG zoom event to update the svg transform attribute.
  */
-graph.rescale = function () {
-    var transform = d3.event.transform;
+graph.rescale = function (event) {
+    var transform = event.transform;
     if (isNaN(transform.x) || isNaN(transform.y) || isNaN(transform.k)) {
         graph.svg.attr("transform", d3.zoomIdentity);
     } else {
@@ -1039,37 +1039,4 @@ graph.addRelationshipData = function (n, l, callback, values, isNegative) {
 
 };
 
-graph.voronoi = d3.voronoi()
-    .x(function (d) {
-        return d.x;
-    })
-    .y(function (d) {
-        return d.y;
-    });
-
-graph.recenterVoronoi = function (nodes) {
-    var shapes = [];
-
-    var voronois = graph.voronoi.polygons(nodes.map(function (d) {
-        d.x = d.x || 0;
-        d.y = d.y || 0;
-        return d
-    }));
-
-    voronois.forEach(function (d) {
-        if (!d.length) {
-            return;
-        }
-
-        var n = [];
-        d.forEach(function (c) {
-            n.push([c[0] - d.data.x, c[1] - d.data.y]);
-        });
-
-        n.point = d.data;
-        shapes.push(n);
-    });
-    return shapes;
-};
-
 export default graph

src/graph/graph.js

@@ -261,9 +261,9 @@ node.addNewElements = function (enteringData) {
     // Disable right click context menu on value nodes
     gNewNodeElements.filter(function (d) {
         return d.type === node.NodeTypes.VALUE;
-    }).on("contextmenu", function () {
+    }).on("contextmenu", function (event) {
         // Disable context menu on
-        d3.event.preventDefault();
+        event.preventDefault();
     });
 
     var nodeDefs = gNewNodeElements.append("defs");
@@ -344,8 +344,8 @@ node.addForegroundElements = function (gNewNodeElements) {
         .attr("class", "ppt-arrow")
         .attr("d", "m -44.905361,-23 6.742,-6.742 c 0.81,-0.809 0.81,-2.135 0,-2.944 l -0.737,-0.737 c -0.81,-0.811 -2.135,-0.811 -2.945,0 l -8.835,8.835 c -0.435,0.434 -0.628,1.017 -0.597,1.589 -0.031,0.571 0.162,1.154 0.597,1.588 l 8.835,8.834 c 0.81,0.811 2.135,0.811 2.945,0 l 0.737,-0.737 c 0.81,-0.808 0.81,-2.134 0,-2.943 l -6.742,-6.743 z");
 
-    glArrow.on("click", function (clickedNode) {
-        d3.event.stopPropagation(); // To avoid click event on svg element in background
+    glArrow.on("click", function (event, clickedNode) {
+        event.stopPropagation(); // To avoid click event on svg element in background
 
         // On left arrow click page number is decreased and node expanded to display the new page
         if (clickedNode.page > 1) {
@@ -369,8 +369,8 @@ node.addForegroundElements = function (gNewNodeElements) {
         .attr("class", "ppt-arrow")
         .attr("d", "m 51.027875,-24.5875 -8.835,-8.835 c -0.811,-0.811 -2.137,-0.811 -2.945,0 l -0.738,0.737 c -0.81,0.81 -0.81,2.136 0,2.944 l 6.742,6.742 -6.742,6.742 c -0.81,0.81 -0.81,2.136 0,2.943 l 0.737,0.737 c 0.81,0.811 2.136,0.811 2.945,0 l 8.835,-8.836 c 0.435,-0.434 0.628,-1.017 0.597,-1.588 0.032,-0.569 -0.161,-1.152 -0.596,-1.586 z");
 
-    grArrow.on("click", function (clickedNode) {
-        d3.event.stopPropagation(); // To avoid click event on svg element in background
+    grArrow.on("click", function (event, clickedNode) {
+        event.stopPropagation(); // To avoid click event on svg element in background
 
         if (clickedNode.page * node.PAGE_SIZE < clickedNode.count) {
             clickedNode.page++;
@@ -434,14 +434,6 @@ node.updateElements = function () {
             return provider.node.getSize(n);
         });
 
-    // Display voronoi paths
-    // TODO ZZZ re|move
-    // nUdeXXX.selectAllData.selectAll(".gra").data(["unique"]).enter().append("g").attr("class", "gra").append("use");
-    // nUdeXXX.selectAllData.selectAll("use").attr("xlink:href",function(d){
-    //     console.log("#pvoroclip-"+d3.select(this.parentNode.parentNode).datum().id);
-    //     return "#pvoroclip-"+d3.select(this.parentNode.parentNode).datum().id;
-    // }).attr("fill","none").attr("stroke","red").attr("stroke-width","1px");
-
     // TODO ZZZ move functions?
     toUpdateElem.filter(function (n) {
         return n.type !== node.NodeTypes.ROOT
@@ -450,19 +442,19 @@ node.updateElements = function () {
         .on("drag", dragged)
         .on("end", dragended));
 
-    function dragstarted(d) {
-        if (!d3.event.active) graph.force.alphaTarget(0.3).restart();
+    function dragstarted(event, d) {
+        if (!event.active) graph.force.alphaTarget(0.3).restart();
         d.fx = d.x;
         d.fy = d.y;
     }
 
-    function dragged(d) {
-        d.fx = d3.event.x;
-        d.fy = d3.event.y;
+    function dragged(event, d) {
+        d.fx = event.x;
+        d.fy = event.y;
     }
 
-    function dragended(d) {
-        if (!d3.event.active) graph.force.alphaTarget(0);
+    function dragended(event, d) {
+        if (!event.active) graph.force.alphaTarget(0);
         if (d.fixed === false) {
             d.fx = null;
             d.fy = null;
@@ -897,8 +889,8 @@ node.updateForegroundElements = function () {
         });
 };
 
-node.segmentClick = function (d) {
-    d3.event.preventDefault();
+node.segmentClick = function (event, d) {
+    event.preventDefault();
 
     var n = d3.select(this.parentNode.parentNode).datum();
 
@@ -919,8 +911,8 @@ node.segmentClick = function (d) {
 /**
  * Handle the mouse over event on nodes.
  */
-node.mouseOverNode = function () {
-    d3.event.preventDefault();
+node.mouseOverNode = function (event) {
+    event.preventDefault();
 
     // TODO don't work on IE (nodes unstable) find another way to move node in foreground on mouse over?
     // d3.select(this).moveToFront();
@@ -946,22 +938,11 @@ node.mouseOverNode = function () {
     }
 };
 
-// nUdeXXX.mouseMoveNode = function () {
-//     d3.event.preventDefault();
-//
-//     var hoveredNode = d3.select(this).data()[0];
-//
-//     tootip.div
-//         .text(provider.node.getTextValue(hoveredNode, nUdeXXX.NODE_TITLE_MAX_CHARS))
-//         .style("left", (d3.event.pageX - 34) + "px")
-//         .style("top", (d3.event.pageY - 12) + "px");
-// };
-
 /**
  * Handle mouse out event on nodes.
  */
-node.mouseOutNode = function () {
-    d3.event.preventDefault();
+node.mouseOutNode = function (event) {
+    event.preventDefault();
 
     // tootip.div.style("display", "none");
 
@@ -987,15 +968,15 @@ node.mouseOutNode = function () {
 /**
  * Handle the click event on nodes.
  */
-node.nodeClick = function () {
-    if (!d3.event.defaultPrevented) { // To avoid click on drag end
+node.nodeClick = function (event) {
+    if (!event.defaultPrevented) { // To avoid click on drag end
         var clickedNode = d3.select(this).data()[0]; // Clicked node data
         logger.debug("nodeClick (" + clickedNode.label + ")");
 
         if (clickedNode.type === node.NodeTypes.VALUE) {
             node.valueNodeClick(clickedNode);
         } else if (clickedNode.type === node.NodeTypes.CHOOSE || clickedNode.type === node.NodeTypes.ROOT) {
-            if (d3.event.ctrlKey) {
+            if (event.ctrlKey) {
                 if (clickedNode.type === node.NodeTypes.CHOOSE) {
                     clickedNode.isNegative = !clickedNode.hasOwnProperty("isNegative") || !clickedNode.isNegative;
 
@@ -1874,9 +1855,9 @@ node.getTrunkNode = function (n) {
  * Function to add on node event to clear the selection.
  * Call to this function on a node will remove the selected value and trigger a graph update.
  */
-node.clearSelection = function () {
+node.clearSelection = function (event) {
     // Prevent default event like right click  opening menu.
-    d3.event.preventDefault();
+    event.preventDefault();
 
     // Get clicked node.
     var clickedNode = d3.select(this).data()[0];

src/graph/node/node.js

@@ -175,8 +175,8 @@ taxonomy.addTaxonomyChildren = function (selection) {
     });
 };
 
-taxonomy.onClick = function () {
-    d3.event.stopPropagation();
+taxonomy.onClick = function (event) {
+    event.stopPropagation();
 
     var label = this.attributes.value.value;
 

src/taxonomy/taxonomy.js

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`render Should works with 1 word as text Should render correctly 1`] = `"<div><g><rect fill=\\"mocked_color_value\\" class=\\"mocked_css_class_value\\" x=\\"-53\\" y=\\"-50\\" rx=\\"5\\" ry=\\"5\\" width=\\"106\\" height=\\"100\\" transform=\\"translate(0,0) scale(0.5543250876981161)\\"></rect><text class=\\"fitted-text mocked_css_class_value\\" style=\\"text-anchor: middle; font: 10px sans-serif\\" transform=\\"translate(0,0) scale(0.5543250876981161)\\"><tspan x=\\"0\\" y=\\"3.6000000000000005\\">mockedTextValue</tspan></text></g></div>"`;
+exports[`render Should works with 1 word as text Should render correctly 1`] = `"<div><g><rect fill="mocked_color_value" class="mocked_css_class_value" x="-53" y="-50" rx="5" ry="5" width="106" height="100" transform="translate(0,0) scale(5.2057920629535355)"></rect><text class="fitted-text mocked_css_class_value" style="text-anchor: middle; font: 10px sans-serif" transform="translate(0,0) scale(5.2057920629535355)"><tspan x="0" y="3.6000000000000005">mockedTextValue</tspan></text></g></div>"`;
 
-exports[`render Should works with empty text Should render correctly 1`] = `"<div><g><rect fill=\\"mocked_color_value\\" class=\\"mocked_css_class_value\\" x=\\"-53\\" y=\\"-50\\" rx=\\"5\\" ry=\\"5\\" width=\\"6\\" height=\\"0\\" transform=\\"translate(0,0) scale(1)\\"></rect><text class=\\"fitted-text mocked_css_class_value\\" style=\\"text-anchor: middle; font: 10px sans-serif\\" transform=\\"translate(0,0) scale(1)\\"></text></g></div>"`;
+exports[`render Should works with empty text Should render correctly 1`] = `"<div><g><rect fill="mocked_color_value" class="mocked_css_class_value" x="-53" y="-50" rx="5" ry="5" width="6" height="0" transform="translate(0,0) scale(1)"></rect><text class="fitted-text mocked_css_class_value" style="text-anchor: middle; font: 10px sans-serif" transform="translate(0,0) scale(1)"></text></g></div>"`;
 
-exports[`render Should works with integer as text Should render correctly 1`] = `"<div><g><rect fill=\\"mocked_color_value\\" class=\\"mocked_css_class_value\\" x=\\"-53\\" y=\\"-50\\" rx=\\"5\\" ry=\\"5\\" width=\\"106\\" height=\\"100\\" transform=\\"translate(0,0) scale(5.892556509887896)\\"></rect><text class=\\"fitted-text mocked_css_class_value\\" style=\\"text-anchor: middle; font: 10px sans-serif\\" transform=\\"translate(0,0) scale(5.892556509887896)\\"><tspan x=\\"0\\" y=\\"3.6000000000000005\\">0</tspan></text></g></div>"`;
+exports[`render Should works with integer as text Should render correctly 1`] = `"<div><g><rect fill="mocked_color_value" class="mocked_css_class_value" x="-53" y="-50" rx="5" ry="5" width="106" height="100" transform="translate(0,0) scale(8.304547985373997)"></rect><text class="fitted-text mocked_css_class_value" style="text-anchor: middle; font: 10px sans-serif" transform="translate(0,0) scale(8.304547985373997)"><tspan x="0" y="3.6000000000000005">0</tspan></text></g></div>"`;
 
-exports[`render Should works with multiple words as text Should render correctly 1`] = `"<div><g><rect fill=\\"mocked_color_value\\" class=\\"mocked_css_class_value\\" x=\\"-53\\" y=\\"-50\\" rx=\\"5\\" ry=\\"5\\" width=\\"106\\" height=\\"100\\" transform=\\"translate(0,0) scale(1.2422599874998832)\\"></rect><text class=\\"fitted-text mocked_css_class_value\\" style=\\"text-anchor: middle; font: 10px sans-serif\\" transform=\\"translate(0,0) scale(1.2422599874998832)\\"><tspan x=\\"0\\" y=\\"-8.399999999999999\\">mocked</tspan><tspan x=\\"0\\" y=\\"3.6000000000000005\\">text</tspan><tspan x=\\"0\\" y=\\"15.600000000000001\\">value</tspan></text></g></div>"`;
+exports[`render Should works with multiple words as text Should render correctly 1`] = `"<div><g><rect fill="mocked_color_value" class="mocked_css_class_value" x="-53" y="-50" rx="5" ry="5" width="106" height="100" transform="translate(0,0) scale(4.805693313322127)"></rect><text class="fitted-text mocked_css_class_value" style="text-anchor: middle; font: 10px sans-serif" transform="translate(0,0) scale(4.805693313322127)"><tspan x="0" y="3.6000000000000005">mocked text value</tspan></text></g></div>"`;
 
-exports[`render Should works with multiple words on same span Should render correctly 1`] = `"<div><g><rect fill=\\"mocked_color_value\\" class=\\"mocked_css_class_value\\" x=\\"-53\\" y=\\"-50\\" rx=\\"5\\" ry=\\"5\\" width=\\"106\\" height=\\"100\\" transform=\\"translate(0,0) scale(1.0942202738310212)\\"></rect><text class=\\"fitted-text mocked_css_class_value\\" style=\\"text-anchor: middle; font: 10px sans-serif\\" transform=\\"translate(0,0) scale(1.0942202738310212)\\"><tspan x=\\"0\\" y=\\"-8.399999999999999\\">mocked</tspan><tspan x=\\"0\\" y=\\"3.6000000000000005\\">text</tspan><tspan x=\\"0\\" y=\\"15.600000000000001\\">a value</tspan></text></g></div>"`;
+exports[`render Should works with multiple words on same span Should render correctly 1`] = `"<div><g><rect fill="mocked_color_value" class="mocked_css_class_value" x="-53" y="-50" rx="5" ry="5" width="106" height="100" transform="translate(0,0) scale(3.6637165272365584)"></rect><text class="fitted-text mocked_css_class_value" style="text-anchor: middle; font: 10px sans-serif" transform="translate(0,0) scale(3.6637165272365584)"><tspan x="0" y="-2.3999999999999995">mocked text a</tspan><tspan x="0" y="9.600000000000001">value</tspan></text></g></div>"`;
 
-exports[`render Should works with undefined text Should render correctly 1`] = `"<div><g><rect fill=\\"mocked_color_value\\" class=\\"mocked_css_class_value\\" x=\\"-53\\" y=\\"-50\\" rx=\\"5\\" ry=\\"5\\" width=\\"6\\" height=\\"0\\" transform=\\"translate(0,0) scale(1)\\"></rect><text class=\\"fitted-text mocked_css_class_value\\" style=\\"text-anchor: middle; font: 10px sans-serif\\" transform=\\"translate(0,0) scale(1)\\"></text></g></div>"`;
+exports[`render Should works with undefined text Should render correctly 1`] = `"<div><g><rect fill="mocked_color_value" class="mocked_css_class_value" x="-53" y="-50" rx="5" ry="5" width="6" height="0" transform="translate(0,0) scale(1)"></rect><text class="fitted-text mocked_css_class_value" style="text-anchor: middle; font: 10px sans-serif" transform="translate(0,0) scale(1)"></text></g></div>"`;

test/graph/node/__snapshots__/fitTextRender.test.js.snap

@@ -2,9 +2,9 @@
 
 exports[`Test TEXT_Y default value to center text vertically 1`] = `8`;
 
-exports[`render Should works with empty text Should render correctly 1`] = `"<div><g><rect fill=\\"mocked_color_value\\" class=\\"mocked_css_class_value\\" x=\\"-53\\" y=\\"-50\\" rx=\\"5\\" ry=\\"5\\" width=\\"6\\" height=\\"0\\"></rect><text x=\\"0\\" y=\\"8\\" text-anchor=\\"middle\\" class=\\"mocked_css_class_value2\\"></text></g></div>"`;
+exports[`render Should works with empty text Should render correctly 1`] = `"<div><g><rect fill="mocked_color_value" class="mocked_css_class_value" x="-53" y="-50" rx="5" ry="5" width="6" height="0"></rect><text x="0" y="8" text-anchor="middle" class="mocked_css_class_value2"></text></g></div>"`;
 
-exports[`render Should works with integer text Should render correctly 1`] = `"<div><g><rect fill=\\"mocked_color_value\\" class=\\"mocked_css_class_value\\" x=\\"-53\\" y=\\"-50\\" rx=\\"5\\" ry=\\"5\\" width=\\"6\\" height=\\"0\\"></rect><text x=\\"0\\" y=\\"8\\" text-anchor=\\"middle\\" class=\\"mocked_css_class_value2\\">0</text></g></div>"`;
+exports[`render Should works with integer text Should render correctly 1`] = `"<div><g><rect fill="mocked_color_value" class="mocked_css_class_value" x="-53" y="-50" rx="5" ry="5" width="6" height="0"></rect><text x="0" y="8" text-anchor="middle" class="mocked_css_class_value2">0</text></g></div>"`;
 
 exports[`render Should works with normal simple text MouseOver should remove correctly the parent clip path 1`] = `"url(#node-viewmocked_id_clip_path_value)"`;
 
@@ -14,6 +14,6 @@ exports[`render Should works with normal simple text Mouseout after the mouseove
 
 exports[`render Should works with normal simple text Mouseout after the mouseover should reAdd correctly the parent clip path 2`] = `"url(#node-viewmocked_id_clip_path_value)"`;
 
-exports[`render Should works with normal simple text Should render correctly 1`] = `"<div><g clip-path=\\"url(#node-viewmocked_id_clip_path_value)\\"><rect fill=\\"mocked_color_value\\" class=\\"mocked_css_class_value\\" x=\\"-53\\" y=\\"-50\\" rx=\\"5\\" ry=\\"5\\" width=\\"106\\" height=\\"100\\"></rect><text x=\\"0\\" y=\\"8\\" text-anchor=\\"middle\\" class=\\"mocked_css_class_value2\\">mocked text value</text></g></div>"`;
+exports[`render Should works with normal simple text Should render correctly 1`] = `"<div><g clip-path="url(#node-viewmocked_id_clip_path_value)"><rect fill="mocked_color_value" class="mocked_css_class_value" x="-53" y="-50" rx="5" ry="5" width="106" height="100"></rect><text x="0" y="8" text-anchor="middle" class="mocked_css_class_value2">mocked text value</text></g></div>"`;
 
-exports[`render Should works with undefined text Should render correctly 1`] = `"<div><g><rect fill=\\"mocked_color_value\\" class=\\"mocked_css_class_value\\" x=\\"-53\\" y=\\"-50\\" rx=\\"5\\" ry=\\"5\\" width=\\"6\\" height=\\"0\\"></rect><text x=\\"0\\" y=\\"8\\" text-anchor=\\"middle\\" class=\\"mocked_css_class_value2\\"></text></g></div>"`;
+exports[`render Should works with undefined text Should render correctly 1`] = `"<div><g><rect fill="mocked_color_value" class="mocked_css_class_value" x="-53" y="-50" rx="5" ry="5" width="6" height="0"></rect><text x="0" y="8" text-anchor="middle" class="mocked_css_class_value2"></text></g></div>"`;