https://github.com/sim51/neo4j-react-bootstrap
Neo4j react bootstrap project
https://github.com/sim51/neo4j-react-bootstrap
Last synced: about 2 months ago
JSON representation
Neo4j react bootstrap project
- Host: GitHub
- URL: https://github.com/sim51/neo4j-react-bootstrap
- Owner: sim51
- Created: 2016-12-05T13:05:54.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-01-30T15:57:46.000Z (over 8 years ago)
- Last Synced: 2025-04-11T07:12:34.205Z (about 2 months ago)
- Language: JavaScript
- Size: 53.7 KB
- Stars: 10
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.adoc
Awesome Lists containing this project
README
= Neo4j react bootstrap
== Requirements
* Have `NPM` installed on your laptop
== How to execute
* clone this repository
* go to the project folder
* make `npm install`
* make `npm start`
* go to `http://localhost:8080`
== Configuration
All configurations files are located under `src/js/config`.
To configure the application, you can edit them, or open your browser at this url : `http://localhost:8080/#/settings/application`
=== General application configuration
Edit the file `src/js/config/applications.js`
[source,javascript]
----
include::./src/js/config/application.js[]
----
=== Neo4j configuration
Edit the file `src/js/config/neo4j.js`
[source,javascript]
----
include::./src/js/config/application.js[]
----
=== Graph style configuration
Edit the file `src/js/config/sigma-graph-style.js`
[source,javascript]
----
include::./src/js/config/sigma-graph-style.js[]
----
=== Style configuration
Styling is done via `less`, and all the style configuration should be done here : `src/less/variables`.
Generally, I only change thoses variables :
[source,less]
----
@color-first: #000000;
@color-second: #808080;
@color-third: #8c4cc0;
@color-fourth: #43358b;
----
=== Sitemap, router & menu configuration
Edit the file `src/js/config/sigma-graph-style.js`.
This file is used to make the routing (based on the state) and the main menu.
[source,javascript]
----
include::./src/js/config/sitemap.js[lines="15..42"]
----
== Some services
=== Log
There is a logger service that helps you to log what you want into the browser console, depending to the log configuration.
Moreover, messages into the console are colorised according to their level.
How to use it :
* make the import : `import Log from "~/services/log";`
* create the logger with a name : `const log = new Log("Component.PersonSearch");`
* And makes some logs :
[source,javascript]
----
log.error("I'm an error");
log.warn("I'm an warning");
log.info("Just an info");
log.debug("Debug message");
----
=== Notification
There is a Notification service that helps you to create some notification for the end-user.
A notification block will appear on the bottom right of the window, with your message.
It will automatically turn off after some seconds, but if the end-user put its pointer on it, it stays.
Notifications are stored into the baobab tree at this cursor : `notifications : []`
You have to push a new object into this array, that following this structure :
[source, javascript]
----
{
// title of the notification
title: "Error: ",
// message to display
message: "L'erreur suivante est apparue lors de l'exécution de la requête => \n" + JSON.stringify(error),
// type of the notification. Available vaules are : success, info, warning, danger
type : "danger"
}
----
To help you to push this notification, there is a baobab action for that :
* import the action : `import * as notification from '~/actions/notifications';`
* into your baobab branched component, you just have to do this :
[source,javascript]
----
this.props.dispatch( notification.pushNotification, {
title: "Error: ",
message: "L'erreur suivante est apparue lors de l'exécution de la requête => \n" + JSON.stringify(error),
type : "danger"
});
----
=== Neo4j
There is a Neo4j service that helps you to communicate with a Neo4j server.
How to use it :
* make the import : `import Neo4jService from "~/services/neo4j/neo4j";`
* create an instance : `this.neo4j = new Neo4jService(this.props.neo4j.url, this.props.neo4j.login, this.props.neo4j.password);`
* And makes some queries :
[source,javascript]
----
// Run the query
this.neo4j.cypher('MATCH (n) WHERE id(n)={id} RETURN n', {id:1})
.then(result => {
log.debug("Query result is :" + JSON.stringify(result));
this.setState({
data: result
});
})
.catch( error => {
this.props.dispatch( notification.pushNotification, {
title: "Error: ",
message: "An error occured => \n" + JSON.stringify(error),
type : "danger"
});
});
----
Or get a graph format :
[source,javascript]
----
// Run the query
this.neo4j.graph('MATCH (n) RETURN n LIMIT 25', {})
.then(result => {
log.debug("Query result is :" + JSON.stringify(result));
this.setState({
graph: result // result is a '{ nodes[], edges:[] }'' compatible with sigma
});
})
.catch( error => {
this.props.dispatch( notification.pushNotification, {
title: "Error: ",
message: "An error occured => \n" + JSON.stringify(error),
type : "danger"
});
});
----
== Some components
=== Sigma
[source,javascript]
----
----
For now, when you hover a sigma objet, its is saved into baobab cursor `data, over`.
This is used by the `GraphDisplayObject` component
=== JSon schema form
Making some html form is really painfull ... but there is react JSON schema form for that :
https://github.com/mozilla-services/react-jsonschema-form
You just have to create a JSON schema object, and a UI object to display a form.
Moreover there is a widget that create an input text with some cypher autocompletion.
[source,javascript]
----
import TextCypherComplete from "~/components/dumb/jsonschema-custom/text-cypher-complete";
import Form from "react-jsonschema-form";
include::./src/js/pages/person/config.js[lines="3..23"]
this.saveFormToStore(data) }
formData={this.props.search}
className={""}
widgets={{ textCypherComplete: TextCypherComplete }}/>
----
=== Simple table
This component helps to display a cypher result as a table, and allow you to add some actions for every row.
[source,cypher]
----
this.neo4j.cypher(configMovie.searchQuery, nextProps.search)
.then(result => {
log.debug("Query result is :" + JSON.stringify(result));
this.setState({
data: result
});
})
...
var simpleTableActions = [ {
// the fontawesome icon configuration
icone:'eye',
// Name of the action (display on hover)
title:'See movie detail',
// function to execute on the click
event: (e) => { return (ev) => { window.location.hash = '/movie/' + e._id; }; }
}];
...
----
NB: Every column that doesn't start with `_` is displayed.