Huds Framework Interactive Visualization - User Guide

Welcome to the Huds Framework interactive visualization. This guide will help you navigate and utilize all the features available in the user interface and the chart.

Getting Started

Note: Before interacting with the visualization, please select a data source from the Select Data dropdown in the controls panel and adjust any required controls to suit your preferences.

User Interface Overview

The user interface consists of several components to help you navigate and explore the data:

• Controls Panel: Contains options to adjust the visualization settings.
• Search Bar: Allows you to search for nodes by name.
• Node List: A scrollable list of all node names available in the current dataset.
• Visualization Area: Displays the interactive tree structure.
• Floating Buttons: Provides quick access to help, data info, expand/collapse functions, exporting the chart, and fullscreen mode.
• Mini-map: Offers an overview of the entire chart for easy navigation.
• Side Panel: Displays detailed information about a selected node.
• Legend: Explains the color coding used for different levels in the tree.

Controls Panel

The controls panel can be toggled by clicking the ☰ button. It contains the following options:

• Select Data: Choose a dataset to load into the visualization.
• Data Info: View information about the currently selected dataset.
• Horizontal Spacing Slider: Adjust the horizontal distance between nodes.
• Vertical Spacing Slider: Adjust the vertical distance between nodes.
• Node Focus During Search: When enabled, searching will center the view on the first matching node.
• Dark Mode Toggle: Switch between light and dark themes for a comfortable viewing experience.
• Node List: A scrollable list of all node names. Click on a name to focus on that node.

Floating Buttons

The floating buttons are located on the right side of the screen and provide quick access to common functions:

• Help (?): Opens this help guide.
• Expand/Collapse (⤢/⤡): Expands or collapses all nodes in the tree.
• Data Information (ℹ️): Displays information about the current dataset.
• Download Image (📷): Exports the current visualization as an image.
• Fullscreen Mode (⛶): Toggles fullscreen mode for an immersive experience.

Hover over any button to see a tooltip describing its function.

Search Functionality

• Use the search bar at the top to find nodes by name. Matching nodes will be highlighted.
• If Node Focus During Search is enabled, the view will center on the first matching node.
• The search is case-insensitive and supports partial matches.
• Suggestions appear as you type, helping you find nodes more efficiently.

Node List Feature

The Node List provides a scrollable dictionary of all node names in the current dataset:

• Accessible via the controls panel under the Node List section.
• Click on a node name to automatically search for and focus on that node in the visualization.
• Helps you discover available nodes and their exact names for searching.

Interacting with Nodes

• Click on a Node: Expand or collapse the node to show or hide its children.
• Hover Over a Node: Display a tooltip with detailed information about the node, including description and recommendations.
• Tooltip Pinning: Click on the tooltip to pin it, keeping it visible until you click again.
• Double-Click on a Node: Opens the side panel with detailed information about the node.
• Side Panel: Appears on the left side, providing comprehensive details about the selected node.

Navigation Controls

• Expand All / Collapse All (⤢/⤡): Use this button to expand or collapse all nodes in the tree.
• Zoom In/Out Buttons (+/−): Use these buttons to zoom into or out of the chart.
• Mini-map: Provides an overview of the entire chart. You can drag the red viewport rectangle to navigate.
• Fullscreen Mode (⛶): Click to enter or exit fullscreen mode for a larger view of the visualization.

Breadcrumb Navigation

• Displays the current path from the root to the selected node at the top of the visualization.
• Helps you keep track of your location within the tree structure.
• Click on any part of the breadcrumb to navigate directly to that node.

Adjusting Visualization Spacing

• Horizontal Spacing: Adjusts the horizontal distance between nodes to expand or compress the tree horizontally.
• Vertical Spacing: Adjusts the vertical distance between nodes to expand or compress the tree vertically.

Keyboard Navigation

• Focus Chart: Click on the chart area or press Tab to bring focus to the chart for keyboard navigation.
• Navigation Keys:
  • Arrow Up/Down: Navigate between nodes vertically.
  • Arrow Left: Collapse the current node if expanded or move to the parent node.
  • Arrow Right: Expand the current node if collapsed or move to its first child.
  • Enter Key: Expand or collapse the focused node.
  • Escape Key: Remove focus from the chart.

Exporting the Visualization

• Click the Download Image (📷) button to export the current state of the visualization as a PNG image.
• The exported image will include all visible nodes and links with their current styles.

Tips for Effective Use

• Zoom and Pan: You can zoom and pan the chart using your mouse wheel and click-and-drag gestures.
• Adjust Spacing: Use the sliders to adjust the spacing between nodes for better visibility, especially when dealing with large datasets.
• Responsive Design: The visualization adjusts to different screen sizes, but for the best experience, use it on a larger screen.
• Dark Mode: Toggle dark mode for a different visual experience that's easier on the eyes in low-light environments.

Accessibility Features

• The visualization is designed to be accessible via keyboard and screen readers.
• Nodes are focusable elements, and ARIA roles and labels are used for better accessibility.
• Tooltips and side panels provide textual information for assistive technologies.

Contact and Support

If you have any questions or need further assistance, please contact the support team or refer to the documentation provided with the application.

Version Information

This help guide corresponds to the latest version of the Huds Framework visualization tool, incorporating all recent features and enhancements.