Ogma + React/Redux

Download template Open in playground

The following tutorial aims to help you create your own apps with Ogma and React/Redux.

You may also want to check out the ogma-react wrapper for seamless integration between Ogma and React.

Have a look to the React tutorial to get an introduction on how to wrap Ogma into a React component.

Here we will see how to create slices with Ogma and Redux.

Your first slice

Most of Ogma's API methods are asynchronus, due to animations. So we will need to use createAsyncThunk quite often. The idea is to call the API of Ogma inside this Thunks and then update the state of the application on reject, pending, fulfilled. Let's start with the setGraph method. What we need to do is

• wrap setGraph into a Thunk
• handle reject,pending, fullfilled and update the state of the app.

export const setGraph = createAsyncThunk('ogma/setGraph', graph => {
  return ogma.parse
    .neo4j(graph)
    .then(graph => {
      return ogma.setGraph(graph);
    })
    .then(() => ogma.layouts.force({ locate: true }))
    .then(() => ogma.export.json({ download: false }));
});

Here this Thunk parses a graph, sets it in Ogma and returns a stringify version of the state of Ogma. This method is simple but is not the most efficient or large graphs, as it stringifies and parses graphs at each change of the state.

Now that we have created our Thunk, we hook to its events and update the state accordingly:

export const ogmaSlice = createSlice({
  name: 'ogma',
  initialState,
  reducers: {},
  extraReducers: builder => {
    builder.addCase(setGraph.fulfilled, (state, action) => {
      const { nodes, edges } = JSON.parse(action.payload);
      state.nodes = nodes;
      state.edges = edges;
      state.animating = false;
    });
    builder.addCase(setGraph.pending, (state, action) => {
      state.animating = true;
    });
    builder.addCase(setGraph.rejected, (state, action) => {
      state.animating = false;
    });
})

In the piece of code above, we say:

• When we start adding a graph (pending), we switch to the animating state.
• When the graph is set, or when an error is triggered, we can switch back to the non animatingstate.
• If the setGraph was successfull, we can update the state and assign the new nodes and edges to it.

Adding new features

Now that you know how to set a graph, you can wrap up any function from Ogma API into React-Redux by creating Thunks and hook to pending, rejected and fullfilled to update your state.

How to go further in the design

This example is very small and aims to give you a quick start while letting you room for making your own decisions about the design. Let's see what you can take in consideration to build your solution.

Storing less data

If you are working with huge graphs, you might want to avoid stringiying and parsing the graph on each interraction. There are many ways and designs you can adopt, and everything depends on your needs and use.

You can choose for example, instead of storing the whole graph with data and attributes, to store only the data of your nodes and edges. You could even store only their ids and then work with NodeList and EdgeList, which are optimised, to avoid unnecessary copies of data.

Split logic and state

In this example, there are two places where the logic is written:

• ogma.jsx, which wraps the Ogma instance into a React component
• ogmaSlice.js which wraps the Ogma API into a Redux state managment system.

As Ogma contains both logic and state, it will be your choice to handle features on one of the other part of the app.

For example, in the React tutorial, the changes of layout are handled in the component via changes of the state, while in the current example, changes of layout are triggered by actions in the state. It is all a matter of design and how you organise things.