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

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, with the state managed globally to ensure consistent UI behavior across components:

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

(source: src/store.ts lines 12–27)

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. The component maps persona IDs to localized labels and descriptions:

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)

Adaptive Detail Levels by Persona

Learn Mode for Junior Engineers

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

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

(source: src/App.tsx line 391)

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

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

(source: src/App.tsx lines 390–401)

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 provides buttons to adjust the detailLevel state:

<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)

• 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:

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)

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

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

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

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 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 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, 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, 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}