Implementation:Ucbepic Docetl BookmarksPanel

Knowledge Sources	Ucbepic_Docetl
Domains	Frontend, React_UI
Last Updated	2026-02-08 00:00 GMT

Overview

Concrete tool for the bookmarks/notes panel that displays user annotations on pipeline output data.

Description

The BookmarksPanel displays a searchable, filterable list of user-created bookmarks (notes) associated with pipeline output rows and columns. It supports text search across note content, color-based filtering, expand/collapse for individual bookmark details, row context display showing the associated data, and bulk clearing of all notes. Each bookmark shows its color indicator, note text, column/row metadata, and associated row content in a collapsible format.

Usage

Rendered in the playground sidebar when users have created bookmarks on output data. Users create bookmarks from the ColumnDialog and manage them in this panel.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/BookmarksPanel.tsx
• Lines: 1-238

Signature

const BookmarksPanel: React.FC = () => { ... }

Import

import BookmarksPanel from "@/components/BookmarksPanel";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
No props -- reads from BookmarkContext

Outputs

Name	Type	Description
rendered	JSX.Element	Searchable bookmarks panel with note details

Usage Examples

<BookmarksPanel />

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment