No `GitGraph` appears when selecting a repository from `Repository Map` drop-down menu

[nelsonni]

Describe the bug When selecting a branch from the Repository Map drop-down menu, a GitGraph should be generated to display the commits and branches found for the selected repository. However, currently no graph is displayed when a repository is selected.

To Reproduce Steps to reproduce the behavior:

1. Launch Synectic
2. Go to File → Open...
3. Select the root repository directory of a project
4. Select the repository from the Repository Map drop-down menu
5. Observe that no graph is generated on the canvas

Expected behavior A GitGraph should be generated and displayed on the canvas. See the following screenshot as an example:

Screenshots The following screenshot shows what happens when selecting the same repository from the Repository Map menu as shown in the Expected behavior above (albeit under v3.2.0 instead of v1.3.0):

Versions (please complete the following information):

• OS: Linux, MacOS, Windows
• Synectic Version: 3.2.0

Additional context Examining the Redux Store state in the Chrome DevTools panel of the screenshot above shows that no commits were added to the particular branch being selected to show in the GitGraph. This is likely the cause of the missing graph, but will require deeper analysis to determine why this data is missing when repositories and branches are ingested into Synectic.

[nelsonni]

If it becomes necessary to replace react-flow-renderer, some of the newer options available include:

• react-digraph
• cytoscape.js-dagre
• airbnb/visx

The original implementation of the GitGraph component was made #292; this PR includes several academic references relating to the acyclic digraphs and their layouts. A good tutorial on integrating and managing an acyclic digraph at the data layer can be found in Using a Directed Acyclic Graph in a React-Redux Application.

[nelsonni]

We use dagre under the hood to layout the graph, which is then rendered by react-flow-renderer. In the documentation for dagre, under the section titled A Note on Rendering, there are additional render options described:

• dagre-d3 is a D3-based renderer for dagre.
• JointJS is a renderer that provides facilities for editing a graph after it has been rendered.
• Cytoscape.js is a complete graph library, supporting visualisation and analysis usecases, that can use Dagre as a layout. Cytoscape.js has sophisticated rendering that is specified by CSS-like stylesheets.

[nelsonni]

Tests appear to indicate that a change in either react-flow-renderer or dagre is resulting in an additional empty Node object being created for the origin commit of Git branches (which have a parent value of "") upon calling getEdges during the layout optimization of the resulting graph.

This is also evident when examining the edges created from that getEdges function on a normal Git repository. The edges all contain source: '' instead of properly linking to their parent commit node:

[nelsonni]

The culprit is getEdges, which does not validate whether incoming CommitVertex objects contain valid oid values for parent commits. In the case of regular commits this is not an issue, but the origin commit for any Git repository will not contain a valid parent oid since they are necessarily parent-less. The simple fix for this is contained in https://github.com/EPICLab/synectic/commit/4a6f024fc1e0a6fe394dba0237cd3168a1669367:

const getEdges = (commit: CommitVertex): Edge[] => {
-    return commit.parents.map(parent => ({
+    return commit.parents.filter(parent => parent.length > 0).map(parent => ({
        id: `e${parent.slice(0, 7)}=${commit.staged ? commit.oid : commit.oid.slice(0, 7)}`,
        source: parent,
        target: commit.oid,