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

link:./src/js/config/application.js[role=include]

Neo4j configuration

Edit the file src/js/config/neo4j.js

link:./src/js/config/application.js[role=include]

Graph style configuration

Edit the file src/js/config/sigma-graph-style.js

link:./src/js/config/sigma-graph-style.js[role=include]

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 :

@color-first: #000000;
@color-second: #808080;
@color-third: #8c4cc0;
@color-fourth: #43358b;

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.

link:./src/js/config/sitemap.js[role=include]

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 :

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 :

{
  // 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 :

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 :

// 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 :

// 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

<ReactSigma
  // sigma configuration (see ./src/js/config/sigma.js)
  options={this.props.sigmaOptions}
  // the graph object to display ( {nodes:[], edges:[]})
  graph={this.state.graph}
  // Configuration of the layout ForceAtlas (see ./src/js/config/sigma-layout.js)
  layout={this.props.layoutOptions}
  // graph style configuration (see ./src/js/config/sigma-graph-style.js)
  style={sigmaGraphStyle}>
</ReactSigma>

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.

import TextCypherComplete  from "~/components/dumb/jsonschema-custom/text-cypher-complete";
import Form from "react-jsonschema-form";

link:./src/js/pages/person/config.js[role=include]

<Form schema={searchSchema}
      uiSchema={searchUi}
      liveValidate={true}
      onSubmit={ data => 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.

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; }; }
}];
...
<SimpleTable data={this.state.data} actions={simpleTableActions}/>

NB: Every column that doesn’t start with _ is displayed.

ankushsaini44 / neo4j-react-bootstrap Goto Github PK