feat(dashboard): reuse reports filter on overview and add more operators (#31)

apps/dashboard/src/components/report/chart/Chart.tsx

@@ -1,6 +1,8 @@
 'use client';
 
+import { useEffect, useMemo, useState } from 'react';
 import { api } from '@/trpc/client';
+import debounce from 'lodash.debounce';
 
 import type { IChartProps } from '@openpanel/validation';
 
@@ -16,7 +18,7 @@ import { ReportPieChart } from './ReportPieChart';
 
 export type ReportChartProps = IChartProps;
 
-export function Chart() {
+function useChartData() {
   const {
     interval,
     events,
@@ -32,26 +34,78 @@ export function Chart() {
     limit,
     offset,
   } = useChartContext();
-  const [data] = api.chart.chart.useSuspenseQuery(
-    {
+
+  const [debouncedParams, setDebouncedParams] = useState({
+    interval,
+    events,
+    breakdowns,
+    chartType,
+    range,
+    previous,
+    formula,
+    metric,
+    projectId,
+    startDate,
+    endDate,
+    limit,
+    offset,
+  });
+
+  const debouncedSetParams = useMemo(
+    () => debounce(setDebouncedParams, 500),
+    []
+  );
+
+  useEffect(() => {
+    debouncedSetParams({
       interval,
-      chartType,
-      events,
+      events: events.map((event) => ({
+        ...event,
+        filters: event.filters?.filter((filter) => filter.value.length > 0),
+      })),
       breakdowns,
+      chartType,
       range,
-      startDate,
-      endDate,
-      projectId,
       previous,
       formula,
       metric,
+      projectId,
+      startDate,
+      endDate,
       limit,
       offset,
-    },
-    {
-      keepPreviousData: true,
-    }
-  );
+    });
+    return () => {
+      debouncedSetParams.cancel();
+    };
+  }, [
+    interval,
+    events,
+    breakdowns,
+    chartType,
+    range,
+    previous,
+    formula,
+    metric,
+    projectId,
+    startDate,
+    endDate,
+    limit,
+    offset,
+    debouncedSetParams,
+  ]);
+
+  const [data] = api.chart.chart.useSuspenseQuery(debouncedParams, {
+    keepPreviousData: true,
+    staleTime: 1000 * 60 * 1,
+  });
+
+  return data;
+}
+
+export function Chart() {
+  const { chartType } = useChartContext();
+  const data = useChartData();
 
   if (data.series.length === 0) {
     return <ChartEmpty />;

apps/dashboard/src/components/report/chart/ReportLineChart.tsx

@@ -58,7 +58,7 @@ export function ReportLineChart({ data }: ReportLineChartProps) {
       range,
     },
     {
-      staleTime: 1000 * 60 * 5,
+      staleTime: 1000 * 60 * 10,
     }
   );
   const formatDate = useFormatDateInterval(interval);
@@ -134,7 +134,7 @@ export function ReportLineChart({ data }: ReportLineChartProps) {
                 strokeDasharray="3 3"
                 horizontal={true}
                 vertical={false}
-                className="stroke-def-200"
+                className="stroke-border"
               />
               {references.data?.map((ref) => (
                 <ReferenceLine

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

@@ -3,8 +3,8 @@
 import { ColorSquare } from '@/components/color-square';
 import { Combobox } from '@/components/ui/combobox';
 import { useAppParams } from '@/hooks/useAppParams';
+import { useEventProperties } from '@/hooks/useEventProperties';
 import { useDispatch, useSelector } from '@/redux';
-import { api } from '@/trpc/client';
 import { SplitIcon } from 'lucide-react';
 
 import type { IChartBreakdown } from '@openpanel/validation';
@@ -20,12 +20,11 @@ export function ReportBreakdowns() {
   const range = useSelector((state) => state.report.range);
 
   const dispatch = useDispatch();
-  const propertiesQuery = api.chart.properties.useQuery({
+  const properties = useEventProperties({
     projectId,
     range,
     interval,
-  });
-  const propertiesCombobox = (propertiesQuery.data ?? []).map((item) => ({
+  }).map((item) => ({
     value: item,
     label: item, // <RenderDots truncate>{item}</RenderDots>,
   }));
@@ -64,7 +63,7 @@ export function ReportBreakdowns() {
                       })
                     );
                   }}
-                  items={propertiesCombobox}
+                  items={properties}
                   placeholder="Select..."
                 />
                 <ReportBreakdownMore onClick={handleMore(item)} />
@@ -84,7 +83,7 @@ export function ReportBreakdowns() {
               })
             );
           }}
-          items={propertiesCombobox}
+          items={properties}
           placeholder="Select breakdown"
         />
       </div>

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

@@ -1,19 +1,26 @@
+import { useEffect, useState } from 'react';
 import { ColorSquare } from '@/components/color-square';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { ComboboxAdvanced } from '@/components/ui/combobox-advanced';
 import { DropdownMenuComposed } from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/input';
 import { RenderDots } from '@/components/ui/RenderDots';
 import { useAppParams } from '@/hooks/useAppParams';
 import { useMappings } from '@/hooks/useMappings';
+import { usePropertyValues } from '@/hooks/usePropertyValues';
 import { useDispatch, useSelector } from '@/redux';
-import { api } from '@/trpc/client';
-import { SlidersHorizontal, Trash } from 'lucide-react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { RefreshCcwIcon, SlidersHorizontal, Trash } from 'lucide-react';
 
 import { operators } from '@openpanel/constants';
 import type {
   IChartEvent,
+  IChartEventFilter,
   IChartEventFilterOperator,
   IChartEventFilterValue,
+  IChartRange,
+  IInterval,
 } from '@openpanel/validation';
 import { mapKeys } from '@openpanel/validation';
 
@@ -21,52 +28,53 @@ import { changeEvent } from '../../reportSlice';
 
 interface FilterProps {
   event: IChartEvent;
-  filter: IChartEvent['filters'][number];
+  filter: IChartEventFilter;
+}
+
+interface PureFilterProps {
+  eventName: string;
+  filter: IChartEventFilter;
+  range: IChartRange;
+  startDate: string | null;
+  endDate: string | null;
+  interval: IInterval;
+  onRemove: (filter: IChartEventFilter) => void;
+  onChangeValue: (
+    value: IChartEventFilterValue[],
+    filter: IChartEventFilter
+  ) => void;
+  onChangeOperator: (
+    operator: IChartEventFilterOperator,
+    filter: IChartEventFilter
+  ) => void;
+  className?: string;
 }
 
 export function FilterItem({ filter, event }: FilterProps) {
-  const { projectId } = useAppParams();
   const { range, startDate, endDate, interval } = useSelector(
     (state) => state.report
   );
-  const getLabel = useMappings();
-  const dispatch = useDispatch();
-  const potentialValues = api.chart.values.useQuery({
-    event: event.name,
-    property: filter.name,
-    projectId,
-    range,
-    interval,
-    startDate,
-    endDate,
-  });
-
-  const valuesCombobox =
-    potentialValues.data?.values?.map((item) => ({
-      value: item,
-      label: getLabel(item),
-    })) ?? [];
-
-  const removeFilter = () => {
+  const onRemove = ({ id }: IChartEventFilter) => {
     dispatch(
       changeEvent({
         ...event,
-        filters: event.filters.filter((item) => item.id !== filter.id),
+        filters: event.filters.filter((item) => item.id !== id),
       })
     );
   };
 
-  const changeFilterValue = (
-    value: IChartEventFilterValue | IChartEventFilterValue[]
+  const onChangeValue = (
+    value: IChartEventFilterValue[],
+    { id }: IChartEventFilter
   ) => {
     dispatch(
       changeEvent({
         ...event,
         filters: event.filters.map((item) => {
-          if (item.id === filter.id) {
+          if (item.id === id) {
             return {
               ...item,
-              value: Array.isArray(value) ? value : [value],
+              value,
             };
           }
 
@@ -76,14 +84,18 @@ export function FilterItem({ filter, event }: FilterProps) {
     );
   };
 
-  const changeFilterOperator = (operator: IChartEventFilterOperator) => {
+  const onChangeOperator = (
+    operator: IChartEventFilterOperator,
+    { id }: IChartEventFilter
+  ) => {
     dispatch(
       changeEvent({
         ...event,
         filters: event.filters.map((item) => {
-          if (item.id === filter.id) {
+          if (item.id === id) {
             return {
               ...item,
+              value: item.value ? item.value.filter(Boolean).slice(0, 1) : [],
               operator,
             };
           }
@@ -94,11 +106,68 @@ export function FilterItem({ filter, event }: FilterProps) {
     );
   };
 
+  const dispatch = useDispatch();
   return (
-    <div
-      key={filter.name}
+    <PureFilterItem
+      filter={filter}
+      eventName={event.name}
+      range={range}
+      startDate={startDate}
+      endDate={endDate}
+      interval={interval}
+      onRemove={onRemove}
+      onChangeValue={onChangeValue}
+      onChangeOperator={onChangeOperator}
       className="px-4 py-2 shadow-[inset_6px_0_0] shadow-def-200 first:border-t"
-    >
+    />
+  );
+}
+
+export function PureFilterItem({
+  filter,
+  eventName,
+  range,
+  startDate,
+  endDate,
+  interval,
+  onRemove,
+  onChangeValue,
+  onChangeOperator,
+  className,
+}: PureFilterProps) {
+  const { projectId } = useAppParams();
+  const getLabel = useMappings();
+
+  const potentialValues = usePropertyValues({
+    event: eventName,
+    property: filter.name,
+    projectId,
+    range,
+    interval,
+    startDate,
+    endDate,
+  });
+
+  const valuesCombobox =
+    potentialValues.map((item) => ({
+      value: item,
+      label: getLabel(item),
+    })) ?? [];
+
+  const removeFilter = () => {
+    onRemove(filter);
+  };
+
+  const changeFilterValue = (value: IChartEventFilterValue[]) => {
+    onChangeValue(value, filter);
+  };
+
+  const changeFilterOperator = (operator: IChartEventFilterOperator) => {
+    onChangeOperator(operator, filter);
+  };
+
+  return (
+    <div className={className}>
       <div className="mb-2 flex items-center gap-2">
         <ColorSquare className="bg-emerald-500">
           <SlidersHorizontal size={10} />
@@ -119,17 +188,78 @@ export function FilterItem({ filter, event }: FilterProps) {
           }))}
           label="Operator"
         >
-          <Button variant={'ghost'} className="whitespace-nowrap">
+          <Button
+            variant={'outline'}
+            className="whitespace-nowrap"
+            size="default"
+          >
             {operators[filter.operator]}
           </Button>
         </DropdownMenuComposed>
-        <ComboboxAdvanced
-          items={valuesCombobox}
-          value={filter.value}
-          className="flex-1"
-          onChange={changeFilterValue}
-          placeholder="Select..."
-        />
+        {filter.operator === 'is' || filter.operator === 'isNot' ? (
+          <ComboboxAdvanced
+            items={valuesCombobox}
+            value={filter.value}
+            className="flex-1"
+            onChange={changeFilterValue}
+            placeholder="Select..."
+          />
+        ) : (
+          <FilterRawInput
+            value={filter.value[0] ? String(filter.value[0]) : ''}
+            onChangeValue={(value) => changeFilterValue([value])}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function FilterRawInput({
+  value,
+  onChangeValue,
+}: {
+  value: string;
+  onChangeValue: (value: string) => void;
+}) {
+  const [internalValue, setInternalValue] = useState(value || '');
+
+  useEffect(() => {
+    if (value !== internalValue) {
+      setInternalValue(value);
+    }
+  }, [value]);
+
+  return (
+    <div className="relative w-full">
+      <Input
+        value={internalValue}
+        onChange={(e) => setInternalValue(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            onChangeValue(internalValue);
+          }
+        }}
+        placeholder="Value"
+        size="default"
+      />
+      <div className="absolute right-2 top-1/2 -translate-y-1/2">
+        <AnimatePresence>
+          {internalValue !== value && (
+            <motion.button
+              key="refresh"
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.8 }}
+              onClick={() => onChangeValue(internalValue)}
+            >
+              <Badge variant="muted">
+                Press enter
+                <RefreshCcwIcon className="ml-1 h-3 w-3" />
+              </Badge>
+            </motion.button>
+          )}
+        </AnimatePresence>
       </div>
     </div>
   );

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

@@ -1,7 +1,7 @@
 import { Combobox } from '@/components/ui/combobox';
 import { useAppParams } from '@/hooks/useAppParams';
+import { useEventProperties } from '@/hooks/useEventProperties';
 import { useDispatch, useSelector } from '@/redux';
-import { api } from '@/trpc/client';
 import { FilterIcon } from 'lucide-react';
 
 import { shortId } from '@openpanel/common';
@@ -21,7 +21,7 @@ export function FiltersCombobox({ event }: FiltersComboboxProps) {
   const endDate = useSelector((state) => state.report.endDate);
   const { projectId } = useAppParams();
 
-  const query = api.chart.properties.useQuery(
+  const properties = useEventProperties(
     {
       event: event.name,
       projectId,
@@ -35,17 +35,15 @@ export function FiltersCombobox({ event }: FiltersComboboxProps) {
     }
   );
 
-  const properties = (query.data ?? []).map((item) => ({
-    label: item,
-    value: item,
-  }));
-
   return (
     <Combobox
       searchable
       placeholder="Select a filter"
       value=""
-      items={properties}
+      items={properties.map((item) => ({
+        label: item,
+        value: item,
+      }))}
       onChange={(value) => {
         dispatch(
           changeEvent({