fix: improvements for frontend

apps/start/src/components/report/ReportInterval.tsx

@@ -1,4 +1,3 @@
-import { useDispatch, useSelector } from '@/redux';
 import { ClockIcon } from 'lucide-react';
 
 import {
@@ -8,6 +7,7 @@ import {
 
 import { cn } from '@/utils/cn';
 import type { IChartRange, IChartType, IInterval } from '@openpanel/validation';
+import { differenceInDays, isSameDay } from 'date-fns';
 import { Button } from '../ui/button';
 import { CommandShortcut } from '../ui/command';
 import {
@@ -20,7 +20,6 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from '../ui/dropdown-menu';
-import { changeInterval } from './reportSlice';
 
 interface ReportIntervalProps {
   className?: string;
@@ -28,6 +27,8 @@ interface ReportIntervalProps {
   onChange: (range: IInterval) => void;
   chartType: IChartType;
   range: IChartRange;
+  startDate?: string | null;
+  endDate?: string | null;
 }
 export function ReportInterval({
   className,
@@ -35,6 +36,8 @@ export function ReportInterval({
   onChange,
   chartType,
   range,
+  startDate,
+  endDate,
 }: ReportIntervalProps) {
   if (
     chartType !== 'linear' &&
@@ -47,6 +50,11 @@ export function ReportInterval({
     return null;
   }
 
+  let isHourIntervalEnabled = isHourIntervalEnabledByRange(range);
+  if (startDate && endDate && range === 'custom') {
+    isHourIntervalEnabled = differenceInDays(endDate, startDate) <= 4;
+  }
+
   const items = [
     {
       value: 'minute',
@@ -56,7 +64,7 @@ export function ReportInterval({
     {
       value: 'hour',
       label: 'Hour',
-      disabled: !isHourIntervalEnabledByRange(range),
+      disabled: !isHourIntervalEnabled,
     },
     {
       value: 'day',

apps/start/src/components/report/sidebar/PropertiesCombobox.tsx

@@ -24,6 +24,8 @@ interface PropertiesComboboxProps {
     label: string;
     description: string;
   }) => void;
+  exclude?: string[];
+  mode?: 'events' | 'profile';
 }
 
 function SearchHeader({
@@ -56,6 +58,8 @@ export function PropertiesCombobox({
   event,
   children,
   onSelect,
+  mode,
+  exclude = [],
 }: PropertiesComboboxProps) {
   const { projectId } = useAppParams();
   const [open, setOpen] = useState(false);
@@ -69,20 +73,35 @@ export function PropertiesCombobox({
 
   useEffect(() => {
     if (!open) {
-      setState('index');
+      setState(!mode ? 'index' : mode === 'events' ? 'event' : 'profile');
     }
-  }, [open]);
+  }, [open, mode]);
+
+  const shouldShowProperty = (property: string) => {
+    return !exclude.find((ex) => {
+      if (ex.endsWith('*')) {
+        return property.startsWith(ex.slice(0, -1));
+      }
+      return property === ex;
+    });
+  };
 
   // Mock data for the lists
   const profileActions = properties
-    .filter((property) => property.startsWith('profile'))
+    .filter(
+      (property) =>
+        property.startsWith('profile') && shouldShowProperty(property),
+    )
     .map((property) => ({
       value: property,
       label: property.split('.').pop() ?? property,
       description: property.split('.').slice(0, -1).join('.'),
     }));
   const eventActions = properties
-    .filter((property) => !property.startsWith('profile'))
+    .filter(
+      (property) =>
+        !property.startsWith('profile') && shouldShowProperty(property),
+    )
     .map((property) => ({
       value: property,
       label: property.split('.').pop() ?? property,
@@ -142,7 +161,9 @@ export function PropertiesCombobox({
     return (
       <div className="col">
         <SearchHeader
-          onBack={() => handleStateChange('index')}
+          onBack={
+            mode === undefined ? () => handleStateChange('index') : undefined
+          }
           onSearch={setSearch}
           value={search}
         />