Announcing Graph Visualization in TypeDB Studio

Announcements
1

Graph visualization in TypeDB Studio is now available! Try it at https://studio.typedb.com.

You’ll need to update your TypeDB to the latest version - 3.3.0, which is now generally available. If you’re on TypeDB Cloud, navigate to your Cloud cluster and hit “Update”. Or for TypeDB CE, follow the instructions at TypeDB | Docs > Manual > TypeDB Community Edition.

TypeDB 3.3’s HTTP-based Query API now includes a representation of the query structure. This is what powers Studio’s graph visualizer, and should also be of particular interest to users looking to create their own data visualization software. TypeDB 3.3 also ships with some fairly bog-standard DBMS features - namely server configuration files and log file output. For more details check out TypeDB 3.3.0’s release notes, or check out the Server configuration docs.

So, what’s next?

  • TypeDB import / export tool: with the next major TypeDB release.
  • Desktop builds for TypeDB Studio: the goal is to have these this week.
  • TypeDB Cloud high availability and scheduled backups: this has been in progress for a while now behind the scenes, and we plan to roll out these features in the next month.

As always, don’t hesitate to drop us #questions or #feedback as desired.

Happy coding! :slight_smile:
The TypeDB team

3

Thanks for the update. I tried to visualize the graph after defining a schema, but I couldn’t get anything under “graph” of TypeDB Studio. Please let me know procedure to use graph visualizer.

4

Yes, I have migrated to ver 3.3.0 on TypeDB Studio

5

@samarth.agarwal To clarify you want to visualise your schema as a graph?

We’ll be rolling out dedicated schema visualisation tools in the coming weeks, but until then you could use schema queries such as the following:

# type hierarchy
match $x sub $y;

# attribute ownerships
match $x owns $y;

# playable roles
match $x plays $y;
1 Like
6

This is Awesome news. Two things:

  1. Is it possible to change colors of nodes and edges and background?
  2. Is there a way to share this interactive visualization with leaders (instead of static png file)?
7

Hi @alex , Do you have any information on the questions shared a week ago? Or any workaround will be helpful.

8

I’ll let Alex comment on whether this can be built into studio (imo it’s likely to be too much work than we can justify putting into it at the moment). What wasn’t a lot of work was to update my visualiser development repository based on the visualiser in prod and allow you to paste in responses you get from the API.

The repository is here. Customising the colour will require you to find and update the defaultQueryStyleParametersin defaults.ts. Apart from this, you shouldn’t have to touch anything in /lib. See the readme for instructions on how to run. (If you have trouble building it with npm, I can just send you the .html and generated .js file)

On distributing:
The index.html looks ugly, but it’s only 50 lines so really simple. You should be able to customise it to the format you want before you share.

Expected format
The data you paste in the form should look like this. I got it from the “/query” request in the network tab in my browser after running a query in studio

{
    "queryType": "read",
    "answerType": "conceptRows",
    "answers": [...],
    "query": { ... },
    "warning": null
}

Update:
If you can run a local server so it’s served through http:// instead of file://.
E.g. if i run python3 -m http.server 8080 from the root, visiting http://localhost:8080/?query=sample-data/query.txt&graph=sample-data/graph.json will automatically load the sample in sample-data.

9

Hi @samarth.agarwal . Currently no. Try building from source? It’ll be easy to customize all colors (GitHub - typedb/typedb-studio: TypeDB Studio (IDE)). Studio is an Angular project.

Sharing interactive visualization is a little more involved, but I believe the current code that persists and restores the schema visualizer state could be extended to save and load data visualization state too.