Problem: In the cross-reference graph, all nodes look the same — it's impossible to tell at a glance whether a connection leads to the Old Testament, the Gospels, or Paul's letters. Users exploring the graph lose spatial orientation.
Solution: Color each node based on which section of the Bible it belongs to (Torah, History, Wisdom, Prophets, Gospels, Acts, Letters, Revelation). This creates a visual map of how cross-references span the Bible's structure.
Not included: Custom color schemes or user-configurable section groupings.
Expected behavior:
Note: This is already partially implemented — the graph currently assigns node colors by Bible section. This feature tracks making the color scheme complete and adding a legend.
Color palette:
| Section | Color | Hex |
|---|---|---|
| Torah (Gen-Deut) | Sand | #d4a574 |
| History (Josh-Esther) | Green | #86efac |
| Wisdom (Job-Song) | Purple | #c084fc |
| Prophets (Isa-Mal) | Amber | #fbbf24 |
| Gospels (Matt-John) | Sky | #7dd3fc |
| Acts | Teal | #38bdf8 |
| Paul's Letters | Pink | #f472b6 |
| Revelation | Red | #f87171 |
TODO: Add a visible legend to the graph page
Implementation: Node color is already determined by bookId range mapping in CrossRefGraph.svelte. This feature tracks completing the full palette and adding a legend UI element.
Files:
apps/web/src/lib/components/bible/CrossRefGraph.svelte (modify — add legend)Current: PLANNED (partially implemented — colors work, legend missing) Milestone: v2 Priority: Low — colors already work, this is about polish (legend, complete palette)
Dependencies: