Add support for filtering by pre-defined dimensions and measures in the Visualization Designer
**:warning: This epic does not include [custom event property querying](https://gitlab.com/groups/gitlab-org/-/epics/11962), given that it is a separate topic that requires more work to support customer-defined values.** As part of our schema, we have [a defined set of dimensions and measures](https://gitlab.com/gitlab-org/analytics-section/product-analytics/helm-charts/-/blob/main/charts/cube/config/schemas/TrackedEvents.js?ref_type=heads) that every customer of Product Analytics receives. This includes browser name, page URL path, and so on. We should be able to deliver a basic filtering ability within the visualization designer, given that we know the number of filter operators we have that Qube provides based on the type of that dimension. ## UX We have [a filter component](https://design.gitlab.com/components/filter) that's defined in our design library, and it's already used to define, to [filter issues](https://gitlab.com/gitlab-org/gitlab/-/issues), [merge requests](https://gitlab.com/gitlab-org/gitlab/-/merge_requests), and is also being used in [Observability](https://gitlab.com/gitlab-org/opstrace/sandbox/otel-demo/-/tracing?period[]=1h&sortBy=timestamp_desc). We know the filter component utilizes tokenizers based on filter operators, e.g., `=`/`!=`. For example, see the Observability demo and note that you can use the greater than or less than operators when filtering on "Duration." ![Screenshot_2024-04-29_at_12.49.36](/uploads/b153e1b6a3bdffea5c6e3e9a34101048/Screenshot_2024-04-29_at_12.49.36.png) ### Date range filter preview ![image](/uploads/0175c809b60715c28b41dfc85a657573/image.png) Selecting the date range to preview the data and visualization in this experience should be separate from the filter bar, just to make it clear that it's not something that's saved with the visualization that's controlled at the dashboard level. This would also keep things consistent with how dashboard date filtering currently works. We can use a tooltip to indicate, "Filtering by date in the visualization designer is for previewing purposes only". As mentioned in the below proposal, we should default to "last 7 days" to improve default querying performance, which will likely impact retrieving values when filtering dimensions/measures, e.g., event name, browser type, etc. ## Proposal Deliver an MVC that gives the customer a standardized way (given this is a known pattern within our product and other product analytics solutions) to filter based on standard dimensions, measures, and filter operators provided by Cube. Given that we have a known set of [filter operators within Cube](https://cube.dev/docs/product/apis-integrations/rest-api/query-format#filters-operators), dimensions, and measures, we should be able to use this pattern for the visualization designer and eventually in the dashboard views themselves. Other notes: - Similar to [Tracing](https://gitlab.com/gitlab-org/opstrace/sandbox/otel-demo/-/tracing?period[]=1h&sortBy=timestamp_desc), we should default last 7 days (or less) for the time range, and sort by event timestamp descending We should only deal with what we currently support regarding a YAML schema-driven dashboard use case, which should be like what we have in the schema and the known operators there. We don't have a way to manifest it in the UI and we have to punch it in manually.
epic