Feature: add sorting by downtime duration and type

[abhishekmagdum]

Summary

Introduces the ability to sort by the longest/shortest downtime events in Github history. Can also sort by the disruption type (critical, major, minor, maintenance, or operational).

---

Motivation

Out of curiosity, I wanted to see what events caused the largest disruptions in Github downtime history, since it's genuinely interesting to read the post-mortem reports that are usually included.

---

Screenshots

---

Changes

• Sort dropdown in the Incident Timeline panel header with three options: Date (newest first), Duration (longest first), Duration (shortest first)
• Filter pills row below the panel header to toggle visibility by impact type: Major, Minor, Maintenance, Operational — multiple filters can be active simultaneously
• Duration sort flattens grouped-by-date layout into a ranked flat list (capped at 20 items before "Show more")
• Filter state is independent of sort order — both apply together on every render
  autocomplete="off" on the sort select prevents browser form-state persistence across page refreshes

[Copilot]

Pull request overview

Adds two new controls to the Incident timeline panel: a sort dropdown (date / duration desc / duration asc) and a row of impact-type filter pills (Major, Minor, Maintenance, Operational) that can be combined freely.

Changes:

• New <select id="timelineSort"> and .timeline-filters markup added to the Incident timeline panel header.
• render() in app.js reworked so renderTimeline recomputes filtered/sorted slices on every change; date-desc keeps the original grouped layout, duration sorts flatten into a ranked list capped at 20.
• New CSS for .timeline-filters, .filter-pill*, and .sort-select styling, including pressed/unpressed pill opacity and a custom dropdown chevron.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
site/index.html	Adds the sort <select> to panel actions and a row of filter pill buttons.
site/app.js	Implements filter set, sort order state, and the new dual-path rendering inside renderTimeline, plus event listeners for sort/filter controls.
site/styles.css	Adds styling for the timeline filter pills, the divider above them, and the custom sort select.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.