[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":29,"_34":12,"_35":12,"_36":12,"_37":12,"_38":-5,"_39":40},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68e8b99e57348191bfd9b42e1da5091b","versionInt","title","PCD 5 agents on Circle ","type","code/react","content","import React, { useState, useEffect, useRef } from 'react';\n\n/* geometry helpers */\nfunction perimeterPositionToAngle(p: number) {\n return (p % 1) * 2 * Math.PI;\n}\nfunction getXY(p: number) {\n const θ = perimeterPositionToAngle(p);\n return { x: 250 + 180 * Math.cos(θ), y: 250 + 180 * Math.sin(θ) };\n}\nfunction gap(a: number, b: number) { return (b - a + 1) % 1; }\nfunction shortest(a: number, b: number) { const d = Math.abs(a - b); return d > 0.5 ? 1 - d : d; }\n\nexport default function CircleNodesApp() {\n const [pos, setPos] = useState([0.0, 0.3, 0.3, 0.56, 0.56]);\n const [sel, setSel] = useState>(new Set());\n const [lastMove, setLastMove] = useState('');\n const [lastMovedNode, setLastMovedNode] = useState(null);\n const pressed = useRef>(new Set());\n\n const randomize = () => {\n const newPos = Array(pos.length).fill(0).map(() => Math.random());\n newPos.sort((a, b) => a - b);\n setPos(newPos);\n setSel(new Set());\n setLastMove('Randomized configuration');\n };\n\n const moveNode = (index: number, delta: number) => {\n setPos(prev => {\n const next = [...prev];\n const low = index > 0 ? next[index - 1] : 0;\n const high = index < next.length - 1 ? next[index + 1] : 1;\n const minD = low - next[index];\n const maxD = high - next[index];\n const d = delta > 0 ? Math.min(delta, maxD) : Math.max(delta, minD);\n next[index] += d;\n return next;\n });\n setLastMovedNode(index);\n };\n\n const tryGammaImprovingMove = () => {\n const epsilon = 0.001;\n const indices = [...Array(pos.length).keys()];\n if (lastMovedNode !== null) {\n const idx = indices.indexOf(lastMovedNode);\n if (idx >= 0) indices.splice(idx, 1);\n indices.unshift(lastMovedNode);\n }\n const computeMetrics = (arr: number[]) => {\n const P = [\n gap(arr[2], arr[3]),\n gap(arr[3], arr[4]),\n gap(arr[4], arr[0]),\n gap(arr[0], arr[1]),\n gap(arr[1], arr[2])\n ];\n const C = arr.map((_, j) => arr.reduce((s, __, k) => (j === k ? s : s + shortest(arr[j], arr[k])), 0));\n const SC = P.reduce((s, p, j) => s + p * C[j], 0);\n const OPT = Math.min(...C);\n return { SC, OPT, GAM: SC / OPT };\n };\n const current = computeMetrics(pos);\n for (const i of indices) {\n for (const delta of [-epsilon, epsilon]) {\n const trial = [...pos];\n const low = i > 0 ? trial[i - 1] : 0;\n const high = i < trial.length - 1 ? trial[i + 1] : 1;\n const minD = low - trial[i];\n const maxD = high - trial[i];\n const d = delta > 0 ? Math.min(delta, maxD) : Math.max(delta, minD);\n trial[i] += d;\n const trialMetrics = computeMetrics(trial);\n if (trialMetrics.GAM > current.GAM) {\n moveNode(i, d);\n setLastMove(`Moved node ${i + 1} by ${d.toFixed(3)}`);\n return;\n }\n }\n }\n setLastMove('No gamma-increasing single node move found');\n };\n\n useEffect(() => {\n const step = 0.001;\n const keys = pressed.current;\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.key >= '1' && e.key <= `${pos.length}`) {\n const idx = parseInt(e.key, 10) - 1;\n setSel(prev => {\n const nxt = new Set(prev);\n if (nxt.has(idx)) nxt.delete(idx);\n else if (nxt.size < 2) nxt.add(idx);\n return nxt;\n });\n } else {\n keys.add(e.key);\n if (e.key.toLowerCase() === 'p') tryGammaImprovingMove();\n }\n };\n const onKeyUp = (e: KeyboardEvent) => keys.delete(e.key);\n window.addEventListener('keydown', onKeyDown);\n window.addEventListener('keyup', onKeyUp);\n const interval = setInterval(() => {\n const selected = Array.from(sel);\n if (selected.length === 0) return;\n let delta = 0;\n if (keys.has('ArrowLeft')) delta = -step;\n if (keys.has('ArrowRight')) delta = step;\n if (delta === 0) return;\n if (selected.length === 1) moveNode(selected[0], delta);\n else {\n const [a, b] = selected;\n if (keys.has('o') || keys.has('O')) {\n moveNode(a, delta);\n moveNode(b, -delta);\n } else {\n moveNode(a, delta);\n moveNode(b, delta);\n }\n }\n }, 16);\n return () => {\n clearInterval(interval);\n window.removeEventListener('keydown', onKeyDown);\n window.removeEventListener('keyup', onKeyUp);\n };\n }, [sel, pos]);\n\n const onSlide = (i: number, v: string) => {\n setPos(prev => {\n const next = [...prev];\n const val = parseFloat(v);\n const low = i > 0 ? next[i - 1] : 0;\n const high = i < next.length - 1 ? next[i + 1] : 1;\n next[i] = Math.min(high, Math.max(low, val));\n return next;\n });\n };\n\n const P = [\n gap(pos[2], pos[3]),\n gap(pos[3], pos[4]),\n gap(pos[4], pos[0]),\n gap(pos[0], pos[1]),\n gap(pos[1], pos[2])\n ];\n const C = pos.map((_, i) => pos.reduce((s, __, j) => (i === j ? s : s + shortest(pos[i], pos[j])), 0));\n const SC = P.reduce((s, p, i) => s + p * C[i], 0);\n const OPT = Math.min(...C);\n const GAM = SC / OPT;\n const coords = pos.map(getXY);\n\n return (\n

\n {/* Left: Circle Visualization */}\n

\n \n

\n\n {/* Middle: Metrics + Node Positions */}\n

Metrics

SC: {SC.toFixed(3)}

OPT: {OPT.toFixed(3)}

GAMMA: {GAM.toFixed(3)}

{lastMove}

Node Positions

\n {pos.map((pVal, i) => (\n

\n Node {i + 1}\n onSlide(i, e.target.value)}\n className=\"w-full\"\n />\n {pVal.toFixed(3)}\n

\n ))}\n

\n\n {/* Right Sidebar: Controls + C&P */}\n

Controls

Green indicates optimal location
Select nodes: press 1-5 (Can choose 2 simultaneously)
Move selected: ArrowLeft/ArrowRight
To move 2 agents towards eachother, hold 'o' while moving
To increase Gamma with a movement of a single node: press 'p'
Generate random instance: click 'Random'

\n \n Random\n \n

C & P Values

\n {C.map((cVal, i) => (\n

\n {`C${i + 1}: ${cVal.toFixed(3)}, P${i + 1}: ${P[i].toFixed(3)}`}\n

\n ))}\n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_41":42,"_43":44},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","manageRootRouteStylesheet","mobileWebHandoffEnabled","promoteCss","disableSSR","stripModulepreloadImports","paidCampaignAppRedirect","statsigGateEvaluationsPromise",["P",40],"traceId","8498355592812310246","traceTime",1789959034300]