{"id":16853579,"url":"https://github.com/sim51/neo4j-react-bootstrap","last_synced_at":"2025-04-11T07:12:44.319Z","repository":{"id":142401815,"uuid":"75625483","full_name":"sim51/neo4j-react-bootstrap","owner":"sim51","description":"Neo4j react bootstrap project","archived":false,"fork":false,"pushed_at":"2017-01-30T15:57:46.000Z","size":55,"stargazers_count":10,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T07:12:34.205Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sim51.png","metadata":{"files":{"readme":"README.adoc","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-05T13:05:54.000Z","updated_at":"2024-01-21T14:10:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"401de79f-8f12-45e0-a006-e2e49f32b72b","html_url":"https://github.com/sim51/neo4j-react-bootstrap","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sim51%2Fneo4j-react-bootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sim51%2Fneo4j-react-bootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sim51%2Fneo4j-react-bootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sim51%2Fneo4j-react-bootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sim51","download_url":"https://codeload.github.com/sim51/neo4j-react-bootstrap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248358603,"owners_count":21090405,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-13T13:52:08.253Z","updated_at":"2025-04-11T07:12:44.296Z","avatar_url":"https://github.com/sim51.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"= Neo4j react bootstrap\n\n== Requirements\n\n* Have `NPM` installed on your laptop\n\n== How to execute\n\n* clone this repository\n* go to the project folder\n* make `npm install`\n* make `npm start`\n* go to `http://localhost:8080`\n\n== Configuration\n\nAll configurations files are located under `src/js/config`.\nTo configure the application, you can edit them, or open your browser at this url : `http://localhost:8080/#/settings/application`\n\n=== General application configuration\n\nEdit the file `src/js/config/applications.js`\n\n[source,javascript]\n----\ninclude::./src/js/config/application.js[]\n----\n\n=== Neo4j configuration\n\nEdit the file `src/js/config/neo4j.js`\n\n[source,javascript]\n----\ninclude::./src/js/config/application.js[]\n----\n\n=== Graph style configuration\n\nEdit the file `src/js/config/sigma-graph-style.js`\n\n[source,javascript]\n----\ninclude::./src/js/config/sigma-graph-style.js[]\n----\n\n=== Style configuration\n\nStyling is done via `less`, and all the style configuration should be done here : `src/less/variables`.\nGenerally, I only change thoses variables :\n\n[source,less]\n----\n@color-first: #000000;\n@color-second: #808080;\n@color-third: #8c4cc0;\n@color-fourth: #43358b;\n----\n\n=== Sitemap, router \u0026 menu configuration\n\nEdit the file `src/js/config/sigma-graph-style.js`.\nThis file is used to make the routing (based on the state) and the main menu.\n\n[source,javascript]\n----\ninclude::./src/js/config/sitemap.js[lines=\"15..42\"]\n----\n\n== Some services\n\n=== Log\n\nThere is a logger service that helps you to log what you want into the browser console, depending to the log configuration.\nMoreover, messages into the console are colorised according to their level.\n\nHow to use it :\n\n* make the import : `import Log from \"~/services/log\";`\n* create the logger with a name : `const log = new Log(\"Component.PersonSearch\");`\n* And makes some logs :\n\n[source,javascript]\n----\nlog.error(\"I'm an error\");\nlog.warn(\"I'm an warning\");\nlog.info(\"Just an info\");\nlog.debug(\"Debug message\");\n----\n\n=== Notification\n\nThere is a Notification service that helps you to create some notification for the end-user.\nA notification block will appear on the bottom right of the window, with your message.\nIt will automatically turn off after some seconds, but if the end-user put its pointer on it, it stays.\n\nNotifications are stored into the baobab tree at this cursor : `notifications : []`\n\nYou have to push a new object into this array, that following this structure :\n\n[source, javascript]\n----\n{\n  // title of the notification\n  title: \"Error: \",\n  // message to display\n  message: \"L'erreur suivante est apparue lors de l'exécution de la requête =\u003e \\n\" + JSON.stringify(error),\n  // type of the notification. Available vaules are : success, info, warning, danger\n  type : \"danger\"\n}\n----\n\nTo help you to push this notification, there is a baobab action for that :\n\n* import the action : `import * as notification from '~/actions/notifications';`\n* into your baobab branched component, you just have to do this :\n\n[source,javascript]\n----\nthis.props.dispatch( notification.pushNotification, {\n  title: \"Error: \",\n  message: \"L'erreur suivante est apparue lors de l'exécution de la requête =\u003e \\n\" + JSON.stringify(error),\n  type : \"danger\"\n});\n----\n\n=== Neo4j\n\nThere is a Neo4j service that helps you to communicate with a Neo4j server.\n\nHow to use it :\n\n* make the import : `import Neo4jService from \"~/services/neo4j/neo4j\";`\n* create an instance : `this.neo4j = new Neo4jService(this.props.neo4j.url, this.props.neo4j.login, this.props.neo4j.password);`\n* And makes some queries :\n\n[source,javascript]\n----\n// Run the query\nthis.neo4j.cypher('MATCH (n) WHERE id(n)={id} RETURN n', {id:1})\n.then(result =\u003e {\n  log.debug(\"Query result is :\" + JSON.stringify(result));\n  this.setState({\n    data: result\n  });\n})\n.catch( error =\u003e {\n  this.props.dispatch( notification.pushNotification, {\n    title: \"Error: \",\n    message: \"An error occured =\u003e \\n\" + JSON.stringify(error),\n    type : \"danger\"\n  });\n});\n----\n\nOr get a graph format :\n\n[source,javascript]\n----\n// Run the query\nthis.neo4j.graph('MATCH (n) RETURN n LIMIT 25', {})\n.then(result =\u003e {\n  log.debug(\"Query result is :\" + JSON.stringify(result));\n  this.setState({\n    graph: result // result is a '{ nodes[], edges:[] }'' compatible with sigma\n  });\n})\n.catch( error =\u003e {\n  this.props.dispatch( notification.pushNotification, {\n    title: \"Error: \",\n    message: \"An error occured =\u003e \\n\" + JSON.stringify(error),\n    type : \"danger\"\n  });\n});\n----\n\n== Some components\n\n=== Sigma\n\n[source,javascript]\n----\n\u003cReactSigma\n  // sigma configuration (see ./src/js/config/sigma.js)\n  options={this.props.sigmaOptions}\n  // the graph object to display ( {nodes:[], edges:[]})\n  graph={this.state.graph}\n  // Configuration of the layout ForceAtlas (see ./src/js/config/sigma-layout.js)\n  layout={this.props.layoutOptions}\n  // graph style configuration (see ./src/js/config/sigma-graph-style.js)\n  style={sigmaGraphStyle}\u003e\n\u003c/ReactSigma\u003e\n----\n\nFor now, when you hover a sigma objet, its is saved into baobab cursor `data, over`.\nThis is used by the `GraphDisplayObject` component\n\n=== JSon schema form\n\nMaking some html form is really painfull ... but there is react JSON schema form for that :\nhttps://github.com/mozilla-services/react-jsonschema-form\n\nYou just have to create a JSON schema object, and a UI object to display a form.\nMoreover there is a widget that create an input text with some cypher autocompletion.\n\n[source,javascript]\n----\nimport TextCypherComplete  from \"~/components/dumb/jsonschema-custom/text-cypher-complete\";\nimport Form from \"react-jsonschema-form\";\n\ninclude::./src/js/pages/person/config.js[lines=\"3..23\"]\n\n\u003cForm schema={searchSchema}\n      uiSchema={searchUi}\n      liveValidate={true}\n      onSubmit={ data =\u003e this.saveFormToStore(data) }\n      formData={this.props.search}\n      className={\"\"}\n      widgets={{ textCypherComplete: TextCypherComplete }}/\u003e\n----\n\n=== Simple table\n\nThis component helps to display a cypher result as a table, and allow you to add some actions for every row.\n\n[source,cypher]\n----\nthis.neo4j.cypher(configMovie.searchQuery, nextProps.search)\n    .then(result =\u003e {\n        log.debug(\"Query result is :\" + JSON.stringify(result));\n        this.setState({\n           data: result\n        });\n    })\n...\nvar simpleTableActions = [ {\n  // the fontawesome icon configuration\n  icone:'eye',\n  // Name of the action (display on hover)\n  title:'See movie detail',\n  // function to execute on the click\n  event: (e) =\u003e { return (ev) =\u003e { window.location.hash = '/movie/' + e._id; }; }\n}];\n...\n\u003cSimpleTable data={this.state.data} actions={simpleTableActions}/\u003e\n----\n\nNB: Every column that doesn't start with `_` is displayed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsim51%2Fneo4j-react-bootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsim51%2Fneo4j-react-bootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsim51%2Fneo4j-react-bootstrap/lists"}