[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_167":168,"_169":170},"routes/_app.x.$handle.$name",{"_98":97,"_32":45,"_106":85,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":119,"_120":121,"_122":25,"_123":124,"_125":49,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",26,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","7407c07a-27a8-11f0-9edc-569c3dd06744","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useEffect, useRef } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport cytoscape from \"https://esm.sh/cytoscape@3.23.0\";\nimport dagre from \"https://esm.sh/cytoscape-dagre@2.5.0\";\nimport cheerio from \"https://esm.sh/cheerio@1.0.0-rc.12\";\n\ncytoscape.use(dagre);\n\nconst TITLE_SELECTOR = \"#firstHeading > span\";\n\nfunction labelPredicate(label) {\n return label === \"Father\" || label === \"Mother\" || /^Parent/.test(label);\n}\n\nasync function* crawlWikipedia(url: string, visited: Set = new Set()): AsyncGenerator<[string, string, string[]], void, unknown> {\n if (visited.has(url)) {\n return;\n }\n visited.add(url);\n\n const response = await fetch(url);\n const html = await response.text();\n const $ = cheerio.load(html);\n\n const title = $(TITLE_SELECTOR).text().trim();\n const parentLinks: string[] = [];\n\n $(\"table.infobox.vcard > tbody > tr\").each((_, row) => {\n const $row = $(row);\n const label = $row.find(\"th.infobox-label\").text().trim();\n\n if (labelPredicate(label)) {\n const links = $row.find(\"td a\").map((_, el) => $(el).attr(\"href\")).get();\n parentLinks.push(...links);\n }\n });\n\n yield [url, title, parentLinks];\n\n for (const link of parentLinks) {\n const nextUrl = new URL(link, url).toString();\n yield* crawlWikipedia(nextUrl, visited);\n }\n}\n\nfunction App() {\n const [url, setUrl] = useState(\"\");\n const [nodes, setNodes] = useState([]);\n const [edges, setEdges] = useState([]);\n const cyRef = useRef(null);\n const [isLoading, setIsLoading] = useState(false);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n setIsLoading(true);\n\n const encodedUrl = encodeURIComponent(url);\n setNodes([]);\n setEdges([]);\n const eventSource = new EventSource(`/stream?url=${encodedUrl}`);\n\n const existingNodes = new Set();\n\n eventSource.onmessage = (event) => {\n const [nodeUrl, name, parentLinks] = JSON.parse(event.data);\n \n if (!existingNodes.has(nodeUrl)) {\n setNodes(prevNodes => [...prevNodes, { data: { id: nodeUrl, label: name } }]);\n existingNodes.add(nodeUrl);\n }\n\n parentLinks.forEach((link) => {\n const parentUrl = new URL(link, nodeUrl).toString();\n \n if (!existingNodes.has(parentUrl)) {\n const parentName = decodeURIComponent(link.split('/').pop()?.replace(/_/g, ' ') || '');\n setNodes(prevNodes => [...prevNodes, { data: { id: parentUrl, label: parentName } }]);\n existingNodes.add(parentUrl);\n }\n\n setEdges(prevEdges => [...prevEdges, { data: { source: parentUrl, target: nodeUrl, id: `${parentUrl}-${nodeUrl}` } }]);\n });\n };\n\n eventSource.onerror = () => {\n eventSource.close();\n setIsLoading(false);\n };\n };\n\n useEffect(() => {\n if (cyRef.current) {\n cyRef.current.destroy();\n }\n cyRef.current = cytoscape({\n container: document.getElementById('cy'),\n elements: { nodes, edges },\n style: cytoscapeStyle,\n layout: {\n name: 'dagre',\n rankDir: 'TB',\n align: 'UL',\n ranker: 'network-simplex',\n nodeSep: 50,\n rankSep: 100,\n padding: 30,\n animate: false,\n fit: true\n }\n });\n\n cyRef.current.on('tap', 'node', function(evt){\n const node = evt.target;\n window.open(node.id(), '_blank');\n });\n\n cyRef.current.on('layoutstop', function(){\n cyRef.current.center();\n cyRef.current.fit();\n });\n\n }, [nodes, edges]);\n\n return (\n

Wikipedia Family Tree Crawler

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nasync function server(req: Request): Promise {\n const url = new URL(req.url);\n \n if (url.pathname === \"/stream\") {\n const wikiUrl = url.searchParams.get(\"url\");\n if (!wikiUrl) {\n return new Response(\"URL parameter is required\", { status: 400 });\n }\n\n const encoder = new TextEncoder();\n const stream = new ReadableStream({\n async start(controller) {\n for await (const data of crawlWikipedia(wikiUrl)) {\n controller.enqueue(encoder.encode(`data: ${JSON.stringify(data)}\\n\\n`));\n }\n controller.close();\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/event-stream\",\n \"Cache-Control\": \"no-cache\",\n \"Connection\": \"keep-alive\",\n },\n });\n }\n\n return new Response(`\n \n \n \n \n \n Wikipedia Family Tree Crawler\n \n \n \n

\n \n \n \n `, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}\n\nconst css = `\n body {\n font-family: Arial, sans-serif;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n }\n form {\n margin-bottom: 20px;\n }\n input {\n padding: 5px;\n font-size: 16px;\n }\n button {\n flex-shrink: 0;\n padding: 5px 10px;\n font-size: 16px;\n background-color: #4CAF50;\n color: white;\n border: none;\n cursor: pointer;\n }\n button:disabled {\n background-color: #cccccc;\n }\n`;\n\nconst cytoscapeStyle = [\n {\n selector: 'node',\n style: {\n 'background-color': '#666',\n 'label': 'data(label)',\n 'color': '#fff',\n 'text-valign': 'center',\n 'text-halign': 'center',\n 'text-wrap': 'wrap',\n 'text-max-width': '100px',\n 'font-size': '10px',\n 'width': 'label',\n 'height': 'label',\n 'padding': '10px'\n }\n },\n {\n selector: 'edge',\n style: {\n 'width': 2,\n 'line-color': '#ccc',\n 'target-arrow-color': '#ccc',\n 'target-arrow-shape': 'triangle',\n 'curve-style': 'bezier'\n }\n }\n];\n\nexport default server;","/** @jsxImportSource https://esm.sh/react */\nimport cheerio from \"https://esm.sh/cheerio@1.0.0-rc.12\";\nimport dagre from \"https://esm.sh/cytoscape-dagre@2.5.0\";\nimport cytoscape from \"https://esm.sh/cytoscape@3.23.0\";\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\ncytoscape.use(dagre);\n\nconst TITLE_SELECTOR = \"#firstHeading > span\";\n\nfunction labelPredicate(label) {\n return label === \"Father\" || label === \"Mother\" || /^Parent/.test(label);\n}\n\nasync function* crawlWikipedia(\n url: string,\n visited: Set = new Set(),\n): AsyncGenerator<[string, string, string[]], void, unknown> {\n if (visited.has(url)) {\n return;\n }\n visited.add(url);\n\n const response = await fetch(url);\n const html = await response.text();\n const $ = cheerio.load(html);\n\n const title = $(TITLE_SELECTOR).text().trim();\n const parentLinks: string[] = [];\n\n $(\"table.infobox.vcard > tbody > tr\").each((_, row) => {\n const $row = $(row);\n const label = $row.find(\"th.infobox-label\").text().trim();\n\n if (labelPredicate(label)) {\n const links = $row.find(\"td > a\").map((_, el) => $(el).attr(\"href\")).get();\n parentLinks.push(...links);\n }\n });\n\n yield [url, title, parentLinks];\n\n for (const link of parentLinks) {\n const nextUrl = new URL(link, url).toString();\n yield* crawlWikipedia(nextUrl, visited);\n }\n}\n\nfunction App() {\n const [url, setUrl] = useState(\"\");\n const [nodes, setNodes] = useState([]);\n const [edges, setEdges] = useState([]);\n const cyRef = useRef(null);\n const [isLoading, setIsLoading] = useState(false);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n setIsLoading(true);\n\n const encodedUrl = encodeURIComponent(url);\n setNodes([]);\n setEdges([]);\n const eventSource = new EventSource(`/stream?url=${encodedUrl}`);\n\n const existingNodes = new Set();\n\n eventSource.onmessage = (event) => {\n const [nodeUrl, name, parentLinks] = JSON.parse(event.data);\n\n if (!existingNodes.has(nodeUrl)) {\n setNodes(prevNodes => [...prevNodes, { data: { id: nodeUrl, label: name } }]);\n existingNodes.add(nodeUrl);\n }\n\n parentLinks.forEach((link) => {\n const parentUrl = new URL(link, nodeUrl).toString();\n\n if (!existingNodes.has(parentUrl)) {\n const parentName = decodeURIComponent(link.split(\"/\").pop()?.replace(/_/g, \" \") || \"\");\n setNodes(prevNodes => [...prevNodes, { data: { id: parentUrl, label: parentName } }]);\n existingNodes.add(parentUrl);\n }\n\n setEdges(\n prevEdges => [...prevEdges, { data: { source: parentUrl, target: nodeUrl, id: `${parentUrl}-${nodeUrl}` } }]\n );\n });\n };\n\n eventSource.onerror = () => {\n eventSource.close();\n setIsLoading(false);\n };\n };\n\n useEffect(() => {\n if (cyRef.current) {\n cyRef.current.destroy();\n }\n cyRef.current = cytoscape({\n container: document.getElementById(\"cy\"),\n elements: { nodes, edges },\n style: cytoscapeStyle,\n layout: {\n name: \"dagre\",\n rankDir: \"TB\",\n align: \"UL\",\n ranker: \"network-simplex\",\n nodeSep: 50,\n rankSep: 100,\n padding: 30,\n animate: false,\n fit: true,\n },\n });\n\n cyRef.current.on(\"tap\", \"node\", function(evt) {\n const node = evt.target;\n window.open(node.id(), \"_blank\");\n });\n\n cyRef.current.on(\"layoutstop\", function() {\n cyRef.current.center();\n cyRef.current.fit();\n });\n }, [nodes, edges]);\n\n return (\n

Wikipedia Family Tree Crawler

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nasync function server(req: Request): Promise {\n const url = new URL(req.url);\n\n if (url.pathname === \"/stream\") {\n const wikiUrl = url.searchParams.get(\"url\");\n if (!wikiUrl) {\n return new Response(\"URL parameter is required\", { status: 400 });\n }\n\n const encoder = new TextEncoder();\n const stream = new ReadableStream({\n async start(controller) {\n for await (const data of crawlWikipedia(wikiUrl)) {\n controller.enqueue(encoder.encode(`data: ${JSON.stringify(data)}\\n\\n`));\n }\n controller.close();\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/event-stream\",\n \"Cache-Control\": \"no-cache\",\n \"Connection\": \"keep-alive\",\n },\n });\n }\n\n return new Response(\n `\n \n \n \n \n \n Wikipedia Family Tree Crawler\n \n \n \n

\n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n body {\n font-family: Arial, sans-serif;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n }\n form {\n margin-bottom: 20px;\n }\n input {\n padding: 5px;\n font-size: 16px;\n }\n button {\n flex-shrink: 0;\n padding: 5px 10px;\n font-size: 16px;\n background-color: #4CAF50;\n color: white;\n border: none;\n cursor: pointer;\n }\n button:disabled {\n background-color: #cccccc;\n }\n`;\n\nconst cytoscapeStyle = [\n {\n selector: \"node\",\n style: {\n \"background-color\": \"#666\",\n \"label\": \"data(label)\",\n \"color\": \"#fff\",\n \"text-valign\": \"center\",\n \"text-halign\": \"center\",\n \"text-wrap\": \"wrap\",\n \"text-max-width\": \"100px\",\n \"font-size\": \"10px\",\n \"width\": \"label\",\n \"height\": \"label\",\n \"padding\": \"10px\",\n },\n },\n {\n selector: \"edge\",\n style: {\n \"width\": 2,\n \"line-color\": \"#ccc\",\n \"target-arrow-color\": \"#ccc\",\n \"target-arrow-shape\": \"triangle\",\n \"curve-style\": \"bezier\",\n },\n },\n];\n\nexport default server;","createdAt",["D",1725285331901],"branchVersion","branchId","74056e74-27a8-11f0-9edc-569c3dd06744","id","740523ba-27a8-11f0-9edc-569c3dd06744","infoboxCrawler",["D",1746226490294],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","d402a971-ec8f-4d0e-89f0-ffd768759076","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",4,"orgId","2e4d6945-83a3-4492-bb59-6be6cab8dce3","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_18":55,"_102":103,"_104":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":88,"_89":90,"_91":51,"_92":93,"_94":63,"_95":45,"_96":97},"isOwned",46,"main","projectId","forkedBranchId","7511a86e-27a8-11f0-9edc-569c3dd06744","forkedBranchVersion",0,"forkedProjectPrivacy","forkedProjectId","7511661a-27a8-11f0-9edc-569c3dd06744","forkedProjectOrgId","projectName","userHandle","jdan","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJsV0d2bDdqQTdBMGNpY2REV082Q0daSDRlcCJ9","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":163,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":164,"_79":165,"_81":166,"_83":25},"tree",[158],"files",[158],"counts",{"_146":90,"_147":148,"_149":150,"_151":152,"_153":154},"contents",[138],"upstreamProject",{"_43":93,"_32":136,"_53":-5,"_54":-5,"_50":51,"_77":137},"upstreamBranch",{"_43":88,"_38":130,"_131":132,"_32":85,"_86":93,"_13":133,"_87":-5,"_89":-5,"_134":135,"_47":-5,"_83":25,"_50":51,"_96":97,"_62":63,"_95":136},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746226492053],"updatedAt",["D",1725204326880],3,"lockfileKey","1746243462811-esm.town_v_jdan_emperorOfJapanCrawler@3-main","emperorOfJapanCrawler",{"_98":97,"_105":101},{"_43":139,"_32":28,"_30":31,"_140":-5,"_41":42,"_40":14,"_141":25,"_38":142,"_13":143,"_33":34,"_35":37,"_24":25,"_144":-5,"_27":145},"748a920c-27a8-11f0-9edc-569c3dd06744","parentId","latest",["D",1725285331901],25,"label",[28],"pulls","branches",1,"forks",2,"envVars",{"_155":90,"_157":90},"connections",{"_155":90,"_156":90},"count","unfilledCount","emptyCount",{"_43":139,"_32":28,"_30":31,"_140":-5,"_41":42,"_40":14,"_141":25,"_38":159,"_13":143,"_33":34,"_35":37,"_24":25,"_144":-5,"_160":161,"_27":162},["D",1725285331901],"children",[],[28],["D",1746226490294],{"_98":97,"_105":101},{"_98":97,"_99":-5,"_100":101,"_18":55,"_102":103,"_104":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":88,"_89":90,"_91":51,"_92":93,"_94":63,"_95":45,"_96":97},"ctx",{"_77":-5,"_127":200,"_201":202,"_203":204,"_205":25,"_206":25,"_207":25,"_208":49,"_209":-5,"_210":-7,"_211":-7,"_212":90,"_213":25,"_214":25,"_215":-5,"_216":25,"_217":25,"_218":25,"_219":-5},"ENV",{"_171":172,"_173":174,"_175":85,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199},"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"]

Diff · v26