Chronology Builder

Complete Interface Guide - Version 1.6.7
Tool for creating structured chronological records with temporal integrity and evidential discipline

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

Single Entry

Creates one discrete event with associated documents and notes.

Use for: Individual moments in time

Example: "Police attended property at 14:30"

Compound Entry

Creates one parent event containing multiple sub-events.

Use for: Complex incidents spanning time with multiple distinct moments

Example: "Court hearing" containing multiple procedural moments

Output Generation

Generate Chronology.html

Creates a standalone chronology viewer containing all entries in temporal order.

Includes: Navigation controls, document links, jump navigation between entries, print functionality

When to use: Generate the final chronology for distribution or review

Generate Search.html

Creates a contextual search interface that preserves full entry context in results.

Includes: Full chronology corpus, search controls, links back to chronology positions

When to use: Create a searchable version of your chronology

Documentation Buttons

Creator User Guide

Opens detailed instructions on using the generator, covering both single and compound entry modes.

Chronology User Guide

Explains how to use the generated chronology.html file, including navigation and document linking.

Search Guide

Explains the relationship between chronology and search tools, describing contextual search functionality.

Data Management

Save Backup

Downloads a JSON backup of all entries, preserving work in progress.

Usage: Click regularly to save your work. The file can be used to restore your chronology later.

Erase Chronology

Deletes ALL entries permanently with no undo. Prompts for confirmation.

Usage: Only when starting completely fresh. Always save a backup first.

Load Backup

Restores chronology from a previously saved JSON file.

Usage: Click to select a backup file from your computer

Single Entry Form

Control Strip (Top of Form)

Shows "Mode: Single Entry" indicator

Change Mode

Returns to mode selection screen and clears the current unsaved entry.

Important: Does NOT delete saved entries, only clears the form.

Usage: Switch between single and compound modes

Clear Form

Clears all fields in the current form and resets to blank entry.

Important: Does NOT delete saved entries, only resets the form.

Usage: Start a new entry while staying in the same mode

Add to Chronology

Commits the current entry to the collection after validating required fields.

Note: Button text changes to "Update Entry" when editing an existing entry.

Usage: Click when your entry is complete

Date/Title Fields

Date Input (Required)

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

Entry Title (Optional)

Purpose: Brief descriptor of the event

Example: "Police attended property", "Court hearing scheduled"

Markers Section

Evidence markers appear as clickable icon buttons that toggle on/off (highlighted when active).

Available Markers:
  • ⭾ Bi-domain Crossover: Event spans two institutional domains
  • ◈ Tri-domain Crossover: Event spans three institutional domains
  • ⬬ Distortion Point: Temporal or factual distortion identified
  • ◆ Pivot: Critical contradiction point
  • ⤤ Recycled: Previously addressed issue reappears

Usage: Click icons to add or remove markers from the entry

Main Entry

Main Entry Textarea (Required)

Purpose: Primary description of what happened

Usage: Write a detailed narrative of the event. This is the core factual description.

Documents Section

+ Add Document

Adds a new document reference block to the entry.

Document Block Fields:

1. Document Class Selector (Required)

Select the category for visual color coding:

  • Probative: Core evidence
  • Custody: Custody records
  • CAD: Computer Aided Dispatch logs
  • Report: Official reports
  • Office: Home Office documents
  • Judged: Court Judgments/Orders
  • Public: Public documents
  • Oversight: IOPC/oversight documents
  • Claim: Legal claim documents
  • Appendix: Supporting appendices

Usage: Select category before browsing for the file

2. Document File Browser

Display field: Read-only text showing the filename

Browse button: Opens file selector

Usage: Click "Browse..." to select a file from your computer. The path is stored and filename is displayed.

3. Remove Button (Red)

Deletes this document block from the unsaved entry.

Chronology Jumps

+ Add Chronology Jump

Creates a cross-reference to another chronology entry, enabling temporal navigation in the final chronology.

Jump Date field: Select the date of the entry you want to reference. This creates a clickable link in the final output.

Notes Section

Notes Textarea

Purpose: Commentary, observations, analytical remarks, or questions

Usage: Add information that is NOT part of the main factual description but provides context or analysis

Claims Section

+ Add Claim Reference

Links this entry to specific legal claim numbers.

Claim Reference field: Enter claim number (e.g., "001", "002a")

Purpose: Connect chronology entries to your claim documents

Compound Entry Form

Control Strip

Shows "Mode: Compound Entry" indicator

Contains the same Change Mode and Clear Form buttons as Single Entry mode, plus:

+ Add Sub-Event

Creates a new sub-event block within the compound entry.

Usage: Click to add each distinct moment or phase within the parent event

Add to Chronology

Commits the entire compound entry (parent summary + all sub-events) to the collection.

Parent Event Fields

Date Input (Required)

The date for the entire compound event. This date is automatically copied to all sub-events.

Summary Textarea

Purpose: Overview or contextual introduction to the compound event

Example: "Court hearing consisted of:", "Police incident comprised the following:"

Sub-Event Blocks

Each sub-event contains its own complete set of fields:

Sub-Event Header

Shows "Sub-Event #[number]" with a Remove button

Remove button: Deletes the entire sub-event block

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
Important: Each sub-event has its own independent set of documents, notes, markers, and claims. They are treated as distinct units within the parent 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

Edit Entry

Loads the entry back into the left panel form for modification.

Note: The "Add to Chronology" button text changes to "Update Entry" when editing.

Usage: Click to modify any existing entry

Delete Entry

Removes the entry permanently from the collection. Prompts for confirmation.

Usage: Remove incorrect or unwanted entries

Preview Window

Copy to Clipboard Button

Copies the generated HTML for the current entry.

Visual feedback: Shows "✓ 📋 Copied to Clipboard!" when successful

Usage: Extract HTML for manual insertion elsewhere

Generated Output Files

chronology.html

Contains:
  • All entries in chronological order
  • Navigation controls
  • Document links (as specified in entries)
  • Jump navigation between entries
  • Print functionality
Does NOT contain:
  • The actual document files (only links to them)
  • Search functionality
  • Editing capability
Critical: Test all document links after generation to ensure they work correctly!

search.html

Contains:
  • Full chronology corpus embedded
  • Search interface with options (Case sensitive, Regular Expression, All matches)
  • Results display area
  • Print and Clear functions
Search Behavior:
  • 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

  1. Open generator in browser
  2. Select mode (Single or Compound)
  3. Begin creating entries

2. Work Incrementally

  1. Fill out entry form completely
  2. Click "Add to Chronology"
  3. Click "Save Backup" regularly (every 5-10 entries recommended)
  4. Review in Collection View periodically

3. Review and Edit

  1. Toggle to Collection View
  2. Check entries for accuracy
  3. Use "Edit Entry" for corrections
  4. Delete any errors using "Delete Entry"

4. Generate Output

  1. Click "Generate Chronology.html"
  2. Save file to desired location
  3. Open file and test document links
  4. Verify all dates and content display correctly

5. Optional: Generate Search

  1. Click "Generate Search.html"
  2. Save alongside chronology file
  3. Test search functionality with sample queries

6. Final Backup

  1. Click "Save Backup" one final time
  2. Store JSON file safely
  3. 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