Complex UI Components
Relevant source files
The following files were used as context for generating this wiki page:
Complex UI components in the DXKB project comprise sophisticated, stateful elements designed for high-density data display, interactive filtering, and complex service configurations. These components, such as the DataTable and InfoPanel, integrate with the application's data fetching layer to provide users with tools for disease surveillance and bio-informatic analysis.
The architecture relies heavily on React hooks for state management and third-party libraries like TanStack Table for grid logic and Base UI/Radix for accessible primitive behaviors. These components are styled using a custom Tailwind CSS configuration that supports both light and dark modes via CSS variables.
Data Grid and Table Systems
The DataTable is the central component for displaying large datasets. It supports advanced features such as virtualization for performance, manual server-side pagination, sorting, and dynamic column management.
Features and Capabilities
| Feature | Description | Source |
|---|---|---|
| Virtualization | Renders only visible rows to handle thousands of entries efficiently. | DataTable.tsx:431-440 |
| Column Management | Supports drag-and-drop reordering and visibility toggling. | DataTable.tsx:501-526, DataTable.tsx:556-586 |
| Resizing | Interactive column width adjustment with a "ghost line" preview. | DataTable.tsx:443-498 |
| Multi-select | Shift-click support for bulk row selection. | DataTable.tsx:157-194 |
| Export | Capability to download filtered or selected data as CSV or TXT. | DataTable.tsx:532-553 |
DataTable Lifecycle and Data Flow
The DataTable functions as a controlled component when integrated with ListData. It receives data and column definitions, then manages internal UI state (like resizing) while propagating pagination and sorting changes back to the parent.
Detail and Info Panels
The InfoPanel acts as a dynamic sidebar or detail view that renders metadata for specific entities (Genomes, Strains, Experiments, etc.) or workspace items. It utilizes a collapsible section architecture to organize high-density information.
Dynamic Field Mapping
The panel changes its display logic based on the activeTab or variant prop. For search results, it maps raw data keys to human-readable labels using field definitions.
- Workspace Variant: Displays item metadata like Owner, Creation Time, and Disk Usage.
- Search Variant: Dynamically loads field definitions (e.g.,
genomeFields) to group and display attributes such as Taxonomy Info and Sequence Statistics.
Sources: src/components/containers/InfoPanel.tsx:144-245
Workspace Item Detail Flow
When a single item is selected in the workspace, the system calculates the full path and fetches additional metadata like disk usage.
Service Configuration Forms
Complex forms, such as the MetagenomicBinningPage, utilize a multi-card layout to handle intricate bio-informatic job parameters. These components synchronize with the workspace to allow users to select input files (Reads or Contigs) and configure advanced algorithmic settings.
Form Sections and Logic
- Library Management: Uses
useTanstackLibrarySelectionto manage paired-end, single-end, and SRA libraries. - Conditional Inputs: Components like
MetaSPAdessettings are enabled or disabled based on the number of selected libraries. - Advanced Parameters: Utilizes the
Collapsiblecomponent to hide complex settings likemin_contig_lenandmin_contig_covfrom the primary view.
Sources: src/app/services/(metagenomics)/metagenomic-binning/page.tsx:90-140, src/app/services/(metagenomics)/metagenomic-binning/page.tsx:437-480
Layout Primitives: Sheets and Overlays
The UI utilizes Sheet components for mobile navigation and contextual menus. These are built on @base-ui/react/dialog primitives and styled with custom animations for sliding in from different screen edges.
Sources: src/components/ui/sheet.tsx:39-66
Animation States
The system uses custom data attributes to trigger Tailwind-based animations:
data-open: Triggersanimate-inandfade-in-0.data-closed: Triggersanimate-outandfade-out-0.
Sources: src/components/ui/sheet.tsx:32-37, src/app/globals.css:487-512
Styling and Theme Integration
The project employs a robust CSS variable system to maintain visual consistency across complex components. The zinc, orange, violet, and bvbrc themes are imported and applied via the [data-theme] attribute on the HTML body.
Theme Variables Example
| Variable | Usage | Source |
|---|---|---|
--primary | Backgrounds for headers, navbars, and primary buttons. | globals.css:21 |
--secondary | Accent colors for labels and active states. | globals.css:23 |
--muted-foreground | Used for themed scrollbars and inactive text. | globals.css:26, globals.css:126 |
--radius | Border radius control for cards and inputs. | globals.css:46 |
Sources: src/app/globals.css:14-118
Conclusion
The Complex UI Components of DXKB are designed to bridge the gap between complex bio-informatic data and user accessibility. By combining high-performance grid systems (DataTable), dynamic detail inspectors (InfoPanel), and stateful configuration forms, the project provides a unified interface for handling disease surveillance data. These components rely on a structured theme system and modular React architecture to ensure scalability across different research services.