Tangled.sh Follow Graph

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_169":170,"_171":172},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_128":-5,"_20":129,"_22":130,"_131":132,"_133":134,"_25":135,"_24":-5,"_136":-5,"_137":-5,"_138":54,"_139":140,"_141":45,"_142":-5,"_143":-5,"_144":145},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","hrbrmstr","name","tangledNet","branchName","main","version","path","","project",{"_34":74,"_13":14,"_46":75,"_76":-5,"_77":45,"_78":79,"_80":79,"_81":-5,"_82":-5,"_83":84,"_85":38,"_86":45,"_87":-5,"_88":-5,"_89":90,"_91":92,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":98,"_99":98,"_100":101,"_102":101,"_103":101,"_104":98,"_105":98,"_106":107,"_108":109,"_110":111,"_112":54},"tree",[65,66],"file","contents",[32,33],"upstream","pull","ahead","behind","envVars",{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":61,"_17":62,"_49":24,"_51":63,"_53":54,"_55":-5,"_18":64},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":56},"id","8a7ae560-20a2-11f0-99a0-569c3dd06744","main.tsx","fileId","89bec6f0-20a2-11f0-99a0-569c3dd06744","parentId","branchId","89bbb92e-20a2-11f0-99a0-569c3dd06744","branchVersion",36,"latest",true,"createdAt",["D",1742577658117],35,"fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { BskyAgent } from \"https://esm.sh/@atproto/api\";\nimport * as d3 from \"https://esm.sh/d3@7.8.5\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\ntype FollowEdge = {\n from: string;\n to: string;\n};\n\ntype GraphNode = {\n id: string;\n indegree: number;\n x?: number;\n y?: number;\n};\n\nfunction NetworkGraph({ graph, isDarkMode }: { graph: FollowEdge[]; isDarkMode: boolean }) {\n const svgRef = useRef(null);\n const containerRef = useRef(null);\n\n useEffect(() => {\n if (!graph.length || !svgRef.current || !containerRef.current) return;\n\n // Clear previous graph\n d3.select(svgRef.current).selectAll(\"*\").remove();\n\n // Calculate node degrees\n const nodes: { [key: string]: GraphNode } = {};\n const links: { source: string; target: string }[] = [];\n\n // Count indegree\n graph.forEach((edge) => {\n nodes[edge.from] = nodes[edge.from] || { id: edge.from, indegree: 0 };\n nodes[edge.to] = nodes[edge.to] || { id: edge.to, indegree: 0 };\n nodes[edge.to].indegree++;\n links.push({ source: edge.from, target: edge.to });\n });\n\n const nodesArray = Object.values(nodes);\n\n // Container dimensions\n const margin = { top: 20, right: 20, bottom: 20, left: 20 };\n const width = containerRef.current.clientWidth - margin.left - margin.right;\n const height = Math.min(500, window.innerHeight * 0.6); // Responsive height\n const isMobile = window.innerWidth <= 768;\n\n // Create SVG with zoom container\n const svg = d3\n .select(svgRef.current)\n .attr(\"width\", width + margin.left + margin.right)\n .attr(\"height\", height + margin.top + margin.bottom)\n .append(\"g\")\n .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n // Zoom behavior\n const zoom = d3\n .zoom()\n .scaleExtent([0.1, 10])\n .on(\"zoom\", (event) => {\n svg.attr(\"transform\", event.transform);\n });\n\n d3.select(svgRef.current).call(zoom).call(zoom.transform, d3.zoomIdentity);\n\n // Color scale with theme-aware colors\n const color = d3.scaleOrdinal(\n isDarkMode ? d3.schemeCategory10.map((c) => d3.color(c)?.brighter(0.5).toString() || c) : d3.schemeCategory10,\n );\n\n // Node size scale (adjusted for mobile)\n const nodeScale = d3\n .scaleLinear()\n .domain([0, d3.max(nodesArray, (d) => d.indegree) || 1])\n .range([isMobile ? 8 : 10, isMobile ? 30 : 40]);\n\n // Force simulation with mobile-friendly settings\n const simulation = d3\n .forceSimulation(nodesArray)\n .force(\n \"link\",\n d3\n .forceLink(links)\n .id((d: any) => d.id)\n .distance(isMobile ? 100 : 150), // Shorter distance on mobile\n )\n .force(\n \"charge\",\n d3.forceManyBody().strength(isMobile ? -200 : -300), // Less repulsion on mobile\n )\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .force(\n \"collide\",\n d3.forceCollide().radius((d) => nodeScale(d.indegree) + 5), // Prevent node overlap\n );\n\n // Create links\n const link = svg\n .append(\"g\")\n .attr(\"stroke\", isDarkMode ? \"#666\" : \"#999\")\n .attr(\"stroke-opacity\", 0.4)\n .selectAll(\"line\")\n .data(links)\n .join(\"line\")\n .attr(\"stroke-width\", 1.5);\n\n // Create nodes with improved interactivity\n const node = svg\n .append(\"g\")\n .selectAll(\"circle\")\n .data(nodesArray)\n .join(\"circle\")\n .attr(\"r\", (d) => nodeScale(d.indegree))\n .attr(\"fill\", (d) => color(d.id))\n .attr(\"stroke\", isDarkMode ? \"#333\" : \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .call(\n d3\n .drag()\n .on(\"start\", (event, d) => {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n })\n .on(\"drag\", (event, d) => {\n d.fx = event.x;\n d.fy = event.y;\n })\n .on(\"end\", (event, d) => {\n if (!event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }),\n );\n\n // Add tooltips\n node.append(\"title\").text((d) => `${d.id} (Connections: ${d.indegree})`);\n\n // Add labels (smaller on mobile)\n const label = svg\n .append(\"g\")\n .selectAll(\"a\") // Change to \"a\" instead of \"text\"\n .data(nodesArray)\n .join(\"a\")\n .attr(\"href\", (d) => `https://tangled.sh/@${d.id}`)\n .attr(\"target\", \"_blank\") // Opens in new tab\n .append(\"text\") // Append text inside the anchor\n .text((d) => d.id)\n .attr(\"font-size\", isMobile ? 8 : 10)\n .attr(\"dx\", (d) => nodeScale(d.indegree) + 5)\n .attr(\"dy\", 4)\n .attr(\"fill\", isDarkMode ? \"#eee\" : \"#333\")\n .style(\"cursor\", \"pointer\");\n\n // Update positions on each tick\n simulation.on(\"tick\", () => {\n link\n .attr(\"x1\", (d: any) => d.source.x)\n .attr(\"y1\", (d: any) => d.source.y)\n .attr(\"x2\", (d: any) => d.target.x)\n .attr(\"y2\", (d: any) => d.target.y);\n\n node.attr(\"cx\", (d: any) => d.x).attr(\"cy\", (d: any) => d.y);\n\n label.attr(\"x\", (d: any) => d.x).attr(\"y\", (d: any) => d.y);\n });\n }, [graph, isDarkMode]);\n\n return (\n \n \n \n \n );\n}\n\nfunction Spinner() {\n return (\n \n \n \n \n \n );\n}\n\nfunction App() {\n const [graph, setGraph] = useState([]);\n const [startHandle, setStartHandle] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [progress, setProgress] = useState(\"\");\n const [isDarkMode, setIsDarkMode] = useState(() => {\n const savedTheme = localStorage.getItem(\"theme\");\n return savedTheme === \"dark\" || (savedTheme === null && window.matchMedia(\"(prefers-color-scheme: dark)\").matches);\n });\n const [discoveredHandles, setDiscoveredHandles] = useState(0);\n\n // Toggle theme\n const toggleTheme = () => {\n const newTheme = !isDarkMode;\n setIsDarkMode(newTheme);\n localStorage.setItem(\"theme\", newTheme ? \"dark\" : \"light\");\n };\n\n // Apply theme on mount and when it changes\n useEffect(() => {\n document.documentElement.setAttribute(\"data-theme\", isDarkMode ? \"dark\" : \"light\");\n }, [isDarkMode]);\n\n const fetchFollowGraph = async () => {\n if (!startHandle.trim()) return;\n\n setIsLoading(true);\n setGraph([]);\n setProgress(\"Resolving handle...\");\n setDiscoveredHandles(0);\n\n try {\n const response = await fetch(\"/fetch-graph\", {\n method: \"POST\",\n body: JSON.stringify({ handle: startHandle }),\n });\n const edges = await response.json();\n const sortedEdges = edges.sort((a: FollowEdge, b: FollowEdge) => a.from.localeCompare(b.from));\n setGraph(sortedEdges);\n setProgress(`Found ${sortedEdges.length} connections.`);\n } catch (error) {\n setProgress(\"Error fetching graph\");\n console.error(error);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

\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",false,"label",[36],"89bed79e-20a2-11f0-99a0-569c3dd06744","README.md","89bed816-20a2-11f0-99a0-569c3dd06744",1,["D",1742463295520],0,"Tangled.sh is a layered, decentralized social coding graph on top of the AT protocol, with support for storage on Bluesky core PDS or individual PDS instances. It is further comprised of personally hosted git instances (\"knots\").\n\nThis application collects all the handles a given user follows and builds a follow tree until all leaf nodes are reached.",[58],{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":71,"_17":62,"_49":24,"_51":63,"_53":54,"_55":-5,"_68":72,"_18":73},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":67,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_68":69,"_18":70},["D",1742577658117],"children",[],[36],["D",1742463295520],[],[58],"89bb5eac-20a2-11f0-99a0-569c3dd06744",["D",1745454291601],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","660e611e-30de-4ed3-8449-79507be25f74","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",2,"orgId","f4053730-af3b-4f20-9c5e-6d19f910dfd0","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_127":123},"org",{"_11":12,"_121":-5,"_122":123,"_83":84,"_124":125,"_126":54},"branch",{"_17":43,"_13":16,"_34":41,"_113":74,"_114":-5,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":14,"_120":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybTQ2MzZSZEl6dm1wZjZnT1hJM2NGNjFCbWgifQ","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":74,"_13":14,"_46":165,"_76":-5,"_77":45,"_78":79,"_80":79,"_81":-5,"_82":-5,"_83":84,"_85":38,"_86":45,"_87":-5,"_88":-5,"_89":90,"_91":92,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":98,"_99":98,"_100":101,"_102":101,"_103":101,"_104":98,"_105":98,"_106":166,"_108":167,"_110":168,"_112":54},[159,160],"files",[159,160],"counts",{"_150":62,"_151":60,"_152":62,"_31":153,"_154":155},[146,147],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":61,"_17":62,"_49":24,"_51":63,"_53":54,"_55":-5,"_18":149},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":148},[36],[58],"pulls","branches","forks",{"_156":62,"_158":62},"connections",{"_156":62,"_157":62},"count","unfilledCount","emptyCount",{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":71,"_17":62,"_49":24,"_51":63,"_53":54,"_55":-5,"_68":163,"_18":164},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":67,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_68":161,"_18":162},[],[36],[],[58],["D",1745454291601],{"_11":12,"_127":123},{"_11":12,"_121":-5,"_122":123,"_83":84,"_124":125,"_126":54},{"_17":43,"_13":16,"_34":41,"_113":74,"_114":-5,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":14,"_120":12},"ctx",{"_106":-5,"_143":202,"_203":204,"_205":206,"_207":54,"_208":54,"_209":54,"_210":45,"_211":-5,"_212":-7,"_213":-7,"_214":62,"_215":54,"_216":54,"_217":-5,"_218":54,"_219":54,"_220":54,"_221":-5},"ENV",{"_173":174,"_175":176,"_177":16,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

Code