Visulaization on web interface in ArangoDb not working as expected - arangodb

Question

I am testing ArangoDb for using the graph features provided by the framework.
I am trying to create a very simple graph like below, similar to the Java driver example provided here, https://github.com/arangodb/arangodb-java-driver/
List<EdgeDefinitionEntity> edgeDefinitions = new ArrayList<EdgeDefinitionEntity>();
EdgeDefinitionEntity edgeDefinition = new EdgeDefinitionEntity();
edgeDefinition.setCollection("myEdgeCollection");
List<String> from = new ArrayList<String>();
from.add("myCollection1");
edgeDefinition.setFrom(from);
List<String> to = new ArrayList<String>();
to.add("myCollection2");
edgeDefinition.setTo(to);
edgeDefinitions.add(edgeDefinition);
GraphEntity graph = arangoDriver.createGraph("myGraph",
edgeDefinitions, null, true);
User myObject1 = new User("Homer", 38);
User myObject2 = new User("Bart", 36);
User myObject3 = new User("Marge", 39);
User myObject4 = new User("Lisa", 40);
DocumentEntity<User> vertexFrom1 = arangoDriver.graphCreateVertex(
"myGraph", "myCollection1", myObject1, true);
DocumentEntity<User> vertexFrom2 = arangoDriver.graphCreateVertex(
"myGraph", "myCollection1", myObject2, true);
DocumentEntity<User> vertexTo1 = arangoDriver.graphCreateVertex(
"myGraph", "myCollection2", myObject3, true);
DocumentEntity<User> vertexTo2 = arangoDriver.graphCreateVertex(
"myGraph", "myCollection2", myObject4, true);
EdgeEntity<?> edge1 = arangoDriver.graphCreateEdge("myGraph",
"myEdgeCollection", null, vertexFrom1.getDocumentHandle(),
vertexTo1.getDocumentHandle(), null, null);
EdgeEntity<?> edge2 = arangoDriver.graphCreateEdge("myGraph",
"myEdgeCollection", null, vertexFrom2.getDocumentHandle(),
vertexTo2.getDocumentHandle(), null, null);
The edge collection seems to have a right mapping,
{"_from":"myCollection1/1544266710","_to":"myCollection2/1544987606"}
{"_from":"myCollection1/1544528854","_to":"myCollection2/1545249750"}
I am trying to visualise this graph in the web interface. Graph visualization is showing some weird behaviour which I do not understand. In the above setup, I expect four nodes in the graph with edges between "Homer" -- "Marge" and "Bart" -- "Lisa" but I see only two nodes and one edge, i.e. Homer -- Marge.
Visulaization view itself sometimes shows that there are no nodes and on revisit to the same page nodes appear.

Answer 1

The graph viewer starts with a random vertex. That means it probably uses a totally different start vertex whenever it's opened.
This is because a graph in the general case can contain many vertices and displaying all of them together is not an option because it may take a long time to render or even crash the browser. Which vertex to put into the center of the display at start is also not really easy to determine because this would require the graph viewer to know which vertex is more important than others or most important to the users. As it doesn't know that, there is the random start vertex selection.
You can select a different start/center vertex by clicking on the filter icon in the top right of the graph viewer. This will bring up a search input field that you can use to select a start vertex by any attribute (e.g. name == Homer if your vertices contain a name attribute).
If such vertex exists, it will be put into the center of the screen, along with all its directly connected vertices. Note that only relationships/edges from the start vertex to its directly connected vertices will be shown. Indirect connections will not be shown in the graph viewer by default. Clicking on any of the vertices displayed will expand (or contract) them and may bring up further relationships.
Again all of this is done because it may not be possible to display the entire graph at start (imagine a graph with a few million nodes). But as your question indicates, the current solution may not be intuitive.