fix: improve overview filters

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

@@ -1,20 +1,19 @@
 import { ColorSquare } from '@/components/color-square';
+import { FilterOperatorSelect } from '@/components/report/sidebar/filters/FilterOperatorSelect';
 import { RenderDots } from '@/components/ui/RenderDots';
 import { Button } from '@/components/ui/button';
 import { ComboboxAdvanced } from '@/components/ui/combobox-advanced';
-import { DropdownMenuComposed } from '@/components/ui/dropdown-menu';
 import { InputEnter } from '@/components/ui/input-enter';
 import { useAppParams } from '@/hooks/use-app-params';
 import { usePropertyValues } from '@/hooks/use-property-values';
 import { useDispatch } from '@/redux';
-import { operators } from '@openpanel/constants';
 import type {
   IChartEvent,
   IChartEventFilter,
   IChartEventFilterOperator,
   IChartEventFilterValue,
 } from '@openpanel/validation';
-import { mapKeys } from '@openpanel/validation';
+
 import { SlidersHorizontal, Trash } from 'lucide-react';
 import { changeEvent } from '../../reportSlice';
 
@@ -155,18 +154,10 @@ export function PureFilterItem({
         </Button>
       </div>
       <div className="flex gap-1">
-        <DropdownMenuComposed
+        <FilterOperatorSelect
+          value={filter.operator}
           onChange={changeFilterOperator}
-          items={mapKeys(operators).map((key) => ({
-            value: key,
-            label: operators[key],
-          }))}
-          label="Operator"
-        >
-          <Button variant={'outline'} className="whitespace-nowrap">
-            {operators[filter.operator]}
-          </Button>
-        </DropdownMenuComposed>
+        />
         {filter.operator === 'is' || filter.operator === 'isNot' ? (
           <ComboboxAdvanced
             items={valuesCombobox}

apps/start/src/components/report/sidebar/filters/FilterOperatorSelect.tsx

@@ -0,0 +1,36 @@
+import { Button } from '@/components/ui/button';
+import { DropdownMenuComposed } from '@/components/ui/dropdown-menu';
+import { operators } from '@openpanel/constants';
+import type { IChartEventFilterOperator } from '@openpanel/validation';
+import { mapKeys } from '@openpanel/validation';
+
+interface FilterOperatorSelectProps {
+  value: IChartEventFilterOperator;
+  onChange: (operator: IChartEventFilterOperator) => void;
+  children?: React.ReactNode;
+}
+
+export function FilterOperatorSelect({
+  value,
+  onChange,
+  children,
+}: FilterOperatorSelectProps) {
+  const trigger = children ?? (
+    <Button variant="outline" className="whitespace-nowrap">
+      {operators[value]}
+    </Button>
+  );
+
+  return (
+    <DropdownMenuComposed
+      onChange={onChange}
+      items={mapKeys(operators).map((key) => ({
+        value: key,
+        label: operators[key],
+      }))}
+      label="Operator"
+    >
+      {trigger}
+    </DropdownMenuComposed>
+  );
+}