NLDR Visualization Tool User Interface

Creates the comprehensive user interface for the NLDR visualization tool using modern Bootstrap 5 styling with bslib. The UI provides an intuitive tabbed interface for data exploration, dimensionality reduction, quality assessment, and method comparison.

Usage

nldr_viz_ui()

Value

A tagList object representing the complete UI structure suitable for use in shinyApp or as a module UI function. The returned object contains all necessary HTML, CSS, and JavaScript dependencies.

Details

The user interface is organized into five main navigation panels:

1. Dataset Preview Tab:

File upload widget for CSV datasets with validation
Selection of built-in example datasets (four_clusters, pdfsense)
Interactive column selection with auto-selection option
Data preview table with scrolling and pagination
Dataset summary statistics (rows, columns, data types)
Storage and management of processed NLDR results

2. Dataset Visualization Tab:

Method selection: t-SNE or UMAP with parameter controls
t-SNE parameters: perplexity (5-50), max iterations (100-2000), auto-adjust option
UMAP parameters: n_neighbors (2-50), min_dist (0.01-0.99)
Color mapping options with automatic or manual column selection
Reproducibility controls with random seed setting
Large interactive visualization plot (800px height)
Visualization information panel with method details

3. Dynamic Tour Tab:

Tour display types: Scatter, Sage, or Slice projections
Display customization: axes, 5-NN graph edges, point opacity
Type-specific parameters (alpha for Scatter, gamma for Sage, volume for Slice)
Linked brushing functionality for interactive selection
Side-by-side layout: NLDR plot and dynamic tour visualization

4. Diagnosing Tab:

Automated binwidth optimization with RMSE-based selection
Comprehensive quollr analysis for embedding quality assessment
3D model tour generation with langevitour integration
Results presentation in multiple tabs:
- RMSE vs Binwidth interactive plot
- Optimization results table with sortable columns
- Model fit visualization showing prediction quality
- High-dimensional model tour for deeper exploration
Configuration summary with optimal parameter display

5. Method Comparison Tab:

Two comparison modes: NLDR Settings Comparison and Side-by-Side Visualization
Settings Comparison: RMSE comparison plots across multiple configurations
Side-by-Side: Interactive linked plots for direct method comparison
Dataset selection controls with stored results integration
Linked brushing option for synchronized selections
Best configuration summary and recommendations

The interface uses modern design principles:

Responsive layout that adapts to different screen sizes
Consistent spacing and typography using Bootstrap 5
Loading indicators and progress feedback for long-running operations
Intuitive iconography and color coding for different actions
Collapsible sidebar layouts for optimal screen real estate usage
Contextual help text and tooltips for user guidance

Note

The UI function automatically imports all required dependencies:

bslib for modern Bootstrap 5 theming (Lumen theme)
plotly for interactive visualizations
DT for enhanced data tables
Custom CSS for loading animations and button states
Font Awesome icons for consistent iconography

Custom CSS

The interface includes custom CSS for:

Disabled button states with reduced opacity
Spinning loading animations for progress indication
Consistent button styling across different states
Responsive card layouts and spacing

Accessibility

The UI follows accessibility best practices:

Proper ARIA labels and roles for interactive elements
Keyboard navigation support throughout the interface
High contrast color scheme for readability
Screen reader compatible structure and labeling

Author

GSoC Contributor