better handling dates in clickhouse

apps/dashboard/src/components/overview/filters/overview-filters-drawer-content.tsx

@@ -20,6 +20,8 @@ import type {
   IChartEventFilterValue,
 } from '@openpanel/validation';
 
+import { useOverviewOptions } from '../useOverviewOptions';
+
 export interface OverviewFiltersDrawerContentProps {
   projectId: string;
   nuqsOptions?: NuqsOptions;
@@ -33,10 +35,11 @@ export function OverviewFiltersDrawerContent({
   enableEventsFilter,
   mode,
 }: OverviewFiltersDrawerContentProps) {
+  const { interval, range } = useOverviewOptions();
   const [filters, setFilter] = useEventQueryFilters(nuqsOptions);
   const [event, setEvent] = useEventQueryNamesFilter(nuqsOptions);
-  const eventNames = useEventNames(projectId);
-  const eventProperties = useEventProperties(projectId);
+  const eventNames = useEventNames({ projectId, interval, range });
+  const eventProperties = useEventProperties({ projectId, interval, range });
   const profileProperties = useProfileProperties(projectId);
   const properties = mode === 'events' ? eventProperties : profileProperties;
 
@@ -113,11 +116,14 @@ export function FilterOptionEvent({
     operator: IChartEventFilterOperator
   ) => void;
 }) {
-  const values = useEventValues(
+  const { interval, range } = useOverviewOptions();
+  const values = useEventValues({
     projectId,
-    filter.name === 'path' ? 'screen_view' : 'session_start',
-    filter.name
-  );
+    event: filter.name === 'path' ? 'screen_view' : 'session_start',
+    property: filter.name,
+    interval,
+    range,
+  });
 
   return (
     <div className="flex items-center gap-2">

apps/dashboard/src/components/report/sidebar/EventPropertiesCombobox.tsx

@@ -1,6 +1,6 @@
 import { Combobox } from '@/components/ui/combobox';
 import { useAppParams } from '@/hooks/useAppParams';
-import { useDispatch } from '@/redux';
+import { useDispatch, useSelector } from '@/redux';
 import { api } from '@/trpc/client';
 import { cn } from '@/utils/cn';
 import { DatabaseIcon } from 'lucide-react';
@@ -18,11 +18,14 @@ export function EventPropertiesCombobox({
 }: EventPropertiesComboboxProps) {
   const dispatch = useDispatch();
   const { projectId } = useAppParams();
-
+  const range = useSelector((state) => state.report.range);
+  const interval = useSelector((state) => state.report.interval);
   const query = api.chart.properties.useQuery(
     {
       event: event.name,
       projectId,
+      range,
+      interval,
     },
     {
       enabled: !!event.name,

apps/dashboard/src/components/report/sidebar/ReportBreakdowns.tsx

@@ -16,9 +16,14 @@ import type { ReportEventMoreProps } from './ReportEventMore';
 export function ReportBreakdowns() {
   const { projectId } = useAppParams();
   const selectedBreakdowns = useSelector((state) => state.report.breakdowns);
+  const interval = useSelector((state) => state.report.interval);
+  const range = useSelector((state) => state.report.range);
+
   const dispatch = useDispatch();
   const propertiesQuery = api.chart.properties.useQuery({
     projectId,
+    range,
+    interval,
   });
   const propertiesCombobox = (propertiesQuery.data ?? []).map((item) => ({
     value: item,

apps/dashboard/src/components/report/sidebar/ReportEvents.tsx

@@ -29,13 +29,18 @@ import type { ReportEventMoreProps } from './ReportEventMore';
 export function ReportEvents() {
   const previous = useSelector((state) => state.report.previous);
   const selectedEvents = useSelector((state) => state.report.events);
-  const input = useSelector((state) => state.report);
+  const startDate = useSelector((state) => state.report.startDate);
+  const endDate = useSelector((state) => state.report.endDate);
+  const range = useSelector((state) => state.report.range);
+  const interval = useSelector((state) => state.report.interval);
   const dispatch = useDispatch();
   const { projectId } = useAppParams();
-  const eventNames = useEventNames(projectId, {
-    startDate: input.startDate,
-    endDate: input.endDate,
-    range: input.range,
+  const eventNames = useEventNames({
+    projectId,
+    startDate,
+    endDate,
+    range,
+    interval,
   });
 
   const dispatchChangeEvent = useDebounceFn((event: IChartEvent) => {

apps/dashboard/src/components/report/sidebar/filters/FilterItem.tsx

@@ -26,7 +26,9 @@ interface FilterProps {
 
 export function FilterItem({ filter, event }: FilterProps) {
   const { projectId } = useAppParams();
-  const { range, startDate, endDate } = useSelector((state) => state.report);
+  const { range, startDate, endDate, interval } = useSelector(
+    (state) => state.report
+  );
   const getLabel = useMappings();
   const dispatch = useDispatch();
   const potentialValues = api.chart.values.useQuery({
@@ -34,6 +36,7 @@ export function FilterItem({ filter, event }: FilterProps) {
     property: filter.name,
     projectId,
     range,
+    interval,
     startDate,
     endDate,
   });

apps/dashboard/src/components/report/sidebar/filters/FiltersCombobox.tsx

@@ -15,7 +15,10 @@ interface FiltersComboboxProps {
 
 export function FiltersCombobox({ event }: FiltersComboboxProps) {
   const dispatch = useDispatch();
-  const { range, startDate, endDate } = useSelector((state) => state.report);
+  const interval = useSelector((state) => state.report.interval);
+  const range = useSelector((state) => state.report.range);
+  const startDate = useSelector((state) => state.report.startDate);
+  const endDate = useSelector((state) => state.report.endDate);
   const { projectId } = useAppParams();
 
   const query = api.chart.properties.useQuery(
@@ -23,6 +26,7 @@ export function FiltersCombobox({ event }: FiltersComboboxProps) {
       event: event.name,
       projectId,
       range,
+      interval,
       startDate,
       endDate,
     },