I see that there are some wishes about viewing dependencies of items in "#mydreamapp inspiration board". So a tool for visualizing and analysis of these dependencies would be useful.

What it does

It is a board view. It will generate "compound nodes" for each "group" of the board. It will generate "nodes" from items. Then it will generate "edges" for each "dependency" column type.

After the graph is built, the user can play with it. There are different layout algorithms to show dependencies effectively for e.g. "Top to bottom", "Left to right" etc...

The user can save the graph to a JSON file and load it. The user can save it as an image file. The user can save only the selected.

The user can delete, hide, highlight, and go back in history.

The user can generate/delete groups and edges. (only on the client-side)

If your data is too big, you can load it page by page.

Even if there is no dependency column in your board, by generating edges (dependencies) between items, you can foresee how it will look like if dependencies exist. So the user can make plans about adding dependencies.

How I built it

I used angular, cytoscape.js, and, many cytoscape.js extensions. I use lots of common things from my graph visualization project Davraz

Challenges I ran into

I didn't work with reactjs and graphql before. At first, I think about building it from scratch using reactjs and typescript. So I learned some reactjs and graphql.

But I think the biggest challenge is to decide on a project. Since I never used before, I don't really know how people use it in real life. Even if I know that I should have some real data to make an analysis and play with it.

Accomplishments that I'm proud of

I can say it provides a nice and effective visualization of dependencies. Giving the user a chance to viewing groups as compound nodes are also cool. By simply clicking and dragging, the user can generate edges (dependencies) between nodes.

What I learned API, graphql, reactjs components

What's next for Graph View

Currently, API does not support mutating dependency columns. If it supports that, I would like to give ability to mutate dependency columns from graph view.

Built With

Share this project: