HTML Views

HTML Views

TodoFiles provides four HTML views for rich display of todo lists in Jupyter and Pluto notebooks. Each view renders via show(io, MIME"text/html"(), ...), so simply returning a view object in a notebook cell will display it.

Setup

Let’s create a sample TodoFile to demonstrate each view:

todos = [
    Todo("Call Mom @phone +Family"; priority='A', creation_date=Date(2024, 1, 15), metadata=Dict("due" => "2024-01-20")),
    Todo("Buy groceries @store +Errands"; priority='B', creation_date=Date(2024, 1, 20), metadata=Dict("due" => "2024-01-25")),
    Todo("Write report @computer +Work"; priority='A', creation_date=Date(2024, 1, 10), metadata=Dict("due" => "2024-02-01")),
    Todo("Schedule dentist @phone +Health"; priority='C'),
    Todo("Pay bills"; completed=true, creation_date=Date(2024, 1, 10), completion_date=Date(2024, 1, 16)),
    Todo("Clean garage +Home"),
]

path = tempname()
write_todos(path, todos)
tf = TodoFile(path)
Call MomA@phone+Familydue:2024-01-20
Buy groceriesB@store+Errandsdue:2024-01-25
Write reportA@computer+Workdue:2024-02-01
Schedule dentistC@phone+Health
✓Pay bills
Clean garage+Home

ListView

ListView renders each task as a card with checkboxes, priority badges, and colored tag pills:

ListView(tf)
Call MomA@phone+Familydue:2024-01-20
Buy groceriesB@store+Errandsdue:2024-01-25
Write reportA@computer+Workdue:2024-02-01
Schedule dentistC@phone+Health
✓Pay bills
Clean garage+Home

This is also the default HTML display for any TodoFile:

tf  # same as ListView(tf)
Call MomA@phone+Familydue:2024-01-20
Buy groceriesB@store+Errandsdue:2024-01-25
Write reportA@computer+Workdue:2024-02-01
Schedule dentistC@phone+Health
✓Pay bills
Clean garage+Home

TableView

TableView renders tasks as a data table with columns for status, priority, description, tags, and dates:

TableView(tf)
Done Priority Description Tags Created Completed
A Call Mom @phone+Familydue:2024-01-20 2024-01-15
B Buy groceries @store+Errandsdue:2024-01-25 2024-01-20
A Write report @computer+Workdue:2024-02-01 2024-01-10
C Schedule dentist @phone+Health
✓ Pay bills 2024-01-10 2024-01-16
Clean garage +Home

KanbanView

KanbanView displays tasks grouped into columns. The default grouping is by :priority:

KanbanView(tf)

A

Call MomA@phone+Familydue:2024-01-20
Write reportA@computer+Workdue:2024-02-01

B

Buy groceriesB@store+Errandsdue:2024-01-25

C

Schedule dentistC@phone+Health

(none)

✓Pay bills
Clean garage+Home

Group by completion status

KanbanView(tf, :completed)

Done

✓Pay bills

Pending

Call MomA@phone+Familydue:2024-01-20
Buy groceriesB@store+Errandsdue:2024-01-25
Write reportA@computer+Workdue:2024-02-01
Schedule dentistC@phone+Health
Clean garage+Home

Group by project

Tasks with multiple projects appear in each relevant column:

KanbanView(tf, :projects)

Errands

Buy groceriesB@store+Errandsdue:2024-01-25

Family

Call MomA@phone+Familydue:2024-01-20

Health

Schedule dentistC@phone+Health

Home

Clean garage+Home

Work

Write reportA@computer+Workdue:2024-02-01

(no project)

✓Pay bills

Group by context

KanbanView(tf, :contexts)

computer

Write reportA@computer+Workdue:2024-02-01

phone

Call MomA@phone+Familydue:2024-01-20
Schedule dentistC@phone+Health

store

Buy groceriesB@store+Errandsdue:2024-01-25

(no context)

✓Pay bills
Clean garage+Home

GanttView

GanttView renders tasks as horizontal bars on a timeline. Each task needs a creation_date (start) and either a due metadata key or completion_date (end) to appear on the chart. Tasks without both dates are silently excluded.

GanttView(tf)
Task Timeline
A Call Mom
B Buy groceries
A Write report
Pay bills
2024-01-102024-02-01

Bars are colored by priority and completed tasks are shown with reduced opacity.

The html_view Convenience Function

html_view is a single entry point that returns the appropriate view type:

html_view(tf)  # ListView (default)
Call MomA@phone+Familydue:2024-01-20
Buy groceriesB@store+Errandsdue:2024-01-25
Write reportA@computer+Workdue:2024-02-01
Schedule dentistC@phone+Health
✓Pay bills
Clean garage+Home
html_view(tf; view=:table)
Done Priority Description Tags Created Completed
A Call Mom @phone+Familydue:2024-01-20 2024-01-15
B Buy groceries @store+Errandsdue:2024-01-25 2024-01-20
A Write report @computer+Workdue:2024-02-01 2024-01-10
C Schedule dentist @phone+Health
✓ Pay bills 2024-01-10 2024-01-16
Clean garage +Home 
html_view(tf; view=:kanban, group_by=:projects)

Errands

Buy groceriesB@store+Errandsdue:2024-01-25

Family

Call MomA@phone+Familydue:2024-01-20

Health

Schedule dentistC@phone+Health

Home

Clean garage+Home

Work

Write reportA@computer+Workdue:2024-02-01

(no project)

✓Pay bills
html_view(tf; view=:gantt)
Task Timeline
A Call Mom
B Buy groceries
A Write report
Pay bills
2024-01-102024-02-01