docs: v5 - Studio overview

docs/core/studio/studio.md

@@ -8,7 +8,11 @@ import DocCardList from '@theme/DocCardList';
 # AICA Studio
 
 This section will give a brief, high-level tour of AICA Studio to help situate new users. Underlying concepts and
-examples will be covered in more depth in later sections of this documentation.
+examples are covered in more depth in later sections of this documentation.
+
+In short, AICA Studio is the graphical user interface layer to the AICA System to create, monitor and extend advanced
+robotic applications. It features an interactive application editor with a dataflow graph builder, a 3D scene visualizer
+and live data visualization. It also allows managing hardware configuration, user profiles and more.
 
 ## Application manager and editor
 
@@ -27,7 +31,7 @@ elements of which are described in the following subsections.
 
 ## Hardware manager
 
-The next top-level page is the hardware manager, available under the "Hardware" tab in the top navbar.
+The other top-level page is the hardware manager, available under the "Hardware" tab in the top navbar.
 
 ![aica-studio-hardware-manager](./studio/assets/aica-studio-hardware-manager.png)
 
@@ -38,31 +42,25 @@ name.
 
 Any hardware listed in the hardware manager can be loaded and used in an application.
 
-## Docs
+## Help
 
-Under the "Docs" tab in the top navbar, reference documentation for installed components and controllers in the AICA
-System configuration can be accessed.
+The "Help" tab in the top right section of the navbar is used to access a help page with links to documentation and
+learning resources. It also includes reference documentation for the installed components and controllers in the AICA
+System configuration.
 
 ![aica-studio-docs-page](./studio/assets/aica-studio-docs-page.png)
 
-## Users
+## User
 
-The user icon in the top right of the page is used to access and manage the currently logged-in user profile.
+The "User" tab in the top right of the page is used to access and manage the currently logged-in user profile.
 
 ![aica-studio-user-page](./studio/assets/aica-studio-user-page.png)
 
 Read more about user scopes and API keys in [Users and authentication](/docs/getting-started/users-and-authentication).
 
 ## Settings
 
-The settings page is accessed through the cogwheel icon on the top right of the page. It is only available to users with
-the `admin` scope and can be used to administer other users as well as connect to cloud storage and services.
+The settings page is accessed through the "Settings" tab on the top right of the page. It is only available to users
+with the `admin` scope and can be used to administer other users as well as connect to cloud storage and services.
 
 ![aica-studio-settings-view](./studio/assets/aica-studio-settings-view.png)
-
-## Logs
-
-Finally, the last button on the top right accesses the logs viewer. This page shows log entries from the running system
-and can be filtered and searched to find relevant entries.
-
-![aica-studio-logs-view](./studio/assets/aica-studio-logs-view.png)

docs/core/studio/studio/3d.md

@@ -0,0 +1,11 @@
+---
+sidebar_position: 3
+title: 3D view
+---
+
+The 3D scene view shows hardware models and frames of the current application. When the application is running, the
+hardware positions and frames update live according to the active control logic.
+
+<!-- TODO: add description of 3D scene settings and controls and update screenshots -->
+
+![aica-studio-3d-view](./assets/aica-studio-3d-view.png)

docs/core/studio/studio/editor.md

@@ -9,32 +9,24 @@ When an application is created or selected for editing, the following applicatio
 
 ![aica-studio-application-editor](./assets/aica-studio-application-editor.png)
 
-On the left of the screen is the YAML code representation of the application, which is how applications are stored and
-parsed. On the right are visualization tools, including the unique application graph editor and the 3D scene viewer.
+The editor features two panels on the left and right side of the main view. The main view shows the iconic AICA dataflow
+graph by default, which is explained more in a following section. However, the main view can also be switched to render
+the 3D scene of the application using the mini-view switcher in the bottom left of the page. The left panel is used for
+managing application metadata with controls to rename, describe, and save the working version. The right panel is the
+context-aware data and property manager for actual application content and behavior grouped in various tabs.
 
-The white chevrons in the middle of the screen can be used to selectively expand the left or right portions of the
-screen.
+<!-- TODO (v5.1): the left panel also includes the option to tag and restore versions or associate labels -->
 
-Application controls are shown above the YAML code.
+The left and right panels as well as the mini-view switcher can be minimized with the respective icon buttons to provide
+more screen space for the main view. Additionally, the width of the right panel can be adjusted with drag interactions
+to remain compact for normal usage or to take up more space for a split-screen effect with the main view.
 
-Exit back to the application manager screen using the X button on the top left. It will prompt to save or discard
-unsaved changes. Running applications will be stopped when closing the application.
+On the top of the screen to the right of the left panel is the main runtime control button. The Start button starts
+running the loaded application, which then changes into a Stop button to stop the running application.
 
-Next to the X button, the cloud storage button can be used to upload and synchronize applications to cloud storage or
-downloaded them locally. This option is disabled until a user with `admin` scope connects to cloud storage in the
-[Settings](../studio.md#settings) page.
+Exit back to the application manager screen using the "Close" button in the left panel. When the left panel is
+minimized, the "X" button on the top left has the same function. Closing an application will prompt to save or discard
+unsaved changes. Running applications must be stopped before closing the application.
 
-Applications can be deleted, saved, or saved as a copy under a new name.
-
-The "Generate Graph" button is used to apply new code changes to the application graph. When editing the YAML code
-manually, changes will not take effect until this button is pressed.
-
-The application can be renamed using the edit icon next to the application name. This also presents an option to add or
-edit the application description, which can serve as a way of differentiating and describing the purpose of various
-applications.
-
-In the top right of the application editor are the runtime controls. The Play button starts the loaded application,
-which can then be stopped with the Stop button.
-
-Beneath the runtime controls are the view selections for the various visualization tools, starting with the application
-graph. These views are presented in more detail in the next section.
+Read on to learn more about the [application graph editor](./graph.md), the [3D scene](./3d.md) and the
+[right panel tabs](./tab-views.md).

docs/core/studio/studio/tab-views.md

@@ -0,0 +1,45 @@
+---
+sidebar_position: 4
+title: Tab views
+---
+
+# Live views
+
+Monitor and visualize the state of a running application with the following live views.
+
+## Scene
+
+<!-- TODO: Settings, Add Component, Scene List and screenshots-->
+
+## Code
+
+<!-- TODO: brief explanation of YAML code and generate graph button, and new screenshot -->
+
+## 3D view / Graph view
+
+Depending on whether the [application graph](./graph.md) or the [3D view](./3d.md) is active for the main view, this tab
+will show the other view. The right panel mode of the graph view is non-interactive for modifying nodes, edges or 
+parameters but allows zooming, panning and pressing trigger buttons for configured events. When the 3D view is in the
+right panel, the 3D view settings are accessed from a mini-panel rather than the Settings sub-tab of the Scene tab.
+
+## Live Data
+
+View the data running on signals and other background topics on the ROS 2 network.
+
+Selecting a signal edge in the graph view while the application is running will automatically select the appropriate
+signal topic for visualization in this tab.
+
+<!-- TODO: new screenshot -->
+
+## Logs
+
+The logs view shows log entries from the running system color-coded by severity level.
+
+<!-- TODO: new screenshot -->
+
+## Live Table
+
+The live state table gives a compact overview of which components and controllers are loaded, what state they are in,
+and which predicates and conditions are true or false.
+
+<!-- TODO: new screenshot -->