Filter tag enhancements.

src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx

@@ -16,6 +16,7 @@ import {
 } from 'react-basics';
 import { useMessages, useFilters, useFormat, useLocale, useWebsiteValues } from 'components/hooks';
 import { OPERATORS } from 'lib/constants';
+import { operatorEquals } from 'lib/params';
 import styles from './FieldFilterEditForm.module.css';
 
 export interface FieldFilterFormProps {
@@ -49,13 +50,12 @@ export default function FieldFilterEditForm({
   const [operator, setOperator] = useState(defaultOperator);
   const [value, setValue] = useState(defaultValue);
   const [showMenu, setShowMenu] = useState(false);
-  const isEquals = [OPERATORS.equals, OPERATORS.notEquals].includes(operator as any);
+  const isEquals = operatorEquals(operator);
   const [search, setSearch] = useState('');
   const [selected, setSelected] = useState(isEquals ? value : '');
-  const { getFilters } = useFilters();
+  const { filters } = useFilters();
   const { formatValue } = useFormat();
   const { locale } = useLocale();
-  const filters = getFilters(type);
   const isDisabled = !operator || (isEquals && !selected) || (!isEquals && !value);
   const {
     data: values = [],
@@ -98,7 +98,7 @@ export default function FieldFilterEditForm({
   }, [value, formattedValues]);
 
   const renderFilterValue = (value: any) => {
-    return filters.find((f: { value: any }) => f.value === value)?.label;
+    return filters.find((filter: { value: any }) => filter.value === value)?.label;
   };
 
   const handleAdd = () => {
@@ -142,7 +142,7 @@ export default function FieldFilterEditForm({
           {allowFilterSelect && (
             <Dropdown
               className={styles.dropdown}
-              items={filters}
+              items={filters.filter(f => f.type === type)}
               value={operator}
               renderValue={renderFilterValue}
               onChange={handleOperatorChange}
@@ -154,7 +154,7 @@ export default function FieldFilterEditForm({
           )}
           {selected && isEquals && (
             <div className={styles.selected} onClick={handleReset}>
-              <Text>{selected}</Text>
+              <Text>{formatValue(selected, name)}</Text>
               <Icon>
                 <Icons.Close />
               </Icon>

src/app/(main)/reports/[reportId]/FieldParameters.tsx

@@ -5,7 +5,7 @@ import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
 import FieldSelectForm from '../[reportId]/FieldSelectForm';
 import ParameterList from '../[reportId]/ParameterList';
 import PopupForm from '../[reportId]/PopupForm';
-import { ReportContext } from '../[reportId]/Report';
+import { ReportContext } from './Report';
 
 export function FieldParameters() {
   const { report, updateReport } = useContext(ReportContext);

src/app/(main)/reports/[reportId]/FilterParameters.tsx

@@ -6,8 +6,8 @@ import FilterSelectForm from '../[reportId]/FilterSelectForm';
 import ParameterList from '../[reportId]/ParameterList';
 import PopupForm from '../[reportId]/PopupForm';
 import { ReportContext } from './Report';
-import { OPERATORS } from 'lib/constants';
 import FieldFilterEditForm from '../[reportId]/FieldFilterEditForm';
+import { operatorEquals } from 'lib/params';
 import styles from './FilterParameters.module.css';
 
 export function FilterParameters() {
@@ -69,7 +69,8 @@ export function FilterParameters() {
         {filters.map(
           ({ name, operator, value }: { name: string; operator: string; value: string }) => {
             const label = fields.find(f => f.name === name)?.label;
-            const isEquals = [OPERATORS.equals, OPERATORS.notEquals].includes(operator as any);
+            const isEquals = operatorEquals(operator);
+
             return (
               <ParameterList.Item key={name} onRemove={() => handleRemove(name)}>
                 <FilterParameter
@@ -101,13 +102,13 @@ const FilterParameter = ({
   endDate,
   onChange,
 }) => {
-  const { filterLabels } = useFilters();
+  const { operatorLabels } = useFilters();
 
   return (
     <PopupTrigger>
       <div className={styles.item}>
         <div className={styles.label}>{label}</div>
-        <div className={styles.op}>{filterLabels[operator]}</div>
+        <div className={styles.op}>{operatorLabels[operator]}</div>
         <div className={styles.value}>{value}</div>
       </div>
       <Popup className={styles.edit} alignment="start">

src/app/(main)/websites/[websiteId]/WebsiteDetails.tsx

@@ -13,20 +13,19 @@ import WebsiteTableView from './WebsiteTableView';
 export default function WebsiteDetails({ websiteId }: { websiteId: string }) {
   const { data: website, isLoading, error } = useWebsite(websiteId);
   const pathname = usePathname();
-  const showLinks = !pathname.includes('/share/');
-
-  const {
-    query: { view, url, referrer, os, browser, device, country, region, city, title },
-  } = useNavigation();
+  const { query } = useNavigation();
 
   if (isLoading || error) {
     return <Page isLoading={isLoading} error={error} />;
   }
 
+  const showLinks = !pathname.includes('/share/');
+  const { view, ...params } = query;
+
   return (
     <>
       <WebsiteHeader websiteId={websiteId} showLinks={showLinks} />
-      <FilterTags params={{ url, referrer, os, browser, device, country, region, city, title }} />
+      <FilterTags websiteId={websiteId} params={params} />
       <WebsiteMetricsBar websiteId={websiteId} sticky={true} />
       <WebsiteChart websiteId={websiteId} />
       {!website && <Loading icon="dots" style={{ minHeight: 300 }} />}

src/app/(main)/websites/[websiteId]/WebsiteFilterButton.module.css

@@ -0,0 +1,3 @@
+.button {
+  font-weight: 700;
+}

src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx

@@ -1,8 +1,10 @@
+import classNames from 'classnames';
 import { Button, Icon, Icons, Popup, PopupTrigger, Text } from 'react-basics';
 import PopupForm from 'app/(main)/reports/[reportId]/PopupForm';
 import FilterSelectForm from 'app/(main)/reports/[reportId]/FilterSelectForm';
 import { useFields, useMessages, useNavigation } from 'components/hooks';
-import { OPERATORS } from 'lib/constants';
+import { OPERATOR_PREFIXES } from 'lib/constants';
+import styles from './WebsiteFilterButton.module.css';
 
 export function WebsiteFilterButton({
   websiteId,
@@ -16,22 +18,14 @@ export function WebsiteFilterButton({
   const { fields } = useFields();
 
   const handleAddFilter = ({ name, operator, value }) => {
-    let prefix = '';
-
-    if (operator === OPERATORS.notEquals) {
-      prefix = '!';
-    } else if (operator === OPERATORS.contains) {
-      prefix = '~';
-    } else if (operator === OPERATORS.doesNotContain) {
-      prefix = '!~';
-    }
+    const prefix = OPERATOR_PREFIXES[operator];
 
     router.push(renderUrl({ [name]: prefix + value }));
   };
 
   return (
     <PopupTrigger>
-      <Button className={className}>
+      <Button className={classNames(className, styles.button)} variant="quiet">
         <Icon>
           <Icons.Plus />
         </Icon>