DOC-799 | Graph Visualizer improvements and updated screenshots #802

Simran-B · 2025-10-09T08:28:23Z

Description

Upstream PRs

3.10:
3.11:
3.12:
3.13:

…-799

arangodb-docs-automation · 2025-10-09T08:28:26Z

Deploy Preview Available Via
https://deploy-preview-802--docs-hugo.netlify.app

cursor

This PR is being reviewed by Cursor Bugbot

Details

Your team is on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle for each member of your team.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

cursor · 2025-10-14T14:16:11Z

site/themes/arangodb-docs-theme/layouts/shortcodes/icon.html

+<span class="inline-icon" aria-hidden="true">
+  {{- $iconName := .Get 0 }}
+  {{- $iconPath := printf "/images/icons/%s.svg" $iconName }}
+  {{- $iconSvg := readFile $iconPath }}


Bug: Icon Shortcode Path Mismatch

The icon shortcode constructs icon paths as /images/icons/NAME.svg for readFile. However, readFile interprets paths starting with / relative to the project root, meaning it looks in PROJECT_ROOT/images/icons/. This path doesn't match the actual icon file location in site/content/images/icons/, causing icons to be unfound and triggering an error.

Works and is also correct according to the Hugo docs:

The os.ReadFile function attempts to resolve the path relative to the root of your project directory. If a matching file is not found, it will attempt to resolve the path relative to the contentDir. A leading path separator (/) is optional.

https://gohugo.io/functions/os/readfile/

We can change it to "site/content/images/icons/%s.svg" though.

nerpaula · 2025-10-15T10:28:18Z

site/content/3.12/graphs/graph-visualizer.md

 {{< /tip >}}

 The **Graph Visualizer** is a browser-based tool integrated into the web interface
 of the ArangoDB Platform. It lets you explore the connections of your named graphs


Suggested change

of the Arango Data Platform. It lets you explore the connections of your named graphs

nerpaula · 2025-10-15T10:28:52Z

site/content/3.12/graphs/graph-visualizer.md

 ### Select and load a graph

-1. In the ArangoDB Platform web interface, select the database your named graph
+1. In the Data Platform web interface, select the database your named graph


Suggested change

1. In the Data Platform web interface, select the database your named graph

1. In the Arango Data Platform web interface, select the database your named graph

nerpaula · 2025-10-15T10:43:15Z

site/content/3.12/graphs/graph-visualizer.md

-2. Click the _palette_ icon in the top right to open the **Customization** panel
+1. Click the **Legend** button in the top right to open the **Legend** panel
+   if it's closed.
+2. Select the **Nodes (#)** tab and click one of the node collections.


Step 3 is missing in the numbered list

nerpaula · 2025-10-15T10:46:31Z

site/content/3.12/graphs/graph-visualizer.md


 ### View node and edge properties

 You can inspect the document attributes of node or edge as follows:


Suggested change

You can inspect the document attributes of a node or edge as follows:

nerpaula · 2025-10-15T10:47:14Z

site/content/3.12/graphs/graph-visualizer.md

+hierarchies, and relationship flows. You can also download an image of what is
+displayed.

 - **Minimap**: A small overview to easier navigate the canvas.


Suggested change

- **Minimap**: A small overview to easier navigate the canvas.

- **Minimap**: A small overview for easier canvas navigation.

nerpaula · 2025-10-15T10:48:12Z

site/content/3.12/graphs/graph-visualizer.md

+   - Optionally provide a JSON body to use as the document content.
 4. Click **Create** to add the node to the canvas and database.

 ### Create New Edges


Suggested change

### Create New Edges

### Create new edges

nerpaula · 2025-10-15T10:48:37Z

site/content/3.12/graphs/graph-visualizer.md

+   - **Color**
+   - **Icon**
+   - **Display**: What attribute to use for the label and what information
+     to show in the tooltip when hovering a nodes.


Suggested change

to show in the tooltip when hovering a nodes.

to show in the tooltip when hovering over nodes.

nerpaula · 2025-10-15T11:05:48Z

site/content/3.12/graphs/graph-visualizer.md


 ### Add nodes and edges using a query based on a selection

 You can select nodes and edges on the canvas and then use a **Canvas Action**.


The Canvas Actions feature could use a better introduction, right now it jumps directly into technical details. We should start with a clear definition, add some common use cases, and then explain how it works. I'd suggest something like:

Canvas Actions are predefined AQL queries that work with your current selection of nodes and edges on the canvas. Think of them as tools that let you discover related data based on what you've already selected. Unlike regular queries that work on the entire graph, Canvas Actions use special bind variables (@nodes and @edges) to reference your selected items, making them context-aware and interactive.

We should also list some real-world examples that users can relate to... e.g. find all customers who bought the same products as the selected customers

nerpaula · 2025-10-15T11:41:19Z

site/content/3.12/graphs/graph-visualizer.md

-## Visual customization
+## Legend
+
+### Visual customization


I would restructure this into different sections e.g. Customize node appearance, Customize edge appearamce, Save and manage themes, ... along with some real-world examples (why would you use different colors for different node types). For example, in a recommendation system you might want to use different colors for different product categories and edge thickness to show recommendation strength.

nerpaula

Please see my comments.

nerpaula · 2025-10-16T12:23:18Z

site/content/3.12/graphs/graph-visualizer.md

 3. Select a graph from the list.
 4. The viewport of the Graph Visualizer opens for exploring the graph.

 The main area of the viewport may initially be empty in the following cases:


This will change, the Visualizer will automatically populate the canvas with an initial neighbourhood, see https://github.com/arangodb/platform-ui/pull/217

Simran-B added 3 commits October 2, 2025 09:55

WIP

1f925ce

Update Visualizer screenshots

155a71a

Merge branch 'main' of https://github.com/arangodb/docs-hugo into DOC…

c595f25

…-799

Simran-B self-assigned this Oct 9, 2025

cla-bot bot added the cla-signed label Oct 9, 2025

Simran-B added 8 commits October 9, 2025 12:39

Icon shortcode prototype

4d61a71

Update customization screenshot

5ee3e0d

Update descriptions

0f718a1

DOC-813 | Implement icon shortcode and add Graph Visualizer icons

62860ef

Rename icon files and mention icon shortcode to README

22d82c8

Extend README for icon shortcode

144f44d

Update visual customization part

f1600ef

Minor fixes

c38b58e

Simran-B marked this pull request as ready for review October 14, 2025 13:49

Simran-B requested review from ansoboleva and nerpaula October 14, 2025 13:49

Fix edge styling options

cc2db4d

cursor bot reviewed Oct 14, 2025

View reviewed changes

nerpaula reviewed Oct 15, 2025

View reviewed changes

nerpaula requested changes Oct 15, 2025

View reviewed changes

nerpaula reviewed Oct 16, 2025

View reviewed changes


	of the Arango Data Platform. It lets you explore the connections of your named graphs

	1. In the Data Platform web interface, select the database your named graph
	1. In the Arango Data Platform web interface, select the database your named graph


		### View node and edge properties

		You can inspect the document attributes of node or edge as follows:

	- Minimap: A small overview to easier navigate the canvas.
	- Minimap: A small overview for easier canvas navigation.

	to show in the tooltip when hovering a nodes.
	to show in the tooltip when hovering over nodes.


		### Add nodes and edges using a query based on a selection

		You can select nodes and edges on the canvas and then use a Canvas Action.

DOC-799 | Graph Visualizer improvements and updated screenshots #802

Are you sure you want to change the base?

DOC-799 | Graph Visualizer improvements and updated screenshots #802

Uh oh!

Conversation

Simran-B commented Oct 9, 2025

Description

Upstream PRs

Uh oh!

arangodb-docs-automation bot commented Oct 9, 2025

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

This PR is being reviewed by Cursor Bugbot

Uh oh!

cursor bot Oct 14, 2025

Choose a reason for hiding this comment

Bug: Icon Shortcode Path Mismatch

Uh oh!

Simran-B Oct 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nerpaula left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Simran-B Oct 14, 2025 •

edited

Loading