[{"_1":2,"_181":-5,"_182":-5},"loaderData",{"_3":4,"_92":93},"root",{"_5":6,"_35":36,"_65":66},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20,"_34":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","isTeamOrgMember","ENV",{"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":64},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","abb8403524a4061c15f290c317905fd5206b7d64","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","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","API_URL","https://api.val.town","clerkState",{"_67":68},"__internal_clerk_state",{"_69":70,"_71":46,"_72":73,"_74":73,"_75":20,"_76":73,"_77":73,"_78":73,"_79":73,"_80":81,"_90":20,"_91":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_82":20,"_19":20,"_83":73,"_84":85,"_86":73,"_87":46,"_88":20,"_89":73},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_94":95,"_96":97,"_98":99,"_100":101,"_155":156,"_178":179,"_180":-5},"handle","alexwein","name","gordwame","path","frontend/components/SVGComponent.tsx","project",{"_102":103,"_96":97,"_104":105,"_106":-5,"_107":20,"_108":109,"_110":-5,"_111":-5,"_12":112,"_113":114,"_115":116,"_117":-5,"_118":119,"_120":32,"_14":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":131,"_134":135,"_137":138,"_154":20},"id","7c70e6b0-2da7-11f0-81d4-569c3dd06744","createdAt",["D",1746885781894],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","b85dcfbf-50f1-466c-9e2b-28ac90e0dd23","pinnedFileId","d91986e7-e8ab-4bd2-a4b1-a8f1a57c111a","pinPreview",true,"pinMigrated","screenshotVersion",195,"likeCount","875ed3cd-ae4b-40bb-a45f-6a1970e11689","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_94":95,"_132":133},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycjh6emNHdk9mMnY5djU3OFZBbEdleGhQZFAifQ","org",{"_94":95,"_136":133,"_12":112},"avatar","branch",{"_139":140,"_96":44,"_102":141,"_142":103,"_143":144,"_145":146,"_147":109,"_148":149,"_150":151,"_152":97,"_153":95},"version",197,"7c74749c-2da7-11f0-81d4-569c3dd06744","projectId","forkedBranchId","41ef5540-f2f5-11ef-891c-569c3dd06744","forkedBranchVersion",228,"forkedProjectPrivacy","forkedProjectId","41ef0130-f2f5-11ef-891c-569c3dd06744","forkedProjectOrgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","projectName","userHandle","isOwned","file",{"_102":157,"_96":158,"_159":160,"_161":162,"_163":141,"_164":165,"_166":116,"_104":167,"_139":168,"_169":170,"_171":172,"_173":20,"_174":-5,"_98":175},"e6d3f948-304f-11f0-8beb-569c3dd06744","SVGComponent.tsx","fileId","79f3ce6e-2da9-11f0-ac24-569c3dd06744","parentId","a81af603-e2ee-463b-916b-c519a35723d8","branchId","branchVersion",170,"latest",["D",1747178018150],4,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\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\nexport function SVGComponent({\n width,\n height,\n innerRadius,\n outerRadius,\n textSizeInner,\n textSizeOuter,\n textCircleRadiusInner,\n textCircleRadiusOuter,\n circleStrokeLarge,\n circleFillInner,\n circleStrokeInner,\n textColorInner,\n circleFillInnerSelected,\n circleStrokeInnerSelected,\n textColorInnerSelected,\n circleFillOuter,\n circleStrokeOuter,\n textColorOuter,\n data,\n onItemClick,\n onInnerCircleInteraction,\n selectedIndices,\n currentPath,\n}) {\n const svgRef = useRef(null);\n const largeCircleRadius = (innerRadius + outerRadius) / 1.9;\n const viewBoxSize = Math.max(outerRadius * 2, 500);\n\n useEffect(() => {\n const updateViewBox = () => {\n if (svgRef.current) {\n const bbox = svgRef.current.getBBox();\n const padding = 20;\n svgRef.current.setAttribute(\n \"viewBox\",\n `${bbox.x - padding} ${bbox.y - padding} ${bbox.width + padding * 2} ${bbox.height + padding * 2}`,\n );\n }\n };\n updateViewBox();\n }, [data, currentPath]);\n\n const preventDefaultScroll = (e) => {\n e.preventDefault();\n };\n\n return (\n \n \n {/* Large circle centered at 0,0 */}\n \n\n {data.map((item, index) => {\n const angle = (index / data.length) * 2 * Math.PI - Math.PI / 2;\n const innerX = innerRadius * Math.cos(angle);\n const innerY = innerRadius * Math.sin(angle);\n const outerX = outerRadius * Math.cos(angle);\n const outerY = outerRadius * Math.sin(angle);\n\n const innerText = item.flipped ? item.outer : item.inner;\n const outerText = item.flipped ? item.inner : item.outer;\n\n const isSelected = selectedIndices.includes(index);\n\n return (\n \n {/* Line segment behind circles */}\n \n\n {/* Inner circle and text */}\n onInnerCircleInteraction(index, \"start\", innerX, innerY)}\n onMouseEnter={() => onInnerCircleInteraction(index, \"enter\", innerX, innerY)}\n onTouchStart={(e) => {\n e.preventDefault();\n onInnerCircleInteraction(index, \"start\", innerX, innerY);\n }}\n style={{ cursor: \"pointer\" }}\n data-index={index}\n data-type=\"inner\"\n />\n \n {innerText}\n \n\n {/* Outer circle and text */}\n onItemClick(index)}\n style={{ cursor: \"pointer\" }}\n data-type=\"outer\"\n />\n onItemClick(index)}\n style={{ cursor: \"pointer\" }}\n data-type=\"outer\"\n fontFamily=\"'Courier New', Courier, monospace\"\n fontWeight=\"bold\"\n >\n {outerText}\n \n \n );\n })}\n\n {/* Path overlay */}\n \n \n \n );\n}","deleted","label",[176,177,158],"frontend","components","permalink","https://www.val.town/x/alexwein/gordwame/code/frontend/components/SVGComponent.tsx","extension","actionData","errors"]