diff --git a/pages/memgraph-lab/configuration.mdx b/pages/memgraph-lab/configuration.mdx index 9aa2b65e6..dd3049df8 100644 --- a/pages/memgraph-lab/configuration.mdx +++ b/pages/memgraph-lab/configuration.mdx @@ -78,6 +78,8 @@ valid Memgraph Enterprise license are available only in a Docker environment. | Variable | Description | Type | Default | |------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------|--------------------| | `AUTH_NATIVE_IS_DISABLED` | Enable or disable native authentication (username, password) | `boolean` | `false` | +| `AUTH_SSO_STATE_SECRET` | Secret key used to encrypt shared state during the SSO flow; if not set, Lab generates a random one at startup | `string` | | +| `AUTH_SSO_STATE_EXPIRY_SEC` | Duration (in seconds) for which the SSO state remains valid | `number` | `300` | | `AUTH_OIDC_ENTRA_ID_IS_ENABLED` | Enable or disable Entra ID SSO authentication via OIDC | `boolean` | `false` | | `AUTH_OIDC_ENTRA_ID_DISPLAY_NAME` | Entra ID OIDC display name "Sign in with ``" | `string` | `"Entra ID"` | | `AUTH_OIDC_ENTRA_ID_AUTHORIZATION_URL` | Entra ID OIDC authorization URL | `string` | | @@ -87,6 +89,7 @@ valid Memgraph Enterprise license are available only in a Docker environment. | `AUTH_OIDC_ENTRA_ID_CLIENT_SECRET` | Entra ID OIDC client secret | `string` | | | `AUTH_OIDC_ENTRA_ID_CALLBACK_URL` | Entra ID OIDC callback URL | `string` | | | `AUTH_OIDC_ENTRA_ID_SCOPE` | Entra ID OIDC scope | `string` | `"openid profile"` | +| `AUTH_OIDC_ENTRA_ID_PKCE_IS_ENABLED` | Enables PKCE flow for Entra ID OIDC integration | `boolean` | `false` | | `AUTH_OIDC_OKTA_IS_ENABLED` | Enable or disable Okta SSO authentication via OIDC | `boolean` | `false` | | `AUTH_OIDC_OKTA_DISPLAY_NAME` | Okta OIDC display name "Sign in with ``" | `string` | `"Okta"` | | `AUTH_OIDC_OKTA_AUTHORIZATION_URL` | Okta OIDC authorization URL | `string` | | @@ -96,6 +99,7 @@ valid Memgraph Enterprise license are available only in a Docker environment. | `AUTH_OIDC_OKTA_CLIENT_SECRET` | Okta OIDC client secret | `string` | | | `AUTH_OIDC_OKTA_CALLBACK_URL` | Okta OIDC callback URL | `string` | | | `AUTH_OIDC_OKTA_SCOPE` | Okta OIDC scope | `string` | `"openid profile"` | +| `AUTH_OIDC_OKTA_PKCE_IS_ENABLED` | Enables PKCE flow for Okta OIDC integration | `boolean` | `false` | | `AUTH_OIDC_CUSTOM_IS_ENABLED` | Enable or disable custom SSO authentication via OIDC | `boolean` | `false` | | `AUTH_OIDC_CUSTOM_DISPLAY_NAME` | Custom OIDC display name "Sign in with ``" | `string` | `"SSO"` | | `AUTH_OIDC_CUSTOM_AUTHORIZATION_URL` | Custom OIDC authorization URL | `string` | | @@ -105,6 +109,7 @@ valid Memgraph Enterprise license are available only in a Docker environment. | `AUTH_OIDC_CUSTOM_CLIENT_SECRET` | Custom OIDC client secret | `string` | | | `AUTH_OIDC_CUSTOM_CALLBACK_URL` | Custom OIDC callback URL | `string` | | | `AUTH_OIDC_CUSTOM_SCOPE` | Custom OIDC scope | `string` | `"openid profile"` | +| `AUTH_OIDC_CUSTOM_PKCE_IS_ENABLED` | Enables PKCE flow for custom OIDC integration | `boolean` | `false` | | `AUTH_SAML_ENTRA_ID_IS_ENABLED` | Enable or disable Entra ID SSO authentication via SAML | `boolean` | `false` | | `AUTH_SAML_ENTRA_ID_DISPLAY_NAME` | Entra ID SAML display name "Sign in with ``" | `string` | `"Entra ID"` | | `AUTH_SAML_ENTRA_ID_ENTRY_POINT` | Entra ID SAML entry point | `string` | | diff --git a/pages/memgraph-lab/features/graph-style-script/built-in-elements.mdx b/pages/memgraph-lab/features/graph-style-script/built-in-elements.mdx index c350a6110..5905fc71e 100644 --- a/pages/memgraph-lab/features/graph-style-script/built-in-elements.mdx +++ b/pages/memgraph-lab/features/graph-style-script/built-in-elements.mdx @@ -1,6 +1,6 @@ --- title: Built in elements -description: Unleash the potential of the built-in elements in Memgraph. Our documentation page offers detailed information on the different elements available, enabling you to optimize your graph computing as you move forward with your graph project. +description: Unleash the potential of the built-in elements in Memgraph. Our documentation page offers detailed information on the different elements available, enabling you to optimize your graph computing as you move forward with your graph project. --- import {CommunityLinks} from '/components/social-card/CommunityLinks' @@ -789,6 +789,38 @@ Outputs: - `List[Relationship]` +#### `InNodes(node)` + +Returns the list of unique inbound node from a given graph node. + +Example: + +- `size: Size(InNodes(node))` sets the size to be equal to the count of unique inbound nodes. + +Inputs: + +- `node: Node` + +Outputs: + +- `List[Node]` + +#### `OutNodes(node)` + +Returns the list of unique outbound nodes from a given graph node. + +Example: + +- `size: Size(OutNodes(node))` sets the size to be equal to the count of unique outbound nodes. + +Inputs: + +- `node: Node` + +Outputs: + +- `List[Node]` + #### `Nodes(graphOrEdge)` Returns the list of start and end nodes from a given graph edge. It returns @@ -895,6 +927,33 @@ Outputs: - `number` +#### `IsTreeStructure(graph: Graph, minDepth?: number)` + +Determines whether the given graph is a directed tree structure, +meaning it contains no cycles and each node has at most one inbound edge. +By default, the graph must have a minimum depth of 2 hops to qualify +as a tree structure. You can adjust this requirement using the optional +`minDepth` parameter. + +Example: + +- Apply a "tree" layout to the view if the graph is a tree structure: + +``` +@ViewStyle IsTreeStructure(graph) { + view: "tree" +} +``` + +Inputs: + +- `graph: Graph` +- `minDepth: number?` + +Outputs: + +- `boolean` + ### Map functions #### `MapKeys(map)` diff --git a/pages/memgraph-lab/features/graph-style-script/directive-properties.mdx b/pages/memgraph-lab/features/graph-style-script/directive-properties.mdx index 404a63d18..6108114e4 100644 --- a/pages/memgraph-lab/features/graph-style-script/directive-properties.mdx +++ b/pages/memgraph-lab/features/graph-style-script/directive-properties.mdx @@ -4,17 +4,17 @@ description: Discover the properties of directives in Memgraph through our compr --- import {CommunityLinks} from '/components/social-card/CommunityLinks' - +import { Callout } from 'nextra/components' # Directive properties -Graph Style Script currently has four directives: +Graph Style Script currently has these directives: * [`@NodeStyle` directive](#nodestyle-directive) - for defining the visual style of graph nodes. * [`@EdgeStyle` directive](#edgestyle-directive) - for defining the visual style of graph relationships. * [`@ViewStyle` directive](#viewstyle-directive) - for defining the general graph style properties. * [`@ViewStyle.Map` directive](#viewstylemap-directive) - for defining the graph style properties when map - is in the background. + is in the background. (**DEPRECATED in Lab 3.4**) Each directive includes a set of configurable properties, along with their expected data types. @@ -425,56 +425,97 @@ Example: ## `@ViewStyle` directive `@ViewStyle` directive is used for defining style properties of a general -graph view: link distance, view, physics, repel force, etc. You can read more about -each property in the following sections. +graph view: view type, link distance, view, physics, repel force, etc. It is also +possible to use a predicate expression which acts as a filter to apply +the defined properties to the final directive output. Here is the list of all properties that can be defined in the `@ViewStyle` directive, along with their expected types. -### `collision-radius: number` +### `force-collision-radius: number` Sets the margin radius for each node from its centre. If node `size` is `10` and -`collision-radius` is set to `20`, it means there will be `10` spaces left around each +`force-collision-radius` is set to `20`, it means there will be `10` spaces left around each node. No other node can be in that space. -The default `collision-radius` is `15`. +The default `force-collision-radius` is `15`. Example: -- `collision-radius: 15` sets the margin radius for each node from its centre to `15`. +- `force-collision-radius: 15` sets the margin radius for each node from its centre to `15`. -### `repel-force: number` +### `force-repel-force: number` Sets the strength of repel force between all nodes. If positive, it adds a force that moves nodes away from each other, if negative, it moves nodes towards each other. -The default `repel-force` is `-100`. +The default `force-repel-force` is `-100`. Example: -- `repel-force: -100` sets the repel force between all nodes to `-100`. +- `force-repel-force: -100` sets the repel force between all nodes to `-100`. -### `link-distance: number` +### `force-link-distance: number` Sets the minimum required distance between two connected nodes from their centres. -The default `link-distance` is `30`. If node sizes are `20` and link distance is `30`, +The default `force-link-distance` is `30`. If node sizes are `20` and link distance is `30`, nodes might overlap because the minimum distance from one node centre to another is `20 + 20 = 40`. Example: -- `link-distance: 30` sets the minimum required distance to `30`. +- `force-link-distance: 30` sets the minimum required distance to `30`. -### `physics-enabled: boolean` +### `force-physics-enabled: boolean` Enables or disables physics which is a real-time simulation for graph node positions. When physics is enabled, the graph is not static anymore. Examples: -- `physics-enabled: True` enables the physics. -- `physics-enabled: Greater(NodeCount(graph), 100)` enables the physics for graphs with more than 100 nodes. +- `force-physics-enabled: True` enables the physics. +- `force-physics-enabled: Greater(NodeCount(graph), 100)` enables the physics for graphs with more than 100 nodes. + +### `tree-orientation: "horizontal" | "vertical"` + +Determines the direction in which the `"tree"` layout is rendered. + +- `"vertical"` (default): Renders the tree from top to bottom, with parent nodes above their children. +- `"horizontal"`: Renders the tree from left to right, with parent nodes to the left of their children. + +Example: + +- `tree-orientation: "horizontal"` lays out the tree from left to right. + +### `tree-node-gap: number` + +Specifies the spacing between sibling nodes within the same depth +level in the `"tree"` layout. +This affects the horizontal or vertical distance between nodes, +depending on the tree orientation. + +Example: + +- `tree-node-gap: 50` increases the spacing between nodes on the same level. + +### `tree-level-gap: number` + +Sets the spacing between different depth levels in the `"tree"` layout. +This controls the vertical or horizontal distance between parent and +child nodes based on the tree orientation. + +Example: + +- `tree-level-gap: 100` increases the space between levels in the tree. + +### `map-tile-layer: "detailed" | "light" | "dark" | "basic" | "satellite"` + +Sets the map tile for the map background. The default map tile is `"light"`. + +Examples: + +- `map-tile-layer: "dark"` sets the map tile to be type `"dark"`. ### `background-color: Color` @@ -485,26 +526,103 @@ Examples: - `background-color: #DDDDDD` sets the background color of the canvas to light gray. - `background-color: black` sets the background color of the canvas to black. -### `view: string: "default" | "map"` +### `view: string: "default" | "map" | "force" | "tree"` + +Sets the current graph view. + +- `"default"` automatically selects between `"force"` and `"map"` views based on the available graph data. +- `"map"` displays the graph over a geographical map. Each node must include `latitude` and `longitude` to be positioned correctly. +- `"force"` renders a force-directed layout, placing nodes on a canvas with repelling forces between them. +- `"tree"` arranges the nodes in a hierarchical layout, displaying the structure from root to leaf nodes. + +The default value of `view` is `"default"`. + +Examples: + +- `view: "default"` uses automatic view selection. +- `view: "map"` sets the view to a map layout, which will only render if at least one node includes both `latitude` and `longitude`. + +### `collision-radius: number` + + + +**DEPRECATED in Lab 3.4**: Use `force-collision-radius` instead. + + + +Sets the margin radius for each node from its centre. If node `size` is `10` and +`collision-radius` is set to `20`, it means there will be `10` spaces left around each +node. No other node can be in that space. + +The default `collision-radius` is `15`. + +Example: + +- `collision-radius: 15` sets the margin radius for each node from its centre to `15`. + +### `repel-force: number` + + + +**DEPRECATED in Lab 3.4**: Use `force-repel-force` instead. + + + +Sets the strength of repel force between all nodes. If positive, it adds a force that +moves nodes away from each other, if negative, it moves nodes towards each other. + +The default `repel-force` is `-100`. + +Example: + +- `repel-force: -100` sets the repel force between all nodes to `-100`. + +### `link-distance: number` + + + +**DEPRECATED in Lab 3.4**: Use `force-link-distance` instead. -Sets the current graph view that can be either `"default"` or `"map"`. The `"default"` view is -a graph visualization on a blank background. The `"map"` view is a graph visualization with a map -as a background where each node needs to provide `latitude` and `longitude` to be positioned -on the map. + -The default `view` is `"default"`. +Sets the minimum required distance between two connected nodes from their centres. + +The default `link-distance` is `30`. If node sizes are `20` and link distance is `30`, +nodes might overlap because the minimum distance from one node centre to another is +`20 + 20 = 40`. + +Example: + +- `link-distance: 30` sets the minimum required distance to `30`. + +### `physics-enabled: boolean` + + + +**DEPRECATED in Lab 3.4**: Use `force-physics-enabled` instead. + + + +Enables or disables physics which is a real-time simulation for graph node positions. +When physics is enabled, the graph is not static anymore. Examples: -- `view: "default"` sets the view to the default view. -- `view: "map"` sets the view to the map view that will be shown only if at least one node has - required geo information: `latitude` and `longitude`. +- `physics-enabled: True` enables the physics. +- `physics-enabled: Greater(NodeCount(graph), 100)` enables the physics for graphs with more than 100 nodes. ## `@ViewStyle.Map` directive + + +`@ViewStyle.Map` is deprecated in Lab 3.4. Check updated directive `@ViewStyle` to +set up map view and map tile layer. + + + `@ViewStyle.Map` directive is a subset of `@ViewStyle` because it defines -additional style properties for a graph view when there is a map background. -Style properties of the `@ViewStyle.Map` directive are used to style the +additional style properties for a graph view when there is a map background. +Style properties of the `@ViewStyle.Map` directive are used to style the background map. Here is the list of all properties that can be defined in the `@ViewStyle.Map` @@ -512,6 +630,12 @@ directive, along with their expected types. ### `tile-layer: string: "detailed" | "light" | "dark" | "basic" | "satellite"` + + +**DEPRECATED in Lab 3.4**: Use `@ViewStyle { map-tile-layer }` instead. + + + Sets the map tile for the map background. The default map tile is `"light"`. Examples: diff --git a/pages/memgraph-lab/features/graph-style-script/main-building-blocks.mdx b/pages/memgraph-lab/features/graph-style-script/main-building-blocks.mdx index 6cfbfe1cd..602fecfa4 100644 --- a/pages/memgraph-lab/features/graph-style-script/main-building-blocks.mdx +++ b/pages/memgraph-lab/features/graph-style-script/main-building-blocks.mdx @@ -3,13 +3,13 @@ title: Main building blocks description: Graph Style Script (GSS) is composed of two main elements - expressions and directions. --- import { Cards } from 'nextra/components' - +import { Callout } from 'nextra/components' # Main building blocks Graph Style Script (GSS) is composed of two main elements: 1. [Expressions](#expressions) -2. [Directives](#directives) +2. [Directives](#directives) A GSS file is essentially a sequence of these components that follows a certain [file structure](#file-structure). @@ -157,13 +157,13 @@ expression, a new line must follow. The directive structure is the following. Like in CSS, directives defined later override properties of the previous directives. -Graph Style Script currently has four directives: +Graph Style Script currently has these directives: * [`@NodeStyle`](#nodestyle) - for defining the visual style of graph nodes. * [`@EdgeStyle`](#edgestyle) - for defining the visual style of graph relationships. * [`@ViewStyle`](#viewstyle) - for defining the general graph style properties. * [`@ViewStyle.Map`](#viewstylemap) - for defining the graph style properties when map - is in the background. + is in the background. (**DEPRECATED in Lab 3.4**) An example of a directive is `@NodeStyle` directive which can be used to specify style properties of a graph node. @@ -240,7 +240,7 @@ the directive is being evaluated (`@NodeStyle` binds the name `node`). ### `@ViewStyle` `@ViewStyle` directive is used for defining style properties of a general -graph view: link distance, view, physics, repel force, etc. It is also +graph view: view type, link distance, view, physics, repel force, etc. It is also possible to use a predicate expression which acts as a filter to apply the defined properties to the final directive output. @@ -260,13 +260,13 @@ style properties will only be applied if there are more than 10 nodes in the gra ```cpp @ViewStyle { - collision-radius: 15 - physics-enabled: True + force-collision-radius: 15 + force-physics-enabled: True } @ViewStyle Greater(NodeCount(graph), 10) { - physics-enabled: False - repel-force: -300 + force-physics-enabled: False + force-repel-force: -300 } ``` @@ -275,8 +275,8 @@ will be: ```json { - "collision-radius": 15, - "physics-enabled": true + "force-collision-radius": 15, + "force-physics-enabled": true } ``` @@ -285,9 +285,9 @@ properties will be: ```json { - "collision-radius": 15, - "physics-enabled": false, - "repel-force": -300 + "force-collision-radius": 15, + "force-physics-enabled": false, + "force-repel-force": -300 } ``` @@ -302,6 +302,13 @@ properties will be: ### `@ViewStyle.Map` + + +`@ViewStyle.Map` is deprecated in Lab 3.4. Check updated directive `@ViewStyle` to +set up map view and map tile layer. + + + `@ViewStyle.Map` directive is a subset of `@ViewStyle` because it defines additional style properties for a graph view when there is a map background. The map view will be available only if: @@ -362,7 +369,7 @@ properties will be:
diff --git a/pages/memgraph-lab/features/single-sign-on.mdx b/pages/memgraph-lab/features/single-sign-on.mdx index 61294fa71..aa3ed4af6 100644 --- a/pages/memgraph-lab/features/single-sign-on.mdx +++ b/pages/memgraph-lab/features/single-sign-on.mdx @@ -56,6 +56,7 @@ AUTH_OIDC_ENTRA_ID_USER_INFO_URL= AUTH_OIDC_ENTRA_ID_CLIENT_ID= AUTH_OIDC_ENTRA_ID_CLIENT_SECRET= AUTH_OIDC_ENTRA_ID_CALLBACK_URL=http:///auth/providers/oidc-entra-id/callback +AUTH_OIDC_ENTRA_ID_PKCE_IS_ENABLED=true AUTH_OIDC_ENTRA_ID_SCOPE='$YOUR_CLIENT_ID/.default openid' ``` @@ -84,6 +85,7 @@ AUTH_OIDC_OKTA_TOKEN_URL=https://xxx.okta.com/oauth2/default/v1/token AUTH_OIDC_OKTA_CLIENT_ID= AUTH_OIDC_OKTA_CLIENT_SECRET= AUTH_OIDC_OKTA_CALLBACK_URL=http:///auth/providers/oidc-okta/callback +AUTH_OIDC_OKTA_PKCE_IS_ENABLED=true AUTH_OIDC_OKTA_SCOPE=openid ``` @@ -119,9 +121,35 @@ AUTH_OIDC_CUSTOM_TOKEN_URL=https:///realms/myrealm/protocol/o AUTH_OIDC_CUSTOM_CLIENT_ID= AUTH_OIDC_CUSTOM_CLIENT_SECRET= AUTH_OIDC_CUSTOM_CALLBACK_URL=http:///auth/providers/oidc-custom/callback +AUTH_OIDC_CUSTOM_PKCE_IS_ENABLED=true AUTH_OIDC_CUSTOM_SCOPE=openid ``` +### PKCE Support in OIDC SSO + +PKCE (Proof Key for Code Exchange) support was introduced in +Lab version `3.4`. You can enable PKCE for your OIDC SSO +integration by setting the environment variable +`AUTH_OIDC_ENTRA_ID_PKCE_IS_ENABLED`, `AUTH_OIDC_OKTA_PKCE_IS_ENABLED`, +or `AUTH_OIDC_CUSTOM_PKCE_IS_ENABLED` to true. + +By default, the PKCE code verifier is securely stored in Lab +for 5 minutes. This timeout is controlled by the +`AUTH_SSO_STATE_EXPIRY_SEC` environment variable. If you're +running Lab in high-availability (HA) mode, ensure your load +balancer uses sticky sessions so that each user continues +interacting with the same Lab instance throughout the login +flow. + +Note that all SSO credentials (e.g., client ID, client secret) +are securely managed within the Lab backend and are never +exposed to the browser - eliminating the risk of credential +leakage through frontend code. +While we recommend using both the client ID and PKCE together, +it's also possible to omit the client ID when PKCE is enabled. +To allow this, configure your Azure Entra ID application to use +the "Mobile and Desktop Applications" platform. + ## SAML You can integrate Single sign-on (SSO) using SAML protocol for diff --git a/pages/memgraph-lab/querying.mdx b/pages/memgraph-lab/querying.mdx index c59f7270c..755d340c5 100644 --- a/pages/memgraph-lab/querying.mdx +++ b/pages/memgraph-lab/querying.mdx @@ -249,23 +249,43 @@ Display options offers you the ability to change the color or text on display for the selected graph object or all the graph objects with the same label or of the same type. -In the bottom left corner, you can **Enable physics**, that is, make nodes -interact with each other, by pulling away or closing in to one another, -depending on the strength of the relationships between them. +In the bottom left corner of the graph, you can change the graph layout. +The available layout types are: -In the top right corner of the graph you can open **Graph Preferences** and set -the collision radius that dictates the margin radius for each node from its -center, the repel force that dictates how strongly nodes repel each other, and -the link distance that dictates the minimum required distance between two -connected nodes. +- Force layout (default) +- Tree layout +- Map layout -![](/pages/data-visualization/lab-user-manual/physics.png) +**Force layout (Default)** simulates physical forces between nodes. You can +**Enable physics**, which allows nodes to interact dynamically - pulling +apart or drawing closer based on the strength of their relationships. -Another interesting feature you can use on graph data results is the map -background. This feature automatically turns on when the result nodes have -numeral `lat` and `lng` properties. +In the top right corner, under Graph Preferences, you can configure: -![](/pages/data-visualization/lab-user-manual/map.png) +- Collision radius - sets the margin radius around each node from its + center. +- Repel force - defines how strongly nodes repel each other. +- Link distance - determines the minimum distance required between two + connected nodes. + +![](/pages/data-visualization/lab-user-manual/layout-force.png) + +**Tree layout** organizes nodes in a hierarchical structure. You can choose +the orientation: horizontal or vertical. + +Additional customization options: + +- Level gap - sets the spacing between different levels of hierarchy. +- Node gap - sets the spacing between nodes on the same level. + +![](/pages/data-visualization/lab-user-manual/layout-tree.png) + +**Map layout** is enabled only if nodes contain geographical information. It +activates automatically when result nodes include numeric `lat` and `lng` +properties. +Nodes are positioned on a map according to their geographical coordinates. + +![](/pages/data-visualization/lab-user-manual/layout-map.png) If latitude and longitude data are not stored in the default `lat` and `lng` properties, you can use a Graph Style Script (GSS) to map alternative fields for @@ -283,7 +303,6 @@ Define(LONGITUDE_FIELD, "longitude") } ``` - ## Query summary After executing a query in Memgraph Lab, the query summary provides essential diff --git a/pages/release-notes.mdx b/pages/release-notes.mdx index 2e9da7507..e14cee6a4 100644 --- a/pages/release-notes.mdx +++ b/pages/release-notes.mdx @@ -148,6 +148,10 @@ updated. one format to another temporal string format. [#631](https://github.com/memgraph/mage/pull/631) +### Lab v3.4.0 - July 16th, 2025 + + + ## Previous releases ### Memgraph v3.3.0 - June 4th, 2025 diff --git a/public/pages/data-visualization/lab-user-manual/layout-force.png b/public/pages/data-visualization/lab-user-manual/layout-force.png new file mode 100644 index 000000000..8e7038437 Binary files /dev/null and b/public/pages/data-visualization/lab-user-manual/layout-force.png differ diff --git a/public/pages/data-visualization/lab-user-manual/layout-map.png b/public/pages/data-visualization/lab-user-manual/layout-map.png new file mode 100644 index 000000000..848b3cc04 Binary files /dev/null and b/public/pages/data-visualization/lab-user-manual/layout-map.png differ diff --git a/public/pages/data-visualization/lab-user-manual/layout-tree.png b/public/pages/data-visualization/lab-user-manual/layout-tree.png new file mode 100644 index 000000000..2a48bc813 Binary files /dev/null and b/public/pages/data-visualization/lab-user-manual/layout-tree.png differ diff --git a/public/pages/data-visualization/lab-user-manual/map.png b/public/pages/data-visualization/lab-user-manual/map.png deleted file mode 100644 index 094316481..000000000 Binary files a/public/pages/data-visualization/lab-user-manual/map.png and /dev/null differ diff --git a/public/pages/data-visualization/lab-user-manual/physics.png b/public/pages/data-visualization/lab-user-manual/physics.png deleted file mode 100644 index a52592ade..000000000 Binary files a/public/pages/data-visualization/lab-user-manual/physics.png and /dev/null differ