@directory-builder/core 0.1.0

package/webapp/src/MapGraph.jsx

@@ -0,0 +1,244 @@
+// Map view: the source-schema → target-schema mapping graph, optionally animated
+// with one org's field values flowing through the transform nodes.
+// Reads:  config/federation.ttl, data/pipeline/mapped.ttl,
+//         data/pipeline/cleaned/*.ttl (via loadMap.js + sourceMeta.js)
+// Does:   renders the Map page (horizontal <ColumnGraph>)
+
+import { federationTtl as ttl, mappedTtl, cleanedByPath } from "./instanceData.js"
+import { loadMap, loadSources, loadOrgsBySource, loadFieldValuesByOrg } from "./loadMap.js"
+import React, { useEffect, useMemo, useRef, useState } from "react"
+import { loadCleanedBySource } from "./sourceMeta.js"
+import { SkipBack, SkipForward } from "lucide-react"
+import ColumnGraph from "./ColumnGraph.jsx"
+
+const COLUMNS = ["Source", "SourceField", "TransformNode", "TargetField", "TargetSchema"]
+const COLORS = {
+    Source: "#d4e7ff",
+    SourceField: "#e6f3d8",
+    TransformNode: "#fff1a8",
+    TargetField: "#fde2c7",
+    TargetSchema: "#f4cfe0",
+}
+// Lighter tints than the node fills so labels read as belonging to the same
+// column/moment without competing for attention against the nodes themselves.
+const VALUE_LABEL_BG = {
+    SourceField:   "#f0f8e0",
+    TransformNode: "#fff8c8",
+}
+
+const SOURCES = loadSources(ttl)
+const ORGS_BY_SOURCE = loadOrgsBySource(ttl, mappedTtl)
+// Source-to-file mapping is resolved from config: instanceData enumerates the
+// cleaned TTLs from :hasSource, so a new source needs no edit here.
+const FIELD_VALUES = loadFieldValuesByOrg(ttl, mappedTtl, loadCleanedBySource(ttl, cleanedByPath))
+
+function SourcesDropdown({ visible, onChange }) {
+    const [open, setOpen] = useState(false)
+    const ref = useRef(null)
+
+    useEffect(() => {
+        if (!open) return
+        const onDown = (e) => { if (!ref.current?.contains(e.target)) setOpen(false) }
+        document.addEventListener("mousedown", onDown)
+        return () => document.removeEventListener("mousedown", onDown)
+    }, [open])
+
+    const summary = visible.size === SOURCES.length
+        ? "All sources"
+        : visible.size === 0
+            ? "No sources"
+            : `${visible.size} of ${SOURCES.length} sources`
+
+    const toggle = (iri) => {
+        const next = new Set(visible)
+        if (next.has(iri)) next.delete(iri); else next.add(iri)
+        onChange(next)
+    }
+    const setAll = (on) => onChange(on ? new Set(SOURCES.map(s => s.iri)) : new Set())
+
+    const linkBtn = { background: "none", border: "none", color: "#06c", cursor: "pointer", padding: 0, fontSize: 12 }
+
+    return (
+        <div ref={ref} style={{ position: "relative", display: "inline-block" }}>
+            <button onClick={() => setOpen(!open)} style={{ padding: "0.25rem 0.6rem", border: "1px solid #aaa", borderRadius: 4, background: "white", cursor: "pointer", fontSize: 13 }}>
+                {summary} ▾
+            </button>
+            {open && (
+                <div style={{ position: "absolute", top: "calc(100% + 4px)", left: 0, zIndex: 10, background: "white", border: "1px solid #aaa", borderRadius: 4, padding: 6, minWidth: 200, boxShadow: "0 2px 6px rgba(0,0,0,0.12)" }}>
+                    <div style={{ display: "flex", gap: 12, paddingBottom: 4, marginBottom: 4, borderBottom: "1px solid #eee" }}>
+                        <button onClick={() => setAll(true)} style={linkBtn}>Select all</button>
+                        <button onClick={() => setAll(false)} style={linkBtn}>Unselect all</button>
+                    </div>
+                    {SOURCES.map(s => (
+                        <label key={s.iri} style={{ display: "flex", alignItems: "center", gap: 6, padding: "2px 0" }}>
+                            <input type="checkbox" checked={visible.has(s.iri)} onChange={() => toggle(s.iri)} />
+                            {s.label}
+                        </label>
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}
+
+function OrgCombobox({ orgs, value, onChange, disabled }) {
+    const [open, setOpen] = useState(false)
+    const [filter, setFilter] = useState("")
+    const ref = useRef(null)
+
+    useEffect(() => {
+        if (!open) return
+        const onDown = (e) => { if (!ref.current?.contains(e.target)) setOpen(false) }
+        document.addEventListener("mousedown", onDown)
+        return () => document.removeEventListener("mousedown", onDown)
+    }, [open])
+
+    const selected = orgs.find(o => o.iri === value)
+    const f = filter.toLowerCase()
+    const filtered = f ? orgs.filter(o => o.id.toLowerCase().includes(f) || o.name.toLowerCase().includes(f)) : orgs
+
+    return (
+        <div ref={ref} style={{ position: "relative" }}>
+            <input
+                type="text"
+                disabled={disabled}
+                value={open ? filter : (selected?.name || selected?.id || "")}
+                placeholder={disabled ? "" : "Pick organisation…"}
+                onChange={(e) => { setFilter(e.target.value); if (!open) setOpen(true) }}
+                onFocus={() => { setFilter(""); setOpen(true) }}
+                style={{
+                    padding: "0.25rem 0.5rem",
+                    border: "1px solid #aaa",
+                    borderRadius: 4,
+                    fontSize: 13,
+                    width: 250,
+                    background: disabled ? "#f4f4f4" : "white",
+                    color: disabled ? "#bbb" : "#000",
+                }}
+            />
+            {open && filtered.length > 0 && (
+                <div style={{ position: "absolute", top: "calc(100% + 4px)", left: 0, zIndex: 10, background: "white", border: "1px solid #aaa", borderRadius: 4, maxHeight: 280, overflowY: "auto", minWidth: "100%", boxShadow: "0 2px 6px rgba(0,0,0,0.12)" }}>
+                    {filtered.slice(0, 200).map(o => (
+                        <div
+                            key={o.iri}
+                            onClick={() => { onChange(o.iri); setOpen(false); setFilter("") }}
+                            title={o.name}
+                            style={{ padding: "4px 8px", cursor: "pointer", borderBottom: "1px solid #eee" }}
+                        >
+                            <div style={{ fontSize: 13, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxWidth: 320 }}>{o.name || <span style={{ color: "#999" }}>(no name)</span>}</div>
+                            <div style={{ fontFamily: "monospace", fontSize: 11, color: "#666" }}>{o.id}</div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default function MapGraph() {
+    const [visible, setVisible] = useState(() => new Set(SOURCES.map(s => s.iri)))
+    const [selectedOrg, setSelectedOrg] = useState(null)
+    const [dataFlow, setDataFlow] = useState(false)
+    const [showUnmapped, setShowUnmapped] = useState(false)
+    const [showAllTargets, setShowAllTargets] = useState(false)
+    const [showDirectFlows, setShowDirectFlows] = useState(false)
+
+    const { nodes, edges: rawEdges } = useMemo(() => {
+        const hiddenSources = new Set(SOURCES.filter(s => !visible.has(s.iri)).map(s => s.iri))
+        return loadMap(ttl, { hiddenSources, hideUnmappedFields: !showUnmapped, hideUnmappedTargetFields: !showAllTargets })
+    }, [visible, showUnmapped, showAllTargets])
+
+    const oneActive = visible.size === 1
+    const enabled = dataFlow && oneActive
+    const valueByField = enabled && selectedOrg ? FIELD_VALUES.get(selectedOrg) : null
+    const edges = useMemo(() => {
+        if (!valueByField) return rawEdges
+        const typeOf = new Map(nodes.map(n => [n.id, n.type]))
+        return rawEdges.map(e => {
+            // Source-field outgoing: source literal. Transform outgoing: the
+            // post-transform target field value (the value that lands in `to`).
+            // The label tints with the from-node's column color so labels read
+            // as belonging to the same "moment" in the transformation.
+            // Direct (no-:via) source-field → target-field edges are gated
+            // behind the "Also show 1:1 flows" toggle.
+            if (e.direct && !showDirectFlows) return e
+            const fromType = typeOf.get(e.from)
+            const v = fromType === "TransformNode" ? valueByField.get(e.to)
+                : fromType === "SourceField"       ? valueByField.get(e.from)
+                : undefined
+            return v ? { ...e, value: v, valueBg: VALUE_LABEL_BG[fromType] } : e
+        })
+    }, [rawEdges, nodes, valueByField, showDirectFlows])
+
+    // Remount when the visible node set changes (sources or unmapped-fields
+    // toggle). Org / data-flow changes only update edge labels in place.
+    const graphKey = useMemo(() => `${[...visible].sort().join("|")}::${showUnmapped ? "all" : "mapped"}::${showAllTargets ? "allT" : "mappedT"}`, [visible, showUnmapped, showAllTargets])
+
+    const activeSource = oneActive ? [...visible][0] : null
+    const orgs = activeSource ? (ORGS_BY_SOURCE.get(activeSource) ?? []) : []
+
+    useEffect(() => {
+        if (orgs.length > 0) {
+            if (!orgs.find(o => o.iri === selectedOrg)) setSelectedOrg(orgs[0].iri)
+        } else if (selectedOrg !== null) {
+            setSelectedOrg(null)
+        }
+    }, [orgs])
+
+    useEffect(() => {
+        if (!oneActive && dataFlow) setDataFlow(false)
+    }, [oneActive])
+
+    const cycle = (delta) => {
+        if (orgs.length === 0) return
+        const idx = orgs.findIndex(o => o.iri === selectedOrg)
+        const next = ((idx < 0 ? 0 : idx + delta) + orgs.length) % orgs.length
+        setSelectedOrg(orgs[next].iri)
+    }
+
+    const disabledHint = !dataFlow
+        ? "Enable Show data flow to use these controls"
+        : "Active only when exactly one source is selected"
+    const iconBtnStyle = {
+        display: "inline-flex",
+        alignItems: "center",
+        background: "none",
+        border: "1px solid #aaa",
+        borderRadius: 4,
+        padding: "0.25rem 0.5rem",
+        cursor: enabled ? "pointer" : "not-allowed",
+        color: enabled ? "#000" : "#bbb",
+    }
+
+    return (
+        <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+            <div style={{ display: "flex", alignItems: "center", gap: "0.75rem", padding: "0.5rem 1rem", fontSize: 13, borderBottom: "1px solid #ddd" }}>
+                <SourcesDropdown visible={visible} onChange={setVisible} />
+                <label style={{ display: "inline-flex", alignItems: "center", gap: "0.3rem" }}>
+                    <input type="checkbox" checked={showUnmapped} onChange={(e) => setShowUnmapped(e.target.checked)} />
+                    Show all source fields
+                </label>
+                <label style={{ display: "inline-flex", alignItems: "center", gap: "0.3rem" }}>
+                    <input type="checkbox" checked={showAllTargets} onChange={(e) => setShowAllTargets(e.target.checked)} />
+                    Show all target fields
+                </label>
+                <label style={{ display: "inline-flex", alignItems: "center", gap: "0.3rem", color: oneActive ? "#000" : "#bbb", cursor: oneActive ? "pointer" : "not-allowed" }} title={oneActive ? "" : "Active only when exactly one source is selected"}>
+                    <input type="checkbox" disabled={!oneActive} checked={dataFlow} onChange={(e) => setDataFlow(e.target.checked)} />
+                    Show data flow
+                </label>
+                <label style={{ display: "inline-flex", alignItems: "center", gap: "0.3rem", color: enabled ? "#000" : "#bbb", cursor: enabled ? "pointer" : "not-allowed" }} title={enabled ? "" : "Enable Show data flow first"}>
+                    <input type="checkbox" disabled={!enabled} checked={showDirectFlows} onChange={(e) => setShowDirectFlows(e.target.checked)} />
+                    Also show 1:1 flows
+                </label>
+                <div style={{ display: "flex", alignItems: "center", gap: "0.25rem" }}>
+                    <button disabled={!enabled} onClick={() => cycle(-1)} title={enabled ? "Previous" : disabledHint} style={iconBtnStyle}><SkipBack size={13} fill="currentColor" /></button>
+                    <OrgCombobox orgs={orgs} value={selectedOrg} onChange={setSelectedOrg} disabled={!enabled} />
+                    <button disabled={!enabled} onClick={() => cycle(1)} title={enabled ? "Next" : disabledHint} style={iconBtnStyle}><SkipForward size={13} fill="currentColor" /></button>
+                </div>
+            </div>
+            <div style={{ flex: 1, minHeight: 0 }}>
+                <ColumnGraph key={graphKey} nodes={nodes} edges={edges} columns={COLUMNS} colors={COLORS} />
+            </div>
+        </div>
+    )
+}

package/webapp/src/MatchGraph.jsx

@@ -0,0 +1,137 @@
+// Match view: one lane per target schema, each preceded by a tinted "source
+// duplications" column (which source records merged onto the entity), plus the
+// cross-lane :hasRelationship edges between merged entities. All structure — lanes,
+// order, colours, titles, relationships — is derived from federation.ttl inside
+// loadMatch.js; this file only adds node text labels, the stats line and the modal.
+// Reads:  data/pipeline/{matches,merged,mapped}.ttl, config/{federation,match-knowledge}.ttl
+// Does:   renders the Match page (<ColumnGraph> + per-cluster details modal)
+
+import { displayPrefixes, federationTtl, matchKnowledgeTtl, mappedTtl, matchesTtl, mergedTtl } from "./instanceData.js"
+import { loadSourceMeta, loadSourceOfRecord } from "./sourceMeta.js"
+import { CDP, groupBySubject, parseTtl, shrink } from "@directory-builder/core/utils"
+import React, { useMemo, useState } from "react"
+import ColumnGraph from "./ColumnGraph.jsx"
+import { loadMatch } from "./loadMatch.js"
+
+const SCHEMA_IDENTIFIER = "http://schema.org/identifier"
+const CDF_NS = "https://civic-data.de/federated-directory#"
+const HARD_CRITERION = `${CDP}hasHardCriterion`
+const WEIGHTED_CRITERION = `${CDP}hasWeightedCriterion`
+const ON = `${CDP}on`
+const OWL_SAME_AS = "http://www.w3.org/2002/07/owl#sameAs"
+
+const prefixed = (iri) => shrink(iri, displayPrefixes)
+
+// Label each source member with its :Source notation, resolved via cdp:fromSource.
+const sourceMeta = loadSourceMeta(federationTtl)
+const sourceOfRecord = loadSourceOfRecord(mappedTtl)
+const sourceCode = (iri) => { const s = sourceOfRecord.get(iri); return (s && sourceMeta.get(s)?.notation) || "?" }
+
+const criteriaPredicates = (() => {
+    const quads = parseTtl(federationTtl)
+    const bnodes = new Set()
+    for (const q of quads) if (q.predicate.value === HARD_CRITERION || q.predicate.value === WEIGHTED_CRITERION) bnodes.add(q.object.value)
+    return quads.filter(q => q.predicate.value === ON && bnodes.has(q.subject.value)).map(q => q.object.value)
+})()
+
+// Map<recordIri, Map<predIri, [literalValue]>> for the per-member details modal.
+const orgInfo = groupBySubject(parseTtl(mappedTtl), { literalsOnly: true })
+
+const manualPairs = parseTtl(matchKnowledgeTtl)
+    .filter(q => q.predicate.value === OWL_SAME_AS)
+    .map(q => [q.subject.value, q.object.value])
+
+function MemberDetailsModal({ clusterId, memberIris, onClose }) {
+    const memberSet = new Set(memberIris)
+    const manualHere = manualPairs.filter(([a, b]) => memberSet.has(a) && memberSet.has(b))
+    return (
+        <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.4)", zIndex: 9999, display: "flex", justifyContent: "center", alignItems: "flex-start", paddingTop: 60, overflowY: "auto" }}>
+            <div onClick={(e) => e.stopPropagation()} style={{ background: "white", borderRadius: 6, padding: 20, minWidth: 480, maxWidth: 800, boxShadow: "0 8px 24px rgba(0,0,0,0.3)" }}>
+                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12, gap: 12 }}>
+                    <h3 style={{ margin: 0, fontSize: 14 }}>Cluster <code>{clusterId.startsWith(CDF_NS) ? `cdf:${clusterId.slice(CDF_NS.length)}` : prefixed(clusterId)}</code></h3>
+                    <button onClick={onClose} style={{ border: 0, background: "transparent", fontSize: 18, cursor: "pointer", lineHeight: 1 }}>×</button>
+                </div>
+                {memberIris.map((iri) => {
+                    const info = orgInfo.get(iri)
+                    return (
+                        <div key={iri} style={{ marginBottom: 14 }}>
+                            <div style={{ fontSize: 11, color: "#666", marginBottom: 4 }}><code>{prefixed(iri)}</code></div>
+                            <table style={{ borderCollapse: "collapse", fontSize: 12, width: "100%" }}>
+                                <tbody>
+                                    {criteriaPredicates.map((p) => (
+                                        <tr key={p}>
+                                            <td style={{ padding: "2px 8px", color: "#555", whiteSpace: "nowrap", verticalAlign: "top", width: 1 }}>{prefixed(p)}</td>
+                                            <td style={{ padding: "2px 8px" }}>{info?.get(p)?.[0] ?? <span style={{ color: "#bbb" }}>—</span>}</td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                    )
+                })}
+                {manualHere.length > 0 && (
+                    <div style={{ marginTop: 16, paddingTop: 12, borderTop: "1px solid #ddd" }}>
+                        <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 6 }}>Manual matches</div>
+                        {manualHere.map(([a, b], i) => (
+                            <div key={i} style={{ fontSize: 11, color: "#555", marginBottom: 2 }}>
+                                <code>{prefixed(a)}</code> <span style={{ color: "#999" }}>owl:sameAs</span> <code>{prefixed(b)}</code>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default function MatchGraph() {
+    const [showDuplications, setShowDuplications] = useState(true)
+    const [show1to1, setShow1to1] = useState(false)
+    const [openCluster, setOpenCluster] = useState(null)
+
+    const { nodes, edges, members, clusterOf, columns, colors, columnTitles, columnBands, columnHeaderStyle, nodeY } = useMemo(() => {
+        const r = loadMatch(federationTtl, matchesTtl, mergedTtl, { showDuplications, show1to1 })
+        const clusterOf = new Map()
+        for (const [c, ms] of r.members) for (const m of ms) clusterOf.set(m, c)
+
+        for (const n of r.nodes) {
+            if (n.isCluster) n.subtitle = n.id.startsWith(CDF_NS) ? `cdf:${n.id.slice(CDF_NS.length)}` : prefixed(n.id)
+            else {                                     // a source (dedup) node
+                n.label = sourceCode(n.id)
+                n.subtitle = orgInfo.get(n.id)?.get(SCHEMA_IDENTIFIER)?.[0]
+            }
+        }
+        // Drop columns that ended up empty (schemas with no source duplication when
+        // collapsed) so they don't leave a blank tinted band.
+        const columns = r.columns.filter((c) => r.nodes.some((n) => n.type === c))
+        return { ...r, clusterOf, columns }
+    }, [showDuplications, show1to1])
+
+    const handleNodeClick = (_, node) => {
+        if (node.id.startsWith("__")) return            // header / band decoration
+        const cid = members.has(node.id) ? node.id : clusterOf.get(node.id)
+        if (cid) setOpenCluster({ clusterId: cid, memberIris: members.get(cid) ?? [] })
+    }
+
+    return (
+        <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+            <div style={{ display: "flex", gap: "1rem", alignItems: "center", padding: "0.5rem 1rem", fontSize: 13, borderBottom: "1px solid #ddd" }}>
+                <label style={{ display: "inline-flex", alignItems: "center", gap: "0.25rem" }}>
+                    <input type="checkbox" checked={showDuplications} onChange={(e) => setShowDuplications(e.target.checked)} />
+                    Show duplications across sources
+                </label>
+                <label style={{ display: "inline-flex", alignItems: "center", gap: "0.25rem", color: showDuplications ? undefined : "#bbb" }}>
+                    <input type="checkbox" checked={show1to1} disabled={!showDuplications} onChange={(e) => setShow1to1(e.target.checked)} />
+                    Show 1:1 clusters
+                </label>
+            </div>
+            <div style={{ flex: 1, minHeight: 0 }}>
+                <ColumnGraph key={`${showDuplications}-${show1to1}`} nodes={nodes} edges={edges}
+                    columns={columns} colors={colors} nodeY={nodeY}
+                    columnTitles={columnTitles} columnBands={columnBands} columnHeaderStyle={columnHeaderStyle}
+                    nodeWidth={150} colSpacing={236} onNodeClick={handleNodeClick} />
+            </div>
+            {openCluster && <MemberDetailsModal clusterId={openCluster.clusterId} memberIris={openCluster.memberIris} onClose={() => setOpenCluster(null)} />}
+        </div>
+    )
+}

package/webapp/src/MergeTables.jsx

@@ -0,0 +1,61 @@
+// Merge view: every org with its per-source field values and conflict
+// highlighting; each org's services are nested (indented) beneath it.
+// Reads:  mergedOrgs from mergeOrgs.js (← data/pipeline/merged.ttl + provenance.ttl)
+// Does:   renders the Merge page (compact / wide <OrgCard>, toggleable)
+
+import OrgCard from "./OrgCard.jsx"
+import { mergedOrgs } from "./mergeOrgs.js"
+import React, { useState } from "react"
+
+const SCHEMA_SERVICE = "schema:Service"
+const PROVIDER = "http://schema.org/provider"
+const providerOf = (e) => e.fields.find((f) => f.predicate === PROVIDER)?.values[0]?.raw
+
+// Top-level orgs keep their existing (conflict-sorted) order; services are
+// grouped under their provider org. Any service whose provider isn't a merged
+// org falls through as an orphan, rendered at the end.
+const orgs = mergedOrgs.filter((e) => e.type !== SCHEMA_SERVICE)
+const orgIris = new Set(orgs.map((o) => o.iri))
+const servicesByOrg = new Map()
+const orphanServices = []
+for (const e of mergedOrgs) {
+    if (e.type !== SCHEMA_SERVICE) continue
+    const provider = providerOf(e)
+    if (provider && orgIris.has(provider)) {
+        if (!servicesByOrg.has(provider)) servicesByOrg.set(provider, [])
+        servicesByOrg.get(provider).push(e)
+    } else {
+        orphanServices.push(e)
+    }
+}
+
+export default function MergeTables() {
+    const [compact, setCompact] = useState(true)
+    const [highlight, setHighlight] = useState(true)
+    const service = (svc) => (
+        <div key={svc.iri} style={{ marginLeft: "1.5rem", borderLeft: "2px solid #e0e0e0", paddingLeft: "0.75rem" }}>
+            <OrgCard org={svc} compact={compact} highlight={highlight} />
+        </div>
+    )
+    return (
+        <div className="page" style={{ overflowY: "auto", height: "100%" }}>
+            <div style={{ display: "flex", gap: "1rem", marginBottom: "0.75rem", fontSize: 13 }}>
+                <label style={{ display: "flex", alignItems: "center", gap: "0.25rem" }}>
+                    <input type="checkbox" checked={compact} onChange={(e) => setCompact(e.target.checked)} />
+                    Compact view
+                </label>
+                <label style={{ display: "flex", alignItems: "center", gap: "0.25rem" }}>
+                    <input type="checkbox" checked={highlight} onChange={(e) => setHighlight(e.target.checked)} />
+                    Highlight conflicts
+                </label>
+            </div>
+            {orgs.map((org) => (
+                <React.Fragment key={org.iri}>
+                    <OrgCard org={org} compact={compact} highlight={highlight} />
+                    {(servicesByOrg.get(org.iri) ?? []).map(service)}
+                </React.Fragment>
+            ))}
+            {orphanServices.map(service)}
+        </div>
+    )
+}

package/webapp/src/OrgCard.jsx

@@ -0,0 +1,126 @@
+// Renders one organisation as a card (narrow key/value, or wide per-source table)
+// with source tags and conflict highlighting. Also exports the conflict helpers.
+// Reads:  config/federation.ttl, data/ingest/ingest-log.ttl (via sourceMeta.js);
+//         org objects from loadMerge.js
+// Does:   renders <OrgCard>; exports EXPECTED_MULTI, isConflict (used by mergeOrgs, MergeTables)
+
+import { federationTtl, ingestLogTtl as logTtl } from "./instanceData.js"
+import Card, { KeyValueTable } from "./Card.jsx"
+import { loadHarvestBySource, loadSourceMeta } from "./sourceMeta.js"
+import { CDP, parseTtl } from "@directory-builder/core/utils"
+import React, { useState } from "react"
+
+// org.columns are one entry per contributing record (resolved in loadMerge); look
+// up source display data in config (notation, label) and the harvest log (time).
+const sourceMeta = loadSourceMeta(federationTtl)
+const harvestBySource = loadHarvestBySource(logTtl)
+const sourceCode = (iri) => sourceMeta.get(iri).notation
+const tagTitle = (iri) => {
+    const label = sourceMeta.get(iri).label
+    const t = harvestBySource.get(iri)
+    return t ? `${label}\n\nharvested ${t.slice(0, 19).replace("T", " ")}` : label
+}
+
+// Predicates where one value per contributing source is expected, not a merge
+// conflict: target fields the federation declares :multiValued, plus the
+// engine's own cdp:fromSource.
+const fedQuads = parseTtl(federationTtl)
+const multiFields = new Set(fedQuads.filter((q) => q.predicate.value === `${CDP}multiValued` && q.object.value === "true").map((q) => q.subject.value))
+export const EXPECTED_MULTI = new Set([`${CDP}fromSource`,
+    ...fedQuads.filter((q) => multiFields.has(q.subject.value) && q.predicate.value === `${CDP}targetPredicate`).map((q) => q.object.value)])
+export const isConflict = (f) => !EXPECTED_MULTI.has(f.predicate) && f.values.length > 1
+
+const CONFLICT_LEVELS = [
+    { color: "#fca5a5", width: 2, bg: "rgba(220, 38, 38, 0.08)" },
+    { color: "#f87171", width: 3, bg: "rgba(220, 38, 38, 0.16)" },
+    { color: "#ef4444", width: 4, bg: "rgba(220, 38, 38, 0.24)" },
+    { color: "#b91c1c", width: 5, bg: "rgba(220, 38, 38, 0.32)" },
+]
+const conflictStyle = (n) => {
+    if (n <= 1) return undefined
+    const lvl = CONFLICT_LEVELS[Math.min(n - 2, CONFLICT_LEVELS.length - 1)]
+    return {
+        outline: `${lvl.width}px solid ${lvl.color}`,
+        borderRadius: 2,
+        backgroundColor: lvl.bg,
+        padding: "0 4px",
+        marginRight: 6,
+    }
+}
+
+function SourceTags({ sources }) {
+    return (
+        <>
+            {sources.map((iri, i) => (
+                <span key={i} className="source-tag" title={tagTitle(iri)}>{sourceCode(iri)}</span>
+            ))}
+        </>
+    )
+}
+
+function ValueCell({ values, highlight }) {
+    const [idx, setIdx] = useState(0)
+    // idx persists across re-renders, so clamp when `values` shrinks (e.g.
+    // rendering final.ttl where every (s,p) has exactly one value).
+    const safeIdx = idx % values.length
+    const cur = values[safeIdx]
+    const multi = values.length > 1
+    const style = highlight ? conflictStyle(values.length) : undefined
+    return (
+        <>
+            {multi && (
+                <span className="flip">
+                    <button className="flip-btn" onClick={() => setIdx((safeIdx - 1 + values.length) % values.length)}>◀</button>
+                    <span className="flip-counter">{safeIdx + 1}/{values.length}</span>
+                    <button className="flip-btn" onClick={() => setIdx((safeIdx + 1) % values.length)}>▶</button>
+                </span>
+            )}
+            <span className="value-text" title={cur.raw ?? cur.value} style={style}>{cur.value}</span>
+            <SourceTags sources={cur.sources} />
+        </>
+    )
+}
+
+function OrgCardNarrow({ org, highlight }) {
+    return <KeyValueTable rows={org.fields.map((f) => ({ key: f.predicate, label: f.predLabel, value: <ValueCell values={f.values} highlight={highlight && isConflict(f)} /> }))} />
+}
+
+function OrgCardWide({ org, highlight }) {
+    const columns = org.columns
+    return (
+        <table>
+            <thead>
+                <tr>
+                    <th></th>
+                    {columns.map((c) => (
+                        <th key={c.record} title={tagTitle(c.source)}>
+                            <span className="source-tag">{sourceCode(c.source)}</span>
+                        </th>
+                    ))}
+                </tr>
+            </thead>
+            <tbody>
+                {org.fields.map((f) => {
+                    const conflict = highlight && isConflict(f) ? conflictStyle(f.values.length) : undefined
+                    return (
+                        <tr key={f.predicate}>
+                            <td>{f.predLabel}</td>
+                            {columns.map((c) => {
+                                const v = f.values.find((val) => val.records.includes(c.record))
+                                return <td key={c.record} title={v?.raw ?? v?.value}>{v && <span className="value-text" style={{ maxWidth: "50ch", ...conflict }}>{v.value}</span>}</td>
+                            })}
+                        </tr>
+                    )
+                })}
+            </tbody>
+        </table>
+    )
+}
+
+export default function OrgCard({ org, compact, highlight }) {
+    return (
+        <Card title={org.label} tag={org.type}>
+            {compact ? <OrgCardNarrow org={org} highlight={highlight} /> : <OrgCardWide org={org} highlight={highlight} />}
+        </Card>
+    )
+}

package/webapp/src/Pipeline.jsx

@@ -0,0 +1,41 @@
+// Pipeline view: the fetch→lift→…→resolve step graph the engines journaled
+// while running — evidence of the executed pipeline.
+// Reads:  data/ingest/ingest-log.ttl, data/pipeline/federate-log.ttl,
+//         config/federation.ttl (via loadPipeline.js)
+// Does:   renders the Pipeline page (horizontal <ColumnGraph>) with a Source
+//         lane-header per Fetch and payload labels on the edges
+
+import { federationTtl, ingestLogTtl, federateLogTtl } from "./instanceData.js"
+import { loadPipeline } from "./loadPipeline.js"
+import ColumnGraph from "./ColumnGraph.jsx"
+import React from "react"
+
+const COLUMNS = ["Source", "Fetch", "Lift", "Clean", "Map", "Input", "Match", "Merge", "Resolve", "End"]
+const CENTER_COLUMNS = ["Clean", "Map", "Input", "Match", "Merge", "Resolve", "End"]
+const COLORS = {
+    Fetch:   "#d4e7ff",
+    Lift:    "#e6f3d8",
+    Clean:   "#fff1a8",
+    Map:     "#f4cfe0",
+    Match:   "#e2d4f4",
+    Merge:   "#cfe9d8",
+    Resolve: "#c5e0e8",
+}
+
+const { nodes, edges } = loadPipeline([ingestLogTtl, federateLogTtl], federationTtl)
+
+export default function Pipeline() {
+    return (
+        <ColumnGraph
+            nodes={nodes}
+            edges={edges}
+            columns={COLUMNS}
+            colors={COLORS}
+            centerColumns={CENTER_COLUMNS}
+            direction="vertical"
+            colSpacing={120}
+            siblingGap={240}
+            nodeWidth={150}
+        />
+    )
+}