From 5fffacc2613aef745482beae759c125130a651de Mon Sep 17 00:00:00 2001
From: Artur Pata <artur.pata@gmail.com>
Date: Thu, 11 Jul 2024 13:09:26 +0300
Subject: [PATCH] Remove query and site props passing from everywhere except
 class components

---
 assets/js/dashboard/comparison-input.js       |   6 +-
 assets/js/dashboard/components/notice.js      |   4 +-
 assets/js/dashboard/datepicker.js             |  25 +--
 assets/js/dashboard/extra/funnel.js           |  34 ++--
 assets/js/dashboard/filters.js                |  19 +-
 assets/js/dashboard/query.js                  |  15 +-
 assets/js/dashboard/realtime.js               |   9 +-
 .../dashboard/stats/behaviours/conversions.js |  22 ++-
 .../stats/behaviours/goal-conversions.js      |  20 +-
 assets/js/dashboard/stats/behaviours/index.js |  13 +-
 assets/js/dashboard/stats/behaviours/props.js |  35 ++--
 assets/js/dashboard/stats/devices/index.js    |  51 ++---
 .../dashboard/stats/graph/interval-picker.js  |  14 +-
 .../js/dashboard/stats/graph/stats-export.js  |  12 +-
 assets/js/dashboard/stats/graph/top-stats.js  |  49 ++---
 .../js/dashboard/stats/graph/visitor-graph.js |  27 ++-
 .../stats/graph/with-imported-switch.js       |  16 +-
 .../imported-query-unsupported-warning.js     |   4 +-
 assets/js/dashboard/stats/locations/index.js  |  15 +-
 .../dashboard/stats/modals/breakdown-modal.js |   7 +-
 .../stats/modals/filter-modal-group.js        |   6 -
 .../stats/modals/filter-modal-props-row.js    |   8 +-
 .../stats/modals/filter-modal-row.js          |   6 +-
 .../js/dashboard/stats/modals/filter-modal.js |  18 +-
 assets/js/dashboard/stats/pages/index.js      |  35 ++--
 assets/js/dashboard/stats/reports/list.js     | 185 ++++++++----------
 assets/js/dashboard/stats/sources/index.js    |  13 +-
 .../dashboard/stats/sources/referrer-list.js  |  23 ++-
 .../js/dashboard/stats/sources/source-list.js |  57 +++---
 assets/js/dashboard/util/filters.js           |  13 ++
 30 files changed, 394 insertions(+), 367 deletions(-)

diff --git a/assets/js/dashboard/comparison-input.js b/assets/js/dashboard/comparison-input.js
index 13fa1cfd6c0a4..36861d6c5d7ad 100644
--- a/assets/js/dashboard/comparison-input.js
+++ b/assets/js/dashboard/comparison-input.js
@@ -86,7 +86,9 @@ function ComparisonModeOption({ label, value, isCurrentlySelected, updateMode, s
   )
 }
 
-function MatchDayOfWeekInput({ history, query, site }) {
+function MatchDayOfWeekInput({ history }) {
+  const site = useSiteContext()
+  const { query } = useQueryContext()
   const click = (matchDayOfWeek) => {
     storage.setItem(`comparison_match_day_of_week__${site.domain}`, matchDayOfWeek.toString())
     navigateToQuery(history, query, { match_day_of_week: matchDayOfWeek.toString() })
@@ -184,7 +186,7 @@ const ComparisonInput = function ({ history }) {
                 {Object.keys(COMPARISON_MODES).map((key) => ComparisonModeOption({ label: COMPARISON_MODES[key], value: key, isCurrentlySelected: key == query.comparison, updateMode, setUiMode }))}
                 {query.comparison !== "custom" && <span>
                   <hr className="my-1" />
-                  <MatchDayOfWeekInput query={query} history={history} site={site} />
+                  <MatchDayOfWeekInput history={history} />
                 </span>}
               </Menu.Items>
             </Transition>
diff --git a/assets/js/dashboard/components/notice.js b/assets/js/dashboard/components/notice.js
index 656c7abbea7ff..1f129224269fb 100644
--- a/assets/js/dashboard/components/notice.js
+++ b/assets/js/dashboard/components/notice.js
@@ -1,8 +1,10 @@
 import React from "react"
 import { sectionTitles } from "../stats/behaviours"
 import * as api from '../api'
+import { useSiteContext } from "../site-context"
 
-export function FeatureSetupNotice({ site, feature, title, info, callToAction, onHideAction }) {
+export function FeatureSetupNotice({ feature, title, info, callToAction, onHideAction }) {
+  const site = useSiteContext()
   const sectionTitle = sectionTitles[feature]
 
   const requestHideSection = () => {
diff --git a/assets/js/dashboard/datepicker.js b/assets/js/dashboard/datepicker.js
index 687525a85bec7..d2b05dd997e83 100644
--- a/assets/js/dashboard/datepicker.js
+++ b/assets/js/dashboard/datepicker.js
@@ -1,8 +1,8 @@
 import React, { Fragment, useState, useEffect, useCallback, useRef } from "react";
 import { withRouter } from "react-router-dom";
 import Flatpickr from "react-flatpickr";
-import { ChevronDownIcon } from '@heroicons/react/20/solid'
-import { Transition } from '@headlessui/react'
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
+import { Transition } from '@headlessui/react';
 import {
   shiftDays,
   shiftMonths,
@@ -25,9 +25,9 @@ import {
   isSameDate
 } from "./util/date";
 import { navigateToQuery, QueryLink, QueryButton } from "./query";
-import { shouldIgnoreKeypress } from "./keybinding.js"
-import { COMPARISON_DISABLED_PERIODS, toggleComparisons, isComparisonEnabled } from "../dashboard/comparison-input.js"
-import classNames from "classnames"
+import { shouldIgnoreKeypress } from "./keybinding.js";
+import { COMPARISON_DISABLED_PERIODS, toggleComparisons, isComparisonEnabled } from "../dashboard/comparison-input.js";
+import classNames from "classnames";
 import { useQueryContext } from "./query-context.js";
 import { useSiteContext } from "./site-context.js";
 
@@ -65,7 +65,6 @@ function renderArrow(query, site, period, prevDate, nextDate) {
     <div className={containerClass}>
       <QueryButton
         to={{ date: prevDate }}
-        query={query}
         className={leftClass}
         disabled={disabledLeft}
       >
@@ -84,7 +83,6 @@ function renderArrow(query, site, period, prevDate, nextDate) {
       </QueryButton>
       <QueryButton
         to={{ date: nextDate }}
-        query={query}
         className={rightClass}
         disabled={disabledRight}
       >
@@ -105,7 +103,9 @@ function renderArrow(query, site, period, prevDate, nextDate) {
   );
 }
 
-function DatePickerArrows({ site, query }) {
+function DatePickerArrows() {
+  const { query } = useQueryContext();
+  const site = useSiteContext();
   if (query.period === "year") {
     const prevDate = formatISO(shiftMonths(query.date, -12));
     const nextDate = formatISO(shiftMonths(query.date, 12));
@@ -126,7 +126,9 @@ function DatePickerArrows({ site, query }) {
   return null
 }
 
-function DisplayPeriod({ query, site }) {
+function DisplayPeriod() {
+  const { query } = useQueryContext();
+  const site = useSiteContext();
   if (query.period === "day") {
     if (isToday(site, query.date)) {
       return "Today";
@@ -302,7 +304,6 @@ function DatePicker({ history }) {
       <QueryLink
         to={{ from: false, to: false, period, ...opts }}
         onClick={() => setOpen(false)}
-        query={query}
         className={`${boldClass} px-4 py-2 text-sm leading-tight hover:bg-gray-100 hover:text-gray-900
           dark:hover:bg-gray-900 dark:hover:text-gray-100 flex items-center justify-between`}
       >
@@ -414,7 +415,7 @@ function DatePicker({ history }) {
           aria-controls="datemenu"
         >
           <span className="truncate mr-1 md:mr-2">
-            <span className="font-medium"><DisplayPeriod query={query} site={site} /></span>
+            <span className="font-medium"><DisplayPeriod /></span>
           </span>
           <ChevronDownIcon className="hidden sm:inline-block h-4 w-4 md:h-5 md:w-5 text-gray-500" />
         </div>
@@ -437,7 +438,7 @@ function DatePicker({ history }) {
 
   return (
     <div className="flex ml-auto pl-2">
-      <DatePickerArrows site={site} query={query} />
+      <DatePickerArrows />
       {renderPicker()}
     </div>
   )
diff --git a/assets/js/dashboard/extra/funnel.js b/assets/js/dashboard/extra/funnel.js
index 2f598cdaf0ac1..d972a1da4c34f 100644
--- a/assets/js/dashboard/extra/funnel.js
+++ b/assets/js/dashboard/extra/funnel.js
@@ -1,18 +1,22 @@
-import React, { useEffect, useState, useRef } from 'react'
+import React, { useEffect, useState, useRef } from 'react';
 import FlipMove from 'react-flip-move';
-import Chart from 'chart.js/auto'
-import FunnelTooltip from './funnel-tooltip.js'
-import ChartDataLabels from 'chartjs-plugin-datalabels'
-import numberFormatter from '../util/number-formatter'
-import Bar from '../stats/bar'
+import Chart from 'chart.js/auto';
+import FunnelTooltip from './funnel-tooltip.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import numberFormatter from '../util/number-formatter';
+import Bar from '../stats/bar';
 
-import RocketIcon from '../stats/modals/rocket-icon'
+import RocketIcon from '../stats/modals/rocket-icon';
 
-import * as api from '../api'
-import LazyLoader from '../components/lazy-loader'
+import * as api from '../api';
+import LazyLoader from '../components/lazy-loader';
+import { useQueryContext } from '../query-context.js';
+import { useSiteContext } from '../site-context.js';
 
 
-export default function Funnel(props) {
+export default function Funnel({ funnelName, tabs }) {
+  const site = useSiteContext();
+  const { query } = useQueryContext();
   const [loading, setLoading] = useState(true)
   const [visible, setVisible] = useState(false)
   const [error, setError] = useState(undefined)
@@ -42,7 +46,7 @@ export default function Funnel(props) {
         }
       }
     }
-  }, [props.query, props.funnelName, visible, isSmallScreen])
+  }, [query, funnelName, visible, isSmallScreen])
 
   useEffect(() => {
     if (canvasRef.current && funnel && visible && !isSmallScreen) {
@@ -115,7 +119,7 @@ export default function Funnel(props) {
   }
 
   const getFunnel = () => {
-    return props.site.funnels.find((funnel) => funnel.name === props.funnelName)
+    return site.funnels.find((funnel) => funnel.name === funnelName)
   }
 
   const fetchFunnel = async () => {
@@ -123,7 +127,7 @@ export default function Funnel(props) {
     if (typeof funnelMeta === 'undefined') {
       throw new Error('Could not fetch the funnel. Perhaps it was deleted?')
     } else {
-      return api.get(`/api/stats/${encodeURIComponent(props.site.domain)}/funnels/${funnelMeta.id}`, props.query)
+      return api.get(`/api/stats/${encodeURIComponent(site.domain)}/funnels/${funnelMeta.id}`, query)
     }
   }
 
@@ -256,8 +260,8 @@ export default function Funnel(props) {
   const header = () => {
     return (
       <div className="flex justify-between w-full">
-        <h4 className="mt-2 text-sm dark:text-gray-100">{props.funnelName}</h4>
-        {props.tabs}
+        <h4 className="mt-2 text-sm dark:text-gray-100">{funnelName}</h4>
+        {tabs}
       </div>
     )
   }
diff --git a/assets/js/dashboard/filters.js b/assets/js/dashboard/filters.js
index a111ce10888c7..cca858b70444c 100644
--- a/assets/js/dashboard/filters.js
+++ b/assets/js/dashboard/filters.js
@@ -1,10 +1,10 @@
 import React, { Fragment, useEffect, useState } from 'react';
-import { Link, withRouter } from 'react-router-dom'
-import { AdjustmentsVerticalIcon, MagnifyingGlassIcon, XMarkIcon, PencilSquareIcon } from '@heroicons/react/20/solid'
-import classNames from 'classnames'
-import { Menu, Transition } from '@headlessui/react'
+import { Link, withRouter } from 'react-router-dom';
+import { AdjustmentsVerticalIcon, MagnifyingGlassIcon, XMarkIcon, PencilSquareIcon } from '@heroicons/react/20/solid';
+import classNames from 'classnames';
+import { Menu, Transition } from '@headlessui/react';
 
-import { navigateToQuery } from './query'
+import { navigateToQuery } from './query';
 import {
   FILTER_GROUP_TO_MODAL_TYPE,
   cleanLabels,
@@ -15,7 +15,7 @@ import {
   getPropertyKeyFromFilterKey,
   getLabel,
   FILTER_OPERATIONS_DISPLAY_NAMES
-} from "./util/filters"
+} from "./util/filters";
 import { useQueryContext } from './query-context';
 import { useSiteContext } from './site-context';
 
@@ -99,7 +99,9 @@ function filterDropdownOption(site, option) {
   )
 }
 
-function DropdownContent({ history, site, query, wrapped }) {
+function DropdownContent({ history, wrapped }) {
+  const site = useSiteContext();
+  const { query } = useQueryContext();
   const [addingFilter, setAddingFilter] = useState(false);
 
   if (wrapped === WRAPSTATE.unwrapped || addingFilter) {
@@ -126,7 +128,6 @@ function DropdownContent({ history, site, query, wrapped }) {
 
 function Filters({ history }) {
   const { query } = useQueryContext();
-  const site = useSiteContext();
 
   const [wrapped, setWrapped] = useState(WRAPSTATE.waiting)
   const [viewport, setViewport] = useState(1080)
@@ -267,7 +268,7 @@ function Filters({ history }) {
                   className="rounded-md shadow-lg  bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5
                   font-medium text-gray-800 dark:text-gray-200"
                 >
-                  <DropdownContent history={history} query={query} site={site} wrapped={wrapped} />
+                  <DropdownContent history={history} wrapped={wrapped} />
                 </div>
               </Menu.Items>
             </Transition>
diff --git a/assets/js/dashboard/query.js b/assets/js/dashboard/query.js
index 104d70592e1c1..fdc3688dce1f3 100644
--- a/assets/js/dashboard/query.js
+++ b/assets/js/dashboard/query.js
@@ -7,9 +7,10 @@ import * as storage from './util/storage'
 import { COMPARISON_DISABLED_PERIODS, getStoredComparisonMode, isComparisonEnabled, getStoredMatchDayOfWeek } from './comparison-input'
 import { getFiltersByKeyPrefix } from './util/filters'
 
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
 import { parseLegacyFilter, parseLegacyPropsFilter } from './util/filters'
+import { useQueryContext } from './query-context'
 
 dayjs.extend(utc)
 
@@ -49,7 +50,7 @@ export function parseQuery(querystring, site) {
 }
 
 export function addFilter(query, filter) {
-  return {...query, filters: [...query.filters, filter]}
+  return { ...query, filters: [...query.filters, filter] }
 }
 
 export function navigateToQuery(history, queryFrom, newData) {
@@ -145,7 +146,7 @@ export function filtersBackwardsCompatibilityRedirect() {
 export function revenueAvailable(query, site) {
   const revenueGoalsInFilter = site.revenueGoals.filter((rg) => {
     const goalFilters = getFiltersByKeyPrefix(query, "goal")
-    
+
     return goalFilters.some(([_op, _key, clauses]) => {
       return clauses.includes(rg.event_name)
     })
@@ -159,7 +160,8 @@ export function revenueAvailable(query, site) {
 }
 
 function QueryLink(props) {
-  const { query, history, to, className, children } = props
+  const { query } = useQueryContext();
+  const { history, to, className, children } = props
 
   function onClick(e) {
     e.preventDefault()
@@ -183,7 +185,8 @@ function QueryLink(props) {
 const QueryLinkWithRouter = withRouter(QueryLink)
 export { QueryLinkWithRouter as QueryLink };
 
-function QueryButton({ history, query, to, disabled, className, children, onClick }) {
+function QueryButton({ history, to, disabled, className, children, onClick }) {
+  const { query } = useQueryContext();
   return (
     <button
       className={className}
diff --git a/assets/js/dashboard/realtime.js b/assets/js/dashboard/realtime.js
index e4460594752d9..aade896ba21c3 100644
--- a/assets/js/dashboard/realtime.js
+++ b/assets/js/dashboard/realtime.js
@@ -1,5 +1,4 @@
-import React, { useMemo } from 'react';
-
+import React  from 'react';
 import Datepicker from './datepicker'
 import SiteSwitcher from './site-switcher'
 import Filters from './filters'
@@ -14,12 +13,6 @@ import { statsBoxClass } from './index';
 import { useSiteContext } from './site-context';
 import { useUserContext } from './user-context';
 import { useQueryContext } from './query-context';
-import { isRealTimeDashboard } from './util/filters';
-
-export const useIsRealtimeDashboard = () => {
-  const { query: { period } } = useQueryContext();
-  return useMemo(() => isRealTimeDashboard({ period }), [period]);
-}
 
 function Realtime({ stuck }) {
   const site = useSiteContext();
diff --git a/assets/js/dashboard/stats/behaviours/conversions.js b/assets/js/dashboard/stats/behaviours/conversions.js
index b9a344bf2ddb9..42856f8fe0e69 100644
--- a/assets/js/dashboard/stats/behaviours/conversions.js
+++ b/assets/js/dashboard/stats/behaviours/conversions.js
@@ -1,12 +1,15 @@
 import React from 'react';
-import * as api from '../../api'
-import * as url from '../../util/url'
+import * as api from '../../api';
+import * as url from '../../util/url';
 
 import * as metrics from '../reports/metrics';
 import ListReport from '../reports/list';
+import { useSiteContext } from '../../site-context';
+import { useQueryContext } from '../../query-context';
 
-export default function Conversions(props) {
-  const { site, query, afterFetchData } = props
+export default function Conversions({ afterFetchData, onGoalFilterClick }) {
+  const site = useSiteContext();
+  const { query } = useQueryContext()
 
   function fetchConversions() {
     return api.get(url.apiPath(site, '/conversions'), query, { limit: 9 })
@@ -21,11 +24,11 @@ export default function Conversions(props) {
 
   function chooseMetrics() {
     return [
-      metrics.createVisitors({ renderLabel: (_query) => "Uniques", meta: {plot: true}}),
-      metrics.createEvents({renderLabel: (_query) => "Total", meta: {hiddenOnMobile: true}}),
+      metrics.createVisitors({ renderLabel: (_query) => "Uniques", meta: { plot: true } }),
+      metrics.createEvents({ renderLabel: (_query) => "Total", meta: { hiddenOnMobile: true } }),
       metrics.createConversionRate(),
-      BUILD_EXTRA && metrics.createTotalRevenue({meta: {hiddenOnMobile: true}}),
-      BUILD_EXTRA && metrics.createAverageRevenue({meta: {hiddenOnMobile: true}})
+      BUILD_EXTRA && metrics.createTotalRevenue({ meta: { hiddenOnMobile: true } }),
+      BUILD_EXTRA && metrics.createAverageRevenue({ meta: { hiddenOnMobile: true } })
     ].filter(metric => !!metric)
   }
 
@@ -36,11 +39,10 @@ export default function Conversions(props) {
       afterFetchData={afterFetchData}
       getFilterFor={getFilterFor}
       keyLabel="Goal"
-      onClick={props.onGoalFilterClick}
+      onClick={onGoalFilterClick}
       metrics={chooseMetrics()}
       detailsLink={url.sitePath('conversions')}
       maybeHideDetails={true}
-      query={query}
       color="bg-red-50"
       colMinWidth={90}
     />
diff --git a/assets/js/dashboard/stats/behaviours/goal-conversions.js b/assets/js/dashboard/stats/behaviours/goal-conversions.js
index e444cf75eeb40..0e2fa024ef58f 100644
--- a/assets/js/dashboard/stats/behaviours/goal-conversions.js
+++ b/assets/js/dashboard/stats/behaviours/goal-conversions.js
@@ -5,6 +5,8 @@ import * as metrics from '../reports/metrics'
 import * as url from "../../util/url"
 import * as api from "../../api"
 import { EVENT_PROPS_PREFIX, getGoalFilter } from "../../util/filters"
+import { useSiteContext } from "../../site-context"
+import { useQueryContext } from "../../query-context"
 
 export const SPECIAL_GOALS = {
   '404': { title: '404 Pages', prop: 'path' },
@@ -31,8 +33,9 @@ export function specialTitleWhenGoalFilter(query, defaultTitle) {
   return getSpecialGoal(query)?.title || defaultTitle
 }
 
-function SpecialPropBreakdown(props) {
-  const { site, query, prop, afterFetchData } = props
+function SpecialPropBreakdown({ prop, afterFetchData }) {
+  const site = useSiteContext();
+  const { query } = useQueryContext();
 
   function fetchData() {
     return api.get(url.apiPath(site, `/custom-prop-values/${prop}`), query)
@@ -55,8 +58,8 @@ function SpecialPropBreakdown(props) {
 
   function chooseMetrics() {
     return [
-      metrics.createVisitors({ renderLabel: (_query) => "Visitors", meta: {plot: true}}),
-      metrics.createEvents({renderLabel: (_query) => "Events", meta: {hiddenOnMobile: true}}),
+      metrics.createVisitors({ renderLabel: (_query) => "Visitors", meta: { plot: true } }),
+      metrics.createEvents({ renderLabel: (_query) => "Events", meta: { hiddenOnMobile: true } }),
       metrics.createConversionRate()
     ].filter(metric => !!metric)
   }
@@ -71,20 +74,19 @@ function SpecialPropBreakdown(props) {
       detailsLink={url.sitePath(`custom-prop-values/${prop}`)}
       externalLinkDest={externalLinkDest()}
       maybeHideDetails={true}
-      query={query}
       color="bg-red-50"
       colMinWidth={90}
     />
   )
 }
 
-export default function GoalConversions(props) {
-  const { site, query, afterFetchData } = props
+export default function GoalConversions({ afterFetchData, onGoalFilterClick }) {
+  const { query } = useQueryContext()
 
   const specialGoal = getSpecialGoal(query)
   if (specialGoal) {
-    return <SpecialPropBreakdown site={site} query={props.query} prop={specialGoal.prop} afterFetchData={afterFetchData} />
+    return <SpecialPropBreakdown prop={specialGoal.prop} afterFetchData={afterFetchData} />
   } else {
-    return <Conversions site={site} query={props.query} onGoalFilterClick={props.onGoalFilterClick} afterFetchData={afterFetchData} />
+    return <Conversions onGoalFilterClick={onGoalFilterClick} afterFetchData={afterFetchData} />
   }
 }
diff --git a/assets/js/dashboard/stats/behaviours/index.js b/assets/js/dashboard/stats/behaviours/index.js
index f1fc5eac7de19..f86e18635fc75 100644
--- a/assets/js/dashboard/stats/behaviours/index.js
+++ b/assets/js/dashboard/stats/behaviours/index.js
@@ -188,12 +188,11 @@ export default function Behaviours({ importedDataInView }) {
 
   function renderConversions() {
     if (site.hasGoals) {
-      return <GoalConversions site={site} query={query} onGoalFilterClick={onGoalFilterClick} afterFetchData={afterFetchData} />
+      return <GoalConversions onGoalFilterClick={onGoalFilterClick} afterFetchData={afterFetchData} />
     }
     else if (adminAccess) {
       return (
         <FeatureSetupNotice
-          site={site}
           feature={CONVERSIONS}
           title={'Measure how often visitors complete specific actions'}
           info={'Goals allow you to track registrations, button clicks, form completions, external link clicks, file downloads, 404 error pages and more.'}
@@ -213,7 +212,7 @@ export default function Behaviours({ importedDataInView }) {
       return featureUnavailable()
     }
     else if (Funnel && selectedFunnel && site.funnelsAvailable) {
-      return <Funnel site={site} query={query} funnelName={selectedFunnel} />
+      return <Funnel funnelName={selectedFunnel} />
     }
     else if (Funnel && adminAccess) {
       let callToAction
@@ -226,7 +225,6 @@ export default function Behaviours({ importedDataInView }) {
 
       return (
         <FeatureSetupNotice
-          site={site}
           feature={FUNNELS}
           title={'Follow the visitor journey from entry to conversion'}
           info={'Funnels allow you to analyze the user flow through your website, uncover possible issues, optimize your site and increase the conversion rate.'}
@@ -240,7 +238,7 @@ export default function Behaviours({ importedDataInView }) {
 
   function renderProps() {
     if (site.hasProps && site.propsAvailable) {
-      return <Properties site={site} query={query} afterFetchData={afterFetchData} />
+      return <Properties afterFetchData={afterFetchData} />
     } else if (adminAccess) {
       let callToAction
 
@@ -252,7 +250,6 @@ export default function Behaviours({ importedDataInView }) {
 
       return (
         <FeatureSetupNotice
-          site={site}
           feature={PROPS}
           title={'Send custom data to create your own metrics'}
           info={'You can attach custom properties when sending a pageview or event. This allows you to create custom metrics and analyze stats we don\'t track automatically.'}
@@ -343,9 +340,9 @@ export default function Behaviours({ importedDataInView }) {
 
   function renderImportedQueryUnsupportedWarning() {
     if (mode === CONVERSIONS) {
-      return <ImportedQueryUnsupportedWarning loading={loading} query={query} skipImportedReason={skipImportedReason} />
+      return <ImportedQueryUnsupportedWarning loading={loading} skipImportedReason={skipImportedReason} />
     } else if (mode === PROPS) {
-      return <ImportedQueryUnsupportedWarning loading={loading} query={query} skipImportedReason={skipImportedReason} message="Imported data is unavailable in this view" />
+      return <ImportedQueryUnsupportedWarning loading={loading} skipImportedReason={skipImportedReason} message="Imported data is unavailable in this view" />
     } else {
       return <ImportedQueryUnsupportedWarning altCondition={importedDataInView} message="Imported data is unavailable in this view" />
     }
diff --git a/assets/js/dashboard/stats/behaviours/props.js b/assets/js/dashboard/stats/behaviours/props.js
index 9a9a20f9ca714..883e86f530835 100644
--- a/assets/js/dashboard/stats/behaviours/props.js
+++ b/assets/js/dashboard/stats/behaviours/props.js
@@ -1,16 +1,20 @@
-import React, { useCallback, useEffect, useState } from "react"
+import React, { useCallback, useEffect, useState } from "react";
 import ListReport, { MIN_HEIGHT } from "../reports/list";
-import Combobox from '../../components/combobox'
-import * as metrics from '../reports/metrics'
-import * as api from '../../api'
-import * as url from '../../util/url'
+import Combobox from '../../components/combobox';
+import * as metrics from '../reports/metrics';
+import * as api from '../../api';
+import * as url from '../../util/url';
 import * as storage from "../../util/storage";
-import { EVENT_PROPS_PREFIX, getGoalFilter, FILTER_OPERATIONS, hasGoalFilter } from "../../util/filters"
+import { EVENT_PROPS_PREFIX, getGoalFilter, FILTER_OPERATIONS, hasGoalFilter } from "../../util/filters";
 import classNames from "classnames";
+import { useQueryContext } from "../../query-context";
+import { useSiteContext } from "../../site-context";
 
 
-export default function Properties(props) {
-  const { site, query } = props
+export default function Properties({ afterFetchData }) {
+  const { query } = useQueryContext();
+  const site = useSiteContext();
+
   const propKeyStorageName = `prop_key__${site.domain}`
   const propKeyStorageNameForGoal = () => {
     const [_operation, _filterKey, [goal]] = getGoalFilter(query)
@@ -82,30 +86,29 @@ export default function Properties(props) {
       setPropKey(newPropKey)
     }
   }
-  
+
   /*global BUILD_EXTRA*/
   function chooseMetrics() {
     return [
-      metrics.createVisitors({ renderLabel: (_query) => "Visitors", meta: {plot: true}}),
-      metrics.createEvents({renderLabel: (_query) => "Events", meta: {hiddenOnMobile: true}}),
+      metrics.createVisitors({ renderLabel: (_query) => "Visitors", meta: { plot: true } }),
+      metrics.createEvents({ renderLabel: (_query) => "Events", meta: { hiddenOnMobile: true } }),
       hasGoalFilter(query) && metrics.createConversionRate(),
       !hasGoalFilter(query) && metrics.createPercentage(),
-      BUILD_EXTRA && metrics.createTotalRevenue({meta: {hiddenOnMobile: true}}),
-      BUILD_EXTRA && metrics.createAverageRevenue({meta: {hiddenOnMobile: true}})
+      BUILD_EXTRA && metrics.createTotalRevenue({ meta: { hiddenOnMobile: true } }),
+      BUILD_EXTRA && metrics.createAverageRevenue({ meta: { hiddenOnMobile: true } })
     ].filter(metric => !!metric)
   }
-  
+
   function renderBreakdown() {
     return (
       <ListReport
         fetchData={fetchProps}
-        afterFetchData={props.afterFetchData}
+        afterFetchData={afterFetchData}
         getFilterFor={getFilterFor}
         keyLabel={propKey}
         metrics={chooseMetrics()}
         detailsLink={url.sitePath(`custom-prop-values/${propKey}`)}
         maybeHideDetails={true}
-        query={query}
         color="bg-red-50"
         colMinWidth={90}
       />
diff --git a/assets/js/dashboard/stats/devices/index.js b/assets/js/dashboard/stats/devices/index.js
index 4aa2f3d69bc62..ebd3580af4948 100644
--- a/assets/js/dashboard/stats/devices/index.js
+++ b/assets/js/dashboard/stats/devices/index.js
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import * as storage from '../../util/storage'
-import { getFiltersByKeyPrefix, hasGoalFilter, isFilteringOnFixedValue } from '../../util/filters'
-import ListReport from '../reports/list'
-import * as metrics from '../reports/metrics'
-import * as api from '../../api'
-import * as url from '../../util/url'
+import * as storage from '../../util/storage';
+import { getFiltersByKeyPrefix, hasGoalFilter, isFilteringOnFixedValue } from '../../util/filters';
+import ListReport from '../reports/list';
+import * as metrics from '../reports/metrics';
+import * as api from '../../api';
+import * as url from '../../util/url';
 import ImportedQueryUnsupportedWarning from '../imported-query-unsupported-warning';
 import { useQueryContext } from '../../query-context';
 import { useSiteContext } from '../../site-context';
@@ -41,7 +41,9 @@ function browserIconFor(browser) {
   )
 }
 
-function Browsers({ query, site, afterFetchData }) {
+function Browsers({ afterFetchData }) {
+  const site = useSiteContext();
+  const { query } = useQueryContext();
   function fetchData() {
     return api.get(url.apiPath(site, '/browsers'), query)
   }
@@ -72,13 +74,14 @@ function Browsers({ query, site, afterFetchData }) {
       getFilterFor={getFilterFor}
       keyLabel="Browser"
       metrics={chooseMetrics()}
-      query={query}
       renderIcon={renderIcon}
     />
   )
 }
 
-function BrowserVersions({ query, site, afterFetchData }) {
+function BrowserVersions({ afterFetchData }) {
+  const { query } = useQueryContext();
+  const site = useSiteContext();
   function fetchData() {
     return api.get(url.apiPath(site, '/browser-versions'), query)
       .then(res => {
@@ -120,7 +123,6 @@ function BrowserVersions({ query, site, afterFetchData }) {
       keyLabel="Browser version"
       metrics={chooseMetrics()}
       renderIcon={renderIcon}
-      query={query}
     />
   )
 }
@@ -156,7 +158,9 @@ function osIconFor(os) {
   )
 }
 
-function OperatingSystems({ query, site, afterFetchData }) {
+function OperatingSystems({ afterFetchData }) {
+  const { query } = useQueryContext();
+  const site = useSiteContext();
   function fetchData() {
     return api.get(url.apiPath(site, '/operating-systems'), query)
   }
@@ -188,12 +192,14 @@ function OperatingSystems({ query, site, afterFetchData }) {
       renderIcon={renderIcon}
       keyLabel="Operating system"
       metrics={chooseMetrics()}
-      query={query}
     />
   )
 }
 
-function OperatingSystemVersions({ query, site, afterFetchData }) {
+function OperatingSystemVersions({ afterFetchData }) {
+  const { query } = useQueryContext();
+  const site = useSiteContext();
+
   function fetchData() {
     return api.get(url.apiPath(site, '/operating-system-versions'), query)
       .then(res => {
@@ -235,13 +241,15 @@ function OperatingSystemVersions({ query, site, afterFetchData }) {
       getFilterFor={getFilterFor}
       keyLabel="Operating System Version"
       metrics={chooseMetrics()}
-      query={query}
     />
   )
 
 }
 
-function ScreenSizes({ query, site, afterFetchData }) {
+function ScreenSizes({ afterFetchData }) {
+  const { query } = useQueryContext();
+  const site = useSiteContext();
+
   function fetchData() {
     return api.get(url.apiPath(site, '/screen-sizes'), query)
   }
@@ -274,7 +282,6 @@ function ScreenSizes({ query, site, afterFetchData }) {
       getFilterFor={getFilterFor}
       keyLabel="Screen size"
       metrics={chooseMetrics()}
-      query={query}
       renderIcon={renderIcon}
     />
   )
@@ -328,17 +335,17 @@ export default function Devices() {
     switch (mode) {
       case 'browser':
         if (isFilteringOnFixedValue(query, 'browser')) {
-          return <BrowserVersions site={site} query={query} afterFetchData={afterFetchData} />
+          return <BrowserVersions afterFetchData={afterFetchData} />
         }
-        return <Browsers site={site} query={query} afterFetchData={afterFetchData} />
+        return <Browsers afterFetchData={afterFetchData} />
       case 'os':
         if (isFilteringOnFixedValue(query, 'os')) {
-          return <OperatingSystemVersions site={site} query={query} afterFetchData={afterFetchData} />
+          return <OperatingSystemVersions afterFetchData={afterFetchData} />
         }
-        return <OperatingSystems site={site} query={query} afterFetchData={afterFetchData} />
+        return <OperatingSystems afterFetchData={afterFetchData} />
       case 'size':
       default:
-        return <ScreenSizes site={site} query={query} afterFetchData={afterFetchData} />
+        return <ScreenSizes afterFetchData={afterFetchData} />
     }
   }
 
@@ -370,7 +377,7 @@ export default function Devices() {
       <div className="flex justify-between w-full">
         <div className="flex gap-x-1">
           <h3 className="font-bold dark:text-gray-100">Devices</h3>
-          <ImportedQueryUnsupportedWarning loading={loading} query={query} skipImportedReason={skipImportedReason} />
+          <ImportedQueryUnsupportedWarning loading={loading} skipImportedReason={skipImportedReason} />
         </div>
         <div className="flex text-xs font-medium text-gray-500 dark:text-gray-400 space-x-2">
           {renderPill('Browser', 'browser')}
diff --git a/assets/js/dashboard/stats/graph/interval-picker.js b/assets/js/dashboard/stats/graph/interval-picker.js
index 86458ceafed67..fe65fc77a2dd3 100644
--- a/assets/js/dashboard/stats/graph/interval-picker.js
+++ b/assets/js/dashboard/stats/graph/interval-picker.js
@@ -1,9 +1,11 @@
 import { Menu, Transition } from '@headlessui/react';
-import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import React, { Fragment, useCallback, useEffect } from 'react';
-import classNames from 'classnames'
-import * as storage from '../../util/storage'
-import { isKeyPressed } from '../../keybinding.js'
+import classNames from 'classnames';
+import * as storage from '../../util/storage';
+import { isKeyPressed } from '../../keybinding.js';
+import { useQueryContext } from '../../query-context.js';
+import { useSiteContext } from '../../site-context.js';
 
 const INTERVAL_LABELS = {
   'minute': 'Minutes',
@@ -89,7 +91,9 @@ export const getCurrentInterval = function(site, query) {
   }
 }
 
-export function IntervalPicker({ query, site, onIntervalUpdate }) {
+export function IntervalPicker({ onIntervalUpdate }) {
+  const {query} = useQueryContext();
+  const site = useSiteContext();
   if (query.period == 'realtime') return null
   
   // eslint-disable-next-line react-hooks/rules-of-hooks
diff --git a/assets/js/dashboard/stats/graph/stats-export.js b/assets/js/dashboard/stats/graph/stats-export.js
index 0c3613a81767f..47608e87ad624 100644
--- a/assets/js/dashboard/stats/graph/stats-export.js
+++ b/assets/js/dashboard/stats/graph/stats-export.js
@@ -1,8 +1,12 @@
-import React, { useState } from "react"
-import * as api from '../../api'
-import { getCurrentInterval } from "./interval-picker"
+import React, { useState } from "react";
+import * as api from '../../api';
+import { getCurrentInterval } from "./interval-picker";
+import { useSiteContext } from "../../site-context";
+import { useQueryContext } from "../../query-context";
 
-export default function StatsExport({ site, query }) {
+export default function StatsExport() {
+  const site = useSiteContext();
+  const { query } = useQueryContext();
   const [exporting, setExporting] = useState(false)
 
   function startExport() {
diff --git a/assets/js/dashboard/stats/graph/top-stats.js b/assets/js/dashboard/stats/graph/top-stats.js
index c8f51475f2b94..e4566cd9639d8 100644
--- a/assets/js/dashboard/stats/graph/top-stats.js
+++ b/assets/js/dashboard/stats/graph/top-stats.js
@@ -1,13 +1,15 @@
 import React from "react";
-import { Tooltip } from '../../util/tooltip'
-import { SecondsSinceLastLoad } from '../../util/seconds-since-last-load'
+import { Tooltip } from '../../util/tooltip';
+import { SecondsSinceLastLoad } from '../../util/seconds-since-last-load';
 import classNames from "classnames";
-import numberFormatter, { durationFormatter } from '../../util/number-formatter'
-import * as storage from '../../util/storage'
-import { formatDateRange } from '../../util/date.js'
+import numberFormatter, { durationFormatter } from '../../util/number-formatter';
+import * as storage from '../../util/storage';
+import { formatDateRange } from '../../util/date.js';
 import { getGraphableMetrics } from "./graph-util.js";
+import { useQueryContext } from "../../query-context.js";
+import { useSiteContext } from "../../site-context.js";
 
-function Maybe({condition, children}) {
+function Maybe({ condition, children }) {
   if (condition) {
     return children
   } else {
@@ -19,14 +21,14 @@ function renderPercentageComparison(name, comparison, forceDarkBg = false) {
   const formattedComparison = numberFormatter(Math.abs(comparison))
 
   const defaultClassName = classNames({
-     "pl-2 text-xs dark:text-gray-100": !forceDarkBg,
-     "pl-2 text-xs text-gray-100": forceDarkBg
-   })
+    "pl-2 text-xs dark:text-gray-100": !forceDarkBg,
+    "pl-2 text-xs text-gray-100": forceDarkBg
+  })
 
-   const noChangeClassName = classNames({
-     "pl-2 text-xs text-gray-700 dark:text-gray-300": !forceDarkBg,
-     "pl-2 text-xs text-gray-300": forceDarkBg
-   })
+  const noChangeClassName = classNames({
+    "pl-2 text-xs text-gray-700 dark:text-gray-300": !forceDarkBg,
+    "pl-2 text-xs text-gray-300": forceDarkBg
+  })
 
   if (comparison > 0) {
     const color = name === 'Bounce rate' ? 'text-red-400' : 'text-green-500'
@@ -65,8 +67,9 @@ function topStatNumberLong(name, value) {
   }
 }
 
-export default function TopStats(props) {
-  const {site, query, data, onMetricUpdate, tooltipBoundary, lastLoadTimestamp} = props
+export default function TopStats({ data, onMetricUpdate, tooltipBoundary }) {
+  const { query, lastLoadTimestamp } = useQueryContext();
+  const site = useSiteContext();
 
   function tooltip(stat) {
     let statName = stat.name.toLowerCase()
@@ -83,7 +86,7 @@ export default function TopStats(props) {
           {topStatNumberLong(stat.name, stat.value)} {statName}
         </div>}
 
-        {stat.name === 'Current visitors' && <p className="font-normal text-xs">Last updated <SecondsSinceLastLoad lastLoadTimestamp={lastLoadTimestamp}/>s ago</p>}
+        {stat.name === 'Current visitors' && <p className="font-normal text-xs">Last updated <SecondsSinceLastLoad lastLoadTimestamp={lastLoadTimestamp} />s ago</p>}
       </div>
     )
   }
@@ -120,7 +123,7 @@ export default function TopStats(props) {
       'group-hover:text-indigo-700 dark:group-hover:text-indigo-500 border-transparent': !isSelected
     })
 
-    return(
+    return (
       <div className={statDisplayNameClass}>
         {statDisplayName}
         {statExtraName && <span className="hidden sm:inline-block ml-1">{statExtraName}</span>}
@@ -143,18 +146,18 @@ export default function TopStats(props) {
             <span className="flex items-center justify-between whitespace-nowrap">
               <p className="font-bold text-xl dark:text-gray-100" id={stat.graph_metric}>{topStatNumberShort(stat.name, stat.value)}</p>
               <Maybe condition={!query.comparison}>
-                { renderPercentageComparison(stat.name, stat.change) }
+                {renderPercentageComparison(stat.name, stat.change)}
               </Maybe>
             </span>
-              <Maybe condition={query.comparison}>
-                <p className="text-xs dark:text-gray-100">{ formatDateRange(site, data.from, data.to) }</p>
-              </Maybe>
+            <Maybe condition={query.comparison}>
+              <p className="text-xs dark:text-gray-100">{formatDateRange(site, data.from, data.to)}</p>
+            </Maybe>
           </div>
 
           <Maybe condition={query.comparison}>
             <div>
-              <p className="font-bold text-xl text-gray-500 dark:text-gray-400">{ topStatNumberShort(stat.name, stat.comparison_value) }</p>
-              <p className="text-xs text-gray-500 dark:text-gray-400">{ formatDateRange(site, data.comparing_from, data.comparing_to) }</p>
+              <p className="font-bold text-xl text-gray-500 dark:text-gray-400">{topStatNumberShort(stat.name, stat.comparison_value)}</p>
+              <p className="text-xs text-gray-500 dark:text-gray-400">{formatDateRange(site, data.comparing_from, data.comparing_to)}</p>
             </div>
           </Maybe>
         </div>
diff --git a/assets/js/dashboard/stats/graph/visitor-graph.js b/assets/js/dashboard/stats/graph/visitor-graph.js
index 1d391a8d14ea5..5cb39101441b2 100644
--- a/assets/js/dashboard/stats/graph/visitor-graph.js
+++ b/assets/js/dashboard/stats/graph/visitor-graph.js
@@ -1,16 +1,16 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import * as api from '../../api'
-import * as storage from '../../util/storage'
-import { getGraphableMetrics } from './graph-util'
+import * as api from '../../api';
+import * as storage from '../../util/storage';
+import { getGraphableMetrics } from './graph-util';
 import TopStats from './top-stats';
-import { IntervalPicker, getCurrentInterval } from './interval-picker'
-import StatsExport from './stats-export'
+import { IntervalPicker, getCurrentInterval } from './interval-picker';
+import StatsExport from './stats-export';
 import WithImportedSwitch from './with-imported-switch';
 import SamplingNotice from './sampling-notice';
 import FadeIn from '../../fade-in';
-import * as url from '../../util/url'
-import { isComparisonEnabled } from '../../comparison-input'
-import LineGraphWithRouter from './line-graph'
+import * as url from '../../util/url';
+import { isComparisonEnabled } from '../../comparison-input';
+import LineGraphWithRouter from './line-graph';
 import { useQueryContext } from '../../query-context';
 import { useSiteContext } from '../../site-context';
 
@@ -30,7 +30,7 @@ function fetchMainGraph(site, query, metric, interval) {
 }
 
 export default function VisitorGraph({ updateImportedDataInView }) {
-  const { query, lastLoadTimestamp } = useQueryContext();
+  const { query } = useQueryContext();
   const site = useSiteContext();
 
   const isRealtime = query.period === 'realtime'
@@ -141,21 +141,18 @@ export default function VisitorGraph({ updateImportedDataInView }) {
       <FadeIn show={!(topStatsLoading || graphLoading)}>
         <div id="top-stats-container" className="flex flex-wrap" ref={topStatsBoundary} style={{ height: getTopStatsHeight() }}>
           <TopStats
-            site={site}
-            query={query}
             data={topStatData}
             onMetricUpdate={onMetricUpdate}
             tooltipBoundary={topStatsBoundary.current}
-            lastLoadTimestamp={lastLoadTimestamp}
           />
         </div>
         <div className="relative px-2">
           {graphRefreshing && renderLoader()}
           <div className="absolute right-4 -top-8 py-1 flex items-center">
-            {!isRealtime && <StatsExport site={site} query={query} />}
+            {!isRealtime && <StatsExport />}
             <SamplingNotice samplePercent={topStatData} />
-            <WithImportedSwitch query={query} info={topStatData && topStatData.with_imported_switch} />
-            <IntervalPicker site={site} query={query} onIntervalUpdate={onIntervalUpdate} />
+            <WithImportedSwitch info={topStatData && topStatData.with_imported_switch} />
+            <IntervalPicker onIntervalUpdate={onIntervalUpdate} />
           </div>
           <LineGraphWithRouter graphData={graphData} darkTheme={isDarkTheme} query={query} />
         </div>
diff --git a/assets/js/dashboard/stats/graph/with-imported-switch.js b/assets/js/dashboard/stats/graph/with-imported-switch.js
index 9e9264643c877..4f480536bbe6a 100644
--- a/assets/js/dashboard/stats/graph/with-imported-switch.js
+++ b/assets/js/dashboard/stats/graph/with-imported-switch.js
@@ -3,18 +3,20 @@ import { Link } from 'react-router-dom'
 import * as url from '../../util/url'
 import { BarsArrowUpIcon } from '@heroicons/react/20/solid'
 import classNames from "classnames"
+import { useQueryContext } from "../../query-context"
 
-function LinkOrDiv({isLink, target, children}) {
+function LinkOrDiv({ isLink, target, children }) {
   if (isLink) {
-    return <Link to={target}>{ children }</Link>
+    return <Link to={target}>{children}</Link>
   } else {
-    return <div>{ children }</div>
+    return <div>{children}</div>
   }
 }
 
-export default function WithImportedSwitch({query, info}) {
+export default function WithImportedSwitch({ info }) {
+  const { query } = useQueryContext();
   if (info && info.visible) {
-    const {togglable, tooltip_msg} = info
+    const { togglable, tooltip_msg } = info
     const enabled = togglable && query.with_imported
     const target = url.setQuery('with_imported', (!enabled).toString())
 
@@ -22,11 +24,11 @@ export default function WithImportedSwitch({query, info}) {
       "dark:text-gray-300 text-gray-700": enabled,
       "dark:text-gray-500 text-gray-400": !enabled,
     })
-    
+
     return (
       <div tooltip={tooltip_msg} className="w-4 h-4 mx-2">
         <LinkOrDiv isLink={togglable} target={target}>
-          <BarsArrowUpIcon className={iconClass}/>
+          <BarsArrowUpIcon className={iconClass} />
         </LinkOrDiv>
       </div>
     )
diff --git a/assets/js/dashboard/stats/imported-query-unsupported-warning.js b/assets/js/dashboard/stats/imported-query-unsupported-warning.js
index bef74fe46be1d..70d7bc81ebb50 100644
--- a/assets/js/dashboard/stats/imported-query-unsupported-warning.js
+++ b/assets/js/dashboard/stats/imported-query-unsupported-warning.js
@@ -1,8 +1,10 @@
 import React from "react";
 import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
 import FadeIn from "../fade-in";
+import { useQueryContext } from "../query-context";
 
-export default function ImportedQueryUnsupportedWarning({query, loading, skipImportedReason, altCondition, message}) {
+export default function ImportedQueryUnsupportedWarning({ loading, skipImportedReason, altCondition, message }) {
+  const { query } = useQueryContext();
   const tooltipMessage = message || "Imported data is excluded due to applied filters"
   const show = query && query.with_imported && skipImportedReason === "unsupported_query" && query.period !== 'realtime'
 
diff --git a/assets/js/dashboard/stats/locations/index.js b/assets/js/dashboard/stats/locations/index.js
index bc5d6bf81fdd1..9b748eacee5bd 100644
--- a/assets/js/dashboard/stats/locations/index.js
+++ b/assets/js/dashboard/stats/locations/index.js
@@ -1,13 +1,13 @@
 import React from 'react';
 
-import * as storage from '../../util/storage'
-import CountriesMap from './map'
+import * as storage from '../../util/storage';
+import CountriesMap from './map';
 
-import * as api from '../../api'
-import { apiPath, sitePath } from '../../util/url'
-import ListReport from '../reports/list'
+import * as api from '../../api';
+import { apiPath, sitePath } from '../../util/url';
+import ListReport from '../reports/list';
 import * as metrics from '../reports/metrics';
-import { hasGoalFilter } from "../../util/filters"
+import { hasGoalFilter } from "../../util/filters";
 import { getFiltersByKeyPrefix } from '../../util/filters';
 import ImportedQueryUnsupportedWarning from '../imported-query-unsupported-warning';
 
@@ -44,7 +44,6 @@ function Countries({ query, site, onClick, afterFetchData }) {
 			keyLabel="Country"
 			metrics={chooseMetrics()}
 			detailsLink={sitePath('countries')}
-			query={query}
 			renderIcon={renderIcon}
 			color="bg-orange-50"
 		/>
@@ -84,7 +83,6 @@ function Regions({ query, site, onClick, afterFetchData }) {
 			keyLabel="Region"
 			metrics={chooseMetrics()}
 			detailsLink={sitePath('regions')}
-			query={query}
 			renderIcon={renderIcon}
 			color="bg-orange-50"
 		/>
@@ -123,7 +121,6 @@ function Cities({ query, site, afterFetchData }) {
 			keyLabel="City"
 			metrics={chooseMetrics()}
 			detailsLink={sitePath('cities')}
-			query={query}
 			renderIcon={renderIcon}
 			color="bg-orange-50"
 		/>
diff --git a/assets/js/dashboard/stats/modals/breakdown-modal.js b/assets/js/dashboard/stats/modals/breakdown-modal.js
index a68a5140e0838..ce1ee390c9dbc 100644
--- a/assets/js/dashboard/stats/modals/breakdown-modal.js
+++ b/assets/js/dashboard/stats/modals/breakdown-modal.js
@@ -1,8 +1,8 @@
 import React, { useState, useEffect, useCallback, useRef } from "react";
 
-import * as api from '../../api'
-import { useDebouncedEffect, useMountedEffect } from '../../custom-hooks'
-import { trimURL } from '../../util/url'
+import * as api from '../../api';
+import { useDebouncedEffect, useMountedEffect } from '../../custom-hooks';
+import { trimURL } from '../../util/url';
 import { FilterLink } from "../reports/list";
 import { useQueryContext } from "../../query-context";
 import { useSiteContext } from "../../site-context";
@@ -194,7 +194,6 @@ export default function BreakdownModal({
           { maybeRenderIcon(item) }
           <FilterLink
             pathname={`/${encodeURIComponent(site.domain)}`}
-            query={query}
             filterInfo={getFilterInfo(item)}
           >
             {trimURL(item.name, 40)}
diff --git a/assets/js/dashboard/stats/modals/filter-modal-group.js b/assets/js/dashboard/stats/modals/filter-modal-group.js
index 3b1722f143e60..8b030acdd3b83 100644
--- a/assets/js/dashboard/stats/modals/filter-modal-group.js
+++ b/assets/js/dashboard/stats/modals/filter-modal-group.js
@@ -6,9 +6,7 @@ import FilterModalPropsRow from "./filter-modal-props-row"
 export default function FilterModalGroup({
   filterGroup,
   filterState,
-  site,
   labels,
-  query,
   onUpdateRowValue,
   onAddRow,
   onDeleteRow
@@ -34,8 +32,6 @@ export default function FilterModalGroup({
             <FilterModalPropsRow
               key={id}
               filter={filter}
-              site={site}
-              query={query}
               showDelete={rows.length > 1}
               disabledOptions={disabledOptions}
               onUpdate={(newFilter) => onUpdateRowValue(id, newFilter)}
@@ -45,8 +41,6 @@ export default function FilterModalGroup({
             <FilterModalRow
               key={id}
               filter={filter}
-              site={site}
-              query={query}
               labels={labels}
               onUpdate={(newFilter, labelUpdate) => onUpdateRowValue(id, newFilter, labelUpdate)}
             />
diff --git a/assets/js/dashboard/stats/modals/filter-modal-props-row.js b/assets/js/dashboard/stats/modals/filter-modal-props-row.js
index 09fb3e77ab076..b3c26c22af101 100644
--- a/assets/js/dashboard/stats/modals/filter-modal-props-row.js
+++ b/assets/js/dashboard/stats/modals/filter-modal-props-row.js
@@ -6,16 +6,18 @@ import Combobox from '../../components/combobox'
 
 import { apiPath } from '../../util/url'
 import { EVENT_PROPS_PREFIX, FILTER_OPERATIONS, fetchSuggestions, getPropertyKeyFromFilterKey } from '../../util/filters'
+import { useQueryContext } from "../../query-context"
+import { useSiteContext } from "../../site-context"
 
 export default function FilterModalPropsRow({
-  site,
-  query,
   filter,
   showDelete,
   disabledOptions,
   onUpdate,
   onDelete,
 }) {
+  const { query } = useQueryContext()
+  const site = useSiteContext()
   const [operation, filterKey, clauses] = filter
 
   const propKey = useMemo(
@@ -33,7 +35,7 @@ export default function FilterModalPropsRow({
   }
 
   function fetchPropValueOptions(input) {
-    if ([FILTER_OPERATIONS.contains, FILTER_OPERATIONS.does_not_contain].includes(operation)) {return Promise.resolve([])}
+    if ([FILTER_OPERATIONS.contains, FILTER_OPERATIONS.does_not_contain].includes(operation)) { return Promise.resolve([]) }
     return fetchSuggestions(apiPath(site, `/suggestions/prop_value`), query, input, [
       FILTER_OPERATIONS.isNot, filterKey, ['(none)']
     ])
diff --git a/assets/js/dashboard/stats/modals/filter-modal-row.js b/assets/js/dashboard/stats/modals/filter-modal-row.js
index dc4f85555f455..89cc983e4e207 100644
--- a/assets/js/dashboard/stats/modals/filter-modal-row.js
+++ b/assets/js/dashboard/stats/modals/filter-modal-row.js
@@ -6,14 +6,16 @@ import Combobox from '../../components/combobox'
 import { FILTER_OPERATIONS, fetchSuggestions, isFreeChoiceFilter } from "../../util/filters"
 import { apiPath } from '../../util/url'
 import { getLabel, formattedFilters } from '../../util/filters'
+import { useQueryContext } from "../../query-context"
+import { useSiteContext } from "../../site-context"
 
 export default function FilterModalRow({
-  site,
-  query,
   filter,
   labels,
   onUpdate
 }) {
+  const { query } = useQueryContext();
+  const site = useSiteContext();
   const [operation, filterKey, clauses] = filter
 
   const selectedClauses = useMemo(
diff --git a/assets/js/dashboard/stats/modals/filter-modal.js b/assets/js/dashboard/stats/modals/filter-modal.js
index 8d3ccd1758613..a1984a33cc930 100644
--- a/assets/js/dashboard/stats/modals/filter-modal.js
+++ b/assets/js/dashboard/stats/modals/filter-modal.js
@@ -1,13 +1,13 @@
 import React from "react";
-import { withRouter } from 'react-router-dom'
+import { withRouter } from 'react-router-dom';
 
-import Modal from './modal'
-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 { updatedQuery } from '../../util/url'
-import { shouldIgnoreKeypress } from '../../keybinding'
-import { cleanLabels } from "../../util/filters"
-import FilterModalGroup from "./filter-modal-group"
+import Modal from './modal';
+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 { 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 = []
@@ -145,8 +145,6 @@ class FilterModal extends React.Component {
                 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)}
diff --git a/assets/js/dashboard/stats/pages/index.js b/assets/js/dashboard/stats/pages/index.js
index c7354099e5d82..20d573a7da917 100644
--- a/assets/js/dashboard/stats/pages/index.js
+++ b/assets/js/dashboard/stats/pages/index.js
@@ -1,16 +1,18 @@
 import React, { useEffect, useState } from 'react';
 
-import * as storage from '../../util/storage'
-import * as url from '../../util/url'
-import * as api from '../../api'
-import ListReport from './../reports/list'
-import * as metrics from './../reports/metrics'
+import * as storage from '../../util/storage';
+import * as url from '../../util/url';
+import * as api from '../../api';
+import ListReport from './../reports/list';
+import * as metrics from './../reports/metrics';
 import ImportedQueryUnsupportedWarning from '../imported-query-unsupported-warning';
 import { hasGoalFilter } from '../../util/filters';
 import { useQueryContext } from '../../query-context';
 import { useSiteContext } from '../../site-context';
 
-function EntryPages({ query, site, afterFetchData }) {
+function EntryPages({ afterFetchData }) {
+  const { query } = useQueryContext();
+  const site = useSiteContext();
   function fetchData() {
     return api.get(url.apiPath(site, '/entry-pages'), query, { limit: 9 })
   }
@@ -41,14 +43,15 @@ function EntryPages({ query, site, afterFetchData }) {
       keyLabel="Entry page"
       metrics={chooseMetrics()}
       detailsLink={url.sitePath('entry-pages')}
-      query={query}
       externalLinkDest={externalLinkDest}
       color="bg-orange-50"
     />
   )
 }
 
-function ExitPages({ query, site, afterFetchData }) {
+function ExitPages({ afterFetchData }) {
+  const site = useSiteContext();
+  const { query } = useQueryContext();
   function fetchData() {
     return api.get(url.apiPath(site, '/exit-pages'), query, { limit: 9 })
   }
@@ -79,14 +82,15 @@ function ExitPages({ query, site, afterFetchData }) {
       keyLabel="Exit page"
       metrics={chooseMetrics()}
       detailsLink={url.sitePath('exit-pages')}
-      query={query}
       externalLinkDest={externalLinkDest}
       color="bg-orange-50"
     />
   )
 }
 
-function TopPages({ query, site, afterFetchData }) {
+function TopPages({ afterFetchData }) {
+  const { query } = useQueryContext();
+  const site = useSiteContext();
   function fetchData() {
     return api.get(url.apiPath(site, '/pages'), query, { limit: 9 })
   }
@@ -117,7 +121,6 @@ function TopPages({ query, site, afterFetchData }) {
       keyLabel="Page"
       metrics={chooseMetrics()}
       detailsLink={url.sitePath('pages')}
-      query={query}
       externalLinkDest={externalLinkDest}
       color="bg-orange-50"
     />
@@ -133,7 +136,7 @@ const labelFor = {
 export default function Pages() {
   const { query } = useQueryContext();
   const site = useSiteContext();
-  
+
   const tabKey = `pageTab__${site.domain}`
   const storedTab = storage.getItem(tabKey)
   const [mode, setMode] = useState(storedTab || 'pages')
@@ -155,12 +158,12 @@ export default function Pages() {
   function renderContent() {
     switch (mode) {
       case "entry-pages":
-        return <EntryPages site={site} query={query} afterFetchData={afterFetchData} />
+        return <EntryPages afterFetchData={afterFetchData} />
       case "exit-pages":
-        return <ExitPages site={site} query={query} afterFetchData={afterFetchData} />
+        return <ExitPages afterFetchData={afterFetchData} />
       case "pages":
       default:
-        return <TopPages site={site} query={query} afterFetchData={afterFetchData} />
+        return <TopPages afterFetchData={afterFetchData} />
     }
   }
 
@@ -196,7 +199,7 @@ export default function Pages() {
           <h3 className="font-bold dark:text-gray-100">
             {labelFor[mode] || 'Page Visits'}
           </h3>
-          <ImportedQueryUnsupportedWarning loading={loading} query={query} skipImportedReason={skipImportedReason} />
+          <ImportedQueryUnsupportedWarning loading={loading} skipImportedReason={skipImportedReason} />
         </div>
         <div className="flex font-medium text-xs text-gray-500 dark:text-gray-400 space-x-2">
           {renderPill('Top Pages', 'pages')}
diff --git a/assets/js/dashboard/stats/reports/list.js b/assets/js/dashboard/stats/reports/list.js
index ef40c1a0c2197..e607b1d43f93d 100644
--- a/assets/js/dashboard/stats/reports/list.js
+++ b/assets/js/dashboard/stats/reports/list.js
@@ -1,14 +1,16 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router-dom';
 import FlipMove from 'react-flip-move';
 
-import FadeIn from '../../fade-in'
-import MoreLink from '../more-link'
-import Bar from '../bar'
-import LazyLoader from '../../components/lazy-loader'
-import classNames from 'classnames'
-import { trimURL, updatedQuery } from '../../util/url'
-import { cleanLabels, hasGoalFilter, replaceFilterByPrefix } from '../../util/filters'
+import FadeIn from '../../fade-in';
+import MoreLink from '../more-link';
+import Bar from '../bar';
+import LazyLoader from '../../components/lazy-loader';
+import classNames from 'classnames';
+import { trimURL, updatedQuery } from '../../util/url';
+import { cleanLabels, replaceFilterByPrefix, isRealTimeDashboard, hasGoalFilter } from '../../util/filters';
+import { useQueryContext } from '../../query-context';
+
 const MAX_ITEMS = 9
 export const MIN_HEIGHT = 380
 const ROW_HEIGHT = 32
@@ -16,15 +18,16 @@ const ROW_GAP_HEIGHT = 4
 const DATA_CONTAINER_HEIGHT = (ROW_HEIGHT + ROW_GAP_HEIGHT) * (MAX_ITEMS - 1) + ROW_HEIGHT
 const COL_MIN_WIDTH = 70
 
-export function FilterLink({ pathname, query, filterInfo, onClick, children, extraClass }) {
+export function FilterLink({ pathname, filterInfo, onClick, children, extraClass }) {
+  const { query } = useQueryContext();
   const className = classNames(`${extraClass}`, { 'hover:underline': !!filterInfo })
 
   if (filterInfo) {
-    const {prefix, filter, labels} = filterInfo
+    const { prefix, filter, labels } = filterInfo
     const newFilters = replaceFilterByPrefix(query, prefix, filter)
     const newLabels = cleanLabels(newFilters, query.labels, filter[1], labels)
     const filterQuery = updatedQuery({ filters: newFilters, labels: newLabels })
-    
+
     let linkTo = { search: filterQuery.toString() }
     if (pathname) { linkTo.pathname = pathname }
 
@@ -56,90 +59,73 @@ function ExternalLink({ item, externalLinkDest }) {
   return null
 }
 
-// The main function component for rendering list reports and making them react to what
-// is happening on the dashboard.
-
-// A `fetchData` function must be passed through props. This function defines the data
-// to be rendered, and should return a list of objects under a `results` key. Think of
-// these objects as rows. The number of columns that are **actually rendered** is also
-// configurable through the `metrics` prop, which also defines the keys under which
-// column values are read, and how they're rendered. For example:
-
-// | keyLabel           | METRIC_1.renderLabel(query) | METRIC_1.renderLabel(query) | ...
-// |--------------------|-----------------------------|-----------------------------| ---
-// | LISTITEM_1.name    | LISTITEM_1[METRIC_1.key]    | LISTITEM_1[METRIC_2.key]    | ...
-// | LISTITEM_2.name    | LISTITEM_2[METRIC_1.key]    | LISTITEM_2[METRIC_2.key]    | ...
-
-// Further configuration of the report is possible through optional props.
-
-// REQUIRED PROPS:
-
-//   * `keyLabel` - What each entry in the list represents (for UI only).
-
-//   * `query` - The query object representing the current state of the dashboard.
-
-//   * `fetchData` - a function that returns an `api.get` promise that will resolve to an
-//     object containing a `results` key.
-
-//   * `metrics` - a list `Metric` class objects, containing at least the `key,`
-//     `renderLabel`, and `renderValue` fields. Optionally, a Metric object can contain
-//     the keys `meta.plot` and `meta.hiddenOnMobile` to represent additional behaviour
-//     for this metric in the ListReport.
-
-//   * `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:
-
-//   * `onClick` - function with additional action to be taken when a list entry is clicked.
-
-//   * `detailsLink` - the pathname to the detailed view of this report. E.g.:
-//     `/dummy.site/pages`. If this is given as input to the ListReport, the Details button
-//     will always be rendered.
-
-//   * `maybeHideDetails` - set this to `true` if the details button should be hidden on
-//     the condition that there are less than MAX_ITEMS entries in the list. (i.e . nothing
-//     more to show)
-
-//   * `externalLinkDest` - a function that takes a list item and returns an external url
-//     to navigate to. If this prop is given, an additional icon is rendered upon hovering
-//     the entry.
-
-//   * `renderIcon` - a function that takes a list item and returns the
-//     HTML of an icon (such as a flag, favicon, or a screen size icon) for a listItem.
-
-//   * `color` - color of the comparison bars in light-mode
-
-//   * `afterFetchData` - a function to be called directly after `fetchData`. Receives the,
-//     raw API response as an argument. The return value is ignored by ListReport. Allows
-//     hooking into the request lifecycle and doing actions with returned metadata. For
-//     example, the parent component might want to control what happens when imported data
-//     is included or not.
-
-export default function ListReport(props) {
+/**
+ * 
+ * REQUIRED PROPS
+ *
+ * @param {Function} fetchData - A function that defines the data
+ *    to be rendered, and should return a list of objects under a `results` key. Think of
+ *    these objects as rows. The number of columns that are **actually rendered** is also
+ *    configurable through the `metrics` prop, which also defines the keys under which
+ *    column values are read, and how they're rendered. 
+ * @param {*} keyLabel - What each entry in the list represents (for UI only).
+ * @param {Array.<Metric>} metrics - A list of `Metric` class objects, containing at least the `key,`
+ *    `renderLabel`, and `renderValue` fields. Optionally, a Metric object can contain
+ *    the keys `meta.plot` and `meta.hiddenOnMobile` to represent additional behavior
+ *    for this metric in the ListReport.
+ * @param {Function} 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
+ * 
+ * @param {Function} [onClick] - Function with additional action to be taken when a list entry is clicked.
+ * @param {string} [detailsLink] - The pathname to the detailed view of this report. E.g.:
+ *     `/dummy.site/pages`. If this is given as input to the ListReport, the Details button
+ *     will always be rendered.
+ * @param {boolean} [maybeHideDetails] - Set this to `true` if the details button should be hidden on
+ *     the condition that there are less than MAX_ITEMS entries in the list (i.e. nothing
+ *     more to show).
+ * @param {Function} [externalLinkDest] - A function that takes a list item and returns an external URL
+ *     to navigate to. If this prop is given, an additional icon is rendered upon hovering
+ *     the entry.
+ * @param {Function} [renderIcon] - A function that takes a list item and returns the
+ *     HTML of an icon (such as a flag, favicon, or a screen size icon) for a list item.
+ * @param {string} [color] - Color of the comparison bars in light-mode.
+ * @param {Function} [afterFetchData] - A function to be called directly after `fetchData`. Receives the
+ *     raw API response as an argument. The return value is ignored by ListReport. Allows
+ *     hooking into the request lifecycle and doing actions with returned metadata. For
+ *     example, the parent component might want to control what happens when imported data
+ *     is included or not.
+ *  
+ * @returns {HTMLElement} Table of metrics, in the following format:
+ * | keyLabel           | METRIC_1.renderLabel(query) | METRIC_2.renderLabel(query) | ...
+ * |--------------------|-----------------------------|-----------------------------| ---
+ * | LISTITEM_1.name    | LISTITEM_1[METRIC_1.key]    | LISTITEM_1[METRIC_2.key]    | ...
+ * | LISTITEM_2.name    | LISTITEM_2[METRIC_1.key]    | LISTITEM_2[METRIC_2.key]    | ...
+ */
+export default function ListReport({ keyLabel, metrics, colMinWidth = COL_MIN_WIDTH, afterFetchData, detailsLink, maybeHideDetails, onClick, color, getFilterFor, renderIcon, externalLinkDest, fetchData }) {
+  const { query } = useQueryContext();
   const [state, setState] = useState({ loading: true, list: null })
   const [visible, setVisible] = useState(false)
-  const metrics = props.metrics
-  const colMinWidth = props.colMinWidth || COL_MIN_WIDTH
 
-  const isRealtime = props.query.period === 'realtime'
-  const goalFilterApplied = hasGoalFilter(props.query)
+  const isRealtime = isRealTimeDashboard(query);
+  const goalFilterApplied = hasGoalFilter(query);
 
-  const fetchData = useCallback(() => {
+  const getData = useCallback(() => {
     if (!isRealtime) {
       setState({ loading: true, list: null })
     }
-    props.fetchData()
+    fetchData()
       .then((response) => {
-        if (props.afterFetchData) {
-          props.afterFetchData(response)
+        if (afterFetchData) {
+          afterFetchData(response)
         }
 
         setState({ loading: false, list: response.results })
       })
-  }, [props.keyLabel, props.query])
+  }, [keyLabel, query])
 
   const onVisible = () => { setVisible(true) }
 
@@ -154,12 +140,12 @@ export default function ListReport(props) {
 
   useEffect(() => {
     if (visible) {
-      if (isRealtime) { document.addEventListener('tick', fetchData) }
-      fetchData()
+      if (isRealtime) { document.addEventListener('tick', getData) }
+      getData()
     }
 
-    return () => { document.removeEventListener('tick', fetchData) }
-  }, [props.keyLabel, props.query, visible]);
+    return () => { document.removeEventListener('tick', getData) }
+  }, [keyLabel, query, visible]);
 
   // returns a filtered `metrics` list. Since currently, the backend can return different
   // metrics based on filters and existing data, this function validates that the metrics
@@ -205,14 +191,14 @@ export default function ListReport(props) {
           className={`${metric.key} text-right ${hiddenOnMobileClass(metric)}`}
           style={{ minWidth: colMinWidth }}
         >
-          { metric.renderLabel(props.query) }
+          {metric.renderLabel(query)}
         </div>
       )
     })
 
     return (
       <div className="pt-3 w-full text-xs font-bold tracking-wide text-gray-500 flex items-center dark:text-gray-400">
-        <span className="flex-grow truncate">{props.keyLabel}</span>
+        <span className="flex-grow truncate">{keyLabel}</span>
         {metricLabels}
       </div>
     )
@@ -238,7 +224,7 @@ export default function ListReport(props) {
   }
 
   function renderBarFor(listItem) {
-    const lightBackground = props.color || 'bg-green-50'
+    const lightBackground = color || 'bg-green-50'
     const metricToPlot = metrics.find(metric => metric.meta.plot).key
 
     return (
@@ -251,9 +237,8 @@ export default function ListReport(props) {
         >
           <div className="flex justify-start px-2 py-1.5 group text-sm dark:text-gray-300 relative z-9 break-all w-full">
             <FilterLink
-              query={props.query}
-              filterInfo={props.getFilterFor(listItem)}
-              onClick={props.onClick}
+              filterInfo={getFilterFor(listItem)}
+              onClick={onClick}
               extraClass="max-w-max w-full flex items-center md:overflow-hidden"
             >
               {maybeRenderIconFor(listItem)}
@@ -262,7 +247,7 @@ export default function ListReport(props) {
                 {trimURL(listItem.name, colMinWidth)}
               </span>
             </FilterLink>
-            <ExternalLink item={listItem} externalLinkDest={props.externalLinkDest} />
+            <ExternalLink item={listItem} externalLinkDest={externalLinkDest} />
           </div>
         </Bar>
       </div>
@@ -270,8 +255,8 @@ export default function ListReport(props) {
   }
 
   function maybeRenderIconFor(listItem) {
-    if (props.renderIcon) {
-      return props.renderIcon(listItem)
+    if (renderIcon) {
+      return renderIcon(listItem)
     }
   }
 
@@ -284,7 +269,7 @@ export default function ListReport(props) {
           style={{ width: colMinWidth, minWidth: colMinWidth }}
         >
           <span className="font-medium text-sm dark:text-gray-200 text-right">
-            { metric.renderValue(listItem[metric.key]) }
+            {metric.renderValue(listItem[metric.key])}
           </span>
         </div>
       )
@@ -309,10 +294,10 @@ export default function ListReport(props) {
 
   function maybeRenderDetailsLink() {
     const moreResultsAvailable = state.list.length >= MAX_ITEMS
-    const hideDetails = props.maybeHideDetails && !moreResultsAvailable
+    const hideDetails = maybeHideDetails && !moreResultsAvailable
 
-    const showDetails = props.detailsLink && !state.loading && !hideDetails
-    return showDetails && <MoreLink className={'mt-2'} url={props.detailsLink} list={state.list} />
+    const showDetails = detailsLink && !state.loading && !hideDetails
+    return showDetails && <MoreLink className={'mt-2'} url={detailsLink} list={state.list} />
   }
 
   return (
diff --git a/assets/js/dashboard/stats/sources/index.js b/assets/js/dashboard/stats/sources/index.js
index b8121b002d906..5cb2bc95cb265 100644
--- a/assets/js/dashboard/stats/sources/index.js
+++ b/assets/js/dashboard/stats/sources/index.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import SearchTerms from './search-terms'
-import SourceList from './source-list'
-import ReferrerList from './referrer-list'
-import { getFiltersByKeyPrefix, isFilteringOnFixedValue } from '../../util/filters'
+import SearchTerms from './search-terms';
+import SourceList from './source-list';
+import ReferrerList from './referrer-list';
+import { getFiltersByKeyPrefix, isFilteringOnFixedValue } from '../../util/filters';
 import { useQueryContext } from '../../query-context';
 import { useSiteContext } from '../../site-context';
 
-
 export default function Sources() {
   const { query } = useQueryContext();
   const site = useSiteContext();
@@ -14,8 +13,8 @@ export default function Sources() {
     return <SearchTerms query={query} site={site} />
   } else if (isFilteringOnFixedValue(query, 'source')) {
     const [[_operation, _filterKey, clauses]] = getFiltersByKeyPrefix(query, "source")
-    return <ReferrerList query={query} site={site} source={clauses[0]} />
+    return <ReferrerList source={clauses[0]} />
   } else {
-    return <SourceList query={query} site={site} />
+    return <SourceList />
   }
 }
diff --git a/assets/js/dashboard/stats/sources/referrer-list.js b/assets/js/dashboard/stats/sources/referrer-list.js
index 06c9c375d6d99..caa7d2cdb0400 100644
--- a/assets/js/dashboard/stats/sources/referrer-list.js
+++ b/assets/js/dashboard/stats/sources/referrer-list.js
@@ -1,12 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import * as api from '../../api'
-import * as url from '../../util/url'
-import * as metrics from '../reports/metrics'
-import { hasGoalFilter } from "../../util/filters"
-import ListReport from '../reports/list'
-import ImportedQueryUnsupportedWarning from '../../stats/imported-query-unsupported-warning'
+import * as api from '../../api';
+import * as url from '../../util/url';
+import * as metrics from '../reports/metrics';
+import { hasGoalFilter } from "../../util/filters";
+import ListReport from '../reports/list';
+import ImportedQueryUnsupportedWarning from '../../stats/imported-query-unsupported-warning';
+import { useQueryContext } from '../../query-context';
+import { useSiteContext } from '../../site-context';
 
-export default function Referrers({ source, site, query }) {
+export default function Referrers({ source }) {
+  const { query } = useQueryContext();
+  const site = useSiteContext()
   const [skipImportedReason, setSkipImportedReason] = useState(null)
   const [loading, setLoading] = useState(true)
 
@@ -47,7 +51,7 @@ export default function Referrers({ source, site, query }) {
 
   function chooseMetrics() {
     return [
-      metrics.createVisitors({meta: {plot: true}}),
+      metrics.createVisitors({ meta: { plot: true } }),
       hasGoalFilter(query) && metrics.createConversionRate(),
     ].filter(metric => !!metric)
   }
@@ -56,7 +60,7 @@ export default function Referrers({ source, site, query }) {
     <div className="flex flex-col flex-grow">
       <div className="flex gap-x-1">
         <h3 className="font-bold dark:text-gray-100">Top Referrers</h3>
-        <ImportedQueryUnsupportedWarning loading={loading} query={query} skipImportedReason={skipImportedReason} />
+        <ImportedQueryUnsupportedWarning loading={loading} skipImportedReason={skipImportedReason} />
       </div>
       <ListReport
         fetchData={fetchReferrers}
@@ -65,7 +69,6 @@ export default function Referrers({ source, site, query }) {
         keyLabel="Referrer"
         metrics={chooseMetrics()}
         detailsLink={url.sitePath(`referrers/${encodeURIComponent(source)}`)}
-        query={query}
         externalLinkDest={externalLinkDest}
         renderIcon={renderIcon}
         color="bg-blue-50"
diff --git a/assets/js/dashboard/stats/sources/source-list.js b/assets/js/dashboard/stats/sources/source-list.js
index adfe5645d6455..e04b1fb166117 100644
--- a/assets/js/dashboard/stats/sources/source-list.js
+++ b/assets/js/dashboard/stats/sources/source-list.js
@@ -1,15 +1,17 @@
 import React, { Fragment, useEffect, useState } from 'react';
 
-import * as storage from '../../util/storage'
-import * as url from '../../util/url'
-import * as api from '../../api'
-import ListReport from '../reports/list'
+import * as storage from '../../util/storage';
+import * as url from '../../util/url';
+import * as api from '../../api';
+import ListReport from '../reports/list';
 import * as metrics from '../reports/metrics';
-import { hasGoalFilter } from "../../util/filters"
-import { Menu, Transition } from '@headlessui/react'
-import { ChevronDownIcon } from '@heroicons/react/20/solid'
-import classNames from 'classnames'
+import { hasGoalFilter } from "../../util/filters";
+import { Menu, Transition } from '@headlessui/react';
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
+import classNames from 'classnames';
 import ImportedQueryUnsupportedWarning from '../imported-query-unsupported-warning';
+import { useQueryContext } from '../../query-context';
+import { useSiteContext } from '../../site-context';
 
 const UTM_TAGS = {
   utm_medium: { label: 'UTM Medium', shortLabel: 'UTM Medium', endpoint: '/utm_mediums' },
@@ -19,8 +21,9 @@ const UTM_TAGS = {
   utm_term: { label: 'UTM Term', shortLabel: 'UTM Term', endpoint: '/utm_terms' },
 }
 
-function AllSources(props) {
-  const { site, query } = props
+function AllSources({ afterFetchData }) {
+  const { query } = useQueryContext();
+  const site = useSiteContext();
 
   function fetchData() {
     return api.get(url.apiPath(site, '/sources'), query, { limit: 9 })
@@ -44,7 +47,7 @@ function AllSources(props) {
 
   function chooseMetrics() {
     return [
-      metrics.createVisitors({meta: {plot: true}}),
+      metrics.createVisitors({ meta: { plot: true } }),
       hasGoalFilter(query) && metrics.createConversionRate(),
     ].filter(metric => !!metric)
   }
@@ -52,21 +55,21 @@ function AllSources(props) {
   return (
     <ListReport
       fetchData={fetchData}
-      afterFetchData={props.afterFetchData}
+      afterFetchData={afterFetchData}
       getFilterFor={getFilterFor}
       keyLabel="Source"
       metrics={chooseMetrics()}
       detailsLink={url.sitePath('sources')}
       renderIcon={renderIcon}
-      query={query}
       color="bg-blue-50"
     />
   )
 }
 
-function UTMSources(props) {
-  const { site, query } = props
-  const utmTag = UTM_TAGS[props.tab]
+function UTMSources({ tab, afterFetchData }) {
+  const { query } = useQueryContext();
+  const site = useSiteContext();
+  const utmTag = UTM_TAGS[tab]
 
   function fetchData() {
     return api.get(url.apiPath(site, utmTag.endpoint), query, { limit: 9 })
@@ -74,14 +77,14 @@ function UTMSources(props) {
 
   function getFilterFor(listItem) {
     return {
-      prefix: props.tab,
-      filter: ["is", props.tab, [listItem['name']]]
+      prefix: tab,
+      filter: ["is", tab, [listItem['name']]]
     }
   }
 
   function chooseMetrics() {
     return [
-      metrics.createVisitors({meta: {plot: true}}),
+      metrics.createVisitors({ meta: { plot: true } }),
       hasGoalFilter(query) && metrics.createConversionRate(),
     ].filter(metric => !!metric)
   }
@@ -89,20 +92,20 @@ function UTMSources(props) {
   return (
     <ListReport
       fetchData={fetchData}
-      afterFetchData={props.afterFetchData}
+      afterFetchData={afterFetchData}
       getFilterFor={getFilterFor}
       keyLabel={utmTag.label}
       metrics={chooseMetrics()}
       detailsLink={url.sitePath(utmTag.endpoint)}
-      query={query}
       color="bg-blue-50"
     />
   )
 }
 
-export default function SourceList(props) {
-  const { site, query } = props
-  const tabKey = 'sourceTab__' + props.site.domain
+export default function SourceList() {
+  const site = useSiteContext();
+  const { query } = useQueryContext();
+  const tabKey = 'sourceTab__' + site.domain
   const storedTab = storage.getItem(tabKey)
   const [currentTab, setCurrentTab] = useState(storedTab || 'all')
   const [loading, setLoading] = useState(true)
@@ -174,9 +177,9 @@ export default function SourceList(props) {
 
   function renderContent() {
     if (currentTab === 'all') {
-      return <AllSources site={site} query={query} afterFetchData={afterFetchData} />
+      return <AllSources afterFetchData={afterFetchData} />
     } else {
-      return <UTMSources tab={currentTab} site={site} query={query} afterFetchData={afterFetchData} />
+      return <UTMSources tab={currentTab} afterFetchData={afterFetchData} />
     }
   }
 
@@ -193,7 +196,7 @@ export default function SourceList(props) {
           <h3 className="font-bold dark:text-gray-100">
             Top Sources
           </h3>
-          <ImportedQueryUnsupportedWarning loading={loading} query={query} skipImportedReason={skipImportedReason} />
+          <ImportedQueryUnsupportedWarning loading={loading} skipImportedReason={skipImportedReason} />
         </div>
         {renderTabs()}
       </div>
diff --git a/assets/js/dashboard/util/filters.js b/assets/js/dashboard/util/filters.js
index 92611f955b0a2..a57a724f5786c 100644
--- a/assets/js/dashboard/util/filters.js
+++ b/assets/js/dashboard/util/filters.js
@@ -1,4 +1,6 @@
+import { useMemo } from "react"
 import * as api from '../api'
+import { useQueryContext } from '../query-context'
 
 export const FILTER_MODAL_TO_FILTER_GROUP = {
   'page': ['page', 'entry_page', 'exit_page'],
@@ -99,10 +101,21 @@ export function hasGoalFilter(query) {
   return getFiltersByKeyPrefix(query, "goal").length > 0
 }
 
+export function useHasGoalFilter() {
+  const { query: { filters } } = useQueryContext();
+  return useMemo(() => getFiltersByKeyPrefix({ filters }, "goal").length > 0, [filters]);
+}
+
 export function isRealTimeDashboard(query) {
   return query?.period === 'realtime'
 }
 
+export function useIsRealtimeDashboard() {
+  const { query: { period } } = useQueryContext();
+  return useMemo(() => isRealTimeDashboard({ period }), [period]);
+}
+
+
 // Note: Currently only a single goal filter can be applied at a time.
 export function getGoalFilter(query) {
   return getFiltersByKeyPrefix(query, "goal")[0] || null