improve chart filtering logic to support multiple terms (#1274)

internal/site/src/components/charts/container-chart.tsx

@@ -94,8 +94,11 @@ export default memo(function ContainerChart({
 		if (!filter) {
 			return new Set<string>()
 		}
-		const filterLower = filter.toLowerCase()
+		const filterTerms = filter.toLowerCase().split(" ").filter(term => term.length > 0)
-		return new Set(Object.keys(chartConfig).filter((key) => !key.toLowerCase().includes(filterLower)))
+		return new Set(Object.keys(chartConfig).filter((key) => {
+			const keyLower = key.toLowerCase()
+			return !filterTerms.some(term => keyLower.includes(term))
+		}))
 	}, [chartConfig, filter])
 
 	// console.log('rendered at', new Date())

internal/site/src/components/charts/temperature-chart.tsx

@@ -91,7 +91,8 @@ export default memo(function TemperatureChart({ chartData }: { chartData: ChartD
 						}
 					/>
 					{colors.map((key) => {
-						const filtered = filter && !key.toLowerCase().includes(filter.toLowerCase())
+						const filterTerms = filter ? filter.toLowerCase().split(" ").filter(term => term.length > 0) : []
+						const filtered = filterTerms.length > 0 && !filterTerms.some(term => key.toLowerCase().includes(term))
 						const strokeOpacity = filtered ? 0.1 : 1
 						return (
 							<Line

internal/site/src/components/lang-toggle.tsx

@@ -12,7 +12,7 @@ export function LangToggle() {
 	return (
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
-				<Button variant={"ghost"} size="icon" className="hidden 450:flex">
+				<Button variant={"ghost"} size="icon" className="hidden sm:flex">
 					<LanguagesIcon className="absolute h-[1.2rem] w-[1.2rem] light:opacity-85" />
 					<span className="sr-only">Language</span>
 				</Button>

internal/site/src/components/navbar.tsx

@@ -50,7 +50,7 @@ export default function Navbar() {
 			<div className="flex items-center ms-auto" onMouseEnter={() => import("@/components/routes/settings/general")}>
 				<Link
 					href={getPagePath($router, "containers")}
-					className={cn("", buttonVariants({ variant: "ghost", size: "icon" }))}
+					className={cn(buttonVariants({ variant: "ghost", size: "icon" }))}
 					aria-label="Containers"
 				>
 					<ContainerIcon className="h-[1.2rem] w-[1.2rem]" strokeWidth={1.5} />
@@ -60,13 +60,13 @@ export default function Navbar() {
 				<Link
 					href={getPagePath($router, "settings", { name: "general" })}
 					aria-label="Settings"
-					className={cn("", buttonVariants({ variant: "ghost", size: "icon" }))}
+					className={cn(buttonVariants({ variant: "ghost", size: "icon" }))}
 				>
 					<SettingsIcon className="h-[1.2rem] w-[1.2rem]" />
 				</Link>
 				<DropdownMenu>
 					<DropdownMenuTrigger asChild>
-						<button aria-label="User Actions" className={cn("", buttonVariants({ variant: "ghost", size: "icon" }))}>
+						<button aria-label="User Actions" className={cn(buttonVariants({ variant: "ghost", size: "icon" }))}>
 							<UserIcon className="h-[1.2rem] w-[1.2rem]" />
 						</button>
 					</DropdownMenuTrigger>
@@ -120,7 +120,7 @@ export default function Navbar() {
 						</DropdownMenuItem>
 					</DropdownMenuContent>
 				</DropdownMenu>
-				<AddSystemButton className="ms-2" />
+				<AddSystemButton className="ms-2 hidden 450:flex" />
 			</div>
 		</div>
 	)

internal/site/src/components/routes/home.tsx

@@ -14,7 +14,7 @@ export default memo(() => {
 	return useMemo(
 		() => (
 			<>
-				<div className="grid gap-4">
+				<div className="flex flex-col gap-4">
 					<ActiveAlerts />
 					<Suspense>
 						<SystemsTable />

internal/site/src/components/ui/chart.tsx

@@ -91,16 +91,16 @@ const ChartTooltip = RechartsPrimitive.Tooltip
 const ChartTooltipContent = React.forwardRef<
 	HTMLDivElement,
 	React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-		React.ComponentProps<"div"> & {
+	React.ComponentProps<"div"> & {
-			hideLabel?: boolean
+		hideLabel?: boolean
-			indicator?: "line" | "dot" | "dashed"
+		indicator?: "line" | "dot" | "dashed"
-			nameKey?: string
+		nameKey?: string
-			labelKey?: string
+		labelKey?: string
-			unit?: string
+		unit?: string
-			filter?: string
+		filter?: string
-			contentFormatter?: (item: any, key: string) => React.ReactNode | string
+		contentFormatter?: (item: any, key: string) => React.ReactNode | string
-			truncate?: boolean
+		truncate?: boolean
-		}
+	}
 >(
 	(
 		{
@@ -129,7 +129,11 @@ const ChartTooltipContent = React.forwardRef<
 
 		React.useMemo(() => {
 			if (filter) {
-				payload = payload?.filter((item) => (item.name as string)?.toLowerCase().includes(filter.toLowerCase()))
+				const filterTerms = filter.toLowerCase().split(" ").filter(term => term.length > 0)
+				payload = payload?.filter((item) => {
+					const itemName = (item.name as string)?.toLowerCase()
+					return filterTerms.some(term => itemName?.includes(term))
+				})
 			}
 			if (itemSorter) {
 				// @ts-expect-error
@@ -250,10 +254,10 @@ const ChartLegend = RechartsPrimitive.Legend
 const ChartLegendContent = React.forwardRef<
 	HTMLDivElement,
 	React.ComponentProps<"div"> &
-		Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+	Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-			hideIcon?: boolean
+		hideIcon?: boolean
-			nameKey?: string
+		nameKey?: string
-		}
+	}
 >(({ className, payload, verticalAlign = "bottom" }, ref) => {
 	// const { config } = useChart()