The XDI Graph Editor is a visualization tool that facilitates exploring and editing XDI graphs. Following the XDI notation, graphs are represented using circles and lines for XDI nodes and links. In this document, we'll refer to node and link as element in general.
The following steps allow you to explore some of the tool's main capabilities by creating a small XDI graph.
[=]!:uuid:1111/$is$ref/=alice
Click File, and then click Import XDI.... In the popup window, paste the XDI statements in the text input area.
There are three checkboxes:
Tip: The Fold Root option helps avoid overwhelming elements when importing large graphs. The Unfold Level 1 function can then be used to unfold only the direct descendants of the common root node.
Click File and then click Export to XDI.... A new window will pop up that contains the statements representing the current XDI graph.
Note: The popup window may be blocked by the browser.
Click File and then click Export to PNG.... A new window will popup that contains a screenshot of the current graph as a PNG picture. The graph will be exported as displayed on the screen. Therefore, elements that have been folded or hidden will not be included.
Note: This function is only supported on the Chrome browser. On other browsers, an SVG export is performed instead.
To clear the graph on screen, click File and then click Clear Graph. All the elements of the current graph will be deleted.
Note: This operation can be undone.
Click File and then click Store Graph. A window will popup asking for a graph name. Enter a graph name and click OK.
The graph will be stored in the browser's local storage (HTML5) and will not be deleted when the page is refreshed or the browser is closed.
Click File and then click Load Graph. A window will popup prompting for the name of the graph that is to be loaded. The names of the graphs currently stored will be listed in that window. Type the name of the desired graph and click OK.
Note: The new graph will overwrite the current graph on screen.
Click File and then click Clear Storage. A window will popup. Type "YES" and click OK to confirm and the local storage will be cleared of any graphs.
Note: This operation CANNOT be undone.
Press and hold Shift and Left Click once on each element to select.
Note: This function is not available on iPad.
Press and hold the Left Mouse Button at any empty space on screen. Then move the cursor and a rectangle will appear. Release the Left Mouse Button and the elements within the rectangle area will be selected.
For iPad, Tap and hold with one finger at any empty space on screen. Then move finger and a rectangle will appear. Release touch and elements within the rectangle area will be selected.
First select the elements to move, then press & hold the Left Mouse Button and drag.
For iPad, Tap and hold with one finger on one of the selected elements and move finger.
If multiple elements are selected, they will be moved together.
First select the elements. Then click Edit and click the operation to perform.
For the Paste and Duplicate operation, the new elements will be placed near the original elements.
First select the elements to rename. Click Edit and then click Rename Element.... A new window will popup with a text area to type the new names. The current label will be displayed in the text area.
If multiple objects are selected, then multiple windows will popup for each element one by one.
First select the elements to be deleted. Click Edit and then click Delete Element.
Note: This operation can be undone.
First select the elements, click Edit and then click Copy Label.... A new window will popup with all the labels listed in a text area. The text area is selectable as normal text editor.
To close the window, click the X icon or Done.
Click Edit and then click Undo or Redo.
All the past operations are recorded. You can undo all the way to the first operation or redo to the last operation.
Click Node and then New Node... or press N. A new window will popup with a text area to enter the label for new node. Enter the label in the text area and click OK. The new node will appear at the center of the screen.
Press and hold the Shift and click on the position to create node. A new window will popup with a text area asking for the label for the new node. Enter the label in the text area and click OK. The new node will appear at the clicked position.
Note: you must click on an empty space, rather than elements or windows, to perform the operation.
Select the root node of the subgraph to be folded. Click Node and then Fold/Unfold or Double Click on the root node.
This operation may be applied to several subgraphs at the same time.
Note: the stroke of the root node of a folded subgraph will be red, indicating that a subgraph is hidden.
Select the root node of the subgraph to be unfolded. Click Node and then Fold/Unfold or Double Click on the root node.
This is the reverse operation of Folding subgraphs. It will display the folded subgraph.
Note: If the unfolded subgraph contains previously folded subgraphs, those will remain folded.
Click Node and then Unfold Level 1 or press and hold Shift and Double Click on the root node of the subgraph to be unfolded.
This operation will only display the direct descendants of the selected root node. The subgraphs under those descendants will remain folded.
Several subgraphs may be unfolded at the same time.
Tip: this operation can be used to explore large graph after Import a graph from XDI statements with Fold Root checked.
Click Node and then Unfold All.
This operation will unfold all folded subgraphs in the entire graph.
Select the nodes to fix. Click Node and click Fix/Unfix or press the F.
The Force Layout constantly distributes the nodes with a force-based simulation. This operation will stop the layout from moving the fixed nodes as if they are pinned on the screen.
Note: This is a toggle operation. If a node is already fixed, it will be unfixed and vice versa.
Select the node, click Node and then Set as Root or press R.
This operation will change the node type to Common Root. The shape of the node will change indicating the change of node type. The syntax validator will check the syntax and report at the top left corner of screen.
Note: This is a toggle operation. If the node is already a Common Root Node, it will be changed back to context node and its type will be determined based on its name.
Select the node, click Node and then Set as Literal or press L.
This operation will change the node type to Literal. The shape of nodes will change indicating the change of node type. The syntax validator will check the syntax and report at the top left corner of screen.
Note: This is a toggle operation. If the node is already a Literal Node, it will be changed back to context node and its type will be determined based on its name.
Click Link and then New Link or press and hold Shift. Then move the cursor onto the source node, press and hold Left Mouse Button, move the cursor to the target node and release the Left Mouse Button.
If the target node is a Literal Node and the source node is not a value node, a value node will be automatically created and inserted between the source and the target nodes.
The syntax validator will check the syntax and report at the top left corner of screen.
Select the link to invert. Click Link and then Invert Direction or press L.
The syntax validator will check the syntax and report at the top left corner of screen.
Select the link to set. Click Link and then Set as Relation or press R ke.
The syntax validator will check the syntax and report at the top left corner of screen.
Note: This is a toggle operation. If the link is already a Relational Link, it will be changed back to a Contextual Link.
Click View and then select Force Layout or Tree Layout.
These are the two layouts to display the XDI Graph. The graph will transform to the new layout.
Click View and then Reset Layout
This operation will re-layout the graph and move nodes back to the default position after layout.
Tip: This operation is more useful when the tree layout is used.
The Layout Control panel is located as the top left corner of the screen. It allows for fine-tuning the parameters that control the layout of the nodes. Drag the sliders to change the property values.
Each layout has specific properties that can be controlled:
Tip: Node Size is useful to prevent nodes from overlapping each other.
Click View and then click Reset Layout. The parameters will be reset to their default values.
Click Fixed button on the Legend located at the left-bottom corner of screen.
The Force Layout constantly distributes the nodes with a force-based simulation.. This operation will freeze all the nodes.
Click Moving button on the Legend located at the left-bottom corner of screen.
This operation will resume the simulation and the nodes will move again towards their resting positions. Nodes that were previously fixed will remain so until they are selected and unfixed.
See: Fix/Unfix the position of specific nodes under Force layout
Press and hold option on a Mac or alt on a PC, and Scroll Mouse Wheel to zoom in and out.
To zoom in/out by step, click View and click Zoom In or Zoom Out or press + or - for zooming it or out.
The cursor will change to a magnify glass icon indicating the zooming operation. The boundaries of the viewport and the graph and its current scale are displayed in the Navigator at the bottom right corner of the screen.
See Overview the graph with Navigator and Quick panning with Navigator.
Click View and then Zoom to fit or press 9.
The graph will be zoomed in/out to fit into the screen. The boundaries of the viewport and the graph and its current scale are displayed in the Navigator at the bottom right corner of screen.
See Overview the graph with Navigator and Quick panning with Navigator.
Select the elements, click View and then Zoom to fit or press 9.
The graph will be zoomed to fit only the selected part into the screen with transition. The boundaries of viewport and graph and the current scale are displayed in the Navigator at the bottom left corner of screen.
See Overview the graph with Navigator and Quick panning with Navigator.
Press and hold option on a Mac or alt on a PC, and drag to pan the view.
The cursor will change to hand icon indicating the panning operation. The boundaries of viewport and graph and the current scale are displayed in the Navigator at the bottom left corner screen.
See Overview the graph with Navigator and Quick panning with Navigator.
Click View and then Actual Size or press 0.
The viewport will set back to zooming scale of 1 with transition. The boundaries of viewport and graph and the current scale are displayed in the Navigator at the bottom left corner screen.
See Overview the graph with Navigator and Quick panning with Navigator.
In the navigator, the dark gray area indicates the boundary of a graph, which is updated in real-time as the graph move. The gray rectangle is the boundary of the viewport.
When the graph is smaller than the screen, the navigator will indicate the current position of graph on screen. When the graph is larger than the screen, the navigator will indicate the position of the viewport relative to the whole graph.
Move the cursor onto the navigator and drag to panning the graph.
Tip: this is a faster way of panning than panning in the graph.
See: Pan the viewport.
A list of standard XDI graph components is located at the bottom left of the screen. Click on an item to hide the corresponding components in the current graph.
Click on the Search Bar on the top right corner and type the query. The Search Bar will expand into a panel and display the results.
The results will be updated as the query is entered. The current search is a string-match search within all the labels in the graph including the hidden ones.
Note: The labels in folded subgraphs are not included.
See: Fold a subgraph.
The matched nodes and links are displayed in two scrollable lists. The amount of matches is indicated at the top of each list.
The color-coding of items is the same as the one used in the graph. That is, a Literal Node is green and a Relational Link is red.
The matched elements in the graph are highlighted with light blue. Their labels are displayed even if they are currently hidden.
See: Hide graph components.
Click on the item in the search lists and the graph will be centered and zoomed in on the corresponding element.
Click Done next to the search bar to close the Search Panel. The search text area and the lists will be cleared.
Click Window and then click the corresponding window to toggle visibility. The tick icon before each item indicates the visibility of the corresponding window.
Click Window and then click Show All or Hide All to show/hide all the windows at once.
This is a summary of the modifier shortcuts described above. The XDI Graph Editor has three interaction modes and the user can press and hold modifier keys to switch modes.