Implement "Compact Mode" for Graph Canvas

[MathisVerstrepen]

This feature introduces an alternate, simplified visualization mode for the graph canvas, referred to as "Compact Mode." The primary goal is to enhance the user experience when dealing with large and complex graphs by reducing visual clutter and providing a cleaner, more focused overview. This mode will externalize node settings from the graph view itself to a dedicated section in the Properties (Right) Sidebar.

1. Problem Statement & Motivation

The current graph view can become visually overwhelming and challenging to navigate as the number of nodes and connections grows. On-node settings, while convenient for smaller graphs, contribute to this visual noise. "Compact Mode" aims to address this by offering a high-level, minimalist view that prioritizes graph structure and flow, making it easier to understand and manage complex workflows at a glance.

2. Feature Overview

"Compact Mode" will provide a streamlined representation of the graph canvas with the following key characteristics:

• Simplified Node Appearance: Nodes will adopt a more minimalist design (as conceptually shown in the provided image).
• Externalized Settings: All node-specific configuration options (which are currently accessible directly on the node, e.g., via a "..." button) and streaming text output will be removed from the node's visual representation in this mode.
• Centralized Settings Management: These settings will be accessible exclusively through a new "Node Settings" submenu within the "Properties (Right) Sidebar."
• Independent Layout: Nodes in Compact Mode can have their own distinct positions (x, y coordinates) and dimensions (width, height) separate from their representation in the main view.

3. Detailed Functionality

3.1. Compact Graph View (Frontend Rendering)

• Minimalist Node Design:
  • Nodes will be rendered with reduced visual complexity, focusing on the node type icon, name, and essential input/output handles.
  • The "play" button (if present) should remain visible for direct execution.
  • Crucially, any on-node settings icons (e.g., the three-dots menu in the top-right of the current nodes) will not be rendered in Compact Mode.
• Independent Layout: Nodes' visual x, y coordinates and width, height dimensions in Compact Mode will be distinct from their values in the Main View. This allows users to arrange and size their nodes differently for optimal readability in each view.
• Interaction Consistency: Basic graph interactions such as dragging nodes, creating/deleting connections, and selecting nodes should function identically to the Main View, maintaining a consistent user experience for graph manipulation.

3.2. Externalized Node Settings (Properties Sidebar Integration)

• Dynamic Sidebar Content: When a user selects a node in Compact Mode, the "Properties (Right) Sidebar" will dynamically update to display its settings.
• New "Node Settings" Submenu: A new, dedicated submenu or section titled "Node Settings" will appear within the Properties Sidebar.
• Configuration Access: This "Node Settings" section will contain all the configuration inputs and controls that were previously available directly on the node in the Main View.
• Real-time Updates: Changes made to a node's settings via the sidebar should immediately apply and be reflected in the graph.

3.3. View Toggle in Graph Toolbar

• Toggle UI Element: A new UI element (e.g., a toggle switch or a two-state button with distinct icons for "Main View" and "Compact Mode") will be added to the main graph toolbar.
• Instant Switching: Clicking this toggle will instantly switch the graph canvas between the "Main View" and "Compact Mode."
• Persistence: The user's selected view mode should persist per canvas and ideally across user sessions (e.g., stored in user preferences).

4. Data Model & Persistence

• Database Schema Update: To accommodate the independent layout of nodes in Compact Mode, the PostgreSQL database schema for nodes (e.g., in the nodes table) requires modification.
  • For each node, we need to store two sets of layout properties:
    • main_view_x, main_view_y, main_view_width, main_view_height
    • compact_view_x, compact_view_y, compact_view_width, compact_view_height
• Default Values for New Nodes: When a new node is created (which will initially happen in the Main View), its compact_view_x, compact_view_y, compact_view_width, and compact_view_height should be initialized. A sensible default would be to copy the main_view_* values, allowing users to then manually adjust them in Compact Mode.
• Saving Layout Changes: Any drag, drop, or resize operation performed on a node should only update the x, y, width, height values corresponding to the currently active view mode.

5. User Experience (UX) Goals

• Reduced Clutter: Provide a visually cleaner canvas, especially for complex graphs, by removing on-node settings.
• Improved Overview: Make it easier to grasp the overall structure and flow of large workflows at a glance.
• Focused Interaction: Allow users to focus on graph layout and connections in Compact Mode, while still providing full configurability via the sidebar when a node is selected.
• Flexibility: Empower users to optimize the layout of their graphs for different viewing purposes (detailed configuration vs. high-level overview).

6. Technical Implementation Details & Considerations

• Frontend Rendering Logic:
  • Implement conditional rendering for node components based on the active view mode state.
  • Ensure smooth and performant transitions when switching between views, especially for graphs with many nodes.
  • Manage the state of the currently selected node to drive the dynamic content of the Properties Sidebar.
  • Verify that all existing node interactions (e.g., connecting handles, context menus for deletion) function correctly in Compact Mode.
• Backend API:
  • Update API endpoints responsible for saving and retrieving node data to correctly handle and store the separate main_view_* and compact_view_* coordinates.
  • Ensure the frontend sends the correct view mode context when updating node positions via the API.
• Performance:
  • Monitor and optimize rendering performance for very large graphs in both modes. The simplified rendering in Compact Mode should ideally improve performance for these cases.
  • Ensure that updating node positions in one view does not negatively impact the performance or stability of the other.
• Consistency: The underlying logic and functionality of the nodes remain unchanged; only their visual representation and the method of accessing their settings are altered.