Interface Overview
The generator uses a two-panel layout:
- Left Panel: Form for creating and editing chronology entries
- Right Panel: Toggles between Generator Output (HTML preview) and Collection View (all saved entries)
Mode Selection Screen
This is the initial view when you start the generator.
Mode Selection
Output Generation
Documentation Buttons
Data Management
Deletes ALL entries permanently with no undo. Prompts for confirmation.
Usage: Only when starting completely fresh. Always save a backup first.
Single Entry Form
Control Strip (Top of Form)
Shows "Mode: Single Entry" indicator
Date/Title Fields
Format: YYYY-MM-DD (selected from date picker)
Purpose: Temporal anchor for the entry - determines chronological position
Usage: Select the date when the event occurred
Markers Section
Evidence markers appear as clickable icon buttons that toggle on/off (highlighted when active).
Main Entry
Purpose: Primary description of what happened
Usage: Write a detailed narrative of the event. This is the core factual description.
Documents Section
Document Block Fields:
Chronology Jumps
Notes Section
Claims Section
Compound Entry Form
Control Strip
Shows "Mode: Compound Entry" indicator
Contains the same Change Mode and Clear Form buttons as Single Entry mode, plus:
Parent Event Fields
The date for the entire compound event. This date is automatically copied to all sub-events.
Sub-Event Blocks
Each sub-event contains its own complete set of fields:
Sub-Event Fields:
- Date (read-only): Automatically set to parent date
- Title: Name of this specific sub-event (e.g., "Judge's ruling on evidence")
- Markers: Independent icon ribbon for this sub-event
- Details: Full description of what happened in this moment
- Documents: Document blocks specific to this sub-event
- Chronology Jumps: Cross-references from this sub-event
- Notes: Comments specific to this sub-event
- Claims: Claim references for this sub-event
Collection View (Right Panel)
Displays all saved entries with preview and management options.
Entry Display
Each entry shows:
- Date and title in header
- Entry type indicator (Single/Compound)
- Formatted preview of content
- Documents listed with color-coded categories
- Markers displayed as icons
- Notes and claims shown
Entry Management Buttons
Removes the entry permanently from the collection. Prompts for confirmation.
Usage: Remove incorrect or unwanted entries
Preview Window
Generated Output Files
chronology.html
- All entries in chronological order
- Navigation controls
- Document links (as specified in entries)
- Jump navigation between entries
- Print functionality
- The actual document files (only links to them)
- Search functionality
- Editing capability
search.html
- Full chronology corpus embedded
- Search interface with options (Case sensitive, Regular Expression, All matches)
- Results display area
- Print and Clear functions
- Returns complete chronology entries, not text fragments
- Preserves all context, documents, notes, and markers
- Provides jump links back to chronology positions
- No isolated snippets - full evidential context maintained
Recommended Workflow
1. Start Session
- Open generator in browser
- Select mode (Single or Compound)
- Begin creating entries
2. Work Incrementally
- Fill out entry form completely
- Click "Add to Chronology"
- Click "Save Backup" regularly (every 5-10 entries recommended)
- Review in Collection View periodically
3. Review and Edit
- Toggle to Collection View
- Check entries for accuracy
- Use "Edit Entry" for corrections
- Delete any errors using "Delete Entry"
4. Generate Output
- Click "Generate Chronology.html"
- Save file to desired location
- Open file and test document links
- Verify all dates and content display correctly
5. Optional: Generate Search
- Click "Generate Search.html"
- Save alongside chronology file
- Test search functionality with sample queries
6. Final Backup
- Click "Save Backup" one final time
- Store JSON file safely
- Allows future additions or edits if needed
Color Coding System
Document Categories
| Category | Color | Hex Code |
|---|---|---|
| Probative | Purple | #450578 |
| Custody | Red | #FF1717 |
| CAD | Blue | #0682BD |
| Report | Orange | #fb923c |
| Home Office | Brown | #CC6C31 |
| Judged | Royal Blue | #272AF5 |
| Public | Green | #A6F527 |
| Oversight | Magenta | #F527E0 |
| Claim | Orange-Red | #FF5C3D |
| Appendix | Blue | #0041CC |
Button Visual Indicators
- Blue buttons: Primary actions (Add, Commit, Add Sub-Event)
- Green buttons: Success actions (Generate, Save, Copy)
- Grey buttons: Secondary actions (Browse, Change Mode, Clear Form)
- Red buttons: Danger actions (Delete, Erase, Remove)
Design Principles
Understanding why the tool works the way it does:
1. Temporal Integrity
The chronology cannot be manually reordered. Entries appear in date order automatically. This prevents narrative manipulation.
2. Evidential Discipline
All documents must be anchored to specific events. Documents cannot exist independently of their temporal context.
3. Contextual Preservation
Search returns full entries, not text fragments. This prevents decontextualization of evidence.
4. Standalone Operation
No server dependencies. All processing happens in the browser. Generated files work offline.
5. Deliberate Action
No auto-save. Explicit "Add to Chronology" commits required. This prevents accidental data changes.
6. Forensic Focus
Tool designed for institutional accountability. Structure enforces rigor without imposing interpretation.
What This Explains
These principles clarify why certain features are intentionally absent:
- No auto-save (Principle 5: Deliberate Action)
- No manual reordering (Principle 1: Temporal Integrity)
- No document upload (Principle 4: Standalone Operation)
- No text-only search (Principle 3: Contextual Preservation)
- No cloud storage (Principle 4: Standalone Operation)
Storage and Privacy
Local Storage (Browser)
- Used for: Auto-recovery of unsaved entries
- Storage Key:
chronology-generator-state - Cleared by: "Clear Form", "Change Mode", browser cache clearing
- Not persistent across devices or browsers
No Server Communication
- All processing happens in your browser
- No data sent to external servers
- Document paths stored as local file system references
- JSON backups stored on your computer only
Technical Requirements
Browser Requirements
- Modern browser (Chrome, Firefox, Edge, Safari)
- JavaScript enabled
- Local file access permissions (for document links in generated chronology)
File Path Requirements
- Document paths must be accessible from chronology.html location
- Relative paths recommended for portability
- Always test links before distributing
Works Offline
- Generator works without internet connection
- Generated files work offline
- Document linking requires local file access only