doc hengshao fix 20230828

docs/en-US/source/4.user-guide/1.tugraph-browser.md

@@ -400,6 +400,139 @@ The Browser provides full-screen display for graph query results. Click the `Ful
 ![query-result-fullscreen](../../../images/browser/query-result-fullscreen.png)
 ![query-result-fullscreen-close](../../../images/browser/query-result-fullscreen-close.png)
 
+#### 2.4.4.Graph Analysis
+
+Click the `Graph Analysis` button in the `Graph Project` tab in the `Graph Project` interface to display and analyze graph data on the canvas. The product provides `Query by Statement` and `Query by Configuration` to query and load data from the graph project to the canvas. It supports filtering, layout adjustment, and canvas operations on the canvas data.
+
+![graphanalysis-button](../../../images/browser/graphanalysis-button.png)
+
+As shown in the figure below, the graph analysis function mainly includes: 1. Operation bar: the main operation functions of graph analysis, including view switching, query filtering, layout style, and canvas operations; 2. Left sidebar: query, filter, and appearance operation area; 3. Canvas area: the area for displaying graph data, displaying vertex and edge data, supporting vertex expansion query, collapsing vertexs, fixing vertexs, deleting vertexs, and providing canvas graph data statistics; 4. Right sidebar: when a vertex or edge data is selected, the corresponding attribute information will be displayed; 5. Switch graph project: switch to different graph projects for analysis.
+
+![graphanalysis-operation-area](../../../images/browser/graphanalysis-operation-area.png)
+
+##### 2.4.4.1.Query by Statement
+
+In the `Query by Statement` function, users can enter query statements to query graph data and load the data to the canvas area for display.
+- Syntax Description: TuGraph's query language and syntax documentation.
+- Clear Canvas Data: If this button is not selected, the results of each query will be appended to the canvas area; if this button is selected, the canvas will be cleared before each query.
+
+![graphanalysis-queryfilter-query](../../../images/browser/graphanalysis-queryfilter-query.png)
+
+##### 2.4.4.2.Query by Configuration
+
+In the `Query by Configuration` function, users can select vertex types and enter attribute conditions to query graph data and load the data to the canvas area for display.
+- Clear Canvas Data: If this button is not selected, the results of each query will be appended to the canvas area; if this button is selected, the canvas will be cleared before each query.
+
+![graphanalysis-queryfilter-configurequery](../../../images/browser/graphanalysis-queryfilter-configurequery.png)
+
+##### 2.4.4.3.Canvas Analysis
+
+In the `Canvas Analysis` function, users can perform operations and analysis on the vertex or edge data on the canvas, including: expanding queries by selecting vertexs, collapsing/expanding vertexs, fixing vertexs, clearing the canvas, lassoing, vertex/edge retrieval, and canvas legend. The most basic operation on the canvas is dragging vertex data. By selecting a vertex with the left mouse button and moving the mouse, the position of the vertex data can be changed.
+
+###### a.Expand Query
+
+Right-click on a vertex data in the `Canvas` area, a pop-up operation window will appear, move the mouse to `Expand Query`, and a secondary window will pop up. Click on the corresponding expansion degree to perform the query.
+- First-degree Query: Bidirectional expansion of first-degree relationships.
+- Second-degree Query: Bidirectional expansion of second-degree relationships.
+- Third-degree Query: Bidirectional expansion of third-degree relationships.
+- Custom Query: Expand based on selected conditions.
+    - Edge Direction: Set the direction of the expansion relationship, Bidirectional: includes outgoing edges and incoming edges, Outgoing: edges pointing outward from the selected starting vertex, Incoming: edges pointing to the selected starting vertex.
+    - Degree of Diffusion: The degree of expansion.
+    - Custom Return vertex Count: Configure the number of vertexs returned to the front end, default is 100, to prevent exceptions on the front end caused by super vertexs.
+    - Add Filter Group: Set the relationship type and attribute conditions of the expansion, multiple relationship types can be set.
+
+![graphanalysis-canvas-expand-before](../../../images/browser/graphanalysis-canvas-expand-before.png)
+
+![graphanalysis-canvas-expand-after](../../../images/browser/graphanalysis-canvas-expand-after.png)
+
+![graphanalysis-canvas-expand-custom](../../../images/browser/graphanalysis-canvas-expand-custom.png)
+
+###### b.Collapse/Expand Vertexs
+
+Right-click on a vertex data in the `Canvas` area, a pop-up operation window will appear, click on `Collapse Vertexs` to hide the first-degree relationship Vertexs of the selected Vertexs; right-click on the collapsed Vertex data again to perform Expand Vertexs operation to show the hidden first-degree relationship Vertexs.
+
+![graphanalysis-canvas-collapse](../../../images/browser/graphanalysis-canvas-collapse.png)
+
+![graphanalysis-canvas-expand](../../../images/browser/graphanalysis-canvas-expand.png)
+
+###### c.Fix Vertexs
+
+Right-click on a vertex data in the `Canvas` area, a pop-up operation window will appear, click on `Fix vertexs` to fix the selected vertexs in place. The fixed vertexs cannot be moved (including layout adjustment); right-click on the fixed vertex data again to perform `Unfix vertexs` operation to restore the normal operation of the selected.
+
+![graphanalysis-canvas-fixed](../../../images/browser/graphanalysis-canvas-fixed.png)
+
+![graphanalysis-canvas-unfix](../../../images/browser/graphanalysis-canvas-unfix.png)
+
+###### d.Delete Vertex
+
+Right-click on a vertex in the `Canvas` area to open the operation window. Click on `Delete Vertex` to remove the selected vertex from the canvas.
+
+![graphanalysis-canvas-delete](../../../images/browser/graphanalysis-canvas-delete.png)
+
+###### e.Clear Canvas
+
+Click on the `Clear Canvas` button in the `Toolbar` area to clear all data on the canvas.
+
+![图分析-画布分析-清空画布](../../../images/browser/graphanalysis-canvas-clear.png)
+
+###### f.Vertex/Edge Retrieval
+
+Select a vertex or edge in the `Vertex/Edge Retrieval` window and enter a keyword to perform a fuzzy search for attribute data on the canvas. After the search, you can locate the data position.
+
+![graphanalysis-canvas-retrieval](../../../images/browser/graphanalysis-canvas-retrieval.png)
+
+###### g.Canvas Legend
+
+In the legend area of the `Canvas` area, the vertex types in the canvas will be displayed. Click on a vertex type to select the corresponding vertex data. Click on the "More" button to display the statistics, which can be displayed in a list or chart format to show the number of vertexs or edges.
+
+![graphanalysis-canvas-legend-list](../../../images/browser/graphanalysis-canvas-legend-list.png)
+![graphanalysis-canvas-legend-chart](../../../images/browser/graphanalysis-canvas-legend-chart.png)
+
+##### 2.4.4.4.Attribute Filter
+
+Click on the `Filter` button in the `Toolbar` area, and click on `Attribute Filter` in the `Sidebar` to perform filter and filtering. Users can select the vertex or edge types to be filtered, and set the corresponding attribute values. After retrieving the filtered group conditions, the corresponding vertex or edge data will be highlighted on the canvas.
+- Please select the vertex/edge type: Select the vertex type or edge type to be searched.
+- Attribute condition: Set the attribute conditions to be searched. Multiple groups can be set to take the union of the filtering results.
+- Add filter group: Multiple filter conditions can be set to take the union of the filtering results.
+- Reset: Clear the filter conditions.
+
+![graphanalysis-queryfilter-attributefilter](../../../images/browser/graphanalysis-queryfilter-attributefilter.png)
+
+##### 2.4.4.5.Statistical Filter
+
+Click on the Filter button in the Toolbar area, and click on Statistical Filter in the Sidebar to perform statistical filtering of canvas data. Users can select the vertex or edge types to be counted, and set the corresponding attribute values. The system will automatically group and count based on the selected vertex/edge types and attributes. The results can be displayed in chart and list formats. Clicking on the values in the chart or list area will highlight the corresponding data on the canvas.
+
+![graphanalysis-queryfilter-statisticalfilter](../../../images/browser/graphanalysis-queryfilter-statisticalfilter.png)
+![graphanalysis-queryfilter-statisticalfilter-chartswitch](../../../images/browser/graphanalysis-queryfilter-statisticalfilter-chartswitch.png)
+
+##### 2.4.4.7.Layout Style
+
+Click on the `Layout` button in the `Toolbar` area, and select the corresponding layout method to rearrange the data on the canvas. It supports force-directed layout, concentric circle layout, circular layout, radial layout, Dagre layout, and grid layout. Each layout method has different layout parameters. After adjusting the parameters, the data on the canvas will be rearranged.
+
+![graphanalysis-style-layout-button](../../../images/browser/graphanalysis-style-layout-button.png)
+![graphanalysis-style-layout-parameters](../../../images/browser/graphanalysis-style-layout-parameters.png)
+
+For detailed layout parameters, please refer to[AntV-G6](https://g6.antv.antgroup.com/api/graph-layout/guide).
+
+##### 2.4.4.6.Appearance Style
+
+Click on the `Appearance` button in the `Toolbar` area, and click on `Vertex Style` or `Edge Style` in the `Sidebar` to configure the appearance style.
+- Vertex Style
+    - Apply to vertex type: Set the display style for the corresponding vertex type. Multiple vertex types can be configured simultaneously.
+    - Size: The display size for the corresponding vertex type.
+    - Color: The display color for the corresponding vertex type.
+    - Icon: The icon style for the corresponding vertex type.
+    - Display Text: The text content displayed for the corresponding vertex type, defaulting to id.
+    - Advanced Configuration: Mark the corresponding vertex data based on the set conditions.
+- Edge Style
+    - Apply to Edge Type: Set the display style for the corresponding edge type, supports configuring the appearance of multiple edge types simultaneously.
+    - Color: The display color for the corresponding edge type.
+    - Width: The display width for the corresponding edge type.
+    - Display Text: The text content displayed for the corresponding edge type, not displayed by default.
+    - Advanced Configuration: Display the corresponding edge data based on the set conditions.
+
+![graphanalysis-style-appearance](../../../images/browser/graphanalysis-style-appearance.png)
+
 ### 2.5.Console
 
 The `Console` provides a visualized account management and database information viewing function. It provides users with comprehensive account and role management functions, including adding, deleting, modifying, and disabling accounts and roles. In addition, it also provides users with convenient database information viewing function, allowing users to easily view the basic information and configuration information of the graph database. Basic information mainly includes version number, running time, CPP compilation version number, etc., while database configuration information includes port number, system function parameter configuration, etc.
@@ -408,7 +541,7 @@ The `Console` provides a visualized account management and database information
 
 ##### 2.5.1.1.Account Management
 
-##### 2.5.1.1.1.Add Account
+##### a.Add Account
 
 Click the `Add` button in the `Account Management` interface to create a new account. Users need to enter the account name, account description, account password, and related roles.
 
@@ -418,28 +551,28 @@ Click the `Add` button in the `Account Management` interface to create a new acc
 ![account-add-button](../../../images/browser/account-add-button.png)
 ![account-add](../../../images/browser/account-add.png)
 
-##### 2.5.1.1.2.Edit Account
+##### b.Edit Account
 
 Click the `Edit` button in the `Account Management` interface to edit the account description, account password, and related roles.
 
 ![account-edit](../../../images/browser/account-edit.png)
 
-##### 2.5.1.1.3.Disable Account
+##### c.Disable Account
 
 Click the `Disable` button in the `Account Management` interface to prevent the corresponding account from logging in and accessing. Click the `Enable` button to enable the corresponding account login and access permissions.
 
 ![account-disable](../../../images/browser/account-disable.png)
 ![account-enable](../../../images/browser/account-enable.png)
 
-##### 2.5.1.1.4.Delete Account
+##### d.Delete Account
 
 Click the `Delete` button in the `Account Management` interface to delete the corresponding account.
 
 ![account-delete](../../../images/browser/account-delete.png)
 
 #### 2.5.1.2.Role Management
 
-##### 2.5.1.1.1.Add Role
+##### a.Add Role
 
 Click the `Add` button in the `Role Management` interface to create a new role. Users need to enter the role name, role description, and graph permissions.
 
@@ -455,13 +588,13 @@ Click the `Add` button in the `Role Management` interface to create a new role.
 
 ![role-add](../../../images/browser/role-add.png)
 
-##### 2.5.1.1.2.Edit Role
+##### b.Edit Role
 
 Click the `Edit` button in the `Role Management` interface to edit an existing role. Users can edit the role description and graph permissions.
 
 ![role-edit](../../../images/browser/role-edit.png)
 
-##### 2.5.1.1.3.Disable Role
+##### c.Disable Role
 
 Click the `Disable` button in the `Role Management` interface to disable the corresponding role. Click the `Enable` button to enable the corresponding role. After the role is disabled, the corresponding graph permissions of the role become invalid.
 
@@ -471,7 +604,7 @@ Click the `Disable` button in the `Role Management` interface to disable the cor
 ![role-disable](../../../images/browser/role-disable.png)
 ![role-enable](../../../images/browser/role-enable.png)
 
-##### 2.5.1.1.4.Delete Role
+##### d.Delete Role
 
 Click the `Delete` button in the `Role Management` interface to delete the corresponding role.