State Management & Contexts
Relevant source files
The following files were used as context for generating this wiki page:
- src/app/layout.tsx
- src/contexts/auth-context.tsx (Inferred from src/app/layout.tsx:9)
- src/contexts/workspace-dialog-context.tsx (Inferred from src/components/workspace/workspace-browser.tsx:14)
- src/contexts/workspace-panel-context.tsx (Inferred from src/components/workspace/workspace-browser.tsx:13)
- src/components/workspace/workspace-browser.tsx
- src/hooks/services/workspace/use-workspace-dialog-handlers.ts
- src/components/containers/DataTable.tsx
The DXKB project utilizes a distributed state management architecture primarily built on React Context and specialized hooks. This approach enables global access to user authentication, workspace configuration, and UI-specific states (such as dialogs and panels) without prop-drilling. By combining localized component state (via useState) with global providers in the RootLayout, the system maintains consistency across the application’s complex bioinformatics and data management features.
Sources: src/app/layout.tsx:49-74, src/components/workspace/workspace-browser.tsx:55-80
Global Providers and Layout Integration
State management is initialized at the root of the application. The RootLayout wraps the entire component tree in several providers that manage themes, authentication, and generic library-based providers like TooltipProvider and Toaster.
Core Providers in RootLayout
| Provider | Purpose | Derived From |
|---|---|---|
Providers | High-level wrapper for generic application providers. | src/app/layout.tsx:59 |
ThemeProvider | Manages global CSS variables and theme switching. | src/app/layout.tsx:60 |
AuthProvider | Handles session management, user profile data, and verification. | src/app/layout.tsx:61 |
TooltipProvider | Global configuration for Radix-based tooltips. | src/app/layout.tsx:62 |
Sources: src/app/layout.tsx:59-74
Authentication State Management
The AuthProvider is the primary mechanism for managing user identity and session persistence. It is initialized with data parsed from cookies (e.g., user_profile, user_id, and realm) to allow for Server-Side Rendering (SSR) compatibility.
Authentication Data Flow
The following diagram illustrates how authentication state is parsed from cookies and distributed to the UI.
The system supports cross-resource authentication, allowing users to sign in with DXKB or BV-BRC credentials. This is handled through a shared account infrastructure mentioned in the authentication UI.
Sources: src/app/layout.tsx:29-57, src/app/(auth)/sign-in/page.tsx:156-163, src/components/navbars/desktop-navbar.tsx:32-41
Workspace State and Dialog Management
Workspace operations involve complex state transitions for file manipulation, selection, and UI visibility. This is managed through two specialized contexts: workspace-panel-context and workspace-dialog-context.
Workspace UI State
The WorkspaceBrowser component utilizes several state hooks to coordinate filtering, sorting, and panel visibility.
- UI Visibility: Managed via
useWorkspacePanel, which tracks if panels are manually hidden or expanded and whether hidden files should be visible. - Dialog Dispatching: The
workspace-dialog-contextprovides adispatchfunction and anactiveDialogstate. This controls the display of modals for operations like "Move", "Copy", "Delete", and "Create Folder".
Data Table State
The DataTable component manages its own complex internal state using the @tanstack/react-table library. This includes:
- Column Sizing: Managed via
columnSizingandcolumnSizingInfostates, allowing for persistent and interactive resizing. - Virtualization: Uses
useVirtualizerto maintain performant rendering for thousands of rows by only rendering items currently in the viewport. - Selection: Tracks
rowSelectioninternally or accepts it as a controlled prop from the parent (e.g.,WorkspaceBrowser).
Sources: src/components/containers/DataTable.tsx:78-105, src/components/containers/DataTable.tsx:288-295
Workspace Dialog Actions
The useWorkspaceDialogHandlers hook acts as a middle layer between the Context state and the API Client. It encapsulates useMutation hooks from @tanstack/react-query to handle asynchronous operations.
| Action | State Influence | Side Effects |
|---|---|---|
| Delete | Triggers SET_DELETE_NON_EMPTY_PATHS | Invalidates workspace-browser queries |
| Copy/Move | Updates activeDialog.mode | Displays success/error toast with path details |
| Create Folder | Sanity checks name via sanitizePathSegment | Closes dialog and refetches directory |
| Edit Type | Updates specific object metadata | Triggers query invalidation |
Sources: src/hooks/services/workspace/use-workspace-dialog-handlers.ts:63-140, src/hooks/services/workspace/use-workspace-dialog-handlers.ts:258-278
Conclusion
State management in DXKB is designed for high responsiveness and data integrity. By leveraging React Context for high-level UI states and react-query for server-state synchronization, the application ensures that complex workspace manipulations—such as moving large datasets or managing multi-user permissions—remain synchronized across the browser interface.
Sources: src/components/workspace/workspace-browser.tsx:90-110, src/hooks/services/workspace/use-workspace-dialog-handlers.ts:280-295