feat: create comprehensive specs for all four capabilities

- line-deletion: keyboard shortcuts and bulk delete with confirmation
- label-management: full CRUD UI in sidebar with search/filter
- docker-deployment: multi-stage build, compose, health checks
- hacker-theme: matrix-style colors, neon glows, monospace fonts
This commit is contained in:
Marko Djordjevic 2026-02-12 14:44:45 +01:00
parent f1832de7da
commit a236d2c065
4 changed files with 712 additions and 0 deletions

View file

@ -0,0 +1,166 @@
## ADDED Requirements
### Requirement: Select label by clicking marker
The system SHALL allow users to select label annotations by clicking on their marker symbols on the chart.
#### Scenario: Click on break_up marker
- **WHEN** user clicks on a green arrow (break_up) marker on the chart
- **THEN** system sets selectedLabelId state to the annotation ID, highlights the marker with increased size and glow effect, and scrolls to the label in the sidebar list
#### Scenario: Click on break_down marker
- **WHEN** user clicks on a red arrow (break_down) marker on the chart
- **THEN** system sets selectedLabelId state to the annotation ID, highlights the marker with increased size and glow effect, and scrolls to the label in the sidebar list
#### Scenario: Click already selected marker
- **WHEN** user clicks on a marker that is already selected
- **THEN** system deselects the marker by setting selectedLabelId to null and removes highlight effects
#### Scenario: Click different marker while one is selected
- **WHEN** user clicks on a different marker while another marker is already selected
- **THEN** system deselects the previous marker, selects the new marker, and updates the highlight to the new marker
#### Scenario: Tool mode during label selection
- **WHEN** user selects a label marker
- **THEN** selection works regardless of active tool (works in all modes: none, line, delete, break_up, break_down)
### Requirement: Delete selected label with keyboard
The system SHALL allow users to delete the currently selected label annotation using keyboard shortcuts.
#### Scenario: Delete selected label with Delete key
- **WHEN** a label is selected (selectedLabelId is set) and user presses Delete key
- **THEN** system sends DELETE request to `/api/annotations/{id}`, removes marker from display, clears selection state, and triggers annotation refresh
#### Scenario: Delete selected label with Backspace key
- **WHEN** a label is selected and user presses Backspace key
- **THEN** system sends DELETE request to `/api/annotations/{id}`, removes marker from display, clears selection state, and triggers annotation refresh
#### Scenario: No label selected when pressing delete
- **WHEN** no label is selected (selectedLabelId is null) and user presses Delete or Backspace key
- **THEN** system takes no action on labels (may still delete selected line if line is selected)
### Requirement: Label list in sidebar
The Toolbox SHALL display a collapsible section showing all label annotations with interactive controls.
#### Scenario: Display label list section
- **WHEN** Toolbox renders
- **THEN** system displays "Label Annotations" section below the annotation tools with collapse/expand toggle button
#### Scenario: Label list expanded
- **WHEN** "Label Annotations" section is expanded
- **THEN** system displays scrollable list of all label annotations sorted by timestamp (newest first), with each entry showing timestamp, label type badge, and delete button
#### Scenario: Label list collapsed
- **WHEN** user clicks collapse button on "Label Annotations" section
- **THEN** system hides the label list but shows count summary "Labels: X break_up, Y break_down"
#### Scenario: Empty label list
- **WHEN** no label annotations exist in database
- **THEN** section displays message "No labels yet. Click Break Up or Break Down tools to add labels."
#### Scenario: Label entry format
- **WHEN** displaying a label in the list
- **THEN** each entry shows formatted timestamp (e.g., "Feb 12, 14:30"), colored badge ("BREAK UP" in green or "BREAK DOWN" in red), and trash icon delete button
### Requirement: Click label in list to select on chart
The system SHALL allow users to click a label in the sidebar list to select and highlight it on the chart.
#### Scenario: Click label entry in sidebar
- **WHEN** user clicks on a label entry in the sidebar list
- **THEN** system sets selectedLabelId to that annotation ID, highlights the corresponding marker on chart, and centers the chart view on that timestamp
#### Scenario: Click already selected label in list
- **WHEN** user clicks on a label entry that is already selected
- **THEN** system deselects the label by setting selectedLabelId to null and removes highlights
#### Scenario: Selected label visual in list
- **WHEN** a label is selected
- **THEN** the corresponding entry in the sidebar list has a highlighted background and border
### Requirement: Delete label from sidebar
The system SHALL provide delete buttons for each label in the sidebar list.
#### Scenario: Click delete button for label
- **WHEN** user clicks trash icon button next to a label in the sidebar
- **THEN** system sends DELETE request to `/api/annotations/{id}`, removes label from list and chart, clears selection if that label was selected, and triggers annotation refresh
#### Scenario: Delete button styling
- **WHEN** displaying delete buttons in label list
- **THEN** buttons use red/destructive color on hover and show tooltip "Delete this label"
### Requirement: Search and filter labels
The Toolbox label section SHALL provide search and filter controls.
#### Scenario: Filter by label type
- **WHEN** user selects filter dropdown and chooses "Break Up"
- **THEN** system displays only break_up annotations in the list
#### Scenario: Filter by label type - Break Down
- **WHEN** user selects filter dropdown and chooses "Break Down"
- **THEN** system displays only break_down annotations in the list
#### Scenario: Show all labels
- **WHEN** user selects filter dropdown and chooses "All"
- **THEN** system displays all label annotations regardless of type
#### Scenario: Search by timestamp
- **WHEN** user types text into search input field
- **THEN** system filters list to show only labels whose formatted timestamp contains the search text (case-insensitive)
#### Scenario: Combined search and filter
- **WHEN** user has both search text and type filter active
- **THEN** system shows labels that match both criteria (AND logic)
### Requirement: Label count display
The Toolbox SHALL display counts of each label type.
#### Scenario: Display label counts
- **WHEN** Toolbox renders and labels exist
- **THEN** system displays count summary "Break Up: X | Break Down: Y" at top of label section
#### Scenario: Zero labels
- **WHEN** no labels exist in database
- **THEN** count summary displays "Break Up: 0 | Break Down: 0"
#### Scenario: Count updates after delete
- **WHEN** user deletes a label
- **THEN** count summary updates immediately to reflect the new totals
### Requirement: Delete all labels with confirmation
The system SHALL provide a "Delete All Labels" button with confirmation dialog.
#### Scenario: Click Delete All Labels button
- **WHEN** user clicks "Delete All Labels" button in Toolbox
- **THEN** system displays confirmation dialog with message "Delete all label annotations (Break Up and Break Down)? This cannot be undone." and Cancel/Confirm buttons
#### Scenario: User confirms delete all labels
- **WHEN** confirmation dialog is open and user clicks Confirm button
- **THEN** system sends DELETE request to `/api/annotations?type=break_up,break_down`, removes all label markers from chart, clears label list, clears selection state, triggers annotation refresh, and closes dialog
#### Scenario: User cancels delete all labels
- **WHEN** confirmation dialog is open and user clicks Cancel button
- **THEN** system closes dialog without making any API calls or removing any labels
#### Scenario: Delete All Labels button visibility
- **WHEN** one or more label annotations exist
- **THEN** "Delete All Labels" button is enabled with destructive styling
- **WHEN** no label annotations exist
- **THEN** "Delete All Labels" button is disabled with reduced opacity
### Requirement: API support for label operations
The API SHALL support filtering and bulk deletion of label annotations.
#### Scenario: Delete all break_up labels
- **WHEN** DELETE request sent to `/api/annotations?type=break_up`
- **THEN** system deletes all annotations where label_type equals 'break_up' and returns `{ success: true, deleted: <count> }`
#### Scenario: Delete all break_down labels
- **WHEN** DELETE request sent to `/api/annotations?type=break_down`
- **THEN** system deletes all annotations where label_type equals 'break_down' and returns `{ success: true, deleted: <count> }`
#### Scenario: Delete multiple types at once
- **WHEN** DELETE request sent to `/api/annotations?type=break_up,break_down`
- **THEN** system deletes all annotations where label_type is either 'break_up' or 'break_down' and returns `{ success: true, deleted: <count> }`
#### Scenario: Get labels with type filter
- **WHEN** GET request sent to `/api/annotations?type=break_up`
- **THEN** system returns only annotations where label_type equals 'break_up'