Update descriptions

Author: Simran-B

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

@@ -21,13 +21,6 @@ create new nodes (vertices) and edges (relations).
 
 ![A screenshot of the Graph Visualizer user interface showing some persons and movies as circles with arrows indicting who acted in or directed a movie](../../images/graph-visualizer.png)
 
-{{< info >}}
-Graph creation is **not** performed within the Graph Visualizer. Graphs must be
-created in the **Management** section under **Graphs** of the second-level
-navigation in the [web interface](../components/web-interface/graphs.md). Once
-created, you can select a graph from the list for exploration and visualization.
-{{< /info >}}
-
 You can use the Graph Visualizer to do the following:
 
 - Filter and view specific nodes to focus on a subset of your graph.
@@ -38,6 +31,13 @@ You can use the Graph Visualizer to do the following:
 - Rearrange nodes automatically or manually for better visual clarity.
 - Use zoom and pan to explore large graphs more easily.
 
+{{< info >}}
+Graph creation is **not** performed within the Graph Visualizer. Graphs must be
+created in the **Management** section under **Graphs** of the second-level
+navigation in the [web interface](../components/web-interface/graphs.md). Once
+created, you can select a graph from the list for exploration and visualization.
+{{< /info >}}
+
 ## View a graph
 
 The core function of the Graph Visualizer is to provide an intuitive canvas for
@@ -51,16 +51,16 @@ supported by the Graph Visualizer.
 
 ### 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
    is stored in.
 2. Click **Graphs** in the main navigation.
 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:
 
-- You opened a graph for the first time and nothing is selected for displaying yet
-- You used the **Clear Canvas** option
+- You open a graph for the first time and nothing is selected for displaying yet
+- You previously used the **Clear graph** option
 <!-- TODO: Doesn't it preserve the last state? Can it be lost?
 - Reopening the Graph Visualizer after a previous session
 -->
@@ -80,8 +80,10 @@ The Graph Visualizer interface is comprised of the following components:
 - **Search & add nodes to canvas** and **Queries**:
   A widget in the top left corner that opens dialogs for selecting nodes and
   edges to display (manually or using queries).
-- [**Customization**](#visual-customization):
-  A sidebar on the right-hand side to adjust the styling.
+- [**Legend**](#visual-customization):
+  A panel on the right-hand side that shows you what colors and icons are used
+  for nodes and edges, as well as to adjust the styling, and to select all
+  items of a type.
 - [**Layout and Navigation**](#layouts-and-navigation-tools):
   A minimap and multiple tools for the canvas in the bottom right corner.
 
@@ -92,25 +94,28 @@ displayed.
 
 1. Click **Search & add nodes to canvas**.
 2. Select a **Node type**. This is the name of the collection that stores the
-   node you want to select.
-3. Enter a value into the **Search** field. This searches common attributes
-   as indicated by the placeholder text and finds up to 10 nodes that contain
-   this text in one of these attributes (case-insensitive).
+   nodes you want to select.
+3. Enter a value into the **Search** field. This searches for document IDs
+<!-- TODO: Will this come back?
+This searches common attributes as indicated by the placeholder text and finds
+up to 10 nodes that contain this text in one of these attributes
+-->and finds up to 10 nodes that contain this text (case-insensitive).
 4. Select one or more nodes from the list on the left-hand side.
-5. Optional: You can check the attributes of the selected nodes on the
-   right-hand side. Use the buttons at the bottom to switch between nodes.
-6. Click **Add _n_ vertices**.
+5. Optional: You can inspect the attributes of the selected nodes on the
+   right-hand side. Use the buttons at the bottom
+   ({{< icon "caret-left" >}} {{< icon "caret-right" >}}) to switch between nodes.
+6. Click **Add _n_ nodes**.
 7. To see the neighbor nodes and the edges that connect them, right-click a node,
    click **Expand (_n_)** and then **All (_n_)**.
 
 ![A screenshot of the dialog for adding nodes with two persons selected](../../images/graph-visualizer-add-nodes.png)
 
 ### Add nodes and edges using a query
 
-You can run an AQL query to add a nodes, edges, or paths of the graph to the canvas.
+You can run an AQL query to add nodes, edges, or paths of the graph to the canvas.
 
 1. Click **Queries** of the top-left widget.
-2. Click **New query**.
+2. On the **QUeries** tab, click **New query**.
 3. Enter an AQL query that returns nodes, edges, or paths
    (e.g. a graph traversal query), for example:
    ```aql
@@ -130,17 +135,17 @@ You can run an AQL query to add a nodes, edges, or paths of the graph to the can
 You can save queries for future use: 
 
 1. Click **Queries** of the top-left widget.
-2. Click **New query**.
+2. On the **Queries** tab, click **New query**.
 3. Enter or edit the AQL query you want to save. You can optionally use
-   bind variables to parameterize saved queries.
+   bind variables (like `@var`, `@@coll`) to parameterize saved queries.
 4. Enter a name and optionally a description, then click **Save**.
 5. To run a saved query, click **Queries** of the top-left widget.
 6. Select a query from the list. The following actions are available for each query:
-  - {{< icon "clone" >}} Copy the query string to the clipboard.
+  - Copy ({{< icon "duplicate" >}}) the query string to the clipboard.
   - **Bind Variables** to set for the query.
-  - {{< icon "edit" >}} Edit the query.
-  - {{< icon "trash-alt" >}} Delete a no longer needed query.
-  - {{< icon "caret-right" >}} Run the query.
+  - Edit ({{< icon "edit_square" >}}) the query.
+  - Delete ({{< icon "delete" >}}) a no longer needed query.
+  - Run ({{< icon "run" >}}) the query.
 {{< /tip >}}
 
 ![A screenshot of the dialog with a query expanded and a bind variable filled in](../../images/graph-visualizer-queries.png)
@@ -159,7 +164,7 @@ The query has access to the current selection via special bind variables.
 3. Depending on the query, additional nodes or edges with their nodes are added
    to the canvas.
 4. To create a custom Canvas Action query, click **Queries** of the top-left widget.
-5. Click **Canvas Actions**, then **New action**.
+5. Go to the **Canvas actions** tab and click **New action**.
 6. Enter an AQL query that makes use of the special bind variable `@nodes`,
    `@edges`, or both and returns nodes, edges, or paths. Examples:
    ```aql
@@ -203,15 +208,26 @@ You can inspect the document attributes of node or edge as follows:
 
 These features allow you to clear, zoom, and pan the canvas, as well as rearrange
 the displayed graph data for a better spatial understanding of node clusters,
-hierarchies, and relationship flows.
+hierarchies, and relationship flows. You can also download an image of what is
+displayed.
 
 - **Minimap**: A small overview to easier navigate the canvas.
+  You can optionally hide it ({{< icon "caret-right" >}}).
+
+- **Clear graph**: Remove all nodes and edges from the canvas ({{< icon "clear" >}}).
+  This only affects what is displayed and does not delete the underlying documents.
+
+- **Fit to Screen**: Resize and center the canvas so you can see everything
+  ({{< icon "fit" >}}).
 
-- **Zoom Controls**: Zoom in/out or reset the zoom to 100%.
+- **Zoom Controls**: Zoom in ({{< icon "zoom_in" >}}), zoom out
+  ({{< icon "zoom_out" >}}), or reset the zoom to 100%.
 
-- **Fit to Screen**: Resize and center the canvas so you can see everything.
+- **Download screenshot**: Save a PNG image of what is currently displayed on
+  the canvas ({{< icon "download" >}}).
 
-- **Re-run Layout**: Automatically rearrange the nodes using the selected algorithm.
+- **Re-run Layout**: Automatically rearrange the nodes using the selected
+  algorithm ({{< icon "rerun" >}}).
 
 - **Layout Algorithms**: Choose between different ways of arranging the nodes.
   Which algorithm to use depends on the situation and the graph topology.
@@ -228,31 +244,36 @@ You need to have write access for the database and the collections for this.
 You can add nodes to the graph's document collections directly from the
 canvas. This allows you to create additional entities to the graph.
 
-1. In the **Graphs** section of the ArangoDB web interface, select your graph.
-2. Right-click on the canvas and choose **Create Node**.
+1. In the **Graphs** section of the Data Platform web interface, select your graph.
+2. Right-click the canvas, **Create node**, and choose a node collection to
+   store the new node in.
 3. A dialog opens with the following options:
-   - Select the target collection (**Node Type**).
+   - Select the vertex collection (**Node Type**).
    - Optionally specify a unique identifier (**Node ID**).
+   - 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
 
 You can add edges to the graph's edge collections directly from the canvas.
 This allows you to create additional connections between nodes.
 
-1. In the **Graphs** section of the ArangoDB web interface, select your graph.
-2. Right-click on the canvas and choose **Create Edge**.
-3. In the dialog:
-   - Select the target collection (**Edge Type**, which corresponds to an edge collection).
-   - Set the `_from` and `_to` fields by selecting the source and target nodes.
+1. In the **Graphs** section of the Data Platform web interface, select your graph.
+2. Right-click the canvas, **Create edge**, and choose an edge collection to
+   store the new edge in.
+3. A dialog opens with the following options:
+   - Select the edge collection (**Edge Type**).
+   - Set the **From** and **To** fields by selecting the source and target nodes.
    - Optionally specify a unique identifier (**Edge ID**).
+   - Optionally provide a JSON body to use as the document content.
 4. Click **Create** to add the edge to the canvas and database.
 
-{{< info >}}
-If you select two nodes before right-clicking to open the edge creation
-dialog, the `_from` and `_to` fields are automatically pre-filled.
-You may need to swap the IDs as the order is not based on your selection sequence.
-{{< /info >}}
+{{< tip >}}
+If you select two nodes before right-clicking the canvas and opening the edge
+creation dialog, the **From** and **To** fields are automatically pre-filled.
+You may need to swap the IDs ({{< icon "swap" >}}) as the order is not based on
+your selection sequence.
+{{< /tip >}}
 
 ![A screenshot of the dialog for creating an edge with the From and To fields filled in](../../images/graph-visualizer-create-edge.png)
 
@@ -262,7 +283,11 @@ You can modify the document attributes of nodes and edges from the canvas as fol
 
 1. Double-click a node or edge.
 2. In the properties dialog that opens, click **Edit**.
-3. Change the properties and click **Save**. <!-- TODO: Can't change system attributes, even though _from and _to are generally mutable -->
+3. You can switch between a **Form** and **JSON** editing mode.
+4. Change or delete ({{< icon "delete" >}}) existing properties.
+5. In the **Form** mode, you can add new properties by scrolling to the bottom
+   and clicking **Add Property**.
+6. Click **Save** to store the changes, or **Cancel** to abort. <!-- TODO: Can't change system attributes, even though _from and _to are generally mutable -->
 
 ### Delete nodes