feat: filter ui

Signed-off-by: Henry Gressmann <[email protected]>

Author: explodingcamera

biome.json

@@ -11,6 +11,16 @@
 		"clientKind": "git",
 		"defaultBranch": "main"
 	},
+	"linter": {
+		"rules": {
+			"suspicious": {
+				"noArrayIndexKey": "off"
+			},
+			"a11y": {
+				"useSemanticElements": "off"
+			}
+		}
+	},
 	"files": {
 		"ignore": ["**/node_modules/*", "**/api/dashboard.ts"]
 	}

src/web/routes/dashboard.rs

@@ -1,4 +1,4 @@
-use crate::app::reports::{self, DateRange, Dimension, Metric, ReportStats};
+use crate::app::reports::{self, DateRange, Dimension, DimensionFilter, Metric, ReportStats};
 use crate::app::Liwan;
 use crate::utils::validate::{self, can_access_project};
 use crate::web::session::SessionUser;
@@ -24,12 +24,14 @@ struct GraphResponse {
 #[derive(Object)]
 struct StatsRequest {
     range: DateRange,
+    filters: Vec<DimensionFilter>,
 }
 
 #[derive(Object)]
 #[oai(rename_all = "camelCase")]
 struct GraphRequest {
     range: DateRange,
+    filters: Vec<DimensionFilter>,
     data_points: u32,
     metric: Metric,
 }
@@ -46,6 +48,7 @@ struct StatsResponse {
 #[oai(rename_all = "camelCase")]
 struct DimensionRequest {
     range: DateRange,
+    filters: Vec<DimensionFilter>,
     metric: Metric,
     dimension: Dimension,
 }
@@ -89,9 +92,16 @@ impl DashboardAPI {
         }
 
         let conn = app.events_conn().http_status(StatusCode::INTERNAL_SERVER_ERROR)?;
-        let report =
-            reports::overall_report(&conn, &entities, "pageview", &req.range, req.data_points, &[], &req.metric)
-                .http_status(StatusCode::INTERNAL_SERVER_ERROR)?;
+        let report = reports::overall_report(
+            &conn,
+            &entities,
+            "pageview",
+            &req.range,
+            req.data_points,
+            &req.filters,
+            &req.metric,
+        )
+        .http_status(StatusCode::INTERNAL_SERVER_ERROR)?;
 
         Ok(Json(GraphResponse { data: report }))
     }
@@ -113,10 +123,10 @@ impl DashboardAPI {
 
         let conn = app.events_conn().http_status(StatusCode::INTERNAL_SERVER_ERROR)?;
 
-        let stats = reports::overall_stats(&conn, &entities, "pageview", &req.range, &[])
+        let stats = reports::overall_stats(&conn, &entities, "pageview", &req.range, &req.filters)
             .http_status(StatusCode::INTERNAL_SERVER_ERROR)?;
 
-        let stats_prev = reports::overall_stats(&conn, &entities, "pageview", &req.range.prev(), &[])
+        let stats_prev = reports::overall_stats(&conn, &entities, "pageview", &req.range.prev(), &req.filters)
             .http_status(StatusCode::INTERNAL_SERVER_ERROR)?;
 
         let online = reports::online_users(&conn, &entities).http_status(StatusCode::INTERNAL_SERVER_ERROR)?;
@@ -141,9 +151,16 @@ impl DashboardAPI {
 
         let conn = app.events_conn().http_status(StatusCode::INTERNAL_SERVER_ERROR)?;
 
-        let stats =
-            reports::dimension_report(&conn, &entities, "pageview", &req.range, &req.dimension, &[], &req.metric)
-                .http_status(StatusCode::INTERNAL_SERVER_ERROR)?;
+        let stats = reports::dimension_report(
+            &conn,
+            &entities,
+            "pageview",
+            &req.range,
+            &req.dimension,
+            &req.filters,
+            &req.metric,
+        )
+        .http_status(StatusCode::INTERNAL_SERVER_ERROR)?;
 
         let mut data = Vec::new();
         for (key, value) in stats {

web/src/api/constants.ts

@@ -1,4 +1,4 @@
-import type { Dimension, Metric } from "./types";
+import type { Dimension, DimensionFilter, Metric } from "./types";
 
 export const metricNames: Record<Metric, string> = {
 	views: "Total Views",
@@ -18,3 +18,19 @@ export const dimensionNames: Record<Dimension, string> = {
 	country: "Country",
 	fqdn: "Domain",
 };
+
+export const filterNames: Record<DimensionFilter["filterType"], string> = {
+	contains: "contains",
+	equal: "equals",
+	is_null: "is null",
+	not_contains: "does not contain",
+	not_equal: "does not equal",
+};
+
+export const filterNamesCapitalized: Record<DimensionFilter["filterType"], string> = {
+	contains: "Contains",
+	equal: "Equals",
+	is_null: "Is Null",
+	not_contains: "Does Not Contain",
+	not_equal: "Does Not Equal",
+};

web/src/api/dashboard.ts

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 
 import { toDataPoints } from "../components/graph";
-import type { DateRange, Dimension, DimensionTableRow, Metric, ProjectResponse } from "./types";
+import type { DateRange, Dimension, DimensionFilter, DimensionTableRow, Metric, ProjectResponse } from "./types";
 
 import { api } from ".";
 import { queryClient, useQuery } from "./query";
@@ -56,10 +56,12 @@ export const useDimension = ({
 	dimension,
 	metric,
 	range,
+	filters,
 }: {
 	project: ProjectResponse;
 	dimension: Dimension;
 	metric: Metric;
+	filters: DimensionFilter[];
 	range: DateRange;
 }): {
 	data: DimensionTableRow[] | undefined;
@@ -70,13 +72,14 @@ export const useDimension = ({
 } => {
 	const { data, isLoading, error } = useQuery({
 		placeholderData: (prev) => prev,
-		queryKey: ["dimension", project.id, dimension, metric, range],
+		queryKey: ["dimension", project.id, dimension, metric, range, filters],
 		queryFn: () =>
 			api["/api/dashboard/project/{project_id}/dimension"]
 				.post({
 					params: { project_id: project.id },
 					json: {
 						dimension,
+						filters,
 						metric,
 						range,
 					},
@@ -94,10 +97,12 @@ export const useProjectData = ({
 	project,
 	metric,
 	rangeName = "last7Days",
+	filters = [],
 }: {
 	project?: ProjectResponse;
 	metric: Metric;
 	rangeName?: RangeName;
+	filters?: DimensionFilter[];
 }) => {
 	const { range, graphRange, dataPoints } = useMemo(() => resolveRange(rangeName), [rangeName]);
 
@@ -115,17 +120,16 @@ export const useProjectData = ({
 	} = useQuery({
 		refetchInterval,
 		staleTime,
-		queryKey: ["project_stats", project?.id, range],
+		queryKey: ["project_stats", project?.id, range, metric, filters],
 
 		enabled: project !== undefined,
 		queryFn: () =>
 			api["/api/dashboard/project/{project_id}/stats"]
-				.post({ json: { range }, params: { project_id: project?.id ?? "" } })
+				.post({ json: { range, filters }, params: { project_id: project?.id ?? "" } })
 				.json(),
 		placeholderData: (prev) => prev,
 	});
 
-	const json = { range, metric, dataPoints };
 	const {
 		data: graph,
 		isError: isErrorGraph,
@@ -136,7 +140,9 @@ export const useProjectData = ({
 		enabled: project !== undefined,
 		queryKey: ["project_graph", project?.id, range, graphRange, metric, dataPoints],
 		queryFn: () =>
-			api["/api/dashboard/project/{project_id}/graph"].post({ json, params: { project_id: project?.id ?? "" } }).json(),
+			api["/api/dashboard/project/{project_id}/graph"]
+				.post({ json: { range, metric, dataPoints, filters }, params: { project_id: project?.id ?? "" } })
+				.json(),
 		placeholderData: (prev) => prev,
 	});
 
@@ -157,6 +163,9 @@ export const useProjectData = ({
 	};
 };
 
+export type ProjectDataGraph = ReturnType<typeof useProjectData>["graph"];
+export type ProjectDataStats = ReturnType<typeof useProjectData>["stats"];
+
 export const invalidateProjects = () => queryClient.invalidateQueries({ queryKey: ["projects"] });
 export const invalidateEntities = () => queryClient.invalidateQueries({ queryKey: ["entities"] });
 export const invalidateUsers = () => queryClient.invalidateQueries({ queryKey: ["users"] });

web/src/api/hooks.ts

@@ -3,9 +3,11 @@ import type dashboardspec from "./dashboard";
 
 export type DashboardSpec = NormalizeOAS<typeof dashboardspec>;
 export type Metric = OASModel<DashboardSpec, "Metric">;
+export type DateRange = OASModel<DashboardSpec, "DateRange">;
 export type Dimension = OASModel<DashboardSpec, "Dimension">;
+export type DimensionFilter = OASModel<DashboardSpec, "DimensionFilter">;
 export type DimensionTableRow = OASModel<DashboardSpec, "DimensionTableRow">;
-export type DateRange = OASModel<DashboardSpec, "DateRange">;
+
 export type ProjectResponse = OASModel<DashboardSpec, "ProjectResponse">;
 export type EntityResponse = OASModel<DashboardSpec, "EntityResponse">;
 export type UserResponse = OASModel<DashboardSpec, "UserResponse">;

web/src/api/types.ts

@@ -17,50 +17,37 @@ import { BrowserIcon, MobileDeviceIcon, OSIcon, ReferrerIcon } from "../icons";
 import { countryCodeToFlag, formatFullUrl, formatHost, getHref, tryParseUrl } from "../../utils";
 import { DetailsModal } from "./modal";
 import { formatMetricVal } from "../../utils";
+import type { ProjectQuery } from "../project";
 
 export const cardStyles = styles.card;
 
 export const DimensionCard = ({
-	project,
 	dimension,
-	metric,
-	range,
+	query,
 }: {
-	project: ProjectResponse;
 	dimension: Dimension;
-	metric: Metric;
-	range: DateRange;
+	query: ProjectQuery;
 }) => {
 	return (
 		<article className={styles.card}>
 			<div className={styles.dimensionHeader}>
 				<div>{dimensionNames[dimension]}</div>
-				<div>{metricNames[metric]}</div>
+				<div>{metricNames[query.metric]}</div>
 			</div>
-			<DimensionTable project={project} dimension={dimension} metric={metric} range={range} />
+			<DimensionTable dimension={dimension} query={query} />
 		</article>
 	);
 };
 
-export const DimensionTabsCard = ({
-	project,
-	metric,
-	range,
-	dimensions,
-}: { project: ProjectResponse; dimensions: Dimension[]; metric: Metric; range: DateRange }) => {
+export const DimensionTabsCard = ({ dimensions, query }: { dimensions: Dimension[]; query: ProjectQuery }) => {
 	return (
 		<article className={styles.card}>
-			<DimensionTabs project={project} dimensions={dimensions} metric={metric} range={range} />
+			<DimensionTabs dimensions={dimensions} query={query} />
 		</article>
 	);
 };
 
-export const DimensionTabs = ({
-	project,
-	metric,
-	range,
-	dimensions,
-}: { project: ProjectResponse; dimensions: Dimension[]; metric: Metric; range: DateRange }) => {
+export const DimensionTabs = ({ dimensions, query }: { dimensions: Dimension[]; query: ProjectQuery }) => {
 	return (
 		<Tabs.Root className={styles.tabs} defaultValue={dimensions[0]}>
 			<Tabs.List className={styles.tabsList}>
@@ -69,24 +56,22 @@ export const DimensionTabs = ({
 						{dimensionNames[value]}
 					</Tabs.Trigger>
 				))}
-				<div>{metricNames[metric]}</div>
+				<div>{metricNames[query.metric]}</div>
 			</Tabs.List>
 			{dimensions.map((dimension) => (
 				<Tabs.Content key={dimension} value={dimension} className={styles.tabsContent}>
-					<DimensionTable dimension={dimension} metric={metric} range={range} project={project} noHeader />
+					<DimensionTable dimension={dimension} noHeader query={query} />
 				</Tabs.Content>
 			))}
 		</Tabs.Root>
 	);
 };
 
 export const DimensionTable = ({
-	project,
 	dimension,
-	metric,
-	range,
-}: { project: ProjectResponse; dimension: Dimension; metric: Metric; range: DateRange; noHeader?: boolean }) => {
-	const { data, biggest, order, isLoading } = useDimension({ project, dimension, metric, range });
+	query,
+}: { dimension: Dimension; noHeader?: boolean; query: ProjectQuery }) => {
+	const { data, biggest, order, isLoading } = useDimension({ dimension, ...query });
 
 	const dataTruncated = data?.slice(0, 6);
 	return (
@@ -114,7 +99,7 @@ export const DimensionTable = ({
 					</div>
 				)}
 			</div>
-			<DetailsModal project={project} dimension={dimension} metric={metric} range={range} />
+			<DetailsModal dimension={dimension} query={query} />
 		</>
 	);
 };
@@ -178,11 +163,9 @@ const dimensionLabels: Record<Dimension, (value: DimensionTableRow) => React.Rea
 			<ReferrerIcon referrer={value.dimensionValue} icon={value.icon} size={24} />
 			{value.displayName || value.dimensionValue || "Unknown"}
 			{value.dimensionValue && isValidFqdn(value.dimensionValue) && (
-				<>
-					<a href={`https://${value.dimensionValue}`} target="_blank" rel="noreferrer" className={styles.external}>
-						<SquareArrowOutUpRightIcon size={16} />
-					</a>
-				</>
+				<a href={`https://${value.dimensionValue}`} target="_blank" rel="noreferrer" className={styles.external}>
+					<SquareArrowOutUpRightIcon size={16} />
+				</a>
 			)}
 		</>
 	),

web/src/components/dimensions/index.tsx

@@ -15,27 +15,23 @@ import {
 	type ProjectResponse,
 } from "../../api";
 import { useDeferredValue, useMemo, useState } from "react";
+import type { ProjectQuery } from "../project";
 
-export const DetailsModal = ({
-	project,
-	dimension,
-	metric,
-	range,
-}: { project: ProjectResponse; dimension: Dimension; metric: Metric; range: DateRange }) => {
-	const { data, biggest, order, isLoading } = useDimension({ project, dimension, metric, range });
+export const DetailsModal = ({ dimension, query }: { dimension: Dimension; query: ProjectQuery }) => {
+	const { data, biggest, order, isLoading } = useDimension({ dimension, ...query });
 
-	const [query, setQuery] = useState("");
-	const deferredQuery = useDeferredValue(query);
+	const [filter, setFilter] = useState("");
+	const deferredFilter = useDeferredValue(filter);
 
 	const results = useMemo(() => {
-		if (!deferredQuery || !data) return data;
-		return fuzzysort.go(deferredQuery, data, { keys: ["displayName", "dimensionValue", "value"] }).map((r) => r.obj);
-	}, [deferredQuery, data]);
+		if (!deferredFilter || !data) return data;
+		return fuzzysort.go(deferredFilter, data, { keys: ["displayName", "dimensionValue", "value"] }).map((r) => r.obj);
+	}, [deferredFilter, data]);
 
 	return (
 		<Dialog
-			title={`${dimensionNames[dimension]} - ${metricNames[metric]}`}
-			description={`Detailed breakdown of ${dimensionNames[dimension]} by ${metricNames[metric]}`}
+			title={`${dimensionNames[dimension]} - ${metricNames[query.metric]}`}
+			description={`Detailed breakdown of ${dimensionNames[dimension]} by ${metricNames[query.metric]}`}
 			hideTitle
 			hideDescription
 			showClose
@@ -51,13 +47,13 @@ export const DetailsModal = ({
 			<div className={styles.dimensionTable} style={{ "--count": data?.length } as React.CSSProperties}>
 				<div className={styles.dimensionHeader}>
 					<div>{dimensionNames[dimension]}</div>
-					<div>{metricNames[metric]}</div>
+					<div>{metricNames[query.metric]}</div>
 				</div>
 				<input
 					type="search"
 					placeholder="Search..."
-					value={query}
-					onChange={(e) => setQuery(e.target.value)}
+					value={filter}
+					onChange={(e) => setFilter(e.target.value)}
 					className={styles.search}
 				/>
 				{results?.map((d) => {