# How Understand-Anything Adjusts Detail Levels in Its Persona-Adaptive UI for Junior vs Experienced Engineers

> Discover how Understand Anything's persona-adaptive UI tailors detail levels for junior and experienced engineers using Zustand state for learn or deep dive modes.

- Repository: [Yuxiang Lin/Understand-Anything](https://github.com/Lum1104/Understand-Anything)
- Tags: deep-dive
- Published: 2026-05-31

---

**The Understand-Anything dashboard uses a Zustand-based `persona` state to toggle between junior "learn mode" with educational sidebars and experienced "deep dive" mode with raw node data, while filtering graph nodes based on technical expertise.**

The Understand-Anything repository implements a sophisticated **persona-adaptive UI** that dynamically adjusts information density based on the user's technical background. This system distinguishes between non-technical stakeholders, junior engineers, and experienced developers to present code architecture at appropriate detail levels without overwhelming users or hiding critical context.

## Overview of the Three Personas

The dashboard maintains a global **`persona`** value in its Zustand store, supporting three distinct modes:

- **Junior**: Activates *learn mode*, displaying educational walkthroughs in the sidebar and defaulting to higher-level architectural views while allowing incremental exploration
- **Experienced**: Removes educational panels, providing immediate access to raw node data and full control over detail granularity
- **Non-technical**: Hides all code-level nodes (functions and classes), exposing only architectural file and infrastructure elements

## Global State Management

### Storing the Persona Value

The personae are defined as a TypeScript union type in [`src/store.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/src/store.ts), with the state managed globally to ensure consistent UI behavior across components:

```ts
export type Persona = "non-technical" | "junior" | "experienced";
…
persona: Persona;
…
setPersona: (persona: Persona) => void;

```

*(source: [src/store.ts lines 12–27](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/dashboard/src/store.ts#L12-L27))*

Changing the persona triggers a cache clear, forcing the graph to re-compute with updated filtering rules.

### The PersonaSelector Component

Users switch personae via the **PersonaSelector** component located at [`src/components/PersonaSelector.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/src/components/PersonaSelector.tsx). The component maps persona IDs to localized labels and descriptions:

```tsx
const personas = [
  { id: "non-technical", label: t.personaSelector.overview, description: t.personaSelector.overviewDesc },
  { id: "junior",        label: t.personaSelector.learn,    description: t.personaSelector.learnDesc },
  { id: "experienced",  label: t.personaSelector.deepDive,description: t.personaSelector.deepDiveDesc },
];
…
<button onClick={() => setPersona(p.id)} …>{p.label}</button>

```

*(source: [src/components/PersonaSelector.tsx lines 10–34](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/dashboard/src/components/PersonaSelector.tsx#L10-L34))*

## Adaptive Detail Levels by Persona

### Learn Mode for Junior Engineers

Both the **App** and **MobileLayout** components compute an `isLearnMode` flag that determines sidebar content:

```tsx
const isLearnMode = tourActive || persona === "junior";

```

*(source: [src/App.tsx line 391](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/dashboard/src/App.tsx#L391))*

When `isLearnMode` evaluates to true, the sidebar conditionally renders the **LearnPanel** for educational guidance and displays a **ProjectOverview** when no node is selected:

```tsx
{selectedNodeId && <NodeInfo />}
{isLearnMode && (
  <Suspense fallback={null}>
    <LearnPanel />
  </Suspense>
)}
{!selectedNodeId && !isLearnMode && <ProjectOverview />}

```

*(source: [src/App.tsx lines 390–401](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/dashboard/src/App.tsx#L390-L401))*

For junior engineers, the UI starts at the **file view** (architecture level) but allows progression to class-level inspection as familiarity increases.

### Streamlined Views for Experienced Engineers

Experienced persona users bypass the LearnPanel entirely. The sidebar displays only the selected node's **NodeInfo**, eliminating educational overhead. These users retain full control over the **file** versus **class** view toggle and can reveal individual functions within classes using the optional "show functions" control.

### Architectural Focus for Non-Technical Users

The non-technical persona aggressively filters the graph to remove implementation details. When `persona === "non-technical"`, the system hides all nodes with types classified as sub-file elements (functions and classes), restricting visibility to high-level architectural components only.

## Controlling Graph Granularity

### Detail Level Toggles

The header interface in [`src/App.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/src/App.tsx) provides buttons to adjust the `detailLevel` state:

```tsx
<button onClick={() => setDetailLevel("file")} …>{t.detailLevel.files}</button>
<button onClick={() => setDetailLevel("class")} …>{t.detailLevel.classes}</button>
{detailLevel === "class" && (
  <button onClick={toggleShowFunctionsInClassView}>…{t.detailLevel.fn}</button>
)}

```

*(source: [src/App.tsx lines 488–531](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/dashboard/src/App.tsx#L488-L531))*

- **File view**: Displays only file nodes representing architectural boundaries
- **Class view**: Expands to show class nodes, with an optional toggle to reveal contained functions

### Node Filtering in GraphView

The **GraphView** component applies both `detailLevel` and persona constraints when rendering the graph. The filtering logic checks the current detail level to determine node expansion and applies persona-specific filters:

```ts
if (detailLevel !== "file") {
  // expand class nodes; optionally expand functions
}
…
if (persona === "non-technical" && subFileTypes.has(n.type)) return false;

```

*(source: [src/components/GraphView.tsx lines 13–41](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/dashboard/src/components/GraphView.tsx#L13-L41))*

While junior and experienced personas both access class and function nodes, only experienced users typically utilize the "show functions" toggle for deep code inspection.

## Implementation Examples

### Switching to Junior Persona

```tsx
setPersona("junior");

// Results:
// - Sidebar renders LearnPanel with guided explanations
// - ProjectOverview appears when no node is selected
// - Detail level defaults to "file" but allows "class" exploration

```

### Switching to Experienced Persona

```tsx
setPersona("experienced");

// Results:
// - Sidebar shows only NodeInfo for selected nodes
// - LearnPanel is suppressed
// - Full access to class view and function visibility toggles

```

### Switching to Non-Technical Persona

```tsx
setPersona("non-technical");

// Results:
// - GraphView filters out function and class nodes via subFileTypes check
// - Only architectural file and infrastructure nodes remain visible
// - Detail-level controls remain in UI but underlying data is filtered

```

## Summary

- The `persona` state in [`src/store.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/src/store.ts) drives all adaptive UI behaviors, supporting three distinct technical audiences
- **Junior engineers** trigger *learn mode* (`isLearnMode`), which injects a **LearnPanel** and **ProjectOverview** into the sidebar
- **Experienced engineers** see only raw **NodeInfo**, with unrestricted access to detail-level toggles for file, class, and function views
- **Non-technical users** have code-level nodes (classes and functions) filtered out entirely in **GraphView**, ensuring only architectural elements remain visible
- Detail granularity is controlled independently via `setDetailLevel("file")` or `setDetailLevel("class")`, with an optional `toggleShowFunctionsInClassView` for deep inspection

## Frequently Asked Questions

### How does the UI determine when to show the LearnPanel?

The UI calculates an `isLearnMode` boolean in [`src/App.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/src/App.tsx) using the expression `const isLearnMode = tourActive || persona === "junior"`. When this evaluates to true, the component renders the **LearnPanel** beneath any selected node information and displays a **ProjectOverview** when no node is selected.

### Can experienced engineers access the LearnPanel if needed?

No. According to the implementation in [`src/App.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/src/App.tsx), the LearnPanel only appears when `isLearnMode` is active, which requires either `tourActive` (guided tour state) or `persona === "junior"`. Experienced persona users do not see educational content unless they explicitly switch their persona setting.

### What happens to class and function nodes when switching to non-technical mode?

When `persona === "non-technical"`, the **GraphView** component applies an additional filter that checks `if (persona === "non-technical" && subFileTypes.has(n.type)) return false`, effectively removing any node classified as a class, function, or other sub-file implementation detail from the rendered graph.

### Where is the persona state defined in the codebase?

The persona type definition and state management reside in [`src/store.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/src/store.ts), which exports the `Persona` type as `"non-technical" | "junior" | "experienced"` and exposes `setPersona` as a Zustand store action. The UI components consume this state via the global store to conditionally render content.