\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html; charset=utf-8\",\n },\n },\n );\n}\n\nexport { App, necromundaData, uploadFactionIcon };\n",[],[181],"3638f30a-5dd9-11f1-aa92-1607ee4eb77e","graphUtils.ts","3638f40e-5dd9-11f1-aa92-1607ee4eb77e",18,["D",1780332292387],"import { HEIGHT, WIDTH } from \"./constants.ts\";\r\nimport { markerByType, necromundaData, nodeById } from \"./data.ts\";\r\nimport type {\r\n DisplayLink,\r\n FactionNode,\r\n FactionType,\r\n GraphData,\r\n NetworkStats,\r\n NodeConnection,\r\n RelationshipFilter,\r\n RelationshipTone,\r\n RelationshipType,\r\n SimLink,\r\n SimNode,\r\n} from \"./types.ts\";\r\n\r\nexport function toNodeId(value: string | number | SimNode): string {\r\n return typeof value === \"object\" && value !== null ? value.id : String(value);\r\n}\r\n\r\nexport function labelFromId(value: string): string {\r\n return value\r\n .split(\"_\")\r\n .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\r\n .join(\" \");\r\n}\r\n\r\nexport function relationshipColor(\r\n link: Pick,\r\n): string {\r\n return markerByType.get(link.type)?.color ??\r\n markerByType.get(\"default\")?.color ?? \"#94a3b8\";\r\n}\r\n\r\nexport function relationshipMarkerId(\r\n link: Pick,\r\n): RelationshipType {\r\n return markerByType.has(link.type) ? link.type : \"default\";\r\n}\r\n\r\nexport function factionInitials(node: { name: string }): string {\r\n return node.name\r\n .replace(/^House\\s+/i, \"\")\r\n .split(/\\s+/)\r\n .map((part) => part[0])\r\n .join(\"\")\r\n .slice(0, 3)\r\n .toUpperCase();\r\n}\r\n\r\nexport function relationshipTone(\r\n link: Pick,\r\n): RelationshipTone {\r\n if (link.value > 0) return \"cooperative\";\r\n if (link.value < 0) return \"hostile\";\r\n return \"neutral\";\r\n}\r\n\r\nexport function getStableInitialPosition(\r\n node: FactionNode,\r\n anchors: Record,\r\n): { x: number; y: number } {\r\n const anchor = anchors[node.type];\r\n let hash = 0;\r\n\r\n for (let index = 0; index < node.id.length; index += 1) {\r\n hash = (hash << 5) - hash + node.id.charCodeAt(index);\r\n hash |= 0;\r\n }\r\n\r\n const stableHash = Math.abs(hash);\r\n const angle = ((stableHash % 360) * Math.PI) / 180;\r\n const radius = 44 + (stableHash % 96);\r\n\r\n return {\r\n x: anchor.x + Math.cos(angle) * radius,\r\n y: anchor.y + Math.sin(angle) * radius,\r\n };\r\n}\r\n\r\nexport function getDisplayLink(link: SimLink): DisplayLink {\r\n const sourceId = toNodeId(link.source);\r\n const targetId = toNodeId(link.target);\r\n\r\n return {\r\n value: link.value,\r\n type: link.type,\r\n description: link.description,\r\n sourceId,\r\n targetId,\r\n sourceName: nodeById.get(sourceId)?.name ?? sourceId,\r\n targetName: nodeById.get(targetId)?.name ?? targetId,\r\n };\r\n}\r\n\r\nexport function getCurvedLinkPath(link: SimLink): string {\r\n const source = link.source as SimNode;\r\n const target = link.target as SimNode;\r\n const sourceX = source.x ?? WIDTH / 2;\r\n const sourceY = source.y ?? HEIGHT / 2;\r\n const targetX = target.x ?? WIDTH / 2;\r\n const targetY = target.y ?? HEIGHT / 2;\r\n const dx = targetX - sourceX;\r\n const dy = targetY - sourceY;\r\n const distance = Math.sqrt(dx * dx + dy * dy) || 1;\r\n const sourcePadding = source.size + 12;\r\n const targetPadding = target.size + 24;\r\n const x1 = sourceX + (dx / distance) * sourcePadding;\r\n const y1 = sourceY + (dy / distance) * sourcePadding;\r\n const x2 = targetX - (dx / distance) * targetPadding;\r\n const y2 = targetY - (dy / distance) * targetPadding;\r\n const curve = Math.min(72, Math.max(24, distance * 0.16));\r\n const side = link.value < 0 ? -1 : 1;\r\n const controlX = (x1 + x2) / 2 + (-dy / distance) * curve * side;\r\n const controlY = (y1 + y2) / 2 + (dx / distance) * curve * side;\r\n\r\n return `M${x1},${y1}Q${controlX},${controlY} ${x2},${y2}`;\r\n}\r\n\r\nexport function getNodeConnections(\r\n nodeId: string,\r\n links: SimLink[],\r\n): NodeConnection[] {\r\n return links\r\n .filter((link) =>\r\n toNodeId(link.source) === nodeId || toNodeId(link.target) === nodeId\r\n )\r\n .map((link) => {\r\n const display = getDisplayLink(link);\r\n const neighborId = display.sourceId === nodeId\r\n ? display.targetId\r\n : display.sourceId;\r\n\r\n return {\r\n ...display,\r\n neighborId,\r\n neighborName: nodeById.get(neighborId)?.name ?? neighborId,\r\n };\r\n })\r\n .sort((a, b) =>\r\n Math.abs(b.value) - Math.abs(a.value) ||\r\n a.neighborName.localeCompare(b.neighborName)\r\n );\r\n}\r\n\r\nexport function calculateNetworkStats(graphData: GraphData): NetworkStats {\r\n const positive = graphData.links.filter((link) => link.value > 0).length;\r\n const negative = graphData.links.filter((link) => link.value < 0).length;\r\n const neutral = graphData.links.filter((link) => link.value === 0).length;\r\n const possibleLinks = graphData.nodes.length > 1\r\n ? (graphData.nodes.length * (graphData.nodes.length - 1)) / 2\r\n : 0;\r\n const density = possibleLinks === 0\r\n ? 0\r\n : graphData.links.length / possibleLinks;\r\n const degrees = new Map();\r\n\r\n graphData.nodes.forEach((node) => degrees.set(node.id, 0));\r\n graphData.links.forEach((link) => {\r\n const sourceId = toNodeId(link.source);\r\n const targetId = toNodeId(link.target);\r\n degrees.set(sourceId, (degrees.get(sourceId) ?? 0) + 1);\r\n degrees.set(targetId, (degrees.get(targetId) ?? 0) + 1);\r\n });\r\n\r\n const topHubId = Array.from(degrees.entries()).sort((a, b) =>\r\n b[1] - a[1] || a[0].localeCompare(b[0])\r\n )[0]?.[0];\r\n const strongestRelationship = graphData.links\r\n .slice()\r\n .sort((a, b) =>\r\n Math.abs(b.value) - Math.abs(a.value) ||\r\n relationshipColor(a).localeCompare(relationshipColor(b))\r\n )\r\n .map(getDisplayLink)[0] ?? null;\r\n\r\n return {\r\n positive,\r\n negative,\r\n neutral,\r\n density,\r\n topHubName: topHubId ? nodeById.get(topHubId)?.name ?? topHubId : \"None\",\r\n strongestRelationship,\r\n };\r\n}\r\n\r\nexport function buildFilteredGraph(\r\n activeType: \"all\" | FactionType,\r\n relationshipFilter: RelationshipFilter,\r\n searchTerm: string,\r\n): GraphData {\r\n const normalizedSearch = searchTerm.trim().toLowerCase();\r\n\r\n let nodes: SimNode[] = necromundaData.nodes\r\n .filter((node) => {\r\n const matchesType = activeType === \"all\" || node.type === activeType;\r\n const matchesSearch = normalizedSearch.length === 0 ||\r\n node.name.toLowerCase().includes(normalizedSearch) ||\r\n node.type.toLowerCase().includes(normalizedSearch) ||\r\n node.description.toLowerCase().includes(normalizedSearch);\r\n\r\n return matchesType && matchesSearch;\r\n })\r\n .map((node) => ({ ...node }));\r\n\r\n const nodeIds = new Set(nodes.map((node) => node.id));\r\n\r\n let links: SimLink[] = necromundaData.links\r\n .map((link) => ({\r\n ...link,\r\n source: toNodeId(link.source),\r\n target: toNodeId(link.target),\r\n }))\r\n .filter((link) =>\r\n nodeIds.has(String(link.source)) && nodeIds.has(String(link.target))\r\n );\r\n\r\n if (relationshipFilter === \"positive\") {\r\n links = links.filter((link) => link.value > 0);\r\n } else if (relationshipFilter === \"negative\") {\r\n links = links.filter((link) => link.value < 0);\r\n } else if (relationshipFilter === \"neutral\") {\r\n links = links.filter((link) => link.value === 0);\r\n } else if (relationshipFilter !== \"all\") {\r\n links = links.filter((link) => link.type === relationshipFilter);\r\n }\r\n\r\n const connectedIds = new Set();\r\n links.forEach((link) => {\r\n connectedIds.add(toNodeId(link.source));\r\n connectedIds.add(toNodeId(link.target));\r\n });\r\n\r\n if (relationshipFilter !== \"all\") {\r\n nodes = nodes.filter((node) => connectedIds.has(node.id));\r\n }\r\n\r\n return {\r\n nodes,\r\n links: links.map((link) => ({ ...link })),\r\n };\r\n}\r\n",[],[189],"360d2f4a-5dd9-11f1-994a-1607ee4eb77e","deno.json","360d2ffe-5dd9-11f1-994a-1607ee4eb77e",13,["D",1780332292121],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/98f62cee78e85bfc47c62ed703777c6bc8794f1c/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": true,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"include\": [\"deno:/https/esm.town/**/*\"],\n \"rules\": {\n \"exclude\": [\"no-explicit-any\"]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[],[197],"a96ca9e0-5dd7-11f1-a751-1607ee4eb77e","data.ts","a96caa94-5dd7-11f1-a751-1607ee4eb77e",5,["D",1780331626690],"import { blob } from \"https://esm.town/v/std/blob\";\n\nimport { RELATIONSHIP_MARKERS } from \"./constants.ts\";\nimport type {\n FactionLink,\n FactionNode,\n RelationshipMarker,\n RelationshipType,\n} from \"./types.ts\";\n\nexport const necromundaData: { nodes: FactionNode[]; links: FactionLink[] } = {\n nodes: [\n {\n id: \"cawdor\",\n name: \"House Cawdor\",\n type: \"House\",\n description:\n \"Religious zealots that scavenge the underhive for discarded treasures.\",\n color: \"#b5802a\",\n size: 25,\n image: \"cawdor_icon\",\n },\n {\n id: \"delaque\",\n name: \"House Delaque\",\n type: \"House\",\n description:\n \"Spies and information brokers who deal in secrets and subterfuge.\",\n color: \"#272c34\",\n size: 25,\n image: \"delaque_icon\",\n },\n {\n id: \"escher\",\n name: \"House Escher\",\n type: \"House\",\n description:\n \"A matriarchal house specializing in chemicals and fighting drugs.\",\n color: \"#a02766\",\n size: 25,\n image: \"escher_icon\",\n },\n {\n id: \"goliath\",\n name: \"House Goliath\",\n type: \"House\",\n description:\n \"Hulking, muscle-bound gangers who value strength above all.\",\n color: \"#de4405\",\n size: 25,\n image: \"goliath_icon\",\n },\n {\n id: \"orlock\",\n name: \"House Orlock\",\n type: \"House\",\n description: \"The House of Iron, miners and industry workers.\",\n color: \"#96723e\",\n size: 25,\n image: \"orlock_icon\",\n },\n {\n id: \"van_saar\",\n name: \"House Van Saar\",\n type: \"House\",\n description: \"Technologically advanced and wielding superior weaponry.\",\n color: \"#2a7bb7\",\n size: 25,\n image: \"van_saar_icon\",\n },\n {\n id: \"enforcers\",\n name: \"Palanite Enforcers\",\n type: \"Imperial\",\n description:\n \"Law enforcement of Hive Primus, maintaining order in the upper levels.\",\n color: \"#1e3a73\",\n size: 22,\n image: \"enforcers_icon\",\n },\n {\n id: \"corpse_grinders\",\n name: \"Corpse Grinder Cults\",\n type: \"Cult\",\n description:\n \"Cannibalistic devotees of Khorne who emerge from the corpse-processing facilities.\",\n color: \"#8b0000\",\n size: 20,\n image: \"corpse_grinders_icon\",\n },\n {\n id: \"genestealer_cults\",\n name: \"Genestealer Cults\",\n type: \"Cult\",\n description:\n \"Xenos-infected hive dwellers preparing for the arrival of the Tyranid Hive Fleet.\",\n color: \"#5c2c95\",\n size: 20,\n image: \"genestealer_icon\",\n },\n {\n id: \"helot_cults\",\n name: \"Helot Chaos Cults\",\n type: \"Cult\",\n description: \"Worshippers of the Dark Gods who plot in the shadows.\",\n color: \"#450641\",\n size: 18,\n image: \"helot_icon\",\n },\n {\n id: \"nomads\",\n name: \"Ash Waste Nomads\",\n type: \"Outland\",\n description:\n \"Nomadic tribes that survive in the deadly wastelands outside the hive.\",\n color: \"#8b7d3c\",\n size: 18,\n image: \"nomads_icon\",\n },\n {\n id: \"guild\",\n name: \"Merchant Guild\",\n type: \"Faction\",\n description:\n \"Controls trade throughout the hive, wielding economic power.\",\n color: \"#a68c53\",\n size: 15,\n image: \"guild_icon\",\n },\n {\n id: \"water\",\n name: \"Water Guild\",\n type: \"Faction\",\n description: \"Controls the precious water supplies of the hive.\",\n color: \"#4d8fac\",\n size: 15,\n image: \"water_icon\",\n },\n {\n id: \"spire\",\n name: \"Spire Nobles\",\n type: \"Faction\",\n description:\n \"The ruling elite who rarely descend from their luxurious spire habitats.\",\n color: \"#e1c084\",\n size: 15,\n image: \"spire_icon\",\n },\n ],\n links: [\n {\n source: \"cawdor\",\n target: \"escher\",\n value: -2,\n type: \"hostility\",\n description: \"Religious zealots despise Escher's chemical manipulation.\",\n },\n {\n source: \"cawdor\",\n target: \"delaque\",\n value: -1,\n type: \"suspicion\",\n description: \"Distrust Delaque's secretive ways.\",\n },\n {\n source: \"cawdor\",\n target: \"guild\",\n value: 1,\n type: \"trade\",\n description: \"Supply scavenged materials to the Guild.\",\n },\n {\n source: \"cawdor\",\n target: \"helot_cults\",\n value: -3,\n type: \"war\",\n description: \"Actively hunt down chaos cultists.\",\n },\n {\n source: \"delaque\",\n target: \"spire\",\n value: 2,\n type: \"alliance\",\n description: \"Secret informants for the Spire nobles.\",\n },\n {\n source: \"delaque\",\n target: \"escher\",\n value: -1,\n type: \"rivalry\",\n description: \"Compete for territory and resources.\",\n },\n {\n source: \"delaque\",\n target: \"goliath\",\n value: -2,\n type: \"hostility\",\n description: \"Intellectual versus physical strength conflict.\",\n },\n {\n source: \"delaque\",\n target: \"genestealer_cults\",\n value: 0,\n type: \"observation\",\n description: \"Monitor cultist activities.\",\n },\n {\n source: \"escher\",\n target: \"goliath\",\n value: -2,\n type: \"hostility\",\n description: \"Ancient rivalry between House Escher and House Goliath.\",\n },\n {\n source: \"escher\",\n target: \"guild\",\n value: 1,\n type: \"trade\",\n description: \"Supply stimms and combat drugs.\",\n },\n {\n source: \"escher\",\n target: \"water\",\n value: 1,\n type: \"agreement\",\n description: \"Exchange chemicals for water access.\",\n },\n {\n source: \"goliath\",\n target: \"orlock\",\n value: 1,\n type: \"alliance\",\n description: \"Both value strength and industry.\",\n },\n {\n source: \"goliath\",\n target: \"corpse_grinders\",\n value: -1,\n type: \"conflict\",\n description: \"Territorial disputes in the lower levels.\",\n },\n {\n source: \"goliath\",\n target: \"water\",\n value: -1,\n type: \"dispute\",\n description: \"Conflict over water rights.\",\n },\n {\n source: \"orlock\",\n target: \"van_saar\",\n value: -1,\n type: \"rivalry\",\n description: \"Industrial efficiency versus technological superiority.\",\n },\n {\n source: \"orlock\",\n target: \"guild\",\n value: 2,\n type: \"alliance\",\n description: \"Primary suppliers of raw materials.\",\n },\n {\n source: \"van_saar\",\n target: \"spire\",\n value: 1,\n type: \"trade\",\n description: \"Supply advanced technology.\",\n },\n {\n source: \"van_saar\",\n target: \"enforcers\",\n value: 1,\n type: \"agreement\",\n description: \"Weapons and technology supplier.\",\n },\n {\n source: \"enforcers\",\n target: \"cawdor\",\n value: -1,\n type: \"enforcement\",\n description: \"Religious riots require enforcement.\",\n },\n {\n source: \"enforcers\",\n target: \"corpse_grinders\",\n value: -3,\n type: \"war\",\n description: \"Active hunt for dangerous cultists.\",\n },\n {\n source: \"enforcers\",\n target: \"genestealer_cults\",\n value: -3,\n type: \"war\",\n description: \"Purge xenos infection.\",\n },\n {\n source: \"enforcers\",\n target: \"helot_cults\",\n value: -3,\n type: \"war\",\n description: \"Combat chaos corruption.\",\n },\n {\n source: \"enforcers\",\n target: \"spire\",\n value: 3,\n type: \"control\",\n description: \"Direct agents of Spire control.\",\n },\n {\n source: \"genestealer_cults\",\n target: \"helot_cults\",\n value: -2,\n type: \"hostility\",\n description: \"Competing for converts in the underhive.\",\n },\n {\n source: \"genestealer_cults\",\n target: \"corpse_grinders\",\n value: -2,\n type: \"territory\",\n description: \"Violent territorial conflicts.\",\n },\n {\n source: \"nomads\",\n target: \"guild\",\n value: 1,\n type: \"trade\",\n description: \"Trade exotic wasteland resources.\",\n },\n {\n source: \"nomads\",\n target: \"water\",\n value: 2,\n type: \"alliance\",\n description: \"Wasteland water prospecting.\",\n },\n {\n source: \"guild\",\n target: \"water\",\n value: 2,\n type: \"alliance\",\n description: \"Partners in controlling hive resources.\",\n },\n {\n source: \"guild\",\n target: \"spire\",\n value: 2,\n type: \"service\",\n description: \"Economic agents of the Spire.\",\n },\n {\n source: \"water\",\n target: \"spire\",\n value: 2,\n type: \"service\",\n description: \"Control water on behalf of Spire nobles.\",\n },\n ],\n};\n\nexport const nodeTypes: Array<\"all\" | FactionNode[\"type\"]> = [\n \"all\",\n ...Array.from(new Set(necromundaData.nodes.map((node) => node.type))),\n];\n\nexport const nodeById = new Map(\n necromundaData.nodes.map((node) => [node.id, node]),\n);\n\nexport const markerByType = new Map(\n RELATIONSHIP_MARKERS.map((marker) => [marker.id, marker]),\n);\n\nexport async function uploadFactionIcon(\n factionId: string,\n imageFile: Blob | File,\n): Promise {\n try {\n const factionExists = necromundaData.nodes.some((node) =>\n node.id === factionId\n );\n\n if (!factionExists) {\n throw new Error(`Unknown faction id: ${factionId}`);\n }\n\n const iconKey = `necromunda_${factionId}_icon`;\n await blob.set(iconKey, imageFile);\n console.log(`Uploaded icon for ${factionId}`);\n return true;\n } catch (error) {\n console.error(\"Error uploading icon:\", error);\n return false;\n }\n}\n",[],[205],"a974bcb6-5dd7-11f1-a7f6-1607ee4eb77e","constants.ts","a974bd9c-5dd7-11f1-a7f6-1607ee4eb77e",6,["D",1780331626745],"import type {\n FactionType,\n LayoutMode,\n RelationshipFilterOption,\n RelationshipMarker,\n} from \"./types.ts\";\n\nexport const WIDTH = 1280;\nexport const HEIGHT = 800;\n\nexport const RELATIONSHIP_MARKERS: RelationshipMarker[] = [\n { id: \"alliance\", color: \"#4ade80\", label: \"Alliance\" },\n { id: \"trade\", color: \"#60a5fa\", label: \"Trade\" },\n { id: \"agreement\", color: \"#60a5fa\", label: \"Agreement\" },\n { id: \"service\", color: \"#a78bfa\", label: \"Service\" },\n { id: \"control\", color: \"#f0abfc\", label: \"Control\" },\n { id: \"hostility\", color: \"#fb7185\", label: \"Hostility\" },\n { id: \"rivalry\", color: \"#fbbf24\", label: \"Rivalry\" },\n { id: \"war\", color: \"#ef4444\", label: \"War\" },\n { id: \"conflict\", color: \"#f97316\", label: \"Conflict\" },\n { id: \"dispute\", color: \"#f97316\", label: \"Dispute\" },\n { id: \"suspicion\", color: \"#fbbf24\", label: \"Suspicion\" },\n { id: \"observation\", color: \"#cbd5e1\", label: \"Observation\" },\n { id: \"territory\", color: \"#f97316\", label: \"Territory\" },\n { id: \"enforcement\", color: \"#93c5fd\", label: \"Enforcement\" },\n { id: \"default\", color: \"#94a3b8\", label: \"Other\" },\n];\n\nexport const RELATIONSHIP_FILTERS: RelationshipFilterOption[] = [\n { id: \"all\", label: \"All relationships\" },\n { id: \"positive\", label: \"Cooperation\" },\n { id: \"negative\", label: \"Conflict\" },\n { id: \"neutral\", label: \"Neutral\" },\n { id: \"war\", label: \"War\" },\n { id: \"trade\", label: \"Trade\" },\n { id: \"alliance\", label: \"Alliance\" },\n { id: \"control\", label: \"Control\" },\n];\n\nexport const TYPE_ANCHORS: Record = {\n House: { x: WIDTH * 0.46, y: HEIGHT * 0.45 },\n Imperial: { x: WIDTH * 0.36, y: HEIGHT * 0.58 },\n Cult: { x: WIDTH * 0.43, y: HEIGHT * 0.73 },\n Outland: { x: WIDTH * 0.77, y: HEIGHT * 0.22 },\n Faction: { x: WIDTH * 0.66, y: HEIGHT * 0.38 },\n};\n\nexport const RADIAL_TYPE_ANCHORS: Record<\n FactionType,\n { x: number; y: number }\n> = {\n House: { x: WIDTH * 0.5, y: HEIGHT * 0.5 },\n Imperial: { x: WIDTH * 0.36, y: HEIGHT * 0.25 },\n Cult: { x: WIDTH * 0.35, y: HEIGHT * 0.74 },\n Outland: { x: WIDTH * 0.74, y: HEIGHT * 0.25 },\n Faction: { x: WIDTH * 0.73, y: HEIGHT * 0.69 },\n};\n\nexport const TENSION_TYPE_ANCHORS: Record<\n FactionType,\n { x: number; y: number }\n> = {\n House: { x: WIDTH * 0.5, y: HEIGHT * 0.5 },\n Imperial: { x: WIDTH * 0.2, y: HEIGHT * 0.48 },\n Cult: { x: WIDTH * 0.52, y: HEIGHT * 0.77 },\n Outland: { x: WIDTH * 0.82, y: HEIGHT * 0.33 },\n Faction: { x: WIDTH * 0.66, y: HEIGHT * 0.22 },\n};\n\nexport const LAYOUT_OPTIONS: Array<{ id: LayoutMode; label: string }> = [\n { id: \"clustered\", label: \"Clustered\" },\n { id: \"radial\", label: \"Radial\" },\n { id: \"tension\", label: \"Tension\" },\n];\n",[],[213],"367c8dc2-5dd9-11f1-a272-1607ee4eb77e","GraphStats.tsx","367c8e6c-5dd9-11f1-a272-1607ee4eb77e",20,["D",1780332292849],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\r\nimport React from \"https://esm.sh/react@18.2.0\";\r\n\r\nimport type { GraphData, NetworkStats } from \"./types.ts\";\r\n\r\ninterface GraphStatsProps {\r\n graphData: GraphData;\r\n networkStats: NetworkStats;\r\n}\r\n\r\nexport function GraphStats(\r\n { graphData, networkStats }: GraphStatsProps,\r\n): React.ReactElement {\r\n return (\r\n

\r\n \r\n {graphData.nodes.length} factions shown\r\n \r\n \r\n {graphData.links.length} relationships\r\n \r\n \r\n {networkStats.positive} cooperative\r\n \r\n \r\n {networkStats.negative} hostile\r\n \r\n \r\n {networkStats.neutral} neutral\r\n \r\n \r\n {Math.round(networkStats.density * 100)}% density\r\n \r\n \r\n {networkStats.topHubName} hub\r\n \r\n {networkStats.strongestRelationship\r\n ? (\r\n \r\n \r\n {networkStats.strongestRelationship.sourceName} /{\" \"}\r\n {networkStats.strongestRelationship.targetName}\r\n {\" \"}\r\n strongest\r\n \r\n )\r\n : null}\r\n

\r\n );\r\n}\r\n",[],[221],"36301172-5dd9-11f1-9c7e-1607ee4eb77e","GraphLegend.tsx","36301258-5dd9-11f1-9c7e-1607ee4eb77e",17,["D",1780332292352],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\r\nimport React from \"https://esm.sh/react@18.2.0\";\r\n\r\nimport { RELATIONSHIP_MARKERS } from \"./constants.ts\";\r\n\r\nexport function GraphLegend(): React.ReactElement {\r\n return (\r\n

\r\n

Relationship legend

\r\n

\r\n {RELATIONSHIP_MARKERS.filter((marker) => marker.id !== \"default\").map((\r\n marker,\r\n ) => (\r\n

\r\n \r\n {marker.label}\r\n

\r\n ))}\r\n

\r\n

\r\n );\r\n}\r\n",[],[229],"36297754-5dd9-11f1-b09f-1607ee4eb77e","GraphDetails.tsx","362979ca-5dd9-11f1-b09f-1607ee4eb77e",16,["D",1780332292295],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\r\nimport React from \"https://esm.sh/react@18.2.0\";\r\n\r\nimport { labelFromId, relationshipTone } from \"./graphUtils.ts\";\r\nimport type { DisplayLink, FactionNode, NodeConnection } from \"./types.ts\";\r\n\r\ninterface GraphDetailsProps {\r\n focusedNode: FactionNode | null;\r\n focusedLink: DisplayLink | null;\r\n focusedNodeConnections: NodeConnection[];\r\n}\r\n\r\nexport function GraphDetails(\r\n { focusedNode, focusedLink, focusedNodeConnections }: GraphDetailsProps,\r\n): React.ReactElement {\r\n const focusedNodeTypeClass = focusedNode\r\n ? `selected-faction-heading selected-faction-${focusedNode.type.toLowerCase()}`\r\n : \"\";\r\n\r\n return (\r\n

\r\n {focusedNode\r\n ? (\r\n <>\r\n

Selected faction

\r\n

{focusedNode.name}

\r\n

{focusedNode.type}

\r\n

{focusedNode.description}

\r\n {focusedNodeConnections.length > 0\r\n ? (\r\n \r\n {focusedNodeConnections.slice(0, 5).map((connection) => (\r\n \r\n {connection.neighborName}\r\n \r\n {labelFromId(connection.type)} {connection.value > 0\r\n ? `+${connection.value}`\r\n : connection.value}\r\n \r\n

\r\n ))}\r\n \r\n )\r\n : (\r\n

\r\n No visible relationships under the current filters.\r\n

\r\n )}\r\n \r\n )\r\n : focusedLink\r\n ? (\r\n <>\r\n

Selected relationship

\r\n

{focusedLink.sourceName} → {focusedLink.targetName}

\r\n

\r\n {labelFromId(focusedLink.type)} ({focusedLink.value})\r\n

\r\n

{focusedLink.description}

\r\n \r\n )\r\n : (\r\n <>\r\n

Interaction

\r\n

Select a node or relationship

\r\n

\r\n Hover to trace immediate connections. Click a faction or\r\n relationship to pin its details here. Drag nodes to inspect\r\n crowded regions, and use scroll or trackpad pinch to zoom.\r\n

\r\n \r\n )}\r\n \r\n );\r\n}\r\n",[],[237],"362104e8-5dd9-11f1-b129-1607ee4eb77e","GraphControls.tsx","36210592-5dd9-11f1-b129-1607ee4eb77e",15,["D",1780332292251],"/// \r\n/** @jsxImportSource https://esm.sh/react@18.2.0 */\r\nimport React from \"https://esm.sh/react@18.2.0\";\r\n\r\nimport { LAYOUT_OPTIONS, RELATIONSHIP_FILTERS } from \"./constants.ts\";\r\nimport { nodeTypes } from \"./data.ts\";\r\nimport type {\r\n FactionType,\r\n LabelMode,\r\n LayoutMode,\r\n RelationshipFilter,\r\n} from \"./types.ts\";\r\n\r\ninterface GraphControlsProps {\r\n activeType: \"all\" | FactionType;\r\n relationshipFilter: RelationshipFilter;\r\n layoutMode: LayoutMode;\r\n labelMode: LabelMode;\r\n searchTerm: string;\r\n onTypeChange: (value: \"all\" | FactionType) => void;\r\n onRelationshipFilterChange: (value: RelationshipFilter) => void;\r\n onLayoutModeChange: (value: LayoutMode) => void;\r\n onLabelModeChange: (value: LabelMode) => void;\r\n onSearchTermChange: (value: string) => void;\r\n onReset: () => void;\r\n}\r\n\r\nexport function GraphControls({\r\n activeType,\r\n relationshipFilter,\r\n layoutMode,\r\n labelMode,\r\n searchTerm,\r\n onTypeChange,\r\n onRelationshipFilterChange,\r\n onLayoutModeChange,\r\n onLabelModeChange,\r\n onSearchTermChange,\r\n onReset,\r\n}: GraphControlsProps): React.ReactElement {\r\n return (\r\n

\r\n

\r\n Faction type\r\n \r\n {nodeTypes.map((type) => (\r\n onTypeChange(type)}\r\n >\r\n {type === \"all\" ? \"All\" : type}\r\n \r\n ))}\r\n

\r\n

\r\n\r\n

\r\n \r\n Relationship lens\r\n \r\n \r\n onRelationshipFilterChange(\r\n event.currentTarget.value as RelationshipFilter,\r\n )}\r\n aria-label=\"Filter by relationship type\"\r\n >\r\n {RELATIONSHIP_FILTERS.map((filter) => (\r\n \r\n ))}\r\n \r\n

\r\n\r\n

\r\n Layout\r\n \r\n onLayoutModeChange(event.currentTarget.value as LayoutMode)}\r\n >\r\n {LAYOUT_OPTIONS.map((option) => (\r\n \r\n ))}\r\n \r\n

\r\n\r\n

\r\n Labels\r\n \r\n {([\"all\", \"focused\", \"none\"] as LabelMode[]).map((mode) => (\r\n onLabelModeChange(mode)}\r\n >\r\n {mode === \"all\" ? \"All\" : mode === \"focused\" ? \"Focus\" : \"Off\"}\r\n \r\n ))}\r\n

\r\n \r\n\r\n \r\n Search\r\n onSearchTermChange(event.currentTarget.value)}\r\n />\r\n \r\n\r\n \r\n \r\n );\r\n}\r\n",[],[245],"36142a16-5dd9-11f1-9c7e-1607ee4eb77e","ForceDirectedGraph.tsx","36142ade-5dd9-11f1-9c7e-1607ee4eb77e",14,["D",1780332292155],"/// \r\n/** @jsxImportSource https://esm.sh/react@18.2.0 */\r\nimport * as d3 from \"https://esm.sh/d3@7.8.5\";\r\nimport React, {\r\n useEffect,\r\n useMemo,\r\n useRef,\r\n useState,\r\n} from \"https://esm.sh/react@18.2.0\";\r\nimport { blob } from \"https://esm.town/v/std/blob\";\r\n\r\nimport {\r\n HEIGHT,\r\n RADIAL_TYPE_ANCHORS,\r\n RELATIONSHIP_MARKERS,\r\n TENSION_TYPE_ANCHORS,\r\n TYPE_ANCHORS,\r\n WIDTH,\r\n} from \"./constants.ts\";\r\nimport { necromundaData } from \"./data.ts\";\r\nimport {\r\n buildFilteredGraph,\r\n calculateNetworkStats,\r\n factionInitials,\r\n getCurvedLinkPath,\r\n getDisplayLink,\r\n getNodeConnections,\r\n getStableInitialPosition,\r\n labelFromId,\r\n relationshipColor,\r\n relationshipMarkerId,\r\n relationshipTone,\r\n toNodeId,\r\n} from \"./graphUtils.ts\";\r\nimport type {\r\n DisplayLink,\r\n FactionNode,\r\n LabelMode,\r\n LayoutMode,\r\n NetworkStats,\r\n RelationshipFilter,\r\n SimLink,\r\n SimNode,\r\n} from \"./types.ts\";\r\nimport { GraphControls } from \"./GraphControls.tsx\";\r\nimport { GraphDetails } from \"./GraphDetails.tsx\";\r\nimport { GraphLegend } from \"./GraphLegend.tsx\";\r\nimport { GraphStats } from \"./GraphStats.tsx\";\r\n\r\nexport function ForceDirectedGraph(): React.ReactElement {\r\n const svgRef = useRef(null);\r\n const shellRef = useRef(null);\r\n const zoomApiRef = useRef<\r\n { zoomIn: () => void; zoomOut: () => void; reset: () => void } | null\r\n >(null);\r\n const [focusedNode, setFocusedNode] = useState(null);\r\n const [focusedLink, setFocusedLink] = useState(null);\r\n const [activeType, setActiveType] = useState<\"all\" | FactionNode[\"type\"]>(\r\n \"all\",\r\n );\r\n const [relationshipFilter, setRelationshipFilter] = useState<\r\n RelationshipFilter\r\n >(\"all\");\r\n const [layoutMode, setLayoutMode] = useState(\"clustered\");\r\n const [labelMode, setLabelMode] = useState(\"all\");\r\n const [searchTerm, setSearchTerm] = useState(\"\");\r\n const [icons, setIcons] = useState>({});\r\n const [loadingIcons, setLoadingIcons] = useState(true);\r\n\r\n const graphData = useMemo(\r\n () => buildFilteredGraph(activeType, relationshipFilter, searchTerm),\r\n [activeType, relationshipFilter, searchTerm],\r\n );\r\n\r\n const networkStats = useMemo(\r\n () => calculateNetworkStats(graphData),\r\n [graphData],\r\n );\r\n\r\n const focusedNodeConnections = useMemo(\r\n () => (focusedNode\r\n ? getNodeConnections(focusedNode.id, graphData.links)\r\n : []),\r\n [focusedNode, graphData.links],\r\n );\r\n\r\n useEffect(() => {\r\n let cancelled = false;\r\n const objectUrls: string[] = [];\r\n\r\n async function loadIcons(): Promise {\r\n setLoadingIcons(true);\r\n const loadedIcons: Record = {};\r\n\r\n for (const node of necromundaData.nodes) {\r\n try {\r\n const iconKey = `necromunda_${node.id}_icon`;\r\n const storedIcon = await blob.get(iconKey);\r\n const iconBlob = storedIcon instanceof Blob\r\n ? storedIcon\r\n : await storedIcon?.blob?.();\r\n\r\n if (iconBlob) {\r\n const objectUrl = URL.createObjectURL(iconBlob);\r\n objectUrls.push(objectUrl);\r\n loadedIcons[node.id] = objectUrl;\r\n }\r\n } catch (_error) {\r\n // Missing icons are expected. The graph falls back to readable faction initials.\r\n }\r\n }\r\n\r\n if (!cancelled) {\r\n setIcons(loadedIcons);\r\n setLoadingIcons(false);\r\n }\r\n }\r\n\r\n loadIcons();\r\n\r\n return () => {\r\n cancelled = true;\r\n objectUrls.forEach((url) => URL.revokeObjectURL(url));\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (!svgRef.current || !shellRef.current || loadingIcons) return undefined;\r\n\r\n d3.select(svgRef.current).selectAll(\"*\").remove();\r\n const anchorMap = layoutMode === \"radial\"\r\n ? RADIAL_TYPE_ANCHORS\r\n : layoutMode === \"tension\"\r\n ? TENSION_TYPE_ANCHORS\r\n : TYPE_ANCHORS;\r\n\r\n graphData.nodes.forEach((node) => {\r\n const initialPosition = getStableInitialPosition(node, anchorMap);\r\n node.x = initialPosition.x;\r\n node.y = initialPosition.y;\r\n });\r\n\r\n const svg = d3\r\n .select(svgRef.current)\r\n .attr(\"viewBox\", `0 0 ${WIDTH} ${HEIGHT}`)\r\n .attr(\"role\", \"img\")\r\n .attr(\r\n \"aria-label\",\r\n \"Interactive force-directed graph of Necromunda faction relationships.\",\r\n )\r\n .attr(\"preserveAspectRatio\", \"xMidYMid meet\");\r\n\r\n const tooltip = d3\r\n .select(shellRef.current)\r\n .append(\"div\")\r\n .attr(\"class\", \"tooltip\")\r\n .style(\"opacity\", 0);\r\n\r\n const defs = svg.append(\"defs\");\r\n\r\n const bgPattern = defs\r\n .append(\"pattern\")\r\n .attr(\"id\", \"hive-metal-pattern\")\r\n .attr(\"patternUnits\", \"userSpaceOnUse\")\r\n .attr(\"width\", 28)\r\n .attr(\"height\", 28);\r\n\r\n bgPattern.append(\"rect\").attr(\"width\", 28).attr(\"height\", 28).attr(\r\n \"fill\",\r\n \"#111827\",\r\n );\r\n\r\n bgPattern\r\n .append(\"path\")\r\n .attr(\"d\", \"M0 28L28 0M-7 7L7 -7M21 35L35 21\")\r\n .attr(\"stroke\", \"rgba(148, 163, 184, 0.08)\")\r\n .attr(\"stroke-width\", 1);\r\n\r\n const radialGradient = defs\r\n .append(\"radialGradient\")\r\n .attr(\"id\", \"underhive-glow\")\r\n .attr(\"cx\", \"50%\")\r\n .attr(\"cy\", \"42%\")\r\n .attr(\"r\", \"75%\");\r\n\r\n radialGradient\r\n .selectAll(\"stop\")\r\n .data([\r\n { offset: \"0%\", color: \"rgba(100, 116, 139, 0.32)\" },\r\n { offset: \"55%\", color: \"rgba(15, 23, 42, 0.88)\" },\r\n { offset: \"100%\", color: \"rgba(2, 6, 23, 1)\" },\r\n ])\r\n .join(\"stop\")\r\n .attr(\"offset\", (d) => d.offset)\r\n .attr(\"stop-color\", (d) => d.color);\r\n\r\n RELATIONSHIP_MARKERS.forEach((marker) => {\r\n defs\r\n .append(\"marker\")\r\n .attr(\"id\", `arrow-${marker.id}`)\r\n .attr(\"viewBox\", \"0 -5 10 10\")\r\n .attr(\"refX\", 9)\r\n .attr(\"refY\", 0)\r\n .attr(\"markerWidth\", 9)\r\n .attr(\"markerHeight\", 9)\r\n .attr(\"markerUnits\", \"userSpaceOnUse\")\r\n .attr(\"orient\", \"auto\")\r\n .append(\"path\")\r\n .attr(\"fill\", marker.color)\r\n .attr(\"d\", \"M0,-5L10,0L0,5\");\r\n });\r\n\r\n svg\r\n .append(\"rect\")\r\n .attr(\"width\", WIDTH)\r\n .attr(\"height\", HEIGHT)\r\n .attr(\"fill\", \"url(#underhive-glow)\")\r\n .on(\"click\", () => {\r\n setFocusedNode(null);\r\n setFocusedLink(null);\r\n });\r\n svg.append(\"rect\").attr(\"width\", WIDTH).attr(\"height\", HEIGHT).attr(\r\n \"fill\",\r\n \"url(#hive-metal-pattern)\",\r\n ).attr(\"pointer-events\", \"none\");\r\n\r\n const graph = svg.append(\"g\").attr(\"class\", \"graph-layer\");\r\n\r\n const zoom = d3\r\n .zoom()\r\n .scaleExtent([0.55, 3.5])\r\n .on(\"zoom\", (event) => {\r\n graph.attr(\"transform\", event.transform.toString());\r\n });\r\n\r\n svg.call(zoom);\r\n zoomApiRef.current = {\r\n zoomIn: () => svg.transition().duration(220).call(zoom.scaleBy, 1.22),\r\n zoomOut: () => svg.transition().duration(220).call(zoom.scaleBy, 0.82),\r\n reset: () =>\r\n svg.transition().duration(260).call(zoom.transform, d3.zoomIdentity),\r\n };\r\n\r\n const anchorLayer = graph.append(\"g\").attr(\"class\", \"anchor-zones\");\r\n const linksLayer = graph.append(\"g\").attr(\"class\", \"links\");\r\n const nodesLayer = graph.append(\"g\").attr(\"class\", \"nodes\");\r\n\r\n const anchorData = Object.entries(anchorMap) as Array<\r\n [FactionNode[\"type\"], { x: number; y: number }]\r\n >;\r\n\r\n const zoneSelection = anchorLayer\r\n .selectAll(\"g\")\r\n .data(anchorData)\r\n .join(\"g\")\r\n .attr(\"class\", \"anchor-zone\")\r\n .attr(\"transform\", ([, anchor]) => `translate(${anchor.x}, ${anchor.y})`);\r\n\r\n zoneSelection\r\n .append(\"circle\")\r\n .attr(\"r\", ([type]) => (type === \"House\" ? 112 : 86))\r\n .attr(\"fill\", \"transparent\")\r\n .attr(\"stroke\", \"rgba(148, 163, 184, 0.16)\")\r\n .attr(\"stroke-dasharray\", \"5 9\");\r\n\r\n zoneSelection\r\n .append(\"text\")\r\n .attr(\"text-anchor\", \"middle\")\r\n .attr(\"dy\", ([type]) => (type === \"House\" ? -122 : -96))\r\n .text(([type]) => type);\r\n\r\n const linkSelection = linksLayer\r\n .selectAll(\"path\")\r\n .data(\r\n graphData.links,\r\n (d) => `${toNodeId(d.source)}-${toNodeId(d.target)}-${d.type}`,\r\n )\r\n .join(\"path\")\r\n .attr(\"class\", (d) => `link link-${relationshipTone(d)}`)\r\n .attr(\"stroke\", relationshipColor)\r\n .attr(\"stroke-width\", (d) => 1.1 + Math.abs(d.value) * 0.52)\r\n .attr(\"marker-end\", (d) => `url(#arrow-${relationshipMarkerId(d)})`)\r\n .attr(\"tabindex\", 0)\r\n .attr(\"role\", \"button\")\r\n .attr(\"aria-label\", (d) => {\r\n const display = getDisplayLink(d);\r\n return `${display.sourceName} to ${display.targetName}: ${display.type}, ${display.description}`;\r\n })\r\n .on(\r\n \"mouseover\",\r\n function (\r\n this: SVGPathElement,\r\n event: globalThis.MouseEvent,\r\n d: SimLink,\r\n ) {\r\n const display = getDisplayLink(d);\r\n emphasizeLink(d, this);\r\n showTooltip(\r\n event,\r\n `${display.sourceName} → ${display.targetName}\r\n ${labelFromId(display.type)} (${display.value})\r\n ${display.description}`,\r\n );\r\n },\r\n )\r\n .on(\"mousemove\", (event: globalThis.MouseEvent) => moveTooltip(event))\r\n .on(\"mouseout\", () => {\r\n clearHighlighting();\r\n hideTooltip();\r\n })\r\n .on(\r\n \"focus\",\r\n function (this: SVGPathElement, _event: FocusEvent, d: SimLink) {\r\n emphasizeLink(d, this);\r\n },\r\n )\r\n .on(\"blur\", () => {\r\n clearHighlighting();\r\n })\r\n .on(\r\n \"click\",\r\n function (\r\n this: SVGPathElement,\r\n _event: globalThis.MouseEvent,\r\n d: SimLink,\r\n ) {\r\n setFocusedLink(getDisplayLink(d));\r\n setFocusedNode(null);\r\n emphasizeLink(d, this);\r\n },\r\n )\r\n .on(\r\n \"keydown\",\r\n function (\r\n this: SVGPathElement,\r\n event: globalThis.KeyboardEvent,\r\n d: SimLink,\r\n ) {\r\n if (event.key === \"Enter\" || event.key === \" \") {\r\n event.preventDefault();\r\n setFocusedLink(getDisplayLink(d));\r\n setFocusedNode(null);\r\n emphasizeLink(d, this);\r\n }\r\n },\r\n );\r\n\r\n const nodeSelection = nodesLayer\r\n .selectAll(\"g\")\r\n .data(graphData.nodes, (d) => d.id)\r\n .join(\"g\")\r\n .attr(\"class\", \"node\")\r\n .classed(\"labels-hidden\", labelMode === \"none\")\r\n .classed(\"labels-focused\", labelMode === \"focused\")\r\n .attr(\"tabindex\", 0)\r\n .attr(\"role\", \"button\")\r\n .attr(\"aria-label\", (d) => `${d.name}, ${d.type}. ${d.description}`)\r\n .style(\"cursor\", \"grab\")\r\n .on(\"mouseover\", function (_event: globalThis.MouseEvent, d: SimNode) {\r\n emphasizeNode(d.id);\r\n })\r\n .on(\r\n \"mouseover.tooltip\",\r\n function (event: globalThis.MouseEvent, d: SimNode) {\r\n showTooltip(\r\n event,\r\n `${d.name}\r\n ${d.type}\r\n ${d.description}`,\r\n );\r\n },\r\n )\r\n .on(\"mousemove\", (event: globalThis.MouseEvent) => moveTooltip(event))\r\n .on(\"mouseout\", () => {\r\n clearHighlighting();\r\n hideTooltip();\r\n })\r\n .on(\"focus\", (_event: FocusEvent, d: SimNode) => emphasizeNode(d.id))\r\n .on(\"blur\", clearHighlighting)\r\n .on(\"click\", (_event: globalThis.MouseEvent, d: SimNode) => {\r\n setFocusedNode({ ...d });\r\n setFocusedLink(null);\r\n emphasizeNode(d.id);\r\n })\r\n .on(\"keydown\", (event: globalThis.KeyboardEvent, d: SimNode) => {\r\n if (event.key === \"Enter\" || event.key === \" \") {\r\n event.preventDefault();\r\n setFocusedNode({ ...d });\r\n setFocusedLink(null);\r\n emphasizeNode(d.id);\r\n }\r\n })\r\n .call(\r\n d3\r\n .drag()\r\n .on(\"start\", dragStarted)\r\n .on(\"drag\", dragged)\r\n .on(\"end\", dragEnded),\r\n );\r\n\r\n nodeSelection\r\n .append(\"circle\")\r\n .attr(\"class\", \"node-halo\")\r\n .attr(\"r\", (d) => d.size + 8)\r\n .attr(\"fill\", \"transparent\")\r\n .attr(\"stroke\", (d) => d.color)\r\n .attr(\"stroke-width\", 1.4);\r\n\r\n nodeSelection\r\n .append(\"circle\")\r\n .attr(\"class\", \"node-ring\")\r\n .attr(\"r\", (d) => d.size + 2)\r\n .attr(\"fill\", \"#020617\")\r\n .attr(\"stroke\", \"rgba(226, 232, 240, 0.35)\")\r\n .attr(\"stroke-width\", 1.2);\r\n\r\n nodeSelection\r\n .append(\"circle\")\r\n .attr(\"class\", \"node-body\")\r\n .attr(\"r\", (d) => d.size)\r\n .attr(\"fill\", (d) => d.color)\r\n .attr(\"stroke\", \"rgba(0, 0, 0, 0.72)\")\r\n .attr(\"stroke-width\", 1.2);\r\n\r\n nodeSelection.each(function (this: SVGGElement, d: SimNode) {\r\n const node = d3.select(this);\r\n\r\n if (icons[d.id]) {\r\n const clipId = `clip-${d.id.replace(/[^a-z0-9_-]/gi, \"-\")}`;\r\n defs.append(\"clipPath\").attr(\"id\", clipId).append(\"circle\").attr(\r\n \"r\",\r\n d.size * 0.78,\r\n ).attr(\"cx\", 0).attr(\"cy\", 0);\r\n\r\n node\r\n .append(\"image\")\r\n .attr(\"href\", icons[d.id])\r\n .attr(\"x\", -d.size * 0.78)\r\n .attr(\"y\", -d.size * 0.78)\r\n .attr(\"width\", d.size * 1.56)\r\n .attr(\"height\", d.size * 1.56)\r\n .attr(\"clip-path\", `url(#${clipId})`)\r\n .attr(\"preserveAspectRatio\", \"xMidYMid slice\");\r\n } else {\r\n node\r\n .append(\"text\")\r\n .attr(\"class\", \"node-initials\")\r\n .attr(\"text-anchor\", \"middle\")\r\n .attr(\"dy\", 4)\r\n .attr(\"font-size\", (datum) => Math.max(9, datum.size * 0.45))\r\n .text(factionInitials);\r\n }\r\n });\r\n\r\n nodeSelection\r\n .append(\"text\")\r\n .attr(\"class\", \"node-label\")\r\n .attr(\"text-anchor\", \"middle\")\r\n .attr(\"dy\", (d) => d.size + 18)\r\n .text((d) => d.name.replace(/^House\\s+/i, \"\"));\r\n\r\n nodeSelection.append(\"title\").text((d) =>\r\n `${d.name}\\n${d.type}\\n${d.description}`\r\n );\r\n\r\n const simulation = d3\r\n .forceSimulation(graphData.nodes)\r\n .force(\r\n \"link\",\r\n d3\r\n .forceLink(graphData.links)\r\n .id((d) => d.id)\r\n .distance((d) => {\r\n const multiplier = layoutMode === \"tension\"\r\n ? 1.18\r\n : layoutMode === \"radial\"\r\n ? 0.92\r\n : 1;\r\n if (d.value > 0) return (212 - d.value * 16) * multiplier;\r\n if (d.value < 0) return (266 + Math.abs(d.value) * 22) * multiplier;\r\n return 246 * multiplier;\r\n })\r\n .strength((d) => (Math.abs(d.value) >= 3 ? 0.36 : 0.23)),\r\n )\r\n .force(\r\n \"charge\",\r\n d3\r\n .forceManyBody()\r\n .strength(layoutMode === \"tension\" ? -1040 : -900)\r\n .distanceMin(36)\r\n .distanceMax(680),\r\n )\r\n .force(\"center\", d3.forceCenter(WIDTH / 2, HEIGHT / 2))\r\n .force(\r\n \"x\",\r\n d3.forceX((d) => anchorMap[d.type].x).strength(\r\n layoutMode === \"radial\" ? 0.095 : 0.078,\r\n ),\r\n )\r\n .force(\r\n \"y\",\r\n d3.forceY((d) => anchorMap[d.type].y).strength(\r\n layoutMode === \"radial\" ? 0.095 : 0.078,\r\n ),\r\n )\r\n .force(\r\n \"collision\",\r\n d3.forceCollide().radius((d) => d.size + 48).iterations(3),\r\n );\r\n\r\n simulation.on(\"tick\", () => {\r\n graphData.nodes.forEach((d) => {\r\n const currentX = d.x ?? WIDTH / 2;\r\n const currentY = d.y ?? HEIGHT / 2;\r\n d.x = Math.max(d.size + 48, Math.min(WIDTH - d.size - 48, currentX));\r\n d.y = Math.max(d.size + 48, Math.min(HEIGHT - d.size - 58, currentY));\r\n });\r\n\r\n linkSelection.attr(\"d\", (d) => getCurvedLinkPath(d));\r\n nodeSelection.attr(\r\n \"transform\",\r\n (d) => `translate(${d.x ?? WIDTH / 2}, ${d.y ?? HEIGHT / 2})`,\r\n );\r\n });\r\n\r\n function dragStarted(\r\n this: SVGGElement,\r\n event: d3.D3DragEvent,\r\n d: SimNode,\r\n ): void {\r\n d3.select(this).style(\"cursor\", \"grabbing\");\r\n if (!event.active) simulation.alphaTarget(0.28).restart();\r\n d.fx = d.x;\r\n d.fy = d.y;\r\n }\r\n\r\n function dragged(\r\n event: d3.D3DragEvent,\r\n d: SimNode,\r\n ): void {\r\n d.fx = Math.max(d.size, Math.min(WIDTH - d.size, event.x));\r\n d.fy = Math.max(d.size, Math.min(HEIGHT - d.size, event.y));\r\n }\r\n\r\n function dragEnded(\r\n this: SVGGElement,\r\n event: d3.D3DragEvent,\r\n d: SimNode,\r\n ): void {\r\n d3.select(this).style(\"cursor\", \"grab\");\r\n if (!event.active) simulation.alphaTarget(0);\r\n d.fx = null;\r\n d.fy = null;\r\n }\r\n\r\n function emphasizeNode(nodeId: string): void {\r\n const connectedNodeIds = new Set([nodeId]);\r\n const connectedLinks = new Set();\r\n\r\n graphData.links.forEach((link) => {\r\n const sourceId = toNodeId(link.source);\r\n const targetId = toNodeId(link.target);\r\n\r\n if (sourceId === nodeId || targetId === nodeId) {\r\n connectedLinks.add(link);\r\n connectedNodeIds.add(sourceId);\r\n connectedNodeIds.add(targetId);\r\n }\r\n });\r\n\r\n nodeSelection.classed(\r\n \"is-muted\",\r\n (node) => !connectedNodeIds.has(node.id),\r\n );\r\n nodeSelection.classed(\r\n \"is-emphasized\",\r\n (node) => connectedNodeIds.has(node.id),\r\n );\r\n linkSelection.classed(\"is-muted\", (link) => !connectedLinks.has(link));\r\n linkSelection.classed(\r\n \"is-emphasized\",\r\n (link) => connectedLinks.has(link),\r\n );\r\n }\r\n\r\n function emphasizeLink(linkDatum: SimLink, element: SVGPathElement): void {\r\n const display = getDisplayLink(linkDatum);\r\n nodeSelection.classed(\r\n \"is-muted\",\r\n (node) => node.id !== display.sourceId && node.id !== display.targetId,\r\n );\r\n nodeSelection.classed(\r\n \"is-emphasized\",\r\n (node) => node.id === display.sourceId || node.id === display.targetId,\r\n );\r\n linkSelection.classed(\"is-muted\", true).classed(\"is-emphasized\", false);\r\n d3.select(element).classed(\"is-muted\", false).classed(\r\n \"is-emphasized\",\r\n true,\r\n );\r\n }\r\n\r\n function clearHighlighting(): void {\r\n nodeSelection.classed(\"is-muted\", false).classed(\"is-emphasized\", false);\r\n linkSelection.classed(\"is-muted\", false).classed(\"is-emphasized\", false);\r\n }\r\n\r\n function showTooltip(event: globalThis.MouseEvent, html: string): void {\r\n tooltip.html(html).style(\"opacity\", 1);\r\n moveTooltip(event);\r\n }\r\n\r\n function moveTooltip(event: globalThis.MouseEvent): void {\r\n if (!shellRef.current) return;\r\n const bounds = shellRef.current.getBoundingClientRect();\r\n const tooltipNode = tooltip.node();\r\n const tooltipBounds = tooltipNode?.getBoundingClientRect();\r\n const tooltipWidth = tooltipBounds?.width ?? 310;\r\n const tooltipHeight = tooltipBounds?.height ?? 110;\r\n const x = Math.min(\r\n Math.max(12, event.clientX - bounds.left + 18),\r\n Math.max(12, bounds.width - tooltipWidth - 12),\r\n );\r\n const y = Math.min(\r\n Math.max(12, event.clientY - bounds.top + 18),\r\n Math.max(12, bounds.height - tooltipHeight - 12),\r\n );\r\n\r\n tooltip.style(\"left\", `${x}px`).style(\"top\", `${y}px`);\r\n }\r\n\r\n function hideTooltip(): void {\r\n tooltip.style(\"opacity\", 0);\r\n }\r\n\r\n return () => {\r\n simulation.stop();\r\n tooltip.remove();\r\n zoomApiRef.current = null;\r\n };\r\n }, [graphData, icons, labelMode, layoutMode, loadingIcons]);\r\n\r\n function resetFilters(): void {\r\n setActiveType(\"all\");\r\n setRelationshipFilter(\"all\");\r\n setSearchTerm(\"\");\r\n setFocusedNode(null);\r\n setFocusedLink(null);\r\n }\r\n\r\n const hasResults = graphData.nodes.length > 0;\r\n\r\n return (\r\n \r\n \r\n\r\n \r\n\r\n

\r\n {hasResults && !loadingIcons\r\n ? (\r\n

\r\n zoomApiRef.current?.zoomIn()}\r\n aria-label=\"Zoom in\"\r\n >\r\n +\r\n \r\n zoomApiRef.current?.zoomOut()}\r\n aria-label=\"Zoom out\"\r\n >\r\n -\r\n \r\n \r\n

\r\n )\r\n : null}\r\n {loadingIcons\r\n ?

Loading faction icon layer...

\r\n : hasResults\r\n ? \r\n : (\r\n

\r\n

No factions match those filters.

\r\n

Reset the filters or search for a broader term.

\r\n

\r\n )}\r\n

\r\n\r\n

\r\n \r\n \r\n

\r\n \r\n );\r\n}\r\n",[],[253],"36465194-5dd9-11f1-b09f-1607ee4eb77e","App.tsx","a958dca8-5dd7-11f1-bd05-1607ee4eb77e",19,["D",1780332292463],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\nimport { ForceDirectedGraph } from \"./ForceDirectedGraph.tsx\";\n\nexport function App(): React.ReactElement {\n return (\n

Underhive intelligence slate

Necromunda Faction Relationships

\n A force-directed map of alliance, trade, suspicion, control, and open\n war between major powers in the hive.\n

\n\n \n\n \n

\n );\n}\n",[],[261],"7b0bcbec-5dd9-11f1-a8a1-1607ee4eb77e","AGENTS.md","a94fb84e-5dd7-11f1-8a70-1607ee4eb77e",21,["D",1780332407871],"# GraphViz Val Town Project Notes\n\nThis project is a Val Town HTTP React/D3 visualization.\n\n## Architecture Rules\n\n> Val Town push for this project currently accepts only top-level published\n> source files. Keep live runtime modules that must be fetched by `esm.town`\n> at the `graphViz/` root. Nested folders can be used for notes or local-only\n> organization, but files under nested paths are not safe to rely on for live\n> module resolution or deploy sync.\n\n- Keep `index.http.tsx` thin.\n- Keep Val Town server response and client bootstrapping in `index.http.tsx`.\n- Keep page composition in `App.tsx`.\n- Keep static faction data in `data.ts`.\n- Keep shared constants in `constants.ts`.\n- Keep shared TypeScript interfaces in `types.ts`.\n- Keep graph helper functions in top-level `graphUtils.ts`.\n- Keep D3 imperative rendering, simulation, zoom, drag, and hover behavior\n inside top-level `ForceDirectedGraph.tsx`.\n- Keep React controls/details/legend/stats in pure top-level component files\n such as `GraphControls.tsx`, `GraphDetails.tsx`, `GraphLegend.tsx`, and\n `GraphStats.tsx`.\n- Do not move D3 selection, simulation, or DOM mutation logic into React panel\n components.\n\n## Important D3 And React Rule\n\nDo not store transient hover state in React if it causes the force simulation to\nrebuild. React should own durable UI state such as filters, layout mode, label\nmode, and clicked or keyboard-selected node/link details. D3 should own\ntransient SVG interaction state such as hover highlighting, tooltip placement,\nzoom transform, drag state, and simulation ticks.\n\n## Val Town Notes\n\n- Use Deno-compatible imports.\n- Use explicit `.ts` and `.tsx` extensions for local imports.\n- Keep local imports relative to the Val root instead of importing this Val by\n its public module URL.\n- Avoid Node-only packages unless confirmed compatible with Val Town.\n- Prefer URL imports or `npm:` imports where appropriate.\n- Files with `http` in the filename, such as `index.http.tsx`, are clearer for\n HTTP Val entrypoints.\n\n## Local Validation\n\nFrom the repository root:\n\n```powershell\ndeno task check:graphViz\ndeno task test\n```\n\nFrom this folder, use the Val Town CLI for deployment sync:\n\n```powershell\nvt status\nvt watch\nvt push\n```\n",[],[269],"7b398f14-5dd9-11f1-bfdc-1607ee4eb77e",".vtignore","35ea3c9c-5dd9-11f1-aa92-1607ee4eb77e",["D",1780332408063],".git\n.vscode\n.vscode/**\n.vt\n.vt/**\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[277],"a931a5ac-5dd7-11f1-a323-1607ee4eb77e","graph","a931a656-5dd7-11f1-a323-1607ee4eb77e",2,["D",1780331626305],[],[284],"a903026a-5dd7-11f1-ae9b-1607ee4eb77e","components","a9030332-5dd7-11f1-ae9b-1607ee4eb77e",["D",1780331625997],[],[291],"35ccda44-5dd9-11f1-aa92-1607ee4eb77e",".vt","35ccdb20-5dd9-11f1-aa92-1607ee4eb77e",11,["D",1780332291698],[],[297],["D",1780332291526],[],[18],["D",1780331625366],["D",1789587078639],{"_11":12,"_101":97},{"_11":12,"_94":95,"_96":97,"_31":50,"_98":99,"_100":30},{"_83":84,"_13":16,"_38":85,"_86":39,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":14,"_93":12},"ctx",{"_76":-5,"_120":344,"_345":346,"_347":348,"_349":30,"_350":30,"_351":30,"_352":24,"_353":-5,"_354":-7,"_355":-7,"_356":26,"_357":30,"_358":30,"_359":-5,"_360":30,"_361":30,"_362":30,"_363":-5},"ENV",{"_315":316,"_317":318,"_319":16,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333,"_334":335,"_336":337,"_338":339,"_340":341,"_342":343},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · .vscode