Skip to main content

​
Rendering Pipeline

The render system transforms parsed OnitSession data into interactive HTML through a hierarchical method structure.

​
Render Methods

Method Inventory (7 total): The base class provides renderHeader() and getViewerStyles() for consistent UI across all wiki viewers.

​
Session Item Structure

Each session renders as an accordion item with status indicators and metadata. Visual Layout:
Element Breakdown:
  • Arrow icon: 16×16px, rotates 90° when expanded
  • Status dot: 6×6px circle, color matches status badge
  • Session name: Flex:1, truncates with ellipsis
  • Date/time: 11px font, never truncates
  • Status badge: 10px font, 2px padding, rounded corners

​
Status Visualization

Three status types with consistent color coding: Status is determined automatically:
  • Active: modifiedAt within 24 hours
  • Completed: In WIP folder, older than 24 hours
  • Archived: In wiki folder (not WIP)

​
Date Formatting

Smart date display based on recency: Formatting Logic:
Examples:
  • Modified 2 hours ago: “14:30”
  • Modified yesterday: “yesterday”
  • Modified 3 days ago: “2025-12-25”

​
Event System

Two-layer event handling with base class integration.

​
Toggle Listeners

Inherited from WikiBaseViewer, handles WIP/Wiki switching: Flow:
  1. User clicks [WIP] or [Wiki] button
  2. Get data-mode attribute
  3. Update isWip flag
  4. Call refresh() (reload data + re-render)
Effect:
  • Changes filesystem path (wip/onit/ ↔ wiki/onit/)
  • Loads different session set
  • Resets all UI state (accordion expansions lost)

​
Accordion Listeners

Handles session expansion/collapse with content loading: Flow:
  1. User clicks session header
  2. Query .wiki-accordion-item wrapper
  3. Get data-doc-path attribute
  4. Call toggleAccordion() from base class
Accordion State Machine:
Key Features:
  • Content caching: No re-load on re-expand
  • Sticky headers: Header sticks during scroll
  • Smooth scrolling: scrollIntoView() on expand

​
Sticky Header Behavior

When accordion expands, its header becomes sticky below the viewer header. Calculation:
This keeps the session header visible when scrolling through long content.

​
Empty State

Context-aware empty state message based on current mode: WIP Mode:
Wiki Mode:
The message guides users toward the appropriate action for each context.

​
Refresh Mechanism

Complete data reload and UI re-render: Refresh Flow:
State Loss on Refresh:
  • All accordion expansions collapse
  • Cached content is discarded
  • Scroll position may reset
  • Only first session expanded (default)
Trade-off: Simplicity over state preservation (SMPC principle).

​
Content Export

The getContent() method provides plain text export for clipboard: Format:
Pattern: [{date} {time}] {sessionName} ({status}) Separator: Newline (\n) Use cases: Copy to clipboard, export to file
THE CENTER
Simple interactions preserve focus on content

Technical Credibility

Uses CSS custom properties for theming. Implements accordion pattern from WikiBaseViewer. Status colors match Tailwind’s color palette for consistency. All render methods are synchronous except content loading via IPC.