Skip to content

Commit

Permalink
Merge pull request #87 from Nhogs/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
@Popotojs
Popotojs authored Oct 6, 2022
2 parents 0052d8e + 83ae3f3 commit 97ada71
Show file tree
Hide file tree
Showing 15 changed files with 2,631 additions and 2,487 deletions.
4,758 changes: 2,485 additions & 2,273 deletions package-lock.json
View file

Large diffs are not rendered by default.

20 changes: 12 additions & 8 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "popoto",
"version": "3.0.3",
"version": "4.0.0",
"description": "Graph based search interface for Neo4j database.",
"keywords": [
"popoto",
Expand Down Expand Up @@ -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",
Expand All @@ -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"
}
}
37 changes: 2 additions & 35 deletions src/graph/graph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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
67 changes: 24 additions & 43 deletions src/graph/node/node.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down Expand Up @@ -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) {
Expand All @@ -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++;
Expand Down Expand Up @@ -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
Expand All @@ -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;
Expand Down Expand Up @@ -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();

Expand All @@ -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();
Expand All @@ -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");

Expand All @@ -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;

Expand Down Expand Up @@ -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];
Expand Down
4 changes: 2 additions & 2 deletions src/taxonomy/taxonomy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
12 changes: 6 additions & 6 deletions test/graph/node/__snapshots__/fitTextRender.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -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>"`;
8 changes: 4 additions & 4 deletions test/graph/node/__snapshots__/textRender.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)"`;

Expand All @@ -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>"`;
Loading

0 comments on commit 97ada71

Please sign in to comment.