From 800c677ed57e2d200370267181d8baeb8628cdcf Mon Sep 17 00:00:00 2001 From: Abby <78209557+abby-cyber@users.noreply.github.com> Date: Wed, 9 Feb 2022 18:22:49 +0800 Subject: [PATCH] canvas-overview --- .../canvas-operations/canvas-overview.md | 65 +++++++++++++++++++ .../operation-guide/ex-ug-canvas.md | 45 ------------- 2 files changed, 65 insertions(+), 45 deletions(-) create mode 100644 docs-2.0/nebula-explorer/canvas-operations/canvas-overview.md delete mode 100644 docs-2.0/nebula-explorer/operation-guide/ex-ug-canvas.md diff --git a/docs-2.0/nebula-explorer/canvas-operations/canvas-overview.md b/docs-2.0/nebula-explorer/canvas-operations/canvas-overview.md new file mode 100644 index 00000000000..f5ed9345d24 --- /dev/null +++ b/docs-2.0/nebula-explorer/canvas-operations/canvas-overview.md @@ -0,0 +1,65 @@ +# Canvas overview + +You can visually explore data on a canvas. This topic introduces the composition of a canvas and its related functions. + +Canvas overview diagram: + +![canvas](../figs/canvas-overview.png) + +## Tabs on the Top + +Click the plus sign ![canvas_tab](../figs/list-add.png) to add a new canvas. You can have operations on multiple canvases simultaneously. + +![canvas_overview](../figs/canvas-graphspace.png) + +- Canvas data on different canvases can come from the same graph space or from different graph spaces. +- You can customize the name of a canvas except for the canvas in the left-most tab. + +## Visualization modes + +Graph data can be visually explored in **2D mode** and **3D mode**. For more information, [Visualization modes](visualization-mode.md). + +## Data storage + +Graph data on the current canvas can be stored by creating snapshots or exporting canvas data as images or CSV files. + +At the top right of the page, you can: + +- Click ![snapshot](../figs/graph-snapshot.png) to create a snapshot. For more information, see [Canvas snapshots](canvas-snapshot.md). +- Click ![PNG](../figs/topbar-exportPNG.png) to store canvas data as images. +- Click ![CSV](../figs/topbar-exportCSV.png) to store canvas data as CSV files. + + +## Search box + +In the search box at the top left of the page, enter a VID or the property values of tags to locate target vertices. + +## Layouts + +Explorer provides 6 layouts to show the relationship between the data on a canvas. + +| Force | Dagre | Circular | Grid | Neural Network | Radial | +| -------- | ------ | ------ | ----- | -------- | ----- | +| ![graphView](../figs/Thumbnail-graphView.png) | ![treeView](../figs/Thumbnail-treeView.png) | ![sphereView](../figs/Thumbnail-sphereView.png) | ![grid](../figs/Thumbnail-Grid.png) | ![neural](../figs/Thumbnail-neuralNetwork.png) | ![radial](../figs/Thumbnail-Radial.png) | + +![layouts](../figs/layout.gif) + +## Minimap + +You can display the vertices on a canvas on full screen. You can also collapse the minimap, zoom in or zoom out the canvass, etc. The percentage of a canvas graph to the total is displayed in the lower-left corner of the minimap. + +![](../figs/thumbnail.png) + +## Data overview + +On the right side of the page, click ![list-left](../figs/list-left.png) to expand the data overview panel. + +![dataView](../figs/dataview.png) + +On the data overview panel, you are enabled to: + +- See the number of tags and edge types, and the number of the corresponding vertices and edges on a canvas. +- Click the tag color icon to customize the color, size, and icon of the vertices with the same tag. + + !!! note + Vertices with the same tag have the same color. Right-click on a single vertex on a canvas to manually modify the style of the vertex. \ No newline at end of file diff --git a/docs-2.0/nebula-explorer/operation-guide/ex-ug-canvas.md b/docs-2.0/nebula-explorer/operation-guide/ex-ug-canvas.md deleted file mode 100644 index 0250389b142..00000000000 --- a/docs-2.0/nebula-explorer/operation-guide/ex-ug-canvas.md +++ /dev/null @@ -1,45 +0,0 @@ -# Canvas operation - -This topic describes operation in canvas. - -## Display vertexes and edges - -Move the mouse to the vertex or edge to view in detail. The following shows the detailed information of the vertex with `VID 107`: - -![show](../figs/ex-ug-024-1.png) - -## Batch selection - -Explorer supports batch selection and views the data of multiple vertexes and edges. The detailed data can be opened and viewed in the vertexes and edges overview at the lower-left corner of the canvas. It also supports exporting CSV files of selected vertexes or edges. - -![review](../figs/ex-ug-027-1.png) - -### Frame selection - -After clicking the ![frameselect](../figs/nav-frameSelect.png) icon, hold down the left button to drag and select multiple vertexes and edges. Examples are as follows: - -![select](../figs/ex-ug-023.png) - -### Click to select multiple vertexes and edges - -Click the ![singleselect](../figs/nav-singleSelect.png) icon or hold down Shift, click and select multiple vertexes and edges with the mouse, and click the blank space to cancel the selection. Examples are as follows: - -![select](../figs/ex-ug-025-1.png) - -## Quick operation - -You can select one or more vertexes and edges, and right-click in the blank area to expand the vertexes, search the path between two vertexes, and show or hide their property on the canvas. The number of vertexes and edges you choose will affect the operations that can be performed. For more information, see [Graph Exploration Expansion](../operation-guide/ex-ug-graph-exploration.md). - -![quick](../figs/ex-ug-026.png) - -Click **Fit Selection** to move the selected data to the center of the canvas for users to view. - -## Vertex Filter - -You can filter the vertexes displayed on the canvas. In this example, select the vertexes with the Tag `player` and the property `age` greater than or equal to 35, and click the `Apply Filter` button. - -!!! note - - Each set of filter conditions aims at the data with this Tag. If the conditions are met, the corresponding vertex will be automatically selected. If the conditions are not met, the corresponding vertex will turn gray. The data status of other Tags will not be affected. - -![filter](../figs/ex-ug-029-1.png)