Routing & Navigation Structure
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The DXKB platform utilizes a structured routing and navigation system built on Next.js, integrating complex workspace path management with standard application routing. The architecture ensures that users can navigate through biological data services, personal workspaces, and informational pages while maintaining state and security contexts such as authentication status and workspace ownership.
The navigation system is divided into high-level global navigation (Navbar and Footer) and contextual navigation (Breadcrumbs and Sidebar components), primarily focusing on the dynamic resolution of workspace paths and protected routes.
Sources: src/app/layout.tsx, src/components/navbars/desktop-navbar.tsx:55-155
Global Navigation Components
The platform implements responsive navigation through specialized components for desktop and mobile viewports. These components serve as the primary entry points for the core functional areas: Getting Started, Organisms, Services, and Workspace.
Desktop and Mobile Navbars
The DesktopNavbar and MobileNavbar components manage global links and authentication-dependent routing.
- Dynamic Links: Navigation links are categorized into
gettingStartedItems,organismItems, andserviceItems. - Authentication State: The navigation UI changes based on
isAuthenticatedandisLoadingstates from theuseAuthcontext. Unauthenticated users see "Sign In" and "Sign Up" prompts, while authenticated users see a user profile dropdown with links to their specific workspace and jobs. - Workspace Routing: For authenticated users, workspace links are dynamically generated using the user's realm and username, often encoding the segment to handle special characters in the URL.
Sources: src/components/navbars/desktop-navbar.tsx:64-150, src/components/navbars/mobile-navbar.tsx:32-150
Navigation Information Flow
This diagram illustrates how the navigation components determine which routes to display based on the user's authentication state.
Workspace Path Resolution
Navigation within the Workspace module is highly dynamic and depends on URL parameters and path segments. The system distinguishes between "home" mode (current user's workspace) and "shared" mode (viewing others' shared content).
Path Encoding and Sanitization
To ensure URL safety, workspace segments are processed through utility functions before navigation occurs.
encodeWorkspaceSegment: Encodes special characters and slashes while preserving the@symbol for realm-based usernames.sanitizePathSegment: Removes null bytes, control characters, and leading/trailing whitespace.
Sources: src/lib/tests/utils.test.ts:41-86, src/components/workspace/workspace-browser.tsx:109-115
Workspace View Modes
The WorkspaceBrowser component manages transitions between different views of the filesystem.
| View Mode | Routing Logic | Root Path Example |
|---|---|---|
| Home | Resolves to current user's private directory. | /user@realm/home |
| Shared | Resolves to a shared root or a specific shared path. | /otheruser@realm/path/to/folder |
| Root | Top-level view of a user's workspace (Shared mode). | /user@realm |
Sources: src/components/workspace/workspace-browser.tsx:58-85, src/components/workspace/workspace-breadcrumbs.tsx:7-13
Contextual Breadcrumb Navigation
The WorkspaceBreadcrumbs component provides a hierarchical navigation path that reflects the user's current position within the workspace structure. It handles complex path logic to hide or show realm suffixes (e.g., @bvbrc) based on the viewing context.
Protected Routes and Redirects
Routing security is handled at both the page and component level. The SigninPage manages redirection logic for users attempting to access protected resources.
- Redirect Parameters: Routes requiring authentication (like
/workspaceor/jobs) append aredirectquery parameter to the/sign-inURL. - Post-Auth Navigation: Upon successful sign-in, the application retrieves the
redirectTovalue fromsearchParamsand navigates the user back to their intended destination.
Sources: src/app/(auth)/sign-in/page.tsx:43-55, src/components/navbars/desktop-navbar.tsx:142-152
Footer Navigation Structure
The footer provides persistent access to administrative, informational, and community resources. It is structured into four main logical sections.
| Section | Target URLs |
|---|---|
| About | /about, /funding, /team |
| FAQ | /faq, docs.dxkb.org, /related-resources |
| Updates | /citations, /news, /publications |
| Help | /contact, /privacy-policy, instructional videos |
Sources: src/components/footers/footer.tsx:31-72
Conclusion
The Routing & Navigation Structure of DXKB is a dual-layered system. High-level navigation is managed via a responsive navbar that adapts to user session state, while low-level filesystem navigation within the workspace utilizes a sophisticated path resolution and breadcrumb system. This architecture supports both private user data and collaborative shared environments through deterministic path encoding and conditional URL generation.
Sources: src/components/workspace/workspace-browser.tsx:280-320, src/components/navbars/desktop-navbar.tsx:32-50