An introduction to the Grakn Web Dashboard
Learn to visualise your knowledge base (and catch some Pokemon along the way!).
Here at Grakn Labs we have been writing a number of posts about all the amazing things you can build on top of our knowledge base and some hands-on tutorials on how to start actually using our technology.
We figured it is now time to write something more about the Grakn Dashboard, a component that often gets mentioned but has never been the subject of a full tutorial.
The dashboard tour 🚴
In this guide, we will focus on the main Graph page. We will walk through all the main features that are available to the super enthusiastic Grakn user.
Other guides focused on different pages will follow in the coming weeks.
In the right top corner there is the keyspace handler which allows you to select a keyspace to work with. For this example, we will use the pokemon keyspace. You can find this pokemon dataset here, along with relevant setup info and other documentation. This dataset contains all the pokedex information, i.e: pokemon type, level, name, description, pokedex-number and relations about evolutions and super-effectiveness.
All of the main functionalities can be accessed along the top bar.
From left to right:
- Starred queries button — this will list all the saved queries
- Types panel button — provides a list of concepts that are available in your keyspace, divided into Entities, Resources and Relations
- Graql Editor (input box with the >>) — input box for your Graql queries (
shift+Enterwill add a new line to the editor, useful with long queries) - Execute query button — executes the query
- Clean editor button — cleans the Graql Editor NB:
shift+clickon it will clear Graql Editor and the whole graph. - Query settings button - provides the user few settings for queries
In the following examples we will be using all of the components listed above.
Visualise the keyspace schema
NB: all the queries will add nodes to the graph without deleting the current result shown in the canvas. I.e. if you query for A and, without cleaning the graph, subsequently query for B, you will have both A and B drawn in the canvas
When a schema is made in Graql, it is a list of Graql statements. In order to get an idea of what your schema looks like, and therefore a visual understanding of the many entity-types and their relationships, click the Types panel button and then click All types on the right hand side of the panel.
(Clicking on Entities/Resources/Relations button will show a filtered version of the schema, based on what you just clicked.)
Visualise data instances
Entity instances
You can double click on any type node to fetch instances of that type. For example, by double clicking on pokemon, you will obtain the following:
5 instances of pokemon will appear on the graph. By double clicking again on the pokemon node, another 5 instances will be added to the graph. (You can adjust the number of instances to load for each request in the query settings panel at Query Limit field).
To get the nodes to display additional info, you can click and hold on a pokemon instance node. A small panel will appear in the left bottom corner of the page, from there you can select the resources to use as a node label and the background colour for select type of node:
Another — and quicker — way to display instances of a given type is to click on the Types panel button, click on the arrow next to concept-type button, let’s say Entities, and then select an entity type you are interested in showing. (This method will also write the executed query in the Graql Editor).
This is what results in the dashboard:
We said before that double clicking on a concept type will load instances of that given type; instead, double clicking on an instance node will load all the immediate neighbours. So, for entity type, all the relations attached to it will be loaded. (You can set limits with the Query Limit parameter in Query Settings panel).
When you instead single click on a node you can see all its info and resources in the node panel, which is, by default, positioned on the right side of the page. It is possible to drag it and reposition it (click and drag on the panel title) to wherever is more convenient for you.
Let’s write a query
In this example we will try to find all the poisonous pokemons that are hidden in our dataset, and specifically the ones with a pokedex number that is greater than 40.
The first step would be to identify the way we are categorising pokemon based on their type. A quick look at the node panel makes it clear that the pokemon-type is not listed as a pokemon resources.
The only other place where we can look is relations. So, click on the Types button, then click the arrow next to Relations. Et voila: “has-type” relation!
Clicking on the button will fetch 5 has-type relations with their respective role-players attached. Since we want to make our search more precise, let’s try to write a query in the Graql Editor directly.
match ($x,$y) isa has-type;
$x isa pokemon, has pokedex-no > 40;
$y isa pokemon-type, has name "poison";
offset 0; limit 150;
To achieve the multi-lines effect in the Graql Editor will be enough to shift+Enter after every semi-colon, to create a new line, so that the query looks cleaner.
Every time you find a query that yields interesting results you might be interested in saving it in your favourite queries, so that you don’t have to type it over and over again.
To save the current query just click the round button with + and a popup will appear (this will be probably partially covered by the editor — to work around that, click the round^ button next to the + one to slide up the editor) where you can type a name for the new favourite query.
Now every time you need a query to find poisonous pokemons with pokedex number greater than 40 , you can just select it from the saved queries list. Click USE and then hit Enter.
Multi-select, delete and shortcuts on canvas 🎨
You might need to delete or move multiple nodes at a time. In order to do so, you can select multiple nodes before executing a desired operation. If you ctrl+click (don’t drag) on an empty point of the canvas, you will enable the multi-selection rectangle. Moving the mouse in your canvas (not dragging) will start drawing a selection rectangle. You can also add nodes to the current selection — one by one — by ctrl+clicking on a single node.
This is what you’ll see:
Once multiple nodes are selected you can move them all together or delete them (shift+right-click).
There are also 3 shortcuts to useful queries that you can use on multiple nodes:
- Shortest path: works only when 2 nodes are selected — draws on graph one shortest path between the 2 nodes
- Common concepts: works when at least 2 nodes are selected — finds concepts that are somehow related to all the selected nodes
- Explore relations: works when at least 2 nodes are selected — finds relations that somehow relate the selected nodes
In order to use these shortcuts you can select multiple nodes and than right-click on canvas to show the context menu. From there click on the shortcut you want to try and a query builder will prepare the query and write it in the Graql Editor. You can edit it before hitting Enter and execute it.
Conclusion 👋🏼
In this quick tour we just focused on the main features that are available in the Graph page of our web dashboard.
In future posts about the Grakn Dashboard we will cover the remaining pages and we will also talk about other interesting ways that the user can interact with the data in the graph.
The dashboard is still in its early stage of development — things need to improve and many new features need to be added. Keep following our blog to find out about interesting news about our dashboard!
If you enjoyed this article, please hit the clap button below, so others can find it too. Please get in touch if you’ve any questions or comments, either below, via our Community Slack channel, or via our discussion forum.
Find out more from https://grakn.ai.
