[{"_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/RecommendationsFilter.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},"e433fac4-c8bd-11f0-bc40-42dde27851f2","RecommendationsFilter.tsx","fileId","d67ad7de-bf78-11f0-a115-42dde27851f2","parentId","6d6eb958-550c-11f0-9a03-f69ea79377d9","branchId","branchVersion",865,"latest",["D",1763937835138],14,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n Badge,\n Box,\n Button,\n FormControl,\n FormHelperText,\n MenuItem,\n Paper,\n Popover,\n Select,\n Typography,\n useMediaQuery,\n useTheme\n} from \"@mui/material\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { API_URL } from \"../../env.ts\";\nimport { apiGet } from \"../../utils/api.ts\";\nimport MultiSelect from \"../common/MultiSelect.tsx\";\n\nexport interface RecommendationsFilter {\n tags?: string[];\n excludeTags?: string[];\n size?: number; // 1-3\n count?: number\n metric?: \"balance\" | \"intensity\" | \"aromaticIntegration\"; // Defaults to 'balance'\n}\n\nexport interface RecommendationMetric {\n id: string;\n label: string;\n description: string;\n}\n\ninterface RecommendationsFilterProps {\n onFilterChange: (filter: RecommendationsFilter) => void;\n disabled?: boolean;\n}\n\nexport const RecommendationsFilterComponent: React.FC = ({\n onFilterChange,\n disabled = false,\n}) => {\n const navigate = useNavigate();\n const theme = useTheme();\n const isMobile = useMediaQuery(theme.breakpoints.down(\"md\"));\n const anchorRef = useRef(null);\n\n const [tags, setTags] = useState([]);\n const [metrics, setMetrics] = useState([]);\n const [loadingTags, setLoadingTags] = useState(true);\n const [loadingMetrics, setLoadingMetrics] = useState(true);\n const [error, setError] = useState(null);\n const [popoverOpen, setPopoverOpen] = useState(false);\n\n // Filter state\n const [metric, setMetric] = useState(\"balance\");\n const [size, setSize] = useState(undefined);\n const [count, setCount] = useState(undefined);\n const [selectedTags, setSelectedTags] = useState>(new Set());\n const [excludedTags, setExcludedTags] = useState>(new Set());\n const [filtersLoaded, setFiltersLoaded] = useState(false);\n\n // Load filters from localStorage\n useEffect(() => {\n try {\n const savedFilters = localStorage.getItem(\"recommendationFilters\");\n if (savedFilters) {\n const parsed = JSON.parse(savedFilters);\n if (parsed.metric) setMetric(parsed.metric);\n if (parsed.size !== undefined) setSize(parsed.size);\n if (parsed.count !== undefined) setCount(parsed.count);\n if (parsed.selectedTags?.length > 0) setSelectedTags(new Set(parsed.selectedTags));\n if (parsed.excludedTags?.length > 0) setExcludedTags(new Set(parsed.excludedTags));\n }\n } catch (err) {\n console.error(\"Error loading filters from localStorage:\", err);\n } finally {\n setFiltersLoaded(true);\n }\n }, []);\n\n // Save filters to localStorage whenever they change\n useEffect(() => {\n if (!filtersLoaded) return; // Don't save until initial load is complete\n \n try {\n const filtersToSave = {\n metric,\n size,\n count,\n selectedTags: Array.from(selectedTags),\n excludedTags: Array.from(excludedTags),\n };\n localStorage.setItem(\"recommendationFilters\", JSON.stringify(filtersToSave));\n } catch (err) {\n console.error(\"Error saving filters to localStorage:\", err);\n }\n }, [metric, size, count, selectedTags, excludedTags, filtersLoaded]);\n\n // Fetch available tags and metrics on mount\n useEffect(() => {\n const fetchTags = async () => {\n try {\n setLoadingTags(true);\n setError(null);\n\n const response = await apiGet<{ tags: string[] }>(\n `${API_URL}/api/tags`,\n navigate\n );\n\n if (response.error) {\n setError(response.error);\n } else if (response.data?.tags) {\n setTags(response.data.tags);\n }\n } catch (err) {\n console.error(\"Error fetching tags:\", err);\n setError(err instanceof Error ? err.message : \"Failed to fetch tags\");\n } finally {\n setLoadingTags(false);\n }\n };\n\n const fetchMetrics = async () => {\n try {\n setLoadingMetrics(true);\n const response = await apiGet<{ metrics: RecommendationMetric[] }>(\n `${API_URL}/api/recommendations/metrics`,\n navigate\n );\n\n if (response.error) {\n console.error(\"Error fetching metrics:\", response.error);\n } else if (response.data?.metrics) {\n setMetrics(response.data.metrics);\n // Set the default metric from the server\n const defaultMetric = response.data.metrics[0];\n if (defaultMetric) {\n setMetric(defaultMetric.id);\n }\n }\n } catch (err) {\n console.error(\"Error fetching metrics:\", err);\n } finally {\n setLoadingMetrics(false);\n }\n };\n\n fetchTags();\n fetchMetrics();\n }, [navigate]);\n\n // Emit filter changes\n useEffect(() => {\n const filter: RecommendationsFilter = {\n metric: metric as \"balance\" | \"intensity\" | \"aromaticIntegration\" | undefined,\n size,\n count,\n tags: selectedTags.size > 0 ? Array.from(selectedTags) : undefined,\n excludeTags: excludedTags.size > 0 ? Array.from(excludedTags) : undefined,\n };\n onFilterChange(filter);\n }, [metric, size, count, selectedTags, excludedTags, onFilterChange]);\n\n\n const handleReset = () => {\n setMetric(\"balance\");\n setSize(undefined);\n setCount(undefined);\n setSelectedTags(new Set());\n setExcludedTags(new Set());\n try {\n localStorage.removeItem(\"recommendationFilters\");\n } catch (err) {\n console.error(\"Error clearing filters from localStorage:\", err);\n }\n };\n\n // Count active filters\n const activeFilterCount =\n (size !== undefined ? 1 : 0) +\n (count !== undefined ? 1 : 0) +\n (selectedTags.size > 0 ? 1 : 0) +\n (excludedTags.size > 0 ? 1 : 0);\n\n return (\n <>\n {/* Compact Filter Button */}\n \n \n 0 ? \"contained\" : \"outlined\"}\n onClick={() => setPopoverOpen(true)}\n disabled={disabled || loadingTags || loadingMetrics}\n sx={{\n textTransform: \"none\",\n fontWeight: 600,\n }}\n >\n {loadingTags || loadingMetrics ? \"Loading...\" : \"Filters\"}\n \n \n {activeFilterCount > 0 && (\n <>\n \n {selectedTags.size > 0 && `✅ ${Array.from(selectedTags).join(\", \")}`}\n {selectedTags.size > 0 && excludedTags.size > 0 && \" • \"}\n {excludedTags.size > 0 && `❌ ${Array.from(excludedTags).join(\", \")}`}\n {(selectedTags.size > 0 || excludedTags.size > 0) && (size !== undefined || count !== undefined) && \" • \"}\n {size && `Size: ${size}`}\n {size && count !== undefined && \" • \"}\n {count && `Max: ${count}`}\n \n \n Reset\n \n \n )}\n \n\n {/* Filter Popover */}\n setPopoverOpen(false)}\n anchorOrigin={{\n vertical: \"top\",\n horizontal: \"left\",\n }}\n transformOrigin={{\n vertical: \"top\",\n horizontal: \"right\",\n }}\n >\n \n \n \n Filter Recommendations\n \n setPopoverOpen(false)}\n sx={{ textTransform: \"none\", fontSize: \"0.75rem\" }}\n >\n Close\n \n \n\n {error && (\n \n Error loading tags: {error}\n \n )}\n\n \n {/* Metric Selector */}\n \n \n Sort by\n \n setMetric(e.target.value)}\n disabled={disabled || loadingMetrics}\n >\n {metrics.length > 0 ? (\n metrics.map((m) => (\n \n {m.label}\n \n ))\n ) : (\n Balance (default)\n )}\n \n \n {metrics.find((m) => m.id === metric)?.description ||\n \"Choose what to prioritize in recommendations\"}\n \n \n\n {/* Size Filter */}\n \n \n Components per recommendation\n \n setSize(e.target.value ? parseInt(e.target.value as string, 10) : undefined)}\n disabled={disabled}\n >\n Any size\n 1 component\n 2 components\n 3 components\n \n Filter by number of components\n \n\n {/* Count Filter */}\n \n \n Maximum recommendations\n \n setCount(e.target.value ? parseInt(e.target.value as string, 10) : undefined)}\n disabled={disabled}\n >\n Default (10)\n 5\n 10\n 15\n 20\n \n Limit number of results\n \n\n {/* Include Tags Filter */}\n setSelectedTags(new Set(selected))}\n disabled={disabled}\n helperText=\"Select tags to include in recommendations\"\n maxTags={3}\n />\n\n {/* Exclude Tags Filter */}\n setExcludedTags(new Set(selected))}\n disabled={disabled}\n helperText=\"Select tags to exclude from recommendations\"\n maxTags={3}\n />\n \n \n \n \n );\n};\n\nexport default RecommendationsFilterComponent;\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/RecommendationsFilter.tsx","extension","actionData","errors"]