Document Tree Panel

The Document Tree Panel is a UI component within the cheMD web application that provides a structural overview of a cheMD document. It serves as a document outline (MVP), listing the various semantic blocks and the document's unique identifier parsed from the Markdown source text.

Sources: apps/web/src/features/document-tree/components/DocumentTreePanel.tsx:1-26, apps/web/tests/document-tree-panel.test.tsx:1-25

Architecture and Components

The Document Tree Panel is implemented as a client-side React component. It sits within the workspace layout, typically functioning as a side panel to help users navigate the structured chemistry objects defined in their Markdown files.

Data Flow

The panel receives the raw Markdown source as a prop. It utilizes a utility function, buildMockTreeFromSource, to parse this source and generate an array of nodes representing the document's structure. These nodes are then mapped into a list display.

The diagram shows the transformation from raw text to a structured list of document components.

Sources: apps/web/src/features/document-tree/components/DocumentTreePanel.tsx:13-33

Key Data Structures

The internal representation of the tree relies on a simplified node structure designed for the MVP outline.

Sources: apps/web/src/features/document-tree/components/DocumentTreePanel.tsx:28-31, apps/web/tests/document-tree-panel.test.tsx:10-24

Integration with Semantic Blocks

The Document Tree Panel is designed to recognize and display standard cheMD block types as defined in the language specification. This includes the document metadata itself and various experimental objects.

Supported Node Types

Based on integration tests and component logic, the panel identifies:

• Document ID: Extracted from the YAML frontmatter.
• Reaction Blocks: Identified by the :::reaction #id syntax.
• Result Blocks: Identified by the :::result #id syntax.
• Molecule Blocks: Identified by the :::molecule #id syntax.

The relationship between the UI panel and the data it consumes.

Sources: apps/web/tests/document-tree-panel.test.tsx:11-20, chemd-v0.1-spec.md:144-165

UI Implementation Details

The panel is styled to fit within the workspace-panel ecosystem of the cheMD playground. It uses a specific CSS class structure to maintain consistency with other features like the Editor and Preview shells.

Component Structure

The UI is organized into a header and a scrollable body:

1. Panel Header: Displays the "Tree" kicker and "Document outline (MVP)" metadata.
2. Detail Card: A container with a scroll area for the list.
3. Tree List: An unordered list where each item displays the kind of the block and its #id in a code format.

// Example of how nodes are rendered in the list
<li key={`${node.kind}:${node.id}`} className="tree-item">
  <span className="tree-kind">{node.kind}</span>
  <code className="tree-id">#{node.id}</code>
</li>

Sources: apps/web/src/features/document-tree/components/DocumentTreePanel.tsx:17-36, apps/web/src/app/page.tsx:160-180

Significance in the v0.1 Architecture

In the cheMD v0.1 architecture, the Document Tree Panel represents the "Object Indexing" stage of the pipeline in a visual format. While the full pipeline handles reference resolution and template expansion, the Tree Panel provides the user with immediate feedback on which objects have been successfully identified by the parser and assigned an ID.

Sources: chemd-v0.1-architecture.md:85-110, packages/parser/tests/parser.test.ts:31-60

Summary

The Document Tree Panel provides a lightweight navigation and structural validation tool for cheMD documents. By parsing the Markdown source and frontmatter, it extracts and displays the primary identifiers of the experiment, including the document ID and various chemical objects (reactions, results, molecules), facilitating a clear overview of the structured data within a plain-text file.