[{"_1":2,"_182":-5,"_183":-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","c2ca74b25698bc62f1250d595e4f42af9437a7d5","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,"_179":180,"_181":-5},"handle","damonb","name","react-hono-with-react-router","path","frontend/components/analysis/BalanceRecommendations.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":116,"_118":-5,"_119":32,"_14":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":130,"_133":134,"_136":137,"_154":20},"id","1a0490ea-54f7-11f0-9758-f69ea79377d9","createdAt",["D",1751208071838],"deletedAt","legacyEnvVars","privacy","unlisted","description","imageUrl","51d254b7-cad4-42b0-b564-d310e172ecbe","pinnedFileId","99187c43-2d19-4e81-b806-5c44fea89e59","pinPreview",true,"pinMigrated","screenshotVersion","likeCount","ff884636-e171-405e-9cdd-f3a49584d508","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_94":95,"_131":132},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJyeTV5b0VLZFp6ZWVXZlZ4blk5ZFpad1NSViJ9","org",{"_94":95,"_135":132,"_12":112},"avatar","branch",{"_138":139,"_96":44,"_102":140,"_141":103,"_142":143,"_144":145,"_146":147,"_148":149,"_150":151,"_152":97,"_153":95},"version",866,"1a07c0da-54f7-11f0-9758-f69ea79377d9","projectId","forkedBranchId","3215495e-0c13-11f0-9966-569c3dd06744","forkedBranchVersion",3,"forkedProjectPrivacy","public","forkedProjectId","3211e962-0c13-11f0-9966-569c3dd06744","forkedProjectOrgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","projectName","userHandle","isOwned","file",{"_102":157,"_96":158,"_159":160,"_161":162,"_163":140,"_164":165,"_166":116,"_104":167,"_138":168,"_169":170,"_171":172,"_173":20,"_174":-5,"_98":175},"494dff44-c22a-11f0-86aa-42dde27851f2","BalanceRecommendations.tsx","fileId","7deebbde-bdb2-11f0-b574-42dde27851f2","parentId","6d6eb958-550c-11f0-9a03-f69ea79377d9","branchId","branchVersion",795,"latest",["D",1763214732262],41,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n Box,\n Chip,\n CircularProgress,\n Paper,\n Tooltip,\n Typography\n} from \"@mui/material\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { API_URL } from \"../../env.ts\";\nimport { type Flavor } from \"../../types.ts\";\nimport { apiGet } from \"../../utils/api.ts\";\n\ninterface Recommendation {\n name: string;\n components: string[];\n taste: Flavor[\"taste\"];\n metric: number;\n metricName: 'balance' | 'intensity';\n}\n\n// Backwards compatibility alias\ntype BalanceRecommendation = Recommendation;\n\ninterface RecommendationsFilter {\n tags?: string[];\n excludeTags?: string[];\n size?: number;\n count?: number;\n metric?: \"balance\" | \"intensity\";\n}\n\ninterface BalanceRecommendationsProps {\n currentComponents?: string[];\n onSelectRecommendation?: (components: string[]) => void;\n filter?: RecommendationsFilter;\n filterComponent?: React.ReactNode;\n}\n\nconst getTasteColor = (key: string): string => {\n const colors: Record = {\n salty: \"#ff6b9d\",\n sweet: \"#ffc75f\",\n bitter: \"#845ef7\",\n sour: \"#51cf66\",\n umami: \"#ff922b\",\n };\n return colors[key] || \"#9c27b0\";\n};\n\nexport const BalanceRecommendations: React.FC = ({\n currentComponents = [],\n onSelectRecommendation,\n filter,\n filterComponent,\n}) => {\n const navigate = useNavigate();\n\n const [recommendations, setRecommendations] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const debounceTimeoutRef = useRef(undefined);\n const cacheRef = useRef>(new Map());\n\n // Cleanup timeout on unmount\n useEffect(() => {\n return () => {\n if (debounceTimeoutRef.current !== undefined) {\n clearTimeout(debounceTimeoutRef.current);\n }\n };\n }, []);\n\n useEffect(() => {\n // Generate cache key from current components and filter\n const cacheKey = JSON.stringify({ currentComponents, filter });\n\n // Check if we have cached results\n const cachedResults = cacheRef.current.get(cacheKey);\n if (cachedResults) {\n setRecommendations(cachedResults);\n setLoading(false);\n setError(null);\n return;\n }\n\n // Clear previous timeout\n if (debounceTimeoutRef.current !== undefined) {\n clearTimeout(debounceTimeoutRef.current);\n }\n\n const fetchRecommendations = async () => {\n try {\n setLoading(true);\n setError(null);\n\n // Call the backend API endpoint to get recommendations\n const queryParams = new URLSearchParams();\n queryParams.append(\n \"existingComponents\",\n JSON.stringify(currentComponents)\n );\n\n // Add filter parameters\n if (filter?.tags && filter.tags.length > 0) {\n queryParams.append(\"tags\", JSON.stringify(filter.tags));\n }\n if (filter?.excludeTags && filter.excludeTags.length > 0) {\n queryParams.append(\"excludeTags\", JSON.stringify(filter.excludeTags));\n }\n if (filter?.size !== undefined) {\n queryParams.append(\"size\", filter.size.toString());\n }\n if (filter?.count !== undefined) {\n queryParams.append(\"count\", filter.count.toString());\n }\n // Always pass metric (defaults to 'balance' if not specified)\n if (filter?.metric) {\n queryParams.append(\"metric\", filter.metric);\n } else {\n queryParams.append(\"metric\", \"balance\");\n }\n\n const response = await apiGet<{\n recommendations: BalanceRecommendation[];\n }>(\n `${API_URL}/api/dishes/recommendations?${queryParams.toString()}`,\n navigate\n );\n\n if (response.error) {\n setError(response.error);\n setLoading(false);\n return;\n }\n\n const recs = response.data?.recommendations || [];\n // Store in cache\n cacheRef.current.set(cacheKey, recs);\n setRecommendations(recs);\n } catch (err) {\n console.error(\"Error fetching recommendations:\", err);\n setError(\n err instanceof Error ? err.message : \"Failed to fetch recommendations\"\n );\n } finally {\n setLoading(false);\n }\n };\n\n // Debounce API call by 2000ms\n debounceTimeoutRef.current = setTimeout(() => {\n fetchRecommendations();\n }, 2000);\n }, [currentComponents, filter]);\n\n // Render loading state\n const loadingContent = loading && (\n \n \n \n Finding best combinations...\n \n \n );\n\n // Render error state\n const errorContent = error && !loading && (\n \n \n ⚠\n \n \n \n Unable to Load Recommendations\n \n \n {error}\n \n \n \n );\n\n // Render empty state\n const emptyContent = !loading && !error && recommendations.length === 0 && (\n \n 📈\n \n Ready for More Flavors\n \n \n Add components to your dish to see personalized balance recommendations.\n \n \n );\n\n // Render recommendations as rows\n const recommendationsContent = !loading && !error && recommendations.length > 0 && (\n \n {recommendations.map((rec, index) => {\n const metricColor = \"#2196f3\";\n const metricLabel = rec.metricName.charAt(0).toUpperCase() + rec.metricName.slice(1);\n return (\n \n {/* Header: Metric value and name */}\n \n {/* Metric badge */}\n \n \n {metricLabel}\n \n \n {(rec.metric * 100).toFixed(0)}%\n \n \n\n {/* Recommendation name */}\n \n {rec.name}\n \n \n\n {/* Individual components and add all button */}\n \n {rec.components.map((comp, i) => (\n \n onSelectRecommendation?.([comp])}\n onDelete={() => onSelectRecommendation?.([comp])}\n deleteIcon={➕}\n sx={{\n height: \"28px\",\n fontSize: \"0.8rem\",\n backgroundColor: `${metricColor}15`,\n color: metricColor,\n fontWeight: 500,\n border: `1px solid ${metricColor}40`,\n cursor: onSelectRecommendation ? \"pointer\" : \"default\",\n transition: \"all 0.2s ease\",\n \"&:hover\": onSelectRecommendation ? {\n backgroundColor: `${metricColor}25`,\n border: `1px solid ${metricColor}60`,\n } : {},\n \"& .MuiChip-label\": {\n px: 0.75,\n },\n \"& .MuiChip-deleteIcon\": {\n marginRight: \"4px\",\n marginLeft: \"4px\",\n cursor: onSelectRecommendation ? \"pointer\" : \"default\",\n fontSize: \"1rem\",\n color: `${metricColor}70`,\n \"&:hover\": {\n color: metricColor,\n },\n },\n }}\n />\n \n ))}\n \n {/* Add all button */}\n {onSelectRecommendation && (\n \n onSelectRecommendation(rec.components)}\n sx={{\n height: \"28px\",\n fontSize: \"0.8rem\",\n backgroundColor: metricColor,\n color: \"white\",\n fontWeight: 600,\n border: `1px solid ${metricColor}`,\n cursor: \"pointer\",\n transition: \"all 0.2s ease\",\n marginLeft: \"auto\",\n \"&:hover\": {\n backgroundColor: metricColor,\n opacity: 0.9,\n boxShadow: `0 2px 8px ${metricColor}40`,\n },\n \"& .MuiChip-label\": {\n px: 1,\n },\n }}\n />\n \n )}\n \n \n );\n })}\n \n );\n\n return (\n \n \n \n \n {filter?.metric ?? 'Balance'} Recommendations\n \n {recommendations.length > 0 && !loading && !error && (\n \n )}\n \n {filterComponent && (\n \n {filterComponent}\n \n )}\n \n\n {loadingContent}\n {errorContent}\n {emptyContent}\n {recommendationsContent}\n \n );\n};\n\nexport default BalanceRecommendations;\n\n","deleted","label",[176,177,178,158],"frontend","components","analysis","permalink","https://www.val.town/x/damonb/react-hono-with-react-router/code/frontend/components/analysis/BalanceRecommendations.tsx","extension","actionData","errors"]