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 } = useNavigation();
-
-  const {
-    query: { view, url, referrer, os, browser, device, country, region, city, title },
-  } = 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 = '';
+    const prefix = OPERATOR_PREFIXES[operator];
-
-    if (operator === OPERATORS.notEquals) {
-      prefix = '!';
-    } else if (operator === OPERATORS.contains) {
-      prefix = '~';
-    } else if (operator === OPERATORS.doesNotContain) {
-      prefix = '!~';
-    }
 
     router.push(renderUrl({ [name]: prefix + value }));
   };
 
   return (
     <PopupTrigger>
-      <Button className={className}>
+      <Button className={classNames(className, styles.button)} variant="quiet">
         <Icon>
           <Icons.Plus />
         </Icon>

src/components/hooks/useFilters.ts

@@ -4,7 +4,7 @@ import { OPERATORS } from 'lib/constants';
 export function useFilters() {
   const { formatMessage, labels } = useMessages();
 
-  const filterLabels = {
+  const operatorLabels = {
     [OPERATORS.equals]: formatMessage(labels.is),
     [OPERATORS.notEquals]: formatMessage(labels.isNot),
     [OPERATORS.set]: formatMessage(labels.isSet),
@@ -37,11 +37,17 @@ export function useFilters() {
     uuid: [OPERATORS.equals],
   };
 
+  const filters = Object.keys(typeFilters).flatMap(key => {
+    return (
+      typeFilters[key]?.map(value => ({ type: key, value, label: operatorLabels[value] })) ?? []
+    );
+  });
+
   const getFilters = type => {
-    return typeFilters[type]?.map(key => ({ type, value: key, label: filterLabels[key] })) ?? [];
+    return typeFilters[type]?.map(key => ({ type, value: key, label: operatorLabels[key] })) ?? [];
   };
 
-  return { getFilters, filterLabels, typeFilters };
+  return { filters, operatorLabels, typeFilters, getFilters };
 }
 
 export default useFilters;

src/components/metrics/FilterTags.module.css

@@ -13,18 +13,39 @@
   flex-direction: row;
   align-items: center;
   gap: 10px;
-  font-size: var(--font-size-sm);
+  background: var(--base75);
-  border: 1px solid var(--blue400);
+  border: 1px solid var(--base400);
   border-radius: var(--border-radius);
+  box-shadow: 1px 1px 1px var(--base500);
   padding: 8px 16px;
   cursor: pointer;
-  background: var(--blue100);
 }
 
 .tag:hover {
-  background: var(--blue200);
+  background: var(--base100);
 }
 
-.tag b {
+.close {
-  text-transform: lowercase;
+  font-weight: 700;
+}
+
+.name,
+.value {
+  color: var(--base700);
+  font-weight: 700;
+}
+
+.operator {
+  text-transform: lowercase;
+  font-weight: 900;
+}
+
+.icon {
+  margin-left: 10px;
+  padding: 2px;
+  border-radius: 100%;
+}
+
+.icon:hover {
+  background: var(--base200);
 }

src/components/metrics/FilterTags.tsx

@@ -1,30 +1,61 @@
-import { safeDecodeURI } from 'next-basics';
+import { MouseEvent } from 'react';
-import { Button, Icon, Icons, Text } from 'react-basics';
+import { Button, Icon, Icons, Popup, PopupTrigger, Text } from 'react-basics';
-import { useNavigation } from 'components/hooks';
+import {
-import { useMessages } from 'components/hooks';
+  useDateRange,
-import { useFormat } from 'components/hooks';
+  useFields,
+  useNavigation,
+  useMessages,
+  useFormat,
+  useFilters,
+} from 'components/hooks';
+import PopupForm from 'app/(main)/reports/[reportId]/PopupForm';
+import FieldFilterEditForm from 'app/(main)/reports/[reportId]/FieldFilterEditForm';
+import { OPERATOR_PREFIXES } from 'lib/constants';
+import { operatorEquals, parseParameterValue } from 'lib/params';
 import styles from './FilterTags.module.css';
 
-export function FilterTags({ params }) {
+export function FilterTags({
+  websiteId,
+  params,
+}: {
+  websiteId: string;
+  params: { [key: string]: string };
+}) {
   const { formatMessage, labels } = useMessages();
   const { formatValue } = useFormat();
+  const [dateRange] = useDateRange(websiteId);
   const {
     router,
     renderUrl,
     query: { view },
   } = useNavigation();
+  const { fields } = useFields();
+  const { operatorLabels } = useFilters();
+  const { startDate, endDate } = dateRange;
 
   if (Object.keys(params).filter(key => params[key]).length === 0) {
     return null;
   }
 
-  function handleCloseFilter(param?: string) {
+  const handleCloseFilter = (param: string, e: MouseEvent) => {
+    e.stopPropagation();
     router.push(renderUrl({ [param]: undefined }));
-  }
+  };
 
-  function handleResetFilter() {
+  const handleResetFilter = () => {
     router.push(renderUrl({ view }, true));
-  }
+  };
+
+  const handleChangeFilter = (
+    values: { name: string; operator: string; value: string },
+    close: () => void,
+  ) => {
+    const { name, operator, value } = values;
+    const prefix = OPERATOR_PREFIXES[operator];
+
+    router.push(renderUrl({ [name]: prefix + value }));
+    close();
+  };
 
   return (
     <div className={styles.filters}>
@@ -33,18 +64,43 @@ export function FilterTags({ params }) {
         if (!params[key]) {
           return null;
         }
+        const label = fields.find(f => f.name === key)?.label;
+        const { operator, value } = parseParameterValue(params[key]);
+        const paramValue = operatorEquals(operator) ? formatValue(value, key) : value;
+
         return (
-          <div key={key} className={styles.tag} onClick={() => handleCloseFilter(key)}>
+          <PopupTrigger key={key}>
-            <Text>
+            <div key={key} className={styles.tag}>
-              <b>{formatMessage(labels[key])}</b> = {formatValue(safeDecodeURI(params[key]), key)}
+              <Text className={styles.name}>{label}</Text>
-            </Text>
+              <Text className={styles.operator}>{operatorLabels[operator]}</Text>
-            <Icon>
+              <Text className={styles.value}>{paramValue}</Text>
-              <Icons.Close />
+              <Icon className={styles.icon} onClick={e => handleCloseFilter(key, e)}>
-            </Icon>
+                <Icons.Close />
-          </div>
+              </Icon>
+            </div>
+            <Popup alignment="start">
+              {(close: () => void) => {
+                return (
+                  <PopupForm>
+                    <FieldFilterEditForm
+                      label={label}
+                      type="string"
+                      websiteId={websiteId}
+                      name={key}
+                      operator={operator}
+                      defaultValue={value}
+                      startDate={startDate}
+                      endDate={endDate}
+                      onChange={values => handleChangeFilter(values, close)}
+                    />
+                  </PopupForm>
+                );
+              }}
+            </Popup>
+          </PopupTrigger>
         );
       })}
-      <Button size="sm" variant="quiet" onClick={handleResetFilter}>
+      <Button className={styles.close} variant="quiet" onClick={handleResetFilter}>
         <Icon>
           <Icons.Close />
         </Icon>

src/lib/constants.ts

@@ -94,6 +94,13 @@ export const OPERATORS = {
   after: 'af',
 } as const;
 
+export const OPERATOR_PREFIXES = {
+  [OPERATORS.equals]: '',
+  [OPERATORS.notEquals]: '!',
+  [OPERATORS.contains]: '~',
+  [OPERATORS.doesNotContain]: '!~',
+};
+
 export const DATA_TYPES = {
   [DATA_TYPE.string]: 'string',
   [DATA_TYPE.number]: 'number',

src/lib/params.ts

@@ -0,0 +1,15 @@
+import { OPERATOR_PREFIXES, OPERATORS } from 'lib/constants';
+
+export function parseParameterValue(param: string) {
+  const [, prefix, value] = param.match(/^(!~|!|~)?(.*)$/);
+
+  const operator =
+    Object.keys(OPERATOR_PREFIXES).find(key => OPERATOR_PREFIXES[key] === prefix) ||
+    OPERATORS.equals;
+
+  return { operator, value };
+}
+
+export function operatorEquals(operator: any) {
+  return [OPERATORS.equals, OPERATORS.notEquals].includes(operator);
+}

src/lib/query.ts

@@ -1,13 +1,7 @@
 import { NextApiRequest } from 'next';
 import { getAllowedUnits, getMinimumUnit } from './date';
 import { getWebsiteDateRange } from '../queries';
-import { FILTER_COLUMNS, OPERATORS } from 'lib/constants';
+import { FILTER_COLUMNS, OPERATORS, OPERATOR_PREFIXES } from 'lib/constants';
-
-const OPERATOR_SYMBOLS = {
-  '!': 'neq',
-  '~': 'c',
-  '!~': 'dnc',
-};
 
 export async function parseDateRangeQuery(req: NextApiRequest) {
   const { websiteId, startAt, endAt, unit } = req.query;
@@ -52,7 +46,7 @@ export function getQueryFilters(req: NextApiRequest) {
         obj[key] = {
           name: key,
           column: FILTER_COLUMNS[key],
-          operator: OPERATOR_SYMBOLS[prefix] || OPERATORS.equals,
+          operator: OPERATOR_PREFIXES[prefix] || OPERATORS.equals,
           value: paramValue,
         };
       }