From 23a6431adbd61553fed1b658485d469c025b492b Mon Sep 17 00:00:00 2001
From: Karl-Aksel Puulmann <macobo@users.noreply.github.com>
Date: Wed, 22 May 2024 11:01:41 +0300
Subject: [PATCH] Frontend: Use jsonurl, update filtering (#4117)

* Start refactoring, supporting jsonurl

* WIP: Listing of applied filters works

* WIP: Remove some unneeded hackery

* WIP: Handle country labels better

* WIP: Handle multiple filters better

* WIP: Serializing filters for API queries

* Split modal code into 3

* Merge code paths for prop and other filter modals

* Get suggestions working again

* Display prop filters properly

* Handle re-opening a props modal properly

* Better label handling

* Better linking to filter modals

* Remove unneeded component

* Standardize how we update query more

* Use updatedQuery to remove more usecases of URLSearchParams

* Dont export toFilterQuery

* Custom toString for PlausibleSearchParams

* Fix props suggestions/filtering

* Refactor isFilteringOnFixedValue

* Improved encoding - goals now work again

* fix a typo

* Handle more cases where query.filters[ is used

* Fix locations tab changing behavior

* Fix for `setQuery` not to double up ?

* Handle goal filters properly now

* Delete dead code

* Update special goals handling

* Update <ListReport /> linking

* Show labeled values in list of filters

* Updae Props component handling of storage keys

* re-add special case handling in devices view

* Fix modal-related typo

* Get updatedQuery callsites working

* Update location modals linking

* Update props details model linking logic

* Switch back tab from props when removing goal filter

* Remove query.filters usage from within <Referrers /> component

* Private escapeFilterValue

* Fix sources/index.js

* Legacy redirect logic

* Update comment

* Disabled options in props modal

* Update escaping and is_not operator

* Restore `false` search property handling meaning unset

* changelog

* Fix filtering after clicking on a map

* FilterOperatorSelector

* replaceFilterByPrefix

* Improve naming for filter modals/groups
---
 CHANGELOG.md                                  |   1 +
 assets/js/dashboard.js                        |   3 +
 assets/js/dashboard/api.js                    |   9 +-
 ...elector.js => filter-operator-selector.js} |   2 +-
 assets/js/dashboard/filters.js                | 115 +++++-----
 assets/js/dashboard/query.js                  | 141 ++++++------
 assets/js/dashboard/router.js                 |   6 +-
 .../dashboard/stats/behaviours/conversions.js |   6 +-
 .../stats/behaviours/goal-conversions.js      |  33 ++-
 assets/js/dashboard/stats/behaviours/index.js |   7 +-
 assets/js/dashboard/stats/behaviours/props.js |  29 ++-
 assets/js/dashboard/stats/current-visitors.js |   3 +-
 assets/js/dashboard/stats/devices/index.js    |  45 +++-
 assets/js/dashboard/stats/graph/graph-util.js |  18 +-
 assets/js/dashboard/stats/graph/line-graph.js |   5 +-
 assets/js/dashboard/stats/locations/index.js  |  22 +-
 assets/js/dashboard/stats/locations/map.js    |   7 +-
 .../js/dashboard/stats/modals/conversions.js  |   7 +-
 .../js/dashboard/stats/modals/entry-pages.js  |  11 +-
 .../js/dashboard/stats/modals/exit-pages.js   |  19 +-
 .../stats/modals/filter-modal-group.js        |  66 ++++++
 .../stats/modals/filter-modal-props-row.js    |  93 ++++++++
 .../stats/modals/filter-modal-row.js          |  73 ++++++
 .../js/dashboard/stats/modals/filter-modal.js | 191 ++++++++++++++--
 assets/js/dashboard/stats/modals/pages.js     |  23 +-
 .../stats/modals/prop-filter-modal.js         | 205 -----------------
 .../dashboard/stats/modals/prop-filter-row.js |  86 -------
 assets/js/dashboard/stats/modals/props.js     |  18 +-
 .../stats/modals/referrer-drilldown.js        |  16 +-
 .../stats/modals/regular-filter-modal.js      | 212 ------------------
 assets/js/dashboard/stats/modals/sources.js   |  22 +-
 assets/js/dashboard/stats/modals/table.js     |  20 +-
 assets/js/dashboard/stats/pages/index.js      |  15 +-
 assets/js/dashboard/stats/reports/list.js     |  25 ++-
 assets/js/dashboard/stats/reports/metrics.js  |   7 +-
 assets/js/dashboard/stats/sources/index.js    |   7 +-
 .../dashboard/stats/sources/referrer-list.js  |  12 +-
 .../js/dashboard/stats/sources/source-list.js |  11 +-
 assets/js/dashboard/util/filters.js           | 171 +++++++++-----
 assets/js/dashboard/util/url.js               |  48 +++-
 assets/package-lock.json                      |   6 +
 assets/package.json                           |   1 +
 42 files changed, 974 insertions(+), 843 deletions(-)
 rename assets/js/dashboard/components/{filter-type-selector.js => filter-operator-selector.js} (98%)
 create mode 100644 assets/js/dashboard/stats/modals/filter-modal-group.js
 create mode 100644 assets/js/dashboard/stats/modals/filter-modal-props-row.js
 create mode 100644 assets/js/dashboard/stats/modals/filter-modal-row.js
 delete mode 100644 assets/js/dashboard/stats/modals/prop-filter-modal.js
 delete mode 100644 assets/js/dashboard/stats/modals/prop-filter-row.js
 delete mode 100644 assets/js/dashboard/stats/modals/regular-filter-modal.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 210c9021f59e..25b4412a8dff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -63,6 +63,7 @@ All notable changes to this project will be documented in this file.
 - GA/SC sections moved to new settings: Integrations
 - Replace `CLICKHOUSE_MAX_BUFFER_SIZE` with `CLICKHOUSE_MAX_BUFFER_SIZE_BYTES`
 - Validate metric isn't queried multiple times
+- Filters in dashboard are represented by jsonurl
 
 ### Fixed
 - Creating many sites no longer leads to cookie overflow
diff --git a/assets/js/dashboard.js b/assets/js/dashboard.js
index 227514849ebe..a172b05264d4 100644
--- a/assets/js/dashboard.js
+++ b/assets/js/dashboard.js
@@ -6,6 +6,7 @@ import Router from './dashboard/router'
 import ErrorBoundary from './dashboard/error-boundary'
 import * as api from './dashboard/api'
 import * as timer from './dashboard/util/realtime-update-timer'
+import { filtersBackwardsCompatibilityRedirect } from './dashboard/query';
 
 timer.start()
 
@@ -40,6 +41,8 @@ if (container) {
     api.setSharedLinkAuth(sharedLinkAuth)
   }
 
+  filtersBackwardsCompatibilityRedirect()
+
   const app = (
     <ErrorBoundary>
       <Router site={site} loggedIn={loggedIn} currentUserRole={currentUserRole} />
diff --git a/assets/js/dashboard/api.js b/assets/js/dashboard/api.js
index 26fd29916e7e..6aaae36339f3 100644
--- a/assets/js/dashboard/api.js
+++ b/assets/js/dashboard/api.js
@@ -1,4 +1,5 @@
 import { formatISO } from './util/date'
+import { serializeApiFilters } from './util/filters'
 
 let abortController = new AbortController()
 let SHARED_LINK_AUTH = null
@@ -30,19 +31,13 @@ export function cancelAll() {
   abortController = new AbortController()
 }
 
-function serializeFilters(filters) {
-  const cleaned = {}
-  Object.entries(filters).forEach(([key, val]) => val ? cleaned[key] = val : null);
-  return JSON.stringify(cleaned)
-}
-
 export function serializeQuery(query, extraQuery = []) {
   const queryObj = {}
   if (query.period) { queryObj.period = query.period }
   if (query.date) { queryObj.date = formatISO(query.date) }
   if (query.from) { queryObj.from = formatISO(query.from) }
   if (query.to) { queryObj.to = formatISO(query.to) }
-  if (query.filters) { queryObj.filters = serializeFilters(query.filters) }
+  if (query.filters) { queryObj.filters = serializeApiFilters(query.filters) }
   if (query.experimental_session_count) { queryObj.experimental_session_count = query.experimental_session_count }
   if (query.with_imported) { queryObj.with_imported = query.with_imported }
   if (SHARED_LINK_AUTH) { queryObj.auth = SHARED_LINK_AUTH }
diff --git a/assets/js/dashboard/components/filter-type-selector.js b/assets/js/dashboard/components/filter-operator-selector.js
similarity index 98%
rename from assets/js/dashboard/components/filter-type-selector.js
rename to assets/js/dashboard/components/filter-operator-selector.js
index 2baf85f0a377..a33edd80b797 100644
--- a/assets/js/dashboard/components/filter-type-selector.js
+++ b/assets/js/dashboard/components/filter-operator-selector.js
@@ -6,7 +6,7 @@ import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { isFreeChoiceFilter, supportsIsNot } from "../util/filters";
 import classNames from "classnames";
 
-export default function FilterTypeSelector(props) {
+export default function FilterOperatorSelector(props) {
   const filterName = props.forFilter
 
   function renderTypeItem(type, shouldDisplay) {
diff --git a/assets/js/dashboard/filters.js b/assets/js/dashboard/filters.js
index a835fda764d4..4581a91f77e9 100644
--- a/assets/js/dashboard/filters.js
+++ b/assets/js/dashboard/filters.js
@@ -4,81 +4,70 @@ import { AdjustmentsVerticalIcon, MagnifyingGlassIcon, XMarkIcon, PencilSquareIc
 import classNames from 'classnames'
 import { Menu, Transition } from '@headlessui/react'
 
-import { appliedFilters, navigateToQuery } from './query'
+import { navigateToQuery } from './query'
 import {
-  FILTER_GROUPS,
+  FILTER_GROUP_TO_MODAL_TYPE,
+  cleanLabels,
+  FILTER_MODAL_TO_FILTER_GROUP,
   formatFilterGroup,
-  filterGroupForFilter,
-  parseQueryFilter,
-  parseQueryPropsFilter,
-  formattedFilters
-} from "./util/filters";
-
-function removeFilter(filterType, key, history, query) {
-  const newOpts = {}
-  if (filterType === 'props') {
-    if (Object.keys(query.filters.props).length == 1) {
-      newOpts.props = false
-    } else {
-      newOpts.props = JSON.stringify({
-        ...query.filters.props,
-        [key]: undefined,
-      })
-    }
-  } else {
-    newOpts[key] = false
-  }
-  if (key === 'country') { newOpts.country_labels = false }
-  if (key === 'region') { newOpts.region_labels = false }
-  if (key === 'city') { newOpts.city_labels = false }
+  formattedFilters,
+  EVENT_PROPS_PREFIX,
+  getPropertyKeyFromFilterKey,
+  getLabel
+} from "./util/filters"
+
+function removeFilter(filterIndex, history, query) {
+  const newFilters = query.filters.filter((_filter, index) => filterIndex != index)
+  const newLabels = cleanLabels(newFilters, query.labels)
 
   navigateToQuery(
     history,
     query,
-    newOpts
+    { filters: newFilters, labels: newLabels }
   )
 }
 
 function clearAllFilters(history, query) {
-  const newOpts = Object.keys(query.filters).reduce((acc, red) => ({ ...acc, [red]: false }), {});
   navigateToQuery(
     history,
     query,
-    newOpts
+    { filters: false, labels: false }
   );
 }
 
-function filterText(filterType, key, query) {
-  const formattedFilter = formattedFilters[key]
+function filterText(query, [operation, filterKey, clauses]) {
+  const formattedFilter = formattedFilters[filterKey]
 
-  if (filterType === "props") {
-    const { propKey, clauses, type } = parseQueryPropsFilter(query).find((filter) => filter.propKey.value === key)
-    return <>Property <b>{propKey.label}</b> {type} {clauses.map(({label}) => <b key={label}>{label}</b>).reduce((prev, curr) => [prev, ' or ', curr])} </>
-  } else if (formattedFilter) {
-    const {type, clauses} = parseQueryFilter(query, key)
-    return <>{formattedFilter} {type} {clauses.map(({label}) => <b key={label}>{label}</b>).reduce((prev, curr) => [prev, ' or ', curr])} </>
+  if (formattedFilter) {
+    return <>{formattedFilter} {operation} {clauses.map((value) => <b key={value}>{getLabel(query.labels, filterKey, value)}</b>).reduce((prev, curr) => [prev, ' or ', curr])} </>
+  } else if (filterKey.startsWith(EVENT_PROPS_PREFIX)) {
+    const propKey = getPropertyKeyFromFilterKey(filterKey)
+    return <>Property <b>{propKey}</b> {operation} {clauses.map((label) => <b key={label}>{label}</b>).reduce((prev, curr) => [prev, ' or ', curr])} </>
   }
 
-  throw new Error(`Unknown filter: ${key}`)
+  throw new Error(`Unknown filter: ${filterKey}`)
 }
 
-function renderDropdownFilter(site, history, { key, value, filterType }, query) {
+function renderDropdownFilter(filterIndex, filter, site, history, query) {
+  const [_operation, filterKey, _clauses] = filter
+
+  const type = filterKey.startsWith(EVENT_PROPS_PREFIX) ? 'props' : filterKey
   return (
-    <Menu.Item key={`${filterType}::${key}`}>
-      <div className="px-3 md:px-4 sm:py-2 py-3 text-sm leading-tight flex items-center justify-between" key={key + value}>
+    <Menu.Item key={filterIndex}>
+      <div className="px-3 md:px-4 sm:py-2 py-3 text-sm leading-tight flex items-center justify-between" key={filterIndex}>
         <Link
-          title={`Edit filter: ${formattedFilters[filterType]}`}
-          to={{ pathname: `/${encodeURIComponent(site.domain)}/filter/${filterGroupForFilter(filterType)}`, search: window.location.search }}
+          title={`Edit filter: ${formattedFilters[type]}`}
+          to={{ pathname: `/${encodeURIComponent(site.domain)}/filter/${FILTER_GROUP_TO_MODAL_TYPE[type]}`, search: window.location.search }}
           className="group flex w-full justify-between items-center"
           style={{ width: 'calc(100% - 1.5rem)' }}
         >
-          <span className="inline-block w-full truncate">{filterText(filterType, key, query)}</span>
+          <span className="inline-block w-full truncate">{filterText(query, filter)}</span>
           <PencilSquareIcon className="w-4 h-4 ml-1 cursor-pointer group-hover:text-indigo-700 dark:group-hover:text-indigo-500" />
         </Link>
         <b
-          title={`Remove filter: ${formattedFilters[filterType]}`}
+          title={`Remove filter: ${formattedFilters[type]}`}
           className="ml-2 cursor-pointer hover:text-indigo-700 dark:hover:text-indigo-500"
-          onClick={() => removeFilter(filterType, key, history, query)}
+          onClick={() => removeFilter(filterIndex, history, query)}
         >
           <XMarkIcon className="w-4 h-4" />
         </b>
@@ -109,10 +98,10 @@ function DropdownContent({ history, site, query, wrapped }) {
   const [addingFilter, setAddingFilter] = useState(false);
 
   if (wrapped === 0 || addingFilter) {
-    let filterGroups = {...FILTER_GROUPS}
-    if (!site.propsAvailable) delete filterGroups.props
+    let filterModals = {...FILTER_MODAL_TO_FILTER_GROUP}
+    if (!site.propsAvailable) delete filterModals.props
 
-    return Object.keys(filterGroups).map((option) => filterDropdownOption(site, option))
+    return Object.keys(filterModals).map((option) => filterDropdownOption(site, option))
   }
 
   return (
@@ -120,7 +109,7 @@ function DropdownContent({ history, site, query, wrapped }) {
       <div className="border-b border-gray-200 dark:border-gray-500 px-4 sm:py-2 py-3 text-sm leading-tight hover:text-indigo-700 dark:hover:text-indigo-500 hover:cursor-pointer" onClick={() => setAddingFilter(true)}>
         + Add filter
       </div>
-      {appliedFilters(query).map((filter) => renderDropdownFilter(site, history, filter, query))}
+      {query.filters.map((filter, index) => renderDropdownFilter(index, filter, site, history, query))}
       <Menu.Item key="clear">
         <div className="border-t border-gray-200 dark:border-gray-500 px-4 sm:py-2 py-3 text-sm leading-tight hover:text-indigo-700 dark:hover:text-indigo-500 hover:cursor-pointer" onClick={() => clearAllFilters(history, query)}>
           Clear All Filters
@@ -193,7 +182,7 @@ class Filters extends React.Component {
     const { wrapped, viewport } = this.state;
 
     // Always wrap on mobile
-    if (appliedFilters(this.props.query).length > 0 && viewport <= 768) {
+    if (this.props.query.filters.length > 0 && viewport <= 768) {
       this.setState({ wrapped: 2 })
       return;
     }
@@ -201,7 +190,7 @@ class Filters extends React.Component {
     this.setState({ wrapped: 0 });
 
     // Don't rewrap if we're already properly wrapped, there are no DOM children, or there is only filter
-    if (wrapped !== 1 || !items || appliedFilters(this.props.query).length === 1) {
+    if (wrapped !== 1 || !items || this.props.query.filters.length === 1) {
       return;
     };
 
@@ -217,20 +206,26 @@ class Filters extends React.Component {
     });
   };
 
-  renderListFilter(history, { key, value, filterType }, query) {
+  renderListFilter(filterIndex, filter, history, query) {
+    const text = filterText(query, filter)
+    const [_operation, filterKey, _clauses] = filter
+    const type = filterKey.startsWith(EVENT_PROPS_PREFIX) ? 'props' : filterKey
     return (
-      <span key={`${filterType}::${key}`} title={value} className="flex bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 shadow text-sm rounded mr-2 items-center">
+      <span key={filterIndex} className="flex bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 shadow text-sm rounded mr-2 items-center">
         <Link
-          title={`Edit filter: ${formattedFilters[filterType]}`}
+          title={`Edit filter: ${formattedFilters[type]}`}
           className="flex w-full h-full items-center py-2 pl-3"
-          to={{ pathname: `/${encodeURIComponent(this.props.site.domain)}/filter/${filterGroupForFilter(filterType)}`, search: window.location.search }}
+          to={{
+            pathname: `/${encodeURIComponent(this.props.site.domain)}/filter/${FILTER_GROUP_TO_MODAL_TYPE[type]}`,
+            search: window.location.search
+          }}
         >
-          <span className="inline-block max-w-2xs md:max-w-xs truncate">{filterText(filterType, key, query)}</span>
+          <span className="inline-block max-w-2xs md:max-w-xs truncate">{text}</span>
         </Link>
         <span
-          title={`Remove filter: ${formattedFilters[filterType]}`}
+          title={`Remove filter: ${formattedFilters[type]}`}
           className="flex h-full w-full px-2 cursor-pointer hover:text-indigo-700 dark:hover:text-indigo-500 items-center"
-          onClick={() => removeFilter(filterType, key, history, query)}
+          onClick={() => removeFilter(filterIndex, history, query)}
         >
           <XMarkIcon className="w-4 h-4" />
         </span>
@@ -240,7 +235,7 @@ class Filters extends React.Component {
 
   renderDropdownButton() {
     if (this.state.wrapped === 2) {
-      const filterCount = appliedFilters(this.props.query).length
+      const filterCount = this.props.query.filters.length
       return (
         <>
           <AdjustmentsVerticalIcon className="-ml-1 mr-1 h-4 w-4" aria-hidden="true" />
@@ -309,7 +304,7 @@ class Filters extends React.Component {
     if (this.state.wrapped !== 2) {
       return (
         <div id="filters" className="flex flex-wrap">
-          {(appliedFilters(query).map((filter) => this.renderListFilter(history, filter, query)))}
+          {query.filters.map((filter, index) => this.renderListFilter(index, filter, history, query))}
         </div>
       );
     }
diff --git a/assets/js/dashboard/query.js b/assets/js/dashboard/query.js
index a44bc4352e75..75000cc6a84b 100644
--- a/assets/js/dashboard/query.js
+++ b/assets/js/dashboard/query.js
@@ -1,18 +1,21 @@
 import React from 'react'
 import { Link, withRouter } from 'react-router-dom'
+import JsonURL from '@jsonurl/jsonurl'
+import { PlausibleSearchParams, updatedQuery } from './util/url'
 import { nowForSite } from './util/date'
 import * as storage from './util/storage'
 import { COMPARISON_DISABLED_PERIODS, getStoredComparisonMode, isComparisonEnabled, getStoredMatchDayOfWeek } from './comparison-input'
 
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
+import { parseLegacyFilter, parseLegacyPropsFilter } from './util/filters'
 
 dayjs.extend(utc)
 
 const PERIODS = ['realtime', 'day', 'month', '7d', '30d', '6mo', '12mo', 'year', 'all', 'custom']
 
 export function parseQuery(querystring, site) {
-  const q = new URLSearchParams(querystring)
+  const q = new PlausibleSearchParams(querystring)
   let period = q.get('period')
   const periodKey = `period__${site.domain}`
 
@@ -40,66 +43,88 @@ export function parseQuery(querystring, site) {
     match_day_of_week: matchDayOfWeek == 'true',
     with_imported: q.get('with_imported') ? q.get('with_imported') === 'true' : true,
     experimental_session_count: q.get('experimental_session_count'),
-    filters: {
-      'goal': q.get('goal'),
-      'props': JSON.parse(q.get('props')),
-      'source': q.get('source'),
-      'utm_medium': q.get('utm_medium'),
-      'utm_source': q.get('utm_source'),
-      'utm_campaign': q.get('utm_campaign'),
-      'utm_content': q.get('utm_content'),
-      'utm_term': q.get('utm_term'),
-      'referrer': q.get('referrer'),
-      'screen': q.get('screen'),
-      'browser': q.get('browser'),
-      'browser_version': q.get('browser_version'),
-      'os': q.get('os'),
-      'os_version': q.get('os_version'),
-      'country': q.get('country'),
-      'region': q.get('region'),
-      'city': q.get('city'),
-      'page': q.get('page'),
-      'hostname': q.get('hostname'),
-      'entry_page': q.get('entry_page'),
-      'exit_page': q.get('exit_page')
-    }
+    filters: JsonURL.parse(q.get('filters')) || [],
+    labels: JsonURL.parse(q.get('labels')) || {}
   }
 }
 
-export function appliedFilters(query) {
-  const propKeys = Object.entries(query.filters.props || {})
-    .map(([key, value]) => ({ key, value, filterType: 'props' }))
-
-  return Object.entries(query.filters)
-    .map(([key, value]) => ({ key, value, filterType: key }))
-    .filter(({ key, value }) => key !== 'props' && !!value)
-    .concat(propKeys)
-}
-
-function generateQueryString(data) {
-  const query = new URLSearchParams(window.location.search)
-  Object.keys(data).forEach(key => {
-    if (!data[key]) {
-      query.delete(key)
-      return
-    }
-
-    query.set(key, data[key])
-  })
-  return query.toString()
-}
-
 export function navigateToQuery(history, queryFrom, newData) {
   // if we update any data that we store in localstorage, make sure going back in history will
   // revert them
   if (newData.period && newData.period !== queryFrom.period) {
-    const replaceQuery = new URLSearchParams(window.location.search)
-    replaceQuery.set('period', queryFrom.period)
-    history.replace({ search: replaceQuery.toString() })
+    history.replace({ search: updatedQuery({ period: queryFrom.period}) })
   }
 
   // then push the new query to the history
-  history.push({ search: generateQueryString(newData) })
+  history.push({ search: updatedQuery(newData) })
+}
+
+const LEGACY_URL_PARAMETERS = {
+  'goal': null,
+  'source': null,
+  'utm_medium': null,
+  'utm_source': null,
+  'utm_campaign': null,
+  'utm_content': null,
+  'utm_term': null,
+  'referrer': null,
+  'screen': null,
+  'browser': null,
+  'browser_version': null,
+  'os': null,
+  'os_version': null,
+  'country': 'country_labels',
+  'region': 'region_labels',
+  'city': 'city_labels',
+  'page': null,
+  'hostname': null,
+  'entry_page': null,
+  'exit_page': null,
+}
+
+// Called once when dashboard is loaded load. Checks whether old filter style is used and if so,
+// updates the filters and updates location
+export function filtersBackwardsCompatibilityRedirect() {
+  const q = new PlausibleSearchParams(window.location.search)
+  const entries = Array.from(q.entries())
+
+  // New filters are used - no need to do anything
+  if (q.get("filters")) {
+    return
+  }
+
+  let filters = []
+  let labels = {}
+
+  for (const [key, value] of entries) {
+    if (LEGACY_URL_PARAMETERS.hasOwnProperty(key)) {
+      const filter = parseLegacyFilter(key, value)
+      filters.push(filter)
+      q.delete(key)
+
+      const labelsKey = LEGACY_URL_PARAMETERS[key]
+      if (labelsKey && q.get(labelsKey)) {
+        const clauses = filter[2]
+        const labelsValues = q.get(labelsKey).split('|').filter(label => !!label)
+        const newLabels = Object.fromEntries(clauses.map((clause, index) => [clause, labelsValues[index]]))
+
+        labels = Object.assign(labels, newLabels)
+        q.delete(labelsKey)
+      }
+    }
+  }
+
+  if (q.get('props')) {
+    filters.push(...parseLegacyPropsFilter(q.get('props')))
+    q.delete('props')
+  }
+
+  if (filters.length > 0) {
+    q.set('filters', filters)
+    q.set('labels', labels)
+
+    history.pushState({}, null, `${window.location.pathname}?${q.toString()}`)
+  }
 }
 
 class QueryLink extends React.Component {
@@ -119,7 +144,7 @@ class QueryLink extends React.Component {
     return (
       <Link
         {...props}
-        to={{ pathname: window.location.pathname, search: generateQueryString(to) }}
+        to={{ pathname: window.location.pathname, search: updatedQuery(to) }}
         onClick={this.onClick}
       />
     )
@@ -136,7 +161,7 @@ function QueryButton({ history, query, to, disabled, className, children, onClic
         event.preventDefault()
         navigateToQuery(history, query, to)
         if (onClick) onClick(event)
-        history.push({ pathname: window.location.pathname, search: generateQueryString(to) })
+        history.push({ pathname: window.location.pathname, search: updatedQuery(to) })
       }}
       type="button"
       disabled={disabled}
@@ -148,13 +173,3 @@ function QueryButton({ history, query, to, disabled, className, children, onClic
 
 const QueryButtonWithRouter = withRouter(QueryButton)
 export { QueryButtonWithRouter as QueryButton };
-
-export function eventName(query) {
-  if (query.filters.goal) {
-    if (query.filters.goal.startsWith('Visit ')) {
-      return 'pageviews'
-    }
-    return 'events'
-  }
-  return 'pageviews'
-}
diff --git a/assets/js/dashboard/router.js b/assets/js/dashboard/router.js
index aaad57ff9f6b..4605c9fd15c6 100644
--- a/assets/js/dashboard/router.js
+++ b/assets/js/dashboard/router.js
@@ -52,13 +52,13 @@ export default function Router({ site, loggedIn, currentUserRole }) {
             <ExitPagesModal site={site} />
           </Route>
           <Route path="/:domain/countries">
-            <ModalTable title="Top countries" site={site} endpoint={url.apiPath(site, '/countries')} filter={{ country: 'code', country_labels: 'name' }} keyLabel="Country" renderIcon={renderCountryIcon} showPercentage={true}/>
+            <ModalTable title="Top countries" site={site} endpoint={url.apiPath(site, '/countries')} filterKey="country" keyLabel="Country" renderIcon={renderCountryIcon} showPercentage={true}/>
           </Route>
           <Route path="/:domain/regions">
-            <ModalTable title="Top regions" site={site} endpoint={url.apiPath(site, '/regions')} filter={{ region: 'code', region_labels: 'name' }} keyLabel="Region" renderIcon={renderRegionIcon} />
+            <ModalTable title="Top regions" site={site} endpoint={url.apiPath(site, '/regions')} filterKey="region" keyLabel="Region" renderIcon={renderRegionIcon} />
           </Route>
           <Route path="/:domain/cities">
-            <ModalTable title="Top cities" site={site} endpoint={url.apiPath(site, '/cities')} filter={{ city: 'code', city_labels: 'name' }} keyLabel="City" renderIcon={renderCityIcon} />
+            <ModalTable title="Top cities" site={site} endpoint={url.apiPath(site, '/cities')} filterKey="city" keyLabel="City" renderIcon={renderCityIcon} />
           </Route>
           <Route path="/:domain/custom-prop-values/:prop_key">
             <PropsModal site={site} />
diff --git a/assets/js/dashboard/stats/behaviours/conversions.js b/assets/js/dashboard/stats/behaviours/conversions.js
index 6f2fe13871c6..c318c11d3946 100644
--- a/assets/js/dashboard/stats/behaviours/conversions.js
+++ b/assets/js/dashboard/stats/behaviours/conversions.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import * as api from '../../api'
 import * as url from '../../util/url'
-import { escapeFilterValue } from '../../util/filters'
 
 import { CR_METRIC } from '../reports/metrics';
 import ListReport from '../reports/list';
@@ -14,7 +13,10 @@ export default function Conversions(props) {
   }
 
   function getFilterFor(listItem) {
-    return { goal: escapeFilterValue(listItem.name) }
+    return {
+      prefix: "goal",
+      filter: ["is", "goal", [listItem.name]],
+    }
   }
 
   /*global BUILD_EXTRA*/
diff --git a/assets/js/dashboard/stats/behaviours/goal-conversions.js b/assets/js/dashboard/stats/behaviours/goal-conversions.js
index 0c942c884109..0beaddbc0b39 100644
--- a/assets/js/dashboard/stats/behaviours/goal-conversions.js
+++ b/assets/js/dashboard/stats/behaviours/goal-conversions.js
@@ -4,6 +4,7 @@ import ListReport from "../reports/list"
 import { CR_METRIC } from "../reports/metrics"
 import * as url from "../../util/url"
 import * as api from "../../api"
+import { EVENT_PROPS_PREFIX, getGoalFilter } from "../../util/filters"
 
 export const SPECIAL_GOALS = {
   '404': {title: '404 Pages', prop: 'path'},
@@ -12,14 +13,26 @@ export const SPECIAL_GOALS = {
   'File Download': {title: 'File Downloads', prop: 'url'}
 }
 
+function getSpecialGoal(query) {
+  const goalFilter = getGoalFilter(query)
+  if (!goalFilter) {
+    return null
+  }
+  const [_operation, _filterKey, clauses] = goalFilter
+  if (clauses.length == 1) {
+    return SPECIAL_GOALS[clauses[0]]?.title || null
+  }
+  return null
+
+}
+
 export function specialTitleWhenGoalFilter(query, defaultTitle) {
-  return SPECIAL_GOALS[query.filters.goal]?.title || defaultTitle
+  return getSpecialGoal(query)?.title || defaultTitle
 }
 
 function SpecialPropBreakdown(props) {
-  const { site, query } = props
-  const prop = SPECIAL_GOALS[query.filters.goal].prop
-  
+  const { site, query, prop } = props
+
   function fetchData() {
     return api.get(url.apiPath(site, `/custom-prop-values/${prop}`), query)
   }
@@ -32,7 +45,12 @@ function SpecialPropBreakdown(props) {
     }
   }
 
-  const getFilterFor = (listItem) => { return {'props': JSON.stringify({[prop]: listItem['name']})} }
+  function getFilterFor(listItem) {
+    return {
+      prefix: EVENT_PROPS_PREFIX,
+      filter: ["is", `${EVENT_PROPS_PREFIX}${prop}`, [listItem['name']]]
+    }
+  }
 
   return (
     <ListReport
@@ -57,8 +75,9 @@ function SpecialPropBreakdown(props) {
 export default function GoalConversions(props) {
   const {site, query} = props
 
-  if (SPECIAL_GOALS[query.filters.goal]) {
-    return <SpecialPropBreakdown site={site} query={props.query} />
+  const specialGoal = getSpecialGoal(query)
+  if (specialGoal) {
+    return <SpecialPropBreakdown site={site} query={props.query} prop={specialGoal.prop} />
   } else {
     return <Conversions site={site} query={props.query} onGoalFilterClick={props.onGoalFilterClick}/>
   }
diff --git a/assets/js/dashboard/stats/behaviours/index.js b/assets/js/dashboard/stats/behaviours/index.js
index 8c26ed5a6bb8..55966a703c8a 100644
--- a/assets/js/dashboard/stats/behaviours/index.js
+++ b/assets/js/dashboard/stats/behaviours/index.js
@@ -8,6 +8,7 @@ import GoalConversions, { specialTitleWhenGoalFilter } from './goal-conversions'
 import Properties from './props'
 import { FeatureSetupNotice } from '../../components/notice'
 import { SPECIAL_GOALS } from './goal-conversions'
+import { hasGoalFilter } from '../../util/filters'
 
 /*global BUILD_EXTRA*/
 /*global require*/
@@ -59,12 +60,12 @@ export default function Behaviours(props) {
   }, [])
 
   useEffect(() => {
-    const justRemovedGoalFilter = !query.filters.goal
+    const justRemovedGoalFilter = !hasGoalFilter(query)
     if (mode === PROPS && justRemovedGoalFilter && showingPropsForGoalFilter) {
       setShowingPropsForGoalFilter(false)
       setMode(CONVERSIONS)
     }
-  }, [!!query.filters.goal])
+  }, [hasGoalFilter(query)])
 
   useEffect(() => {
     setMode(defaultMode())
@@ -200,7 +201,7 @@ export default function Behaviours(props) {
     }
     else if (Funnel && adminAccess) {
       let callToAction
-      
+
       if (site.funnelsAvailable) {
         callToAction = {action: 'Set up funnels', link: `/${encodeURIComponent(site.domain)}/settings/funnels`}
       } else {
diff --git a/assets/js/dashboard/stats/behaviours/props.js b/assets/js/dashboard/stats/behaviours/props.js
index b0cc3f64add1..22d32980d322 100644
--- a/assets/js/dashboard/stats/behaviours/props.js
+++ b/assets/js/dashboard/stats/behaviours/props.js
@@ -5,29 +5,34 @@ import * as api from '../../api'
 import * as url from '../../util/url'
 import { CR_METRIC, PERCENTAGE_METRIC } from "../reports/metrics";
 import * as storage from "../../util/storage";
-import { parsePrefix, escapeFilterValue } from "../../util/filters"
+import { getFiltersByKeyPrefix, EVENT_PROPS_PREFIX, getPropertyKeyFromFilterKey, getGoalFilter, FILTER_OPERATIONS, hasGoalFilter } from "../../util/filters"
 
 
 export default function Properties(props) {
   const { site, query } = props
   const propKeyStorageName = `prop_key__${site.domain}`
-  const propKeyStorageNameForGoal = `${query.filters.goal}__prop_key__${site.domain}`
+  const propKeyStorageNameForGoal = () => {
+    const [_operation, _filterKey, [goal]] = getGoalFilter(query)
+    return `${goal}__prop_key__${site.domain}`
+  }
 
   const [propKey, setPropKey] = useState(choosePropKey())
 
   function singleGoalFilterApplied() {
-    const goalFilter = query.filters.goal
+    const goalFilter = getGoalFilter(query)
     if (goalFilter) {
-      const { type, values } = parsePrefix(goalFilter)
-      return type === 'is' && values.length === 1
+      const [operation, _filterKey, clauses] = goalFilter
+      return operation === FILTER_OPERATIONS.is && clauses.length === 1
     } else {
       return false
     }
   }
 
   function choosePropKey() {
-    if (query.filters.props) {
-      return Object.keys(query.filters.props)[0]
+    const propFilters = getFiltersByKeyPrefix(query, EVENT_PROPS_PREFIX)
+    if (propFilters.length > 0) {
+      const [_operation, filterKey, _clauses] = propFilters[0]
+      return getPropertyKeyFromFilterKey(filterKey)
     } else {
       return getPropKeyFromStorage()
     }
@@ -35,7 +40,7 @@ export default function Properties(props) {
 
   function getPropKeyFromStorage() {
     if (singleGoalFilterApplied()) {
-      const storedForGoal = storage.getItem(propKeyStorageNameForGoal)
+      const storedForGoal = storage.getItem(propKeyStorageNameForGoal())
       if (storedForGoal) { return storedForGoal }
     }
 
@@ -57,7 +62,7 @@ export default function Properties(props) {
       const newPropKey = selectedOptions.length === 0 ? null : selectedOptions[0].value
 
       if (newPropKey) {
-        const storageName = singleGoalFilterApplied() ? propKeyStorageNameForGoal : propKeyStorageName
+        const storageName = singleGoalFilterApplied() ? propKeyStorageNameForGoal() : propKeyStorageName
         storage.setItem(storageName, newPropKey)
       }
 
@@ -75,7 +80,7 @@ export default function Properties(props) {
         metrics={[
           { name: 'visitors', label: 'Visitors', plot: true },
           { name: 'events', label: 'Events', hiddenOnMobile: true },
-          query.filters.goal ? CR_METRIC : PERCENTAGE_METRIC,
+          hasGoalFilter(query) ? CR_METRIC : PERCENTAGE_METRIC,
           BUILD_EXTRA && { name: 'total_revenue', label: 'Revenue', hiddenOnMobile: true },
           BUILD_EXTRA && { name: 'average_revenue', label: 'Average', hiddenOnMobile: true }
         ]}
@@ -89,8 +94,10 @@ export default function Properties(props) {
   }
 
   const getFilterFor = (listItem) => ({
-    props: JSON.stringify({ ...query.filters.props, [propKey]: escapeFilterValue(listItem.name) })
+    prefix: `${EVENT_PROPS_PREFIX}${propKey}`,
+    filter: ["is", `${EVENT_PROPS_PREFIX}${propKey}`, [listItem.name]]
   })
+
   const comboboxValues = propKey ? [{ value: propKey, label: propKey }] : []
   const boxClass = 'pl-2 pr-8 py-1 bg-transparent dark:text-gray-300 rounded-md shadow-sm border border-gray-300 dark:border-gray-500'
 
diff --git a/assets/js/dashboard/stats/current-visitors.js b/assets/js/dashboard/stats/current-visitors.js
index 7c16ecc1533e..d19d39678220 100644
--- a/assets/js/dashboard/stats/current-visitors.js
+++ b/assets/js/dashboard/stats/current-visitors.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { Link } from 'react-router-dom'
 import * as api from '../api'
 import * as url from '../util/url'
-import { appliedFilters } from '../query';
 import { Tooltip } from '../util/tooltip';
 import { SecondsSinceLastLoad } from '../util/seconds-since-last-load';
 
@@ -37,7 +36,7 @@ export default class CurrentVisitors extends React.Component {
   }
 
   render() {
-    if (appliedFilters(this.props.query).length >= 1) { return null }
+    if (this.props.query.filters.length >= 1) { return null }
     const { currentVisitors } = this.state;
 
     if (currentVisitors !== null) {
diff --git a/assets/js/dashboard/stats/devices/index.js b/assets/js/dashboard/stats/devices/index.js
index 49852bd9b8f2..efc22fbc4e40 100644
--- a/assets/js/dashboard/stats/devices/index.js
+++ b/assets/js/dashboard/stats/devices/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import * as storage from '../../util/storage'
-import { isFilteringOnFixedValue } from '../../util/filters'
+import { getFiltersByKeyPrefix, isFilteringOnFixedValue } from '../../util/filters'
 import ListReport from '../reports/list'
 import * as api from '../../api'
 import * as url from '../../util/url'
@@ -13,7 +13,10 @@ function Browsers({ query, site }) {
   }
 
   function getFilterFor(listItem) {
-    return { browser: listItem['name'] }
+    return {
+      prefix: 'browser',
+      filter: ["is", "browser", [listItem['name']]]
+    }
   }
 
   return (
@@ -33,10 +36,13 @@ function BrowserVersions({ query, site }) {
   }
 
   function getFilterFor(listItem) {
-    if (query.filters.browser === '(not set)') {
-      return {}
+    if (getSingleFilter(query, "browser") == '(not set)') {
+      return null
+    }
+    return {
+      prefix: 'browser_version',
+      filter: ["is", "browser_version", [listItem['name']]]
     }
-    return { browser_version: listItem['name'] }
   }
 
   return (
@@ -57,7 +63,10 @@ function OperatingSystems({ query, site }) {
   }
 
   function getFilterFor(listItem) {
-    return { os: listItem['name'] }
+    return {
+      prefix: 'os',
+      filter: ["is", "os", [listItem['name']]]
+    }
   }
 
   return (
@@ -77,10 +86,13 @@ function OperatingSystemVersions({ query, site }) {
   }
 
   function getFilterFor(listItem) {
-    if (query.filters.os === '(not set)') {
-      return {}
+    if (getSingleFilter(query, "os") == '(not set)') {
+      return null
+    }
+    return {
+      prefix: 'os_version',
+      filter: ["is", "os_version", [listItem['name']]]
     }
-    return { os_version: listItem['name'] }
   }
 
   return (
@@ -105,7 +117,10 @@ function ScreenSizes({ query, site }) {
   }
 
   function getFilterFor(listItem) {
-    return { screen: listItem['name'] }
+    return {
+      prefix: 'screen',
+      filter: ["is", "screen", [listItem['name']]]
+    }
   }
 
   return (
@@ -218,3 +233,13 @@ export default class Devices extends React.Component {
     )
   }
 }
+
+function getSingleFilter(query, filterKey) {
+  const matches = getFiltersByKeyPrefix(query, filterKey)
+  if (matches.length != 1) {
+    return null
+  }
+  const clauses = matches[0][2]
+
+  return clauses.length == 1 ? clauses[0] : null
+}
diff --git a/assets/js/dashboard/stats/graph/graph-util.js b/assets/js/dashboard/stats/graph/graph-util.js
index a3040bac01f5..59b96bf53377 100644
--- a/assets/js/dashboard/stats/graph/graph-util.js
+++ b/assets/js/dashboard/stats/graph/graph-util.js
@@ -1,11 +1,11 @@
 import numberFormatter, {durationFormatter} from '../../util/number-formatter'
-import { parsePrefix } from '../../util/filters'
+import { getFiltersByKeyPrefix, getGoalFilter } from '../../util/filters'
 
 export function getGraphableMetrics(query, site) {
   const isRealtime = query.period === 'realtime'
-  const goalFilter = query.filters.goal
-  const pageFilter = query.filters.page
-  
+  const goalFilter = getGoalFilter(query)
+  const hasPageFilter = getFiltersByKeyPrefix(query, "page").length > 0
+
   if (isRealtime && goalFilter) {
     return ["visitors"]
   } else if (isRealtime) {
@@ -14,7 +14,7 @@ export function getGraphableMetrics(query, site) {
     return ["visitors", "events", "average_revenue", "total_revenue", "conversion_rate"]
   } else if (goalFilter) {
     return ["visitors", "events", "conversion_rate"]
-  } else if (pageFilter) {
+  } else if (hasPageFilter) {
     return ["visitors", "visits", "pageviews", "bounce_rate", "time_on_page"]
   } else {
     return ["visitors", "visits", "pageviews", "views_per_visit", "bounce_rate", "visit_duration"]
@@ -24,13 +24,11 @@ export function getGraphableMetrics(query, site) {
 // Revenue metrics can only be graphed if:
 //   * The query is filtered by at least one revenue goal
 //   * All revenue goals in filter have the same currency
-function canGraphRevenueMetrics(goalFilter, site) {
-  const goalsInFilter = parsePrefix(goalFilter).values
-
+function canGraphRevenueMetrics([_operation, _filterKey, clauses], site) {
   const revenueGoalsInFilter = site.revenueGoals.filter((rg) => {
-    return goalsInFilter.includes(rg.event_name)
+    return clauses.includes(rg.event_name)
   })
-  
+
   const singleCurrency = revenueGoalsInFilter.every((rg) => {
     return rg.currency === revenueGoalsInFilter[0].currency
   })
diff --git a/assets/js/dashboard/stats/graph/line-graph.js b/assets/js/dashboard/stats/graph/line-graph.js
index 5ac82d32db25..c0f1c72b6760 100644
--- a/assets/js/dashboard/stats/graph/line-graph.js
+++ b/assets/js/dashboard/stats/graph/line-graph.js
@@ -7,6 +7,7 @@ import { buildDataSet, METRIC_LABELS, METRIC_FORMATTER } from './graph-util'
 import dateFormatter from './date-formatter';
 import FadeIn from '../../fade-in';
 import classNames from 'classnames';
+import { hasGoalFilter } from '../../util/filters';
 
 const calculateMaximumY = function(dataset) {
   const yAxisValues = dataset
@@ -30,7 +31,7 @@ class LineGraph extends React.Component {
   getGraphMetric() {
     let metric = this.props.graphData.metric
 
-    if (metric == 'visitors' && this.props.query.filters.goal) {
+    if (metric == 'visitors' && hasGoalFilter(this.props.query)) {
       return 'conversions'
     } else {
       return metric
@@ -244,4 +245,4 @@ class LineGraph extends React.Component {
   }
 }
 
-export default withRouter(LineGraph)
\ No newline at end of file
+export default withRouter(LineGraph)
diff --git a/assets/js/dashboard/stats/locations/index.js b/assets/js/dashboard/stats/locations/index.js
index fb96eea7d7ab..fb17203bf7ca 100644
--- a/assets/js/dashboard/stats/locations/index.js
+++ b/assets/js/dashboard/stats/locations/index.js
@@ -7,6 +7,7 @@ import * as api from '../../api'
 import {apiPath, sitePath} from '../../util/url'
 import ListReport from '../reports/list'
 import { VISITORS_METRIC, maybeWithCR } from '../reports/metrics';
+import { getFiltersByKeyPrefix } from '../../util/filters';
 
 function Countries({query, site, onClick}) {
   function fetchData() {
@@ -20,7 +21,11 @@ function Countries({query, site, onClick}) {
   }
 
   function getFilterFor(listItem) {
-    return { country: listItem['code'], country_labels: listItem['name'] }
+    return {
+      prefix: "country",
+      filter: ["is", "country", [listItem['code']]],
+      labels: { [listItem['code']]: listItem['name'] }
+    }
   }
 
   return (
@@ -48,7 +53,11 @@ function Regions({query, site, onClick}) {
   }
 
   function getFilterFor(listItem) {
-    return {region: listItem['code'], region_labels: listItem['name']}
+    return {
+      prefix: "region",
+      filter: ["is", "region", [listItem['code']]],
+      labels: { [listItem['code']]: listItem['name'] }
+    }
   }
 
   return (
@@ -76,7 +85,11 @@ function Cities({query, site}) {
   }
 
   function getFilterFor(listItem) {
-    return {city: listItem['code'], city_labels: listItem['name']}
+    return {
+      prefix: "city",
+      filter: ["is", "city", [listItem['code']]],
+      labels: { [listItem['code']]: listItem['name'] }
+    }
   }
 
   return (
@@ -114,7 +127,8 @@ export default class Locations extends React.Component {
 
   componentDidUpdate(prevProps) {
     const isRemovingFilter = (filterName) => {
-      return prevProps.query.filters[filterName] && !this.props.query.filters[filterName]
+      return getFiltersByKeyPrefix(prevProps.query, filterName).length > 0 &&
+        getFiltersByKeyPrefix(this.props.query, filterName).length == 0
     }
 
     if (this.state.mode === 'cities' && isRemovingFilter('region')) {
diff --git a/assets/js/dashboard/stats/locations/map.js b/assets/js/dashboard/stats/locations/map.js
index a6c2f8dbfe4b..f96ebb4ef4d1 100644
--- a/assets/js/dashboard/stats/locations/map.js
+++ b/assets/js/dashboard/stats/locations/map.js
@@ -9,6 +9,7 @@ import LazyLoader from '../../components/lazy-loader'
 import MoreLink from '../more-link'
 import * as api from '../../api'
 import { navigateToQuery } from '../../query'
+import { cleanLabels, replaceFilterByPrefix } from '../../util/filters';
 
 class Countries extends React.Component {
   constructor(props) {
@@ -112,6 +113,8 @@ class Countries extends React.Component {
       done: (datamap) => {
         datamap.svg.selectAll('.datamaps-subunit').on('click', (geography) => {
           const country = this.state.countries.find(c => c.alpha_3 === geography.id)
+          const filters = replaceFilterByPrefix(this.props.query, "country", ["is", "country", [country.code]])
+          const labels = cleanLabels(filters, this.props.query.labels, "country", { [country.code]: country.name })
 
           if (country) {
             this.props.onClick()
@@ -120,8 +123,8 @@ class Countries extends React.Component {
               this.props.history,
               this.props.query,
               {
-                country: country.code,
-                country_labels: country.name
+                filters,
+                labels
               }
             )
           }
diff --git a/assets/js/dashboard/stats/modals/conversions.js b/assets/js/dashboard/stats/modals/conversions.js
index 2f0254cebf18..4e69f987f332 100644
--- a/assets/js/dashboard/stats/modals/conversions.js
+++ b/assets/js/dashboard/stats/modals/conversions.js
@@ -7,7 +7,7 @@ import * as api from '../../api'
 import * as url from "../../util/url";
 import numberFormatter from '../../util/number-formatter'
 import { parseQuery } from '../../query'
-import { escapeFilterValue } from '../../util/filters'
+import { replaceFilterByPrefix } from '../../util/filters'
 
 /*global BUILD_EXTRA*/
 /*global require*/
@@ -60,9 +60,8 @@ function ConversionsModal(props) {
   }
 
   function filterSearchLink(listItem) {
-    const searchParams = new URLSearchParams(window.location.search)
-    searchParams.set('goal', escapeFilterValue(listItem.name))
-    return searchParams.toString()
+    const filters = replaceFilterByPrefix(query, "goal", ["is", "goal", [listItem.name]])
+    return url.updatedQuery({ filters })
   }
 
   function renderListItem(listItem, hasRevenue) {
diff --git a/assets/js/dashboard/stats/modals/entry-pages.js b/assets/js/dashboard/stats/modals/entry-pages.js
index a31353e7591a..baa8ff0763bb 100644
--- a/assets/js/dashboard/stats/modals/entry-pages.js
+++ b/assets/js/dashboard/stats/modals/entry-pages.js
@@ -6,7 +6,8 @@ import Modal from './modal'
 import * as api from '../../api'
 import numberFormatter, { durationFormatter } from '../../util/number-formatter'
 import { parseQuery } from '../../query'
-import { trimURL } from '../../util/url'
+import { trimURL, updatedQuery } from '../../util/url'
+import { hasGoalFilter, replaceFilterByPrefix } from "../../util/filters";
 
 class EntryPagesModal extends React.Component {
   constructor(props) {
@@ -54,7 +55,7 @@ class EntryPagesModal extends React.Component {
   }
 
   showConversionRate() {
-    return !!this.state.query.filters.goal
+    return hasGoalFilter(this.state.query)
   }
 
   showExtra() {
@@ -74,16 +75,14 @@ class EntryPagesModal extends React.Component {
   }
 
   renderPage(page) {
-    const query = new URLSearchParams(window.location.search)
-    query.set('entry_page', page.name)
-
+    const filters = replaceFilterByPrefix(this.state.query, "entry_page", ["is", "entry_page", [page.name]])
     return (
       <tr className="text-sm dark:text-gray-200" key={page.name}>
         <td className="p-2 truncate">
           <Link
             to={{
               pathname: `/${encodeURIComponent(this.props.site.domain)}`,
-              search: query.toString()
+              search: updatedQuery({ filters })
             }}
             className="hover:underline"
           >
diff --git a/assets/js/dashboard/stats/modals/exit-pages.js b/assets/js/dashboard/stats/modals/exit-pages.js
index f8b2f71b0ade..ecb464232225 100644
--- a/assets/js/dashboard/stats/modals/exit-pages.js
+++ b/assets/js/dashboard/stats/modals/exit-pages.js
@@ -6,7 +6,8 @@ import Modal from './modal'
 import * as api from '../../api'
 import numberFormatter, {percentageFormatter} from '../../util/number-formatter'
 import { parseQuery } from '../../query'
-import { trimURL } from '../../util/url'
+import { trimURL, updatedQuery } from '../../util/url'
+import { hasGoalFilter, replaceFilterByPrefix } from "../../util/filters";
 class ExitPagesModal extends React.Component {
   constructor(props) {
     super(props)
@@ -35,7 +36,7 @@ class ExitPagesModal extends React.Component {
   }
 
   showConversionRate() {
-    return !!this.state.query.filters.goal
+    return hasGoalFilter(this.state.query)
   }
 
   showExtra() {
@@ -55,13 +56,19 @@ class ExitPagesModal extends React.Component {
   }
 
   renderPage(page) {
-    const query = new URLSearchParams(window.location.search)
-    query.set('exit_page', page.name)
-
+    const filters = replaceFilterByPrefix(this.state.query, "exit_page", ["is", "exit_page", [page.name]])
     return (
       <tr className="text-sm dark:text-gray-200" key={page.name}>
         <td className="p-2 truncate">
-          <Link to={{ pathname: `/${encodeURIComponent(this.props.site.domain)}`, search: query.toString() }} className="hover:underline">{trimURL(page.name, 40)}</Link>
+          <Link
+            to={{
+              pathname: `/${encodeURIComponent(this.props.site.domain)}`,
+              search: updatedQuery({ filters })
+            }}
+            className="hover:underline"
+          >
+            {trimURL(page.name, 40)}
+          </Link>
         </td>
         {this.showConversionRate() && <td className="p-2 w-32 font-medium" align="right">{numberFormatter(page.total_visitors)}</td>}
         <td className="p-2 w-32 font-medium" align="right">{numberFormatter(page.visitors)}</td>
diff --git a/assets/js/dashboard/stats/modals/filter-modal-group.js b/assets/js/dashboard/stats/modals/filter-modal-group.js
new file mode 100644
index 000000000000..b8eee128e4ba
--- /dev/null
+++ b/assets/js/dashboard/stats/modals/filter-modal-group.js
@@ -0,0 +1,66 @@
+import React, { useMemo } from "react"
+import FilterModalRow from "./filter-modal-row"
+import { formattedFilters, getFilterGroup, getPropertyKeyFromFilterKey } from '../../util/filters'
+import FilterModalPropsRow from "./filter-modal-props-row"
+
+export default function FilterModalGroup({
+  filterGroup,
+  filterState,
+  site,
+  labels,
+  query,
+  onUpdateRowValue,
+  onAddRow,
+  onDeleteRow
+}) {
+  const rows = useMemo(
+    () => Object.entries(filterState).filter(([_, filter]) => getFilterGroup(filter) == filterGroup).map(([id, filter]) => ({ id, filter })),
+    [filterGroup, filterState]
+  )
+
+  const disabledOptions = useMemo(
+    () => (filterGroup == 'props') ? rows.map(({ filter }) => ({ value: getPropertyKeyFromFilterKey(filter[1]) })) : null,
+    [filterGroup, rows]
+  )
+
+  const showAddRow = filterGroup == 'props'
+  const showTitle = filterGroup != 'props'
+
+  return (
+    <>
+      <div className="mt-4">
+        {showTitle && (<div className="text-sm font-medium text-gray-700 dark:text-gray-300">{formattedFilters[filterGroup]}</div>)}
+        {rows.map(({ id, filter }) =>
+          filterGroup === 'props' ? (
+            <FilterModalPropsRow
+              key={id}
+              filter={filter}
+              site={site}
+              query={query}
+              showDelete={rows.length > 1}
+              disabledOptions={disabledOptions}
+              onUpdate={(newFilter) => onUpdateRowValue(id, newFilter)}
+              onDelete={() => onDeleteRow(id)}
+            />
+          ) : (
+            <FilterModalRow
+              key={id}
+              filter={filter}
+              site={site}
+              query={query}
+              labels={labels}
+              onUpdate={(newFilter, labelUpdate) => onUpdateRowValue(id, newFilter, labelUpdate)}
+            />
+          )
+        )}
+      </div>
+      {showAddRow && (
+        <div className="mt-6">
+          <a className="underline text-indigo-500 text-sm cursor-pointer" onClick={() => onAddRow(filterGroup)}>
+            + Add another
+          </a>
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/assets/js/dashboard/stats/modals/filter-modal-props-row.js b/assets/js/dashboard/stats/modals/filter-modal-props-row.js
new file mode 100644
index 000000000000..7f08be1f1a1c
--- /dev/null
+++ b/assets/js/dashboard/stats/modals/filter-modal-props-row.js
@@ -0,0 +1,93 @@
+import React, { useMemo } from "react"
+import { TrashIcon } from '@heroicons/react/20/solid'
+
+import FilterOperatorSelector from "../../components/filter-operator-selector"
+import Combobox from '../../components/combobox'
+
+import { apiPath } from '../../util/url'
+import { EVENT_PROPS_PREFIX, FILTER_OPERATIONS, fetchSuggestions, getPropertyKeyFromFilterKey } from '../../util/filters'
+
+export default function FilterModalPropsRow({
+  site,
+  query,
+  filter,
+  showDelete,
+  disabledOptions,
+  onUpdate,
+  onDelete,
+}) {
+  const [operation, filterKey, clauses] = filter
+
+  const propKey = useMemo(
+    () => getPropertyKeyFromFilterKey(filterKey),
+    [filterKey]
+  )
+
+  const selectedClauses = useMemo(
+    () => clauses.map((value) => ({ value, label: value })),
+    [clauses]
+  )
+
+  function fetchPropKeyOptions(input) {
+    return fetchSuggestions(apiPath(site, `/suggestions/prop_key`), query, input)
+  }
+
+  function fetchPropValueOptions(input) {
+    if (operation === FILTER_OPERATIONS.contains) {return Promise.resolve([])}
+    return fetchSuggestions(apiPath(site, `/suggestions/prop_value`), query, input, [
+      FILTER_OPERATIONS.isNot, filterKey, ['(none)']
+    ])
+  }
+
+  function onPropKeySelect(selection) {
+    const { value } = selection[0]
+    onUpdate([operation, `${EVENT_PROPS_PREFIX}${value}`, clauses])
+  }
+
+  function onPropValueSelect(selection) {
+    const newClauses = selection.map(({ value }) => value)
+    onUpdate([operation, filterKey, newClauses])
+  }
+
+  return (
+    <div className="grid grid-cols-12 mt-6">
+      <div className="col-span-4">
+        <Combobox
+          className="mr-2"
+          fetchOptions={fetchPropKeyOptions}
+          singleOption
+          autoFocus
+          values={propKey ? [{ value: propKey, label: propKey }] : []}
+          onSelect={onPropKeySelect}
+          placeholder="Property"
+          disabledOptions={disabledOptions}
+        />
+      </div>
+      <div className="col-span-3 mx-2">
+        <FilterOperatorSelector
+          isDisabled={!filterKey}
+          forFilter={'prop_value'}
+          onSelect={(newOperation) => onUpdate([newOperation, filterKey, clauses])}
+          selectedType={operation}
+        />
+      </div>
+      <div className="col-span-4">
+        <Combobox
+          isDisabled={!filterKey}
+          fetchOptions={fetchPropValueOptions}
+          values={selectedClauses}
+          onSelect={onPropValueSelect}
+          placeholder={'Value'}
+          freeChoice={operation == FILTER_OPERATIONS.contains}
+        />
+      </div>
+      {showDelete && (
+        <div className="col-span-1 flex flex-col justify-center">
+          <a className="ml-2 text-red-600 h-5 w-5 cursor-pointer" onClick={onDelete}>
+            <TrashIcon />
+          </a>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/assets/js/dashboard/stats/modals/filter-modal-row.js b/assets/js/dashboard/stats/modals/filter-modal-row.js
new file mode 100644
index 000000000000..09c28781520f
--- /dev/null
+++ b/assets/js/dashboard/stats/modals/filter-modal-row.js
@@ -0,0 +1,73 @@
+import React, { useMemo } from "react"
+
+import FilterOperatorSelector from "../../components/filter-operator-selector"
+import Combobox from '../../components/combobox'
+
+import { FILTER_OPERATIONS, fetchSuggestions, isFreeChoiceFilter } from "../../util/filters"
+import { apiPath } from '../../util/url'
+import { getLabel, formattedFilters } from '../../util/filters'
+
+export default function FilterModalRow({
+  site,
+  query,
+  filter,
+  labels,
+  onUpdate
+}) {
+  const [operation, filterKey, clauses] = filter
+
+  const selectedClauses = useMemo(
+    () => clauses.map((value) => ({ value, label: getLabel(labels, filterKey, value) })),
+    [filter, labels]
+  )
+
+  function onComboboxSelect(selection) {
+    const newClauses = selection.map(({ value }) => value)
+    const newLabels = Object.fromEntries(selection.map(({ label, value }) => [value, label]))
+
+    onUpdate(
+      [operation, filterKey, newClauses],
+      newLabels
+    )
+  }
+
+  function fetchOptions(input) {
+    if (operation === FILTER_OPERATIONS.contains) {
+      return Promise.resolve([])
+    }
+
+    return fetchSuggestions(apiPath(site, `/suggestions/${filterKey}`), query, input, [
+      FILTER_OPERATIONS.isNot, filterKey, clauses
+    ])
+  }
+
+  return (
+    <div className="grid grid-cols-11 mt-1">
+      <div className="col-span-3 mr-2">
+        <FilterOperatorSelector
+          forFilter={filterKey}
+          onSelect={(newOperation) => onUpdate([newOperation, filterKey, clauses], labels)}
+          selectedType={operation}
+        />
+      </div>
+      <div className="col-span-8">
+        <Combobox
+          fetchOptions={fetchOptions}
+          freeChoice={isFreeChoiceFilter(filterKey)}
+          values={selectedClauses}
+          onSelect={onComboboxSelect}
+          placeholder={`Select ${withIndefiniteArticle(formattedFilters[filterKey])}`}
+        />
+      </div>
+    </div>
+  )
+}
+
+function withIndefiniteArticle(word) {
+  if (word.startsWith('UTM')) {
+    return `a ${word}`
+  } if (['a', 'e', 'i', 'o', 'u'].some((vowel) => word.toLowerCase().startsWith(vowel))) {
+    return `an ${word}`
+  }
+  return `a ${word}`
+}
diff --git a/assets/js/dashboard/stats/modals/filter-modal.js b/assets/js/dashboard/stats/modals/filter-modal.js
index c6fbb3966621..0b2be394bdfb 100644
--- a/assets/js/dashboard/stats/modals/filter-modal.js
+++ b/assets/js/dashboard/stats/modals/filter-modal.js
@@ -1,24 +1,185 @@
-import React from "react"
+import React from "react";
 import { withRouter } from 'react-router-dom'
+
 import Modal from './modal'
-import RegularFilterModal from './regular-filter-modal'
-import PropFilterModal from "./prop-filter-modal"
-
-function FilterModal(props) {
-  function renderBody() {
-    const filterGroup = props.match.params.field || 'page'
-    if (filterGroup === 'props') {
-      return <PropFilterModal site={props.site} />
+import { EVENT_PROPS_PREFIX, FILTER_GROUP_TO_MODAL_TYPE, formatFilterGroup, FILTER_OPERATIONS, getFilterGroup, FILTER_MODAL_TO_FILTER_GROUP} from '../../util/filters'
+import { parseQuery } from '../../query'
+import { siteBasePath, updatedQuery } from '../../util/url'
+import { shouldIgnoreKeypress } from '../../keybinding'
+import { cleanLabels } from "../../util/filters"
+import FilterModalGroup from "./filter-modal-group"
+
+function partitionFilters(modalType, filters) {
+  const otherFilters = []
+  const filterState = {}
+  let hasRelevantFilters = false
+
+  filters.forEach((filter, index) => {
+    const filterGroup = getFilterGroup(filter)
+    if (FILTER_GROUP_TO_MODAL_TYPE[modalType].includes(filterGroup)) {
+      const key = filterState[filterGroup] ? `${filterGroup}:${index}` : filterGroup
+      filterState[key] = filter
+      hasRelevantFilters = true
     } else {
-      return <RegularFilterModal site={props.site} filterGroup={filterGroup} />
+      otherFilters.push(filter)
+    }
+  })
+
+  FILTER_MODAL_TO_FILTER_GROUP[modalType].forEach((filterGroup) => {
+    if (!filterState[filterGroup]) {
+      filterState[filterGroup] = emptyFilter(filterGroup)
+    }
+  })
+
+  return { filterState, otherFilters, hasRelevantFilters }
+}
+
+function emptyFilter(key) {
+  const filterKey = key === 'props' ? EVENT_PROPS_PREFIX : key
+
+  return [FILTER_OPERATIONS.is, filterKey, []]
+}
+
+class FilterModal extends React.Component {
+  constructor(props) {
+    super(props)
+
+    const modalType = props.match.params.field || 'page'
+
+    const query = parseQuery(props.location.search, props.site)
+    const { filterState, otherFilters, hasRelevantFilters } = partitionFilters(modalType, query.filters)
+
+    this.handleKeydown = this.handleKeydown.bind(this)
+    this.state = { query, modalType, filterState, labelState: query.labels, otherFilters, hasRelevantFilters }
+  }
+
+  componentDidMount() {
+    document.addEventListener("keydown", this.handleKeydown)
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("keydown", this.handleKeydown);
+  }
+
+  handleKeydown(e) {
+    if (shouldIgnoreKeypress(e)) return
+
+    if (e.target.tagName === 'BODY' && e.key === 'Enter') {
+      this.handleSubmit()
     }
   }
 
-  return (
-    <Modal site={props.site} maxWidth="460px">
-      {renderBody()}
-    </Modal>
-  )
+  handleSubmit() {
+    const filters = Object.values(this.state.filterState)
+      .filter(([_op, _key, clauses]) => clauses.length > 0)
+      .concat(this.state.otherFilters)
+
+    this.selectFiltersAndCloseModal(filters)
+  }
+
+  isDisabled() {
+    return Object.values(this.state.filterState).every(([_operation, _key, clauses]) => clauses.length === 0)
+  }
+
+  selectFiltersAndCloseModal(filters) {
+    this.props.history.replace({
+      pathname: siteBasePath(this.props.site),
+      search: updatedQuery({
+        filters: filters,
+        labels: cleanLabels(filters, this.state.labelState)
+      })
+    })
+  }
+
+  onUpdateRowValue(id, newFilter, newLabels) {
+    this.setState(prevState => {
+      const [_operation, filterKey, _clauses] = newFilter
+      return {
+        filterState: {
+          ...prevState.filterState,
+          [id]: newFilter
+        },
+        labelState: cleanLabels(
+          Object.values(this.state.filterState).concat(this.state.query.filters),
+          prevState.labelState,
+          filterKey,
+          newLabels
+        )
+      }
+    })
+  }
+
+  onAddRow(filterGroup) {
+    this.setState(prevState => {
+      const filter = emptyFilter(filterGroup)
+      const id = `${filterGroup}${Object.keys(this.state.filterState).length}`
+
+      return {
+        filterState: {
+          ...prevState.filterState,
+          [id]: filter
+        }
+      }
+    })
+  }
+
+  onDeleteRow(id) {
+    this.setState(prevState => {
+      const filterState = {...prevState.filterState}
+      delete filterState[id]
+      return { filterState }
+    })
+  }
+
+  render() {
+    return (
+      <Modal site={this.props.site} maxWidth="460px">
+        <h1 className="text-xl font-bold dark:text-gray-100">Filter by {formatFilterGroup(this.state.modalType)}</h1>
+
+        <div className="mt-4 border-b border-gray-300"></div>
+        <main className="modal__content">
+          <form className="flex flex-col" onSubmit={this.handleSubmit.bind(this)}>
+            {FILTER_MODAL_TO_FILTER_GROUP[this.state.modalType].map((filterGroup) => (
+              <FilterModalGroup
+                key={filterGroup}
+                filterGroup={filterGroup}
+                filterState={this.state.filterState}
+                labels={this.state.labelState}
+                site={this.props.site}
+                query={this.state.query}
+                onUpdateRowValue={this.onUpdateRowValue.bind(this)}
+                onAddRow={this.onAddRow.bind(this)}
+                onDeleteRow={this.onDeleteRow.bind(this)}
+              />
+            ))}
+
+            <div className="mt-6 flex items-center justify-start">
+              <button
+                type="submit"
+                className="button"
+                disabled={this.isDisabled()}
+              >
+                Apply Filter
+              </button>
+
+              {this.state.hasRelevantFilters && (
+                <button
+                  type="button"
+                  className="ml-2 button px-4 flex bg-red-500 dark:bg-red-500 hover:bg-red-600 dark:hover:bg-red-700 items-center"
+                  onClick={() => {
+                    this.selectFiltersAndCloseModal(this.state.otherFilters)
+                  }}
+                >
+                  <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
+                  Remove filter{FILTER_MODAL_TO_FILTER_GROUP[this.state.modalType].length > 1 ? 's' : ''}
+                </button>
+              )}
+            </div>
+          </form>
+        </main>
+      </Modal>
+    )
+  }
 }
 
 export default withRouter(FilterModal)
diff --git a/assets/js/dashboard/stats/modals/pages.js b/assets/js/dashboard/stats/modals/pages.js
index bf25384710e8..7150dc52d128 100644
--- a/assets/js/dashboard/stats/modals/pages.js
+++ b/assets/js/dashboard/stats/modals/pages.js
@@ -6,7 +6,8 @@ import Modal from './modal'
 import * as api from '../../api'
 import numberFormatter, { durationFormatter } from '../../util/number-formatter'
 import { parseQuery } from '../../query'
-import { trimURL } from '../../util/url'
+import { trimURL, updatedQuery } from '../../util/url'
+import { hasGoalFilter, replaceFilterByPrefix } from "../../util/filters";
 
 class PagesModal extends React.Component {
   constructor(props) {
@@ -37,15 +38,15 @@ class PagesModal extends React.Component {
   }
 
   showExtra() {
-    return this.state.query.period !== 'realtime' && !this.state.query.filters.goal
+    return this.state.query.period !== 'realtime' && !hasGoalFilter(this.state.query)
   }
 
   showPageviews() {
-    return this.state.query.period !== 'realtime' && !this.state.query.filters.goal
+    return this.state.query.period !== 'realtime' && !hasGoalFilter(this.state.query)
   }
 
   showConversionRate() {
-    return !!this.state.query.filters.goal
+    return hasGoalFilter(this.state.query)
   }
 
   formatBounceRate(page) {
@@ -57,14 +58,20 @@ class PagesModal extends React.Component {
   }
 
   renderPage(page) {
-    const query = new URLSearchParams(window.location.search)
+    const filters = replaceFilterByPrefix(this.state.query, "page", ["is", "page", [page.name]])
     const timeOnPage = page['time_on_page'] ? durationFormatter(page['time_on_page']) : '-';
-    query.set('page', page.name)
-
     return (
       <tr className="text-sm dark:text-gray-200" key={page.name}>
         <td className="p-2">
-          <Link to={{ pathname: `/${encodeURIComponent(this.props.site.domain)}`, search: query.toString() }} className="hover:underline block truncate">{trimURL(page.name, 50)}</Link>
+          <Link
+            to={{
+              pathname: `/${encodeURIComponent(this.props.site.domain)}`,
+              search: updatedQuery({ filters })
+            }}
+            className="hover:underline block truncate"
+          >
+            {trimURL(page.name, 50)}
+          </Link>
         </td>
         {this.showConversionRate() && <td className="p-2 w-32 font-medium" align="right">{page.total_visitors}</td>}
         <td className="p-2 w-32 font-medium" align="right">{numberFormatter(page.visitors)}</td>
diff --git a/assets/js/dashboard/stats/modals/prop-filter-modal.js b/assets/js/dashboard/stats/modals/prop-filter-modal.js
deleted file mode 100644
index 9014420a79e3..000000000000
--- a/assets/js/dashboard/stats/modals/prop-filter-modal.js
+++ /dev/null
@@ -1,205 +0,0 @@
-import React, { useEffect, useState, useMemo } from 'react'
-import { withRouter } from "react-router-dom";
-
-import { FILTER_OPERATIONS } from "../../util/filters";
-import { parseQuery } from '../../query'
-import { siteBasePath } from '../../util/url'
-import { toFilterQuery, parseQueryPropsFilter } from '../../util/filters';
-import { shouldIgnoreKeypress } from '../../keybinding';
-import PropFilterRow from './prop-filter-row';
-
-function getFormState(query) {
-  if (query.filters['props']) {
-    const values = Object.fromEntries(parseQueryPropsFilter(query, 'props').map((value, index) => [index, value]))
-
-    return {
-      entries: Object.keys(values).sort(),
-      values
-    }
-  } else {
-    return {
-      entries: [0],
-      values: {
-        0: {
-          propKey: null,
-          type: FILTER_OPERATIONS.is,
-          clauses: []
-        }
-      }
-    }
-  }
-}
-
-function PropFilterModal(props) {
-  const query = parseQuery(props.location.search, props.site)
-  const [formState, setFormState] = useState(getFormState(query))
-
-  const selectedPropKeys = useMemo(() => Object.values(formState.values).map((value) => value.propKey), [formState])
-
-  function onPropKeySelect(id, selectedOptions) {
-    const newPropKey = selectedOptions.length === 0 ? null : selectedOptions[0]
-    setFormState(prevState => ({
-      ...prevState,
-      values: {
-        ...prevState.values,
-        [id]: {
-          ...prevState.values[id],
-          propKey: newPropKey,
-          clauses: []
-        }
-      }
-    }))
-  }
-
-  function onPropValueSelect(id, selection) {
-    setFormState(prevState => ({
-      ...prevState,
-      values: {
-        ...prevState.values,
-        [id]: {
-          ...prevState.values[id],
-          clauses: selection
-        }
-      }
-    }))
-  }
-
-  function onFilterTypeSelect(id, newType) {
-    setFormState(prevState => ({
-      ...prevState,
-      values: {
-        ...prevState.values,
-        [id]: {
-          ...prevState.values[id],
-          type: newType
-        }
-      }
-    }))
-  }
-
-  function onPropAdd() {
-    setFormState(prevState => {
-      const id = prevState.entries[prevState.entries.length - 1] + 1
-      return {
-        entries: prevState.entries.concat([id]),
-        values: {
-          ...prevState.values,
-          [id]: {
-            propKey: null,
-            type: FILTER_OPERATIONS.is,
-            clauses: []
-          }
-        }
-      }
-    })
-  }
-
-  function onPropDelete(id) {
-    setFormState(prevState => {
-      const entries = prevState.entries.filter((entry) => entry != id)
-      const values = {...prevState.values}
-      delete values[id]
-
-      return { entries, values }
-    })
-  }
-
-  function isDisabled() {
-    return formState.entries.some((id) => !formState.values[id].propKey || formState.values[id].clauses.length == 0)
-  }
-
-  function shouldShowClear() {
-    return !!query.filters['props']
-  }
-
-  function handleSubmit() {
-    const formFilters = Object.fromEntries(
-      Object.entries(formState.values)
-        .map(([_, {propKey, type, clauses}]) => [propKey.value, toFilterQuery(type, clauses)])
-    )
-    selectFiltersAndCloseModal(JSON.stringify(formFilters))
-  }
-
-  function selectFiltersAndCloseModal(filterString) {
-    const queryString = new URLSearchParams(window.location.search)
-
-    if (filterString) {
-      queryString.set('props', filterString)
-    } else {
-      queryString.delete('props')
-    }
-
-    props.history.replace({ pathname: siteBasePath(props.site), search: queryString.toString() })
-  }
-
-  const handleKeydown = (e) => {
-    if (shouldIgnoreKeypress(e)) return
-
-    if (e.target.tagName === 'BODY' && e.key === 'Enter') {
-      handleSubmit()
-    }
-  }
-
-  useEffect(() => {
-    document.addEventListener('keydown', handleKeydown)
-    return () => {
-      document.removeEventListener('keydown', handleKeydown)
-    }
-  }, [handleSubmit])
-
-  return (
-    <>
-      <h1 className="text-xl font-bold dark:text-gray-100">Filter by Property</h1>
-
-      <div className="mt-4 border-b border-gray-300"></div>
-      <main className="modal__content">
-        <form className="flex flex-col" onSubmit={handleSubmit}>
-          {formState.entries.map((id) => (
-              <PropFilterRow
-                key={id}
-                id={id}
-                site={props.site}
-                query={query}
-                {...formState.values[id]}
-                showDelete={formState.entries.length > 1}
-                selectedPropKeys={selectedPropKeys}
-                onPropKeySelect={onPropKeySelect}
-                onPropValueSelect={onPropValueSelect}
-                onFilterTypeSelect={onFilterTypeSelect}
-                onPropDelete={onPropDelete}
-              />
-          ))}
-
-          <div className="mt-6">
-            <a className="underline text-indigo-500 text-sm cursor-pointer" onClick={onPropAdd}>
-              + Add another
-            </a>
-          </div>
-
-          <div className="mt-6 flex items-center justify-start">
-            <button
-              type="submit"
-              className="button"
-              disabled={isDisabled()}
-            >
-              Apply Filter
-            </button>
-
-            {shouldShowClear() && (
-              <button
-                type="button"
-                className="ml-2 button px-4 flex bg-red-500 dark:bg-red-500 hover:bg-red-600 dark:hover:bg-red-700 items-center"
-                onClick={() => { selectFiltersAndCloseModal(null) }}
-              >
-                <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
-                Remove filter
-              </button>
-            )}
-          </div>
-        </form>
-      </main>
-    </>
-  )
-}
-
-export default withRouter(PropFilterModal)
diff --git a/assets/js/dashboard/stats/modals/prop-filter-row.js b/assets/js/dashboard/stats/modals/prop-filter-row.js
deleted file mode 100644
index fae520446097..000000000000
--- a/assets/js/dashboard/stats/modals/prop-filter-row.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from 'react'
-
-import Combobox from '../../components/combobox'
-import FilterTypeSelector from "../../components/filter-type-selector";
-import { FILTER_OPERATIONS } from "../../util/filters";
-import * as api from '../../api'
-import { apiPath } from '../../util/url'
-import { TrashIcon } from '@heroicons/react/20/solid'
-
-function PropFilterRow({
-  id,
-  query,
-  site,
-  propKey,
-  type,
-  clauses,
-  showDelete,
-  selectedPropKeys,
-  onPropKeySelect,
-  onPropValueSelect,
-  onFilterTypeSelect,
-  onPropDelete
-}) {
-  function fetchPropKeyOptions() {
-    return (input) => {
-      return api.get(apiPath(site, "/suggestions/prop_key"), query, { q: input.trim() })
-    }
-  }
-
-  function fetchPropValueOptions() {
-    return (input) => {
-      if (type === FILTER_OPERATIONS.contains) {
-        return Promise.resolve([])
-      }
-
-
-      const key = propKey?.value
-      const updatedQuery = { ...query, filters: { ...query.filters, props: { [key]: '!(none)' } } }
-      return api.get(apiPath(site, "/suggestions/prop_value"), updatedQuery, { q: input.trim() })
-    }
-  }
-
-  return (
-    <div className="grid grid-cols-12 mt-6">
-      <div className="col-span-4">
-        <Combobox
-          className="mr-2"
-          fetchOptions={fetchPropKeyOptions()}
-          singleOption
-          autoFocus
-          values={propKey ? [propKey] : []}
-          onSelect={(value) => onPropKeySelect(id, value)}
-          placeholder={'Property'}
-          disabledOptions={selectedPropKeys}
-        />
-      </div>
-      <div className="col-span-3 mx-2">
-        <FilterTypeSelector
-          isDisabled={!propKey}
-          forFilter={'prop_value'}
-          onSelect={(value) => onFilterTypeSelect(id, value)}
-          selectedType={type}
-        />
-      </div>
-      <div className="col-span-4">
-        <Combobox
-          isDisabled={!propKey}
-          fetchOptions={fetchPropValueOptions()}
-          values={clauses}
-          onSelect={(value) => onPropValueSelect(id, value)}
-          placeholder={'Value'}
-          freeChoice={type == FILTER_OPERATIONS.contains}
-        />
-      </div>
-      {showDelete && (
-        <div className="col-span-1 flex flex-col justify-center">
-          <a className="ml-2 text-red-600 h-5 w-5 cursor-pointer" onClick={() => onPropDelete(id)}>
-            <TrashIcon />
-          </a>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default PropFilterRow
diff --git a/assets/js/dashboard/stats/modals/props.js b/assets/js/dashboard/stats/modals/props.js
index 66ec9323b1ed..fd30764ae95a 100644
--- a/assets/js/dashboard/stats/modals/props.js
+++ b/assets/js/dashboard/stats/modals/props.js
@@ -8,7 +8,7 @@ import * as url from "../../util/url";
 import numberFormatter from '../../util/number-formatter'
 import { parseQuery } from '../../query'
 import { specialTitleWhenGoalFilter } from "../behaviours/goal-conversions";
-import { escapeFilterValue } from "../../util/filters"
+import { EVENT_PROPS_PREFIX, hasGoalFilter, replaceFilterByPrefix } from "../../util/filters"
 
 /*global BUILD_EXTRA*/
 /*global require*/
@@ -62,9 +62,8 @@ function PropsModal(props) {
   }
 
   function filterSearchLink(listItem) {
-    const searchParams = new URLSearchParams(window.location.search)
-    searchParams.set('props', JSON.stringify({ [propKey]: escapeFilterValue(listItem.name) }))
-    return searchParams.toString()
+    const filters = replaceFilterByPrefix(query, EVENT_PROPS_PREFIX, ["is", `${EVENT_PROPS_PREFIX}${propKey}`, [listItem.name]])
+    return url.updatedQuery({ filters })
   }
 
   function renderListItem(listItem, hasRevenue) {
@@ -79,8 +78,13 @@ function PropsModal(props) {
         </td>
         <td className="p-2 w-24 font-medium" align="right">{numberFormatter(listItem.visitors)}</td>
         <td className="p-2 w-24 font-medium" align="right">{numberFormatter(listItem.events)}</td>
-        {query.filters.goal && <td className="p-2 w-24 font-medium" align="right">{listItem.conversion_rate}%</td>}
-        {!query.filters.goal && <td className="p-2 w-24 font-medium" align="right">{listItem.percentage}</td>}
+        {
+          hasGoalFilter(query) ? (
+            <td className="p-2 w-24 font-medium" align="right">{listItem.conversion_rate}%</td>
+          ) : (
+            <td className="p-2 w-24 font-medium" align="right">{listItem.percentage}</td>
+          )
+        }
         {hasRevenue && <td className="p-2 w-24 font-medium" align="right"><Money formatted={listItem.total_revenue} /></td>}
         {hasRevenue && <td className="p-2 w-24 font-medium" align="right"><Money formatted={listItem.average_revenue} /></td>}
       </tr>
@@ -106,7 +110,7 @@ function PropsModal(props) {
                 <th className="p-2 w-48 md:w-56 lg:w-1/3 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400 truncate" align="left">{propKey}</th>
                 <th className="p-2 w-24 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">Visitors</th>
                 <th className="p-2 w-24 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">Events</th>
-                <th className="p-2 w-24 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">{query.filters.goal ? 'CR' : '%'}</th>
+                <th className="p-2 w-24 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">{hasGoalFilter(query) ? 'CR' : '%'}</th>
                 {hasRevenue && <th className="p-2 w-24 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">Revenue</th>}
                 {hasRevenue && <th className="p-2 w-24 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">Average</th>}
               </tr>
diff --git a/assets/js/dashboard/stats/modals/referrer-drilldown.js b/assets/js/dashboard/stats/modals/referrer-drilldown.js
index c62c27671d4d..0e42cb07a4ad 100644
--- a/assets/js/dashboard/stats/modals/referrer-drilldown.js
+++ b/assets/js/dashboard/stats/modals/referrer-drilldown.js
@@ -5,6 +5,8 @@ import Modal from './modal'
 import * as api from '../../api'
 import numberFormatter, {durationFormatter} from '../../util/number-formatter'
 import {parseQuery} from '../../query'
+import { updatedQuery } from "../../util/url";
+import { hasGoalFilter, replaceFilterByPrefix } from "../../util/filters";
 
 class ReferrerDrilldownModal extends React.Component {
   constructor(props) {
@@ -23,11 +25,11 @@ class ReferrerDrilldownModal extends React.Component {
   }
 
   showExtra() {
-    return this.state.query.period !== 'realtime' && !this.state.query.filters.goal
+    return this.state.query.period !== 'realtime' && !hasGoalFilter(this.state.query)
   }
 
   showConversionRate() {
-    return !!this.state.query.filters.goal
+    return hasGoalFilter(this.state.query)
   }
 
   label() {
@@ -69,13 +71,15 @@ class ReferrerDrilldownModal extends React.Component {
   }
 
   renderReferrerName(referrer) {
-    const query = new URLSearchParams(window.location.search)
-    query.set('referrer', referrer.name)
-
+    const filters = replaceFilterByPrefix(this.state.query, "referrer", ["is", "referrer", [referrer.name]])
     return (
       <span className="flex group items-center">
         <img src={`/favicon/sources/${referrer.name}`} referrerPolicy="no-referrer" className="h-4 w-4 mr-2 inline" />
-        <Link className="block truncate hover:underline dark:text-gray-200" to={{search: query.toString(), pathname: '/' + this.props.site.domain}} title={referrer.name}>
+        <Link
+          className="block truncate hover:underline dark:text-gray-200"
+          to={{search: updatedQuery({ filters }), pathname: '/' + this.props.site.domain}}
+          title={referrer.name}
+        >
           {referrer.name}
         </Link>
         { this.renderExternalLink(referrer.name) }
diff --git a/assets/js/dashboard/stats/modals/regular-filter-modal.js b/assets/js/dashboard/stats/modals/regular-filter-modal.js
deleted file mode 100644
index 51b4786e721d..000000000000
--- a/assets/js/dashboard/stats/modals/regular-filter-modal.js
+++ /dev/null
@@ -1,212 +0,0 @@
-import React from "react";
-import { withRouter } from 'react-router-dom'
-
-import FilterTypeSelector from "../../components/filter-type-selector";
-import Combobox from '../../components/combobox'
-import { FILTER_GROUPS, parseQueryFilter, formatFilterGroup, formattedFilters, toFilterQuery, FILTER_OPERATIONS } from '../../util/filters'
-import { parseQuery } from '../../query'
-import * as api from '../../api'
-import { apiPath, siteBasePath } from '../../util/url'
-import { shouldIgnoreKeypress } from '../../keybinding'
-import { isFreeChoiceFilter } from "../../util/filters";
-
-function getFormState(filterGroup, query) {
-  return FILTER_GROUPS[filterGroup].reduce((result, filter) => {
-    const {type, clauses} = parseQueryFilter(query, filter)
-
-    return Object.assign(result, { [filter]: { type, clauses } })
-  }, {})
-}
-
-function withIndefiniteArticle(word) {
-  if (word.startsWith('UTM')) {
-    return `a ${word}`
-  } if (['a', 'e', 'i', 'o', 'u'].some((vowel) => word.toLowerCase().startsWith(vowel))) {
-    return `an ${word}`
-  }
-  return `a ${word}`
-}
-
-class RegularFilterModal extends React.Component {
-  constructor(props) {
-    super(props)
-    const query = parseQuery(props.location.search, props.site)
-    const formState = getFormState(props.filterGroup, query)
-
-    this.handleKeydown = this.handleKeydown.bind(this)
-    this.state = { query, formState }
-  }
-
-  componentDidMount() {
-    document.addEventListener("keydown", this.handleKeydown)
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener("keydown", this.handleKeydown);
-  }
-
-  handleKeydown(e) {
-    if (shouldIgnoreKeypress(e)) return
-
-    if (e.target.tagName === 'BODY' && e.key === 'Enter') {
-      this.handleSubmit()
-    }
-  }
-
-  handleSubmit() {
-    const { formState } = this.state;
-
-    const filters = Object.entries(formState).reduce((res, [filterKey, { type, clauses }]) => {
-      if (clauses.length === 0) {
-        res.push({filter: filterKey, value: null})
-        return res
-      }
-      if (filterKey === 'country') { res.push({ filter: 'country_labels', value: clauses.map(clause => clause.label).join('|') }) }
-      if (filterKey === 'region') { res.push({ filter: 'region_labels', value: clauses.map(clause => clause.label).join('|') }) }
-      if (filterKey === 'city') { res.push({ filter: 'city_labels', value: clauses.map(clause => clause.label).join('|') }) }
-
-      res.push({ filter: filterKey, value: toFilterQuery(type, clauses) })
-      return res
-    }, [])
-
-    this.selectFiltersAndCloseModal(filters)
-  }
-
-  onComboboxSelect(filterName) {
-    return (selection) => {
-      this.setState(prevState => ({
-        formState: Object.assign(prevState.formState, {
-          [filterName]: Object.assign(prevState.formState[filterName], { clauses: selection })
-        })
-      }))
-    }
-  }
-
-  onFilterTypeSelect(filterName) {
-    return (newType) => {
-      this.setState(prevState => ({
-        formState: Object.assign(prevState.formState, {
-          [filterName]: Object.assign(prevState.formState[filterName], { type: newType })
-        })
-      }))
-    }
-  }
-
-  fetchOptions(filter) {
-    return (input) => {
-      const { query, formState } = this.state
-      if (formState[filter].type === FILTER_OPERATIONS.contains) {return Promise.resolve([])}
-
-      const formFilters = Object.fromEntries(
-        Object.entries(formState)
-          .filter(([_filter, {_type, clauses}]) => clauses.length > 0)
-          .map(([filter, {type, clauses}]) => [filter, toFilterQuery(type, clauses)])
-      )
-      const updatedQuery = this.queryForSuggestions(query, formFilters, filter)
-      return api.get(apiPath(this.props.site, `/suggestions/${filter}`), updatedQuery, { q: input.trim() })
-    }
-  }
-
-  queryForSuggestions(query, formFilters, filter) {
-    return { ...query, filters: { ...query.filters, ...formFilters, [filter]: this.negate(formFilters[filter]) } }
-  }
-
-  negate(filterVal) {
-    if (!filterVal) {
-      return filterVal
-    } else if (filterVal.startsWith('!')) {
-      return filterVal
-    } else if (filterVal.startsWith('~')) {
-      return null
-    } else {
-      return '!' + filterVal
-    }
-  }
-
-  selectedFilterType(filter) {
-    return this.state.formState[filter].type
-  }
-
-  isDisabled() {
-    return Object.entries(this.state.formState).every(([_key, { clauses }]) => clauses.length === 0)
-  }
-
-  selectFiltersAndCloseModal(filters) {
-    const queryString = new URLSearchParams(window.location.search)
-
-    filters.forEach((entry) => {
-      if (entry.value) {
-        queryString.set(entry.filter, entry.value)
-      } else {
-        queryString.delete(entry.filter)
-      }
-    })
-
-    this.props.history.replace({ pathname: siteBasePath(this.props.site), search: queryString.toString() })
-  }
-
-  renderFilterInputs() {
-    const filtersInGroup = FILTER_GROUPS[this.props.filterGroup]
-
-    return filtersInGroup.map((filter) => {
-      return (
-        <div className="mt-4" key={filter}>
-          <div className="text-sm font-medium text-gray-700 dark:text-gray-300">{formattedFilters[filter]}</div>
-          <div className="grid grid-cols-11 mt-1">
-            <div className="col-span-3 mr-2">
-              <FilterTypeSelector forFilter={filter} onSelect={this.onFilterTypeSelect(filter)} selectedType={this.selectedFilterType(filter)}/>
-            </div>
-            <div className="col-span-8">
-              <Combobox fetchOptions={this.fetchOptions(filter)} freeChoice={isFreeChoiceFilter(filter)} values={this.state.formState[filter].clauses} onSelect={this.onComboboxSelect(filter)} placeholder={`Select ${withIndefiniteArticle(formattedFilters[filter])}`}/>
-            </div>
-          </div>
-        </div>
-      )
-    })
-  }
-
-  render() {
-    const { filterGroup } = this.props
-    const { query } = this.state
-    const showClear = FILTER_GROUPS[filterGroup].some((filterName) => query.filters[filterName])
-
-    return (
-      <>
-        <h1 className="text-xl font-bold dark:text-gray-100">Filter by {formatFilterGroup(filterGroup)}</h1>
-
-        <div className="mt-4 border-b border-gray-300"></div>
-        <main className="modal__content">
-          <form className="flex flex-col" onSubmit={this.handleSubmit.bind(this)}>
-            {this.renderFilterInputs()}
-
-            <div className="mt-6 flex items-center justify-start">
-              <button
-                type="submit"
-                className="button"
-                disabled={this.isDisabled()}
-              >
-                Apply Filter
-              </button>
-
-              {showClear && (
-                <button
-                  type="button"
-                  className="ml-2 button px-4 flex bg-red-500 dark:bg-red-500 hover:bg-red-600 dark:hover:bg-red-700 items-center"
-                  onClick={() => {
-                    const updatedFilters = FILTER_GROUPS[filterGroup].map((filterName) => ({ filter: filterName, value: null }))
-                    this.selectFiltersAndCloseModal(updatedFilters)
-                  }}
-                >
-                  <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
-                  Remove filter{FILTER_GROUPS[filterGroup].length > 1 ? 's' : ''}
-                </button>
-              )}
-            </div>
-          </form>
-        </main>
-      </>
-    )
-  }
-}
-
-export default withRouter(RegularFilterModal)
diff --git a/assets/js/dashboard/stats/modals/sources.js b/assets/js/dashboard/stats/modals/sources.js
index aa2273ef1db0..1d969f95a9b4 100644
--- a/assets/js/dashboard/stats/modals/sources.js
+++ b/assets/js/dashboard/stats/modals/sources.js
@@ -5,6 +5,8 @@ import Modal from './modal'
 import * as api from '../../api'
 import numberFormatter, { durationFormatter } from '../../util/number-formatter'
 import { parseQuery } from '../../query'
+import { updatedQuery } from "../../util/url";
+import { hasGoalFilter } from "../../util/filters";
 
 const TITLES = {
   sources: 'Top Sources',
@@ -52,11 +54,11 @@ class SourcesModal extends React.Component {
   }
 
   showExtra() {
-    return this.state.query.period !== 'realtime' && !this.state.query.filters.goal
+    return this.state.query.period !== 'realtime' && !hasGoalFilter(this.state.query)
   }
 
   showConversionRate() {
-    return !!this.state.query.filters.goal
+    return hasGoalFilter(this.state.query)
   }
 
   loadMore() {
@@ -91,20 +93,20 @@ class SourcesModal extends React.Component {
   }
 
   renderSource(source) {
-    const query = new URLSearchParams(window.location.search)
+    const searchParams = {}
     const filter = this.currentFilter()
-    if (filter === 'sources') query.set('source', source.name)
-    if (filter === 'utm_mediums') query.set('utm_medium', source.name)
-    if (filter === 'utm_sources') query.set('utm_source', source.name)
-    if (filter === 'utm_campaigns') query.set('utm_campaign', source.name)
-    if (filter === 'utm_contents') query.set('utm_content', source.name)
-    if (filter === 'utm_terms') query.set('utm_term', source.name)
+    if (filter === 'sources') searchParams['source'] = source.name
+    if (filter === 'utm_mediums') searchParams['utm_medium'] = source.name
+    if (filter === 'utm_sources') searchParams['utm_source'] = source.name
+    if (filter === 'utm_campaigns') searchParams['utm_campaign'] = source.name
+    if (filter === 'utm_contents') searchParams['utm_content'] = source.name
+    if (filter === 'utm_terms') searchParams['utm_term'] = source.name
 
     return (
       <tr className="text-sm dark:text-gray-200" key={source.name}>
         <td className="p-2">
           {this.icon(source)}
-          <Link className="hover:underline" to={{ search: query.toString(), pathname: '/' + encodeURIComponent(this.props.site.domain) }}>{source.name}</Link>
+          <Link className="hover:underline" to={{ search: updatedQuery(searchParams), pathname: '/' + encodeURIComponent(this.props.site.domain) }}>{source.name}</Link>
         </td>
         {this.showConversionRate() && <td className="p-2 w-32 font-medium" align="right">{numberFormatter(source.total_visitors)}</td>}
         <td className="p-2 w-32 font-medium" align="right">{numberFormatter(source.visitors)}</td>
diff --git a/assets/js/dashboard/stats/modals/table.js b/assets/js/dashboard/stats/modals/table.js
index 0d7f157ab64d..5058185ccd0b 100644
--- a/assets/js/dashboard/stats/modals/table.js
+++ b/assets/js/dashboard/stats/modals/table.js
@@ -5,6 +5,8 @@ import Modal from './modal'
 import * as api from '../../api'
 import numberFormatter from '../../util/number-formatter'
 import {parseQuery} from '../../query'
+import { cleanLabels, hasGoalFilter, replaceFilterByPrefix } from "../../util/filters";
+import { updatedQuery } from "../../util/url";
 
 class ModalTable extends React.Component {
   constructor(props) {
@@ -21,7 +23,7 @@ class ModalTable extends React.Component {
   }
 
   showConversionRate() {
-    return !!this.state.query.filters.goal
+    return hasGoalFilter(this.state.query)
   }
 
   showPercentage() {
@@ -41,16 +43,22 @@ class ModalTable extends React.Component {
   }
 
   renderTableItem(tableItem) {
-    const query = new URLSearchParams(window.location.search)
+    const filters = replaceFilterByPrefix(this.state.query, this.props.filterKey, [
+      "is", this.props.filterKey, [tableItem.code]
+    ])
 
-    Object.entries(this.props.filter).forEach((([key, valueKey]) => {
-      query.set(key, tableItem[valueKey])
-    }))
+    const labels = cleanLabels(filters, this.state.query.labels, this.props.filterKey, { [tableItem.code]: tableItem.name })
 
     return (
       <tr className="text-sm dark:text-gray-200" key={tableItem.name}>
         <td className="p-2">
-          <Link className="hover:underline" to={{search: query.toString(), pathname: `/${encodeURIComponent(this.props.site.domain)}`}}>
+          <Link
+            className="hover:underline"
+            to={{
+              search: updatedQuery({ filters, labels }),
+              pathname: `/${encodeURIComponent(this.props.site.domain)}`
+            }}
+          >
             {this.props.renderIcon && this.props.renderIcon(tableItem)}
             {this.props.renderIcon && ' '}
             {tableItem.name}
diff --git a/assets/js/dashboard/stats/pages/index.js b/assets/js/dashboard/stats/pages/index.js
index 5e5b02a80ad8..8e730fc2d4e6 100644
--- a/assets/js/dashboard/stats/pages/index.js
+++ b/assets/js/dashboard/stats/pages/index.js
@@ -16,7 +16,10 @@ function EntryPages({ query, site }) {
   }
 
   function getFilterFor(listItem) {
-    return { entry_page: listItem['name'] }
+    return {
+      prefix: 'entry_page',
+      filter: ["is", "entry_page", [listItem['name']]]
+    }
   }
 
   return (
@@ -43,7 +46,10 @@ function ExitPages({ query, site }) {
   }
 
   function getFilterFor(listItem) {
-    return { exit_page: listItem['name'] }
+    return {
+      prefix: 'exit_page',
+      filter: ["is", "exit_page", [listItem['name']]]
+    }
   }
 
   return (
@@ -70,7 +76,10 @@ function TopPages({ query, site }) {
   }
 
   function getFilterFor(listItem) {
-    return { page: listItem['name'] }
+    return {
+      prefix: 'page',
+      filter: ["is", "page", [listItem['name']]]
+    }
   }
 
   return (
diff --git a/assets/js/dashboard/stats/reports/list.js b/assets/js/dashboard/stats/reports/list.js
index 660884305795..da509226f657 100644
--- a/assets/js/dashboard/stats/reports/list.js
+++ b/assets/js/dashboard/stats/reports/list.js
@@ -8,7 +8,8 @@ import MoreLink from '../more-link'
 import Bar from '../bar'
 import LazyLoader from '../../components/lazy-loader'
 import classNames from 'classnames'
-import { trimURL } from '../../util/url'
+import { trimURL, updatedQuery } from '../../util/url'
+import { cleanLabels, hasGoalFilter, replaceFilterByPrefix } from '../../util/filters'
 const MAX_ITEMS = 9
 const MIN_HEIGHT = 380
 const ROW_HEIGHT = 32
@@ -82,9 +83,10 @@ function ExternalLink({ item, externalLinkDest }) {
 //     least the `name` and the `label` keys. If the metric should have a different label
 //     in realtime or goal-filtered views, we'll use `realtimeLabel` and `GoalFilterLabel`.
 
-//   * `getFilterFor` - a function that takes a list item and returns the query link (with
-//      the filter) to navigate to when this list item is clicked. If a list item is not
-//      supposed to be clickable, this function should return `null` for that list item.
+//   * `getFilterFor` - a function that takes a list item and returns [prefix, filter, labels]
+//      that should be applied when the list item is clicked. All existing filters matching prefix
+//      are removed. If a list item is not supposed to be clickable, this function should
+//      return `null` for that list item.
 
 // OPTIONAL PROPS:
 
@@ -114,7 +116,7 @@ export default function ListReport(props) {
   const colMinWidth = props.colMinWidth || COL_MIN_WIDTH
 
   const isRealtime = props.query.period === 'realtime'
-  const goalFilterApplied = !!props.query.filters.goal
+  const goalFilterApplied = hasGoalFilter(props.query)
 
   const fetchData = useCallback(() => {
     if (!isRealtime) {
@@ -221,15 +223,14 @@ export default function ListReport(props) {
   }
 
   function getFilterQuery(listItem) {
-    const filter = props.getFilterFor(listItem)
-    if (!filter) { return null }
+    const prefixAndFilter = props.getFilterFor(listItem)
+    if (!prefixAndFilter) { return null }
 
-    const query = new URLSearchParams(window.location.search)
-    Object.entries(filter).forEach((([key, value]) => {
-      query.set(key, value)
-    }))
+    const {prefix, filter, labels} = prefixAndFilter
+    const newFilters = replaceFilterByPrefix(props.query, prefix, filter)
+    const newLabels = cleanLabels(newFilters, props.query.labels, filter[1], labels)
 
-    return query
+    return updatedQuery({ filters: newFilters, labels: newLabels })
   }
 
   function renderBarFor(listItem) {
diff --git a/assets/js/dashboard/stats/reports/metrics.js b/assets/js/dashboard/stats/reports/metrics.js
index fcffc6d2fda1..1103323198c7 100644
--- a/assets/js/dashboard/stats/reports/metrics.js
+++ b/assets/js/dashboard/stats/reports/metrics.js
@@ -1,3 +1,4 @@
+import { hasGoalFilter } from "../../util/filters"
 import numberFormatter from "../../util/number-formatter"
 import React from "react"
 
@@ -24,10 +25,10 @@ export const PERCENTAGE_METRIC = { name: 'percentage', label: '%' }
 export const CR_METRIC = { name: 'conversion_rate', label: 'CR' }
 
 export function maybeWithCR(metrics, query) {
-  if (metrics.includes(PERCENTAGE_METRIC) && query.filters.goal) {
+  if (metrics.includes(PERCENTAGE_METRIC) && hasGoalFilter(query)) {
     return metrics.filter((m) => { return m !== PERCENTAGE_METRIC }).concat([CR_METRIC])
   }
-  else if (query.filters.goal) {
+  else if (hasGoalFilter(query)) {
     return metrics.concat(CR_METRIC)
   }
   else {
@@ -49,6 +50,6 @@ export function displayMetricValue(value, metric) {
 
 export function metricLabelFor(metric, query) {
   if (metric.realtimeLabel && query.period === 'realtime') { return metric.realtimeLabel }
-  if (metric.goalFilterLabel && query.filters.goal) { return metric.goalFilterLabel }
+  if (metric.goalFilterLabel && hasGoalFilter(query)) { return metric.goalFilterLabel }
   return metric.label
 }
diff --git a/assets/js/dashboard/stats/sources/index.js b/assets/js/dashboard/stats/sources/index.js
index 36062eaf5f16..d94a1cf163e8 100644
--- a/assets/js/dashboard/stats/sources/index.js
+++ b/assets/js/dashboard/stats/sources/index.js
@@ -2,14 +2,15 @@ import React from 'react';
 import SearchTerms from './search-terms'
 import SourceList from './source-list'
 import ReferrerList from './referrer-list'
-import { isFilteringOnFixedValue } from '../../util/filters'
+import { getFiltersByKeyPrefix, isFilteringOnFixedValue } from '../../util/filters'
 
 
 export default function Sources(props) {
-  if (props.query.filters.source === 'Google') {
+  if (isFilteringOnFixedValue(props.query, 'source', 'Google')) {
     return <SearchTerms {...props} />
   } else if (isFilteringOnFixedValue(props.query, 'source')) {
-    return <ReferrerList {...props} />
+    const [[_operation, _filterKey, clauses]] = getFiltersByKeyPrefix(props.query, "source")
+    return <ReferrerList {...props} source={clauses[0]} />
   } else  {
     return <SourceList {...props} />
   }
diff --git a/assets/js/dashboard/stats/sources/referrer-list.js b/assets/js/dashboard/stats/sources/referrer-list.js
index 75d1c2ca0b00..62800335b456 100644
--- a/assets/js/dashboard/stats/sources/referrer-list.js
+++ b/assets/js/dashboard/stats/sources/referrer-list.js
@@ -4,9 +4,9 @@ import * as url from '../../util/url'
 import { VISITORS_METRIC, maybeWithCR } from '../reports/metrics'
 import ListReport from '../reports/list'
 
-export default function Referrers({site, query}) {
+export default function Referrers({source, site, query}) {
   function fetchReferrers() {
-    return api.get(url.apiPath(site, `/referrers/${encodeURIComponent(query.filters.source)}`), query, {limit: 9})
+    return api.get(url.apiPath(site, `/referrers/${encodeURIComponent(source)}`), query, {limit: 9})
   }
 
   function externalLinkDest(referrer) {
@@ -16,7 +16,11 @@ export default function Referrers({site, query}) {
 
   function getFilterFor(referrer) {
     if (referrer.name === 'Direct / None') { return null }
-    return { referrer: referrer.name }
+
+    return {
+      prefix: 'referrer',
+      filter: ["is", "referrer", [referrer.name]]
+    }
   }
 
   function renderIcon(listItem) {
@@ -37,7 +41,7 @@ export default function Referrers({site, query}) {
         getFilterFor={getFilterFor}
         keyLabel="Referrer"
         metrics={maybeWithCR([VISITORS_METRIC], query)}
-        detailsLink={url.sitePath(site, `/referrers/${encodeURIComponent(query.filters.source)}`)}
+        detailsLink={url.sitePath(site, `/referrers/${encodeURIComponent(source)}`)}
         query={query}
         externalLinkDest={externalLinkDest}
         renderIcon={renderIcon}
diff --git a/assets/js/dashboard/stats/sources/source-list.js b/assets/js/dashboard/stats/sources/source-list.js
index 8b9ba0f4ab1c..c9bd1a7f8e6d 100644
--- a/assets/js/dashboard/stats/sources/source-list.js
+++ b/assets/js/dashboard/stats/sources/source-list.js
@@ -7,7 +7,6 @@ import ListReport from '../reports/list'
 import { VISITORS_METRIC, maybeWithCR } from '../reports/metrics';
 import { Menu, Transition } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
-import { escapeFilterValue } from '../../util/filters'
 import classNames from 'classnames'
 
 const UTM_TAGS = {
@@ -26,7 +25,10 @@ function AllSources(props) {
   }
 
   function getFilterFor(listItem) {
-    return { source: escapeFilterValue(listItem['name']) }
+    return {
+      prefix: 'source',
+      filter: ["is", "source", [listItem['name']]]
+    }
   }
 
   function renderIcon(listItem) {
@@ -61,7 +63,10 @@ function UTMSources(props) {
   }
 
   function getFilterFor(listItem) {
-    return { [props.tab]: escapeFilterValue(listItem['name']) }
+    return {
+      prefix: props.tab,
+      filter: ["is", props.tab, [listItem['name']]]
+    }
   }
 
   return (
diff --git a/assets/js/dashboard/util/filters.js b/assets/js/dashboard/util/filters.js
index 3f97beb2e0b7..27367e260da6 100644
--- a/assets/js/dashboard/util/filters.js
+++ b/assets/js/dashboard/util/filters.js
@@ -1,4 +1,6 @@
-export const FILTER_GROUPS = {
+import * as api from '../api'
+
+export const FILTER_MODAL_TO_FILTER_GROUP = {
   'page': ['page', 'entry_page', 'exit_page'],
   'source': ['source', 'referrer'],
   'location': ['country', 'region', 'city'],
@@ -7,14 +9,21 @@ export const FILTER_GROUPS = {
   'os': ['os', 'os_version'],
   'utm': ['utm_medium', 'utm_source', 'utm_campaign', 'utm_term', 'utm_content'],
   'goal': ['goal'],
-  'props': ['prop_key', 'prop_value'],
+  'props': ['props'],
   'hostname': ['hostname']
 }
 
-export const NO_CONTAINS_OPERATOR = new Set(['goal', 'screen'].concat(FILTER_GROUPS['location']))
+export const FILTER_GROUP_TO_MODAL_TYPE = Object.fromEntries(
+  Object.entries(FILTER_MODAL_TO_FILTER_GROUP)
+    .flatMap(([modalName, filterGroups]) => filterGroups.map((filterGroup) => [filterGroup, modalName]))
+)
+
+export const NO_CONTAINS_OPERATOR = new Set(['goal', 'screen'].concat(FILTER_MODAL_TO_FILTER_GROUP['location']))
+
+export const EVENT_PROPS_PREFIX = "props:"
 
 export const FILTER_OPERATIONS = {
-  isNot: 'is not',
+  isNot: 'is_not',
   contains: 'contains',
   is: 'is'
 };
@@ -44,66 +53,57 @@ try {
 
 const ESCAPED_PIPE = '\\|'
 
-export function escapeFilterValue(value) {
+function escapeFilterValue(value) {
   return value.replaceAll(NON_ESCAPED_PIPE_REGEX, ESCAPED_PIPE)
 }
 
-export function toFilterQuery(type, clauses) {
+function toFilterQuery(type, clauses) {
   const prefix = OPERATION_PREFIX[type];
-  const result = clauses.map(clause => escapeFilterValue(clause.value.trim())).join('|')
+  const result = clauses.map(clause => escapeFilterValue(clause.toString().trim())).join('|')
   return prefix + result;
 }
 
-export function parsePrefix(rawValue) {
-  const type = Object.keys(OPERATION_PREFIX)
-    .find(type => OPERATION_PREFIX[type] === rawValue[0]) || FILTER_OPERATIONS.is;
 
-  const value = type === FILTER_OPERATIONS.is ? rawValue : rawValue.substring(1)
-
-  const values = value
-    .split(NON_ESCAPED_PIPE_REGEX)
-    .filter((clause) => !!clause)
-    .map((val) => val.replaceAll(ESCAPED_PIPE, '|'))
-
-  return { type, values }
+export function getLabel(labels, filterKey, value) {
+  if (['country', 'region', 'city'].includes(filterKey)) {
+    return labels[value]
+  } else {
+    return value
+  }
 }
 
-export function parseQueryPropsFilter(query) {
-  return Object.entries(query.filters['props']).map(([key, propVal]) => {
-    const { type, values } = parsePrefix(propVal)
-    const clauses = values.map(val => { return { value: val, label: val } })
-    return { propKey: { label: key, value: key }, type, clauses }
-  })
+export function getPropertyKeyFromFilterKey(filterKey) {
+  return filterKey.slice(EVENT_PROPS_PREFIX.length)
 }
 
-export function parseQueryFilter(query, filter) {
-  const { type, values } = parsePrefix(query.filters[filter] || '')
-
-  let labels = values
+export function getFiltersByKeyPrefix(query, prefix) {
+  return query.filters.filter(([_operation, filterKey, _clauses]) => filterKey.startsWith(prefix))
+}
 
-  if (filter === 'country' && values.length > 0) {
-    const rawLabel = (new URLSearchParams(window.location.search)).get('country_labels') || ''
-    labels = rawLabel.split('|').filter(label => !!label)
-  }
+function omitFiltersByKeyPrefix(query, prefix) {
+  return query.filters.filter(([_operation, filterKey, _clauses]) => !filterKey.startsWith(prefix))
+}
 
-  if (filter === 'region' && values.length > 0) {
-    const rawLabel = (new URLSearchParams(window.location.search)).get('region_labels') || ''
-    labels = rawLabel.split('|').filter(label => !!label)
-  }
+export function replaceFilterByPrefix(query, prefix, filter) {
+  return omitFiltersByKeyPrefix(query, prefix).concat([filter])
+}
 
-  if (filter === 'city' && values.length > 0) {
-    const rawLabel = (new URLSearchParams(window.location.search)).get('city_labels') || ''
-    labels = rawLabel.split('|').filter(label => !!label)
+export function isFilteringOnFixedValue(query, filterKey, expectedValue) {
+  const filters = query.filters.filter(([_operation, key]) => filterKey == key)
+  if (filters.length == 1) {
+    const [operation, _filterKey, clauses] = filters[0]
+    return operation === FILTER_OPERATIONS.is && clauses.length === 1 && (!expectedValue || clauses[0] == expectedValue)
   }
+  return false
+}
 
-  const clauses = values.map((value, index) => { return { value, label: labels[index] } })
-
-  return { type, clauses }
+export function hasGoalFilter(query) {
+  return getFiltersByKeyPrefix(query, "goal").length > 0
 }
 
-export function isFilteringOnFixedValue(query, filter) {
-  const { type, clauses } = parseQueryFilter(query, filter)
-  return type == FILTER_OPERATIONS.is && clauses.length == 1
+// Note: Currently only a single goal filter can be applied at a time.
+export function getGoalFilter(query) {
+  return getFiltersByKeyPrefix(query, "goal")[0] || null
 }
 
 export function formatFilterGroup(filterGroup) {
@@ -118,20 +118,62 @@ export function formatFilterGroup(filterGroup) {
   }
 }
 
-export function filterGroupForFilter(filter) {
-  const map = Object.entries(FILTER_GROUPS).reduce((filterToGroupMap, [group, filtersInGroup]) => {
-    const filtersToAdd = {}
-    filtersInGroup.forEach((filterInGroup) => {
-      filtersToAdd[filterInGroup] = group
-    })
+export function cleanLabels(filters, labels, mergedFilterKey, mergedLabels) {
+  const filteredBy = Object.fromEntries(
+    filters
+    .flatMap(([_operation, filterKey, clauses]) => ['country', 'region', 'city'].includes(filterKey) ? clauses : [])
+    .map((value) => [value, true])
+  )
+  let result = { ...labels }
+  for (const value in labels) {
+    if (!filteredBy[value]) {
+      delete result[value]
+    }
+  }
+
+  if (mergedFilterKey && ['country', 'region', 'city'].includes(mergedFilterKey)) {
+    result = {
+      ...result,
+      ...mergedLabels
+    }
+  }
+
+  return result
+}
+
 
-    return { ...filterToGroupMap, ...filtersToAdd }
-  }, {})
+// :TODO: New schema for filters in the BE
+export function serializeApiFilters(filters) {
+  const cleaned = {}
+  filters.forEach(([operation, filterKey, clauses]) => {
+    if (filterKey.startsWith(EVENT_PROPS_PREFIX)) {
+      cleaned.props ||= {}
+      cleaned.props[getPropertyKeyFromFilterKey(filterKey)] = toFilterQuery(operation, clauses)
+    } else {
+      cleaned[filterKey] = toFilterQuery(operation, clauses)
+    }
+  })
+  return JSON.stringify(cleaned)
+}
 
+export function fetchSuggestions(apiPath, query, input, additionalFilter) {
+  const updatedQuery = queryForSuggestions(query, additionalFilter)
+  return api.get(apiPath, updatedQuery, { q: input.trim() })
+}
 
-  return map[filter] || filter
+function queryForSuggestions(query, additionalFilter) {
+  let filters = query.filters
+  if (additionalFilter && additionalFilter[2].length > 0) {
+    filters = filters.concat([additionalFilter])
+  }
+  return { ...query, filters }
+}
+
+export function getFilterGroup([_operation, filterKey, _clauses]) {
+  return filterKey.startsWith(EVENT_PROPS_PREFIX) ? 'props' : filterKey
 }
 
+
 export const formattedFilters = {
   'goal': 'Goal',
   'props': 'Property',
@@ -157,3 +199,24 @@ export const formattedFilters = {
   'entry_page': 'Entry Page',
   'exit_page': 'Exit Page',
 }
+
+
+export function parseLegacyFilter(filterKey, rawValue) {
+  const operation = Object.keys(OPERATION_PREFIX)
+    .find(operation => OPERATION_PREFIX[operation] === rawValue[0]) || FILTER_OPERATIONS.is;
+
+  const value = operation === FILTER_OPERATIONS.is ? rawValue : rawValue.substring(1)
+
+  const clauses = value
+    .split(NON_ESCAPED_PIPE_REGEX)
+    .filter((clause) => !!clause)
+    .map((val) => val.replaceAll(ESCAPED_PIPE, '|'))
+
+  return [operation, filterKey, clauses]
+}
+
+export function parseLegacyPropsFilter(rawValue) {
+  return Object.entries(JSON.parse(rawValue)).map(([key, propVal]) => {
+    return parseLegacyFilter(`${EVENT_PROPS_PREFIX}${key}`, propVal)
+  })
+}
diff --git a/assets/js/dashboard/util/url.js b/assets/js/dashboard/util/url.js
index 1275cbfac751..e9349e0d343d 100644
--- a/assets/js/dashboard/util/url.js
+++ b/assets/js/dashboard/util/url.js
@@ -1,3 +1,5 @@
+import JsonURL from '@jsonurl/jsonurl'
+
 export function apiPath(site, path = '') {
   return `/api/stats/${encodeURIComponent(site.domain)}${path}`
 }
@@ -11,9 +13,14 @@ export function sitePath(site, path = '') {
 }
 
 export function setQuery(key, value) {
-  const query = new URLSearchParams(window.location.search)
-  query.set(key, value)
-  return `${window.location.pathname}?${query.toString()}`
+  return `${window.location.pathname}?${updatedQuery({ [key]: value })}`
+}
+
+export function updatedQuery(values) {
+  const queryString = new PlausibleSearchParams(window.location.search)
+  Object.entries(values).forEach(([key, value]) => queryString.set(key, value))
+
+  return queryString.toString()
 }
 
 export function externalLinkForPage(domain, page) {
@@ -76,3 +83,38 @@ export function trimURL(url, maxLength) {
     return leftSide + ellipsis + rightSide;
   }
 }
+
+export class PlausibleSearchParams extends URLSearchParams {
+  set(key, value) {
+    if (typeof value === 'object') {
+      value = JsonURL.stringify(value)
+      if (value.length > 2) {
+        super.set(key, value)
+      } else {
+        // Empty arrays/objects are handled by defaults
+        super.delete(key)
+      }
+    } else if (value === false) {
+      super.delete(key)
+    } else {
+      super.set(key, value)
+    }
+  }
+
+  escape(value) {
+    // Less strict encoding - allow components which browsers don't require encoded and make jsonurl
+    // more readable
+    return encodeURIComponent(value)
+      .replaceAll("%2C", ",")
+      .replaceAll("%3A", ":")
+      .replaceAll("%2F", "/")
+  }
+
+  toString() {
+    const entries = Array.from(super.entries())
+    if (entries.length === 0) {
+      return ''
+    }
+    return entries.map(([key, value]) => `${this.escape(key)}=${this.escape(value)}`).join("&")
+  }
+}
diff --git a/assets/package-lock.json b/assets/package-lock.json
index 9a1257a58621..2aa936fd884d 100644
--- a/assets/package-lock.json
+++ b/assets/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "@headlessui/react": "^1.7.10",
         "@heroicons/react": "^2.0.11",
+        "@jsonurl/jsonurl": "^1.1.7",
         "@juggle/resize-observer": "^3.3.1",
         "@kunukn/react-collapse": "^2.2.9",
         "@popperjs/core": "^2.11.6",
@@ -348,6 +349,11 @@
         "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
+    "node_modules/@jsonurl/jsonurl": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@jsonurl/jsonurl/-/jsonurl-1.1.7.tgz",
+      "integrity": "sha512-H3aKlfSjVoUhhNRO+2HDtVNq8UT0TV8kyAgJ29bETLdjU6Xz3s1PMzbRkfcAdwuwzHjiisabHpJoP8p+hju6bA=="
+    },
     "node_modules/@juggle/resize-observer": {
       "version": "3.3.1",
       "license": "Apache-2.0"
diff --git a/assets/package.json b/assets/package.json
index b9befaf6ca5b..99b6c97cde63 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.10",
     "@heroicons/react": "^2.0.11",
+    "@jsonurl/jsonurl": "^1.1.7",
     "@juggle/resize-observer": "^3.3.1",
     "@kunukn/react-collapse": "^2.2.9",
     "@popperjs/core": "^2.11.6",