Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Onclick node data retrieval #7

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Onclick node data retrieval #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3e206ab
Add optional onClick-functionality to node objects. With that the use…
Apr 12, 2018
b1576c4
Remove comment.
Apr 12, 2018
662a315
Manifest changes in lib folder
Apr 12, 2018
98af4d6
Fix onClick Function Naming
Apr 13, 2018
a3c21f7
Return click-event.
Apr 14, 2018
fb40579
Handle event
Apr 14, 2018
77fae19
revert last commit.
Apr 14, 2018
ed6bcdb
Update lib.
Apr 14, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Expand Up @@ -42,6 +42,10 @@ Props you must provide:
* ```password```: the password required to access your neo4j db
* ```query```: the query you'd like to execute

Furthermore you can provide an onClickHandler as an optional prop of Neo4jGraphRenderer.
The handler will be triggered whenever a node is clicked and will give back more details e.g. properties.
For instance, you might want to set the attribute as `onClick={(node)=>node.propertyMap}` to retrieve the properties of the corresponding node.

& There you go! Your neo4j graph has been rendered!

**NOTE**: If you would like to add any extra CSS or your own font, the graph is generated in a ```div``` with id "graph"
Expand Down
5 changes: 4 additions & 1 deletion lib/Neo4jGraphRenderer/Neo4jGraphRenderer.js
View file
Open in desktop
Expand Up @@ -45,7 +45,7 @@ var Neo4JGraphRenderer = function (_Component) {
key: 'loadData',
value: function loadData(props) {
var connection = { url: props.url, user: props.user, pass: props.password };
(0, _graph.createGraph)(connection, props.query);
(0, _graph.createGraph)(connection, props.query, props.onClick);
}
}, {
key: 'render',
Expand All @@ -57,4 +57,7 @@ var Neo4JGraphRenderer = function (_Component) {
return Neo4JGraphRenderer;
}(_react.Component);

Neo4JGraphRenderer.defaultProps = {
onClick: function onClick() {}
};
exports.default = Neo4JGraphRenderer;
4 changes: 2 additions & 2 deletions lib/Neo4jGraphRenderer/assets/graph.js
View file
Open in desktop
Expand Up @@ -15,7 +15,7 @@ var _connection = require('./connection');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var createGraph = function createGraph(urlSource, query) {
var createGraph = function createGraph(urlSource, query, onClickFunc) {
var d3Graph = (0, _renderer.graphRenderer)();
var connection = (0, _connection.neo4jConnection)(urlSource);
try {
Expand All @@ -27,7 +27,7 @@ var createGraph = function createGraph(urlSource, query) {
if (graph) {
var div = (0, _jquery2.default)("#graph");
div.empty();
d3Graph.render("graph", div, graph);
d3Graph.render("graph", div, graph, onClickFunc);
} else {
if (err) {
window.alert(err.length > 0 ? 'Cypher error:\n' + err : 'JS Error:\n' + err);
Expand Down
33 changes: 7 additions & 26 deletions lib/Neo4jGraphRenderer/assets/renderer.js
View file
Open in desktop
Expand Up @@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
});
exports.graphRenderer = undefined;

var _jquery = require('jquery');

var _jquery2 = _interopRequireDefault(_jquery);

var _d = require('d3');

var d3 = _interopRequireWildcard(_d);
Expand All @@ -17,29 +13,21 @@ var _util = require('./util');

var _util2 = _interopRequireDefault(_util);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

var graphRenderer = function graphRenderer() {

var styleContents = 'node {\n diameter: 40px;\n color: #DFE1E3;\n border-color: #D4D6D7;\n border-width: 2px;\n text-color-internal: #000000;\n text-color-external: #000000;\n caption: \'{name}\';\n font-size: 12px;\n }\n relationship {\n color: #4356C0;\n shaft-width: 3px;\n font-size: 9px;\n padding: 3px;\n text-color-external: #000000;\n text-color-internal: #FFFFFF;\n }\n';

var skip = ["id", "start", "end", "source", "target", "labels", "type", "selected", "properties"];
var skip = ["start", "end", "labels", "type", "selected", "properties"];
var entities = ["name", "title", "tag", "username", "lastname", "caption"];

var svgStyling = '<style>\ntext{font-family:sans-serif}\n</style>';
var stylingUrl = window.location.hostname === 'www.neo4j.org' ? 'http://gist.neo4j.org/css/neod3' : 'styles/neod3';
if (window.isInternetExplorer) {
stylingUrl += '-ie.css';
} else {
stylingUrl += '.css';
}

var existingStyles = {};
var currentColor = 1;

var render = function render(id, $container, visualization) {
var render = function render(id, $container, visualization, onClickFunc) {
var extractProps = function extractProps(pc) {
var p = {};
for (var key in pc) {
Expand Down Expand Up @@ -67,7 +55,7 @@ var graphRenderer = function graphRenderer() {
var selectedKeys = entities.filter(function (k) {
return keys.indexOf(k) !== -1;
});
selectedKeys = selectedKeys.concat(keys).concat(['id']);
selectedKeys = selectedKeys.concat(keys);
var selector = 'node.' + label(nodes[i]);
var selectedKey = selectedKeys[0];
if (typeof props[selectedKey] === "string" && props[selectedKey].length > 30) {
Expand Down Expand Up @@ -168,16 +156,14 @@ var graphRenderer = function graphRenderer() {
var links = visualization.links,
nodes = visualization.nodes;


for (var i = 0; i < links.length; i++) {
links[i].source = links[i].start;
links[i].target = links[i].end;
}

createStyles(nodeStyles(nodes), existingStyles);

var graphModel = _util2.default.graphModel().nodes(nodes).relationships(links);

var graphView = _util2.default.graphView().style(styleSheet(existingStyles, styleContents)).width($container.width()).height($container.height());
var graphView = _util2.default.graphView(onClickFunc).style(styleSheet(existingStyles, styleContents)).width($container.width()).height($container.height());

var svg = d3.select('#' + id).append("svg");
var renderer = svg.data([graphModel]);
Expand Down Expand Up @@ -212,11 +198,6 @@ var graphRenderer = function graphRenderer() {
};
};

_jquery2.default.get(stylingUrl, function (data) {
svgStyling = '<style>\n' + data + '\n</style>';
(0, _jquery2.default)(svgStyling).appendTo('head');
});

return { 'render': render };
};

Expand Down
19 changes: 8 additions & 11 deletions lib/Neo4jGraphRenderer/assets/util.js
View file
Open in desktop
Expand Up @@ -377,23 +377,19 @@ neo.graphModel = function () {
return model;
};

neo.graphView = function () {
neo.graphView = function (onClickFunc) {
var layout = neo.layout.force();
var style = neo.style();
var viz = null;
var callbacks = {};
var trigger = function trigger() {
return [];
};

var chart = function chart(selection) {
selection.each(function (graphModel) {
if (!viz) {
viz = neo.viz(this, graphModel, layout, style);
viz = neo.viz(this, graphModel, layout, style, onClickFunc);
graphModel.on('updated', function () {
return viz.update();
});
viz.trigger = trigger;
}
return viz.update();
});
Expand Down Expand Up @@ -996,7 +992,7 @@ neo.style = function () {
return _style;
}();

neo.viz = function (el, graph, layout, style) {
neo.viz = function (el, graph, layout, style, onClickFunc) {
var viz = { style: style },
geometry = new NeoD3Geometry(style);
el = d3.select(el);
Expand Down Expand Up @@ -1073,7 +1069,6 @@ neo.viz = function (el, graph, layout, style) {
return d.id;
});
relationshipGroups.enter().append("g").attr("class", "relationship").on("click", onRelationshipClick);

geometry.onGraphChange(graph);

var renderer = void 0;
Expand All @@ -1083,11 +1078,13 @@ neo.viz = function (el, graph, layout, style) {
relationshipGroups.call(renderer.onGraphChange, viz);
}
relationshipGroups.exit().remove();

var nodeGroups = el.select("g.layer.nodes").selectAll("g.node").data(nodes, function (d) {
return d.id;
});
nodeGroups.enter().append("g").attr("class", "node").call(force.drag).call(clickHandler);
nodeGroups.enter().append("g").attr("class", "node").call(force.drag).call(clickHandler).on("click", function (node) {
onClickFunc(_d.event, node);
});

var _ref1 = neo.renderers.node;
for (var _j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
renderer = _ref1[_j];
Expand All @@ -1097,7 +1094,7 @@ neo.viz = function (el, graph, layout, style) {
return force.update(graph, [width, height]);
};
var clickHandler = neo.utils.clickHandler();
clickHandler.on('click', onNodeClick);
clickHandler.on("click", onNodeClick);
clickHandler.on('dblclick', onNodeDblClick);
return viz;
};
Expand Down
Empty file modified scripts/build.js 100644 → 100755
View file
Open in desktop
Empty file.
Empty file modified scripts/start.js 100644 → 100755
View file
Open in desktop
Empty file.
8 changes: 5 additions & 3 deletions src/index.js
View file
Open in desktop
Expand Up @@ -4,9 +4,11 @@ import registerServiceWorker from './registerServiceWorker';
import Neo4jGraphRenderer from 'Neo4jGraphRenderer';

const App = () => (
<div>
<Neo4jGraphRenderer url="http://localhost:7474" user="neo4j" password="password" query="MATCH (n)-[r]->(m) RETURN n,r,m"/>
</div>
<div>
<Neo4jGraphRenderer url="http://localhost:7474" user="neo4j" password="neo4j1"
query="MATCH (n)-[r]->(m) RETURN n,r,m limit 10"
onClick={(event, node) => {console.log(event, node)}} />
</div>
);

ReactDOM.render(<App />, document.getElementById('root'));
Expand Down
7 changes: 6 additions & 1 deletion src/node_modules/Neo4jGraphRenderer/Neo4jGraphRenderer.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions src/node_modules/Neo4jGraphRenderer/assets/graph.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 6 additions & 7 deletions src/node_modules/Neo4jGraphRenderer/assets/renderer.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

18 changes: 9 additions & 9 deletions src/node_modules/Neo4jGraphRenderer/assets/util.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.