Adding working board
This commit is contained in:
+152
-166
@@ -1,8 +1,8 @@
|
||||
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
|
||||
import { BookOpen, Building2, CalendarClock, ChevronRight, CircleHelp, FileText, FolderOpen, Hand, Image as ImageIcon, Link2, Minus, MousePointer2, Network, NotebookPen, Pencil, Plus, RotateCcw, Search, Trash2, Upload, UserRound, X, ZoomIn, ZoomOut } from 'lucide-react'
|
||||
import type { BriefConcept, CaseDocument, CaseState, Connection, Evidence, LevelBrief, OrganizationKind, PartyKind, SourceFileType, TimelineRange, WidgetRelation } from './types'
|
||||
import { clampBoardZoom, containedIds, dateValue, discardExhibit, folderIsOpen, moveBoardPoint, nextOpenBoardPosition, normalizeCase, panViewport, projectThreadTag, relationPosition, threadCurve, threadTagLateralLimit, threadTagPlacement, timelinePositionPercent, timelineRange, zoomFromPinch, zoomFromWheel, zoomViewportAt } from './boardDomain'
|
||||
import { documentWidget, exhibitWidget } from './exhibitRegistry'
|
||||
import type { BriefConcept, CaseDocument, CaseState, Connection, EventExhibit, Evidence, Exhibit, ExhibitRelation, FolderExhibit, LevelBrief, OrganizationKind, PartyExhibit, PartyKind, SourceFileType, TimelineRange, TimelineView } from './types'
|
||||
import { clampBoardZoom, containedIds, dateValue, discardExhibit, folderIsOpen, moveBoardPoint, nextOpenBoardPosition, normalizeCase, panViewport, projectThreadTag, threadCurve, threadTagLateralLimit, threadTagPlacement, timelinePositionPercent, timelineRange, zoomFromPinch, zoomFromWheel, zoomViewportAt } from './boardDomain'
|
||||
import { documentExhibits, documentWidget, evidenceExhibits, exhibitWidget, type ExhibitWidgetContext, type WidgetCommand } from './exhibitRegistry'
|
||||
|
||||
const BOARD_W = 2400
|
||||
const BOARD_H = 1500
|
||||
@@ -13,15 +13,24 @@ const SOURCE_FILE_TYPES: { value: SourceFileType; label: string }[] = [
|
||||
function uid(_prefix: string) { return crypto.randomUUID() }
|
||||
function briefAcknowledgementKey(levelId: string) { return `gupi-osint-board:brief-acknowledged:${levelId}` }
|
||||
function documentSearchText(document: CaseDocument) {
|
||||
return [document.title, document.kind, document.date, document.publishedAt, document.fileName, document.mimeType,
|
||||
return [document.title, document.fileType, document.publishedAt, document.capturedAt, document.fileName, document.mimeType,
|
||||
...document.body, ...document.regions.flatMap(region => [region.label, region.excerpt, region.date]),
|
||||
...Object.entries(document.metadata).flatMap(([key, value]) => [key, value])].filter(Boolean).join('\n').toLocaleLowerCase()
|
||||
}
|
||||
function connectionPoint(item: Evidence) {
|
||||
return exhibitWidget(item.type).connectionPoint(item)
|
||||
function connectionPoint(item: Exhibit) {
|
||||
return exhibitWidget(item.type).connectionPorts(item)[0]
|
||||
}
|
||||
|
||||
type TemporalItem = { id: string; sourceTemporalId: string; date: string; label: string; kind: 'document' | 'widget'; evidenceId?: string; documentId?: string }
|
||||
type TemporalItem = { id: string; sourceTemporalId: string; date: string; label: string; kind: 'document' | 'widget'; exhibitId: string }
|
||||
|
||||
const placement = (x: number, y: number, width: number, height: number) => ({ x, y, width, height, rotation: 0, zIndex: 1, hidden: false })
|
||||
function replaceDirectedRelations(relations: ExhibitRelation[], type: 'supports' | 'concerns', fromExhibitId: string, targets: string[]) {
|
||||
const retained = relations.filter(relation => relation.type !== type || relation.fromExhibitId !== fromExhibitId)
|
||||
return [...retained, ...targets.map((toExhibitId, sortOrder): ExhibitRelation => ({
|
||||
id: relations.find(relation => relation.type === type && relation.fromExhibitId === fromExhibitId && relation.toExhibitId === toExhibitId)?.id || uid(type),
|
||||
type, fromExhibitId, toExhibitId, sortOrder,
|
||||
}))]
|
||||
}
|
||||
|
||||
export function App() {
|
||||
const [caseState, setCaseState] = useState<CaseState | null>(null)
|
||||
@@ -42,9 +51,9 @@ export function App() {
|
||||
const [editingFolderId, setEditingFolderId] = useState<string | null>(null)
|
||||
const [editingFileId, setEditingFileId] = useState<string | null>(null)
|
||||
const [editingEventId, setEditingEventId] = useState<string | null>(null)
|
||||
const [newEventDraft, setNewEventDraft] = useState<Evidence | null>(null)
|
||||
const [newEventDraft, setNewEventDraft] = useState<EventExhibit | null>(null)
|
||||
const [editingPartyId, setEditingPartyId] = useState<string | null>(null)
|
||||
const [newPartyDraft, setNewPartyDraft] = useState<Evidence | null>(null)
|
||||
const [newPartyDraft, setNewPartyDraft] = useState<PartyExhibit | null>(null)
|
||||
const [briefOpen, setBriefOpen] = useState(false)
|
||||
const [editingBrief, setEditingBrief] = useState(false)
|
||||
const [editingTimeline, setEditingTimeline] = useState(false)
|
||||
@@ -121,7 +130,7 @@ export function App() {
|
||||
|
||||
const focusEvidence = (id: string) => {
|
||||
if (!caseState) return
|
||||
const ev = caseState.evidence.find(e => e.id === id)
|
||||
const ev = caseState.exhibits.find(e => e.id === id)
|
||||
if (!ev) return
|
||||
setSelected(id)
|
||||
update(s => ({ ...s, viewport: { ...s.viewport, x: 500 - ev.x * s.viewport.zoom, y: 260 - ev.y * s.viewport.zoom } }))
|
||||
@@ -130,14 +139,16 @@ export function App() {
|
||||
const extract = (doc: CaseDocument, regionId: string) => {
|
||||
if (!caseState) return
|
||||
const region = doc.regions.find(r => r.id === regionId)!
|
||||
const existing = caseState.evidence.find(e => e.sourceDocumentId === doc.id && e.sourceRegionId === regionId)
|
||||
if (existing) { setOpenDoc(null); focusEvidence(existing.id); return }
|
||||
const ev: Evidence = {
|
||||
id: uid('folder'), type: 'folder', title: `${doc.kind} EVIDENCE`, content: region.excerpt, config: { open: false },
|
||||
sourceDocumentId: doc.id, sourceRegionId: region.id, containedDocumentIds: [doc.id],
|
||||
x: 850 + Math.random() * 220, y: 390 + Math.random() * 250, width: 260,
|
||||
const existingSource = caseState.relations.find(relation => relation.type === 'source' && relation.toExhibitId === doc.id && relation.sourceRegionId === regionId)
|
||||
if (existingSource) { setOpenDoc(null); focusEvidence(existingSource.fromExhibitId); return }
|
||||
const ev: FolderExhibit = {
|
||||
id: uid('folder'), type: 'folder', title: `${documentWidget(doc.fileType).label.toUpperCase()} EVIDENCE`, content: region.excerpt, isOpen: false,
|
||||
...placement(850 + Math.random() * 220, 390 + Math.random() * 250, 260, 166),
|
||||
}
|
||||
update(s => ({ ...s, evidence: [...s.evidence, ev], relations: [...s.relations, { id: `contains:${ev.id}:${doc.id}`, fromWidgetId: ev.id, toWidgetId: doc.id, type: 'contains', sortOrder: 0 }] }))
|
||||
update(s => ({ ...s, exhibits: [...s.exhibits, ev], relations: [...s.relations,
|
||||
{ id: uid('contains'), fromExhibitId: ev.id, toExhibitId: doc.id, type: 'contains', sortOrder: 0 },
|
||||
{ id: uid('source'), fromExhibitId: ev.id, toExhibitId: doc.id, type: 'source', sortOrder: 0, sourceRegionId: region.id },
|
||||
] }))
|
||||
setOpenDoc(null); setSelected(ev.id); setRecentlyCreatedExhibitId(ev.id); setStatus('EVIDENCE EXTRACTED · PROVENANCE ATTACHED')
|
||||
}
|
||||
|
||||
@@ -145,27 +156,27 @@ export function App() {
|
||||
const content = window.prompt('What do you think this evidence means?')?.trim()
|
||||
if (!content || !caseState) return
|
||||
const { viewport } = caseState
|
||||
const position = nextOpenBoardPosition(caseState.evidence, { x: Math.max(100, (500 - viewport.x) / viewport.zoom), y: Math.max(100, (330 - viewport.y) / viewport.zoom) }, { width: 108 })
|
||||
const note: Evidence = { id: uid('note'), type: 'note', title: 'WORKING NOTE', content, ...position, width: 108 }
|
||||
update(s => ({ ...s, evidence: [...s.evidence, note] })); setSelected(note.id); setRecentlyCreatedExhibitId(note.id)
|
||||
const position = nextOpenBoardPosition(caseState.exhibits, { x: Math.max(100, (500 - viewport.x) / viewport.zoom), y: Math.max(100, (330 - viewport.y) / viewport.zoom) }, { width: 108 })
|
||||
const note: Evidence = { id: uid('note'), type: 'note', title: 'WORKING NOTE', content, ...placement(position.x, position.y, 108, 154) }
|
||||
update(s => ({ ...s, exhibits: [...s.exhibits, note] })); setSelected(note.id); setRecentlyCreatedExhibitId(note.id)
|
||||
}
|
||||
|
||||
const addEvent = () => {
|
||||
if (!caseState) return
|
||||
const { viewport } = caseState
|
||||
const position = nextOpenBoardPosition(caseState.evidence, { x: Math.max(100, (620 - viewport.x) / viewport.zoom), y: Math.max(100, (290 - viewport.y) / viewport.zoom) }, { width: 270 })
|
||||
const event: Evidence = { id: uid('event'), type: 'event', title: 'UNTITLED EVENT', content: 'Describe what happened.',
|
||||
supportingEvidenceIds: [], ...position, width: 270 }
|
||||
const position = nextOpenBoardPosition(caseState.exhibits, { x: Math.max(100, (620 - viewport.x) / viewport.zoom), y: Math.max(100, (290 - viewport.y) / viewport.zoom) }, { width: 270 })
|
||||
const event: EventExhibit = { id: uid('event'), type: 'event', title: 'UNTITLED EVENT', content: 'Describe what happened.',
|
||||
...placement(position.x, position.y, 270, 174) }
|
||||
setNewEventDraft(event)
|
||||
}
|
||||
|
||||
const addParty = () => {
|
||||
if (!caseState) return
|
||||
const { viewport } = caseState
|
||||
const position = nextOpenBoardPosition(caseState.evidence, {
|
||||
const position = nextOpenBoardPosition(caseState.exhibits, {
|
||||
x: Math.max(100, (670 - viewport.x) / viewport.zoom), y: Math.max(100, (310 - viewport.y) / viewport.zoom),
|
||||
}, { width: 280 })
|
||||
setNewPartyDraft({ id: uid('party'), type: 'party', partyKind: 'person', title: '', content: '', aliases: [], relatedEvidenceIds: [], ...position, width: 280 })
|
||||
setNewPartyDraft({ id: uid('party'), type: 'party', partyKind: 'person', title: '', content: '', aliases: [], ...placement(position.x, position.y, 280, 190) })
|
||||
}
|
||||
|
||||
const classifyConcept = (conceptId: string, partyKind: PartyKind) => {
|
||||
@@ -175,15 +186,15 @@ export function App() {
|
||||
const existingId = concept.resolvedPartyExhibitId
|
||||
const partyId = existingId || uid('party')
|
||||
const { viewport } = caseState
|
||||
const existingParty = caseState.evidence.find(item => item.id === existingId)
|
||||
const position = existingParty ? { x: existingParty.x, y: existingParty.y } : nextOpenBoardPosition(caseState.evidence, {
|
||||
const existingParty = caseState.exhibits.find((item): item is PartyExhibit => item.id === existingId && item.type === 'party')
|
||||
const position = existingParty ? { x: existingParty.x, y: existingParty.y } : nextOpenBoardPosition(caseState.exhibits, {
|
||||
x: Math.max(100, (670 - viewport.x) / viewport.zoom), y: Math.max(100, (310 - viewport.y) / viewport.zoom),
|
||||
}, { width: 280 })
|
||||
const party: Evidence = { id: partyId, type: 'party', partyKind, organizationKind: partyKind === 'organization' ? 'business' : undefined,
|
||||
title: concept.label, content: concept.context, aliases: [], relatedEvidenceIds: [],
|
||||
...position, width: 280 }
|
||||
const party: PartyExhibit = { id: partyId, type: 'party', partyKind, organizationKind: partyKind === 'organization' ? 'business' : undefined,
|
||||
title: concept.label, content: concept.context, aliases: [],
|
||||
...placement(position.x, position.y, 280, 190) }
|
||||
update(state => ({ ...state,
|
||||
evidence: existingId ? state.evidence.map(item => item.id === existingId ? { ...item, partyKind, organizationKind: partyKind === 'organization' ? item.organizationKind || 'business' : undefined } : item) : [...state.evidence, party],
|
||||
exhibits: existingId ? state.exhibits.map(item => item.id === existingId && item.type === 'party' ? { ...item, partyKind, organizationKind: partyKind === 'organization' ? item.organizationKind || 'business' : undefined } : item) : [...state.exhibits, party],
|
||||
brief: { ...state.brief, concepts: state.brief.concepts.map(item => item.id === conceptId ? { ...item, resolvedPartyExhibitId: partyId } : item) },
|
||||
}))
|
||||
setSelected(partyId)
|
||||
@@ -203,14 +214,14 @@ export function App() {
|
||||
|
||||
const completeThread = (targetId: string) => {
|
||||
if (!linkFrom || !caseState || linkFrom === targetId) return
|
||||
const existing = caseState.connections.find(connection => (connection.fromEvidenceId === linkFrom && connection.toEvidenceId === targetId) || (connection.fromEvidenceId === targetId && connection.toEvidenceId === linkFrom))
|
||||
const existing = caseState.connections.find(connection => (connection.fromExhibitId === linkFrom && connection.toExhibitId === targetId) || (connection.fromExhibitId === targetId && connection.toExhibitId === linkFrom))
|
||||
if (existing) {
|
||||
setLinkFrom(null); setThreadDraft(existing); setStatus('THREAD ALREADY EXISTS · EDITING TAG')
|
||||
return
|
||||
}
|
||||
setThreadDraft({ id: uid('connection'), fromEvidenceId: linkFrom, toEvidenceId: targetId, tightness: 65, tagStyle: 'luggage', tagPosition: 50, tagOffset: 0 })
|
||||
setThreadDraft({ id: uid('connection'), fromExhibitId: linkFrom, toExhibitId: targetId, tightness: 65, tagStyle: 'luggage', tagPosition: 50, tagOffset: 0 })
|
||||
setLinkFrom(null)
|
||||
if (caseState.evidence.some(item => item.id === targetId)) setSelected(targetId)
|
||||
if (caseState.exhibits.some(item => item.id === targetId)) setSelected(targetId)
|
||||
}
|
||||
|
||||
const saveThread = (connection: Connection) => {
|
||||
@@ -306,7 +317,7 @@ export function App() {
|
||||
const response = await fetch(`/api/levels/${encodeURIComponent(caseState.id)}/documents?edit=1`, { method: 'POST', body: form })
|
||||
if (!response.ok) { const body = await response.json().catch(() => ({})); throw new Error(body.error || `Upload failed (${response.status})`) }
|
||||
const document: CaseDocument = await response.json()
|
||||
update(s => ({ ...s, documents: [...s.documents, document] }))
|
||||
update(s => ({ ...s, exhibits: [...s.exhibits, document] }))
|
||||
setStatus(`IMPORTED · ${file.name.toUpperCase()}`)
|
||||
} catch (error) {
|
||||
setStatus(error instanceof Error ? error.message.toUpperCase() : 'UPLOAD FAILED')
|
||||
@@ -317,27 +328,25 @@ export function App() {
|
||||
if (noLevels) return <EmptyArchive canEdit={isAdmin} onCreated={level => { window.location.assign(`?level=${encodeURIComponent(level.id)}&edit=1`) }} />
|
||||
if (!caseState) return <div className="boot"><div className="seal">GU</div><p>GLITCH UNIVERSITY NETWORK TERMINAL</p><small>{status}</small></div>
|
||||
|
||||
const documentById = new Map(caseState.documents.map(document => [document.id, document]))
|
||||
const documents = documentExhibits(caseState.exhibits)
|
||||
const evidence = evidenceExhibits(caseState.exhibits)
|
||||
const documentById = new Map(documents.map(document => [document.id, document]))
|
||||
const normalizedDocumentQuery = documentQuery.trim().toLocaleLowerCase()
|
||||
const filteredDocuments = normalizedDocumentQuery ? caseState.documents.filter(document => documentSearchText(document).includes(normalizedDocumentQuery)) : caseState.documents
|
||||
const filteredDocuments = normalizedDocumentQuery ? documents.filter(document => documentSearchText(document).includes(normalizedDocumentQuery)) : documents
|
||||
const unresolvedConceptCount = caseState.brief.concepts.filter(concept => !concept.resolvedPartyExhibitId).length
|
||||
const canAuthor = isAdmin && requestedEditMode && Boolean(caseState.editingAllowed)
|
||||
const containedDocumentIds = new Set(caseState.relations.filter(relation => relation.type === 'contains').map(relation => relation.toWidgetId))
|
||||
const temporalItems: TemporalItem[] = [
|
||||
...caseState.evidence.flatMap(folder => folder.type !== 'folder' ? [] : containedIds(caseState, folder.id).flatMap(documentId => {
|
||||
const document = documentById.get(documentId)
|
||||
const date = document?.publishedAt || document?.date
|
||||
const relation = caseState.relations.find(candidate => candidate.type === 'contains' && candidate.fromWidgetId === folder.id && candidate.toWidgetId === documentId)
|
||||
return document && date && relation ? [{ id: `folder:${folder.id}:document:${document.id}`, sourceTemporalId: folderIsOpen(folder) ? `file:${relation.id}` : `widget:${folder.id}`, date, label: document.title, kind: 'document' as const, evidenceId: folder.id, documentId: document.id }] : []
|
||||
})),
|
||||
...caseState.documents.filter(document => !containedDocumentIds.has(document.id) && (document.publishedAt || document.date)).map(document => ({ id: `document:${document.id}`, sourceTemporalId: `document:${document.id}`, date: document.publishedAt || document.date, label: document.title, kind: 'document' as const, documentId: document.id })),
|
||||
...caseState.evidence.filter(widget => widget.type === 'event' && widget.eventDate).map(widget => ({ id: `widget:${widget.id}`, sourceTemporalId: `widget:${widget.id}`, date: widget.eventDate!, label: widget.content, kind: 'widget' as const, evidenceId: widget.id })),
|
||||
].sort((a, b) => dateValue(a.date) - dateValue(b.date))
|
||||
const storyEvents = caseState.evidence.filter(item => item.type === 'event').sort((a, b) => {
|
||||
const temporalItems: TemporalItem[] = caseState.exhibits.flatMap(exhibit => exhibitWidget(exhibit.type).temporalFacts(exhibit).map(fact => {
|
||||
const membership = exhibit.type === 'document' ? caseState.relations.find(relation => relation.type === 'contains' && relation.toExhibitId === exhibit.id) : undefined
|
||||
const folder = membership ? caseState.exhibits.find(candidate => candidate.id === membership.fromExhibitId && candidate.type === 'folder') as FolderExhibit | undefined : undefined
|
||||
const sourceTemporalId = folder && !folder.isOpen ? `widget:${folder.id}` : `widget:${exhibit.id}`
|
||||
return { id: fact.id, sourceTemporalId, date: fact.start, label: fact.label, kind: exhibit.type === 'document' ? 'document' as const : 'widget' as const, exhibitId: exhibit.id }
|
||||
})).sort((a, b) => dateValue(a.date) - dateValue(b.date))
|
||||
const storyEvents = evidence.filter((item): item is EventExhibit => item.type === 'event').sort((a, b) => {
|
||||
if (!a.eventDate) return b.eventDate ? 1 : 0
|
||||
if (!b.eventDate) return -1
|
||||
return dateValue(a.eventDate) - dateValue(b.eventDate)
|
||||
})
|
||||
const timelineView = caseState.views.find((view): view is TimelineView => view.type === 'timeline')
|
||||
return <main className="desktop">
|
||||
<header className="menubar">
|
||||
<div className="brand"><span className="brand-mark">GU</span><span>OSINT BOARD <em>/ {requestedEditMode && caseState.editingAllowed ? 'LEVEL EDITOR' : 'CASE TERMINAL'}</em></span></div>
|
||||
@@ -363,13 +372,13 @@ export function App() {
|
||||
|
||||
<section className="workspace">
|
||||
<aside className={`documents-panel ${docsOpen ? '' : 'closed'}`}>
|
||||
<div className="panel-heading"><div><small>CASE MATERIALS</small><h2>DOCUMENTS <sup>{normalizedDocumentQuery ? `${filteredDocuments.length}/${caseState.documents.length}` : caseState.documents.length}</sup></h2></div><button aria-label="Close documents" onClick={() => setDocsOpen(false)}><X size={17}/></button></div>
|
||||
<div className="panel-heading"><div><small>CASE MATERIALS</small><h2>DOCUMENTS <sup>{normalizedDocumentQuery ? `${filteredDocuments.length}/${documents.length}` : documents.length}</sup></h2></div><button aria-label="Close documents" onClick={() => setDocsOpen(false)}><X size={17}/></button></div>
|
||||
<label className="search"><Search size={15}/><input type="search" aria-label="Search inside documents" placeholder="Search inside documents…" value={documentQuery} onChange={event => setDocumentQuery(event.target.value)}/>{documentQuery && <button type="button" aria-label="Clear document search" onClick={() => setDocumentQuery('')}><X size={13}/></button>}</label>
|
||||
{canAuthor && <><button className="import-document" onClick={() => fileInputRef.current?.click()}><Upload size={15}/>{uploading ? `IMPORTING ${uploading}…` : 'IMPORT DOCUMENT'}</button><input ref={fileInputRef} className="file-input" type="file" multiple onChange={e => { if (e.target.files) uploadFiles(e.target.files); e.target.value = '' }} /></>}
|
||||
<div className="doc-list">
|
||||
{filteredDocuments.map((doc, index) => <button className={`doc-row ${selected === doc.id ? 'selected' : ''}`} data-document-row-id={doc.id} data-temporal-id={`document:${doc.id}`} key={doc.id} title="Click to locate on board · double-click to open" onDoubleClick={() => setOpenDoc(doc)} onClick={() => setSelected(current => current === doc.id ? null : doc.id)}>
|
||||
<div className={`doc-icon tint-${index % 3}`}><FileText size={24}/><b>{doc.kind.slice(0, 3)}</b></div>
|
||||
<div><strong>{doc.title}</strong><span>{doc.kind} · {doc.date}</span></div><ChevronRight size={16}/>
|
||||
<div className={`doc-icon tint-${index % 3}`}><FileText size={24}/><b>{doc.fileType.slice(0, 3)}</b></div>
|
||||
<div><strong>{doc.title}</strong><span>{documentWidget(doc.fileType).label} · {doc.publishedAt?.slice(0, 10) || 'UNDATED'}</span></div><ChevronRight size={16}/>
|
||||
</button>)}
|
||||
{normalizedDocumentQuery && filteredDocuments.length === 0 && <div className="no-document-results"><Search size={20}/><b>NO MATCHING DOCUMENTS</b><span>Searches titles, contents, extracts, and metadata.</span></div>}
|
||||
</div>
|
||||
@@ -378,10 +387,10 @@ export function App() {
|
||||
|
||||
<div className="board-shell" onDragEnter={e => { if (e.dataTransfer.types.includes('Files') && canAuthor) { e.preventDefault(); setDraggingFiles(true) } }} onDragOver={e => { if (canAuthor) { e.preventDefault(); e.dataTransfer.dropEffect = 'copy' } }} onDragLeave={e => { if (!e.currentTarget.contains(e.relatedTarget as Node)) setDraggingFiles(false) }} onDrop={e => { e.preventDefault(); if (e.dataTransfer.files.length) uploadFiles(e.dataTransfer.files) }}>
|
||||
<div className="case-heading"><div><small>{requestedEditMode && caseState.editingAllowed ? 'AUTHORING LEVEL' : 'ACTIVE INVESTIGATION'}</small><h1>{caseState.title}</h1><p>{caseState.subtitle || caseState.id.toUpperCase()}</p></div><div className="case-number">{requestedEditMode && caseState.editingAllowed ? 'DRAFT' : 'CASE'}<br/><b>{caseState.levelStatus?.toUpperCase() || 'ACTIVE'}</b></div></div>
|
||||
<Board state={caseState} selected={selected} linkFrom={linkFrom} recentlyCreatedExhibitId={recentlyCreatedExhibitId} recentlyCreatedConnectionId={recentlyCreatedConnectionId} tool={boardTool} boardRef={boardRef} update={update} onCardClick={handleCardClick} onConnectionTarget={completeThread} onEditConnection={connection => setThreadDraft(connection)} onDiscardExhibit={removeExhibit} onOpenSource={id => setOpenDoc(caseState.documents.find(d => d.id === id) || null)} onUpdateDocumentCue={(id, cue) => update(state => ({ ...state, documents: state.documents.map(document => document.id === id ? { ...document, metadata: { ...document.metadata, memory_cue: cue } } : document) }))} onEditFolder={setEditingFolderId} onEditFile={setEditingFileId} onEditEvent={setEditingEventId} onEditParty={setEditingPartyId} />
|
||||
<Board state={caseState} selected={selected} linkFrom={linkFrom} recentlyCreatedExhibitId={recentlyCreatedExhibitId} recentlyCreatedConnectionId={recentlyCreatedConnectionId} tool={boardTool} boardRef={boardRef} update={update} onCardClick={handleCardClick} onConnectionTarget={completeThread} onEditConnection={connection => setThreadDraft(connection)} onDiscardExhibit={removeExhibit} onOpenSource={id => setOpenDoc(documents.find(d => d.id === id) || null)} onUpdateDocumentCue={(id, cue) => update(state => ({ ...state, exhibits: state.exhibits.map(exhibit => exhibit.id === id && exhibit.type === 'document' ? { ...exhibit, metadata: { ...exhibit.metadata, memory_cue: cue } } : exhibit) }))} onEditFolder={setEditingFolderId} onEditFile={setEditingFileId} onEditEvent={setEditingEventId} onEditParty={setEditingPartyId} />
|
||||
{briefOpen && <BriefPanel
|
||||
brief={caseState.brief}
|
||||
parties={caseState.evidence.filter(item => item.type === 'party')}
|
||||
parties={evidence.filter((item): item is PartyExhibit => item.type === 'party')}
|
||||
recentlyCreatedExhibitId={recentlyCreatedExhibitId}
|
||||
canEdit={canAuthor}
|
||||
onClose={closeBrief}
|
||||
@@ -392,7 +401,7 @@ export function App() {
|
||||
onEditParty={setEditingPartyId}
|
||||
/>}
|
||||
{storyEvents.length > 0 && <aside className="story-strip"><small>RECONSTRUCTED STORY</small>{storyEvents.map((event, index) => <button key={event.id} className={selected === event.id ? 'selected' : ''} onClick={() => focusEvidence(event.id)}><time>{event.eventDate?.slice(0, 10) || 'UNDATED'}</time><b>{index + 1}. {event.title}</b><span>{event.content}</span></button>)}</aside>}
|
||||
{!docsOpen && <button className="open-files" onClick={() => setDocsOpen(true)}><FolderOpen size={18}/> CASE MATERIALS <b>{caseState.documents.length}</b></button>}
|
||||
{!docsOpen && <button className="open-files" onClick={() => setDocsOpen(true)}><FolderOpen size={18}/> CASE MATERIALS <b>{documents.length}</b></button>}
|
||||
<div className="board-actions">
|
||||
<button className={boardTool === 'move' ? 'active' : ''} title="Move widgets" onClick={() => setBoardTool('move')}><MousePointer2 size={17}/> MOVE</button>
|
||||
<button className={boardTool === 'hand' ? 'active' : ''} title="Pan board (middle mouse always works)" onClick={() => setBoardTool('hand')}><Hand size={17}/> HAND</button>
|
||||
@@ -411,51 +420,49 @@ export function App() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<DocumentLocatorBeam documentId={caseState.documents.some(document => document.id === selected) ? selected : null} layoutKey={`${docsOpen}:${caseState.viewport.x}:${caseState.viewport.y}:${caseState.viewport.zoom}:${caseState.evidence.map(item => `${item.id}:${item.x}:${item.y}:${String(item.config?.open)}`).join('|')}:${caseState.relations.map(item => `${item.id}:${String(item.config?.x)}:${String(item.config?.y)}`).join('|')}`} />
|
||||
<TemporalLinks items={temporalItems} layoutKey={`${caseState.viewport.x}:${caseState.viewport.y}:${caseState.viewport.zoom}:${docsOpen}:${caseState.evidence.map(e => `${e.id}:${e.x}:${e.y}:${String(e.config?.open)}`).join('|')}:${caseState.relations.map(r => `${r.id}:${String(r.config?.x)}:${String(r.config?.y)}`).join('|')}`}/>
|
||||
<Timeline items={temporalItems} range={caseState.timelineRange} selected={selected} onEdit={() => setEditingTimeline(true)} onSelect={item => { if (item.documentId) setOpenDoc(caseState.documents.find(doc => doc.id === item.documentId) || null); else if (item.evidenceId) focusEvidence(item.evidenceId) }}/>
|
||||
{openDoc && <DocumentWindow doc={openDoc} onClose={() => setOpenDoc(null)} onExtract={id => extract(openDoc, id)} extracted={caseState.evidence.filter(e => e.sourceDocumentId === openDoc.id).map(e => e.sourceRegionId)} />}
|
||||
<DocumentLocatorBeam documentId={documents.some(document => document.id === selected) ? selected : null} layoutKey={`${docsOpen}:${caseState.viewport.x}:${caseState.viewport.y}:${caseState.viewport.zoom}:${caseState.exhibits.map(item => `${item.id}:${item.x}:${item.y}:${item.type === 'folder' ? item.isOpen : ''}`).join('|')}`} />
|
||||
<TemporalLinks items={temporalItems} layoutKey={`${caseState.viewport.x}:${caseState.viewport.y}:${caseState.viewport.zoom}:${docsOpen}:${caseState.exhibits.map(e => `${e.id}:${e.x}:${e.y}:${e.type === 'folder' ? e.isOpen : ''}`).join('|')}`}/>
|
||||
{timelineView?.visible !== false && <Timeline items={temporalItems} range={timelineView?.rangeMode === 'fixed' ? timelineView.range : undefined} selected={selected} onEdit={() => setEditingTimeline(true)} onSelect={item => { const exhibit = caseState.exhibits.find(candidate => candidate.id === item.exhibitId); if (exhibit?.type === 'document') setOpenDoc(exhibit); else focusEvidence(item.exhibitId) }}/>
|
||||
}
|
||||
{openDoc && <DocumentWindow doc={openDoc} onClose={() => setOpenDoc(null)} onExtract={id => extract(openDoc, id)} extracted={caseState.relations.flatMap(relation => relation.type === 'source' && relation.toExhibitId === openDoc.id ? [relation.sourceRegionId] : [])} />}
|
||||
{editingFolderId && <FolderEditor
|
||||
key={editingFolderId}
|
||||
folder={caseState.evidence.find(widget => widget.id === editingFolderId)!}
|
||||
folder={caseState.exhibits.find((widget): widget is FolderExhibit => widget.id === editingFolderId && widget.type === 'folder')!}
|
||||
memberIds={containedIds(caseState, editingFolderId)}
|
||||
documents={caseState.documents}
|
||||
documents={documents}
|
||||
canManageContents={canAuthor}
|
||||
onClose={() => setEditingFolderId(null)}
|
||||
onSave={(folder, members) => {
|
||||
update(state => ({
|
||||
...state,
|
||||
evidence: state.evidence.map(widget => widget.id === folder.id ? { ...folder, containedDocumentIds: members } : widget),
|
||||
exhibits: state.exhibits.map(widget => widget.id === folder.id ? folder : widget),
|
||||
relations: [
|
||||
...state.relations.filter(relation => relation.type !== 'contains' || relation.fromWidgetId !== folder.id),
|
||||
...members.map((documentId, index) => {
|
||||
const existing = state.relations.find(relation => relation.type === 'contains' && relation.fromWidgetId === folder.id && relation.toWidgetId === documentId)
|
||||
const position = relationPosition(state, existing || { id: '', fromWidgetId: folder.id, toWidgetId: documentId, type: 'contains', sortOrder: index })
|
||||
return { id: existing?.id || `contains:${folder.id}:${documentId}`, fromWidgetId: folder.id, toWidgetId: documentId, type: 'contains', sortOrder: index, config: existing?.config || position }
|
||||
}),
|
||||
...state.relations.filter(relation => relation.type !== 'contains' || relation.fromExhibitId !== folder.id),
|
||||
...members.map((documentId, index): ExhibitRelation => ({ id: state.relations.find(relation => relation.type === 'contains' && relation.fromExhibitId === folder.id && relation.toExhibitId === documentId)?.id || uid('contains'), fromExhibitId: folder.id, toExhibitId: documentId, type: 'contains', sortOrder: index })),
|
||||
],
|
||||
}))
|
||||
setEditingFolderId(null)
|
||||
setStatus('FOLDER UPDATED')
|
||||
}}
|
||||
/>}
|
||||
{editingFileId && <FileEditor key={editingFileId} document={caseState.documents.find(document => document.id === editingFileId)!} onClose={() => setEditingFileId(null)} onSave={document => { update(state => ({ ...state, documents: state.documents.map(candidate => candidate.id === document.id ? document : candidate) })); setEditingFileId(null); setStatus('FILE METADATA UPDATED') }}/>}
|
||||
{editingFileId && <FileEditor key={editingFileId} document={documents.find(document => document.id === editingFileId)!} onClose={() => setEditingFileId(null)} onSave={document => { update(state => ({ ...state, exhibits: state.exhibits.map(candidate => candidate.id === document.id ? document : candidate) })); setEditingFileId(null); setStatus('FILE METADATA UPDATED') }}/>
|
||||
}
|
||||
{editingEventId && <EventEditor
|
||||
key={editingEventId}
|
||||
event={caseState.evidence.find(item => item.id === editingEventId)!}
|
||||
evidence={caseState.evidence}
|
||||
documents={caseState.documents}
|
||||
event={caseState.exhibits.find((item): item is EventExhibit => item.id === editingEventId && item.type === 'event')!}
|
||||
exhibits={caseState.exhibits}
|
||||
relations={caseState.relations}
|
||||
onClose={() => setEditingEventId(null)}
|
||||
onSave={event => { update(state => ({ ...state, evidence: state.evidence.map(item => item.id === event.id ? event : item) })); setEditingEventId(null); setStatus('EVENT NARRATIVE UPDATED') }}
|
||||
onSave={(event, supports) => { update(state => ({ ...state, exhibits: state.exhibits.map(item => item.id === event.id ? event : item), relations: replaceDirectedRelations(state.relations, 'supports', event.id, supports) })); setEditingEventId(null); setStatus('EVENT NARRATIVE UPDATED') }}
|
||||
/>}
|
||||
{newEventDraft && <EventEditor
|
||||
key={newEventDraft.id}
|
||||
event={newEventDraft}
|
||||
evidence={caseState.evidence}
|
||||
documents={caseState.documents}
|
||||
exhibits={caseState.exhibits}
|
||||
relations={caseState.relations}
|
||||
onClose={() => setNewEventDraft(null)}
|
||||
onSave={event => {
|
||||
update(state => ({ ...state, evidence: [...state.evidence, event] }))
|
||||
onSave={(event, supports) => {
|
||||
update(state => ({ ...state, exhibits: [...state.exhibits, event], relations: replaceDirectedRelations(state.relations, 'supports', event.id, supports) }))
|
||||
setNewEventDraft(null)
|
||||
setSelected(event.id)
|
||||
setRecentlyCreatedExhibitId(event.id)
|
||||
@@ -464,12 +471,12 @@ export function App() {
|
||||
/>}
|
||||
{editingPartyId && <PartyEditor
|
||||
key={editingPartyId}
|
||||
party={caseState.evidence.find(item => item.id === editingPartyId)!}
|
||||
evidence={caseState.evidence}
|
||||
documents={caseState.documents}
|
||||
party={caseState.exhibits.find((item): item is PartyExhibit => item.id === editingPartyId && item.type === 'party')!}
|
||||
exhibits={caseState.exhibits}
|
||||
relations={caseState.relations}
|
||||
onClose={() => setEditingPartyId(null)}
|
||||
onSave={party => {
|
||||
update(state => ({ ...state, evidence: state.evidence.map(item => item.id === party.id ? party : item) }))
|
||||
onSave={(party, related) => {
|
||||
update(state => ({ ...state, exhibits: state.exhibits.map(item => item.id === party.id ? party : item), relations: replaceDirectedRelations(state.relations, 'concerns', party.id, related) }))
|
||||
setEditingPartyId(null)
|
||||
setStatus('PARTY DOSSIER UPDATED')
|
||||
}}
|
||||
@@ -477,12 +484,12 @@ export function App() {
|
||||
{newPartyDraft && <PartyEditor
|
||||
key={newPartyDraft.id}
|
||||
party={newPartyDraft}
|
||||
evidence={caseState.evidence}
|
||||
documents={caseState.documents}
|
||||
exhibits={caseState.exhibits}
|
||||
relations={caseState.relations}
|
||||
creating
|
||||
onClose={() => setNewPartyDraft(null)}
|
||||
onSave={party => {
|
||||
update(state => ({ ...state, evidence: [...state.evidence, party] }))
|
||||
onSave={(party, related) => {
|
||||
update(state => ({ ...state, exhibits: [...state.exhibits, party], relations: replaceDirectedRelations(state.relations, 'concerns', party.id, related) }))
|
||||
setNewPartyDraft(null)
|
||||
setSelected(party.id)
|
||||
setRecentlyCreatedExhibitId(party.id)
|
||||
@@ -499,11 +506,11 @@ export function App() {
|
||||
}}
|
||||
/>}
|
||||
{editingTimeline && <TimelineRangeEditor
|
||||
range={caseState.timelineRange}
|
||||
range={timelineView?.rangeMode === 'fixed' ? timelineView.range : undefined}
|
||||
dates={temporalItems.map(item => item.date)}
|
||||
onClose={() => setEditingTimeline(false)}
|
||||
onSave={timelineRange => {
|
||||
update(state => ({ ...state, timelineRange }))
|
||||
update(state => ({ ...state, views: state.views.map(view => view.type === 'timeline' ? { ...view, rangeMode: timelineRange ? 'fixed' : 'auto', range: timelineRange || undefined } : view) }))
|
||||
setEditingTimeline(false)
|
||||
setStatus(timelineRange ? 'TIMELINE RANGE UPDATED' : 'TIMELINE RANGE AUTOMATIC')
|
||||
}}
|
||||
@@ -511,8 +518,8 @@ export function App() {
|
||||
{threadDraft && <ThreadEditor
|
||||
key={threadDraft.id}
|
||||
connection={threadDraft}
|
||||
sourceName={caseState.evidence.find(item => item.id === threadDraft.fromEvidenceId)?.title || caseState.documents.find(item => item.id === threadDraft.fromEvidenceId)?.title || 'Exhibit'}
|
||||
targetName={caseState.evidence.find(item => item.id === threadDraft.toEvidenceId)?.title || caseState.documents.find(item => item.id === threadDraft.toEvidenceId)?.title || 'Exhibit'}
|
||||
sourceName={caseState.exhibits.find(item => item.id === threadDraft.fromExhibitId)?.title || 'Exhibit'}
|
||||
targetName={caseState.exhibits.find(item => item.id === threadDraft.toExhibitId)?.title || 'Exhibit'}
|
||||
isNew={!caseState.connections.some(item => item.id === threadDraft.id)}
|
||||
onClose={() => setThreadDraft(null)}
|
||||
onSave={saveThread}
|
||||
@@ -537,8 +544,8 @@ function EmptyArchive({ canEdit, onCreated }: { canEdit: boolean; onCreated: (le
|
||||
return <main className="empty-archive"><div className="seal">GU</div><small>GLITCH UNIVERSITY LEVEL ARCHIVE</small><h1>No investigations found.</h1><p>The database is ready, but no authored level exists yet.</p>{canEdit ? <button disabled={creating} onClick={createLevel}><Plus size={17}/>{creating ? 'CREATING…' : 'CREATE FIRST LEVEL'}</button> : <p className="hint">Add <code>?edit=1</code> and enable level editing on the server to begin authoring.</p>}</main>
|
||||
}
|
||||
|
||||
function Board({ state, selected, linkFrom, recentlyCreatedExhibitId, recentlyCreatedConnectionId, tool, boardRef, update, onCardClick, onConnectionTarget, onEditConnection, onDiscardExhibit, onOpenSource, onUpdateDocumentCue, onEditFolder, onEditFile, onEditEvent, onEditParty }: { state: CaseState; selected: string | null; linkFrom: string | null; recentlyCreatedExhibitId: string | null; recentlyCreatedConnectionId: string | null; tool: 'move' | 'hand'; boardRef: React.RefObject<HTMLDivElement | null>; update: (fn: (s: CaseState) => CaseState) => void; onCardClick: (id: string) => void; onConnectionTarget: (id: string) => void; onEditConnection: (connection: Connection) => void; onDiscardExhibit: (id: string) => void; onOpenSource: (id: string) => void; onUpdateDocumentCue: (id: string, cue: string) => void; onEditFolder: (id: string) => void; onEditFile: (id: string) => void; onEditEvent: (id: string) => void; onEditParty: (id: string) => void }) {
|
||||
const drag = useRef<{ kind: 'pan' | 'widget' | 'relation' | 'thread-tag'; id?: string; startX: number; startY: number; originX: number; originY: number; moved?: boolean } | null>(null)
|
||||
function Board({ state, selected, linkFrom, recentlyCreatedExhibitId, recentlyCreatedConnectionId, tool, boardRef, update, onCardClick, onEditConnection, onDiscardExhibit, onOpenSource, onUpdateDocumentCue, onEditFolder, onEditFile, onEditEvent, onEditParty }: { state: CaseState; selected: string | null; linkFrom: string | null; recentlyCreatedExhibitId: string | null; recentlyCreatedConnectionId: string | null; tool: 'move' | 'hand'; boardRef: React.RefObject<HTMLDivElement | null>; update: (fn: (s: CaseState) => CaseState) => void; onCardClick: (id: string) => void; onConnectionTarget: (id: string) => void; onEditConnection: (connection: Connection) => void; onDiscardExhibit: (id: string) => void; onOpenSource: (id: string) => void; onUpdateDocumentCue: (id: string, cue: string) => void; onEditFolder: (id: string) => void; onEditFile: (id: string) => void; onEditEvent: (id: string) => void; onEditParty: (id: string) => void }) {
|
||||
const drag = useRef<{ kind: 'pan' | 'widget' | 'thread-tag'; id?: string; startX: number; startY: number; originX: number; originY: number; moved?: boolean } | null>(null)
|
||||
const suppressClick = useRef(false)
|
||||
const touchPoints = useRef(new Map<number, { x: number; y: number }>())
|
||||
const pinchDistance = useRef<number | null>(null)
|
||||
@@ -549,16 +556,14 @@ function Board({ state, selected, linkFrom, recentlyCreatedExhibitId, recentlyCr
|
||||
const [trashActive, setTrashActive] = useState(false)
|
||||
const trashRef = useRef<HTMLDivElement>(null)
|
||||
const trashTarget = useRef(false)
|
||||
const byId = useMemo(() => new Map(state.evidence.map(e => [e.id, e])), [state.evidence])
|
||||
const byId = useMemo(() => new Map(state.exhibits.map(exhibit => [exhibit.id, exhibit])), [state.exhibits])
|
||||
const containmentRelations = state.relations.filter(relation => relation.type === 'contains')
|
||||
const pointForId = (id: string) => {
|
||||
const evidence = byId.get(id)
|
||||
if (evidence) return connectionPoint(evidence)
|
||||
const relation = containmentRelations.find(item => item.toWidgetId === id)
|
||||
const folder = relation ? byId.get(relation.fromWidgetId) : undefined
|
||||
if (!relation || !folder) return undefined
|
||||
const position = relationPosition(state, relation)
|
||||
return folderIsOpen(folder) ? { x: position.x + 87, y: position.y + 72 } : connectionPoint(folder)
|
||||
const exhibit = byId.get(id)
|
||||
if (!exhibit) return undefined
|
||||
const membership = exhibit.type === 'document' ? containmentRelations.find(item => item.toExhibitId === id) : undefined
|
||||
const folder = membership ? byId.get(membership.fromExhibitId) : undefined
|
||||
return folder?.type === 'folder' && !folder.isOpen ? connectionPoint(folder) : connectionPoint(exhibit)
|
||||
}
|
||||
useEffect(() => {
|
||||
const board = boardRef.current
|
||||
@@ -574,7 +579,7 @@ function Board({ state, selected, linkFrom, recentlyCreatedExhibitId, recentlyCr
|
||||
board.addEventListener('wheel', handleWheelZoom, { passive: false })
|
||||
return () => board.removeEventListener('wheel', handleWheelZoom)
|
||||
}, [boardRef, update])
|
||||
const pointerDown = (event: React.PointerEvent, target?: { kind: 'widget' | 'relation'; id: string }) => {
|
||||
const pointerDown = (event: React.PointerEvent, target?: { kind: 'widget'; id: string }) => {
|
||||
if ((event.target as HTMLElement).closest('button')) return
|
||||
if (event.pointerType === 'touch') {
|
||||
touchPoints.current.set(event.pointerId, { x: event.clientX, y: event.clientY })
|
||||
@@ -587,9 +592,7 @@ function Board({ state, selected, linkFrom, recentlyCreatedExhibitId, recentlyCr
|
||||
}
|
||||
}
|
||||
const widget = target?.kind === 'widget' ? byId.get(target.id) : undefined
|
||||
const relation = target?.kind === 'relation' ? state.relations.find(candidate => candidate.id === target.id) : undefined
|
||||
const position = relation ? relationPosition(state, relation) : undefined
|
||||
drag.current = { kind: target?.kind || 'pan', id: target?.id, startX: event.clientX, startY: event.clientY, originX: widget?.x ?? position?.x ?? state.viewport.x, originY: widget?.y ?? position?.y ?? state.viewport.y }
|
||||
drag.current = { kind: target?.kind || 'pan', id: target?.id, startX: event.clientX, startY: event.clientY, originX: widget?.x ?? state.viewport.x, originY: widget?.y ?? state.viewport.y }
|
||||
setDraggingWidget(target?.kind === 'widget')
|
||||
try { event.currentTarget.setPointerCapture(event.pointerId) } catch { /* Synthetic test events have no active native pointer. */ }
|
||||
}
|
||||
@@ -638,16 +641,15 @@ function Board({ state, selected, linkFrom, recentlyCreatedExhibitId, recentlyCr
|
||||
if (drag.current.kind === 'thread-tag' && boardRef.current) {
|
||||
if (drag.current.moved) setExpandedThreadTagId(null)
|
||||
const connection = state.connections.find(item => item.id === drag.current!.id)
|
||||
const from = connection ? pointForId(connection.fromEvidenceId) : undefined
|
||||
const to = connection ? pointForId(connection.toEvidenceId) : undefined
|
||||
const from = connection ? pointForId(connection.fromExhibitId) : undefined
|
||||
const to = connection ? pointForId(connection.toExhibitId) : undefined
|
||||
if (connection && from && to) {
|
||||
const bounds = boardRef.current.getBoundingClientRect()
|
||||
const pointer = { x: (event.clientX - bounds.left - state.viewport.x) / state.viewport.zoom, y: (event.clientY - bounds.top - state.viewport.y) / state.viewport.zoom }
|
||||
const placement = projectThreadTag(from, to, connection.tightness ?? 65, pointer)
|
||||
update(s => ({ ...s, connections: s.connections.map(item => item.id === connection.id ? { ...item, tagPosition: placement.positionPercent, tagOffset: placement.lateralOffset } : item) }))
|
||||
}
|
||||
} else if (drag.current.kind === 'widget') update(s => { const next = moveBoardPoint({ x: drag.current!.originX, y: drag.current!.originY }, { x: dx, y: dy }, s.viewport.zoom); return { ...s, evidence: s.evidence.map(e => e.id === drag.current!.id ? { ...e, ...next } : e) } })
|
||||
else if (drag.current.kind === 'relation') update(s => { const next = moveBoardPoint({ x: drag.current!.originX, y: drag.current!.originY }, { x: dx, y: dy }, s.viewport.zoom); return { ...s, relations: s.relations.map(relation => relation.id === drag.current!.id ? { ...relation, config: { ...(relation.config || {}), ...next } } : relation) } })
|
||||
} else if (drag.current.kind === 'widget') update(s => { const next = moveBoardPoint({ x: drag.current!.originX, y: drag.current!.originY }, { x: dx, y: dy }, s.viewport.zoom); return { ...s, exhibits: s.exhibits.map(exhibit => exhibit.id === drag.current!.id ? { ...exhibit, ...next } : exhibit) } })
|
||||
else update(s => ({ ...s, viewport: panViewport({ ...s.viewport, x: drag.current!.originX, y: drag.current!.originY }, { x: dx, y: dy }) }))
|
||||
}
|
||||
const finishDrag = (event: React.PointerEvent) => {
|
||||
@@ -664,7 +666,16 @@ function Board({ state, selected, linkFrom, recentlyCreatedExhibitId, recentlyCr
|
||||
if (completedDrag?.kind === 'widget' && completedDrag.id && completedDrag.moved && trashTarget.current) onDiscardExhibit(completedDrag.id)
|
||||
trashTarget.current = false
|
||||
}
|
||||
const toggleFolder = (id: string) => update(s => ({ ...s, evidence: s.evidence.map(widget => widget.id === id ? { ...widget, config: { ...(widget.config || {}), open: !folderIsOpen(widget) } } : widget) }))
|
||||
const toggleFolder = (id: string) => update(s => ({ ...s, exhibits: s.exhibits.map(exhibit => exhibit.id === id && exhibit.type === 'folder' ? { ...exhibit, isOpen: !exhibit.isOpen } : exhibit) }))
|
||||
const widgetContext: ExhibitWidgetContext = { exhibits: state.exhibits, relations: state.relations, dispatch: (command: WidgetCommand) => {
|
||||
if (command.type === 'open-document') onOpenSource(command.documentId)
|
||||
else if (command.type === 'toggle-folder') toggleFolder(command.folderId)
|
||||
else if (command.type === 'edit-folder') onEditFolder(command.folderId)
|
||||
else if (command.type === 'edit-event') onEditEvent(command.eventId)
|
||||
else if (command.type === 'edit-party') onEditParty(command.partyId)
|
||||
else if (command.type === 'edit-document') onEditFile(command.documentId)
|
||||
else if (command.type === 'update-memory-cue') onUpdateDocumentCue(command.documentId, command.cue)
|
||||
} }
|
||||
const previewOrigin = linkFrom ? pointForId(linkFrom) : undefined
|
||||
return <div className={`board-viewport tool-${tool} ${linkFrom ? 'threading' : ''}`} ref={boardRef}
|
||||
onPointerDown={e => {
|
||||
@@ -678,54 +689,32 @@ function Board({ state, selected, linkFrom, recentlyCreatedExhibitId, recentlyCr
|
||||
<div className="board" style={{ width: BOARD_W, height: BOARD_H, transform: `translate(${state.viewport.x}px, ${state.viewport.y}px) scale(${state.viewport.zoom})` }}>
|
||||
<div className="board-stamp">AUTHORIZED CITIZEN SCIENTIST WORKSTATION <span>GU-NET / 04</span></div>
|
||||
<svg className="connections" width={BOARD_W} height={BOARD_H}>
|
||||
{state.connections.map(connection => { const p1 = pointForId(connection.fromEvidenceId), p2 = pointForId(connection.toEvidenceId); if (!p1 || !p2) return null; return <g className={recentlyCreatedConnectionId === connection.id ? 'tightening' : ''} key={connection.id}><path d={threadCurve(p1, p2, connection.tightness).path}/><circle cx={p1.x} cy={p1.y} r="4"/><circle cx={p2.x} cy={p2.y} r="4"/></g> })}
|
||||
{state.connections.map(connection => { const p1 = pointForId(connection.fromExhibitId), p2 = pointForId(connection.toExhibitId); if (!p1 || !p2) return null; return <g className={recentlyCreatedConnectionId === connection.id ? 'tightening' : ''} key={connection.id}><path d={threadCurve(p1, p2, connection.tightness).path}/><circle cx={p1.x} cy={p1.y} r="4"/><circle cx={p2.x} cy={p2.y} r="4"/></g> })}
|
||||
{previewOrigin && threadPointer && <g className="thread-preview"><path d={threadCurve(previewOrigin, threadPointer, 35).path}/><circle cx={previewOrigin.x} cy={previewOrigin.y} r="4"/><circle cx={threadPointer.x} cy={threadPointer.y} r="3"/></g>}
|
||||
</svg>
|
||||
{state.connections.map(connection => { const p1 = pointForId(connection.fromEvidenceId), p2 = pointForId(connection.toEvidenceId); if (!p1 || !p2) return null; const placement = threadTagPlacement(p1, p2, connection.tightness, connection.tagPosition, connection.tagOffset); const compact = connection.tagStyle === 'compact'; const expanded = !compact && expandedThreadTagId === connection.id; const dragging = draggingThreadTagId === connection.id; return <button key={`tag:${connection.id}`} aria-expanded={connection.label && !compact ? expanded : undefined} aria-label={connection.label ? `Relation tag: ${connection.label}` : 'Edit untagged red thread'} className={`thread-tag ${connection.label ? `labelled ${compact ? 'compact' : 'luggage luggage-tag'}` : 'untagged'} ${expanded ? 'expanded' : ''} ${dragging ? 'dragging' : ''}`} style={{ left: placement.x, top: placement.y }} title={connection.label ? dragging ? `Position ${Math.round(placement.positionPercent)}%` : compact ? 'Drag to position · click to edit' : expanded ? 'Click again to edit this thread' : 'Drag along thread · click to rotate' : 'Edit thread tag and tightness'} onPointerDown={event => connection.label ? threadTagPointerDown(event, connection.id) : event.stopPropagation()} onClick={event => { event.stopPropagation(); if (suppressClick.current) { suppressClick.current = false; return } if (!connection.label || compact || expanded) { setExpandedThreadTagId(null); onEditConnection(connection) } else setExpandedThreadTagId(connection.id) }}><i/>{dragging && <output className="thread-tag-position">{Math.round(placement.positionPercent)}%</output>}{connection.label && (compact ? <span className="thread-tag-compact-label">{connection.label}</span> : <span className="thread-tag-content"><small>RELATION TAG</small><b>{connection.label}</b>{expanded && <em>CLICK AGAIN TO EDIT THREAD</em>}</span>)}</button> })}
|
||||
{state.connections.map(connection => { const p1 = pointForId(connection.fromExhibitId), p2 = pointForId(connection.toExhibitId); if (!p1 || !p2) return null; const tagPlacement = threadTagPlacement(p1, p2, connection.tightness, connection.tagPosition, connection.tagOffset); const compact = connection.tagStyle === 'compact'; const expanded = !compact && expandedThreadTagId === connection.id; const dragging = draggingThreadTagId === connection.id; return <button key={`tag:${connection.id}`} aria-expanded={connection.label && !compact ? expanded : undefined} aria-label={connection.label ? `Relation tag: ${connection.label}` : 'Edit untagged red thread'} className={`thread-tag ${connection.label ? `labelled ${compact ? 'compact' : 'luggage luggage-tag'}` : 'untagged'} ${expanded ? 'expanded' : ''} ${dragging ? 'dragging' : ''}`} style={{ left: tagPlacement.x, top: tagPlacement.y }} title={connection.label ? dragging ? `Position ${Math.round(tagPlacement.positionPercent)}%` : compact ? 'Drag to position · click to edit' : expanded ? 'Click again to edit this thread' : 'Drag along thread · click to rotate' : 'Edit thread tag and tightness'} onPointerDown={event => connection.label ? threadTagPointerDown(event, connection.id) : event.stopPropagation()} onClick={event => { event.stopPropagation(); if (suppressClick.current) { suppressClick.current = false; return } if (!connection.label || compact || expanded) { setExpandedThreadTagId(null); onEditConnection(connection) } else setExpandedThreadTagId(connection.id) }}><i/>{dragging && <output className="thread-tag-position">{Math.round(tagPlacement.positionPercent)}%</output>}{connection.label && (compact ? <span className="thread-tag-compact-label">{connection.label}</span> : <span className="thread-tag-content"><small>RELATION TAG</small><b>{connection.label}</b>{expanded && <em>CLICK AGAIN TO EDIT THREAD</em>}</span>)}</button> })}
|
||||
<svg className="event-support-lines" width={BOARD_W} height={BOARD_H}>
|
||||
{state.evidence.filter(event => event.type === 'event').flatMap(event => (event.supportingEvidenceIds || []).flatMap(evidenceId => {
|
||||
const evidence = byId.get(evidenceId)
|
||||
let target = evidence ? connectionPoint(evidence) : undefined
|
||||
if (!target) {
|
||||
const relation = containmentRelations.find(item => item.toWidgetId === evidenceId)
|
||||
const folder = relation ? byId.get(relation.fromWidgetId) : undefined
|
||||
if (relation && folder) target = folderIsOpen(folder) ? { x: relationPosition(state, relation).x + 87, y: relationPosition(state, relation).y + 72 } : connectionPoint(folder)
|
||||
}
|
||||
if (!target) return []
|
||||
const origin = connectionPoint(event)
|
||||
return [<line key={`${event.id}:${evidenceId}`} x1={origin.x} y1={origin.y} x2={target.x} y2={target.y}/>]
|
||||
}))}
|
||||
{state.relations.filter(relation => relation.type === 'supports').map(relation => { const origin = pointForId(relation.fromExhibitId), target = pointForId(relation.toExhibitId); return origin && target ? <line key={relation.id} x1={origin.x} y1={origin.y} x2={target.x} y2={target.y}/> : null })}
|
||||
</svg>
|
||||
<svg className="party-association-lines" width={BOARD_W} height={BOARD_H}>
|
||||
{state.evidence.filter(party => party.type === 'party').flatMap(party => (party.relatedEvidenceIds || []).flatMap(evidenceId => {
|
||||
const evidence = byId.get(evidenceId)
|
||||
let target = evidence ? connectionPoint(evidence) : undefined
|
||||
if (!target) {
|
||||
const relation = containmentRelations.find(item => item.toWidgetId === evidenceId)
|
||||
const folder = relation ? byId.get(relation.fromWidgetId) : undefined
|
||||
if (relation && folder) target = folderIsOpen(folder) ? { x: relationPosition(state, relation).x + 87, y: relationPosition(state, relation).y + 72 } : connectionPoint(folder)
|
||||
}
|
||||
if (!target) return []
|
||||
const origin = connectionPoint(party)
|
||||
return [<line key={`${party.id}:${evidenceId}`} x1={origin.x} y1={origin.y} x2={target.x} y2={target.y}/>]
|
||||
}))}
|
||||
{state.relations.filter(relation => relation.type === 'concerns').map(relation => { const origin = pointForId(relation.fromExhibitId), target = pointForId(relation.toExhibitId); return origin && target ? <line key={relation.id} x1={origin.x} y1={origin.y} x2={target.x} y2={target.y}/> : null })}
|
||||
</svg>
|
||||
<svg className="folder-bands" width={BOARD_W} height={BOARD_H}>
|
||||
{containmentRelations.map(relation => { const folder = byId.get(relation.fromWidgetId), document = state.documents.find(candidate => candidate.id === relation.toWidgetId); if (!folder || !document) return null; const open = folderIsOpen(folder), position = relationPosition(state, relation), origin = { x: folder.x + folder.width / 2, y: folder.y + 78 }; return <line className={open ? 'open' : 'closed'} key={relation.id} x1={origin.x} y1={origin.y} x2={open ? position.x + 87 : origin.x} y2={open ? position.y + 72 : origin.y}/> })}
|
||||
{containmentRelations.map(relation => { const folder = byId.get(relation.fromExhibitId), document = byId.get(relation.toExhibitId); if (folder?.type !== 'folder' || document?.type !== 'document') return null; const origin = { x: folder.x + folder.width / 2, y: folder.y + 78 }; return <line className={folder.isOpen ? 'open' : 'closed'} key={relation.id} x1={origin.x} y1={origin.y} x2={folder.isOpen ? document.x + document.width / 2 : origin.x} y2={folder.isOpen ? document.y + document.height / 2 : origin.y}/> })}
|
||||
</svg>
|
||||
{state.evidence.map((ev, i) => { const containedDocuments = containedIds(state, ev.id).flatMap(id => { const document = state.documents.find(candidate => candidate.id === id); return document ? [document] : [] }); const locatedDocumentId = ev.type === 'folder' && !folderIsOpen(ev) && containedDocuments.some(document => document.id === selected) ? selected : undefined; const definition = exhibitWidget(ev.type); const Widget = definition.Component; return <article key={ev.id} data-document-locator-target={locatedDocumentId} data-temporal-id={`widget:${ev.id}`} className={`evidence-card ${definition.visualType} ${ev.type === 'note' ? 'luggage-tag' : ''} ${selected === ev.id ? 'selected' : ''} ${locatedDocumentId ? 'document-located' : ''} ${linkFrom === ev.id ? 'linking' : ''} ${linkFrom && linkFrom !== ev.id ? 'thread-target' : ''} ${recentlyCreatedExhibitId === ev.id ? 'arriving' : ''}`} style={{ left: ev.x, top: ev.y, width: ev.width, rotate: `${(i % 3 - 1) * .45}deg` }}
|
||||
{evidenceExhibits(state.exhibits).filter(exhibit => !exhibit.hidden).map((ev, i) => { const containedDocuments = containedIds(state, ev.id).flatMap(id => { const document = byId.get(id); return document?.type === 'document' ? [document] : [] }); const locatedDocumentId = ev.type === 'folder' && !ev.isOpen && containedDocuments.some(document => document.id === selected) ? selected : undefined; const definition = exhibitWidget(ev.type); const Widget = definition.Component; return <article key={ev.id} data-document-locator-target={locatedDocumentId} data-temporal-id={`widget:${ev.id}`} className={`evidence-card ${definition.visualType} ${ev.type === 'note' ? 'luggage-tag' : ''} ${selected === ev.id ? 'selected' : ''} ${locatedDocumentId ? 'document-located' : ''} ${linkFrom === ev.id ? 'linking' : ''} ${linkFrom && linkFrom !== ev.id ? 'thread-target' : ''} ${recentlyCreatedExhibitId === ev.id ? 'arriving' : ''}`} style={{ left: ev.x, top: ev.y, width: ev.width, height: ev.height, rotate: `${ev.rotation + (i % 3 - 1) * .45}deg`, zIndex: ev.zIndex }}
|
||||
onPointerDown={e => { e.stopPropagation(); if (linkFrom && e.button === 0) return; if (tool === 'hand' || e.button === 1) { e.preventDefault(); pointerDown(e) } else if (e.button === 0) pointerDown(e, { kind: 'widget', id: ev.id }) }}
|
||||
onPointerMove={e => { e.stopPropagation(); pointerMove(e) }} onPointerUp={e => { e.stopPropagation(); finishDrag(e) }} onPointerCancel={e => { e.stopPropagation(); finishDrag(e) }}
|
||||
onAuxClick={e => { if (e.button === 1) e.preventDefault() }} onClick={e => { e.stopPropagation(); if (suppressClick.current) { suppressClick.current = false; return } if (tool === 'move') onCardClick(ev.id) }}>
|
||||
<header><span>{definition.heading(ev, containedDocuments)}</span><i>{String(i + 1).padStart(3, '0')}</i></header>
|
||||
<Widget exhibit={ev} documents={containedDocuments} onOpenSource={onOpenSource} onToggleFolder={toggleFolder} onEditFolder={onEditFolder} onEditEvent={onEditEvent} onEditParty={onEditParty}/>
|
||||
<header><span>{definition.heading(ev, widgetContext)}</span><i>{String(i + 1).padStart(3, '0')}</i></header>
|
||||
<Widget exhibit={ev} context={widgetContext}/>
|
||||
</article>})}
|
||||
{containmentRelations.map(relation => { const folder = byId.get(relation.fromWidgetId), document = state.documents.find(candidate => candidate.id === relation.toWidgetId); if (!folder || !document) return null; const open = folderIsOpen(folder), located = open && selected === document.id, target = relationPosition(state, relation); const left = open ? target.x : folder.x + folder.width / 2 - 87, top = open ? target.y : folder.y + 45; const definition = documentWidget(document.fileType); const Preview = definition.Preview; const source = document.assetId ? `/api/assets/${encodeURIComponent(document.assetId)}` : ''; return <article key={relation.id} data-document-locator-target={located ? document.id : undefined} data-temporal-id={`file:${relation.id}`} className={`source-file-widget ${open ? 'open' : 'closed'} file-type-${document.fileType} ${selected === document.id ? 'selected' : ''} ${located ? 'document-located' : ''} ${linkFrom === document.id ? 'linking' : ''} ${linkFrom && linkFrom !== document.id ? 'thread-target' : ''}`} style={{ left, top }}
|
||||
onPointerDown={event => { event.stopPropagation(); if (linkFrom && event.button === 0) return; if (tool === 'hand' || event.button === 1) { event.preventDefault(); pointerDown(event) } else if (open && event.button === 0) pointerDown(event, { kind: 'relation', id: relation.id }) }}
|
||||
onPointerMove={event => { event.stopPropagation(); pointerMove(event) }} onPointerUp={event => { event.stopPropagation(); finishDrag(event) }} onPointerCancel={event => { event.stopPropagation(); finishDrag(event) }} onClick={event => { event.stopPropagation(); if (suppressClick.current) { suppressClick.current = false; return } if (!open) return; if (linkFrom) onConnectionTarget(document.id); else if (tool === 'move') onCardClick(document.id) }} onDoubleClick={() => open && !linkFrom && onOpenSource(document.id)}>
|
||||
<header><span>{definition.label.toUpperCase()}</span><i>{String((relation.sortOrder || 0) + 1).padStart(2, '0')}</i></header>
|
||||
{documentExhibits(state.exhibits).filter(document => !document.hidden).map(document => { const membership = containmentRelations.find(relation => relation.toExhibitId === document.id); const folder = membership ? byId.get(membership.fromExhibitId) : undefined; const open = folder?.type !== 'folder' || folder.isOpen; const located = open && selected === document.id; const left = open ? document.x : folder.x + folder.width / 2 - document.width / 2, top = open ? document.y : folder.y + 45; const definition = documentWidget(document.fileType); const Preview = definition.Preview; const source = document.assetId ? `/api/assets/${encodeURIComponent(document.assetId)}` : ''; return <article key={document.id} data-document-locator-target={located ? document.id : undefined} data-temporal-id={`widget:${document.id}`} className={`source-file-widget ${open ? 'open' : 'closed'} file-type-${document.fileType} ${selected === document.id ? 'selected' : ''} ${located ? 'document-located' : ''} ${linkFrom === document.id ? 'linking' : ''} ${linkFrom && linkFrom !== document.id ? 'thread-target' : ''}`} style={{ left, top, width: document.width, height: document.height, rotate: `${document.rotation}deg`, zIndex: document.zIndex }}
|
||||
onPointerDown={event => { event.stopPropagation(); if (linkFrom && event.button === 0) return; if (tool === 'hand' || event.button === 1) { event.preventDefault(); pointerDown(event) } else if (open && event.button === 0) pointerDown(event, { kind: 'widget', id: document.id }) }}
|
||||
onPointerMove={event => { event.stopPropagation(); pointerMove(event) }} onPointerUp={event => { event.stopPropagation(); finishDrag(event) }} onPointerCancel={event => { event.stopPropagation(); finishDrag(event) }} onClick={event => { event.stopPropagation(); if (suppressClick.current) { suppressClick.current = false; return } if (!open) return; if (tool === 'move') onCardClick(document.id) }} onDoubleClick={() => open && !linkFrom && onOpenSource(document.id)}>
|
||||
<header><span>{definition.label.toUpperCase()}</span><i>{String((membership?.sortOrder || 0) + 1).padStart(2, '0')}</i></header>
|
||||
<div className="source-file-preview"><Preview document={document} source={source} onMemoryCue={cue => onUpdateDocumentCue(document.id, cue)}/></div>
|
||||
<strong>{document.title}</strong><time>{(document.publishedAt || document.date)?.slice(0, 10) || 'UNDATED'}</time>
|
||||
<strong>{document.title}</strong><time>{document.publishedAt?.slice(0, 10) || 'UNDATED'}</time>
|
||||
<div className="source-file-actions"><button onClick={event => { event.stopPropagation(); onOpenSource(document.id) }}><BookOpen size={12}/> OPEN</button><button onClick={event => { event.stopPropagation(); onEditFile(document.id) }}><Pencil size={12}/> METADATA</button></div>
|
||||
</article> })}
|
||||
</div>
|
||||
@@ -817,7 +806,7 @@ function Timeline({ items, range, selected, onSelect, onEdit }: { items: Tempora
|
||||
const ticks = range
|
||||
? Array.from({ length: 5 }, (_, index) => { const value = start + (end - start) * index / 4; return { value, label: new Date(value).toISOString().slice(5, 10) } })
|
||||
: Array.from({ length: endYear - startYear + 1 }, (_, index) => { const year = startYear + index; return { value: Date.parse(`${year}-01-01T00:00:00.000Z`), label: String(year) } })
|
||||
return <footer className="timeline"><div className="timeline-label"><small>TEMPORAL INDEX</small><b>TIMELINE</b><button onClick={onEdit}>{range ? `${range.start} — ${range.end}` : `${items.length} DATED ITEMS · AUTO`}</button></div><div className="timeline-track"><div className="axis"/>{ticks.map((tick, index) => <span className="year" key={`${tick.value}:${index}`} style={{ left: `${timelinePositionPercent(new Date(tick.value).toISOString(), { start, end })}%` }}>{tick.label}</span>)}{items.map((item, i) => <button key={item.id} data-marker-id={item.id} className={`marker ${item.kind} ${item.evidenceId === selected || item.documentId === selected ? 'selected' : ''}`} style={{ left: `${position(item.date)}%`, top: i % 2 ? 12 : 31 }} onClick={() => onSelect(item)} title={`${item.date.slice(0, 10)} — ${item.label}`}><i/></button>)}</div><div className="timeline-key"><span><i/> SOURCE</span><span className="amber"><i/> SELECTED</span></div></footer>
|
||||
return <footer className="timeline"><div className="timeline-label"><small>TEMPORAL INDEX</small><b>TIMELINE</b><button onClick={onEdit}>{range ? `${range.start} — ${range.end}` : `${items.length} DATED ITEMS · AUTO`}</button></div><div className="timeline-track"><div className="axis"/>{ticks.map((tick, index) => <span className="year" key={`${tick.value}:${index}`} style={{ left: `${timelinePositionPercent(new Date(tick.value).toISOString(), { start, end })}%` }}>{tick.label}</span>)}{items.map((item, i) => <button key={item.id} data-marker-id={item.id} className={`marker ${item.kind} ${item.exhibitId === selected ? 'selected' : ''}`} style={{ left: `${position(item.date)}%`, top: i % 2 ? 12 : 31 }} onClick={() => onSelect(item)} title={`${item.date.slice(0, 10)} — ${item.label}`}><i/></button>)}</div><div className="timeline-key"><span><i/> SOURCE</span><span className="amber"><i/> SELECTED</span></div></footer>
|
||||
}
|
||||
|
||||
function localDateTime(value?: string) {
|
||||
@@ -866,7 +855,7 @@ function ThreadEditor({ connection, sourceName, targetName, isNew, onClose, onSa
|
||||
</form></div>
|
||||
}
|
||||
|
||||
function BriefPanel({ brief, parties, recentlyCreatedExhibitId, canEdit, onClose, onEdit, onClassify, onNewParty, onLocate, onEditParty }: { brief: LevelBrief; parties: Evidence[]; recentlyCreatedExhibitId: string | null; canEdit: boolean; onClose: () => void; onEdit: () => void; onClassify: (id: string, kind: PartyKind) => void; onNewParty: () => void; onLocate: (id: string) => void; onEditParty: (id: string) => void }) {
|
||||
function BriefPanel({ brief, parties, recentlyCreatedExhibitId, canEdit, onClose, onEdit, onClassify, onNewParty, onLocate, onEditParty }: { brief: LevelBrief; parties: PartyExhibit[]; recentlyCreatedExhibitId: string | null; canEdit: boolean; onClose: () => void; onEdit: () => void; onClassify: (id: string, kind: PartyKind) => void; onNewParty: () => void; onLocate: (id: string) => void; onEditParty: (id: string) => void }) {
|
||||
const [minimized, setMinimized] = useState(false)
|
||||
const partyById = new Map(parties.map(party => [party.id, party]))
|
||||
const unresolved = brief.concepts.filter(concept => !concept.resolvedPartyExhibitId).length
|
||||
@@ -895,16 +884,16 @@ function BriefEditor({ brief, onClose, onSave }: { brief: LevelBrief; onClose: (
|
||||
</form></div>
|
||||
}
|
||||
|
||||
function PartyEditor({ party, evidence, documents, creating = false, onClose, onSave }: { party: Evidence; evidence: Evidence[]; documents: CaseDocument[]; creating?: boolean; onClose: () => void; onSave: (party: Evidence) => void }) {
|
||||
function PartyEditor({ party, exhibits, relations, creating = false, onClose, onSave }: { party: PartyExhibit; exhibits: Exhibit[]; relations: ExhibitRelation[]; creating?: boolean; onClose: () => void; onSave: (party: PartyExhibit, related: string[]) => void }) {
|
||||
const [name, setName] = useState(party.title)
|
||||
const [summary, setSummary] = useState(party.content)
|
||||
const [partyKind, setPartyKind] = useState<PartyKind>(party.partyKind || 'person')
|
||||
const [partyKind, setPartyKind] = useState<PartyKind>(party.partyKind)
|
||||
const [organizationKind, setOrganizationKind] = useState<OrganizationKind>(party.organizationKind || 'business')
|
||||
const [aliases, setAliases] = useState((party.aliases || []).join('\n'))
|
||||
const [related, setRelated] = useState(party.relatedEvidenceIds || [])
|
||||
const candidates = [...evidence.filter(item => item.id !== party.id && item.type !== 'party').map(item => ({ id: item.id, title: item.title, kind: item.type.toUpperCase() })), ...documents.map(item => ({ id: item.id, title: item.title, kind: item.fileType.toUpperCase() }))]
|
||||
const [aliases, setAliases] = useState(party.aliases.join('\n'))
|
||||
const [related, setRelated] = useState(relations.filter(relation => relation.type === 'concerns' && relation.fromExhibitId === party.id).map(relation => relation.toExhibitId))
|
||||
const candidates = exhibits.filter(item => item.id !== party.id && item.type !== 'party').map(item => ({ id: item.id, title: item.title, kind: item.type === 'document' ? item.fileType.toUpperCase() : item.type.toUpperCase() }))
|
||||
const toggle = (id: string) => setRelated(current => current.includes(id) ? current.filter(item => item !== id) : [...current, id])
|
||||
return <div className="modal-shade"><form className="window folder-editor party-editor" onSubmit={submit => { submit.preventDefault(); onSave({ ...party, partyKind, title: name.trim(), content: summary.trim(), organizationKind: partyKind === 'organization' ? organizationKind : undefined, aliases: aliases.split('\n').map(item => item.trim()).filter(Boolean), relatedEvidenceIds: related }) }}>
|
||||
return <div className="modal-shade"><form className="window folder-editor party-editor" onSubmit={submit => { submit.preventDefault(); onSave({ ...party, partyKind, title: name.trim(), content: summary.trim(), organizationKind: partyKind === 'organization' ? organizationKind : undefined, aliases: aliases.split('\n').map(item => item.trim()).filter(Boolean) }, related) }}>
|
||||
<header>{partyKind === 'person' ? <UserRound size={16}/> : <Building2 size={16}/>}<b>{creating ? 'Create party dossier' : `Edit ${partyKind} dossier`}</b><span/><button type="button" aria-label="Close party editor" onClick={onClose}><X size={14}/></button></header>
|
||||
<div className="folder-editor-body"><small>PARTY EXHIBIT · {partyKind.toUpperCase()}</small>
|
||||
{creating && <label className="field"><span>PARTY TYPE</span><select aria-label="Party type" value={partyKind} onChange={event => setPartyKind(event.target.value as PartyKind)}><option value="person">Person</option><option value="organization">Organization</option></select></label>}
|
||||
@@ -919,14 +908,14 @@ function PartyEditor({ party, evidence, documents, creating = false, onClose, on
|
||||
</form></div>
|
||||
}
|
||||
|
||||
function FolderEditor({ folder, memberIds, documents, canManageContents, onClose, onSave }: { folder: Evidence; memberIds: string[]; documents: CaseDocument[]; canManageContents: boolean; onClose: () => void; onSave: (folder: Evidence, members: string[]) => void }) {
|
||||
function FolderEditor({ folder, memberIds, documents, canManageContents, onClose, onSave }: { folder: FolderExhibit; memberIds: string[]; documents: CaseDocument[]; canManageContents: boolean; onClose: () => void; onSave: (folder: FolderExhibit, members: string[]) => void }) {
|
||||
const [title, setTitle] = useState(folder.title)
|
||||
const [content, setContent] = useState(folder.content)
|
||||
const [members, setMembers] = useState(memberIds)
|
||||
const toggleMember = (documentId: string) => setMembers(current => current.includes(documentId) ? current.filter(id => id !== documentId) : [...current, documentId])
|
||||
const submit = (event: React.FormEvent) => {
|
||||
event.preventDefault()
|
||||
onSave({ ...folder, title: title.trim() || 'UNTITLED EVIDENCE FOLDER', content: content.trim(), containedDocumentIds: members }, members)
|
||||
onSave({ ...folder, title: title.trim() || 'UNTITLED EVIDENCE FOLDER', content: content.trim() }, members)
|
||||
}
|
||||
return <div className="modal-shade"><form className="window folder-editor" onSubmit={submit}>
|
||||
<header><FolderOpen size={16}/><b>Edit evidence folder</b><span/><button type="button" aria-label="Close folder editor" onClick={onClose}><X size={14}/></button></header>
|
||||
@@ -938,7 +927,7 @@ function FolderEditor({ folder, memberIds, documents, canManageContents, onClose
|
||||
<div className="folder-members">
|
||||
{documents.map(document => { const included = members.includes(document.id); return <div className={`folder-member ${included ? 'included' : ''}`} key={document.id}>
|
||||
<label><input type="checkbox" disabled={!canManageContents} checked={included} onChange={() => toggleMember(document.id)}/><FileText size={16}/><span><b>{document.title}</b><small>{document.fileType.replaceAll('_', ' ').toUpperCase()}</small></span></label>
|
||||
<span className="folder-member-date">{(document.publishedAt || document.date)?.slice(0, 10) || 'UNDATED'}</span>
|
||||
<span className="folder-member-date">{document.publishedAt?.slice(0, 10) || 'UNDATED'}</span>
|
||||
</div> })}
|
||||
</div>
|
||||
<p className="folder-editor-note">The folder owns this text and its containment relationships. Publication time and other metadata belong to the individual files.</p>
|
||||
@@ -947,20 +936,17 @@ function FolderEditor({ folder, memberIds, documents, canManageContents, onClose
|
||||
</form></div>
|
||||
}
|
||||
|
||||
function EventEditor({ event, evidence, documents, onClose, onSave }: { event: Evidence; evidence: Evidence[]; documents: CaseDocument[]; onClose: () => void; onSave: (event: Evidence) => void }) {
|
||||
function EventEditor({ event, exhibits, relations, onClose, onSave }: { event: EventExhibit; exhibits: Exhibit[]; relations: ExhibitRelation[]; onClose: () => void; onSave: (event: EventExhibit, supports: string[]) => void }) {
|
||||
const [title, setTitle] = useState(event.title)
|
||||
const [narrative, setNarrative] = useState(event.content)
|
||||
const [occurredAt, setOccurredAt] = useState(localDateTime(event.eventDate))
|
||||
const [supports, setSupports] = useState(event.supportingEvidenceIds || [])
|
||||
const candidates = [
|
||||
...evidence.filter(item => item.id !== event.id && item.type !== 'event').map(item => ({ id: item.id, title: item.title, kind: item.type.toUpperCase() })),
|
||||
...documents.map(document => ({ id: document.id, title: document.title, kind: document.fileType.replaceAll('_', ' ').toUpperCase() })),
|
||||
]
|
||||
const [supports, setSupports] = useState(relations.filter(relation => relation.type === 'supports' && relation.fromExhibitId === event.id).map(relation => relation.toExhibitId))
|
||||
const candidates = exhibits.filter(item => item.id !== event.id && item.type !== 'event').map(item => ({ id: item.id, title: item.title, kind: item.type === 'document' ? item.fileType.replaceAll('_', ' ').toUpperCase() : item.type.toUpperCase() }))
|
||||
const toggle = (id: string) => setSupports(current => current.includes(id) ? current.filter(item => item !== id) : [...current, id])
|
||||
const submit = (submitEvent: React.FormEvent) => {
|
||||
submitEvent.preventDefault()
|
||||
const eventDate = occurredAt ? new Date(occurredAt).toISOString() : undefined
|
||||
onSave({ ...event, title: title.trim() || 'UNTITLED EVENT', content: narrative.trim() || 'Something happened.', eventDate, supportingEvidenceIds: supports })
|
||||
onSave({ ...event, title: title.trim() || 'UNTITLED EVENT', content: narrative.trim() || 'Something happened.', eventDate }, supports)
|
||||
}
|
||||
return <div className="modal-shade"><form className="window folder-editor event-editor" onSubmit={submit}>
|
||||
<header><CalendarClock size={16}/><b>Edit reconstructed event</b><span/><button type="button" aria-label="Close event editor" onClick={onClose}><X size={14}/></button></header>
|
||||
@@ -983,12 +969,12 @@ function EventEditor({ event, evidence, documents, onClose, onSave }: { event: E
|
||||
function FileEditor({ document, onClose, onSave }: { document: CaseDocument; onClose: () => void; onSave: (document: CaseDocument) => void }) {
|
||||
const [title, setTitle] = useState(document.title)
|
||||
const [fileType, setFileType] = useState<SourceFileType>(document.fileType)
|
||||
const [publishedTime, setPublishedTime] = useState(localDateTime(document.publishedAt || document.date))
|
||||
const [publishedTime, setPublishedTime] = useState(localDateTime(document.publishedAt))
|
||||
const [metadata, setMetadata] = useState(() => Object.entries(document.metadata).map(([key, value]) => ({ id: uid('metadata'), key, value })))
|
||||
const submit = (event: React.FormEvent) => {
|
||||
event.preventDefault()
|
||||
const publishedAt = publishedTime ? new Date(publishedTime).toISOString() : undefined
|
||||
onSave({ ...document, title: title.trim() || document.fileName || 'UNTITLED FILE', fileType, publishedAt, date: publishedAt?.slice(0, 10) || '', metadata: Object.fromEntries(metadata.filter(row => row.key.trim()).map(row => [row.key.trim(), row.value])) })
|
||||
onSave({ ...document, title: title.trim() || document.fileName || 'UNTITLED FILE', fileType, publishedAt, metadata: Object.fromEntries(metadata.filter(row => row.key.trim()).map(row => [row.key.trim(), row.value])) })
|
||||
}
|
||||
return <div className="modal-shade"><form className="window file-editor" onSubmit={submit}>
|
||||
<header><ImageIcon size={16}/><b>Edit source-file metadata</b><span/><button type="button" aria-label="Close file editor" onClick={onClose}><X size={14}/></button></header>
|
||||
@@ -1019,8 +1005,8 @@ function DocumentWindow({ doc, onClose, onExtract, extracted }: { doc: CaseDocum
|
||||
return <section className={`window document-window ${minimized ? 'minimized' : ''}`} style={{ left: pos.x, top: pos.y }}>
|
||||
<header onPointerDown={startDrag} onPointerMove={e => drag.current && setPos({ x: drag.current.px + e.clientX - drag.current.x, y: drag.current.py + e.clientY - drag.current.y })} onPointerUp={() => { drag.current = null }} onDoubleClick={() => setMinimized(v => !v)}><FileText size={15}/><b>{doc.title}</b><span/><button type="button" aria-label={minimized ? 'Restore document' : 'Minimize document'} title={minimized ? 'Restore' : 'Minimize'} onPointerDown={e => e.stopPropagation()} onClick={() => setMinimized(v => !v)}>{minimized ? <Plus size={14}/> : <Minus size={14}/>}</button><button type="button" aria-label="Close document" title="Close" onPointerDown={e => e.stopPropagation()} onClick={onClose}><X size={14}/></button></header>
|
||||
{!minimized && <><nav>FILE EDIT EVIDENCE VIEW</nav>
|
||||
<div className={`paper ${doc.assetId ? 'asset-paper' : ''}`}><div className="paper-meta"><span>GLITCH UNIVERSITY ARCHIVE</span><b>{doc.kind}</b></div>{doc.assetId ? <DocumentAsset doc={doc}/> : doc.body.map((line, i) => <p key={i}>{line}</p>)}{doc.regions.length > 0 && <div className="extracts">{doc.regions.map(r => <button key={r.id} className={extracted.includes(r.id) ? 'done' : ''} onClick={() => onExtract(r.id)}><Network size={15}/>{extracted.includes(r.id) ? 'LOCATE ON BOARD' : r.label}</button>)}</div>}</div>
|
||||
<footer><span>ARCHIVE ITEM · {doc.date}</span><span>PROVENANCE LOCKED</span></footer></>}
|
||||
<div className={`paper ${doc.assetId ? 'asset-paper' : ''}`}><div className="paper-meta"><span>GLITCH UNIVERSITY ARCHIVE</span><b>{documentWidget(doc.fileType).label}</b></div>{doc.assetId ? <DocumentAsset doc={doc}/> : doc.body.map((line, i) => <p key={i}>{line}</p>)}{doc.regions.length > 0 && <div className="extracts">{doc.regions.map(r => <button key={r.id} className={extracted.includes(r.id) ? 'done' : ''} onClick={() => onExtract(r.id)}><Network size={15}/>{extracted.includes(r.id) ? 'LOCATE ON BOARD' : r.label}</button>)}</div>}</div>
|
||||
<footer><span>ARCHIVE ITEM · {doc.publishedAt?.slice(0, 10) || 'UNDATED'}</span><span>PROVENANCE LOCKED</span></footer></>}
|
||||
</section>
|
||||
}
|
||||
|
||||
|
||||
+37
-32
@@ -1,5 +1,5 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import type { CaseState, Evidence, WidgetRelation } from './types'
|
||||
import type { CaseState, ExhibitRelation, FolderExhibit } from './types'
|
||||
import {
|
||||
MAX_BOARD_ZOOM,
|
||||
MIN_BOARD_ZOOM,
|
||||
@@ -49,7 +49,7 @@ describe('red thread geometry', () => {
|
||||
})
|
||||
})
|
||||
|
||||
const folder: Evidence = {
|
||||
const folder: FolderExhibit = {
|
||||
id: 'folder-1',
|
||||
type: 'folder',
|
||||
title: 'Folder',
|
||||
@@ -57,7 +57,11 @@ const folder: Evidence = {
|
||||
x: 200,
|
||||
y: 300,
|
||||
width: 260,
|
||||
config: { open: false },
|
||||
height: 166,
|
||||
rotation: 0,
|
||||
zIndex: 1,
|
||||
hidden: false,
|
||||
isOpen: false,
|
||||
}
|
||||
|
||||
const state: CaseState = {
|
||||
@@ -65,11 +69,12 @@ const state: CaseState = {
|
||||
id: 'test-level',
|
||||
title: 'Test',
|
||||
subtitle: '',
|
||||
documents: [],
|
||||
evidence: [folder],
|
||||
exhibits: [folder],
|
||||
relations: [],
|
||||
connections: [],
|
||||
viewport: { x: 10, y: 20, zoom: 0.5 },
|
||||
views: [],
|
||||
revision: 0,
|
||||
}
|
||||
|
||||
describe('board coordinate math', () => {
|
||||
@@ -109,10 +114,10 @@ describe('board coordinate math', () => {
|
||||
it('places new exhibits in deterministic open slots', () => {
|
||||
const preferred = { x: 500, y: 400 }
|
||||
expect(nextOpenBoardPosition([], preferred, { width: 280 })).toEqual(preferred)
|
||||
expect(nextOpenBoardPosition([{ x: 500, y: 400, width: 280 }], preferred, { width: 280 })).toEqual({ x: 826, y: 400 })
|
||||
expect(nextOpenBoardPosition([{ x: 500, y: 400, width: 280, height: 160 }], preferred, { width: 280 })).toEqual({ x: 826, y: 400 })
|
||||
expect(nextOpenBoardPosition([
|
||||
{ x: 500, y: 400, width: 280 },
|
||||
{ x: 826, y: 400, width: 280 },
|
||||
{ x: 500, y: 400, width: 280, height: 160 },
|
||||
{ x: 826, y: 400, width: 280, height: 160 },
|
||||
], preferred, { width: 280 })).toEqual({ x: 174, y: 400 })
|
||||
})
|
||||
})
|
||||
@@ -147,25 +152,24 @@ describe('timeline projection', () => {
|
||||
})
|
||||
|
||||
describe('folder domain behavior', () => {
|
||||
const relations: WidgetRelation[] = [
|
||||
{ id: 'later', fromWidgetId: folder.id, toWidgetId: 'doc-2', type: 'contains', sortOrder: 2 },
|
||||
{ id: 'other', fromWidgetId: 'folder-2', toWidgetId: 'doc-x', type: 'contains', sortOrder: 0 },
|
||||
{ id: 'first', fromWidgetId: folder.id, toWidgetId: 'doc-1', type: 'contains', sortOrder: 0 },
|
||||
const relations: ExhibitRelation[] = [
|
||||
{ id: 'later', fromExhibitId: folder.id, toExhibitId: 'doc-2', type: 'contains', sortOrder: 2 },
|
||||
{ id: 'other', fromExhibitId: 'folder-2', toExhibitId: 'doc-x', type: 'contains', sortOrder: 0 },
|
||||
{ id: 'first', fromExhibitId: folder.id, toExhibitId: 'doc-1', type: 'contains', sortOrder: 0 },
|
||||
]
|
||||
|
||||
it('orders and scopes contained documents by their normalized relations', () => {
|
||||
expect(containedIds({ ...state, relations }, folder.id)).toEqual(['doc-1', 'doc-2'])
|
||||
})
|
||||
|
||||
it('only treats an explicit boolean true as open', () => {
|
||||
it('stores the open state explicitly on the folder exhibit', () => {
|
||||
expect(folderIsOpen(folder)).toBe(false)
|
||||
expect(folderIsOpen({ ...folder, config: { open: true } })).toBe(true)
|
||||
expect(folderIsOpen({ ...folder, config: { open: 'true' } })).toBe(false)
|
||||
expect(folderIsOpen({ ...folder, isOpen: true })).toBe(true)
|
||||
})
|
||||
|
||||
it('retains a configured expanded file position', () => {
|
||||
const relation = { ...relations[0], config: { x: 720, y: 415 } }
|
||||
expect(relationPosition({ ...state, relations }, relation)).toEqual({ x: 720, y: 415 })
|
||||
const document = { id: 'doc-2', type: 'document' as const, title: 'Source', x: 720, y: 415, width: 174, height: 145, rotation: 0, zIndex: 2, hidden: false, body: [], regions: [], fileType: 'text' as const, metadata: {} }
|
||||
expect(relationPosition({ ...state, exhibits: [...state.exhibits, document], relations }, relations[0])).toEqual({ x: 720, y: 415 })
|
||||
})
|
||||
|
||||
it('derives a deterministic position when a relation has not been moved', () => {
|
||||
@@ -175,38 +179,39 @@ describe('folder domain behavior', () => {
|
||||
|
||||
it('normalizes legacy containment without changing source ownership', () => {
|
||||
const legacy = {
|
||||
...state,
|
||||
id: state.id, title: state.title, subtitle: state.subtitle, viewport: state.viewport, brief: state.brief,
|
||||
documents: [{ id: 'doc-1', title: 'Image', kind: 'IMAGE', date: '', body: [], regions: [], mimeType: 'image/png' }],
|
||||
evidence: [{ ...folder, type: 'evidence', sourceDocumentId: 'doc-1', containedDocumentIds: ['doc-1'], config: undefined }],
|
||||
relations: undefined,
|
||||
} as unknown as CaseState
|
||||
}
|
||||
const normalized = normalizeCase(legacy)
|
||||
expect(normalized.evidence[0]).toMatchObject({ type: 'folder', config: {}, containedDocumentIds: ['doc-1'] })
|
||||
expect(normalized.documents[0]).toMatchObject({ fileType: 'image', metadata: {} })
|
||||
expect(normalized.exhibits.find(exhibit => exhibit.type === 'folder')).toMatchObject({ type: 'folder', isOpen: false })
|
||||
expect(normalized.exhibits.find(exhibit => exhibit.type === 'document')).toMatchObject({ fileType: 'image', metadata: {} })
|
||||
expect(normalized.relations).toHaveLength(1)
|
||||
})
|
||||
})
|
||||
|
||||
describe('exhibit disposal', () => {
|
||||
it('removes an exhibit and every graph reference while retaining source documents', () => {
|
||||
it('removes an exhibit and every graph reference while retaining unrelated exhibits', () => {
|
||||
const note = { ...folder, id: 'note-1', type: 'note' as const, title: 'Working note' }
|
||||
const event = { ...folder, id: 'event-1', type: 'event' as const, supportingEvidenceIds: [note.id, 'doc-1'] }
|
||||
const party = { ...folder, id: 'party-1', type: 'party' as const, relatedEvidenceIds: [note.id] }
|
||||
const event = { ...folder, id: 'event-1', type: 'event' as const, eventDate: undefined }
|
||||
const party = { ...folder, id: 'party-1', type: 'party' as const, partyKind: 'person' as const, aliases: [] }
|
||||
const document = { id: 'doc-1', type: 'document' as const, title: 'Source', x: 20, y: 20, width: 174, height: 145, rotation: 0, zIndex: 2, hidden: false, body: [], regions: [], fileType: 'text' as const, metadata: {} }
|
||||
const discarded = discardExhibit({
|
||||
...state,
|
||||
documents: [{ id: 'doc-1', title: 'Source', kind: 'TEXT', date: '', body: [], regions: [], fileType: 'text', metadata: {} }],
|
||||
evidence: [folder, note, event, party],
|
||||
relations: [{ id: 'nested', fromWidgetId: folder.id, toWidgetId: note.id, type: 'contains' }],
|
||||
connections: [{ id: 'thread', fromEvidenceId: note.id, toEvidenceId: party.id }],
|
||||
exhibits: [folder, document, note, event, party],
|
||||
relations: [
|
||||
{ id: 'supports', fromExhibitId: event.id, toExhibitId: note.id, type: 'supports', sortOrder: 0 },
|
||||
{ id: 'concerns', fromExhibitId: party.id, toExhibitId: note.id, type: 'concerns', sortOrder: 0 },
|
||||
],
|
||||
connections: [{ id: 'thread', fromExhibitId: note.id, toExhibitId: party.id }],
|
||||
brief: { body: '', concepts: [{ id: 'concept-1', label: 'Unknown', context: '', resolvedPartyExhibitId: note.id }] },
|
||||
}, note.id)
|
||||
|
||||
expect(discarded.documents).toHaveLength(1)
|
||||
expect(discarded.evidence.map(exhibit => exhibit.id)).not.toContain(note.id)
|
||||
expect(discarded.exhibits).toContainEqual(document)
|
||||
expect(discarded.exhibits.map(exhibit => exhibit.id)).not.toContain(note.id)
|
||||
expect(discarded.relations).toEqual([])
|
||||
expect(discarded.connections).toEqual([])
|
||||
expect(discarded.evidence.find(exhibit => exhibit.id === event.id)?.supportingEvidenceIds).toEqual(['doc-1'])
|
||||
expect(discarded.evidence.find(exhibit => exhibit.id === party.id)?.relatedEvidenceIds).toEqual([])
|
||||
expect(discarded.brief.concepts[0].resolvedPartyExhibitId).toBeUndefined()
|
||||
})
|
||||
})
|
||||
|
||||
+100
-49
@@ -1,4 +1,4 @@
|
||||
import type { CaseState, Evidence, TimelineRange, Viewport, WidgetRelation } from './types'
|
||||
import type { BoardView, CaseState, Connection, Exhibit, ExhibitRelation, FolderExhibit, OrganizationKind, SourceFileType, TimelineRange, Viewport } from './types'
|
||||
|
||||
export interface BoardPoint { x: number; y: number }
|
||||
|
||||
@@ -99,7 +99,7 @@ export function moveBoardPoint(origin: { x: number; y: number }, screenDelta: {
|
||||
}
|
||||
|
||||
export function nextOpenBoardPosition(
|
||||
evidence: Pick<Evidence, 'x' | 'y' | 'width'>[],
|
||||
evidence: Pick<Exhibit, 'x' | 'y' | 'width' | 'height'>[],
|
||||
preferred: { x: number; y: number },
|
||||
size: { width: number; height?: number },
|
||||
bounds = { width: 2400, height: 1500 },
|
||||
@@ -108,7 +108,7 @@ export function nextOpenBoardPosition(
|
||||
const gap = 28
|
||||
const overlaps = (x: number, y: number) => evidence.some(item =>
|
||||
x < item.x + item.width + gap && x + size.width + gap > item.x &&
|
||||
y < item.y + 160 + gap && y + height + gap > item.y)
|
||||
y < item.y + item.height + gap && y + height + gap > item.y)
|
||||
const xStep = size.width + 46
|
||||
const yStep = height + 46
|
||||
for (let row = 0; row < 7; row += 1) {
|
||||
@@ -158,40 +158,33 @@ export function timelinePositionPercent(date: string, range: Pick<ReturnType<typ
|
||||
|
||||
export function containedIds(state: CaseState, widgetId: string) {
|
||||
return state.relations
|
||||
.filter(relation => relation.type === 'contains' && relation.fromWidgetId === widgetId)
|
||||
.filter(relation => relation.type === 'contains' && relation.fromExhibitId === widgetId)
|
||||
.sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))
|
||||
.map(relation => relation.toWidgetId)
|
||||
.map(relation => relation.toExhibitId)
|
||||
}
|
||||
|
||||
export function folderIsOpen(folder: Evidence) {
|
||||
return folder.config?.open === true
|
||||
export function folderIsOpen(folder: FolderExhibit) {
|
||||
return folder.isOpen
|
||||
}
|
||||
|
||||
export function relationPosition(state: CaseState, relation: WidgetRelation) {
|
||||
const folder = state.evidence.find(widget => widget.id === relation.fromWidgetId)
|
||||
export function relationPosition(state: CaseState, relation: ExhibitRelation) {
|
||||
const target = state.exhibits.find(exhibit => exhibit.id === relation.toExhibitId)
|
||||
if (target) return { x: target.x, y: target.y }
|
||||
const folder = state.exhibits.find(exhibit => exhibit.id === relation.fromExhibitId)
|
||||
const order = relation.sortOrder || 0
|
||||
const configuredX = Number(relation.config?.x)
|
||||
const configuredY = Number(relation.config?.y)
|
||||
return {
|
||||
x: Number.isFinite(configuredX) ? configuredX : (folder?.x || 100) + (folder?.width || 240) + 90 + (order % 3) * 205,
|
||||
y: Number.isFinite(configuredY) ? configuredY : (folder?.y || 100) - 30 + Math.floor(order / 3) * 185,
|
||||
x: (folder?.x || 100) + (folder?.width || 240) + 90 + (order % 3) * 205,
|
||||
y: (folder?.y || 100) - 30 + Math.floor(order / 3) * 185,
|
||||
}
|
||||
}
|
||||
|
||||
export function discardExhibit(state: CaseState, exhibitId: string): CaseState {
|
||||
if (!state.evidence.some(exhibit => exhibit.id === exhibitId)) return state
|
||||
if (!state.exhibits.some(exhibit => exhibit.id === exhibitId)) return state
|
||||
return {
|
||||
...state,
|
||||
evidence: state.evidence
|
||||
.filter(exhibit => exhibit.id !== exhibitId)
|
||||
.map(exhibit => ({
|
||||
...exhibit,
|
||||
containedDocumentIds: exhibit.containedDocumentIds?.filter(id => id !== exhibitId),
|
||||
supportingEvidenceIds: exhibit.supportingEvidenceIds?.filter(id => id !== exhibitId),
|
||||
relatedEvidenceIds: exhibit.relatedEvidenceIds?.filter(id => id !== exhibitId),
|
||||
})),
|
||||
relations: state.relations.filter(relation => relation.fromWidgetId !== exhibitId && relation.toWidgetId !== exhibitId),
|
||||
connections: state.connections.filter(connection => connection.fromEvidenceId !== exhibitId && connection.toEvidenceId !== exhibitId),
|
||||
exhibits: state.exhibits.filter(exhibit => exhibit.id !== exhibitId),
|
||||
relations: state.relations.filter(relation => relation.fromExhibitId !== exhibitId && relation.toExhibitId !== exhibitId),
|
||||
connections: state.connections.filter(connection => connection.fromExhibitId !== exhibitId && connection.toExhibitId !== exhibitId),
|
||||
brief: {
|
||||
...state.brief,
|
||||
concepts: state.brief.concepts.map(concept => concept.resolvedPartyExhibitId === exhibitId
|
||||
@@ -201,30 +194,88 @@ export function discardExhibit(state: CaseState, exhibitId: string): CaseState {
|
||||
}
|
||||
}
|
||||
|
||||
export function normalizeCase(state: CaseState): CaseState {
|
||||
const relations = Array.isArray(state.relations)
|
||||
? state.relations
|
||||
: state.evidence.flatMap(widget => (widget.containedDocumentIds || (widget.sourceDocumentId ? [widget.sourceDocumentId] : [])).map((documentId, index) => ({
|
||||
id: `contains:${widget.id}:${documentId}`,
|
||||
fromWidgetId: widget.id,
|
||||
toWidgetId: documentId,
|
||||
type: 'contains',
|
||||
sortOrder: index,
|
||||
})))
|
||||
const normalized = { ...state, relations }
|
||||
return {
|
||||
...normalized,
|
||||
brief: state.brief || { body: '', concepts: [] },
|
||||
documents: state.documents.map(document => ({
|
||||
...document,
|
||||
fileType: document.fileType || (document.mimeType?.startsWith('image/') ? 'image' : document.mimeType === 'application/pdf' ? 'pdf' : 'file'),
|
||||
metadata: document.metadata || {},
|
||||
})),
|
||||
evidence: state.evidence.map(widget => ({
|
||||
...widget,
|
||||
type: widget.type === 'evidence' ? 'folder' : widget.type,
|
||||
config: widget.config || {},
|
||||
containedDocumentIds: containedIds(normalized, widget.id),
|
||||
})),
|
||||
export function defaultTimelineView(range?: TimelineRange | null): BoardView {
|
||||
return { id: crypto.randomUUID(), type: 'timeline', placement: { mode: 'docked', dockEdge: 'bottom', size: 112 }, visible: true, zIndex: 0,
|
||||
rangeMode: range ? 'fixed' : 'auto', range: range || undefined }
|
||||
}
|
||||
|
||||
type LegacyCaseState = {
|
||||
id: string
|
||||
title: string
|
||||
subtitle: string
|
||||
viewport: Viewport
|
||||
brief?: CaseState['brief']
|
||||
updatedAt?: string
|
||||
levelStatus?: string
|
||||
sourceTemplateVersionId?: string
|
||||
editingAllowed?: boolean
|
||||
revision?: number
|
||||
exhibits?: Exhibit[]
|
||||
views?: BoardView[]
|
||||
documents?: Array<Record<string, unknown>>
|
||||
evidence?: Array<Record<string, unknown>>
|
||||
timelineRange?: TimelineRange | null
|
||||
relations?: Array<Record<string, unknown>>
|
||||
connections?: Array<Record<string, unknown>>
|
||||
}
|
||||
|
||||
function placement(item: Record<string, unknown>, defaults: { width: number; height: number }, index: number) {
|
||||
return { x: Number(item.x ?? 100), y: Number(item.y ?? 100), width: Number(item.width ?? defaults.width), height: Number(item.height ?? defaults.height),
|
||||
rotation: Number(item.rotation ?? 0), zIndex: Number(item.zIndex ?? index), hidden: Boolean(item.hidden) }
|
||||
}
|
||||
|
||||
function sourceFileType(value: unknown, mimeType: unknown): SourceFileType {
|
||||
const allowed: SourceFileType[] = ['image', 'pdf', 'web_capture', 'email', 'article', 'filing', 'price_list', 'text', 'file']
|
||||
if (allowed.includes(value as SourceFileType)) return value as SourceFileType
|
||||
return String(mimeType || '').startsWith('image/') ? 'image' : mimeType === 'application/pdf' ? 'pdf' : 'file'
|
||||
}
|
||||
|
||||
/** Normalizes current API state and upgrades disposable pre-registry browser caches. */
|
||||
export function normalizeCase(input: CaseState | LegacyCaseState): CaseState {
|
||||
const state = input as LegacyCaseState
|
||||
if (Array.isArray(state.exhibits)) {
|
||||
return { id: state.id, title: state.title, subtitle: state.subtitle, viewport: state.viewport,
|
||||
relations: (state.relations || []) as unknown as ExhibitRelation[], connections: (state.connections || []) as unknown as Connection[],
|
||||
revision: Number(state.revision || 0), brief: state.brief || { body: '', concepts: [] },
|
||||
views: Array.isArray(state.views) && state.views.length ? state.views : [defaultTimelineView(state.timelineRange)],
|
||||
exhibits: state.exhibits.map((exhibit, index) => ({ ...exhibit, ...placement(exhibit as unknown as Record<string, unknown>, { width: exhibit.type === 'document' ? 174 : 240, height: exhibit.type === 'document' ? 145 : 160 }, index) })),
|
||||
updatedAt: state.updatedAt, levelStatus: state.levelStatus, sourceTemplateVersionId: state.sourceTemplateVersionId, editingAllowed: state.editingAllowed,
|
||||
}
|
||||
}
|
||||
|
||||
const legacyEvidence = state.evidence || []
|
||||
const legacyRelations = state.relations || []
|
||||
const documentPositions = new Map(legacyRelations.filter(relation => relation.type === 'contains').map(relation => [String(relation.toWidgetId), {
|
||||
x: Number((relation.config as Record<string, unknown> | undefined)?.x ?? 100), y: Number((relation.config as Record<string, unknown> | undefined)?.y ?? 100),
|
||||
}]))
|
||||
const documents: Exhibit[] = (state.documents || []).map((document, index) => ({
|
||||
id: String(document.id), type: 'document', title: String(document.title || ''),
|
||||
...placement({ ...document, ...(documentPositions.get(String(document.id)) || {}) }, { width: 174, height: 145 }, index),
|
||||
publishedAt: String(document.publishedAt || document.date || '') || undefined, capturedAt: String(document.capturedAt || '') || undefined,
|
||||
sourceUri: String(document.sourceUri || '') || undefined, body: Array.isArray(document.body) ? document.body.map(String) : [],
|
||||
regions: Array.isArray(document.regions) ? document.regions as never[] : [], assetId: String(document.assetId || '') || undefined,
|
||||
fileName: String(document.fileName || '') || undefined, mimeType: String(document.mimeType || '') || undefined,
|
||||
fileSize: document.fileSize === undefined ? undefined : Number(document.fileSize),
|
||||
fileType: sourceFileType(document.fileType, document.mimeType),
|
||||
metadata: document.metadata && typeof document.metadata === 'object' ? document.metadata as Record<string, string> : {},
|
||||
} as Exhibit))
|
||||
const evidence: Exhibit[] = legacyEvidence.map((item, index) => {
|
||||
const type = item.type === 'evidence' ? 'folder' : item.type
|
||||
const common = { id: String(item.id), type, title: String(item.title || ''), content: String(item.content || ''), ...placement(item, { width: 240, height: 160 }, documents.length + index) }
|
||||
if (type === 'folder') return { ...common, type: 'folder', isOpen: (item.config as Record<string, unknown> | undefined)?.open === true }
|
||||
if (type === 'event') return { ...common, type: 'event', eventDate: String(item.eventDate || '') || undefined }
|
||||
if (type === 'party') return { ...common, type: 'party', partyKind: item.partyKind === 'organization' ? 'organization' : 'person', organizationKind: item.organizationKind as OrganizationKind | undefined, aliases: Array.isArray(item.aliases) ? item.aliases.map(String) : [] }
|
||||
return { ...common, type: 'note' }
|
||||
})
|
||||
const derivedRelations: ExhibitRelation[] = [
|
||||
...legacyRelations.filter(relation => relation.type === 'contains').map(relation => ({ id: String(relation.id), type: 'contains' as const, fromExhibitId: String(relation.fromWidgetId), toExhibitId: String(relation.toWidgetId), sortOrder: Number(relation.sortOrder || 0) })),
|
||||
...legacyEvidence.flatMap(item => Array.isArray(item.supportingEvidenceIds) ? item.supportingEvidenceIds.map((id, index) => ({ id: `supports:${item.id}:${id}`, type: 'supports' as const, fromExhibitId: String(item.id), toExhibitId: String(id), sortOrder: index })) : []),
|
||||
...legacyEvidence.flatMap(item => Array.isArray(item.relatedEvidenceIds) ? item.relatedEvidenceIds.map((id, index) => ({ id: `concerns:${item.id}:${id}`, type: 'concerns' as const, fromExhibitId: String(item.id), toExhibitId: String(id), sortOrder: index })) : []),
|
||||
...legacyEvidence.flatMap(item => item.sourceDocumentId ? [{ id: `source:${item.id}`, type: 'source' as const, fromExhibitId: String(item.id), toExhibitId: String(item.sourceDocumentId), sourceRegionId: String(item.sourceRegionId || '') || undefined, sortOrder: 0 }] : []),
|
||||
]
|
||||
const connections: Connection[] = (state.connections || []).map(connection => ({ ...connection, id: String(connection.id),
|
||||
fromExhibitId: String(connection.fromExhibitId || connection.fromEvidenceId), toExhibitId: String(connection.toExhibitId || connection.toEvidenceId) } as Connection))
|
||||
return { id: state.id, title: state.title, subtitle: state.subtitle, exhibits: [...documents, ...evidence], relations: derivedRelations, connections,
|
||||
views: [defaultTimelineView(state.timelineRange)], viewport: state.viewport, brief: state.brief || { body: '', concepts: [] }, revision: Number(state.revision || 0),
|
||||
updatedAt: state.updatedAt, levelStatus: state.levelStatus, sourceTemplateVersionId: state.sourceTemplateVersionId, editingAllowed: state.editingAllowed }
|
||||
}
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import type { EvidenceType, SourceFileType } from './types'
|
||||
import type { SourceFileType } from './types'
|
||||
import { documentWidget, documentWidgetRegistry, exhibitWidget, exhibitWidgetRegistry } from './exhibitRegistry'
|
||||
|
||||
describe('frontend exhibit registry', () => {
|
||||
it('registers every API exhibit type and keeps legacy evidence on the folder renderer', () => {
|
||||
const types: EvidenceType[] = ['folder', 'evidence', 'note', 'event', 'party']
|
||||
expect(Object.keys(exhibitWidgetRegistry).sort()).toEqual(types.sort())
|
||||
expect(exhibitWidget('evidence')).toBe(exhibitWidget('folder'))
|
||||
expect(exhibitWidget('event').heading({} as never, [])).toContain('THIS HAPPENED')
|
||||
it('registers every normalized exhibit type', () => {
|
||||
const types = ['folder', 'document', 'note', 'event', 'party'] as const
|
||||
expect(Object.keys(exhibitWidgetRegistry).sort()).toEqual([...types].sort())
|
||||
expect(exhibitWidget('event').heading({} as never, { exhibits: [], relations: [], dispatch: () => {} })).toContain('THIS HAPPENED')
|
||||
})
|
||||
|
||||
it('registers every normalized document type with an explicit renderer', () => {
|
||||
|
||||
+97
-80
@@ -1,118 +1,135 @@
|
||||
import type { ComponentType } from 'react'
|
||||
import { BookOpen, Building2, CalendarClock, FileText, Folder, FolderOpen, Image as ImageIcon, Pencil, UserRound } from 'lucide-react'
|
||||
import type { CaseDocument, Evidence, EvidenceType, SourceFileType } from './types'
|
||||
import { folderIsOpen } from './boardDomain'
|
||||
import type { CaseDocument, DocumentExhibit, Evidence, Exhibit, ExhibitRelation, ExhibitType, SourceFileType, TemporalFact } from './types'
|
||||
|
||||
export type ExhibitWidgetProps = {
|
||||
exhibit: Evidence
|
||||
documents: CaseDocument[]
|
||||
onOpenSource: (id: string) => void
|
||||
onToggleFolder: (id: string) => void
|
||||
onEditFolder: (id: string) => void
|
||||
onEditEvent: (id: string) => void
|
||||
onEditParty: (id: string) => void
|
||||
export type WidgetCommand =
|
||||
| { type: 'open-document'; documentId: string }
|
||||
| { type: 'toggle-folder'; folderId: string }
|
||||
| { type: 'edit-folder'; folderId: string }
|
||||
| { type: 'edit-event'; eventId: string }
|
||||
| { type: 'edit-party'; partyId: string }
|
||||
| { type: 'edit-document'; documentId: string }
|
||||
| { type: 'update-memory-cue'; documentId: string; cue: string }
|
||||
|
||||
export type ExhibitWidgetContext = {
|
||||
exhibits: Exhibit[]
|
||||
relations: ExhibitRelation[]
|
||||
dispatch: (command: WidgetCommand) => void
|
||||
}
|
||||
|
||||
export type ExhibitWidgetProps = { exhibit: Exhibit; context: ExhibitWidgetContext }
|
||||
export type WidgetCapabilities = { movable: boolean; resizable: boolean; connectable: boolean; discardable: boolean; dockable: boolean }
|
||||
export type ConnectionPort = { id: string; x: number; y: number }
|
||||
|
||||
export type ExhibitWidgetDefinition = {
|
||||
visualType: Exclude<EvidenceType, 'evidence'>
|
||||
heading: (exhibit: Evidence, documents: CaseDocument[]) => string
|
||||
connectionPoint: (exhibit: Evidence) => { x: number; y: number }
|
||||
modelKind: 'exhibit'
|
||||
visualType: ExhibitType
|
||||
shell: 'card' | 'document'
|
||||
defaultSize: { width: number; height: number }
|
||||
capabilities: WidgetCapabilities
|
||||
heading: (exhibit: Exhibit, context: ExhibitWidgetContext) => string
|
||||
connectionPorts: (exhibit: Exhibit) => ConnectionPort[]
|
||||
temporalFacts: (exhibit: Exhibit) => TemporalFact[]
|
||||
searchText: (exhibit: Exhibit) => string
|
||||
Component: ComponentType<ExhibitWidgetProps>
|
||||
}
|
||||
|
||||
function FolderWidget({ exhibit, documents, onOpenSource, onToggleFolder, onEditFolder }: ExhibitWidgetProps) {
|
||||
const relationsFrom = (context: ExhibitWidgetContext, exhibitId: string, type: ExhibitRelation['type']) => context.relations
|
||||
.filter(relation => relation.type === type && relation.fromExhibitId === exhibitId)
|
||||
.sort((a, b) => a.sortOrder - b.sortOrder)
|
||||
|
||||
function FolderWidget({ exhibit, context }: ExhibitWidgetProps) {
|
||||
if (exhibit.type !== 'folder') return null
|
||||
const documents = relationsFrom(context, exhibit.id, 'contains').flatMap(relation => {
|
||||
const document = context.exhibits.find(candidate => candidate.id === relation.toExhibitId)
|
||||
return document?.type === 'document' ? [document] : []
|
||||
})
|
||||
return <div className="card-content"><h3>{exhibit.title}</h3><p>{exhibit.content}</p>
|
||||
{!folderIsOpen(exhibit) && <div className="folder-documents">{documents.slice(0, 3).map(document => <button key={document.id} onClick={() => onOpenSource(document.id)} title={document.title}><FileText size={12}/><span>{document.title}</span>{(document.publishedAt || document.date) && <time>{(document.publishedAt || document.date).slice(0, 10)}</time>}</button>)}{documents.length > 3 && <small>+ {documents.length - 3} MORE FILES</small>}</div>}
|
||||
<div className="folder-actions"><button onClick={() => onToggleFolder(exhibit.id)}>{folderIsOpen(exhibit) ? <Folder size={12}/> : <FolderOpen size={12}/>} {folderIsOpen(exhibit) ? 'CLOSE' : 'OPEN'}</button><button onClick={() => onEditFolder(exhibit.id)}><Pencil size={12}/> EDIT</button></div>
|
||||
{!exhibit.isOpen && <div className="folder-documents">{documents.slice(0,3).map(document => <button key={document.id} onClick={() => context.dispatch({ type:'open-document',documentId:document.id })} title={document.title}><FileText size={12}/><span>{document.title}</span>{document.publishedAt && <time>{document.publishedAt.slice(0,10)}</time>}</button>)}{documents.length > 3 && <small>+ {documents.length - 3} MORE FILES</small>}</div>}
|
||||
<div className="folder-actions"><button onClick={() => context.dispatch({ type:'toggle-folder',folderId:exhibit.id })}>{exhibit.isOpen ? <Folder size={12}/> : <FolderOpen size={12}/>} {exhibit.isOpen ? 'CLOSE' : 'OPEN'}</button><button onClick={() => context.dispatch({ type:'edit-folder',folderId:exhibit.id })}><Pencil size={12}/> EDIT</button></div>
|
||||
</div>
|
||||
}
|
||||
|
||||
function StandardWidget({ exhibit, onOpenSource }: ExhibitWidgetProps) {
|
||||
function NoteWidget({ exhibit, context }: ExhibitWidgetProps) {
|
||||
if (exhibit.type !== 'note') return null
|
||||
const source = relationsFrom(context, exhibit.id, 'source')[0]
|
||||
return <div className="card-content"><h3>{exhibit.title}</h3><p>{exhibit.content}</p>
|
||||
{exhibit.eventDate && <time>{exhibit.eventDate.replaceAll('-', ' / ')}</time>}
|
||||
{exhibit.sourceDocumentId && <button onClick={() => onOpenSource(exhibit.sourceDocumentId!)}><BookOpen size={13}/> VIEW SOURCE</button>}
|
||||
{source && <button onClick={() => context.dispatch({ type:'open-document',documentId:source.toExhibitId })}><BookOpen size={13}/> VIEW SOURCE</button>}
|
||||
</div>
|
||||
}
|
||||
|
||||
function EventWidget({ exhibit, onEditEvent }: ExhibitWidgetProps) {
|
||||
const supportCount = exhibit.supportingEvidenceIds?.length || 0
|
||||
function EventWidget({ exhibit, context }: ExhibitWidgetProps) {
|
||||
if (exhibit.type !== 'event') return null
|
||||
const supportCount = relationsFrom(context,exhibit.id,'supports').length
|
||||
return <div className="card-content"><h3>{exhibit.title}</h3><p>{exhibit.content}</p>
|
||||
<time>{exhibit.eventDate ? new Date(exhibit.eventDate).toLocaleString() : 'UNDATED'}</time>
|
||||
<div className="event-actions"><span>{supportCount} SUPPORTING EXHIBIT{supportCount === 1 ? '' : 'S'}</span><button onClick={() => onEditEvent(exhibit.id)}><CalendarClock size={12}/> EDIT EVENT</button></div>
|
||||
<div className="event-actions"><span>{supportCount} SUPPORTING EXHIBIT{supportCount === 1 ? '' : 'S'}</span><button onClick={() => context.dispatch({ type:'edit-event',eventId:exhibit.id })}><CalendarClock size={12}/> EDIT EVENT</button></div>
|
||||
</div>
|
||||
}
|
||||
|
||||
function PartyWidget({ exhibit, onEditParty }: ExhibitWidgetProps) {
|
||||
function PartyWidget({ exhibit, context }: ExhibitWidgetProps) {
|
||||
if (exhibit.type !== 'party') return null
|
||||
const person = exhibit.partyKind === 'person'
|
||||
return <div className="card-content"><div className="party-identity">{person ? <UserRound size={28}/> : <Building2 size={28}/>}<div><h3>{exhibit.title}</h3><small>{person ? 'PERSON' : (exhibit.organizationKind || 'ORGANIZATION').replaceAll('_', ' ').toUpperCase()}</small></div></div>
|
||||
const evidenceCount = relationsFrom(context,exhibit.id,'concerns').length
|
||||
return <div className="card-content"><div className="party-identity">{person ? <UserRound size={28}/> : <Building2 size={28}/>}<div><h3>{exhibit.title}</h3><small>{person ? 'PERSON' : (exhibit.organizationKind || 'ORGANIZATION').replaceAll('_',' ').toUpperCase()}</small></div></div>
|
||||
<p>{exhibit.content || 'No dossier summary yet.'}</p>
|
||||
{(exhibit.aliases?.length || 0) > 0 && <div className="party-aliases">AKA · {exhibit.aliases!.join(' · ')}</div>}
|
||||
<div className="event-actions"><span>{exhibit.relatedEvidenceIds?.length || 0} ASSOCIATED EXHIBITS</span><button onClick={() => onEditParty(exhibit.id)}><Pencil size={12}/> EDIT DOSSIER</button></div>
|
||||
{exhibit.aliases.length > 0 && <div className="party-aliases">AKA · {exhibit.aliases.join(' · ')}</div>}
|
||||
<div className="event-actions"><span>{evidenceCount} ASSOCIATED EXHIBITS</span><button onClick={() => context.dispatch({ type:'edit-party',partyId:exhibit.id })}><Pencil size={12}/> EDIT DOSSIER</button></div>
|
||||
</div>
|
||||
}
|
||||
|
||||
const standardPoint = (exhibit: Evidence) => ({ x: exhibit.x + exhibit.width / 2, y: exhibit.y + 68 })
|
||||
const folderDefinition: ExhibitWidgetDefinition = {
|
||||
visualType: 'folder', heading: (_exhibit, documents) => `EVIDENCE FOLDER / ${documents.length}`,
|
||||
connectionPoint: standardPoint, Component: FolderWidget,
|
||||
function DocumentWidget({ exhibit }: ExhibitWidgetProps) {
|
||||
if (exhibit.type !== 'document') return null
|
||||
return <strong>{exhibit.title}</strong>
|
||||
}
|
||||
|
||||
export const exhibitWidgetRegistry: Record<EvidenceType, ExhibitWidgetDefinition> = {
|
||||
folder: folderDefinition,
|
||||
evidence: folderDefinition,
|
||||
note: { visualType: 'note', heading: () => 'INVESTIGATOR / NOTE', connectionPoint: exhibit => ({ x: exhibit.x + 54, y: exhibit.y + 12 }), Component: StandardWidget },
|
||||
event: { visualType: 'event', heading: () => 'EVENT / THIS HAPPENED', connectionPoint: standardPoint, Component: EventWidget },
|
||||
party: { visualType: 'party', heading: exhibit => exhibit.partyKind === 'person' ? 'PARTY / PERSON DOSSIER' : 'PARTY / ORGANIZATION DOSSIER', connectionPoint: standardPoint, Component: PartyWidget },
|
||||
const standardPorts = (exhibit: Exhibit) => [{ id:'centre',x:exhibit.x + exhibit.width / 2,y:exhibit.y + exhibit.height / 2 }]
|
||||
const notePorts = (exhibit: Exhibit) => [{ id:'knot',x:exhibit.x + exhibit.width / 2,y:exhibit.y + 12 }]
|
||||
const standardCapabilities: WidgetCapabilities = { movable:true,resizable:false,connectable:true,discardable:true,dockable:false }
|
||||
const searchable = (exhibit: Exhibit) => exhibit.type === 'document'
|
||||
? [exhibit.title,...exhibit.body,...Object.values(exhibit.metadata)].join('\n').toLocaleLowerCase()
|
||||
: [exhibit.title,exhibit.content].join('\n').toLocaleLowerCase()
|
||||
|
||||
export const exhibitWidgetRegistry: Record<ExhibitType, ExhibitWidgetDefinition> = {
|
||||
folder: { modelKind:'exhibit',visualType:'folder',shell:'card',defaultSize:{width:260,height:166},capabilities:standardCapabilities,
|
||||
heading:(exhibit,context) => `EVIDENCE FOLDER / ${relationsFrom(context,exhibit.id,'contains').length}`,connectionPorts:standardPorts,temporalFacts:() => [],searchText:searchable,Component:FolderWidget },
|
||||
document: { modelKind:'exhibit',visualType:'document',shell:'document',defaultSize:{width:174,height:145},capabilities:standardCapabilities,
|
||||
heading:exhibit => exhibit.type === 'document' ? documentWidget(exhibit.fileType).label.toUpperCase() : 'DOCUMENT',connectionPorts:standardPorts,
|
||||
temporalFacts:exhibit => exhibit.type === 'document' ? [
|
||||
...(exhibit.publishedAt ? [{ id:`${exhibit.id}:published`,exhibitId:exhibit.id,kind:'published' as const,start:exhibit.publishedAt,label:exhibit.title }] : []),
|
||||
...(exhibit.capturedAt ? [{ id:`${exhibit.id}:captured`,exhibitId:exhibit.id,kind:'captured' as const,start:exhibit.capturedAt,label:`${exhibit.title} captured` }] : []),
|
||||
...exhibit.regions.flatMap(region => region.date ? [{ id:`${exhibit.id}:region:${region.id}`,exhibitId:exhibit.id,kind:'region_date' as const,start:region.date,label:region.label }] : []),
|
||||
] : [],searchText:searchable,Component:DocumentWidget },
|
||||
note: { modelKind:'exhibit',visualType:'note',shell:'card',defaultSize:{width:108,height:154},capabilities:standardCapabilities,
|
||||
heading:() => 'INVESTIGATOR / NOTE',connectionPorts:notePorts,temporalFacts:() => [],searchText:searchable,Component:NoteWidget },
|
||||
event: { modelKind:'exhibit',visualType:'event',shell:'card',defaultSize:{width:270,height:174},capabilities:standardCapabilities,
|
||||
heading:() => 'EVENT / THIS HAPPENED',connectionPorts:standardPorts,temporalFacts:exhibit => exhibit.type === 'event' && exhibit.eventDate
|
||||
? [{ id:`${exhibit.id}:occurred`,exhibitId:exhibit.id,kind:'occurred',start:exhibit.eventDate,label:exhibit.content }] : [],searchText:searchable,Component:EventWidget },
|
||||
party: { modelKind:'exhibit',visualType:'party',shell:'card',defaultSize:{width:280,height:190},capabilities:standardCapabilities,
|
||||
heading:exhibit => exhibit.type === 'party' && exhibit.partyKind === 'person' ? 'PARTY / PERSON DOSSIER' : 'PARTY / ORGANIZATION DOSSIER',connectionPorts:standardPorts,temporalFacts:() => [],searchText:searchable,Component:PartyWidget },
|
||||
}
|
||||
|
||||
export function exhibitWidget(type: EvidenceType) {
|
||||
return exhibitWidgetRegistry[type] || exhibitWidgetRegistry.note
|
||||
}
|
||||
export function exhibitWidget(type: ExhibitType) { return exhibitWidgetRegistry[type] }
|
||||
|
||||
type DocumentWidgetProps = { document: CaseDocument; source: string; onMemoryCue?: (cue: string) => void }
|
||||
export type DocumentWidgetDefinition = {
|
||||
label: string
|
||||
Preview: ComponentType<DocumentWidgetProps>
|
||||
Asset: ComponentType<DocumentWidgetProps>
|
||||
}
|
||||
export type DocumentWidgetDefinition = { label:string; Preview:ComponentType<DocumentWidgetProps>; Asset:ComponentType<DocumentWidgetProps> }
|
||||
|
||||
function ImagePreview({ document, source }: DocumentWidgetProps) {
|
||||
return document.assetId ? <img draggable={false} src={source} alt=""/> : <GenericPreview document={document} source={source}/>
|
||||
}
|
||||
function GenericPreview({ document }: DocumentWidgetProps) {
|
||||
return <div><ImageIcon size={35}/><small>{document.kind}</small></div>
|
||||
}
|
||||
function TextPreview({ document, onMemoryCue }: DocumentWidgetProps) {
|
||||
const excerpt = document.body.filter(Boolean).slice(0, 2).join(' ')
|
||||
return <div className="text-document-preview">
|
||||
<p className="text-source-excerpt">{excerpt || document.title}</p>
|
||||
<textarea aria-label={`Memory cue for ${document.title}`} maxLength={48} placeholder="WRITE A MEMORY CUE…" value={document.metadata.memory_cue || ''}
|
||||
onPointerDown={event => event.stopPropagation()} onClick={event => event.stopPropagation()} onDoubleClick={event => event.stopPropagation()} onChange={event => onMemoryCue?.(event.target.value)}/>
|
||||
</div>
|
||||
}
|
||||
function ImageAsset({ document, source }: DocumentWidgetProps) {
|
||||
return <img className="document-image" src={source} alt={document.fileName || document.title}/>
|
||||
}
|
||||
function FrameAsset({ document, source }: DocumentWidgetProps) {
|
||||
return <iframe className="document-frame" src={source} title={document.fileName || document.title} sandbox="allow-same-origin"/>
|
||||
}
|
||||
function GenericAsset({ document, source }: DocumentWidgetProps) {
|
||||
return <div className="unsupported-file"><FileText size={42}/><b>{document.fileName || document.title}</b><span>{document.mimeType || 'Unknown file type'} · {document.fileSize ? `${Math.ceil(document.fileSize / 1024)} KB` : ''}</span><a href={source} download={document.fileName}>DOWNLOAD ORIGINAL</a></div>
|
||||
function ImagePreview({ document,source }: DocumentWidgetProps) { return document.assetId ? <img draggable={false} src={source} alt=""/> : <GenericPreview document={document} source={source}/> }
|
||||
function GenericPreview({ document }: DocumentWidgetProps) { return <div><ImageIcon size={35}/><small>{document.fileType.toUpperCase()}</small></div> }
|
||||
function TextPreview({ document,onMemoryCue }: DocumentWidgetProps) {
|
||||
const excerpt = document.body.filter(Boolean).slice(0,2).join(' ')
|
||||
return <div className="text-document-preview"><p className="text-source-excerpt">{excerpt || document.title}</p><textarea aria-label={`Memory cue for ${document.title}`} maxLength={48} placeholder="WRITE A MEMORY CUE…" value={document.metadata.memory_cue || ''} onPointerDown={event => event.stopPropagation()} onClick={event => event.stopPropagation()} onDoubleClick={event => event.stopPropagation()} onChange={event => onMemoryCue?.(event.target.value)}/></div>
|
||||
}
|
||||
function ImageAsset({ document,source }: DocumentWidgetProps) { return <img className="document-image" src={source} alt={document.fileName || document.title}/> }
|
||||
function FrameAsset({ document,source }: DocumentWidgetProps) { return <iframe className="document-frame" src={source} title={document.fileName || document.title} sandbox="allow-same-origin"/> }
|
||||
function GenericAsset({ document,source }: DocumentWidgetProps) { return <div className="unsupported-file"><FileText size={42}/><b>{document.fileName || document.title}</b><span>{document.mimeType || 'Unknown file type'} · {document.fileSize ? `${Math.ceil(document.fileSize / 1024)} KB` : ''}</span><a href={source} download={document.fileName}>DOWNLOAD ORIGINAL</a></div> }
|
||||
|
||||
const genericDocument = (label: string): DocumentWidgetDefinition => ({ label, Preview: GenericPreview, Asset: GenericAsset })
|
||||
export const documentWidgetRegistry: Record<SourceFileType, DocumentWidgetDefinition> = {
|
||||
image: { label: 'Image', Preview: ImagePreview, Asset: ImageAsset },
|
||||
pdf: { label: 'PDF', Preview: GenericPreview, Asset: FrameAsset },
|
||||
text: { label: 'Text document', Preview: TextPreview, Asset: FrameAsset },
|
||||
web_capture: genericDocument('Web capture'),
|
||||
email: genericDocument('Email'),
|
||||
article: genericDocument('Article'),
|
||||
filing: genericDocument('Company filing'),
|
||||
price_list: genericDocument('Price list'),
|
||||
file: genericDocument('Generic file'),
|
||||
const genericDocument = (label:string):DocumentWidgetDefinition => ({label,Preview:GenericPreview,Asset:GenericAsset})
|
||||
export const documentWidgetRegistry:Record<SourceFileType,DocumentWidgetDefinition> = {
|
||||
image:{label:'Image',Preview:ImagePreview,Asset:ImageAsset},pdf:{label:'PDF',Preview:GenericPreview,Asset:FrameAsset},text:{label:'Text document',Preview:TextPreview,Asset:FrameAsset},
|
||||
web_capture:genericDocument('Web capture'),email:genericDocument('Email'),article:genericDocument('Article'),filing:genericDocument('Company filing'),price_list:genericDocument('Price list'),file:genericDocument('Generic file'),
|
||||
}
|
||||
export function documentWidget(type:SourceFileType) { return documentWidgetRegistry[type] || documentWidgetRegistry.file }
|
||||
|
||||
export function documentWidget(type: SourceFileType) {
|
||||
return documentWidgetRegistry[type] || documentWidgetRegistry.file
|
||||
}
|
||||
export function documentExhibits(exhibits:Exhibit[]):DocumentExhibit[] { return exhibits.filter((exhibit):exhibit is DocumentExhibit => exhibit.type === 'document') }
|
||||
export function evidenceExhibits(exhibits:Exhibit[]):Evidence[] { return exhibits.filter((exhibit):exhibit is Evidence => exhibit.type !== 'document') }
|
||||
|
||||
+97
-37
@@ -1,8 +1,24 @@
|
||||
export type EvidenceType = 'folder' | 'evidence' | 'note' | 'event' | 'party'
|
||||
export type ExhibitType = 'folder' | 'document' | 'note' | 'event' | 'party'
|
||||
export type PartyKind = 'person' | 'organization'
|
||||
export type OrganizationKind = 'business' | 'public_body' | 'association' | 'informal_group' | 'other'
|
||||
export type SourceFileType = 'image' | 'pdf' | 'web_capture' | 'email' | 'article' | 'filing' | 'price_list' | 'text' | 'file'
|
||||
|
||||
export interface CanvasPlacement {
|
||||
x: number
|
||||
y: number
|
||||
width: number
|
||||
height: number
|
||||
rotation: number
|
||||
zIndex: number
|
||||
hidden: boolean
|
||||
}
|
||||
|
||||
export interface ExhibitBase extends CanvasPlacement {
|
||||
id: string
|
||||
type: ExhibitType
|
||||
title: string
|
||||
}
|
||||
|
||||
export interface DocumentRegion {
|
||||
id: string
|
||||
label: string
|
||||
@@ -10,12 +26,17 @@ export interface DocumentRegion {
|
||||
date?: string
|
||||
}
|
||||
|
||||
export interface CaseDocument {
|
||||
id: string
|
||||
title: string
|
||||
kind: string
|
||||
date: string
|
||||
export interface FolderExhibit extends ExhibitBase {
|
||||
type: 'folder'
|
||||
content: string
|
||||
isOpen: boolean
|
||||
}
|
||||
|
||||
export interface DocumentExhibit extends ExhibitBase {
|
||||
type: 'document'
|
||||
publishedAt?: string
|
||||
capturedAt?: string
|
||||
sourceUri?: string
|
||||
body: string[]
|
||||
regions: DocumentRegion[]
|
||||
assetId?: string
|
||||
@@ -26,40 +47,48 @@ export interface CaseDocument {
|
||||
metadata: Record<string, string>
|
||||
}
|
||||
|
||||
export interface Evidence {
|
||||
id: string
|
||||
type: EvidenceType
|
||||
title: string
|
||||
export interface NoteExhibit extends ExhibitBase {
|
||||
type: 'note'
|
||||
content: string
|
||||
sourceDocumentId?: string
|
||||
sourceRegionId?: string
|
||||
eventDate?: string
|
||||
supportingEvidenceIds?: string[]
|
||||
partyKind?: PartyKind
|
||||
organizationKind?: OrganizationKind
|
||||
aliases?: string[]
|
||||
relatedEvidenceIds?: string[]
|
||||
x: number
|
||||
y: number
|
||||
width: number
|
||||
config?: Record<string, unknown>
|
||||
/** Compatibility projection for clients predating the generic relation graph. */
|
||||
containedDocumentIds?: string[]
|
||||
}
|
||||
|
||||
export interface WidgetRelation {
|
||||
id: string
|
||||
fromWidgetId: string
|
||||
toWidgetId: string
|
||||
type: string
|
||||
sortOrder?: number
|
||||
config?: Record<string, unknown>
|
||||
export interface EventExhibit extends ExhibitBase {
|
||||
type: 'event'
|
||||
content: string
|
||||
eventDate?: string
|
||||
}
|
||||
|
||||
export interface PartyExhibit extends ExhibitBase {
|
||||
type: 'party'
|
||||
content: string
|
||||
partyKind: PartyKind
|
||||
organizationKind?: OrganizationKind
|
||||
aliases: string[]
|
||||
}
|
||||
|
||||
export type Exhibit = FolderExhibit | DocumentExhibit | NoteExhibit | EventExhibit | PartyExhibit
|
||||
export type Evidence = Exclude<Exhibit, DocumentExhibit>
|
||||
export type CaseDocument = DocumentExhibit
|
||||
export type EvidenceType = Evidence['type']
|
||||
|
||||
interface ExhibitRelationBase {
|
||||
id: string
|
||||
fromExhibitId: string
|
||||
toExhibitId: string
|
||||
sortOrder: number
|
||||
note?: string
|
||||
}
|
||||
|
||||
export interface FolderMembership extends ExhibitRelationBase { type: 'contains' }
|
||||
export interface EventSupportRelation extends ExhibitRelationBase { type: 'supports' }
|
||||
export interface PartyAssociationRelation extends ExhibitRelationBase { type: 'concerns' }
|
||||
export interface ProvenanceRelation extends ExhibitRelationBase { type: 'source'; sourceRegionId?: string }
|
||||
export type ExhibitRelation = FolderMembership | EventSupportRelation | PartyAssociationRelation | ProvenanceRelation
|
||||
|
||||
export interface Connection {
|
||||
id: string
|
||||
fromEvidenceId: string
|
||||
toEvidenceId: string
|
||||
fromExhibitId: string
|
||||
toExhibitId: string
|
||||
label?: string
|
||||
/** Percentage from slack (0) to taut (100). */
|
||||
tightness?: number
|
||||
@@ -73,6 +102,31 @@ export interface Connection {
|
||||
export interface Viewport { x: number; y: number; zoom: number }
|
||||
export interface TimelineRange { start: string; end: string }
|
||||
|
||||
export type BoardViewPlacement =
|
||||
| { mode: 'docked'; dockEdge: 'top' | 'right' | 'bottom' | 'left'; size: number }
|
||||
| { mode: 'canvas' | 'window'; x: number; y: number; width: number; height: number }
|
||||
|
||||
export interface TimelineView {
|
||||
id: string
|
||||
type: 'timeline'
|
||||
placement: BoardViewPlacement
|
||||
visible: boolean
|
||||
zIndex: number
|
||||
rangeMode: 'auto' | 'fixed'
|
||||
range?: TimelineRange
|
||||
}
|
||||
|
||||
export type BoardView = TimelineView
|
||||
|
||||
export interface TemporalFact {
|
||||
id: string
|
||||
exhibitId: string
|
||||
kind: 'published' | 'captured' | 'occurred' | 'region_date'
|
||||
start: string
|
||||
end?: string
|
||||
label: string
|
||||
}
|
||||
|
||||
export interface BriefConcept {
|
||||
id: string
|
||||
label: string
|
||||
@@ -87,15 +141,21 @@ export interface CaseState {
|
||||
id: string
|
||||
title: string
|
||||
subtitle: string
|
||||
documents: CaseDocument[]
|
||||
evidence: Evidence[]
|
||||
relations: WidgetRelation[]
|
||||
exhibits: Exhibit[]
|
||||
relations: ExhibitRelation[]
|
||||
connections: Connection[]
|
||||
views: BoardView[]
|
||||
viewport: Viewport
|
||||
timelineRange?: TimelineRange | null
|
||||
brief: LevelBrief
|
||||
revision: number
|
||||
updatedAt?: string
|
||||
levelStatus?: string
|
||||
sourceTemplateVersionId?: string
|
||||
editingAllowed?: boolean
|
||||
}
|
||||
|
||||
export function isDocumentExhibit(exhibit: Exhibit): exhibit is DocumentExhibit { return exhibit.type === 'document' }
|
||||
export function isEvidenceExhibit(exhibit: Exhibit): exhibit is Evidence { return exhibit.type !== 'document' }
|
||||
export function isFolderExhibit(exhibit: Exhibit): exhibit is FolderExhibit { return exhibit.type === 'folder' }
|
||||
export function isEventExhibit(exhibit: Exhibit): exhibit is EventExhibit { return exhibit.type === 'event' }
|
||||
export function isPartyExhibit(exhibit: Exhibit): exhibit is PartyExhibit { return exhibit.type === 'party' }
|
||||
|
||||
Reference in New Issue
Block a user