Tangled.sh Follow Graph

\n \n \n 🕸️ Tangled.sh Follow Graph\n \n \n {isDarkMode ? \"☀️\" : \"🌙\"}\n \n

\n \n setStartHandle(e.target.value)}\n disabled={isLoading}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && !isLoading && startHandle.trim()) {\n fetchFollowGraph();\n }\n }}\n style={{\n flex: 1,\n minWidth: \"200px\", // Ensure readability on mobile\n padding: \"12px\", // Larger touch target\n fontSize: \"16px\", // Prevent auto-zoom on iOS\n }}\n />\n \n Generate Graph\n \n \n\n {isLoading && (\n \n \n \n \n

\n Discovering connections…(this may take a few minutes)…\n {graph.length > 0 && ` (${graph.length} found)`}\n

\n \n )}\n\n {progress && !isLoading && (\n \n {progress}\n {graph.length > 0 && !isLoading && (\n \n Zoom/pinch to explore. Node circles are movable.\n
\n Click/tap handle to go to their Tangled profile.\n \n )}\n \n )}\n\n {graph.length > 0 && }\n\n \n {graph.map((edge, idx) => (\n

\n {edge.from} → {edge.to}\n

\n ))}\n \n\n \n View Source\n \n\n \n @hrbrmstr.dev\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/fetch-graph\") {\n const { handle } = await request.json();\n\n const agent = new BskyAgent({ service: \"https://bsky.social\" });\n\n async function resolveHandle(handle: string) {\n try {\n const { data } = await agent.resolveHandle({ handle });\n return data.did;\n } catch (error) {\n console.error(\"Handle resolution failed\", error);\n return null;\n }\n }\n\n async function didToHandle(did: string) {\n try {\n const plcResponse = await fetch(`https://plc.directory/${encodeURIComponent(did)}`);\n const plcData = await plcResponse.json();\n return plcData.alsoKnownAs[0]?.replace(\"at://\", \"\") || did;\n } catch (error) {\n console.error(\"Handle resolution from DID failed\", error);\n return did;\n }\n }\n\n async function fetchFollowGraph(startDid: string, maxDepth = 4) {\n const visited = new Set();\n const uniqueEdges = new Set();\n const edges: FollowEdge[] = [];\n let handleCount = 0;\n\n async function traverseGraph(did: string, depth = 0) {\n if (depth > maxDepth || visited.has(did)) return;\n visited.add(did);\n handleCount++;\n\n try {\n const plcResponse = await fetch(`https://plc.directory/${encodeURIComponent(did)}`);\n const plcData = await plcResponse.json();\n const serviceEndpoint = plcData.service.find(\n (s: any) => s.type === \"AtprotoPersonalDataServer\",\n )?.serviceEndpoint;\n\n if (!serviceEndpoint) return;\n\n const followsResponse = await fetch(\n `${serviceEndpoint}/xrpc/com.atproto.repo.listRecords?repo=${\n encodeURIComponent(\n did,\n )\n }&collection=sh.tangled.graph.follow&limit=100`,\n );\n const followsData = await followsResponse.json();\n\n const fromHandle = await didToHandle(did);\n\n for (const record of followsData.records) {\n const subjectDid = record.value.subject;\n const toHandle = await didToHandle(subjectDid);\n\n // Create a unique edge representation\n const edgeKey = `${fromHandle}→${toHandle}`;\n\n // Only add if this edge hasn't been seen before\n if (!uniqueEdges.has(edgeKey)) {\n uniqueEdges.add(edgeKey);\n edges.push({\n from: fromHandle,\n to: toHandle,\n });\n }\n\n // Continue graph traversal\n await traverseGraph(subjectDid, depth + 1);\n }\n } catch (error) {\n console.error(\"Graph traversal error\", error);\n }\n }\n\n await traverseGraph(startDid);\n return edges;\n }\n\n const startDid = await resolveHandle(handle);\n if (!startDid) {\n return new Response(JSON.stringify([]), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n const graph = await fetchFollowGraph(startDid);\n return new Response(JSON.stringify(graph), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n return new Response(\n `\n \n \n \n Tangled.sh Follow Graph\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = ``;","deleted","label",[98],"permalink","https://www.val.town/x/hrbrmstr/tangledNet/code/main.tsx","extension","actionData","errors"]