# peacerep/peacetech-vis-collection architecture

> Architecture diagram of the GitHub repository peacerep/peacetech-vis-collection, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/peacerep/peacetech-vis-collection
- Repository: https://github.com/peacerep/peacetech-vis-collection

## Overview

PeaceRep’s Visualisation Collection is a metadata catalogue and browser for visualisation projects. Users select a catalogue, relationship view, or reference-data tab; the app loads metadata and renders searchable-at-a-glance cards, tables, vocabulary, or interactive relationship diagrams with hover details. The main internal layers are metadata lookups and shared relationship-diagram rendering. The README is empty, so product scope is based on the app’s own description and tab labels; some component links are known only from the SOURCE INDEX.

Main entry points: [`review/src/lib/data.js`](https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/lib/data.js) (Metadata lookups), [`review/src/App.svelte`](https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/App.svelte) (Tab application), [`review/src/lib/arcs.js`](https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/lib/arcs.js) (Relationship rendering), [`review/src/components/ArcCard.svelte`](https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/ArcCard.svelte) (Relationship detail card)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Catalogue app"]
  node_app["Tab application<br/>[App.svelte]"]
end

subgraph group_metadata["Metadata"]
  node_lookups["Metadata lookups<br/>[data.js]"]
  node_catalogue_data[("Catalogue metadata")]
  node_relationship_data["Relationship records<br/>[relationships.json]"]
  node_vis_data["Visualisation records"]
  node_people_data["People records<br/>[people.json]"]
  node_org_data["Organisation records<br/>[organisations.json]"]
  node_dataset_data["Dataset records<br/>[datasets.json]"]
  node_tools_data["Tool records<br/>[tools.json]"]
  node_vocab_data["Vocabulary records<br/>[vocabularies.json]"]
end

subgraph group_catalogue["Catalogue views"]
  node_visualisations["Visualisation browser"]
  node_vis_grid["Visualisation grid<br/>[VisGrid.svelte]"]
  node_vis_table["Visualisation table<br/>[VisTable.svelte]"]
  node_lists["Metadata lists<br/>[Lists.svelte]"]
  node_structure["Structure display<br/>[Structure.svelte]"]
  node_value["Value display<br/>[Val.svelte]"]
  node_simple_table["Reference tables<br/>[SimpleTable.svelte]"]
  node_vocabulary["Vocabulary view<br/>[Vocab.svelte]"]
end

subgraph group_relationships["Relationship views"]
  node_arc_data["Relationship rendering<br/>[arcs.js]"]
  node_arc_horizontal["Horizontal diagram<br/>[ArcDiagram.svelte]"]
  node_arc_vertical["Vertical diagram"]
  node_arc_force["Force diagram"]
  node_legend["Relationship legend<br/>[ArcLegend.svelte]"]
  node_arc_card["Relationship detail card<br/>[ArcCard.svelte]"]
end

node_visitor(("Catalogue visitor"))

node_visitor -->|"selects view"| node_app
node_app -->|"renders"| node_visualisations
node_app -->|"renders"| node_simple_table
node_app -->|"renders"| node_vocabulary
node_app -->|"renders"| node_arc_horizontal
node_app -->|"renders"| node_arc_vertical
node_app -->|"renders"| node_arc_force
node_lookups -->|"loads"| node_vis_data
node_lookups -->|"loads"| node_people_data
node_lookups -->|"loads"| node_org_data
node_lookups -->|"loads"| node_dataset_data
node_lookups -->|"loads"| node_tools_data
node_lookups -->|"loads"| node_vocab_data
node_lookups -->|"resolves references"| node_catalogue_data
node_visualisations -->|"reads lookups"| node_lookups
node_visualisations -->|"renders"| node_vis_grid
node_visualisations -->|"renders"| node_vis_table
node_vis_grid -->|"renders lists"| node_lists
node_vis_grid -->|"renders structure"| node_structure
node_vis_grid -->|"renders values"| node_value
node_vis_table -->|"renders lists"| node_lists
node_vis_table -->|"renders structure"| node_structure
node_vis_table -->|"renders values"| node_value
node_simple_table -.->|"renders values"| node_value
node_vocabulary -.->|"reads metadata"| node_lookups
node_arc_horizontal -->|"uses renderer"| node_arc_data
node_arc_vertical -->|"uses renderer"| node_arc_data
node_arc_force -->|"uses renderer"| node_arc_data
node_arc_data -->|"loads edges"| node_relationship_data
node_arc_data -->|"reads labels"| node_lookups
node_arc_horizontal -->|"renders"| node_legend
node_arc_horizontal -->|"renders details"| node_arc_card
node_arc_vertical -->|"renders"| node_legend
node_arc_vertical -->|"renders details"| node_arc_card
node_arc_force -->|"renders"| node_legend
node_arc_force -->|"renders details"| node_arc_card
node_arc_card -->|"uses tags"| node_arc_data
node_arc_card -->|"reads labels"| node_lookups
node_legend -->|"reads edge styles"| node_arc_data

click node_app "https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/App.svelte"
click node_lookups "https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/lib/data.js"
click node_catalogue_data "https://github.com/peacerep/peacetech-vis-collection/tree/main/metadata"
click node_relationship_data "https://github.com/peacerep/peacetech-vis-collection/blob/main/metadata/relationships.json"
click node_vis_data "https://github.com/peacerep/peacetech-vis-collection/blob/main/metadata/visualisations.json"
click node_people_data "https://github.com/peacerep/peacetech-vis-collection/blob/main/metadata/people.json"
click node_org_data "https://github.com/peacerep/peacetech-vis-collection/blob/main/metadata/organisations.json"
click node_dataset_data "https://github.com/peacerep/peacetech-vis-collection/blob/main/metadata/datasets.json"
click node_tools_data "https://github.com/peacerep/peacetech-vis-collection/blob/main/metadata/tools.json"
click node_vocab_data "https://github.com/peacerep/peacetech-vis-collection/blob/main/metadata/vocabularies.json"
click node_visualisations "https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/Visualisations.svelte"
click node_vis_grid "https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/VisGrid.svelte"
click node_vis_table "https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/VisTable.svelte"
click node_lists "https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/Lists.svelte"
click node_structure "https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/Structure.svelte"
click node_value "https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/Val.svelte"
click node_simple_table "https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/SimpleTable.svelte"
click node_vocabulary "https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/Vocab.svelte"
click node_arc_data "https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/lib/arcs.js"
click node_arc_horizontal "https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/ArcDiagram.svelte"
click node_arc_vertical "https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/ArcDiagramVertical.svelte"
click node_arc_force "https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/ForceDiagram.svelte"
click node_legend "https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/ArcLegend.svelte"
click node_arc_card "https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/ArcCard.svelte"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app toneBlue
class node_lookups,node_catalogue_data,node_relationship_data,node_vis_data,node_people_data,node_org_data,node_dataset_data,node_tools_data,node_vocab_data toneAmber
class node_visualisations,node_vis_grid,node_vis_table,node_lists,node_structure,node_value,node_simple_table,node_vocabulary toneMint
class node_arc_data,node_arc_horizontal,node_arc_vertical,node_arc_force,node_legend,node_arc_card toneRose
class node_visitor toneIndigo
```

## Components

### Catalogue app

- [Tab application](https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/App.svelte): `review/src/App.svelte`

### Metadata

- [Metadata lookups](https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/lib/data.js): `review/src/lib/data.js`
- [Catalogue metadata](https://github.com/peacerep/peacetech-vis-collection/tree/main/metadata): `metadata`
- [Relationship records](https://github.com/peacerep/peacetech-vis-collection/blob/main/metadata/relationships.json): `metadata/relationships.json`
- [Visualisation records](https://github.com/peacerep/peacetech-vis-collection/blob/main/metadata/visualisations.json): `metadata/visualisations.json`
- [People records](https://github.com/peacerep/peacetech-vis-collection/blob/main/metadata/people.json): `metadata/people.json`
- [Organisation records](https://github.com/peacerep/peacetech-vis-collection/blob/main/metadata/organisations.json): `metadata/organisations.json`
- [Dataset records](https://github.com/peacerep/peacetech-vis-collection/blob/main/metadata/datasets.json): `metadata/datasets.json`
- [Tool records](https://github.com/peacerep/peacetech-vis-collection/blob/main/metadata/tools.json): `metadata/tools.json`
- [Vocabulary records](https://github.com/peacerep/peacetech-vis-collection/blob/main/metadata/vocabularies.json): `metadata/vocabularies.json`

### Catalogue views

- [Visualisation browser](https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/Visualisations.svelte): `review/src/components/Visualisations.svelte`
- [Visualisation grid](https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/VisGrid.svelte): `review/src/components/VisGrid.svelte`
- [Visualisation table](https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/VisTable.svelte): `review/src/components/VisTable.svelte`
- [Metadata lists](https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/Lists.svelte): `review/src/components/Lists.svelte`
- [Structure display](https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/Structure.svelte): `review/src/components/Structure.svelte`
- [Value display](https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/Val.svelte): `review/src/components/Val.svelte`
- [Reference tables](https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/SimpleTable.svelte): `review/src/components/SimpleTable.svelte`
- [Vocabulary view](https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/Vocab.svelte): `review/src/components/Vocab.svelte`

### Relationship views

- [Relationship rendering](https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/lib/arcs.js): `review/src/lib/arcs.js`
- [Horizontal diagram](https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/ArcDiagram.svelte): `review/src/components/ArcDiagram.svelte`
- [Vertical diagram](https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/ArcDiagramVertical.svelte): `review/src/components/ArcDiagramVertical.svelte`
- [Force diagram](https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/ForceDiagram.svelte): `review/src/components/ForceDiagram.svelte`
- [Relationship legend](https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/ArcLegend.svelte): `review/src/components/ArcLegend.svelte`
- [Relationship detail card](https://github.com/peacerep/peacetech-vis-collection/blob/main/review/src/components/ArcCard.svelte): `review/src/components/ArcCard.svelte`

### Other components

- **Catalogue visitor**

## Connections

- Catalogue visitor → Tab application: selects view (evidence: `review/src/App.svelte`)
- Tab application → Visualisation browser: renders (evidence: `review/src/App.svelte`)
- Tab application → Reference tables: renders (evidence: `review/src/App.svelte`)
- Tab application → Vocabulary view: renders (evidence: `review/src/App.svelte`)
- Tab application → Horizontal diagram: renders (evidence: `review/src/App.svelte`)
- Tab application → Vertical diagram: renders (evidence: `review/src/App.svelte`)
- Tab application → Force diagram: renders (evidence: `review/src/App.svelte`)
- Metadata lookups → Visualisation records: loads (evidence: `review/src/lib/data.js`)
- Metadata lookups → People records: loads (evidence: `review/src/lib/data.js`)
- Metadata lookups → Organisation records: loads (evidence: `review/src/lib/data.js`)
- Metadata lookups → Dataset records: loads (evidence: `review/src/lib/data.js`)
- Metadata lookups → Tool records: loads (evidence: `review/src/lib/data.js`)
- Metadata lookups → Vocabulary records: loads (evidence: `review/src/lib/data.js`)
- Metadata lookups → Catalogue metadata: resolves references (evidence: `review/src/lib/data.js`)
- Visualisation browser → Metadata lookups: reads lookups (evidence: `review/src/components/Visualisations.svelte`)
- Visualisation browser → Visualisation grid: renders (evidence: `review/src/components/Visualisations.svelte`)
- Visualisation browser → Visualisation table: renders (evidence: `review/src/components/Visualisations.svelte`)
- Visualisation grid → Metadata lists: renders lists (evidence: `review/src/components/VisGrid.svelte`)
- Visualisation grid → Structure display: renders structure (evidence: `review/src/components/VisGrid.svelte`)
- Visualisation grid → Value display: renders values (evidence: `review/src/components/VisGrid.svelte`)
- Visualisation table → Metadata lists: renders lists (evidence: `review/src/components/VisTable.svelte`)
- Visualisation table → Structure display: renders structure (evidence: `review/src/components/VisTable.svelte`)
- Visualisation table → Value display: renders values (evidence: `review/src/components/VisTable.svelte`)
- Reference tables → Value display: renders values
- Vocabulary view → Metadata lookups: reads metadata (evidence: `review/src/components/Vocab.svelte`)
- Horizontal diagram → Relationship rendering: uses renderer (evidence: `review/src/components/ArcDiagram.svelte`)
- Vertical diagram → Relationship rendering: uses renderer (evidence: `review/src/components/ArcDiagramVertical.svelte`)
- Force diagram → Relationship rendering: uses renderer (evidence: `review/src/components/ForceDiagram.svelte`)
- Relationship rendering → Relationship records: loads edges (evidence: `review/src/lib/arcs.js`)
- Relationship rendering → Metadata lookups: reads labels (evidence: `review/src/lib/arcs.js`)
- Horizontal diagram → Relationship legend: renders (evidence: `review/src/components/ArcDiagram.svelte`)
- Horizontal diagram → Relationship detail card: renders details (evidence: `review/src/components/ArcDiagram.svelte`)
- Vertical diagram → Relationship legend: renders (evidence: `review/src/components/ArcDiagramVertical.svelte`)
- Vertical diagram → Relationship detail card: renders details (evidence: `review/src/components/ArcDiagramVertical.svelte`)
- Force diagram → Relationship legend: renders (evidence: `review/src/components/ForceDiagram.svelte`)
- Force diagram → Relationship detail card: renders details (evidence: `review/src/components/ForceDiagram.svelte`)
- Relationship detail card → Relationship rendering: uses tags (evidence: `review/src/components/ArcCard.svelte`)
- Relationship detail card → Metadata lookups: reads labels (evidence: `review/src/components/ArcCard.svelte`)
- Relationship legend → Relationship rendering: reads edge styles (evidence: `review/src/components/ArcLegend.svelte`)