# Understand-Anything Dashboard Architecture: React Flow Graph, Dark Theme, and Sidebar Layout

> Explore the Understand-Anything dashboard architecture featuring a React Flow graph, responsive sidebar, and Tailwind CSS dark theme. Understand its key components and design.

- Repository: [Yuxiang Lin/Understand-Anything](https://github.com/Lum1104/Understand-Anything)
- Tags: architecture
- Published: 2026-06-02

---

**The Understand-Anything dashboard implements a split-pane React architecture that combines a React Flow-powered graph canvas with a 360-pixel sidebar, unified under a Tailwind CSS dark-theme system controlled via a centralized ThemeContext.**

The Understand-Anything dashboard is a modern React application designed to visualize knowledge graphs through an interactive canvas. Its architecture centers on a responsive two-pane layout defined in [`App.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/App.tsx), separating the graph visualization from an informational sidebar while maintaining a consistent dark-theme UI through React Context.

## Core Layout: Split-Pane Design in App.tsx

The top-level component **[`App.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/App.tsx)** orchestrates the dashboard’s split-view architecture by dividing the viewport into two distinct regions.

The **graph pane** occupies approximately 75% of the screen and hosts the `GraphView` (or `KnowledgeGraphView`) component, which renders the interactive React Flow canvas. The **sidebar pane** maintains a fixed width of **360 pixels** on the right edge and serves as a container for contextual information and file navigation.

State management for the sidebar uses a discriminated union type:

```typescript
// App.tsx – sidebar tab state management
const [sidebarTab, setSidebarTab] = useState<SidebarTab>("info");

```

The sidebar toggles between two primary tabs:
- **"info"** – Renders `ProjectOverview`, `NodeInfo`, or `LearnPanel` depending on user selection
- **"files"** – Renders the `FileExplorer` tree view

When a user selects a node in the graph, the sidebar automatically switches to the **Info** tab to display node-specific metadata.

## React Flow Integration and Theme Synchronization

The graph visualization relies on **[`src/components/GraphView.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/src/components/GraphView.tsx)** and **[`src/components/KnowledgeGraphView.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/src/components/KnowledgeGraphView.tsx)** to wrap the React Flow canvas within a `<ReactFlowProvider>`.

Dark-mode support is achieved by consuming the current theme preset from `ThemeContext` and passing the `colorMode` prop directly to React Flow:

```tsx
// GraphView.tsx – applying theme to React Flow
const { preset } = useTheme();

return (
  <ReactFlowProvider>
    <ReactFlow
      nodes={nodes}
      edges={edges}
      colorMode={preset.isDark ? "dark" : "light"}
      fitView
    >
      {/* Controls and Background components */}
    </ReactFlow>
  </ReactFlowProvider>
);

```

This architecture ensures that React Flow’s internal styling (node handles, edges, background patterns) synchronizes automatically with the application’s Tailwind CSS dark theme.

## Theme System Implementation

The theme architecture centers on **[`src/themes/ThemeContext.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/src/themes/ThemeContext.tsx)**, which exposes a `ThemeContextValue` interface containing:

- `config: Config` – Stores `presetId` and `accentId`
- `preset: Preset` – Contains the `isDark` boolean and color tokens
- `setPreset: (id: PresetId) => void` – Function to switch between dark and light modes
- `setAccent: (id: string) => void` – Function to update accent colors (gold, amber, etc.)

```tsx
// ThemeContext.tsx – context interface definition
interface ThemeContextValue {
  config: Config;
  preset: Preset;               // { isDark: boolean, ... }
  setPreset: (id: PresetId) => void;
  setAccent: (id: string) => void;
}

export function useTheme(): ThemeContextValue { ... }

```

The **[`ThemePicker.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/ThemePicker.tsx)** component (rendered in both the desktop sidebar and mobile drawer) allows users to toggle between presets. The `isDark` flag drives both React Flow’s `colorMode` prop and Tailwind’s `dark` class strategy applied to the root `<html>` element.

## Sidebar Architecture: Info vs. Files

The sidebar implementation in [`App.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/App.tsx) conditionally renders content based on the active tab:

```tsx
// App.tsx – conditional sidebar content rendering
const sidebarContent = (
  <Sidebar>
    <Tabs selected={sidebarTab} onSelect={setSidebarTab} />
    {sidebarTab === "files" ? <FileExplorer /> : infoSidebarContent}
  </Sidebar>
);

```

| Tab | Component | Purpose |
|-----|-----------|---------|
| **Info** | `ProjectOverview`, `NodeInfo`, `LearnPanel` | Displays project summaries, node metadata, and interactive learning interfaces |
| **Files** | `FileExplorer` | Provides a tree-view navigation of the analyzed project’s file system |

The sidebar utilizes Tailwind utility classes referencing the dark palette (`#0a0a0a` backgrounds) and gold accent tokens (`#d4a574`) defined in the theme configuration.

## Mobile Responsive Adaptation

For viewports narrower than 640 pixels, **[`src/components/MobileLayout.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/src/components/MobileLayout.tsx)** detects screen size and transforms the permanent sidebar into a slide-out drawer:

```tsx
// MobileLayout.tsx – responsive layout switching
export default function MobileLayout({ children }) {
  const isMobile = useMediaQuery("(max-width: 640px)");
  return isMobile ? <MobileDrawer>{children}</MobileDrawer> : children;
}

```

The **[`MobileDrawer.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/MobileDrawer.tsx)** component houses the sidebar content and theme picker, while **[`MobileBottomNav.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/MobileBottomNav.tsx)** provides a fixed bottom bar for toggling between the Info and Files tabs on touch devices.

## Code Examples

### Toggling Dark Mode Programmatically

```tsx
import { useTheme } from "./themes/ThemeContext";

function DarkModeToggle() {
  const { preset, setPreset } = useTheme();

  return (
    <button onClick={() => setPreset(preset.id === "dark" ? "light" : "dark")}>
      Switch to {preset.id === "dark" ? "Light" : "Dark"} Mode
    </button>
  );
}

```

### Switching Sidebar Tabs

```tsx
import { useState } from "react";

function SidebarController() {
  const [tab, setTab] = useState<"info" | "files">("info");

  return (
    <nav>
      <button onClick={() => setTab("info")}>Info</button>
      <button onClick={() => setTab("files")}>Files</button>
      {tab === "info" ? <ProjectOverview /> : <FileExplorer />}
    </nav>
  );
}

```

### Embedding the Dashboard

```tsx
import { ThemeProvider } from "./themes/ThemeContext";
import App from "./App";

function Dashboard() {
  return (
    <ThemeProvider>
      <App />
    </ThemeProvider>
  );
}

```

## Summary

- **App.tsx** implements a split-pane layout with a 360px fixed-width right sidebar and a responsive React Flow graph canvas occupying the remaining viewport.
- **React Flow** receives its color mode dynamically via `ThemeContext`, ensuring the graph visualization matches the Tailwind CSS dark theme.
- The **ThemeContext** architecture exposes `preset.isDark`, `setPreset()`, and `setAccent()` to control both React Flow styling and Tailwind utility classes.
- **Sidebar tabs** ("info" and "files") conditionally render `NodeInfo`, `LearnPanel`, or `FileExplorer` components based on user interaction and node selection.
- **MobileLayout.tsx** and **MobileDrawer.tsx** swap the permanent sidebar for a slide-out drawer on screens below 640px width.

## Frequently Asked Questions

### How does the Understand-Anything dashboard switch between dark and light modes?

The dashboard uses [`ThemeContext.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/ThemeContext.tsx) to expose a `preset` object containing an `isDark` boolean. When users select a different preset via [`ThemePicker.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/ThemePicker.tsx), the `setPreset()` function updates the context. This value propagates to React Flow’s `colorMode` prop and toggles Tailwind’s `dark` class on the document root, synchronizing the graph canvas and UI components simultaneously.

### What is the fixed width of the sidebar in the Understand-Anything dashboard?

According to the source code in [`App.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/App.tsx), the sidebar maintains a fixed width of **360 pixels** on desktop viewports. This dimension is explicitly set to balance content readability with graph canvas visibility, leaving approximately 75% of the screen for the React Flow visualization.

### What components render inside the sidebar when a node is selected?

When a user selects a graph node, the sidebar automatically switches to the **Info** tab and renders one of three components: `ProjectOverview` (for high-level summaries), `NodeInfo` (for specific node metadata), or `LearnPanel` (for interactive learning interfaces). If the user manually selects the **Files** tab, `FileExplorer` displays a tree view of the project’s file system instead.

### How does the dashboard architecture handle mobile responsiveness?

The architecture uses [`MobileLayout.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/MobileLayout.tsx) to detect screen widths below 640 pixels via media queries. On mobile devices, the permanent sidebar is replaced by [`MobileDrawer.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/MobileDrawer.tsx) (a slide-out panel from the right edge), while [`MobileBottomNav.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/MobileBottomNav.tsx) provides a fixed bottom navigation bar for switching between Info and Files tabs. The React Flow canvas adjusts to fill the available space above the bottom navigation.