web: improve picking values, added contains operator in api

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

@@ -25,7 +25,6 @@ export function ReportLineChart({ interval, data }: ReportLineChartProps) {
   const { editMode } = useChartContext();
   const [visibleSeries, setVisibleSeries] = useState<string[]>([]);
   const formatDate = useFormatDateInterval(interval);
-  console.log(JSON.stringify(data.series[0]?.data, null, 2));
 
   const ref = useRef(false);
   useEffect(() => {

apps/web/src/components/report/sidebar/ReportEventFilters.tsx

@@ -2,6 +2,7 @@ import type { Dispatch } from 'react';
 import { ColorSquare } from '@/components/ColorSquare';
 import { Dropdown } from '@/components/Dropdown';
 import { Button } from '@/components/ui/button';
+import { ComboboxAdvanced } from '@/components/ui/combobox-advanced';
 import { ComboboxMulti } from '@/components/ui/combobox-multi';
 import {
   CommandDialog,
@@ -187,60 +188,23 @@ function Filter({ filter, event }: FilterProps) {
             value: key as IChartEventFilter['operator'],
             label: value,
           }))}
-          label="Segment"
+          label="Operator"
         >
           <Button variant={'ghost'} className="whitespace-nowrap">
             {operators[filter.operator]}
           </Button>
         </Dropdown>
-        <ComboboxMulti
+        <ComboboxAdvanced
-          placeholder="Select values"
           items={valuesCombobox}
-          selected={filter.value.map((item) => ({
+          selected={filter.value}
-            value: item?.toString() ?? '__filter_value_null__',
-            label: getLabel(item?.toString() ?? '__filter_value_null__'),
-          }))}
           setSelected={(setFn) => {
-            if (typeof setFn === 'function') {
+            changeFilterValue(
-              const newValues = setFn(
+              typeof setFn === 'function' ? setFn(filter.value) : setFn
-                filter.value.map((item) => ({
+            );
-                  value: item?.toString() ?? '__filter_value_null__',
-                  label: getLabel(item?.toString() ?? '__filter_value_null__'),
-                }))
-              );
-              changeFilterValue(newValues.map((item) => item.value));
-            } else {
-              changeFilterValue(setFn.map((item) => item.value));
-            }
           }}
+          placeholder="Select..."
         />
       </div>
-      {/* <Combobox
-        items={valuesCombobox}
-        value={filter.value}
-        placeholder="Select value"
-        onChange={changeFilter}
-      /> */}
-      {/* <Input
-        value={filter.value}
-        onChange={(e) => {
-          dispatch(
-            changeEvent({
-              ...event,
-              filters: event.filters.map((item) => {
-                if (item.id === filter.id) {
-                  return {
-                    ...item,
-                    value: e.currentTarget.value,
-                  };
-                }
-
-                return item;
-              }),
-            }),
-          );
-        }}
-      /> */}
     </div>
   );
 }

apps/web/src/components/report/sidebar/ReportSidebar.tsx

@@ -6,12 +6,14 @@ import { ReportEvents } from './ReportEvents';
 
 export function ReportSidebar() {
   return (
-    <div className="flex flex-col gap-8">
+    <div className="flex flex-col gap-8 pb-12">
       <ReportEvents />
       <ReportBreakdowns />
-      <SheetClose asChild>
+      <div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-white/100 to-white/0">
-        <Button>Done</Button>
+        <SheetClose asChild>
-      </SheetClose>
+          <Button className="w-full">Done</Button>
+        </SheetClose>
+      </div>
     </div>
   );
 }

apps/web/src/components/ui/combobox-advanced.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Command, CommandGroup, CommandItem } from '@/components/ui/command';
+
+import { Checkbox } from './checkbox';
+import { Input } from './input';
+
+type IValue = string | number | boolean | null;
+type IItem = Record<'value' | 'label', IValue>;
+
+interface ComboboxAdvancedProps {
+  selected: IValue[];
+  setSelected: React.Dispatch<React.SetStateAction<IValue[]>>;
+  items: IItem[];
+  placeholder: string;
+}
+
+export function ComboboxAdvanced({
+  items,
+  selected,
+  setSelected,
+  placeholder,
+}: ComboboxAdvancedProps) {
+  const [open, setOpen] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState('');
+
+  const selectables = items
+    .filter((item) => !selected.find((s) => s === item.value))
+    .filter(
+      (item) =>
+        (typeof item.label === 'string' &&
+          item.label.toLowerCase().includes(inputValue.toLowerCase())) ||
+        (typeof item.value === 'string' &&
+          item.value.toLowerCase().includes(inputValue.toLowerCase()))
+    );
+
+  const renderItem = (item: IItem) => {
+    const checked = !!selected.find((s) => s === item.value);
+    return (
+      <CommandItem
+        key={String(item.value)}
+        onMouseDown={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+        onSelect={() => {
+          setInputValue('');
+          setSelected((prev) => {
+            if (prev.includes(item.value)) {
+              return prev.filter((s) => s !== item.value);
+            }
+            return [...prev, item.value];
+          });
+        }}
+        className={'cursor-pointer flex items-center gap-2'}
+      >
+        <Checkbox checked={checked} className="pointer-events-none" />
+        {item?.label ?? item?.value}
+      </CommandItem>
+    );
+  };
+
+  const renderUnknownItem = (value: string | number | null | boolean) => {
+    const item = items.find((item) => item.value === value);
+    return item ? renderItem(item) : renderItem({ value, label: value });
+  };
+
+  return (
+    <Command className="overflow-visible bg-white">
+      <button
+        type="button"
+        className="group border border-input px-3 py-2 text-sm ring-offset-background rounded-md focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2"
+        onClick={() => setOpen((prev) => !prev)}
+      >
+        <div className="flex gap-1 flex-wrap">
+          {selected.length === 0 && placeholder}
+          {selected.slice(0, 2).map((value) => {
+            const item = items.find((item) => item.value === value) ?? {
+              value,
+              label: value,
+            };
+            return (
+              <Badge key={String(item.value)} variant="secondary">
+                {item.label}
+              </Badge>
+            );
+          })}
+          {selected.length > 2 && (
+            <Badge variant="secondary">+{selected.length - 2} more</Badge>
+          )}
+        </div>
+      </button>
+      <div className="relative mt-2">
+        {open && (
+          <div className="max-h-80 absolute w-full z-10 top-0 rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-in">
+            <CommandGroup className="max-h-80 overflow-auto">
+              <div className="p-1 mb-2">
+                <Input
+                  placeholder="Type to search"
+                  value={inputValue}
+                  onChange={(event) => setInputValue(event.target.value)}
+                />
+              </div>
+              {inputValue === ''
+                ? selected.map(renderUnknownItem)
+                : renderUnknownItem(inputValue)}
+              {selectables.map(renderItem)}
+            </CommandGroup>
+          </div>
+        )}
+      </div>
+    </Command>
+  );
+}

apps/web/src/components/ui/sheet.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { cn } from '@/utils/cn';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { ScrollArea } from '@radix-ui/react-scroll-area';
 import { cva } from 'class-variance-authority';
 import type { VariantProps } from 'class-variance-authority';
 import { X } from 'lucide-react';
@@ -29,7 +30,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  'fixed z-50 gap-4 bg-background shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
   {
     variants: {
       side: {
@@ -62,7 +63,9 @@ const SheetContent = React.forwardRef<
       className={cn(sheetVariants({ side }), className)}
       {...props}
     >
-      {children}
+      <div className="h-screen p-6 overflow-y-auto overflow-x-hidden">
+        {children}
+      </div>
       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>

apps/web/src/server/api/routers/chart.ts

@@ -299,8 +299,31 @@ function getChartSql({
     where.push(`name = '${name}'`);
     if (filters.length > 0) {
       filters.forEach((filter) => {
-        const { name, value } = filter;
+        const { name, value, operator } = filter;
-        switch (filter.operator) {
+        switch (operator) {
+          case 'contains': {
+            if (name.includes('.*.') || name.endsWith('[*]')) {
+              // TODO: Make sure this works
+              // where.push(
+              //   `properties @? '$.${name
+              //     .replace(/^properties\./, '')
+              //     .replace(/\.\*\./g, '[*].')} ? (@ like_regex "${value[0]}")'`
+              // );
+            } else {
+              where.push(
+                `(${value
+                  .map(
+                    (val) =>
+                      `${propertyNameToSql(name)} like '%${String(val).replace(
+                        /'/g,
+                        "''"
+                      )}%'`
+                  )
+                  .join(' OR ')})`
+              );
+            }
+            break;
+          }
           case 'is': {
             if (name.includes('.*.') || name.endsWith('[*]')) {
               where.push(