Bible Cross-References
Technical Reconstruction

-- PostgreSQL DDL for Bible Cross-References

CREATE TABLE bible_books (
  id            INTEGER PRIMARY KEY,
  name          VARCHAR(50) NOT NULL,
  abbreviation  VARCHAR(10) NOT NULL,
  testament     VARCHAR(2) NOT NULL CHECK (testament IN ('OT', 'NT')),
  genre         VARCHAR(20) NOT NULL,
  chapters      INTEGER NOT NULL,
  verses        INTEGER NOT NULL,
  start_verse   INTEGER NOT NULL,  -- cumulative offset
  color         VARCHAR(30) NOT NULL
);

CREATE TABLE cross_references (
  id             SERIAL PRIMARY KEY,
  from_book      INTEGER NOT NULL REFERENCES bible_books(id),
  from_chapter   INTEGER NOT NULL,
  from_verse     INTEGER NOT NULL,
  to_book        INTEGER NOT NULL REFERENCES bible_books(id),
  to_chapter     INTEGER NOT NULL,
  to_verse       INTEGER NOT NULL,
  from_absolute  INTEGER NOT NULL,
  to_absolute    INTEGER NOT NULL,
  votes          INTEGER DEFAULT 1
);

-- Performance indexes
CREATE INDEX idx_xref_from ON cross_references(from_book, from_chapter);
CREATE INDEX idx_xref_to ON cross_references(to_book, to_chapter);
CREATE INDEX idx_xref_from_abs ON cross_references(from_absolute);
CREATE INDEX idx_xref_to_abs ON cross_references(to_absolute);

interface ArcData {
  fromAbsolute: number;
  toAbsolute: number;
  bookIndex: number;
}

const TOTAL_VERSES = 31102;

function generateArcPath(
  arc: ArcData,
  width: number,
  baselineY: number,
  heightScale: number = 0.5
): string {
  const x1 = (arc.fromAbsolute / TOTAL_VERSES) * width;
  const x2 = (arc.toAbsolute / TOTAL_VERSES) * width;
  const mx = (x1 + x2) / 2;
  const distance = Math.abs(x2 - x1);
  const h = Math.sqrt(distance) * heightScale;
  const cy = baselineY - h;
  
  return `M ${x1},${baselineY} Q ${mx},${cy} ${x2},${baselineY}`;
}

function getArcColor(bookIndex: number, totalBooks: number = 66): string {
  const hue = (bookIndex / totalBooks) * 360;
  return `hsl(${hue}, 80%, 55%)`;
}

import { NextResponse } from 'next/server';
import { prisma } from '@/lib/db';

export const dynamic = 'force-dynamic';

export async function GET() {
  try {
    const books = await prisma.bibleBook.findMany({
      orderBy: { id: 'asc' },
    });
    return NextResponse.json({
      data: books,
      meta: { total: books?.length ?? 0 },
    });
  } catch (error: any) {
    console.error('Failed to fetch books:', error);
    return NextResponse.json(
      { error: 'Failed to fetch books' },
      { status: 500 }
    );
  }
}

'use client';
import { useRef, useEffect, useState, useCallback } from 'react';
import * as d3 from 'd3';

interface ArcCanvasProps {
  data: {
    fromAbsolute: number;
    toAbsolute: number;
    bookIndex: number;
    votes: number;
  }[];
  books: {
    id: number;
    name: string;
    abbreviation: string;
    startVerse: number;
    verses: number;
    color: string;
  }[];
  width: number;
  height: number;
  filters?: {
    genres?: string[];
    testament?: string;
    minVotes?: number;
  };
  onArcHover?: (arc: any | null) => void;
  onArcClick?: (arc: any) => void;
}

const TOTAL_VERSES = 31102;

export function ArcCanvas({
  data,
  books,
  width,
  height,
  filters,
  onArcHover,
  onArcClick,
}: ArcCanvasProps) {
  const svgRef = useRef<SVGSVGElement>(null);
  const baselineY = height * 0.82;
  const heightScale = height * 0.5;

  useEffect(() => {
    if (!svgRef?.current || !data?.length) return;
    const svg = d3.select(svgRef.current);
    
    // Clear previous
    svg.selectAll('.arc-group').remove();
    
    const g = svg.append('g').attr('class', 'arc-group');
    
    // Zoom behavior
    const zoom = d3.zoom<SVGSVGElement, unknown>()
      .scaleExtent([1, 50])
      .on('zoom', (event: any) => {
        g.attr('transform', event?.transform);
      });
    
    svg.call(zoom);
    
    // Render arcs
    const arcs = g.selectAll('.arc')
      .data(data ?? [])
      .enter()
      .append('path')
      .attr('class', 'arc')
      .attr('d', (d: any) => {
        const x1 = ((d?.fromAbsolute ?? 0) / TOTAL_VERSES) * width;
        const x2 = ((d?.toAbsolute ?? 0) / TOTAL_VERSES) * width;
        const mx = (x1 + x2) / 2;
        const dist = Math.abs(x2 - x1);
        const h = Math.sqrt(dist) * (heightScale / Math.sqrt(width));
        return `M ${x1},${baselineY} Q ${mx},${baselineY - h} ${x2},${baselineY}`;
      })
      .attr('fill', 'none')
      .attr('stroke', (d: any) => {
        const hue = ((d?.bookIndex ?? 0) / 66) * 360;
        return `hsl(${hue}, 80%, 55%)`;
      })
      .attr('stroke-width', 1)
      .attr('stroke-opacity', 0.15)
      .on('mouseenter', function(event: any, d: any) {
        d3.select(this)
          .attr('stroke-opacity', 1)
          .attr('stroke-width', 2);
        onArcHover?.(d);
      })
      .on('mouseleave', function() {
        d3.select(this)
          .attr('stroke-opacity', 0.15)
          .attr('stroke-width', 1);
        onArcHover?.(null);
      })
      .on('click', (event: any, d: any) => {
        onArcClick?.(d);
      });
    
    // Book labels on baseline
    g.selectAll('.book-label')
      .data(books ?? [])
      .enter()
      .append('text')
      .attr('class', 'book-label')
      .attr('x', (d: any) => {
        const start = ((d?.startVerse ?? 0) / TOTAL_VERSES) * width;
        const bookWidth = ((d?.verses ?? 0) / TOTAL_VERSES) * width;
        return start + bookWidth / 2;
      })
      .attr('y', baselineY + 16)
      .attr('text-anchor', 'middle')
      .attr('fill', '#9a9890')
      .attr('font-size', '8px')
      .text((d: any) => d?.abbreviation ?? '');
    
    // Baseline
    g.append('line')
      .attr('x1', 0)
      .attr('y1', baselineY)
      .attr('x2', width)
      .attr('y2', baselineY)
      .attr('stroke', '#2c2b28')
      .attr('stroke-width', 1);
    
    return () => { svg.selectAll('.arc-group').remove(); };
  }, [data, books, width, height, baselineY, heightScale, onArcHover, onArcClick]);

  return (
    <svg
      ref={svgRef}
      width={width}
      height={height}
      style={{ background: '#0d0d0d' }}
    />
  );
}

'use client';
import { useState } from 'react';

interface SegmentedControlProps {
  options: { value: string; label: string }[];
  value: string;
  onChange: (value: string) => void;
}

export function SegmentedControl({ options, value, onChange }: SegmentedControlProps) {
  return (
    <div className="flex rounded-lg border border-[#2c2b28] bg-[#161615] p-[2px]">
      {(options ?? []).map((opt: any) => (
        <button
          key={opt?.value ?? ''}
          onClick={() => onChange?.(opt?.value)}
          className={`px-4 py-1 text-sm transition-all duration-150 rounded-md ${
            value === opt?.value
              ? 'bg-[#2c2b28] text-[#ecebe6]'
              : 'text-[#9a9890] hover:text-[#ecebe6]'
          }`}
        >
          {opt?.label ?? ''}
        </button>
      ))}
    </div>
  );
}

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

// Bible books with verse counts and cumulative offsets
const BOOKS = [
  { id: 1, name: 'Genesis', abbr: 'Gen', testament: 'OT', genre: 'Law', chapters: 50, verses: 1533 },
  { id: 2, name: 'Exodus', abbr: 'Exod', testament: 'OT', genre: 'Law', chapters: 40, verses: 1213 },
  { id: 3, name: 'Leviticus', abbr: 'Lev', testament: 'OT', genre: 'Law', chapters: 27, verses: 859 },
  { id: 4, name: 'Numbers', abbr: 'Num', testament: 'OT', genre: 'Law', chapters: 36, verses: 1288 },
  { id: 5, name: 'Deuteronomy', abbr: 'Deut', testament: 'OT', genre: 'Law', chapters: 34, verses: 959 },
  // ... remaining 61 books follow same pattern
  { id: 66, name: 'Revelation', abbr: 'Rev', testament: 'NT', genre: 'Apocalyptic', chapters: 22, verses: 404 },
];

// Compute cumulative start positions
let offset = 1;
const booksWithOffset = BOOKS.map(b => {
  const book = { ...b, startVerse: offset };
  offset += b.verses;
  return book;
});

async function loadBooks() {
  for (const book of booksWithOffset) {
    const hue = Math.round((book.id / 66) * 360);
    await prisma.bibleBook.upsert({
      where: { id: book.id },
      update: {},
      create: {
        id: book.id,
        name: book.name,
        abbreviation: book.abbr,
        testament: book.testament,
        genre: book.genre,
        chapters: book.chapters,
        verses: book.verses,
        startVerse: book.startVerse,
        color: `hsl(${hue}, 80%, 55%)`,
      },
    });
  }
  console.log(`Loaded ${booksWithOffset.length} books`);
}

async function parseTSV(url: string): Promise<any[]> {
  const response = await fetch(url);
  const text = await response.text();
  return text.split('\n')
    .filter((line: string) => line?.trim() && !line?.startsWith('From'))
    .map((line: string) => {
      const [from, to, votes] = (line ?? '').split('\t');
      return { from, to, votes: parseInt(votes ?? '1', 10) || 1 };
    });
}

async function main() {
  await loadBooks();
  console.log('Books loaded. Ready for cross-reference import.');
  await prisma.$disconnect();
}

main().catch(console.error);

import * as d3 from 'd3';

export interface VisConfig {
  container: SVGSVGElement;
  width: number;
  height: number;
  baselineRatio?: number;  // default 0.82
  heightScale?: number;    // default 0.5
  defaultOpacity?: number; // default 0.15
}

export interface ArcDatum {
  fromAbsolute: number;
  toAbsolute: number;
  bookIndex: number;
  votes: number;
}

export interface BookDatum {
  id: number;
  name: string;
  abbreviation: string;
  startVerse: number;
  verses: number;
  color: string;
}

const TOTAL_VERSES = 31102;

export class BibleArcEngine {
  private svg: d3.Selection<SVGSVGElement, unknown, null, undefined>;
  private arcGroup: d3.Selection<SVGGElement, unknown, null, undefined>;
  private labelGroup: d3.Selection<SVGGElement, unknown, null, undefined>;
  private config: Required<VisConfig>;
  private zoom: d3.ZoomBehavior<SVGSVGElement, unknown>;
  
  constructor(config: VisConfig) {
    this.config = {
      ...config,
      baselineRatio: config?.baselineRatio ?? 0.82,
      heightScale: config?.heightScale ?? 0.5,
      defaultOpacity: config?.defaultOpacity ?? 0.15,
    };
    
    this.svg = d3.select(this.config.container);
    this.arcGroup = this.svg.append('g').attr('class', 'arcs');
    this.labelGroup = this.svg.append('g').attr('class', 'labels');
    
    this.zoom = d3.zoom<SVGSVGElement, unknown>()
      .scaleExtent([0.5, 100])
      .on('zoom', (event: any) => {
        this.arcGroup.attr('transform', event?.transform);
        this.labelGroup.attr('transform', event?.transform);
      });
    
    this.svg.call(this.zoom);
  }
  
  renderArcs(data: ArcDatum[]): void {
    const { width, baselineRatio, heightScale, defaultOpacity } = this.config;
    const by = this.config.height * baselineRatio;
    const hs = this.config.height * heightScale / Math.sqrt(width);
    
    this.arcGroup.selectAll('.arc')
      .data(data ?? [])
      .join('path')
      .attr('class', 'arc')
      .attr('d', (d: ArcDatum) => {
        const x1 = ((d?.fromAbsolute ?? 0) / TOTAL_VERSES) * width;
        const x2 = ((d?.toAbsolute ?? 0) / TOTAL_VERSES) * width;
        const mx = (x1 + x2) / 2;
        const dist = Math.abs(x2 - x1);
        const h = Math.sqrt(dist) * hs;
        return `M ${x1},${by} Q ${mx},${by - h} ${x2},${by}`;
      })
      .attr('fill', 'none')
      .attr('stroke', (d: ArcDatum) =>
        `hsl(${((d?.bookIndex ?? 0) / 66) * 360}, 80%, 55%)`
      )
      .attr('stroke-width', 1)
      .attr('stroke-opacity', defaultOpacity);
  }
  
  renderBaseline(books: BookDatum[]): void {
    const { width } = this.config;
    const by = this.config.height * this.config.baselineRatio;
    
    // Baseline
    this.labelGroup.append('line')
      .attr('x1', 0).attr('y1', by)
      .attr('x2', width).attr('y2', by)
      .attr('stroke', '#2c2b28').attr('stroke-width', 1);
    
    // Book sections + labels
    this.labelGroup.selectAll('.book-section')
      .data(books ?? [])
      .join('g')
      .attr('class', 'book-section')
      .each(function(d: any) {
        const g = d3.select(this);
        const x = ((d?.startVerse ?? 0) / TOTAL_VERSES) * width;
        const w = ((d?.verses ?? 0) / TOTAL_VERSES) * width;
        
        g.append('rect')
          .attr('x', x).attr('y', by)
          .attr('width', w).attr('height', 4)
          .attr('fill', d?.color ?? '#333');
        
        if (w > 15) {
          g.append('text')
            .attr('x', x + w / 2).attr('y', by + 16)
            .attr('text-anchor', 'middle')
            .attr('fill', '#9a9890')
            .attr('font-size', '7px')
            .text(d?.abbreviation ?? '');
        }
      });
  }
  
  destroy(): void {
    this.svg.selectAll('*').remove();
  }
}

# Multi-stage build for production
FROM node:20-alpine AS deps
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npx prisma generate
RUN yarn build

FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public
EXPOSE 3000
CMD ["node", "server.js"]

version: '3.8'
services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - DATABASE_URL=postgresql://user:pass@db:5432/bible_xref
      - NODE_ENV=production
    depends_on:
      - db
  
  db:
    image: postgres:16-alpine
    environment:
      - POSTGRES_USER=user
      - POSTGRES_PASSWORD=pass
      - POSTGRES_DB=bible_xref
    volumes:
      - pgdata:/var/lib/postgresql/data
    ports:
      - "5432:5432"

volumes:
  pgdata: