Skip to content

neo4j-labs/charts

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
November 17, 2020 14:14
February 11, 2021 15:56
October 5, 2020 13:56
October 5, 2020 13:56
April 7, 2022 14:48
October 29, 2020 17:31
April 30, 2021 11:25
October 29, 2020 17:31
April 7, 2022 14:48

Graph App Starter - React

This repository is your starter kit for building a Graph App for Neo4j Desktop. Feel free to fork this project.

Getting Started

The repository uses the use-neo4j hooks to communicate with Neo4j using Cypher Statements. This is a package intended to speed up the development by reducing the amount of boilerplate code required. It is not intended for public-facing/production applications used by external users.

Provider

The Neo4jProvider is included in in src/index.ts and is used to wrap the app. When you first run the app, you will be presented with a login form which is used to create a driver within the Neo4jContext. This context (exported from use-neo4j) can then be used to obtain the driver instance.

You can default the scheme, host, port, username, password or database

Alternatively you can pass a driver instance to the Neo4jProvider if you know the Neo4j credentials up front.

import { Neo4jProvider, createDriver } from 'use-neo4j'

const driver = createDriver('neo4j', 'localhost', 7687, 'neo4j', 'letmein')

ReactDOM.render(
  <React.StrictMode>
    <Neo4jProvider driver={driver}>
      <App />
    </Neo4jProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Querying Neo4j

use-neo4j provides useReadCypher and useWriteCypher hooks for querying Neo4j. Both hooks return a Neo4jResultState which provides helpers for accessing the query state and results.

useReadCypher(cypher: string, params?: Record<string, any>, database?: string): Neo4jResultState

Example code:

function MyComponent() {
    const query = `MATCH (m:Movie {title: $title}) RETURN m`
    const params = { title: 'The Matrix' }

    const { loading, first } = useReadCypher(query, params)

    if ( loading ) return (<div>Loading...</div>)

    // Get `m` from the first row
    const movie = first.get('m')

    return (
        <div>{movie.properties.title} was released in {movie.properties.year}</div>
    )
}

For more information, check the use-neo4j README.

Testing Your Graph App

To test your Graph App, open up Neo4j Desktop and navigate to the Application Settings tab. Under Developer Tools, check Enable development mode, enter http://localhost:3000 (or the URL to this app from yarn start) into the Entry Point and / into the Root Path.

Next, open the Action Bar using Ctrl+K on Windows/Linux or CMD+K on a Mac and start to type Development App - hit enter when Open Development App is highlighted.

Building your Graph App

To build your Graph App, use the yarn build command. This will generate a dist/ folder with the built assets. Running npm pack will generate a .tgz file which can be dragged into the Install form at the bottom of the Graph Apps pane.

Releasing your Graph App

You can publish your Graph App to npm or share the .tgz file with your colleagues.

Let us know about your app on the Neo4j Community Site or if you would like a link added to The Graph App Gallery.

About

Build Charts from your Graphs

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages