// sulo-explorer.jsx — Interactive Postcard Explorer + AI Text-to-KG Demo // Nodes positioned to match the official SULO postcard layout const GRAPH_NODES = [ { id: 'owl:Thing', x: 70, y: 250, color: '#64748B', r: 30, def: 'The top-level OWL class. Everything in SULO is a subclass of owl:Thing.', examples: ['Any entity'] }, { id: 'Process', x: 220, y: 110, color: '#F59E0B', r: 32, def: 'Something that unfolds over time, with participants. Subclass of owl:Thing.', examples: ['Diagnosis', 'Drug administration', 'Baking', 'Surgery'] }, { id: 'Object', x: 220, y: 310, color: '#3B82F6', r: 32, def: 'Any physical or non-physical thing that exists independently. Subclass of owl:Thing.', examples: ['Patient', 'Drug', 'Pizza', 'Gene'] }, { id: 'SpatialObject', x: 355, y: 330, color: '#60A5FA', r: 22, def: 'An object that occupies space. Subclass of Object.', examples: ['Organ', 'Building', 'Region'] }, { id: 'Feature', x: 460, y: 200, color: '#10B981', r: 28, def: 'An intrinsic, contextual, or attributed characteristic. Subclass of owl:Thing.', examples: ['Severity', 'Color', 'Blood pressure'] }, { id: 'Role', x: 580, y: 100, color: '#34D399', r: 22, def: 'A contextual function played by an object in a setting. Subclass of Feature.', examples: ['Patient role', 'Prescriber role', 'Ingredient role'] }, { id: 'Quality', x: 595, y: 185, color: '#6EE7B7', r: 22, def: 'An intrinsic property of an object or process. Subclass of Feature.', examples: ['Color', 'Mass', 'Charge', 'Shape'] }, { id: 'Capability', x: 580, y: 270, color: '#A7F3D0', r: 22, def: 'A disposition or power of an object. Subclass of Feature.', examples: ['Solubility', 'Drug resistance', 'Toxicity'] }, { id: 'InformationObject', x: 700, y: 185, color: '#06B6D4', r: 26, def: 'A representational entity — data, codes, documents, identifiers. Has refersTo relation to owl:Thing.', examples: ['ICD-10 code', 'FHIR record', 'Lab report', 'Identifier'] }, { id: 'Collection', x: 440, y: 380, color: '#8B5CF6', r: 24, def: 'A group of things. Uses hasItem relation. Subclass of owl:Thing.', examples: ['Patient cohort', 'Dataset', 'Ingredient list'] }, { id: 'Quantity', x: 610, y: 370, color: '#C4B5FD', r: 22, def: 'A measurable amount with value and unit. Subclass of owl:Thing.', examples: ['500 mg', '37 °C', '30 cm', 'pH 7.4'] }, { id: 'Time', x: 780, y: 260, color: '#94A3B8', r: 24, def: 'A temporal entity. Includes Duration, TimeInterval, TimeInstant (with StartTime, EndTime).', examples: ['Date of birth', 'Diagnosis date', 'Duration of treatment'] }, ]; const GRAPH_EDGES = [ // Core semantic relations (solid) { from: 'Process', to: 'Object', label: 'hasParticipant', color: '#3B82F6', dashed: false, curve: -30 }, { from: 'Object', to: 'Feature', label: 'hasFeature', color: '#10B981', dashed: false, curve: -20 }, { from: 'Process', to: 'Feature', label: 'hasFeature', color: '#10B981', dashed: false, curve: 20 }, { from: 'Process', to: 'Time', label: 'atTime', color: '#F59E0B', dashed: false, curve: -20 }, { from: 'Collection', to: 'owl:Thing', label: 'hasItem', color: '#8B5CF6', dashed: false, curve: 40 }, { from: 'InformationObject', to: 'owl:Thing', label: 'refersTo', color: '#06B6D4', dashed: false, curve: -70 }, // hasPart self-loops { from: 'Process', to: 'Process', label: 'hasPart', color: '#F59E0B', dashed: true, self: true, selfOffset: 0 }, { from: 'Object', to: 'Object', label: 'hasPart', color: '#3B82F6', dashed: true, self: true, selfOffset: 0 }, // precedes self-loop (offset so it doesn't overlap hasPart) { from: 'Process', to: 'Process', label: 'precedes', color: '#34D399', dashed: false, self: true, selfOffset: 1 }, // subClassOf hierarchy (dotted gray) { from: 'Process', to: 'owl:Thing', label: 'subClassOf', color: '#334155', dashed: true, curve: 30 }, { from: 'Object', to: 'owl:Thing', label: 'subClassOf', color: '#334155', dashed: true, curve: -30 }, { from: 'Feature', to: 'owl:Thing', label: 'subClassOf', color: '#334155', dashed: true, curve: 0 }, { from: 'SpatialObject', to: 'Object', label: 'subClassOf', color: '#334155', dashed: true, curve: 0 }, { from: 'Role', to: 'Feature', label: 'subClassOf', color: '#334155', dashed: true, curve: 0 }, { from: 'Quality', to: 'Feature', label: 'subClassOf', color: '#334155', dashed: true, curve: 0 }, { from: 'Capability', to: 'Feature', label: 'subClassOf', color: '#334155', dashed: true, curve: 0 }, ]; function getNode(id) { return GRAPH_NODES.find(n => n.id === id); } function arrowPath(x1, y1, x2, y2, r2, curve) { const dx = x2 - x1, dy = y2 - y1; const dist = Math.sqrt(dx * dx + dy * dy); const ux = dx / dist, uy = dy / dist; const ex = x2 - ux * (r2 + 8), ey = y2 - uy * (r2 + 8); if (curve === 0) { return `M ${x1} ${y1} L ${ex} ${ey}`; } const mx = (x1 + x2) / 2 - uy * curve, my = (y1 + y2) / 2 + ux * curve; return `M ${x1} ${y1} Q ${mx} ${my} ${ex} ${ey}`; } function selfArrow(x, y, r, offset = 0) { // offset=0 → loops upper-right (hasPart); offset=1 → loops upper-left (precedes) if (offset === 0) { return `M ${x + r} ${y - 4} C ${x + r + 48} ${y - 48} ${x + 4} ${y - 58} ${x - 2} ${y - r - 5}`; } return `M ${x - r + 4} ${y - 8} C ${x - r - 44} ${y - 50} ${x - 8} ${y - 62} ${x + r - 4} ${y - 10}`; } function midpoint(x1, y1, x2, y2, curve) { if (curve === 0) return [(x1 + x2) / 2, (y1 + y2) / 2]; const dx = x2 - x1, dy = y2 - y1; const dist = Math.sqrt(dx * dx + dy * dy); const ux = dx / dist, uy = dy / dist; const mx = (x1 + x2) / 2 - uy * curve, my = (y1 + y2) / 2 + ux * curve; return [mx * 0.5 + (x1 + x2) * 0.25, my * 0.5 + (y1 + y2) * 0.25]; } const PostcardExplorer = () => { const [selected, setSelected] = React.useState(null); const [hoverEdge, setHoverEdge] = React.useState(null); const [edgeDetail, setEdgeDetail] = React.useState(null); const selNode = GRAPH_NODES.find(n => n.id === selected); const handleNodeClick = (id) => { setEdgeDetail(null); setSelected(selected === id ? null : id); }; const handleEdgeClick = (edge) => { setSelected(null); setEdgeDetail(edgeDetail === edge ? null : edge); }; return (
Interactive Postcard

Explore SULO visually.

Click any class or relation to see its definition and usage.

{/* SVG Graph */}
{['#3B82F6','#10B981','#F59E0B','#8B5CF6','#06B6D4','#34D399','#334155','#94A3B8','#C4B5FD','#64748B'].map(c => ( ))} {/* Grid dots */} {Array.from({length: 20}, (_,i) => Array.from({length: 13}, (_,j) => ( )))} {/* Edges */} {GRAPH_EDGES.map((edge, i) => { if (edge.self) { const n = getNode(edge.from); if (!n) return null; const isHov = hoverEdge === i; const d = selfArrow(n.x, n.y, n.r, edge.selfOffset || 0); return ( handleEdgeClick(edge)} /> setHoverEdge(i)} onMouseLeave={() => setHoverEdge(null)} onClick={() => handleEdgeClick(edge)} /> ); } const a = getNode(edge.from), b = getNode(edge.to); if (!a || !b) return null; const isHov = hoverEdge === i; const path = arrowPath(a.x, a.y, b.x, b.y, b.r, edge.curve || 0); const [lx, ly] = midpoint(a.x, a.y, b.x, b.y, edge.curve || 0); return ( setHoverEdge(i)} onMouseLeave={() => setHoverEdge(null)} onClick={() => handleEdgeClick(edge)} /> {isHov && ( {edge.label} )} ); })} {/* Nodes */} {GRAPH_NODES.map(n => { const isSel = selected === n.id; const isDim = selected && !isSel; return ( handleNodeClick(n.id)}> {/* glow */} {isSel && } {/* main circle */} {/* label */} {(() => { const words = n.id === 'owl:Thing' ? ['owl:', 'Thing'] : n.id === 'SpatialObject' ? ['Spatial', 'Object'] : n.id === 'InformationObject' ? ['Information', 'Object'] : [n.id]; const fsize = n.r < 24 ? '9' : '11'; return words.length === 1 ? {words[0]} : {words[0]} {words[1]} ; })()} ); })} {/* Legend */} — solid: domain/range connection - - - dotted: subClassOf
{/* Detail panel */}
{selNode ? (
{selNode.id}

{selNode.def}

EXAMPLES
{selNode.examples.map(ex => ( {ex} ))}
) : edgeDetail ? (
{edgeDetail.label}
Domain
{edgeDetail.from}
Range
{edgeDetail.to}
) : (
◉
Click a class or relation to explore its definition
)}
); }; // ---- AI TEXT-TO-KG DEMO ---- const EXAMPLE_PROMPTS = [ "Maria, a 45-year-old patient, received 500mg amoxicillin to treat a bacterial infection diagnosed on March 15, 2024.", "A Margherita pizza has a 30cm diameter crust topped with tomato sauce and mozzarella. It was baked at 220°C.", "The clinical trial enrolled 120 patients with Type 2 diabetes. Each participant was assigned either metformin or a placebo.", ]; function buildKGPrompt(text) { return `You are a SULO ontology expert. Given this text, extract a knowledge graph using ONLY these SULO classes and properties. SULO Classes: Object, Process, Feature, Role, Quantity, Collection, InformationObject, TimeInstant SULO Properties: hasParticipant (Process→Object), hasFeature (Object|Process→Feature), hasPart (Object→Object), hasMember (Collection→Thing), atTime (Process→TimeInstant) Text: "${text}" Return ONLY valid JSON (no markdown, no explanation) in this exact format: { "nodes": [{"id": "short_id", "label": "Human label", "type": "SULOClass"}], "edges": [{"from": "id1", "to": "id2", "label": "propertyName"}], "turtle": "# short turtle snippet showing 2-3 key triples" } Rules: - Use 4-8 nodes maximum - id must be a short lowercase_underscore string - type must be one of the 8 SULO classes exactly - Keep labels short (2-4 words) - Include only the most important triples`; } const TYPE_COLORS = { Object: '#3B82F6', Process: '#F59E0B', Feature: '#10B981', Role: '#34D399', Quantity: '#6EE7B7', Collection: '#8B5CF6', InformationObject: '#06B6D4', TimeInstant: '#94A3B8' }; function layoutNodes(nodes) { const W = 560, H = 300; const cx = W / 2, cy = H / 2; const positions = {}; const processes = nodes.filter(n => n.type === 'Process'); const others = nodes.filter(n => n.type !== 'Process'); processes.forEach((n, i) => { positions[n.id] = { x: cx - (processes.length - 1) * 70 + i * 140, y: cy - 40 }; }); others.forEach((n, i) => { const angle = (i / others.length) * 2 * Math.PI - Math.PI / 2; const rx = 200, ry = 100; positions[n.id] = { x: cx + rx * Math.cos(angle), y: cy + 60 + ry * Math.sin(angle) }; }); return positions; } const AIDemo = () => { const [input, setInput] = React.useState(EXAMPLE_PROMPTS[0]); const [loading, setLoading] = React.useState(false); const [result, setResult] = React.useState(null); const [error, setError] = React.useState(null); const [view, setView] = React.useState('graph'); const [selNode, setSelNode] = React.useState(null); const run = async () => { setLoading(true); setError(null); setResult(null); setSelNode(null); try { const raw = await window.claude.complete(buildKGPrompt(input)); const json = JSON.parse(raw.trim().replace(/^```json?\n?/, '').replace(/```$/, '')); setResult(json); } catch (e) { setError('Could not parse the response. Please try again.'); console.error(e); } setLoading(false); }; const positions = result ? layoutNodes(result.nodes) : {}; return (
AI Demo

Text → SULO Knowledge Graph.

Describe anything in plain language. Watch it get converted into a SULO-compliant knowledge graph with classes, relations, and RDF triples.

{/* Example pills */}
{EXAMPLE_PROMPTS.map((p, i) => ( ))}
{/* Input */}