Bolt-On your Web App to Neo4j Who are we? Michael Opitz Christian - PowerPoint PPT Presentation

Bolt-On your Web App to Neo4j

Who are we? Michael Opitz Christian Ranz Codastic A FULL STACK WEB SOFTWARE AND SERVICES APPLICATION DEVELOPMENT FOR KNOWLEDGE GRAPHS. FREELANCER NETWORK. Services: Services: ● data & ontology modeling ● reasoning services ● Web applications and websites in React, ● visual data analytics Gatsby, … ● APIs with node.js, rest, GraphQL Products: ● GraphScale ● SemSpect

What is SemSpect? A Brief Demo

Graph Apps – Reach More People

SemSpect Architecture Backend (GraphScale): GraphScale ● Restlet JAVA API SemSpect Client Neo4j ● Embedded Neo4j Client: HTTP Java REST API Rest ● Ext JS components ● Redux like Flux architecture ● Modular HTTP API layer

How to Transform SemSpect into a Graph App? GraphScale Neo4j Graph App Neo4j Desktop SemSpect Client Neo4j ? HTTP Java REST API Graph Rest Graph

SemSpect as Neo4j Graph App Neo4j Graph App Neo4j Desktop SemSpect Client SemSpect Graph Plugin Graph SemSpect Graph Plugin exchangeable Bolt request layer Protocol Graph

Exchangeable API Request Layer Our exchangeable request layer is able to perform Rest like api requests over the Bolt protocol. Neo4j Graph App Neo4j Desktop SemSpect Client SemSpect Graph Plugin Graph SemSpect Graph Plugin exchangeable Bolt request layer Protocol Graph

Exchangeable API Request Layer Client business logic API layer tree.remove('someTreeId') Request layer request.delete('/tree/:id') Graph or Web App Web Graph App App HTTP Layer Bolt Layer fetch('http:// … ', {method: 'DELETE'}) session.run('CALL deleteTree( … )') HTTP Rest Bolt Protocol JAVA Restlet API Neo4j Graph Plugin Details

SemSpect Graph Plugin Graph Plugin answering Rest like api requests over the Bolt protocol. Neo4j Desktop Neo4j Graph App SemSpect SemSpect Client Graph Plugin Graph SemSpect Graph Plugin exchangeable Graph Bolt request layer Protocol

SemSpect Graph Plugin Neo4j Graph Plugin JAVA Restlet API Rest Layer Bolt Layer void handle(Request,Response) Record deleteTree(String) Backend Business Logic Pojo deleteTree(String) Cypher/ Java-Api Neo4j Embedded (looks the same in both scenarios)

Bolt Layer- Challenges JSON-Objects (data): ● Can’t send back json objects directly through bolt ○ Solution: Use Jackson to map pojos to maps ● Neo4j supports only certain types ○ Solution: Use Jackson’s custom serializer HTTP Status Codes: ● Can’t signal http status codes/statusText through Exceptions ○ Solution: Add statusCode/statusText Field to Record Persisting User Data ● We don’t want to modify the database ○ Solution: Write to File System

Challenges / Conclusion ● Persisting user data ○ Electron local storage and file system ● Missing or inconsistent documentation ● deprecation policy

Questions?

Thank you!

Hunger Games Questions for “Bolt-On Your Web App to Neo4j” 1. What is SemSpect? a. A database performance monitoring application b. A graph exploration and visualization tool c. A data import tool 2. Graph Apps interact with Neo4j Desktop by which standardized client-server protocol? a. HTTP b. Bolt Protocol c. RPC (Remote Procedure Call) 3. What are the 3 fields in a record to mimic a http response over bolt? a. statusCode / statusText / data b. contentType / statusText / data c. statusCode / contentType / body Answer here: r.neo4j.com/hunger-games

Links ● Neo4j Procedures: https://neo4j.com/docs/java-reference/current/extending-neo4j/ ● Neo4j Datatypes: https://neo4j.com/docs/java-reference/current/extending-neo4j/procedures-and-functions/values-and-types/ ● Jackson: https://github.com/FasterXML/jackson ● Semspect: http://semspect.de/ ● Semspect Panama Demo: http://panama.semspect.de/ ● Bitbucket Snippet of the Bold request layer: https://bitbucket.org/snippets/derivo/Argdq7 ● Bitbucket Snippet of an example Backend: https://bitbucket.org/snippets/derivo/8nMr98 ● Neo4j Developer Graph Apps Gallery: https://install.graphapp.io/

How does a request look like?

How does a request look like? Remove a tree by Id function async remove(id) { const result = await api.tree.remove(id); dispatcher.dispatch( createAction( call the request layer with a route 'ACTION_TREE_REMOVED', { result } ) ); Bolt request layer } Map route to procedure and map parameters Run the procedure on the bolt session Find the response in the results and return Dispatch an action with the result

How does a request look like? Remove a tree by Id function remove(id) { return request.remove( '/tree/:id', { id } ); call the request layer with a route } Bolt request layer Map route to procedure and map parameters Run the procedure on the bolt session Find the response in the results and return Dispatch an action with the result

How does a request look like? Remove a tree by Id function mapPathToProcedure( method, procedures, path, params ) { // … call the request layer with a route return procedures[method][path]; } Bolt request layer const procedures = { POST: { Map route to procedure and map parameters '/tree': { name: 'saveTree', params: { Run the procedure on the bolt session label: mapString, description: mapString, state: a => a Find the response in the results and return }, responseDataMapper: data => ({ data }) } } Dispatch an action with the result }, GET: { /* … */ }, PUT: { /* … */ }, DELETE: { /* … */ } }

How does a request look like? Remove a tree by Id session.run( `CALL ${procedureName}`, requestParams ).then(results => { call the request layer with a route return getResponseFromNeo4jResults( results, responseDataMapper Bolt request layer ); }) Map route to procedure and map parameters Run the procedure on the bolt session Find the response in the results and return Dispatch an action with the result

How does a request look like? Remove a tree by Id function getResponseFromNeo4jResults( result ) { const record = result.records[0]; call the request layer with a route return { data: record.get('data'), status: record.get('status'), Bolt request layer statusText: record.get('statusText'), }; Map route to procedure and map parameters } Run the procedure on the bolt session Find the response in the results and return Dispatch an action with the result

How does a request look like? Remove a tree by Id function async remove(id) { const result = await api.tree.remove(id); dispatcher.dispatch( createAction( call the request layer with a route 'ACTION_TREE_REMOVED', { result } ) ); Bolt request layer } Map route to procedure and map parameters Run the procedure on the bolt session Find the response in the results and return Dispatch an action with the result Back