Upload folder using huggingface_hub (part 2)

assets/js/dashboard.tsx

@@ -0,0 +1,112 @@
+import React, { ReactNode } from 'react'
+import { createRoot } from 'react-dom/client'
+import 'url-search-params-polyfill'
+
+import { RouterProvider } from 'react-router-dom'
+import { createAppRouter } from './dashboard/router'
+import ErrorBoundary from './dashboard/error/error-boundary'
+import * as api from './dashboard/api'
+import * as timer from './dashboard/util/realtime-update-timer'
+import { maybeDoFERedirect } from './dashboard/util/url-search-params'
+import SiteContextProvider, {
+  parseSiteFromDataset
+} from './dashboard/site-context'
+import UserContextProvider, { Role } from './dashboard/user-context'
+import ThemeContextProvider from './dashboard/theme-context'
+import {
+  GoBackToDashboard,
+  GoToSites,
+  SomethingWentWrongMessage
+} from './dashboard/error/something-went-wrong'
+import {
+  getLimitedToSegment,
+  parseLimitedToSegmentId,
+  parsePreloadedSegments,
+  SegmentsContextProvider
+} from './dashboard/filtering/segments-context'
+
+timer.start()
+
+const container = document.getElementById('stats-react-container')
+
+if (container && container.dataset) {
+  let app: ReactNode
+
+  try {
+    const site = parseSiteFromDataset(container.dataset)
+
+    const sharedLinkAuth = container.dataset.sharedLinkAuth
+
+    if (sharedLinkAuth) {
+      api.setSharedLinkAuth(sharedLinkAuth)
+    }
+
+    const limitedToSegmentId = parseLimitedToSegmentId(container.dataset)
+    const preloadedSegments = parsePreloadedSegments(container.dataset)
+    const limitedToSegment = getLimitedToSegment(
+      limitedToSegmentId,
+      preloadedSegments
+    )
+
+    try {
+      maybeDoFERedirect(window.location, window.history, limitedToSegment)
+    } catch (e) {
+      console.error('Error redirecting in a backwards compatible way', e)
+    }
+
+    const router = createAppRouter(site)
+
+    app = (
+      <ErrorBoundary
+        renderFallbackComponent={({ error }) => (
+          <SomethingWentWrongMessage
+            error={error}
+            callToAction={<GoBackToDashboard site={site} />}
+          />
+        )}
+      >
+        <ThemeContextProvider>
+          <SiteContextProvider site={site}>
+            <UserContextProvider
+              user={
+                container.dataset.loggedIn === 'true'
+                  ? {
+                      loggedIn: true,
+                      id: parseInt(container.dataset.currentUserId!, 10),
+                      role: container.dataset.currentUserRole as Role,
+                      team: {
+                        identifier: container.dataset.teamIdentifier ?? null,
+                        hasConsolidatedView:
+                          container.dataset.consolidatedViewAvailable === 'true'
+                      }
+                    }
+                  : {
+                      loggedIn: false,
+                      id: null,
+                      role: container.dataset.currentUserRole as Role,
+                      team: {
+                        identifier: null,
+                        hasConsolidatedView: false
+                      }
+                    }
+              }
+            >
+              <SegmentsContextProvider
+                limitedToSegment={limitedToSegment}
+                preloadedSegments={preloadedSegments}
+              >
+                <RouterProvider router={router} />
+              </SegmentsContextProvider>
+            </UserContextProvider>
+          </SiteContextProvider>
+        </ThemeContextProvider>
+      </ErrorBoundary>
+    )
+  } catch (err) {
+    console.error('Error loading dashboard', err)
+    app = <SomethingWentWrongMessage error={err} callToAction={<GoToSites />} />
+  }
+
+  const root = createRoot(container)
+  root.render(app)
+}

assets/js/dashboard/util/filter-text.tsx

@@ -0,0 +1,78 @@
+import React, { ReactNode, isValidElement, Fragment } from 'react'
+import { DashboardState, Filter } from '../dashboard-state'
+import {
+  EVENT_PROPS_PREFIX,
+  FILTER_OPERATIONS_DISPLAY_NAMES,
+  formattedFilters,
+  getLabel,
+  getPropertyKeyFromFilterKey
+} from './filters'
+
+export function styledFilterText(
+  dashboardState: Pick<DashboardState, 'labels'>,
+  [operation, filterKey, clauses]: Filter
+) {
+  if (filterKey.startsWith(EVENT_PROPS_PREFIX)) {
+    const propKey = getPropertyKeyFromFilterKey(filterKey)
+    return (
+      <>
+        Property <b>{propKey}</b> {FILTER_OPERATIONS_DISPLAY_NAMES[operation]}{' '}
+        {formatClauses(clauses)}
+      </>
+    )
+  }
+
+  const formattedFilter = (
+    formattedFilters as Record<string, string | undefined>
+  )[filterKey]
+  const clausesLabels = clauses.map((value) =>
+    getLabel(dashboardState.labels, filterKey, value)
+  )
+
+  if (!formattedFilter) {
+    throw new Error(`Unknown filter: ${filterKey}`)
+  }
+
+  return (
+    <>
+      {capitalize(formattedFilter)} {FILTER_OPERATIONS_DISPLAY_NAMES[operation]}{' '}
+      {formatClauses(clausesLabels)}
+    </>
+  )
+}
+
+export function plainFilterText(
+  dashboardState: Pick<DashboardState, 'labels'>,
+  filter: Filter
+) {
+  return reactNodeToString(styledFilterText(dashboardState, filter))
+}
+
+function formatClauses(labels: Array<string | number>): ReactNode[] {
+  return labels.map((label, index) => (
+    <Fragment key={index}>
+      {index > 0 && ' or '}
+      <b>{label}</b>
+    </Fragment>
+  ))
+}
+
+function capitalize(str: string): string {
+  return str[0].toUpperCase() + str.slice(1)
+}
+
+function reactNodeToString(reactNode: ReactNode): string {
+  let string = ''
+  if (typeof reactNode === 'string') {
+    string = reactNode
+  } else if (typeof reactNode === 'number') {
+    string = reactNode.toString()
+  } else if (reactNode instanceof Array) {
+    reactNode.forEach(function (child) {
+      string += reactNodeToString(child)
+    })
+  } else if (isValidElement(reactNode)) {
+    string += reactNodeToString(reactNode.props.children)
+  }
+  return string
+}

assets/js/dashboard/util/filters.js

@@ -0,0 +1,311 @@
+import { formatSegmentIdAsLabelKey } from '../filtering/segments'
+
+export const FILTER_MODAL_TO_FILTER_GROUP = {
+  page: ['page', 'entry_page', 'exit_page'],
+  source: ['source', 'channel', 'referrer'],
+  location: ['country', 'region', 'city'],
+  screen: ['screen'],
+  browser: ['browser', 'browser_version'],
+  os: ['os', 'os_version'],
+  utm: ['utm_medium', 'utm_source', 'utm_campaign', 'utm_term', 'utm_content'],
+  goal: ['goal'],
+  props: ['props'],
+  hostname: ['hostname'],
+  segment: ['segment']
+}
+
+export function getAvailableFilterModals(site) {
+  const { props, ...rest } = FILTER_MODAL_TO_FILTER_GROUP
+  return {
+    ...rest,
+    ...(site.propsAvailable && { props })
+  }
+}
+
+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 EVENT_PROPS_PREFIX = 'props:'
+
+export const FILTER_OPERATIONS = {
+  is: 'is',
+  isNot: 'is_not',
+  contains: 'contains',
+  contains_not: 'contains_not',
+  has_not_done: 'has_not_done'
+}
+
+export const FILTER_OPERATIONS_DISPLAY_NAMES = {
+  [FILTER_OPERATIONS.is]: 'is',
+  [FILTER_OPERATIONS.isNot]: 'is not',
+  [FILTER_OPERATIONS.contains]: 'contains',
+  [FILTER_OPERATIONS.contains_not]: 'does not contain',
+  // :NOTE: Goal filters are displayed as "is not" in the UI, but in the backend they are wrapped with has_not_done.
+  // It is currently unclear if we'll do the same for other event filters in the future.
+  [FILTER_OPERATIONS.has_not_done]: 'is not'
+}
+
+export function supportsIsNot(filterName) {
+  return !['goal', 'prop_key'].includes(filterName)
+}
+
+export function supportsContains(filterName) {
+  return !['screen']
+    .concat(FILTER_MODAL_TO_FILTER_GROUP['location'])
+    .includes(filterName)
+}
+
+export function supportsHasDoneNot(filterName) {
+  return filterName === 'goal'
+}
+
+export function isFreeChoiceFilterOperation(operation) {
+  return [FILTER_OPERATIONS.contains, FILTER_OPERATIONS.contains_not].includes(
+    operation
+  )
+}
+
+export function getLabel(labels, filterKey, value) {
+  if (['country', 'region', 'city'].includes(filterKey)) {
+    return labels[value]
+  }
+
+  if (filterKey === 'segment') {
+    return labels[formatSegmentIdAsLabelKey(value)]
+  }
+
+  return value
+}
+
+export function getPropertyKeyFromFilterKey(filterKey) {
+  return filterKey.slice(EVENT_PROPS_PREFIX.length)
+}
+
+export function getFiltersByKeyPrefix(dashboardState, prefix) {
+  return dashboardState.filters.filter(hasDimensionPrefix(prefix))
+}
+
+const hasDimensionPrefix =
+  (prefix) =>
+  ([_operation, dimension, _clauses]) =>
+    dimension.startsWith(prefix)
+
+export function omitFiltersByKeyPrefix(dashboardState, prefix) {
+  return dashboardState.filters.filter(
+    ([_operation, filterKey, _clauses]) => !filterKey.startsWith(prefix)
+  )
+}
+
+export function replaceFilterByPrefix(dashboardState, prefix, filter) {
+  return omitFiltersByKeyPrefix(dashboardState, prefix).concat([filter])
+}
+
+export function isFilteringOnFixedValue(
+  dashboardState,
+  filterKey,
+  expectedValue
+) {
+  const filters = dashboardState.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
+}
+
+export function hasPageFilter(dashboardState) {
+  return dashboardState.resolvedFilters.some(hasDimensionPrefix('page'))
+}
+
+export function hasConversionGoalFilter(dashboardState) {
+  const resolvedGoalFilters = dashboardState.resolvedFilters.filter(
+    hasDimensionPrefix('goal')
+  )
+
+  return resolvedGoalFilters.some(([operation, _filterKey, _clauses]) => {
+    return operation !== FILTER_OPERATIONS.has_not_done
+  })
+}
+
+export function isRealTimeDashboard(dashboardState) {
+  return dashboardState?.period === 'realtime'
+}
+
+// Note: Currently only a single goal filter can be applied at a time.
+export function getGoalFilter(dashboardState) {
+  return getFiltersByKeyPrefix(dashboardState, 'goal')[0] || null
+}
+
+export function formatFilterGroup(filterGroup) {
+  if (filterGroup === 'utm') {
+    return 'UTM tags'
+  } else if (filterGroup === 'location') {
+    return 'Location'
+  } else if (filterGroup === 'props') {
+    return 'Property'
+  } else {
+    return formattedFilters[filterGroup]
+  }
+}
+
+export function cleanLabels(filters, labels, mergedFilterKey, mergedLabels) {
+  const filteredBy = Object.fromEntries(
+    filters
+      .flatMap(([_operation, filterKey, clauses]) => {
+        if (filterKey === 'segment') {
+          return clauses.map(formatSegmentIdAsLabelKey)
+        }
+        if (['country', 'region', 'city'].includes(filterKey)) {
+          return clauses
+        }
+        return []
+      })
+      .map((value) => [value, true])
+  )
+
+  let result = { ...labels }
+  for (const value in labels) {
+    if (!filteredBy[value]) {
+      delete result[value]
+    }
+  }
+
+  if (
+    mergedFilterKey &&
+    ['country', 'region', 'city', 'segment'].includes(mergedFilterKey)
+  ) {
+    result = {
+      ...result,
+      ...mergedLabels
+    }
+  }
+
+  return result
+}
+
+const NO_PREFIX_KEYS = new Set(['segment'])
+const EVENT_FILTER_KEYS = new Set(['name', 'page', 'goal', 'hostname'])
+const EVENT_PREFIX = 'event:'
+const VISIT_PREFIX = 'visit:'
+
+export function hasEventFilters(dashboardState) {
+  return dashboardState.resolvedFilters.some(
+    ([_operation, filterKey, _clauses]) => isEventFilterKey(filterKey)
+  )
+}
+
+function isEventFilterKey(filterKey) {
+  return (
+    EVENT_FILTER_KEYS.has(filterKey) || filterKey.startsWith(EVENT_PROPS_PREFIX)
+  )
+}
+
+function remapFilterKey(filterKey) {
+  if (NO_PREFIX_KEYS.has(filterKey)) {
+    return filterKey
+  }
+  if (isEventFilterKey(filterKey)) {
+    return `${EVENT_PREFIX}${filterKey}`
+  }
+  return `${VISIT_PREFIX}${filterKey}`
+}
+
+function remapApiFilterKey(apiFilterKey) {
+  const isNoPrefixKey = NO_PREFIX_KEYS.has(apiFilterKey)
+
+  if (isNoPrefixKey) {
+    return apiFilterKey
+  }
+
+  const isEventKey = apiFilterKey.startsWith(EVENT_PREFIX)
+  const isVisitKey = apiFilterKey.startsWith(VISIT_PREFIX)
+
+  if (isEventKey) {
+    return apiFilterKey.substring(EVENT_PREFIX.length)
+  }
+  if (isVisitKey) {
+    return apiFilterKey.substring(VISIT_PREFIX.length)
+  }
+
+  return apiFilterKey // maybe throw?
+}
+
+export function remapToApiFilters(filters) {
+  return filters.map(remapToApiFilter)
+}
+
+export function remapFromApiFilters(apiFilters) {
+  return apiFilters.map((apiFilter) => {
+    const [operation, ...rest] = apiFilter
+    if (operation === 'has_not_done') {
+      const [[_, apiFilterKey, clauses]] = rest
+      return [
+        FILTER_OPERATIONS.has_not_done,
+        remapApiFilterKey(apiFilterKey),
+        clauses
+      ]
+    }
+    const [apiFilterKey, clauses] = rest
+    return [operation, remapApiFilterKey(apiFilterKey), clauses]
+  })
+}
+
+export function serializeApiFilters(filters) {
+  return JSON.stringify(remapToApiFilters(filters))
+}
+
+function remapToApiFilter([operation, filterKey, clauses, ...modifiers]) {
+  const apiFilterKey = remapFilterKey(filterKey)
+  if (apiFilterKey === 'segment') {
+    return [operation, apiFilterKey, clauses.map((v) => parseInt(v, 10))]
+  }
+  if (operation === FILTER_OPERATIONS.has_not_done) {
+    // :NOTE: Frontend does not support advanced query building that's used in the backend.
+    // As such we emulate the backend behavior for has_not_done goal filters
+    return ['has_not_done', ['is', apiFilterKey, clauses, ...modifiers]]
+  } else {
+    return [operation, apiFilterKey, clauses, ...modifiers]
+  }
+}
+
+export function getFilterGroup([_operation, filterKey, _clauses]) {
+  return filterKey.startsWith(EVENT_PROPS_PREFIX) ? 'props' : filterKey
+}
+
+export const formattedFilters = {
+  goal: 'Goal',
+  props: 'Property',
+  prop_key: 'Property',
+  prop_value: 'Value',
+  source: 'Source',
+  channel: 'Channel',
+  utm_medium: 'UTM medium',
+  utm_source: 'UTM source',
+  utm_campaign: 'UTM campaign',
+  utm_content: 'UTM content',
+  utm_term: 'UTM term',
+  referrer: 'Referrer URL',
+  screen: 'Screen size',
+  browser: 'Browser',
+  browser_version: 'Browser version',
+  os: 'Operating system',
+  os_version: 'Operating system version',
+  country: 'Country',
+  region: 'Region',
+  city: 'City',
+  page: 'Page',
+  hostname: 'Hostname',
+  entry_page: 'Entry page',
+  exit_page: 'Exit page',
+  segment: 'Segment'
+}

assets/js/dashboard/util/filters.test.ts

@@ -0,0 +1,82 @@
+import { getAvailableFilterModals, serializeApiFilters } from './filters'
+
+describe(`${getAvailableFilterModals.name}`, () => {
+  it('gives limited object when props are not available', () => {
+    expect(
+      getAvailableFilterModals({
+        propsAvailable: false
+      })
+    ).toEqual({
+      browser: ['browser', 'browser_version'],
+      goal: ['goal'],
+      hostname: ['hostname'],
+      location: ['country', 'region', 'city'],
+      os: ['os', 'os_version'],
+      page: ['page', 'entry_page', 'exit_page'],
+      screen: ['screen'],
+      source: ['source', 'channel', 'referrer'],
+      utm: [
+        'utm_medium',
+        'utm_source',
+        'utm_campaign',
+        'utm_term',
+        'utm_content'
+      ],
+      segment: ['segment']
+    })
+  })
+
+  it('gives full object when props and segments are available', () => {
+    expect(
+      getAvailableFilterModals({
+        propsAvailable: true
+      })
+    ).toEqual({
+      browser: ['browser', 'browser_version'],
+      goal: ['goal'],
+      hostname: ['hostname'],
+      location: ['country', 'region', 'city'],
+      os: ['os', 'os_version'],
+      page: ['page', 'entry_page', 'exit_page'],
+      screen: ['screen'],
+      source: ['source', 'channel', 'referrer'],
+      utm: [
+        'utm_medium',
+        'utm_source',
+        'utm_campaign',
+        'utm_term',
+        'utm_content'
+      ],
+      props: ['props'],
+      segment: ['segment']
+    })
+  })
+})
+
+describe(`${serializeApiFilters.name}`, () => {
+  it('should prefix filter keys with event: or visit: when appropriate', () => {
+    const filters = [
+      ['is', 'page', ['/docs', '/blog']],
+      ['contains', 'goal', ['Signup']],
+      ['contains_not', 'browser', ['chrom'], { case_sensitive: false }],
+      ['is', 'country', ['US']],
+      ['is_not', 'utm_source', ['google']]
+    ]
+    expect(serializeApiFilters(filters)).toEqual(
+      JSON.stringify([
+        ['is', 'event:page', ['/docs', '/blog']],
+        ['contains', 'event:goal', ['Signup']],
+        ['contains_not', 'visit:browser', ['chrom'], { case_sensitive: false }],
+        ['is', 'visit:country', ['US']],
+        ['is_not', 'visit:utm_source', ['google']]
+      ])
+    )
+  })
+
+  it('wraps has_not_done goal filters in API format', () => {
+    const filters = [['has_not_done', 'goal', ['Signup']]]
+    expect(serializeApiFilters(filters)).toEqual(
+      JSON.stringify([['has_not_done', ['is', 'event:goal', ['Signup']]]])
+    )
+  })
+})

assets/js/dashboard/util/goals.ts

@@ -0,0 +1,34 @@
+import { Filter } from '../dashboard-state'
+import { FILTER_OPERATIONS } from './filters'
+
+export const isPageViewGoal = (goalName: string) => {
+  goalName.startsWith('Visit ')
+}
+
+export const SPECIAL_GOALS = {
+  '404': { title: '404 Pages', prop: 'path' },
+  'Outbound Link: Click': { title: 'Outbound Links', prop: 'url' },
+  'Cloaked Link: Click': { title: 'Cloaked Links', prop: 'url' },
+  'File Download': { title: 'File Downloads', prop: 'url' },
+  'Form: Submission': { title: 'Form Actions', prop: 'path' },
+  'WP Search Queries': {
+    title: 'WordPress Search Queries',
+    prop: 'search_query'
+  },
+  'WP Form Completions': { title: 'WordPress Form Completions', prop: 'path' }
+}
+
+export function isSpecialGoal(
+  goalName: string | number
+): goalName is keyof typeof SPECIAL_GOALS {
+  return goalName in SPECIAL_GOALS
+}
+
+export function getSpecialGoal(goalFilter: Filter) {
+  const [operation, _filterKey, clauses] = goalFilter
+  if (operation === FILTER_OPERATIONS.is && clauses.length == 1) {
+    const goalName = clauses[0]
+    return isSpecialGoal(goalName) ? SPECIAL_GOALS[goalName] : null
+  }
+  return null
+}

assets/js/dashboard/util/money.ts

@@ -0,0 +1,23 @@
+import { numberLongFormatter, numberShortFormatter } from './number-formatter'
+
+type Money = { long: string; short: string }
+
+export function formatMoneyShort(value: Money | number | null) {
+  if (typeof value == 'number') {
+    return numberShortFormatter(value)
+  } else if (value) {
+    return value.short
+  } else {
+    return '-'
+  }
+}
+
+export function formatMoneyLong(value: Money | number | null) {
+  if (typeof value == 'number') {
+    return numberLongFormatter(value)
+  } else if (value) {
+    return value.long
+  } else {
+    return '-'
+  }
+}

assets/js/dashboard/util/number-formatter.test.ts

@@ -0,0 +1,33 @@
+import { numberLongFormatter, numberShortFormatter } from './number-formatter'
+
+describe('numberShortFormatter()', () => {
+  it('converts to short format', () => {
+    expect(numberShortFormatter(0)).toEqual('0')
+    expect(numberShortFormatter(-10)).toEqual('-10')
+    expect(numberShortFormatter(12)).toEqual('12')
+    expect(numberShortFormatter(123)).toEqual('123')
+    expect(numberShortFormatter(1234)).toEqual('1.2k')
+    expect(numberShortFormatter(12345)).toEqual('12.3k')
+    expect(numberShortFormatter(123456)).toEqual('123k')
+    expect(numberShortFormatter(1234567)).toEqual('1.2M')
+    expect(numberShortFormatter(12345678)).toEqual('12.3M')
+    expect(numberShortFormatter(123456789)).toEqual('123M')
+    expect(numberShortFormatter(1234567890)).toEqual('1.2B')
+  })
+})
+
+describe('numberLongFormatter()', () => {
+  it('converts to short format', () => {
+    expect(numberLongFormatter(0)).toEqual('0')
+    expect(numberLongFormatter(-10)).toEqual('-10')
+    expect(numberLongFormatter(12)).toEqual('12')
+    expect(numberLongFormatter(123)).toEqual('123')
+    expect(numberLongFormatter(1234)).toEqual('1,234')
+    expect(numberLongFormatter(12345)).toEqual('12,345')
+    expect(numberLongFormatter(123456)).toEqual('123,456')
+    expect(numberLongFormatter(1234567)).toEqual('1,234,567')
+    expect(numberLongFormatter(12345678)).toEqual('12,345,678')
+    expect(numberLongFormatter(123456789)).toEqual('123,456,789')
+    expect(numberLongFormatter(1234567890)).toEqual('1,234,567,890')
+  })
+})

assets/js/dashboard/util/number-formatter.ts

@@ -0,0 +1,84 @@
+const THOUSAND = 1000
+const HUNDRED_THOUSAND = 100000
+const MILLION = 1000000
+const HUNDRED_MILLION = 100000000
+const BILLION = 1000000000
+const HUNDRED_BILLION = 100000000000
+const TRILLION = 1000000000000
+
+const numberFormat = Intl.NumberFormat('en-US')
+
+export function numberShortFormatter(num: number): string {
+  if (num >= THOUSAND && num < MILLION) {
+    const thousands = num / THOUSAND
+    if (thousands === Math.floor(thousands) || num >= HUNDRED_THOUSAND) {
+      return Math.floor(thousands) + 'k'
+    } else {
+      return Math.floor(thousands * 10) / 10 + 'k'
+    }
+  } else if (num >= MILLION && num < BILLION) {
+    const millions = num / MILLION
+    if (millions === Math.floor(millions) || num >= HUNDRED_MILLION) {
+      return Math.floor(millions) + 'M'
+    } else {
+      return Math.floor(millions * 10) / 10 + 'M'
+    }
+  } else if (num >= BILLION && num < TRILLION) {
+    const billions = num / BILLION
+    if (billions === Math.floor(billions) || num >= HUNDRED_BILLION) {
+      return Math.floor(billions) + 'B'
+    } else {
+      return Math.floor(billions * 10) / 10 + 'B'
+    }
+  } else {
+    return num.toString()
+  }
+}
+
+export function numberLongFormatter(num: number): string {
+  return numberFormat.format(num)
+}
+
+export function nullable<T>(
+  formatter: (num: T) => string
+): (num: T | null) => string {
+  return (num: T | null): string => {
+    if (num === null) {
+      return '-'
+    }
+    return formatter(num)
+  }
+}
+
+function pad(num: number, size: number): string {
+  return ('000' + num).slice(size * -1)
+}
+
+export function durationFormatter(duration: number): string {
+  const hours = Math.floor(duration / 60 / 60)
+  const minutes = Math.floor(duration / 60) % 60
+  const seconds = Math.floor(duration - minutes * 60 - hours * 60 * 60)
+  if (hours > 0) {
+    return `${hours}h ${minutes}m ${seconds}s`
+  } else if (minutes > 0) {
+    return `${minutes}m ${pad(seconds, 2)}s`
+  } else {
+    return `${seconds}s`
+  }
+}
+
+export function roundedNumberFormatter(number: number): string {
+  if (Math.abs(number) > 0 && Math.abs(number) < 0.1) {
+    return number.toFixed(2)
+  } else {
+    return number.toFixed(1).replace(/\.0$/, '')
+  }
+}
+
+export function percentageFormatter(number: number | null): string {
+  if (typeof number === 'number') {
+    return roundedNumberFormatter(number) + '%'
+  } else {
+    return '-'
+  }
+}

assets/js/dashboard/util/realtime-update-timer.js

@@ -0,0 +1,8 @@
+export const REALTIME_UPDATE_TIME_MS = 30_000
+const tickEvent = new Event('tick')
+
+export function start() {
+  setInterval(() => {
+    document.dispatchEvent(tickEvent)
+  }, REALTIME_UPDATE_TIME_MS)
+}

assets/js/dashboard/util/seconds-since-last-load.js

@@ -0,0 +1,15 @@
+import { useState, useEffect } from 'react'
+
+// A function component that renders an integer value of how many
+// seconds have passed from the last data load on the dashboard.
+// Updates the value every second when the component is visible.
+export function SecondsSinceLastLoad({ lastLoadTimestamp }) {
+  const [timeNow, setTimeNow] = useState(new Date())
+
+  useEffect(() => {
+    const interval = setInterval(() => setTimeNow(new Date()), 1000)
+    return () => clearInterval(interval)
+  }, [])
+
+  return Math.round(Math.abs(lastLoadTimestamp - timeNow) / 1000)
+}

assets/js/dashboard/util/storage.js

@@ -0,0 +1,37 @@
+// This module checks if localStorage is available and uses it for persistent frontend storage
+// if possible. Localstorage can be blocked by browsers when people block third-party cookies and
+// the dashboard is running in embedded mode. In those cases, store stuff in a regular object instead.
+
+const memStore = {}
+
+// https://stackoverflow.com/a/16427747
+function testLocalStorageAvailability() {
+  try {
+    const testItem = 'test'
+    localStorage.setItem(testItem, testItem)
+    localStorage.removeItem(testItem)
+    return true
+  } catch (_e) {
+    return false
+  }
+}
+
+const isLocalStorageAvailable = testLocalStorageAvailability()
+
+export function setItem(key, value) {
+  if (isLocalStorageAvailable) {
+    window.localStorage.setItem(key, value)
+  } else {
+    memStore[key] = value
+  }
+}
+
+export function getItem(key) {
+  if (isLocalStorageAvailable) {
+    return window.localStorage.getItem(key)
+  } else {
+    return memStore[key]
+  }
+}
+
+export const getDomainScopedStorageKey = (key, domain) => `${key}__${domain}`

assets/js/dashboard/util/tooltip.tsx

@@ -0,0 +1,109 @@
+import React, { CSSProperties, ReactNode, RefObject, useState } from 'react'
+import { usePopper } from 'react-popper'
+import classNames from 'classnames'
+import { createPortal } from 'react-dom'
+
+export function Tooltip({
+  children,
+  info,
+  className,
+  onClick,
+  boundary,
+  containerRef
+}: {
+  info: ReactNode
+  children: ReactNode
+  className?: string
+  onClick?: () => void
+  /** if provided, the tooltip is confined to the particular element */
+  boundary?: HTMLElement | null
+  /** if defined, the tooltip is rendered in a portal to this element */
+  containerRef?: RefObject<HTMLElement>
+}) {
+  const [visible, setVisible] = useState(false)
+  const [referenceElement, setReferenceElement] =
+    useState<HTMLDivElement | null>(null)
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null
+  )
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: 'top',
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 6]
+        }
+      },
+      ...(boundary
+        ? [
+            {
+              name: 'preventOverflow',
+              options: {
+                boundary: boundary
+              }
+            }
+          ]
+        : [])
+    ]
+  })
+
+  return (
+    <div className={classNames('relative', className)}>
+      <div
+        ref={setReferenceElement}
+        onMouseEnter={() => setVisible(true)}
+        onMouseLeave={() => setVisible(false)}
+        onClick={onClick}
+      >
+        {children}
+      </div>
+      {info && visible && (
+        <TooltipMessage
+          containerRef={containerRef}
+          popperStyle={styles.popper}
+          popperAttributes={attributes.popper}
+          setPopperElement={setPopperElement}
+        >
+          {info}
+        </TooltipMessage>
+      )}
+    </div>
+  )
+}
+
+function TooltipMessage({
+  containerRef,
+  popperStyle,
+  popperAttributes,
+  setPopperElement,
+  children
+}: {
+  containerRef?: RefObject<HTMLElement>
+  popperStyle: CSSProperties
+  popperAttributes?: Record<string, string>
+  setPopperElement: (element: HTMLDivElement) => void
+  children: ReactNode
+}) {
+  const messageElement = (
+    <div
+      ref={setPopperElement}
+      style={popperStyle}
+      {...popperAttributes}
+      className="pointer-events-none z-[99] [body:has(.modal.is-open)_&]:z-[1000] px-2 py-1 rounded-sm text-sm text-gray-100 font-medium bg-gray-800 dark:bg-gray-700"
+      role="tooltip"
+    >
+      {children}
+    </div>
+  )
+  if (containerRef) {
+    if (containerRef.current) {
+      return createPortal(messageElement, containerRef.current)
+    } else {
+      return null
+    }
+  }
+
+  return messageElement
+}

assets/js/dashboard/util/url-search-params-v1.ts

@@ -0,0 +1,121 @@
+import { DashboardState, Filter } from '../dashboard-state'
+import { EVENT_PROPS_PREFIX, FILTER_OPERATIONS } from './filters'
+
+// As of March 2023, Safari does not support negative lookbehind regexes. In case it throws an error, falls back to plain | matching. This means
+// escaping pipe characters in filters does not currently work in Safari
+let NON_ESCAPED_PIPE_REGEX: string | RegExp
+try {
+  NON_ESCAPED_PIPE_REGEX = new RegExp('(?<!\\\\)\\|', 'g')
+} catch (_e) {
+  NON_ESCAPED_PIPE_REGEX = '|'
+}
+
+const ESCAPED_PIPE = '\\|'
+const OPERATION_PREFIX = {
+  [FILTER_OPERATIONS.isNot]: '!',
+  [FILTER_OPERATIONS.contains]: '~',
+  [FILTER_OPERATIONS.is]: ''
+}
+
+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
+}
+
+function isV1(searchParams: URLSearchParams): boolean {
+  for (const k of searchParams.keys()) {
+    if (k === 'props' || LEGACY_URL_PARAMETERS.hasOwnProperty(k)) {
+      return true
+    }
+  }
+  return false
+}
+
+function parseSearch(searchString: string): Record<string, unknown> {
+  const searchParams = new URLSearchParams(searchString)
+  const updatedSearchRecordEntries = []
+  const filters: Filter[] = []
+  let labels: DashboardState['labels'] = {}
+
+  for (const [key, value] of searchParams.entries()) {
+    if (LEGACY_URL_PARAMETERS.hasOwnProperty(key)) {
+      if (typeof value !== 'string') {
+        continue
+      }
+      const filter = parseLegacyFilter(key, value) as Filter
+      filters.push(filter)
+      const labelsKey: string | null | undefined =
+        LEGACY_URL_PARAMETERS[key as keyof typeof LEGACY_URL_PARAMETERS]
+      const labelsParamValue = labelsKey ? searchParams.get(labelsKey) : null
+      if (labelsParamValue) {
+        const clauses = filter[2]
+        const labelsValues = labelsParamValue
+          .split('|')
+          .filter((label) => !!label)
+        const newLabels = Object.fromEntries(
+          clauses.map((clause, index) => [clause, labelsValues[index]])
+        )
+
+        labels = Object.assign(labels, newLabels)
+      }
+    } else {
+      updatedSearchRecordEntries.push([key, value])
+    }
+  }
+
+  const propsParamValue = searchParams.get('props')
+  if (typeof propsParamValue === 'string') {
+    filters.push(...(parseLegacyPropsFilter(propsParamValue) as Filter[]))
+  }
+  updatedSearchRecordEntries.push(['filters', filters], ['labels', labels])
+  return Object.fromEntries(updatedSearchRecordEntries)
+}
+
+function parseLegacyFilter(filterKey: string, rawValue: string): null | Filter {
+  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)
+    // @ts-expect-error API supposedly not present in compilation target, but works anyway
+    .map((val) => val.replaceAll(ESCAPED_PIPE, '|'))
+
+  return [operation, filterKey, clauses]
+}
+
+function parseLegacyPropsFilter(rawValue: string) {
+  return Object.entries(JSON.parse(rawValue)).flatMap(([key, propVal]) =>
+    typeof propVal === 'string'
+      ? [parseLegacyFilter(`${EVENT_PROPS_PREFIX}${key}`, propVal)]
+      : []
+  )
+}
+
+export const v1 = {
+  isV1,
+  parseSearch
+}

assets/js/dashboard/util/url-search-params-v2.test.ts

@@ -0,0 +1,204 @@
+import JsonURL from '@jsonurl/jsonurl'
+import { v2 } from './url-search-params-v2'
+
+const {
+  stringifySearchEntry,
+  stringifySearch,
+  parseSearch,
+  parseSearchFragment
+} = v2
+
+describe('using json URL parsing with URLSearchParams intermediate', () => {
+  beforeEach(() => {
+    // Silence logs in tests
+    jest.spyOn(console, 'error').mockImplementation(jest.fn())
+  })
+  it.each([['#'], ['&'], ['=']])('throws on special symbol %p', (s) => {
+    const searchString = `?param=${encodeURIComponent(s)}`
+    expect(() =>
+      JsonURL.parse(new URLSearchParams(searchString).get('param')!)
+    ).toThrow()
+  })
+})
+
+describe(`${stringifySearchEntry.name}`, () => {
+  it.each<[[string, unknown], [string, string | undefined]]>([
+    [
+      ['any-key', {}],
+      ['any-key', undefined]
+    ],
+    [
+      ['any-key', []],
+      ['any-key', undefined]
+    ],
+    [
+      ['any-key', null],
+      ['any-key', undefined]
+    ],
+    [
+      ['period', 'realtime'],
+      ['period', 'realtime']
+    ],
+    [
+      ['page', 10],
+      ['page', '10']
+    ],
+    [
+      ['labels', { US: 'United States', 3448439: 'São Paulo' }],
+      ['labels', '(3448439:S%C3%A3o+Paulo,US:United+States)']
+    ],
+    [
+      ['filters', [['is', 'props:foo:bar', ['one', 'two']]]],
+      ['filters', "((is,'props:foo:bar',(one,two)))"]
+    ]
+  ])('when input is %p, returns %p', (input, expected) => {
+    const result = stringifySearchEntry(input)
+    expect(result).toEqual(expected)
+  })
+})
+
+describe(`${parseSearchFragment.name}`, () => {
+  it.each([
+    ['', null],
+    ['("foo":)', null],
+    ['(invalid', null],
+    ['null', null],
+
+    ['123', 123],
+    ['string', 'string'],
+    ['item=#', 'item=#'],
+    ['item%3D%23', 'item=#'],
+
+    ['(any:(number:1))', { any: { number: 1 } }],
+    ['(any:(number:1.001))', { any: { number: 1.001 } }],
+    ["(any:(string:'1.001'))", { any: { string: '1.001' } }],
+
+    // Non-JSON strings that should return as string
+    ['undefined', 'undefined'],
+    ['not_json', 'not_json'],
+    ['plainstring', 'plainstring'],
+    ['a|b', 'a|b'],
+    ['foo bar#', 'foo bar#']
+  ])(
+    'when searchStringFragment is %p, returns %p',
+    (searchStringFragment, expected) => {
+      const result = parseSearchFragment(searchStringFragment)
+      expect(result).toEqual(expected)
+    }
+  )
+})
+
+describe(`${parseSearch.name}`, () => {
+  it.each([
+    ['', {}],
+    ['?', {}],
+    [
+      '?arr=(1,2)',
+      {
+        arr: [1, 2]
+      }
+    ],
+    ['?key1=value1&key2=', { key1: 'value1', key2: null }],
+    ['?key1=value1&key2=value2', { key1: 'value1', key2: 'value2' }],
+    [
+      '?key1=(foo:bar)&filters=((is,screen,(Mobile,Desktop)))',
+      {
+        key1: { foo: 'bar' },
+        filters: [['is', 'screen', ['Mobile', 'Desktop']]]
+      }
+    ],
+    [
+      '?filters=((is,country,(US)))&labels=(US:United%2BStates)',
+      {
+        filters: [['is', 'country', ['US']]],
+        labels: {
+          US: 'United States'
+        }
+      }
+    ]
+  ])('when searchString is %p, returns %p', (searchString, expected) => {
+    const result = parseSearch(searchString)
+    expect(result).toEqual(expected)
+  })
+})
+
+describe(`${stringifySearch.name} and ${parseSearch.name} are inverses of each other`, () => {
+  it.each([
+    ["?filters=((is,'props:browser_language',(en-US)))"],
+    [
+      '?filters=((contains,utm_term,(_)),(is,screen,(Desktop,Tablet)),(is,page,(/open-source-website-analytics)))&period=custom&keybindHint=A&comparison=previous_period&match_day_of_week=false&from=2024-08-08&to=2024-08-10'
+    ],
+    [
+      "?filters=((is,'props:browser_language',(en-US)),(is,country,(US)),(is,os,(iOS)),(is,os_version,('17.3')),(is,page,('/:dashboard/settings/general')))&labels=(US:United%2BStates)"
+    ],
+    [
+      '?filters=((is,utm_source,(hackernewsletter)),(is,utm_campaign,(profile)))&period=day&keybindHint=D'
+    ]
+  ])(
+    `input %p is returned for ${parseSearch.name}(${parseSearch.name}(input))`,
+    (searchString) => {
+      const searchRecord = parseSearch(searchString)
+      const reStringifiedSearch = stringifySearch(searchRecord)
+      expect(reStringifiedSearch).toEqual(searchString)
+    }
+  )
+
+  it.each([
+    // Corresponding test cases for objects parsed from realistic URLs
+
+    [
+      {
+        filters: [['is', 'props:browser_language', ['en-US']]]
+      },
+      "?filters=((is,'props:browser_language',(en-US)))"
+    ],
+    [
+      {
+        filters: [
+          ['contains', 'utm_term', ['_']],
+          ['is', 'screen', ['Desktop', 'Tablet']],
+          ['is', 'page', ['/open-source/analytics/encoded-hash%23']]
+        ],
+        period: 'custom',
+        keybindHint: 'A',
+        comparison: 'previous_period',
+        match_day_of_week: false,
+        from: '2024-08-08',
+        to: '2024-08-10'
+      },
+      '?filters=((contains,utm_term,(_)),(is,screen,(Desktop,Tablet)),(is,page,(%252Fopen-source%252Fanalytics%252Fencoded-hash%252523)))&period=custom&keybindHint=A&comparison=previous_period&match_day_of_week=false&from=2024-08-08&to=2024-08-10'
+    ],
+    [
+      {
+        filters: [
+          ['is', 'props:browser_language', ['en-US']],
+          ['is', 'country', ['US']],
+          ['is', 'os', ['iOS']],
+          ['is', 'os_version', ['17.3']],
+          ['is', 'page', ['/:dashboard/settings/general']]
+        ],
+        labels: { US: 'United States' }
+      },
+      "?filters=((is,'props:browser_language',(en-US)),(is,country,(US)),(is,os,(iOS)),(is,os_version,('17.3')),(is,page,('/:dashboard/settings/general')))&labels=(US:United%2BStates)"
+    ],
+    [
+      {
+        filters: [
+          ['is', 'utm_source', ['hackernewsletter']],
+          ['is', 'utm_campaign', ['profile']]
+        ],
+        period: 'day',
+        keybindHint: 'D'
+      },
+      '?filters=((is,utm_source,(hackernewsletter)),(is,utm_campaign,(profile)))&period=day&keybindHint=D'
+    ]
+  ])(
+    `for input %p, ${stringifySearch.name}(input) returns %p and ${parseSearch.name}(${stringifySearch.name}(input)) returns the original input`,
+    (searchRecord, expected) => {
+      const searchString = stringifySearch(searchRecord)
+      const parsedSearchRecord = parseSearch(searchString)
+      expect(parsedSearchRecord).toEqual(searchRecord)
+      expect(searchString).toEqual(expected)
+    }
+  )
+})

assets/js/dashboard/util/url-search-params-v2.ts

@@ -0,0 +1,83 @@
+import JsonURL from '@jsonurl/jsonurl'
+import {
+  encodeURIComponentPermissive,
+  isSearchEntryDefined
+} from './url-search-params'
+
+const permittedCharactersInURLParamKeyValue = ',:/'
+
+function isV2(urlSearchParams: URLSearchParams): boolean {
+  return !!urlSearchParams.get('filters')
+}
+
+function encodeSearchParamEntry([k, v]: [string, string]): string {
+  return [k, v]
+    .map((s) =>
+      encodeURIComponentPermissive(s, permittedCharactersInURLParamKeyValue)
+    )
+    .join('=')
+}
+
+function stringifySearch(searchRecord: Record<string, unknown>): '' | string {
+  const definedSearchEntries = Object.entries(searchRecord || {})
+    .map(stringifySearchEntry)
+    .filter(isSearchEntryDefined)
+
+  const encodedSearchEntries = definedSearchEntries.map(encodeSearchParamEntry)
+
+  return encodedSearchEntries.length ? `?${encodedSearchEntries.join('&')}` : ''
+}
+
+function stringifySearchEntry([key, value]: [string, unknown]): [
+  string,
+  undefined | string
+] {
+  const isEmptyObjectOrArray =
+    typeof value === 'object' &&
+    value !== null &&
+    Object.entries(value).length === 0
+  if (value === undefined || value === null || isEmptyObjectOrArray) {
+    return [key, undefined]
+  }
+
+  return [key, JsonURL.stringify(value)]
+}
+
+function parseSearchFragment(searchStringFragment: string): null | unknown {
+  if (searchStringFragment === '') {
+    return null
+  }
+  // tricky: the search string fragment is already decoded due to URLSearchParams intermediate (see tests),
+  // and these symbols are unparseable
+  const fragmentWithReEncodedSymbols = searchStringFragment
+    /* @ts-expect-error API supposedly not present in compilation target */
+    .replaceAll('=', encodeURIComponent('='))
+    .replaceAll('#', encodeURIComponent('#'))
+    .replaceAll('|', encodeURIComponent('|'))
+    .replaceAll(' ', encodeURIComponent(' '))
+
+  try {
+    return JsonURL.parse(fragmentWithReEncodedSymbols)
+  } catch (error) {
+    console.error(
+      `Failed to parse URL fragment ${fragmentWithReEncodedSymbols}`,
+      error
+    )
+    return null
+  }
+}
+
+function parseSearch(searchString: string): Record<string, unknown> {
+  const urlSearchParams = new URLSearchParams(searchString)
+  const searchRecord: Record<string, unknown> = {}
+  urlSearchParams.forEach((v, k) => (searchRecord[k] = parseSearchFragment(v)))
+  return searchRecord
+}
+
+export const v2 = {
+  isV2,
+  parseSearch,
+  parseSearchFragment,
+  stringifySearch,
+  stringifySearchEntry
+}

assets/js/dashboard/util/url-search-params.test.ts

@@ -0,0 +1,331 @@
+import { Filter } from '../dashboard-state'
+import {
+  encodeURIComponentPermissive,
+  getSearchWithEnforcedSegment,
+  isSearchEntryDefined,
+  maybeGetLatestReadableSearch,
+  maybeReloadForApiVersion,
+  parseFilter,
+  parseLabelsEntry,
+  parseSearch,
+  parseSimpleSearchEntry,
+  serializeFilter,
+  serializeLabelsEntry,
+  serializeSimpleSearchEntry,
+  stringifySearch
+} from './url-search-params'
+
+describe(`${encodeURIComponentPermissive.name}`, () => {
+  it.each<[string, string]>([
+    ['10.00.00/1', '10.00.00/1'],
+    ['#hashtag', '%23hashtag'],
+    ['100$ coupon', '100%24%20coupon'],
+    ['Visit /any/page', 'Visit%20/any/page'],
+    ['A,B,C', 'A,B,C'],
+    ['props:colon/forward/slash/signs', 'props:colon/forward/slash/signs'],
+    ['https://example.com/path', 'https://example.com/path']
+  ])(
+    'when input is %p, returns %s and decodes back to input',
+    (input, expected) => {
+      const result = encodeURIComponentPermissive(input, ',:/')
+      expect(result).toBe(expected)
+      expect(decodeURIComponent(result)).toBe(input)
+    }
+  )
+})
+
+describe(`${isSearchEntryDefined.name}`, () => {
+  it.each<[[string, string | undefined], boolean]>([
+    [['key', undefined], false],
+    [['key', 'value'], true],
+    [['key', ''], true],
+    [['anotherKey', 'undefined'], true]
+  ])('when entry is %p, returns %s', (entry, expected) => {
+    const result = isSearchEntryDefined(entry)
+    expect(result).toBe(expected)
+  })
+})
+
+describe(`${serializeLabelsEntry.name} and ${parseLabelsEntry.name}(...) are opposite of each other`, () => {
+  test.each<[[string, string], string]>([
+    [['US', 'United States'], 'US,United%20States'],
+    [['FR-IDF', 'Île-de-France'], 'FR-IDF,%C3%8Ele-de-France'],
+    [['1254661', 'Thāne'], '1254661,Th%C4%81ne']
+  ])(
+    'entry %p serializes to %p, parses back to original',
+    (entry, expected) => {
+      const serialized = serializeLabelsEntry(entry)
+      expect(serialized).toEqual(expected)
+      expect(parseLabelsEntry(serialized)).toEqual(entry)
+    }
+  )
+})
+
+describe(`${serializeFilter.name} and ${parseFilter.name}(...) are opposite of each other`, () => {
+  test.each<[Filter, string]>([
+    [
+      ['contains', 'entry_page', ['/forecast/:city', ',"\'']],
+      "contains,entry_page,/forecast/:city,%2C%22'"
+    ],
+    [
+      ['is', 'props:complex/prop-with-comma-etc,$#%', ['(none)']],
+      'is,props:complex/prop-with-comma-etc%2C%24%23%25,(none)'
+    ]
+  ])(
+    'filter %p serializes to %p, parses back to original',
+    (filter, expected) => {
+      const serialized = serializeFilter(filter)
+      expect(serialized).toEqual(expected)
+      expect(parseFilter(serialized)).toEqual(filter)
+    }
+  )
+})
+
+describe(`${serializeSimpleSearchEntry.name} and ${parseSimpleSearchEntry.name}`, () => {
+  test.each<
+    [
+      [string, unknown],
+      [string, string | boolean | undefined],
+      [string, string | boolean] | null
+    ]
+  >([
+    [['undefined-param', undefined], ['undefined-param', undefined], null],
+    [['null-param', null], ['null-param', undefined], null],
+    [['array-param', ['any-value']], ['array-param', undefined], null],
+    [['obj-param', { 'any-key': 'any-value' }], ['obj-param', undefined], null],
+    [
+      ['date-obj', new Date('2024-01-01T10:00:00.000Z')],
+      ['date-obj', undefined],
+      null
+    ],
+    [
+      ['page-nr', 5],
+      ['page-nr', '5'],
+      ['page-nr', '5']
+    ],
+    [
+      ['string-param-resembling-boolean', 'true'],
+      ['string-param-resembling-boolean', 'true'],
+      ['string-param-resembling-boolean', true]
+    ],
+    [
+      ['match-day-of-week', false],
+      ['match-day-of-week', 'false'],
+      ['match-day-of-week', false]
+    ],
+    [
+      ['with-imported-data', true],
+      ['with-imported-data', 'true'],
+      ['with-imported-data', true]
+    ],
+    [
+      ['date-string', '2024-12-10'],
+      ['date-string', '2024-12-10'],
+      ['date-string', '2024-12-10']
+    ]
+  ])(
+    'entry %p serializes to %p, parses to %p',
+    (entry, expectedSerialized, expectedParsedEntry) => {
+      const serialized = serializeSimpleSearchEntry(entry)
+      expect(serialized).toEqual(expectedSerialized)
+      expect(
+        serialized[1] === undefined
+          ? null
+          : parseSimpleSearchEntry(serialized[1])
+      ).toEqual(expectedParsedEntry === null ? null : expectedParsedEntry[1])
+    }
+  )
+})
+
+describe(`${parseSearch.name}`, () => {
+  it.each([
+    ['?', {}, ''],
+    ['?=&&', {}, ''],
+    ['?=undefined', {}, ''],
+    ['?foo=', { foo: '' }, '?foo='],
+    ['??foo', { '?foo': '' }, '?%3Ffoo='],
+    [
+      '?f=is,visit:page,/any/page&f',
+      { filters: [['is', 'visit:page', ['/any/page']]] },
+      '?f=is,visit:page,/any/page'
+    ]
+  ])(
+    'for search string %s, returns search record %p, which in turn stringifies to %s',
+    (searchString, expectedSearchRecord, expectedRestringifiedResult) => {
+      expect(parseSearch(searchString)).toEqual(expectedSearchRecord)
+      expect(stringifySearch(expectedSearchRecord)).toEqual(
+        expectedRestringifiedResult
+      )
+    }
+  )
+})
+
+describe(`${stringifySearch.name}`, () => {
+  it.each([
+    [{}, ''],
+    [
+      {
+        filters: [['is', 'props:browser_language', ['en-US']]]
+      },
+      '?f=is,props:browser_language,en-US'
+    ],
+    [
+      {
+        filters: [
+          ['contains', 'utm_term', ['_']],
+          ['is', 'screen', ['Desktop', 'Tablet']],
+          [
+            'is',
+            'page',
+            ['/open-source/analytics/encoded-hash%23', '/unencoded-hash#']
+          ]
+        ],
+        period: 'custom',
+        keybindHint: 'A',
+        comparison: 'previous_period',
+        match_day_of_week: false,
+        from: '2024-08-08',
+        to: '2024-08-10'
+      },
+      '?f=contains,utm_term,_&f=is,screen,Desktop,Tablet&f=is,page,/open-source/analytics/encoded-hash%2523,/unencoded-hash%23&period=custom&keybindHint=A&comparison=previous_period&match_day_of_week=false&from=2024-08-08&to=2024-08-10'
+    ],
+    [
+      {
+        filters: [
+          ['is', 'props:browser_language', ['en-US']],
+          ['is', 'country', ['US']],
+          ['is', 'os', ['iOS']],
+          ['is', 'os_version', ['17.3', '16.0']],
+          ['is', 'page', ['/:dashboard/settings/general']]
+        ],
+        labels: { US: 'United States' }
+      },
+      '?f=is,props:browser_language,en-US&f=is,country,US&f=is,os,iOS&f=is,os_version,17.3,16.0&f=is,page,/:dashboard/settings/general&l=US,United%20States'
+    ]
+  ])('works as expected', (searchRecord, expectedSearchString) => {
+    expect(stringifySearch(searchRecord)).toEqual(expectedSearchString)
+    expect(parseSearch(expectedSearchString)).toEqual(searchRecord)
+  })
+})
+
+describe(`${maybeGetLatestReadableSearch.name}`, () => {
+  it.each([
+    [''],
+    ['?auth=_Y6YOjUl2beUJF_XzG1hk&theme=light&background=%23ee00ee'],
+    ['?keybindHint=Escape&with_imported=true'],
+    ['?f=is,page,/blog/:category/:article-name&date=2024-10-10&period=day'],
+    ['?f=is,country,US&l=US,United%20States']
+  ])('for modern search string %p returns null', (search) => {
+    expect(maybeGetLatestReadableSearch(search)).toBeNull()
+  })
+
+  it('returns updated search string for jsonurl style filters (v2), and running the updated value through the function again returns null (no redirect loop)', () => {
+    const search =
+      '?filters=((is,exit_page,(/plausible.io)),(is,source,(Brave)),(is,city,(993800)))&labels=(993800:Johannesburg)'
+    const expectedUpdatedSearch =
+      '?f=is,exit_page,/plausible.io&f=is,source,Brave&f=is,city,993800&l=993800,Johannesburg&r=v2'
+    expect(maybeGetLatestReadableSearch(search)).toEqual(expectedUpdatedSearch)
+    expect(maybeGetLatestReadableSearch(expectedUpdatedSearch)).toBeNull()
+  })
+
+  it.each([
+    ['?page=/docs', '?f=is,page,/docs&r=v1'],
+    ['?page=%C3%AA&embed=true', '?f=is,page,%C3%AA&embed=true&r=v1'],
+    [
+      '?page=/|/foo&goal=~Signup&source=!Facebook|Instagram',
+      '?f=is,page,/,/foo&f=contains,goal,Signup&f=is_not,source,Facebook,Instagram&r=v1'
+    ]
+  ])(
+    'returns updated search string v1 style filter %s, and running the updated value through the function again returns null (no redirect loop)',
+    (searchString, expectedSearchString) => {
+      expect(maybeGetLatestReadableSearch(searchString)).toEqual(
+        expectedSearchString
+      )
+      expect(maybeGetLatestReadableSearch(expectedSearchString)).toBeNull()
+    }
+  )
+})
+
+describe(`${getSearchWithEnforcedSegment.name}`, () => {
+  it('adds enforced segment appropriately, and running the updated value through the function again returns the same value', () => {
+    const segment = { id: 100, name: 'Eastern Europe' }
+    const search = '?auth=foo&embed=true'
+    const expectedUpdatedSearch =
+      '?f=is,segment,100&l=segment-100,Eastern%20Europe&auth=foo&embed=true'
+    expect(getSearchWithEnforcedSegment(search, segment)).toEqual(
+      expectedUpdatedSearch
+    )
+    expect(
+      getSearchWithEnforcedSegment(expectedUpdatedSearch, segment)
+    ).toEqual(expectedUpdatedSearch)
+  })
+})
+
+describe(`${maybeReloadForApiVersion.name}`, () => {
+  const dashboardPathname = '/example.com'
+
+  beforeEach(() => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
+  type MockWindowLocation = Location & { replace: jest.Mock }
+
+  function makeLocation(search: string): MockWindowLocation {
+    return {
+      pathname: dashboardPathname,
+      search,
+      hash: '',
+      replace: jest.fn()
+    } as unknown as MockWindowLocation
+  }
+
+  function makeHeaders(version: string | null): Headers {
+    const headers = new Headers()
+    if (version !== null) headers.set('x-api-version', version)
+    return headers
+  }
+
+  it('reloads when effective API version is greater than expected', () => {
+    const location = makeLocation('')
+    maybeReloadForApiVersion(location, makeHeaders('1'))
+    expect(location.replace).toHaveBeenCalledWith(
+      `${dashboardPathname}?api_version_reloaded=1`
+    )
+  })
+
+  it('does not reload when effective API version equals expected', () => {
+    const location = makeLocation('')
+    maybeReloadForApiVersion(location, makeHeaders('0'))
+    expect(location.replace).not.toHaveBeenCalled()
+  })
+
+  it('does not reload when effective API version is less than expected (FE loaded from newer node, cluster not fully updated)', () => {
+    const location = makeLocation('')
+    maybeReloadForApiVersion(location, makeHeaders('-1'))
+    expect(location.replace).not.toHaveBeenCalled()
+  })
+
+  it('does not reload when x-api-version header is absent', () => {
+    const location = makeLocation('')
+    maybeReloadForApiVersion(location, makeHeaders(null))
+    expect(location.replace).not.toHaveBeenCalled()
+  })
+
+  it('does not reload when already reloaded for this version', () => {
+    const location = makeLocation('?api_version_reloaded=1')
+    maybeReloadForApiVersion(location, makeHeaders('1'))
+    expect(location.replace).not.toHaveBeenCalled()
+  })
+
+  it('reloads again if a newer version is detected after a previous reload', () => {
+    const location = makeLocation('?api_version_reloaded=1')
+    maybeReloadForApiVersion(location, makeHeaders('2'))
+    expect(location.replace).toHaveBeenCalledWith(
+      `${dashboardPathname}?api_version_reloaded=2`
+    )
+  })
+})

assets/js/dashboard/util/url-search-params.ts

@@ -0,0 +1,376 @@
+import {
+  getSearchToSetSegmentFilter,
+  SavedSegment
+} from '../filtering/segments'
+import { Filter, FilterClauseLabels } from '../dashboard-state'
+import { v1 } from './url-search-params-v1'
+import { v2 } from './url-search-params-v2'
+
+/**
+ * These characters are not URL encoded to have more readable URLs.
+ * Browsers seem to handle this just fine.
+ * `?f=is,page,/my/page/:some_param` vs `?f=is,page,%2Fmy%2Fpage%2F%3Asome_param``
+ */
+const NOT_URL_ENCODED_CHARACTERS = ':/'
+
+export const FILTER_URL_PARAM_NAME = 'f'
+
+const LABEL_URL_PARAM_NAME = 'l'
+
+const REDIRECTED_SEARCH_PARAM_NAME = 'r'
+
+const API_VERSION_RELOAD_PARAM_NAME = 'api_version_reloaded'
+
+const EXPECTED_API_VERSION = parseInt(
+  document
+    .querySelector('meta[name="x-api-version"]')
+    ?.getAttribute('content') ?? '0',
+  10
+)
+
+/**
+ * Navigates to the current URL with `api_version_reloaded=<currentApiVersion>`
+ * appended, using `location.replace` so the pre-reload entry is not kept in
+ * browser history.
+ *
+ * Returns early without navigating if:
+ *
+ * - the x-plausible-version response header is not present
+ * - the expected version matches the actual version
+ * - the version is already present in search params
+ *
+ * The latter prevents an infinite reload loop when the versions are
+ * permanently out of sync.
+ *
+ * BE: lib/plausible_web/plugs/internal_stats_api_version.ex
+ */
+export function maybeReloadForApiVersion(
+  windowLocation: Location,
+  responseHeaders: Headers
+) {
+  const currentApiVersion = getCurrentApiVersion(responseHeaders)
+  const params = new URLSearchParams(windowLocation.search)
+
+  if (
+    currentApiVersion === null ||
+    currentApiVersion <= EXPECTED_API_VERSION ||
+    params.get(API_VERSION_RELOAD_PARAM_NAME) === currentApiVersion.toString()
+  ) {
+    return
+  }
+
+  console.warn('API version mismatch detected, reloading...')
+
+  const newSearch = searchWithApiVersionReload(
+    windowLocation.search,
+    currentApiVersion.toString()
+  )
+  windowLocation.replace(
+    `${windowLocation.pathname}${newSearch}${windowLocation.hash}`
+  )
+}
+
+function getCurrentApiVersion(responseHeaders: Headers): number | null {
+  const versionString = responseHeaders?.get('x-api-version')
+  return versionString ? parseInt(versionString, 10) : null
+}
+
+function searchWithApiVersionReload(search: string, value: string): string {
+  return stringifySearch({
+    ...parseSearch(search),
+    [API_VERSION_RELOAD_PARAM_NAME]: value
+  })
+}
+
+/**
+ * This function is able to serialize for URL simple params @see serializeSimpleSearchEntry as well
+ * two complex params, labels and filters.
+ */
+export function stringifySearch(
+  searchRecord: Record<string, null | undefined | number | string | unknown>
+): '' | string {
+  const { filters, labels, ...rest } = searchRecord ?? {}
+  const definedSearchEntries = Object.entries(rest)
+    .map(serializeSimpleSearchEntry)
+    .filter(isSearchEntryDefined)
+    .map(([k, v]) => `${k}=${v}`)
+
+  if (!Array.isArray(filters) || !filters.length) {
+    return definedSearchEntries.length
+      ? `?${definedSearchEntries.join('&')}`
+      : ''
+  }
+
+  const serializedFilters = Array.isArray(filters)
+    ? filters.map((f) => `${FILTER_URL_PARAM_NAME}=${serializeFilter(f)}`)
+    : []
+
+  const serializedLabels = Object.entries(labels ?? {}).map(
+    (entry) => `${LABEL_URL_PARAM_NAME}=${serializeLabelsEntry(entry)}`
+  )
+
+  return `?${serializedFilters.concat(serializedLabels).concat(definedSearchEntries).join('&')}`
+}
+
+export function normalizeSearchString(searchString: string): string {
+  return searchString.startsWith('?') ? searchString.slice(1) : searchString
+}
+
+export function parseSearch(searchString: string): Record<string, unknown> {
+  const searchRecord: Record<string, string | boolean> = {}
+  const filters: Filter[] = []
+  const labels: FilterClauseLabels = {}
+
+  const normalizedSearchString = normalizeSearchString(searchString)
+
+  if (!normalizedSearchString.length) {
+    return searchRecord
+  }
+
+  const meaningfulParams = normalizedSearchString
+    .split('&')
+    .filter((i) => i.length > 0)
+
+  for (const param of meaningfulParams) {
+    const [key, rawValue = ''] = param.split('=')
+    switch (key) {
+      case FILTER_URL_PARAM_NAME: {
+        const filter = parseFilter(rawValue)
+        if (filter.length === 3 && filter[2].length) {
+          filters.push(filter)
+        }
+        break
+      }
+      case LABEL_URL_PARAM_NAME: {
+        const [labelKey, labelValue] = parseLabelsEntry(rawValue)
+        if (labelKey.length && labelValue.length) {
+          labels[labelKey] = labelValue
+        }
+        break
+      }
+      case '': {
+        break
+      }
+      default: {
+        const parsedValue = parseSimpleSearchEntry(rawValue)
+        if (parsedValue !== null) {
+          searchRecord[decodeURIComponent(key)] = parsedValue
+        }
+      }
+    }
+  }
+
+  return {
+    ...searchRecord,
+    ...(filters.length && { filters }),
+    ...(Object.keys(labels).length && { labels })
+  }
+}
+
+/**
+ * Serializes and flattens @see FilterClauseLabels entries.
+ * Examples:
+ * ["US","United States"] -> "US,United%20States"
+ * ["US-CA","California"] -> "US-CA,California"
+ * ["5391959","San Francisco"] -> "5391959,San%20Francisco"
+ */
+export function serializeLabelsEntry([labelKey, labelValue]: [string, string]) {
+  return `${encodeURIComponentPermissive(labelKey, NOT_URL_ENCODED_CHARACTERS)},${encodeURIComponentPermissive(labelValue, NOT_URL_ENCODED_CHARACTERS)}`
+}
+
+/**
+ * Parses the output of @see serializeLabelsEntry back to labels object entry.
+ */
+export function parseLabelsEntry(
+  labelKeyValueString: string
+): [string, string] {
+  const [key, value] = labelKeyValueString.split(',')
+  return [decodeURIComponent(key), decodeURIComponent(value)]
+}
+
+/**
+ * Serializes and flattens filters array item.
+ * Examples:
+ * ["is", "entry_page", ["/blog", "/news"]] -> "is,entry_page,/blog,/news"
+ */
+export function serializeFilter([operator, dimension, clauses]: Filter) {
+  const serializedFilter = [
+    encodeURIComponentPermissive(operator, NOT_URL_ENCODED_CHARACTERS),
+    encodeURIComponentPermissive(dimension, NOT_URL_ENCODED_CHARACTERS),
+    ...clauses.map((clause) =>
+      encodeURIComponentPermissive(
+        clause.toString(),
+        NOT_URL_ENCODED_CHARACTERS
+      )
+    )
+  ].join(',')
+  return serializedFilter
+}
+
+/**
+ * Parses the output of @see serializeFilter back to filters array item.
+ */
+export function parseFilter(filterString: string): Filter {
+  const [operator, dimension, ...unparsedClauses] = filterString.split(',')
+  return [
+    decodeURIComponent(operator),
+    decodeURIComponent(dimension),
+    unparsedClauses.map(decodeURIComponent)
+  ]
+}
+
+/**
+ * Encodes for URL simple search param values.
+ * Encodes numbers and number-like strings as indistinguishable strings. Parse treats them as strings.
+ * Encodes booleans and strings "true" and "false" as indistinguishable strings. Parse treats these as booleans.
+ * Unifies unhandleable complex search entries like undefined, null, objects and arrays as undefined.
+ * Complex URL params must be handled separately.
+ */
+export function serializeSimpleSearchEntry([key, value]: [string, unknown]): [
+  string,
+  undefined | string
+] {
+  if (value === undefined || value === null || typeof value === 'object') {
+    return [key, undefined]
+  }
+  return [
+    encodeURIComponentPermissive(key, ',:/'),
+    encodeURIComponentPermissive(value.toString(), ',:/')
+  ]
+}
+
+/**
+ * Parses output of @see serializeSimpleSearchEntry.
+ */
+export function parseSimpleSearchEntry(
+  searchParamValue: string
+): null | string | boolean {
+  if (searchParamValue === 'true') {
+    return true
+  }
+  if (searchParamValue === 'false') {
+    return false
+  }
+  return decodeURIComponent(searchParamValue)
+}
+
+export function encodeURIComponentPermissive(
+  input: string,
+  permittedCharacters: string
+): string {
+  return Array.from(permittedCharacters)
+    .map((character) => [encodeURIComponent(character), character])
+    .reduce(
+      (acc, [encodedCharacter, character]) =>
+        /* @ts-expect-error API supposedly not present in compilation target, but works in major browsers */
+        acc.replaceAll(encodedCharacter, character),
+      encodeURIComponent(input)
+    )
+}
+
+export function isSearchEntryDefined(
+  entry: [string, undefined | string]
+): entry is [string, string] {
+  return entry[1] !== undefined
+}
+
+function isAlreadyRedirected(searchParams: URLSearchParams) {
+  return ['v1', 'v2'].includes(searchParams.get(REDIRECTED_SEARCH_PARAM_NAME)!)
+}
+
+/** 
+  Dashboard state is kept on the URL for people to be able to link to what that they see.
+  Because dashboard state is a complex object, in the interest of readable URLs, custom serialization and parsing is in place.
+  
+  Versions
+    * v1: @see v1
+      A custom encoding schema was used for filters, (e.g. "?page=/blog"). 
+      This was not flexible enough and diverged from how we represented filters in the code.
+      
+    * v2: @see v2
+      jsonurl library was used to serialize the state. 
+      The links from this solution didn't always auto-sense across all platforms (e.g. Twitter), cutting off too soon and leading users to broken dashboards.
+      
+    * current version: this module. 
+      Custom encoding.
+   
+  The purpose of this function is to redirect users from one of the previous versions to the current version, 
+  so previous dashboard links still work.
+*/
+export function maybeGetLatestReadableSearch(
+  searchString: string
+): null | string {
+  const searchParams = new URLSearchParams(searchString)
+  if (isAlreadyRedirected(searchParams)) {
+    return null
+  }
+  const isCurrentVersion = searchParams.get(FILTER_URL_PARAM_NAME)
+  if (isCurrentVersion) {
+    return null
+  }
+
+  const isV2 = v2.isV2(searchParams)
+  const isV1 = v1.isV1(searchParams)
+
+  if (isV2) {
+    return stringifySearch({
+      ...v2.parseSearch(searchString),
+      [REDIRECTED_SEARCH_PARAM_NAME]: 'v2'
+    })
+  }
+
+  if (isV1) {
+    return stringifySearch({
+      ...v1.parseSearch(searchString),
+      [REDIRECTED_SEARCH_PARAM_NAME]: 'v1'
+    })
+  }
+
+  return null
+}
+
+/**
+ * It's possible to set a particular segment to be always applied on the data on dashboards accessed with a shared link.
+ * This function ensures that the particular segment filter is set to the URL string on initial page load.
+ * Other functions ensure that it can't be removed.
+ */
+export function getSearchWithEnforcedSegment(
+  searchString: string,
+  enforcedSegment: Pick<SavedSegment, 'id' | 'name'>
+): string {
+  const searchRecord = parseSearch(searchString)
+  return stringifySearch(
+    getSearchToSetSegmentFilter(enforcedSegment)(searchRecord)
+  )
+}
+
+/** Called once before React app mounts. If legacy url search params are present, does a redirect to new format. */
+export function maybeDoFERedirect(
+  windowLocation: Location,
+  windowHistory: History,
+  enforcedSegment: Pick<SavedSegment, 'id' | 'name'> | null
+) {
+  const originalSearchString = windowLocation.search
+
+  let updatedSearchString = maybeGetLatestReadableSearch(originalSearchString)
+
+  if (enforcedSegment) {
+    updatedSearchString = getSearchWithEnforcedSegment(
+      updatedSearchString ?? originalSearchString,
+      enforcedSegment
+    )
+  }
+
+  if (
+    updatedSearchString === null ||
+    updatedSearchString === originalSearchString
+  ) {
+    return
+  }
+
+  windowHistory.pushState(
+    {},
+    '',
+    `${windowLocation.pathname}${updatedSearchString}`
+  )
+}

assets/js/dashboard/util/url.test.ts

@@ -0,0 +1,105 @@
+import { apiPath, externalLinkForPage, isValidHttpUrl, trimURL } from './url'
+import { siteContextDefaultValue } from '../site-context'
+
+describe('apiPath', () => {
+  it.each([
+    ['example.com', undefined, '/api/stats/example.com/'],
+    ['example.com', '', '/api/stats/example.com/'],
+    ['example.com', '/test', '/api/stats/example.com/test/'],
+    [
+      'example.com/path/is-really/deep',
+      '',
+      '/api/stats/example.com%2Fpath%2Fis-really%2Fdeep/'
+    ]
+  ])(
+    'when site.domain is %p and path is %s, should return %s',
+    (domain, path, expected) => {
+      const result = apiPath({ domain }, path)
+      expect(result).toBe(expected)
+    }
+  )
+})
+
+describe('externalLinkForPage', () => {
+  it.each([
+    ['example.com', '/about', 'https://example.com/about'],
+    ['sub.example.com', '/contact', 'https://sub.example.com/contact'],
+    [
+      'example.com',
+      '/search?q=test#section',
+      'https://example.com/search?q=test#section'
+    ],
+    ['example.com', '/', 'https://example.com/']
+  ])(
+    'when domain is %s and page is %s, it should return %s',
+    (domain, page, expected) => {
+      const site = { ...siteContextDefaultValue, domain: domain }
+      const result = externalLinkForPage(site, page)
+      expect(result).toBe(expected)
+    }
+  )
+
+  it('returns null for consolidated view', () => {
+    const consolidatedView = {
+      ...siteContextDefaultValue,
+      isConsolidatedView: true
+    }
+    expect(externalLinkForPage(consolidatedView, '/some-page')).toBe(null)
+  })
+})
+
+describe('isValidHttpUrl', () => {
+  it.each([
+    // Valid HTTP and HTTPS URLs
+    ['http://example.com', true],
+    ['https://example.com', true],
+    ['http://www.example.com', true],
+    ['https://sub.domain.com', true],
+    ['https://example.com/path?query=1#fragment', true],
+
+    // Invalid URLs (invalid protocol)
+    ['ftp://example.com', false],
+    ['mailto:someone@example.com', false],
+    ['file:///C:/path/to/file', false],
+    ['data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==', false],
+
+    // Invalid URLs (malformed or non-URL strings)
+    ['//example.com', false],
+    ['example.com', false],
+    ['just-a-string', false],
+    ['', false],
+    ['https//:example.com', false],
+
+    // Edge cases
+    ['http:/example.com', true],
+    ['http://localhost', true],
+    ['https://127.0.0.1', true],
+    ['https://[::1]', true], // IPv6 URL
+    ['http://user:pass@127.0.0.1', true],
+    ['https://example.com:8080', true]
+  ])('for input %s returns %s', (input, expected) => {
+    const result = isValidHttpUrl(input)
+    expect(result).toBe(expected)
+  })
+})
+
+describe('trimURL', () => {
+  it.each([
+    // Test cases where URL length is less than or equal to maxLength
+    ['https://example.com', 20, 'https://example.com'],
+    ['http://example.com', 50, 'http://example.com'],
+
+    // Test cases where host itself is too long
+    [
+      'https://a-very-long-domain-name.com',
+      20,
+      'https://a-very-long-dom...domain-name.com'
+    ]
+  ])(
+    'when url is %s and maxLength is %d, should return %s',
+    (url, maxLength, expected) => {
+      const result = trimURL(url, maxLength)
+      expect(result).toBe(expected)
+    }
+  )
+})

assets/js/dashboard/util/url.ts

@@ -0,0 +1,86 @@
+import { PlausibleSite } from '../site-context'
+
+export function apiPath(
+  site: Pick<PlausibleSite, 'domain'>,
+  path = ''
+): string {
+  return `/api/stats/${encodeURIComponent(site.domain)}${path}/`
+}
+
+export function externalLinkForPage(
+  site: PlausibleSite,
+  page: string,
+  hostname?: string
+): string | null {
+  if (hostname) {
+    return `https://${hostname}${page}`
+  }
+  if (site.isConsolidatedView) {
+    return null
+  }
+  try {
+    const domainURL = new URL(`https://${site.domain}`)
+    return `https://${domainURL.host}${page}`
+  } catch (_error) {
+    return null
+  }
+}
+
+export function isValidHttpUrl(input: string): boolean {
+  let url
+
+  try {
+    url = new URL(input)
+  } catch (_) {
+    return false
+  }
+
+  return url.protocol === 'http:' || url.protocol === 'https:'
+}
+
+export function trimURL(url: string, maxLength: number): string {
+  if (url.length <= maxLength) {
+    return url
+  }
+
+  const ellipsis = '...'
+
+  if (isValidHttpUrl(url)) {
+    const [protocol, restURL] = url.split('://')
+    const parts = restURL.split('/')
+
+    const host = parts.shift() || ''
+    if (host.length > maxLength - 5) {
+      return `${protocol}://${host.substr(0, maxLength - 5)}${ellipsis}${restURL.slice(-maxLength + 5)}`
+    }
+
+    let remainingLength = maxLength - host.length - 5
+    let trimmedURL = `${protocol}://${host}`
+
+    for (const part of parts) {
+      if (part.length <= remainingLength) {
+        trimmedURL += '/' + part
+        remainingLength -= part.length + 1
+      } else {
+        const startTrim = Math.floor((remainingLength - 3) / 2)
+        const endTrim = Math.ceil((remainingLength - 3) / 2)
+        trimmedURL += `/${part.substr(0, startTrim)}...${part.slice(-endTrim)}`
+        break
+      }
+    }
+
+    return trimmedURL
+  } else {
+    const leftSideLength = Math.floor(maxLength / 2)
+    const rightSideLength = maxLength - leftSideLength
+
+    const leftSide = url.slice(0, leftSideLength)
+    const rightSide = url.slice(-rightSideLength)
+
+    return leftSide + ellipsis + rightSide
+  }
+}
+
+export function maybeEncodeRouteParam(param: string) {
+  return param.includes('/') ? encodeURIComponent(param) : param
+}

assets/js/embed.content.js

@@ -0,0 +1,16 @@
+import 'iframe-resizer/js/iframeResizer.contentWindow'
+
+window.iFrameResizer = {
+  onMessage: function (msg) {
+    if (msg.type === 'load-custom-styles') {
+      addCustomStyles(msg.opts)
+    }
+  }
+}
+
+function addCustomStyles(opts) {
+  var style = document.createElement('style')
+  style.innerHTML = opts.styles
+
+  document.head.appendChild(style)
+}

assets/js/embed.host.js

@@ -0,0 +1,24 @@
+import iframeResize from 'iframe-resizer/js/iframeResizer'
+
+var iframes = iframeResize(
+  {
+    heightCalculationMethod: 'taggedElement',
+    onInit: onInit,
+    checkOrigin: false
+  },
+  '[plausible-embed]'
+)
+
+function onInit() {
+  var iframe = iframes[0]
+  var styles = iframe.getAttribute('styles')
+
+  if (styles) {
+    iframe.iFrameResizer.sendMessage({
+      type: 'load-custom-styles',
+      opts: {
+        styles: styles
+      }
+    })
+  }
+}

assets/js/liveview/combo-box.js

@@ -0,0 +1,98 @@
+// Courtesy of Benjamin von Polheim:
+// https://blog.devgenius.io/build-a-performat-autocomplete-using-phoenix-liveview-and-alpine-js-8bcbbed17ba7
+
+export default (id) => ({
+  isOpen: false,
+  id: id,
+  focus: null,
+  selectionInProgress: false,
+  firstFocusRegistered: false,
+  setFocus(f) {
+    this.focus = f
+  },
+  initFocus() {
+    if (this.focus === null) {
+      this.setFocus(this.leastFocusableIndex())
+      if (!this.firstFocusRegistered) {
+        document.getElementById(this.id).select()
+        this.firstFocusRegistered = true
+      }
+    }
+  },
+  trackSubmitValueChange() {
+    this.selectionInProgress = false
+  },
+  open() {
+    if (!this.isOpen) {
+      this.initFocus()
+      this.isOpen = true
+    }
+  },
+  suggestionsCount() {
+    return this.$refs.suggestions?.querySelectorAll('li').length
+  },
+  hasCreatableOption() {
+    return this.$refs.suggestions
+      ?.querySelector('li')
+      .classList.contains('creatable')
+  },
+  leastFocusableIndex() {
+    if (this.suggestionsCount() === 0) {
+      return 0
+    }
+    return this.hasCreatableOption() ? 0 : 1
+  },
+  maxFocusableIndex() {
+    return this.hasCreatableOption()
+      ? this.suggestionsCount() - 1
+      : this.suggestionsCount()
+  },
+  nextFocusableIndex() {
+    const currentFocus = this.focus
+    return currentFocus + 1 > this.maxFocusableIndex()
+      ? this.leastFocusableIndex()
+      : currentFocus + 1
+  },
+  prevFocusableIndex() {
+    const currentFocus = this.focus
+    return currentFocus - 1 >= this.leastFocusableIndex()
+      ? currentFocus - 1
+      : this.maxFocusableIndex()
+  },
+  close(e) {
+    // Pressing Escape should not propagate to window,
+    // so we'll only close the suggestions pop-up
+    if (this.isOpen && e.key === 'Escape') {
+      e.stopPropagation()
+    }
+    this.isOpen = false
+  },
+  select() {
+    this.$refs[`dropdown-${this.id}-option-${this.focus}`]?.click()
+    this.close()
+    document.getElementById(this.id).blur()
+  },
+  scrollTo(idx) {
+    this.$refs[`dropdown-${this.id}-option-${idx}`]?.scrollIntoView({
+      block: 'nearest',
+      behavior: 'smooth',
+      inline: 'start'
+    })
+  },
+  focusNext() {
+    const nextIndex = this.nextFocusableIndex()
+
+    this.open()
+
+    this.setFocus(nextIndex)
+    this.scrollTo(nextIndex)
+  },
+  focusPrev() {
+    const prevIndex = this.prevFocusableIndex()
+
+    this.open()
+
+    this.setFocus(prevIndex)
+    this.scrollTo(prevIndex)
+  }
+})

assets/js/liveview/dropdown.js

@@ -0,0 +1,20 @@
+// From https://alpinejs.dev/component/dropdown
+
+export default () => ({
+  open: false,
+  toggle() {
+    if (this.open) {
+      return this.close()
+    }
+
+    this.$refs.button.focus()
+    this.open = true
+  },
+
+  close(focusAfter) {
+    if (!this.open) return
+
+    this.open = false
+    focusAfter?.focus()
+  }
+})

assets/js/liveview/live_socket.js

@@ -0,0 +1,78 @@
+/**
+  The modules below this comment block are resolved from '../deps' folder,
+  which does not exist when running the lint command in Github CI
+*/
+
+/* eslint-disable import/no-unresolved */
+import 'phoenix_html'
+import { Socket } from 'phoenix'
+import { LiveSocket } from 'phoenix_live_view'
+import { Modal, Dropdown } from 'prima'
+import topbar from 'topbar'
+/* eslint-enable import/no-unresolved */
+
+import Alpine from 'alpinejs'
+
+let csrfToken = document.querySelector("meta[name='csrf-token']")
+let websocketUrl = document.querySelector("meta[name='websocket-url']")
+if (csrfToken && websocketUrl) {
+  let Hooks = { Modal, Dropdown }
+  Hooks.Metrics = {
+    mounted() {
+      this.handleEvent('send-metrics', ({ event_name }) => {
+        window.plausible(event_name)
+        this.pushEvent('send-metrics-after', { event_name })
+      })
+    }
+  }
+  let Uploaders = {}
+  Uploaders.S3 = function (entries, onViewError) {
+    entries.forEach((entry) => {
+      let xhr = new XMLHttpRequest()
+      onViewError(() => xhr.abort())
+      xhr.onload = () =>
+        xhr.status === 200 ? entry.progress(100) : entry.error()
+      xhr.onerror = () => entry.error()
+      xhr.upload.addEventListener('progress', (event) => {
+        if (event.lengthComputable) {
+          let percent = Math.round((event.loaded / event.total) * 100)
+          if (percent < 100) {
+            entry.progress(percent)
+          }
+        }
+      })
+      let url = entry.meta.url
+      xhr.open('PUT', url, true)
+      xhr.send(entry.file)
+    })
+  }
+  let token = csrfToken.getAttribute('content')
+  let url = websocketUrl.getAttribute('content')
+  let liveUrl = url === '' ? '/live' : new URL('/live', url).href
+  let liveSocket = new LiveSocket(liveUrl, Socket, {
+    heartbeatIntervalMs: 10000,
+    params: { _csrf_token: token },
+    hooks: Hooks,
+    uploaders: Uploaders,
+    dom: {
+      // for alpinejs integration
+      onBeforeElUpdated(from, to) {
+        if (from._x_dataStack) {
+          Alpine.clone(from, to)
+        }
+      }
+    }
+  })
+
+  topbar.config({
+    barColors: { 0: '#303f9f' },
+    shadowColor: 'rgba(0, 0, 0, .3)',
+    barThickness: 4
+  })
+  window.addEventListener('phx:page-loading-start', (_info) => topbar.show())
+  window.addEventListener('phx:page-loading-stop', (_info) => topbar.hide())
+  window.addEventListener('scroll-to-top', () => window.scrollTo(0, 0))
+
+  liveSocket.connect()
+  window.liveSocket = liveSocket
+}

assets/js/liveview/phx_events.js

@@ -0,0 +1,20 @@
+window.addEventListener(`phx:update-value`, (e) => {
+  let el = document.getElementById(e.detail.id)
+  el.value = e.detail.value
+  if (e.detail.fire) {
+    el.dispatchEvent(new Event('input', { bubbles: true }))
+  }
+})
+
+window.addEventListener(`phx:js-exec`, ({ detail }) => {
+  document.querySelectorAll(detail.to).forEach((el) => {
+    window.liveSocket.execJS(el, el.getAttribute(detail.attr))
+  })
+})
+
+window.addEventListener(`phx:notify-selection-change`, (event) => {
+  let el = document.getElementById(event.detail.id)
+  el.dispatchEvent(
+    new CustomEvent('selection-change', { detail: event.detail })
+  )
+})

assets/js/polyfills/closest.js

@@ -0,0 +1,14 @@
+if (window.Element && !Element.prototype.closest) {
+  Element.prototype.closest = function (s) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+      i,
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      el = this
+    do {
+      i = matches.length
+      // eslint-disable-next-line no-empty
+      while (--i >= 0 && matches.item(i) !== el) {}
+    } while (i < 0 && (el = el.parentElement))
+    return el
+  }
+}

assets/js/types/globals.d.ts

@@ -0,0 +1 @@
+declare const BUILD_EXTRA: boolean

assets/js/types/query-api.d.ts

@@ -0,0 +1,216 @@
+/* Autogenerated, recreate with `npm run --prefix assets generate-types` */
+
+export type Metric =
+  | "visitors"
+  | "visits"
+  | "pageviews"
+  | "views_per_visit"
+  | "bounce_rate"
+  | "visit_duration"
+  | "events"
+  | "percentage"
+  | "conversion_rate"
+  | "group_conversion_rate"
+  | "time_on_page"
+  | "total_revenue"
+  | "average_revenue"
+  | "scroll_depth";
+export type DateRangeShorthand =
+  | "all"
+  | "day"
+  | "24h"
+  | "7d"
+  | "28d"
+  | "30d"
+  | "91d"
+  | "month"
+  | "6mo"
+  | "12mo"
+  | "year"
+  | string;
+/**
+ * @minItems 2
+ * @maxItems 2
+ */
+export type DateTimeRange = [string, string];
+/**
+ * @minItems 2
+ * @maxItems 2
+ */
+export type DateRange = [string, string];
+export type Dimensions = SimpleFilterDimensions | CustomPropertyFilterDimensions | GoalDimension | TimeDimensions;
+export type SimpleFilterDimensions =
+  | "event:name"
+  | "event:page"
+  | "event:hostname"
+  | "visit:source"
+  | "visit:channel"
+  | "visit:referrer"
+  | "visit:utm_medium"
+  | "visit:utm_source"
+  | "visit:utm_campaign"
+  | "visit:utm_content"
+  | "visit:utm_term"
+  | "visit:screen"
+  | "visit:device"
+  | "visit:browser"
+  | "visit:browser_version"
+  | "visit:os"
+  | "visit:os_version"
+  | "visit:country"
+  | "visit:region"
+  | "visit:city"
+  | "visit:country_name"
+  | "visit:region_name"
+  | "visit:city_name"
+  | "visit:entry_page"
+  | "visit:exit_page"
+  | "visit:entry_page_hostname"
+  | "visit:exit_page_hostname";
+export type CustomPropertyFilterDimensions = `event:props:${string}`;
+export type GoalDimension = "event:goal";
+export type TimeDimensions = "time" | "time:month" | "time:week" | "time:day" | "time:hour";
+export type FilterTree = FilterEntry | FilterAndOr | FilterNot | FilterHasDone;
+export type FilterEntry = FilterWithoutGoals | FilterWithIs | FilterWithContains | FilterWithPattern;
+/**
+ * @minItems 3
+ * @maxItems 4
+ */
+export type FilterWithoutGoals =
+  | [FilterOperationWithoutGoals, SimpleFilterDimensions | CustomPropertyFilterDimensions, Clauses]
+  | [
+      FilterOperationWithoutGoals,
+      SimpleFilterDimensions | CustomPropertyFilterDimensions,
+      Clauses,
+      {
+        case_sensitive?: boolean;
+      }
+    ];
+/**
+ * filter operation
+ */
+export type FilterOperationWithoutGoals = "is_not" | "contains_not";
+/**
+ * @minItems 1
+ */
+export type Clauses = [string | number, ...(string | number)[]];
+/**
+ * @minItems 3
+ * @maxItems 4
+ */
+export type FilterWithIs =
+  | ["is", GoalDimension | SimpleFilterDimensions | CustomPropertyFilterDimensions | "segment", Clauses]
+  | [
+      "is",
+      GoalDimension | SimpleFilterDimensions | CustomPropertyFilterDimensions | "segment",
+      Clauses,
+      {
+        case_sensitive?: boolean;
+      }
+    ];
+/**
+ * @minItems 3
+ * @maxItems 4
+ */
+export type FilterWithContains =
+  | ["contains", GoalDimension | SimpleFilterDimensions | CustomPropertyFilterDimensions, Clauses]
+  | [
+      "contains",
+      GoalDimension | SimpleFilterDimensions | CustomPropertyFilterDimensions,
+      Clauses,
+      {
+        case_sensitive?: boolean;
+      }
+    ];
+/**
+ * @minItems 3
+ * @maxItems 3
+ */
+export type FilterWithPattern = [
+  FilterOperationRegex,
+  SimpleFilterDimensions | CustomPropertyFilterDimensions,
+  Clauses
+];
+/**
+ * filter operation
+ */
+export type FilterOperationRegex = "matches" | "matches_not";
+/**
+ * @minItems 2
+ * @maxItems 2
+ */
+export type FilterAndOr = ["and" | "or", [FilterTree, ...FilterTree[]]];
+/**
+ * @minItems 2
+ * @maxItems 2
+ */
+export type FilterNot = ["not", FilterTree];
+/**
+ * @minItems 2
+ * @maxItems 2
+ */
+export type FilterHasDone = ["has_done" | "has_not_done", FilterTree];
+/**
+ * @minItems 2
+ * @maxItems 2
+ */
+export type OrderByEntry = [
+  Metric | SimpleFilterDimensions | CustomPropertyFilterDimensions | TimeDimensions,
+  SortDirection
+];
+/**
+ * Sorting order
+ */
+export type SortDirection = "asc" | "desc";
+
+export interface QueryApiSchema {
+  /**
+   * Domain of site to query
+   */
+  site_id: string;
+  /**
+   * List of metrics to query
+   *
+   * @minItems 1
+   */
+  metrics: [Metric, ...Metric[]];
+  /**
+   * Date range to query
+   */
+  date_range: DateRangeShorthand | DateTimeRange | DateRange;
+  /**
+   * What to group the results by. Same as `property` in Plausible API v1
+   */
+  dimensions?: Dimensions[];
+  /**
+   * How to drill into your data
+   */
+  filters?: FilterTree[];
+  /**
+   * How to order query results
+   */
+  order_by?: OrderByEntry[];
+  include?: {
+    time_labels?: boolean;
+    imports?: boolean;
+    /**
+     * If set, returns the total number of result rows rows before pagination under `meta.total_rows`
+     */
+    total_rows?: boolean;
+    /**
+     * If set and using `day`, `month` or `year` date_ranges, the query will be trimmed to the current date
+     */
+    trim_relative_date_range?: boolean;
+  };
+  pagination?: Pagination;
+}
+export interface Pagination {
+  /**
+   * Number of rows to limit result to.
+   */
+  limit?: number;
+  /**
+   * Pagination offset.
+   */
+  offset?: number;
+}

assets/package.json

@@ -0,0 +1,79 @@
+{
+  "repository": {},
+  "version": "1.4.0",
+  "license": "AGPL-3.0-or-later",
+  "scripts": {
+    "test": "TZ=UTC jest",
+    "format": "prettier --write \"**/*.{js,css,ts,tsx}\"",
+    "check-format": "prettier --check \"**/*.{js,css,ts,tsx}\"",
+    "eslint": "eslint js/**",
+    "stylelint": "stylelint css/**",
+    "lint": "npm run eslint && npm run stylelint",
+    "typecheck": "tsc --noEmit --pretty",
+    "generate-types": "json2ts ../priv/json-schemas/query-api-schema.json ../assets/js/types/query-api.d.ts --bannerComment '/* Autogenerated, recreate with `npm run --prefix assets generate-types` */'"
+  },
+  "dependencies": {
+    "@headlessui/react": "^1.7.19",
+    "@heroicons/react": "^2.2.0",
+    "@jsonurl/jsonurl": "^1.1.7",
+    "@juggle/resize-observer": "^3.3.1",
+    "@popperjs/core": "^2.11.6",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/typography": "^0.4.1",
+    "@tanstack/react-query": "^5.51.1",
+    "abortcontroller-polyfill": "^1.7.3",
+    "alpinejs": "^3.13.1",
+    "chart.js": "^3.3.2",
+    "chartjs-plugin-datalabels": "^2.2.0",
+    "classnames": "^2.3.1",
+    "d3": "^7.9.0",
+    "dayjs": "^1.11.7",
+    "fast-deep-equal": "^3.1.3",
+    "iframe-resizer": "^4.3.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-flatpickr": "3.10.5",
+    "react-flip-move": "^3.0.4",
+    "react-intersection-observer": "^9.5.2",
+    "react-popper": "^2.3.0",
+    "react-router-dom": "^6.25.1",
+    "react-transition-group": "^4.4.2",
+    "topbar": "^3.0.0",
+    "topojson-client": "^3.1.0",
+    "url-search-params-polyfill": "^8.2.5",
+    "visionscarto-world-atlas": "^1.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.23.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/d3": "^7.4.3",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-flatpickr": "^3.8.11",
+    "@types/topojson-client": "^3.1.4",
+    "eslint": "^9.23.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-import-resolver-typescript": "^4.3.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest": "^28.11.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "globals": "^16.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jsdom-testing-mocks": "^1.13.1",
+    "json-schema-to-typescript": "^15.0.2",
+    "prettier": "^3.3.3",
+    "stylelint": "^16.17.0",
+    "stylelint-config-standard": "^36.0.1",
+    "ts-jest": "^29.2.4",
+    "typescript": "^5.5.4",
+    "typescript-eslint": "^8.29.0"
+  },
+  "name": "assets"
+}

assets/test-utils/app-context-providers.tsx

@@ -0,0 +1,117 @@
+import React, { ReactNode } from 'react'
+import SiteContextProvider, {
+  PlausibleSite
+} from '../js/dashboard/site-context'
+import UserContextProvider, {
+  Role,
+  UserContextValue
+} from '../js/dashboard/user-context'
+import { MemoryRouter, MemoryRouterProps } from 'react-router-dom'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import DashboardStateContextProvider from '../js/dashboard/dashboard-state-context'
+import { getRouterBasepath } from '../js/dashboard/router'
+import { RoutelessModalsContextProvider } from '../js/dashboard/navigation/routeless-modals-context'
+import { SegmentsContextProvider } from '../js/dashboard/filtering/segments-context'
+import { SavedSegment, SavedSegments } from '../js/dashboard/filtering/segments'
+import { GraphIntervalProvider } from '../js/dashboard/stats/graph/graph-interval-context'
+import { ImportsIncludedProvider } from '../js/dashboard/stats/graph/imports-included-context'
+import { CurrentVisitorsProvider } from '../js/dashboard/current-visitors-context'
+
+type TestContextProvidersProps = {
+  children: ReactNode
+  routerProps?: Pick<MemoryRouterProps, 'initialEntries'>
+  siteOptions?: Partial<PlausibleSite>
+  user?: UserContextValue
+  preloaded?: { segments?: SavedSegments }
+  limitedToSegment?: SavedSegment | null
+}
+
+export const DEFAULT_SITE: PlausibleSite = {
+  domain: 'plausible.io/unit',
+  offset: 0,
+  hasGoals: false,
+  hasProps: false,
+  funnelsAvailable: false,
+  explorationAvailable: false,
+  explorationJourneyEndEvent: '',
+  explorationMaxJourneySteps: 0,
+  propsAvailable: false,
+  siteSegmentsAvailable: false,
+  siteAnnotationsAvailable: false,
+  conversionsOptedOut: false,
+  funnelsOptedOut: false,
+  propsOptedOut: false,
+  revenueGoals: [],
+  funnels: [],
+  statsBegin: '',
+  nativeStatsBegin: '',
+  embedded: false,
+  background: '',
+  isDbip: false,
+  flags: {},
+  shared: false,
+  isConsolidatedView: false
+}
+
+export const TestContextProviders = ({
+  children,
+  routerProps,
+  siteOptions,
+  preloaded,
+  limitedToSegment,
+  user
+}: TestContextProvidersProps) => {
+  const site = { ...DEFAULT_SITE, ...siteOptions }
+
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false
+      }
+    }
+  })
+
+  const defaultInitialEntries = [getRouterBasepath(site)]
+
+  return (
+    // <ThemeContextProvider> not interactive component, default value is suitable
+    <SiteContextProvider site={site}>
+      <UserContextProvider
+        user={
+          user ?? {
+            role: Role.editor,
+            loggedIn: true,
+            id: 1,
+            team: { identifier: null, hasConsolidatedView: false }
+          }
+        }
+      >
+        <SegmentsContextProvider
+          limitedToSegment={limitedToSegment ?? null}
+          preloadedSegments={preloaded?.segments ?? []}
+        >
+          <MemoryRouter
+            basename={getRouterBasepath(site)}
+            initialEntries={defaultInitialEntries}
+            {...routerProps}
+          >
+            <QueryClientProvider client={queryClient}>
+              <RoutelessModalsContextProvider>
+                <DashboardStateContextProvider>
+                  <CurrentVisitorsProvider>
+                    <GraphIntervalProvider>
+                      <ImportsIncludedProvider>
+                        {children}
+                      </ImportsIncludedProvider>
+                    </GraphIntervalProvider>
+                  </CurrentVisitorsProvider>
+                </DashboardStateContextProvider>
+              </RoutelessModalsContextProvider>
+            </QueryClientProvider>
+          </MemoryRouter>
+        </SegmentsContextProvider>
+      </UserContextProvider>
+    </SiteContextProvider>
+    // </ThemeContextProvider>
+  )
+}

assets/test-utils/extend-expect.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

assets/test-utils/index.ts

@@ -0,0 +1,23 @@
+import { render, RenderOptions } from '@testing-library/react'
+import { ReactNode } from 'react'
+
+/**
+ * Makes the fake document in unit tests aware of some tailwind class definitions.
+ * Needed for the matcher option ({ hidden: false }) to function at least partially.
+ */
+const registerPartialTailwindStyle = () => {
+  const tailwindStyle = `.invisible { visibility: hidden; }`
+
+  const style = document.createElement('style')
+  style.innerHTML = tailwindStyle
+  document.head.appendChild(style)
+}
+
+const customRender = (ui: ReactNode, options: RenderOptions) => {
+  const output = render(ui, options)
+  registerPartialTailwindStyle()
+  return output
+}
+
+export * from '@testing-library/react'
+export { customRender as render }

assets/test-utils/jsdom-mocks.ts

@@ -0,0 +1,5 @@
+import { configMocks } from 'jsdom-testing-mocks'
+import { act } from '@testing-library/react'
+
+// as per jsdom-testing-mocks docs, this is needed to avoid having to wrap everything in act calls
+configMocks({ act })

assets/test-utils/mock-api.ts

@@ -0,0 +1,92 @@
+export class MockAPI {
+  private mocked: Map<string, jest.Mock>
+  private fetch: jest.Mock
+  private originalFetch: null | unknown = null
+
+  constructor() {
+    this.mocked = new Map()
+    this.fetch = jest.fn()
+  }
+
+  private setHandler(
+    method: string,
+    urlWithoutQueryString: string,
+    handler: jest.Mock
+  ) {
+    this.mocked.set(
+      [method.toLowerCase(), urlWithoutQueryString].join(' '),
+      handler
+    )
+  }
+
+  // sets get handler
+  public get(
+    urlWithoutQueryString: string,
+    responseHandler: typeof fetch | Record<string, unknown> | number | null
+  ): jest.Mock {
+    return this.register('get', urlWithoutQueryString, responseHandler)
+  }
+
+  // sets post handler
+  public post(
+    urlWithoutQueryString: string,
+    responseHandler: typeof fetch | Record<string, unknown>
+  ): jest.Mock {
+    return this.register('post', urlWithoutQueryString, responseHandler)
+  }
+
+  private register(
+    method: string,
+    urlWithoutQueryString: string,
+    responseHandler: typeof fetch | Record<string, unknown> | number | null
+  ): jest.Mock {
+    const handler: typeof fetch =
+      typeof responseHandler === 'function'
+        ? responseHandler
+        : () =>
+            new Promise((resolve) =>
+              resolve({
+                status: 200,
+                ok: true,
+                json: async () => responseHandler
+              } as Response)
+            )
+    const jestWrappedHandler = jest.fn(handler)
+    this.setHandler(method, urlWithoutQueryString, jestWrappedHandler)
+    return jestWrappedHandler
+  }
+
+  private getHandler(method: string, urlWithoutQueryString: string) {
+    return this.mocked.get([method, urlWithoutQueryString].join(' '))
+  }
+
+  public clear() {
+    this.mocked = new Map()
+    this.fetch.mockClear()
+  }
+
+  public start() {
+    this.originalFetch = global.fetch
+    const mockFetch: typeof global.fetch = async (input, init) => {
+      if (typeof input !== 'string') {
+        throw new Error(`Unmocked request ${input.toString()}`)
+      }
+      const method = (init?.method ?? 'get').toLowerCase()
+      const urlWithoutQueryString = input.split('?')[0]
+      const handler = this.getHandler(method, urlWithoutQueryString)
+      if (!handler) {
+        throw new Error(
+          `Unmocked request ${method.toString()} ${input.toString()}`
+        )
+      }
+      return handler(input, init)
+    }
+
+    global.fetch = this.fetch.mockImplementation(mockFetch)
+    return this
+  }
+
+  public stop() {
+    global.fetch = this.originalFetch as typeof global.fetch
+  }
+}

assets/test-utils/reset-state.ts

@@ -0,0 +1,11 @@
+/**
+ * @returns clears the state that the app stores,
+ * to avoid individual tests impacting each other
+ */
+function clearStoredAppState() {
+  localStorage.clear()
+}
+
+beforeEach(() => {
+  clearStoredAppState()
+})

assets/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "jsx": "react",
+    "target": "es2017",
+    "module": "commonjs",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true
+  }
+}

config/.env.dev

@@ -0,0 +1,38 @@
+BASE_URL=http://localhost:8000
+SECURE_COOKIE=false
+DATABASE_URL=postgres://postgres:postgres@127.0.0.1:5432/plausible_dev
+CLICKHOUSE_DATABASE_URL=http://127.0.0.1:8123/plausible_events_db
+CLICKHOUSE_MAX_BUFFER_SIZE_BYTES=1000000
+SECRET_KEY_BASE=/njrhntbycvastyvtk1zycwfm981vpo/0xrvwjjvemdakc/vsvbrevlwsc6u8rcg
+TOTP_VAULT_KEY=Q3BD4nddbkVJIPXgHuo5NthGKSIH0yesRfG05J88HIo=
+ENVIRONMENT=dev
+MAILER_ADAPTER=Bamboo.LocalAdapter
+LOG_LEVEL=debug
+SELFHOST=false
+DISABLE_CRON=true
+ADMIN_USER_IDS=1
+SHOW_CITIES=true
+PADDLE_VENDOR_AUTH_CODE=895e20d4efaec0575bb857f44b183217b332d9592e76e69b8a
+PADDLE_VENDOR_ID=3942
+SSO_VERIFICATION_NAMESERVERS=0.0.0.0:5354
+
+GOOGLE_CLIENT_ID=875387135161-l8tp53dpt7fdhdg9m1pc3vl42si95rh0.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=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
+
+PROMEX_DISABLED=false
+SITE_DEFAULT_INGEST_THRESHOLD=1000000
+
+S3_DISABLED=false
+S3_ACCESS_KEY_ID=minioadmin
+S3_SECRET_ACCESS_KEY=minioadmin
+S3_REGION=us-east-1
+S3_ENDPOINT=http://localhost:10000
+S3_EXPORTS_BUCKET=dev-exports
+S3_IMPORTS_BUCKET=dev-imports
+
+HELP_SCOUT_APP_ID=fake_app_id
+HELP_SCOUT_APP_SECRET=fake_app_secret
+HELP_SCOUT_SIGNATURE_KEY=fake_signature_key
+HELP_SCOUT_VAULT_KEY=ym9ZQg0KPNGCH3C2eD5y6KpL0tFzUqAhwxQO6uEv/ZM=
+
+VERIFICATION_ENABLED=true

config/.env.e2e_test

@@ -0,0 +1,39 @@
+BASE_URL=http://localhost:8111
+HTTP_PORT=8111
+SECURE_COOKIE=false
+DATABASE_URL=postgres://postgres:postgres@127.0.0.1:5432/plausible_e2e
+CLICKHOUSE_DATABASE_URL=http://127.0.0.1:8123/plausible_e2e
+CLICKHOUSE_MAX_BUFFER_SIZE_BYTES=1000000
+SECRET_KEY_BASE=/njrhntbycvastyvtk1zycwfm981vpo/0xrvwjjvemdakc/vsvbrevlwsc6u8rcg
+TOTP_VAULT_KEY=Q3BD4nddbkVJIPXgHuo5NthGKSIH0yesRfG05J88HIo=
+ENVIRONMENT=dev
+MAILER_ADAPTER=Bamboo.LocalAdapter
+LOG_LEVEL=error
+SELFHOST=false
+DISABLE_CRON=true
+ADMIN_USER_IDS=1
+SHOW_CITIES=true
+PADDLE_VENDOR_AUTH_CODE=895e20d4efaec0575bb857f44b183217b332d9592e76e69b8a
+PADDLE_VENDOR_ID=3942
+SSO_VERIFICATION_NAMESERVERS=0.0.0.0:5354
+
+GOOGLE_CLIENT_ID=875387135161-l8tp53dpt7fdhdg9m1pc3vl42si95rh0.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=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
+
+PROMEX_DISABLED=false
+SITE_DEFAULT_INGEST_THRESHOLD=1000000
+
+S3_DISABLED=false
+S3_ACCESS_KEY_ID=minioadmin
+S3_SECRET_ACCESS_KEY=minioadmin
+S3_REGION=us-east-1
+S3_ENDPOINT=http://localhost:10000
+S3_EXPORTS_BUCKET=dev-exports
+S3_IMPORTS_BUCKET=dev-imports
+
+HELP_SCOUT_APP_ID=fake_app_id
+HELP_SCOUT_APP_SECRET=fake_app_secret
+HELP_SCOUT_SIGNATURE_KEY=fake_signature_key
+HELP_SCOUT_VAULT_KEY=ym9ZQg0KPNGCH3C2eD5y6KpL0tFzUqAhwxQO6uEv/ZM=
+
+VERIFICATION_ENABLED=true

config/.env.load

@@ -0,0 +1,37 @@
+BASE_URL=http://localhost:8000
+SECURE_COOKIE=false
+DATABASE_URL=postgres://postgres:postgres@127.0.0.1:5432/plausible_dev
+CLICKHOUSE_DATABASE_URL=http://127.0.0.1:8123/plausible_events_db
+CLICKHOUSE_MAX_BUFFER_SIZE_BYTES=1000000
+SECRET_KEY_BASE=/njrhntbycvastyvtk1zycwfm981vpo/0xrvwjjvemdakc/vsvbrevlwsc6u8rcg
+TOTP_VAULT_KEY=Q3BD4nddbkVJIPXgHuo5NthGKSIH0yesRfG05J88HIo=
+ENVIRONMENT=dev
+MAILER_ADAPTER=Bamboo.LocalAdapter
+LOG_LEVEL=debug
+SELFHOST=false
+DISABLE_CRON=true
+ADMIN_USER_IDS=1
+SHOW_CITIES=true
+PADDLE_VENDOR_AUTH_CODE=895e20d4efaec0575bb857f44b183217b332d9592e76e69b8a
+PADDLE_VENDOR_ID=3942
+
+GOOGLE_CLIENT_ID=875387135161-l8tp53dpt7fdhdg9m1pc3vl42si95rh0.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=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
+
+PROMEX_DISABLED=false
+SITE_DEFAULT_INGEST_THRESHOLD=1000000
+
+S3_DISABLED=false
+S3_ACCESS_KEY_ID=minioadmin
+S3_SECRET_ACCESS_KEY=minioadmin
+S3_REGION=us-east-1
+S3_ENDPOINT=http://localhost:10000
+S3_EXPORTS_BUCKET=dev-exports
+S3_IMPORTS_BUCKET=dev-imports
+
+HELP_SCOUT_APP_ID=fake_app_id
+HELP_SCOUT_APP_SECRET=fake_app_secret
+HELP_SCOUT_SIGNATURE_KEY=fake_signature_key
+HELP_SCOUT_VAULT_KEY=ym9ZQg0KPNGCH3C2eD5y6KpL0tFzUqAhwxQO6uEv/ZM=
+
+VERIFICATION_ENABLED=true

config/.env.test

@@ -0,0 +1,31 @@
+DATABASE_URL=postgres://postgres:postgres@127.0.0.1:5432/plausible_test
+CLICKHOUSE_DATABASE_URL=http://127.0.0.1:8123/plausible_test
+SECRET_KEY_BASE=/njrhntbycvastyvtk1zycwfm981vpo/0xrvwjjvemdakc/vsvbrevlwsc6u8rcg
+TOTP_VAULT_KEY=1Jah1HEOnCEnmBE+4/OgbJRraJIppPmYCNbZoFJboZs=
+BASE_URL=http://localhost:8000
+CRON_ENABLED=false
+LOG_LEVEL=warning
+ENVIRONMENT=test
+MAILER_ADAPTER=Bamboo.TestAdapter
+ENABLE_EMAIL_VERIFICATION=true
+SELFHOST=false
+HCAPTCHA_SITEKEY=test
+HCAPTCHA_SECRET=scottiger
+IP_GEOLOCATION_DB=test/priv/GeoLite2-City-Test.mmdb
+SITE_DEFAULT_INGEST_THRESHOLD=1000000
+GOOGLE_CLIENT_ID=fake_client_id
+GOOGLE_CLIENT_SECRET=fake_client_secret
+HELP_SCOUT_APP_ID=fake_app_id
+HELP_SCOUT_APP_SECRET=fake_app_secret
+HELP_SCOUT_SIGNATURE_KEY=fake_signature_key
+HELP_SCOUT_VAULT_KEY=ym9ZQg0KPNGCH3C2eD5y6KpL0tFzUqAhwxQO6uEv/ZM=
+
+S3_DISABLED=false
+S3_ACCESS_KEY_ID=minioadmin
+S3_SECRET_ACCESS_KEY=minioadmin
+S3_REGION=us-east-1
+S3_ENDPOINT=http://localhost:10000
+S3_EXPORTS_BUCKET=test-exports
+S3_IMPORTS_BUCKET=test-imports
+
+VERIFICATION_ENABLED=true

config/ce.exs

@@ -0,0 +1,22 @@
+import Config
+
+import_config "prod.exs"
+
+config :phoenix,
+  static_compressors: [
+    PhoenixBakery.Gzip,
+    PhoenixBakery.Brotli
+  ]
+
+config :esbuild,
+  default: [
+    args:
+      ~w(js/app.js js/dashboard.tsx js/embed.host.js js/embed.content.js --bundle --target=es2017 --loader:.js=jsx --outdir=../priv/static/js --define:BUILD_EXTRA=false),
+    cd: Path.expand("../assets", __DIR__),
+    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
+  ]
+
+config :plausible, Plausible.Auth.ApiKey,
+  legacy_per_user_hourly_request_limit: 1_000_000,
+  burst_request_limit: 1_000_000,
+  burst_period_seconds: 10

config/ce_dev.exs

@@ -0,0 +1,11 @@
+import Config
+
+import_config "dev.exs"
+
+config :esbuild,
+  default: [
+    args:
+      ~w(js/app.js js/dashboard.tsx js/embed.host.js js/embed.content.js --bundle --target=es2017 --loader:.js=jsx --outdir=../priv/static/js --define:BUILD_EXTRA=false),
+    cd: Path.expand("../assets", __DIR__),
+    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
+  ]

config/ce_test.exs

@@ -0,0 +1,3 @@
+import Config
+
+import_config "test.exs"

config/config.exs

@@ -0,0 +1,89 @@
+import Config
+
+config :plausible,
+  ecto_repos: [Plausible.Repo, Plausible.IngestRepo]
+
+config :plausible, PlausibleWeb.Endpoint,
+  # Does not to have to be secret, as per: https://github.com/phoenixframework/phoenix/issues/2146
+  live_view: [signing_salt: "f+bZg/crMtgjZJJY7X6OwIWc3XJR2C5Y"],
+  pubsub_server: Plausible.PubSub,
+  render_errors: [
+    view: PlausibleWeb.ErrorView,
+    layout: {PlausibleWeb.LayoutView, "base_error.html"},
+    accepts: ~w(html json)
+  ]
+
+# Use Jason for JSON parsing in Phoenix
+config :phoenix, :json_library, Jason
+
+config :esbuild,
+  version: "0.17.11",
+  default: [
+    args:
+      ~w(js/app.js js/dashboard.tsx js/embed.host.js js/embed.content.js --bundle --target=es2017 --loader:.js=jsx --outdir=../priv/static/js --define:BUILD_EXTRA=true),
+    cd: Path.expand("../assets", __DIR__),
+    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
+  ]
+
+config :tailwind,
+  version: "4.1.12",
+  default: [
+    args: ~w(
+      --input=assets/css/app.css
+      --output=priv/static/css/app.css
+    ),
+    cd: Path.expand("..", __DIR__)
+  ]
+
+config :ua_inspector,
+  database_path: "priv/ua_inspector",
+  remote_release: "6.5.0"
+
+config :ref_inspector,
+  database_path: "priv/ref_inspector"
+
+config :plausible,
+  paddle_api: Plausible.Billing.PaddleApi,
+  google_api: Plausible.Google.API
+
+config :plausible,
+  # 30 minutes
+  session_timeout: 1000 * 60 * 30,
+  session_length_minutes: 30
+
+config :fun_with_flags, :cache_bust_notifications, enabled: false
+
+config :fun_with_flags, :persistence,
+  adapter: FunWithFlags.Store.Persistent.Ecto,
+  repo: Plausible.Repo
+
+config :plausible, Plausible.ClickhouseRepo, loggers: [Ecto.LogEntry]
+
+config :plausible, Plausible.Repo,
+  timeout: 300_000,
+  connect_timeout: 300_000,
+  handshake_timeout: 300_000,
+  queue_target: 500,
+  queue_inerval: 1100
+
+config :plausible, Plausible.Cache, enabled: true
+
+config :plausible, Plausible.Ingestion.Counters, enabled: true
+
+config :ex_cldr,
+  default_locale: "en",
+  default_backend: Plausible.Cldr
+
+config :sentry,
+  enable_source_code_context: true,
+  root_source_code_path: [File.cwd!()]
+
+config :prom_ex, :storage_adapter, Plausible.PromEx.StripedPeep
+config :peep, :bucket_calculator, Plausible.PromEx.Buckets
+
+config :plausible, Plausible.Auth.ApiKey,
+  legacy_per_user_hourly_request_limit: 600,
+  burst_request_limit: 60,
+  burst_period_seconds: 10
+
+import_config "#{config_env()}.exs"

config/dev.exs

@@ -0,0 +1,41 @@
+import Config
+
+config :plausible, PlausibleWeb.Endpoint,
+  server: true,
+  debug_errors: true,
+  code_reloader: true,
+  check_origin: false,
+  watchers: [
+    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
+    tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]},
+    npm: ["--prefix", "assets", "run", "typecheck", "--", "--watch", "--preserveWatchOutput"],
+    npm: [
+      "run",
+      "deploy",
+      cd: Path.expand("../tracker", __DIR__)
+    ]
+  ],
+  live_reload: [
+    dirs: [
+      "extra"
+    ],
+    patterns: [
+      ~r{priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$},
+      ~r"lib/plausible_web/(controllers|live|components|templates|views|plugs)/.*(ex|heex)$"
+    ]
+  ]
+
+config :plausible, paddle_api: Plausible.Billing.DevPaddleApiMock
+
+config :phoenix, :stacktrace_depth, 20
+config :phoenix, :plug_init_mode, :runtime
+
+config :plausible, Plausible.Repo, stacktrace: true
+config :plausible, Plausible.ClickhouseRepo, stacktrace: true
+config :plausible, Plausible.IngestRepo, stacktrace: true
+config :plausible, Plausible.AsyncInsertRepo, stacktrace: true
+
+config :phoenix_live_view,
+  debug_heex_annotations: true,
+  debug_attributes: true,
+  enable_expensive_runtime_checks: true

config/e2e_test.exs

@@ -0,0 +1,20 @@
+import Config
+
+config :plausible, PlausibleWeb.Endpoint,
+  server: true,
+  check_origin: false
+
+config :plausible,
+  paddle_api: Plausible.Billing.DevPaddleApiMock,
+  google_api: Plausible.Google.API.Mock
+
+config :phoenix, :stacktrace_depth, 20
+config :phoenix, :plug_init_mode, :runtime
+
+config :bcrypt_elixir, :log_rounds, 4
+
+config :plausible, Plausible.Ingestion.Counters, enabled: false
+
+config :plausible, Oban, testing: :manual
+
+config :plausible, Plausible.Session.Salts, interval: :timer.hours(1)

config/load.exs

@@ -0,0 +1,17 @@
+import Config
+
+config :plausible, PlausibleWeb.Endpoint,
+  cache_static_manifest: "priv/static/cache_manifest.json",
+  check_origin: false,
+  server: true,
+  code_reloader: false,
+  http: [
+    transport_options: [
+      num_acceptors: 1000
+    ]
+  ],
+  protocol_options: [
+    max_keepalive: 5_000,
+    idle_timeout: 120_000,
+    request_timeout: 120_000
+  ]

config/prod.exs

@@ -0,0 +1,7 @@
+import Config
+
+config :plausible, PlausibleWeb.Endpoint,
+  cache_static_manifest: "priv/static/cache_manifest.json",
+  check_origin: false,
+  server: true,
+  code_reloader: false

config/runtime.exs

@@ -0,0 +1,1102 @@
+import Config
+import Plausible.ConfigHelpers
+require Logger
+
+if config_env() in [:dev, :test, :load] do
+  Envy.load(["config/.env.#{config_env()}"])
+end
+
+if config_env() == :ce_dev do
+  Envy.load(["config/.env.dev"])
+end
+
+if config_env() == :ce_test do
+  Envy.load(["config/.env.test"])
+end
+
+if config_env() == :e2e_test do
+  Envy.load(["config/.env.e2e_test"])
+end
+
+config_dir = System.get_env("CONFIG_DIR", "/run/secrets")
+
+log_format =
+  get_var_from_path_or_env(config_dir, "LOG_FORMAT", "standard")
+
+default_log_level = if config_env() == :ce, do: "notice", else: "warning"
+
+log_level =
+  config_dir
+  |> get_var_from_path_or_env("LOG_LEVEL", default_log_level)
+  |> String.to_existing_atom()
+
+config :logger, level: log_level
+config :logger, :default_formatter, metadata: [:request_id, :trace_id]
+
+config :logger, Sentry.LoggerBackend,
+  capture_log_messages: true,
+  level: :error
+
+case String.downcase(log_format) do
+  "standard" ->
+    config :logger, :default_formatter, format: "$time $metadata[$level] $message\n"
+
+  "json" ->
+    config :logger, :default_formatter, format: {ExJsonLogger, :format}
+end
+
+# Listen IP supports IPv4 and IPv6 addresses.
+listen_ip =
+  (
+    str = get_var_from_path_or_env(config_dir, "LISTEN_IP") || "127.0.0.1"
+
+    case :inet.parse_address(String.to_charlist(str)) do
+      {:ok, ip_addr} ->
+        ip_addr
+
+      {:error, reason} ->
+        raise "Invalid LISTEN_IP '#{str}' error: #{inspect(reason)}"
+    end
+  )
+
+# System.get_env does not accept a non string default
+http_port =
+  get_int_from_path_or_env(config_dir, "HTTP_PORT") ||
+    get_int_from_path_or_env(config_dir, "PORT", 8000)
+
+https_port = get_int_from_path_or_env(config_dir, "HTTPS_PORT")
+
+base_url = get_var_from_path_or_env(config_dir, "BASE_URL")
+
+if !base_url do
+  raise "BASE_URL configuration option is required. See https://github.com/plausible/community-edition/wiki/configuration#base_url"
+end
+
+base_url = URI.parse(base_url)
+
+if base_url.scheme not in ["http", "https"] do
+  raise "BASE_URL must start with `http` or `https`. Currently configured as `#{System.get_env("BASE_URL")}`"
+end
+
+secret_key_base = get_var_from_path_or_env(config_dir, "SECRET_KEY_BASE", nil)
+
+case secret_key_base do
+  nil ->
+    raise "SECRET_KEY_BASE configuration option is required. See https://github.com/plausible/community-edition/wiki/configuration#secret_key_base"
+
+  key when byte_size(key) < 32 ->
+    raise "SECRET_KEY_BASE must be at least 32 bytes long. See https://github.com/plausible/community-edition/wiki/configuration#secret_key_base"
+
+  _ ->
+    nil
+end
+
+super_admin_user_ids =
+  get_var_from_path_or_env(config_dir, "ADMIN_USER_IDS", "")
+  |> String.split(",")
+  |> Enum.map(fn id -> Integer.parse(id) end)
+  |> Enum.map(fn
+    {int, ""} -> int
+    _ -> nil
+  end)
+  |> Enum.filter(& &1)
+
+env = get_var_from_path_or_env(config_dir, "ENVIRONMENT", "prod")
+mailer_adapter = get_var_from_path_or_env(config_dir, "MAILER_ADAPTER", "Bamboo.Mua")
+mailer_email = get_var_from_path_or_env(config_dir, "MAILER_EMAIL", "plausible@#{base_url.host}")
+
+mailer_email =
+  if mailer_name = get_var_from_path_or_env(config_dir, "MAILER_NAME") do
+    {mailer_name, mailer_email}
+  else
+    mailer_email
+  end
+
+app_version = get_var_from_path_or_env(config_dir, "APP_VERSION", "0.0.1")
+
+ch_db_url =
+  get_var_from_path_or_env(
+    config_dir,
+    "CLICKHOUSE_DATABASE_URL",
+    "http://plausible_events_db:8123/plausible_events_db"
+  )
+
+{ingest_pool_size, ""} =
+  get_var_from_path_or_env(
+    config_dir,
+    "CLICKHOUSE_INGEST_POOL_SIZE",
+    "5"
+  )
+  |> Integer.parse()
+
+{ch_flush_interval_ms, ""} =
+  config_dir
+  |> get_var_from_path_or_env("CLICKHOUSE_FLUSH_INTERVAL_MS", "5000")
+  |> Integer.parse()
+
+if get_var_from_path_or_env(config_dir, "CLICKHOUSE_MAX_BUFFER_SIZE") do
+  Logger.warning(
+    "CLICKHOUSE_MAX_BUFFER_SIZE is deprecated, please use CLICKHOUSE_MAX_BUFFER_SIZE_BYTES instead"
+  )
+end
+
+{ch_max_buffer_size, ""} =
+  config_dir
+  |> get_var_from_path_or_env("CLICKHOUSE_MAX_BUFFER_SIZE_BYTES", "100000")
+  |> Integer.parse()
+
+persistor_backend =
+  case get_var_from_path_or_env(config_dir, "PERSISTOR_BACKEND", "embedded") do
+    "embedded" -> Plausible.Ingestion.Persistor.Embedded
+    "embedded_with_relay" -> Plausible.Ingestion.Persistor.EmbeddedWithRelay
+    "remote" -> Plausible.Ingestion.Persistor.Remote
+  end
+
+{persistor_backend_percent_enabled, ""} =
+  config_dir
+  |> get_var_from_path_or_env("PERSISTOR_BACKEND_PERCENT_ENABLED", "0")
+  |> Integer.parse()
+
+persistor_url =
+  get_var_from_path_or_env(config_dir, "PERSISTOR_URL", "http://localhost:8001/event")
+
+persistor_count = get_int_from_path_or_env(config_dir, "PERSISTOR_COUNT", 200)
+
+persistor_timeout_ms = get_int_from_path_or_env(config_dir, "PERSISTOR_TIMEOUT_MS", 10_000)
+
+# Can be generated  with `Base.encode64(:crypto.strong_rand_bytes(32))` from
+# iex shell or `openssl rand -base64 32` from command line.
+totp_vault_key =
+  if totp_vault_key_base64 = get_var_from_path_or_env(config_dir, "TOTP_VAULT_KEY") do
+    case Base.decode64(totp_vault_key_base64) do
+      {:ok, totp_vault_key} ->
+        if byte_size(totp_vault_key) == 32 do
+          totp_vault_key
+        else
+          raise ArgumentError, """
+          TOTP_VAULT_KEY must be Base64 encoded 32 bytes, e.g. `openssl rand -base64 32`.
+          Got Base64 encoded #{byte_size(totp_vault_key)} bytes.
+          More info: https://github.com/plausible/community-edition/wiki/configuration#totp_vault_key
+          """
+        end
+
+      :error ->
+        raise ArgumentError, """
+        TOTP_VAULT_KEY must be Base64 encoded 32 bytes, e.g. `openssl rand -base64 32`
+        More info: https://github.com/plausible/community-edition/wiki/configuration#totp_vault_key
+        """
+    end
+  else
+    Plug.Crypto.KeyGenerator.generate(secret_key_base, "totp", length: 32, iterations: 100_000)
+  end
+
+fallback_totp_vault_key =
+  if totp_vault_key_base64 = get_var_from_path_or_env(config_dir, "TOTP_VAULT_KEY_FALLBACK") do
+    case Base.decode64(totp_vault_key_base64) do
+      {:ok, totp_vault_key} ->
+        if byte_size(totp_vault_key) == 32 do
+          totp_vault_key
+        else
+          raise ArgumentError, """
+          TOTP_VAULT_KEY_FALLBACK must be Base64 encoded 32 bytes, e.g. `openssl rand -base64 32`.
+          Got Base64 encoded #{byte_size(totp_vault_key)} bytes.
+          More info: https://github.com/plausible/community-edition/wiki/configuration#totp_vault_key
+          """
+        end
+
+      :error ->
+        raise ArgumentError, """
+        TOTP_VAULT_KEY_FALLBACK must be Base64 encoded 32 bytes, e.g. `openssl rand -base64 32`
+        More info: https://github.com/plausible/community-edition/wiki/configuration#totp_vault_key
+        """
+    end
+  end
+
+config :plausible, Plausible.Auth.TOTP,
+  vault_key: totp_vault_key,
+  fallback_vault_key: fallback_totp_vault_key || totp_vault_key
+
+build_metadata_raw = get_var_from_path_or_env(config_dir, "BUILD_METADATA", "{}")
+
+build_metadata =
+  case Jason.decode(build_metadata_raw) do
+    {:ok, build_metadata} ->
+      build_metadata
+
+    {:error, error} ->
+      error = Exception.format(:error, error)
+
+      Logger.warning("""
+      failed to parse $BUILD_METADATA: #{error}
+
+          $BUILD_METADATA is set to #{build_metadata_raw}\
+      """)
+
+      Logger.warning("falling back to empty build metadata, as if $BUILD_METADATA was set to {}")
+
+      _fallback = %{}
+  end
+
+app_host = get_var_from_path_or_env(config_dir, "APP_HOST")
+
+runtime_metadata = [
+  version: get_in(build_metadata, ["labels", "org.opencontainers.image.version"]),
+  commit: get_in(build_metadata, ["labels", "org.opencontainers.image.revision"]),
+  created: get_in(build_metadata, ["labels", "org.opencontainers.image.created"]),
+  tags: get_in(build_metadata, ["tags"]),
+  app_host: app_host
+]
+
+config :plausible, :runtime_metadata, runtime_metadata
+
+sentry_dsn = get_var_from_path_or_env(config_dir, "SENTRY_DSN")
+honeycomb_api_key = get_var_from_path_or_env(config_dir, "HONEYCOMB_API_KEY")
+honeycomb_dataset = get_var_from_path_or_env(config_dir, "HONEYCOMB_DATASET")
+paddle_auth_code = get_var_from_path_or_env(config_dir, "PADDLE_VENDOR_AUTH_CODE")
+paddle_vendor_id = get_var_from_path_or_env(config_dir, "PADDLE_VENDOR_ID")
+google_cid = get_var_from_path_or_env(config_dir, "GOOGLE_CLIENT_ID")
+google_secret = get_var_from_path_or_env(config_dir, "GOOGLE_CLIENT_SECRET")
+postmark_api_key = get_var_from_path_or_env(config_dir, "POSTMARK_API_KEY")
+help_scout_app_id = get_var_from_path_or_env(config_dir, "HELP_SCOUT_APP_ID")
+help_scout_app_secret = get_var_from_path_or_env(config_dir, "HELP_SCOUT_APP_SECRET")
+help_scout_signature_key = get_var_from_path_or_env(config_dir, "HELP_SCOUT_SIGNATURE_KEY")
+help_scout_vault_key = get_var_from_path_or_env(config_dir, "HELP_SCOUT_VAULT_KEY")
+
+otlp_endpoint =
+  get_var_from_path_or_env(config_dir, "OTLP_ENDPOINT", "https://api.honeycomb.io:443")
+
+geolite2_country_db =
+  get_var_from_path_or_env(
+    config_dir,
+    "GEOLITE2_COUNTRY_DB",
+    Application.app_dir(:plausible, "/priv/geodb/dbip-country.mmdb.gz")
+  )
+
+ip_geolocation_db = get_var_from_path_or_env(config_dir, "IP_GEOLOCATION_DB", geolite2_country_db)
+geonames_source_file = get_var_from_path_or_env(config_dir, "GEONAMES_SOURCE_FILE")
+maxmind_license_key = get_var_from_path_or_env(config_dir, "MAXMIND_LICENSE_KEY")
+maxmind_edition = get_var_from_path_or_env(config_dir, "MAXMIND_EDITION", "GeoLite2-City")
+data_dir = get_var_from_path_or_env(config_dir, "DATA_DIR")
+persistent_cache_dir = get_var_from_path_or_env(config_dir, "PERSISTENT_CACHE_DIR")
+
+# DEFAULT_DATA_DIR comes from the container image, please see our Dockerfile
+data_dir = data_dir || persistent_cache_dir || System.get_env("DEFAULT_DATA_DIR")
+persistent_cache_dir = persistent_cache_dir || data_dir
+
+session_transfer_dir =
+  if get_bool_from_path_or_env(config_dir, "ENABLE_SESSION_TRANSFER", config_env() == :prod) do
+    if persistent_cache_dir do
+      Path.join(persistent_cache_dir, "sessions")
+    end
+  end
+
+enable_email_verification =
+  get_bool_from_path_or_env(config_dir, "ENABLE_EMAIL_VERIFICATION", false)
+
+is_selfhost = get_bool_from_path_or_env(config_dir, "SELFHOST", true)
+
+# by default, only registration from invites is enabled in CE
+disable_registration_default =
+  if config_env() == :ce do
+    "invite_only"
+  else
+    "false"
+  end
+
+disable_registration =
+  config_dir
+  |> get_var_from_path_or_env("DISABLE_REGISTRATION", disable_registration_default)
+  |> String.to_existing_atom()
+
+if disable_registration not in [true, false, :invite_only] do
+  raise "DISABLE_REGISTRATION must be one of `true`, `false`, or `invite_only`. See https://github.com/plausible/community-edition/wiki/configuration#disable_registration"
+end
+
+hcaptcha_sitekey = get_var_from_path_or_env(config_dir, "HCAPTCHA_SITEKEY")
+hcaptcha_secret = get_var_from_path_or_env(config_dir, "HCAPTCHA_SECRET")
+
+custom_script_name =
+  config_dir
+  |> get_var_from_path_or_env("CUSTOM_SCRIPT_NAME", "script")
+
+disable_cron = get_bool_from_path_or_env(config_dir, "DISABLE_CRON", false)
+
+log_failed_login_attempts =
+  get_bool_from_path_or_env(config_dir, "LOG_FAILED_LOGIN_ATTEMPTS", false)
+
+websocket_url = get_var_from_path_or_env(config_dir, "WEBSOCKET_URL", "")
+
+if byte_size(websocket_url) > 0 and
+     not String.ends_with?(URI.new!(websocket_url).host, base_url.host) do
+  raise """
+  Cross-domain websocket authentication is not supported for this server.
+
+  WEBSOCKET_URL=#{websocket_url} - host must be: '#{base_url.host}',
+  because BASE_URL=#{base_url}.
+  """
+end
+
+secure_cookie_default =
+  case base_url.scheme do
+    "http" -> "false"
+    "https" -> "true"
+  end
+
+secure_cookie =
+  config_dir
+  |> get_var_from_path_or_env("SECURE_COOKIE", secure_cookie_default)
+  |> String.to_existing_atom()
+
+license_key = get_var_from_path_or_env(config_dir, "LICENSE_KEY", "")
+
+sso_saml_adapter =
+  case get_var_from_path_or_env(config_dir, "SSO_SAML_ADAPTER", "fake") do
+    "fake" -> PlausibleWeb.SSO.FakeSAMLAdapter
+    "real" -> PlausibleWeb.SSO.RealSAMLAdapter
+  end
+
+sso_verification_nameservers =
+  case get_var_from_path_or_env(config_dir, "SSO_VERIFICATION_NAMESERVERS") do
+    nil ->
+      nil
+
+    some when is_binary(some) ->
+      some
+      |> String.split(",")
+      |> Enum.map(fn addr ->
+        uri = URI.parse("dns://#{addr}")
+        host = uri.host
+        port = uri.port || 53
+        {:ok, addr} = :inet.parse_address(to_charlist(host))
+        {addr, port}
+      end)
+  end
+
+config :plausible,
+  environment: env,
+  mailer_email: mailer_email,
+  super_admin_user_ids: super_admin_user_ids,
+  is_selfhost: is_selfhost,
+  custom_script_name: custom_script_name,
+  log_failed_login_attempts: log_failed_login_attempts,
+  license_key: license_key,
+  data_dir: data_dir,
+  session_transfer_dir: session_transfer_dir,
+  sso_saml_adapter: sso_saml_adapter,
+  sso_verification_nameservers: sso_verification_nameservers
+
+config :plausible, :selfhost,
+  enable_email_verification: enable_email_verification,
+  disable_registration: disable_registration
+
+default_http_opts = [
+  transport_options: [max_connections: :infinity],
+  protocol_options: [max_request_line_length: 8192, max_header_value_length: 8192]
+]
+
+config :plausible, PlausibleWeb.Endpoint,
+  url: [scheme: base_url.scheme, host: base_url.host, path: base_url.path, port: base_url.port],
+  http: [port: http_port, ip: listen_ip] ++ default_http_opts,
+  secret_key_base: secret_key_base,
+  websocket_url: websocket_url,
+  secure_cookie: secure_cookie,
+  base_url: base_url
+
+# maybe enable HTTPS in CE
+if config_env() in [:ce, :ce_dev, :ce_test] do
+  if https_port do
+    # the following configuration is based on https://wiki.mozilla.org/Security/Server_Side_TLS#Intermediate_compatibility_.28recommended.29
+    # except we enforce the cipher and ecc order and only use ciphers with support
+    # for ecdsa certificates since that's what certbot generates by default
+    https_opts =
+      [
+        port: https_port,
+        ip: listen_ip,
+        transport_options: [socket_opts: [log_level: :warning]],
+        versions: [:"tlsv1.2", :"tlsv1.3"],
+        honor_cipher_order: true,
+        honor_ecc_order: true,
+        eccs: [:x25519, :secp256r1, :secp384r1],
+        supported_groups: [:x25519, :secp256r1, :secp384r1],
+        ciphers: [
+          # Mozilla recommended cipher suites (TLS 1.3)
+          ~c"TLS_AES_128_GCM_SHA256",
+          ~c"TLS_AES_256_GCM_SHA384",
+          ~c"TLS_CHACHA20_POLY1305_SHA256",
+          # Mozilla recommended cipher suites (TLS 1.2)
+          ~c"ECDHE-ECDSA-AES128-GCM-SHA256",
+          ~c"ECDHE-ECDSA-AES256-GCM-SHA384",
+          ~c"ECDHE-ECDSA-CHACHA20-POLY1305"
+        ]
+      ]
+
+    https_opts = Config.Reader.merge(default_http_opts, https_opts)
+    config :plausible, PlausibleWeb.Endpoint, https: https_opts
+
+    domain = base_url.host
+
+    # do stricter checking in CE prod
+    if config_env() == :ce do
+      domain_is_ip? =
+        case :inet.parse_address(to_charlist(domain)) do
+          {:ok, _address} -> true
+          _other -> false
+        end
+
+      if domain_is_ip? do
+        raise ArgumentError, "Cannot generate TLS certificates for IP address #{inspect(domain)}"
+      end
+
+      domain_is_local? = domain == "localhost" or not String.contains?(domain, ".")
+
+      if domain_is_local? do
+        raise ArgumentError,
+              "Cannot generate TLS certificates for local domain #{inspect(domain)}"
+      end
+
+      unless http_port == 80 do
+        Logger.warning("""
+        HTTPS is enabled but the HTTP port is not 80. \
+        This will prevent automatic TLS certificate issuance as ACME validates the domain on port 80.\
+        """)
+      end
+    end
+
+    acme_directory_url =
+      get_var_from_path_or_env(
+        config_dir,
+        "ACME_DIRECTORY_URL",
+        "https://acme-v02.api.letsencrypt.org/directory"
+      )
+
+    db_folder = Path.join(data_dir || System.tmp_dir!(), "site_encrypt")
+
+    email =
+      case mailer_email do
+        {_, email} -> email
+        email when is_binary(email) -> email
+      end
+
+    config :plausible, :selfhost,
+      site_encrypt: [
+        domain: domain,
+        email: email,
+        db_folder: db_folder,
+        directory_url: acme_directory_url
+      ]
+  end
+end
+
+db_maybe_ipv6 =
+  if get_bool_from_path_or_env(config_dir, "ECTO_IPV6") do
+    if config_env() in [:ce, :ce_dev, :ce_test] do
+      Logger.warning(
+        "ECTO_IPV6 is no longer necessary as all TCP connections now try IPv6 automatically with IPv4 fallback"
+      )
+    end
+
+    [:inet6]
+  else
+    []
+  end
+
+db_url =
+  get_var_from_path_or_env(
+    config_dir,
+    "DATABASE_URL",
+    "postgres://postgres:postgres@plausible_db:5432/plausible_db"
+  )
+
+if db_socket_dir = get_var_from_path_or_env(config_dir, "DATABASE_SOCKET_DIR") do
+  Logger.warning("""
+  DATABASE_SOCKET_DIR is deprecated, please use DATABASE_URL instead:
+
+      DATABASE_URL=postgresql://postgres:postgres@#{URI.encode_www_form(db_socket_dir)}/plausible_db
+
+  or
+
+      DATABASE_URL=postgresql:///plausible_db?host=#{db_socket_dir}"
+
+  """)
+end
+
+db_cacertfile = get_var_from_path_or_env(config_dir, "DATABASE_CACERTFILE")
+%URI{host: db_host} = db_uri = URI.parse(db_url)
+db_socket_dir? = String.starts_with?(db_host, "%2F") or db_host == ""
+
+if db_socket_dir? do
+  [database] = String.split(db_uri.path, "/", trim: true)
+
+  socket_dir =
+    if db_host == "" do
+      db_host = (db_uri.query || "") |> URI.decode_query() |> Map.get("host")
+      db_host || raise ArgumentError, "DATABASE_URL=#{db_url} doesn't include host info"
+    else
+      URI.decode_www_form(db_host)
+    end
+
+  config :plausible, Plausible.Repo,
+    socket_dir: socket_dir,
+    database: database
+
+  if userinfo = db_uri.userinfo do
+    [username, password] = String.split(userinfo, ":")
+
+    config :plausible, Plausible.Repo,
+      username: username,
+      password: password
+  end
+else
+  config :plausible, Plausible.Repo, url: db_url
+
+  unless Enum.empty?(db_maybe_ipv6) do
+    config :plausible, Plausible.Repo, socket_options: db_maybe_ipv6
+  end
+
+  db_query = URI.decode_query(db_uri.query || "")
+  # https://www.postgresql.org/docs/current/libpq-ssl.html#LIBPQ-SSL-SSLMODE-STATEMENTS
+  pg_sslmode = db_query["sslmode"]
+
+  pg_ssl =
+    cond do
+      db_cacertfile ->
+        [cacertfile: db_cacertfile, verify: :verify_peer]
+
+      pg_sslmode == "verify-full" ->
+        if pg_sslrootcert = db_query["sslrootcert"] do
+          [cacertfile: pg_sslrootcert, verify: :verify_peer]
+        else
+          raise ArgumentError,
+                "PostgreSQL SSL mode `sslmode=#{pg_sslmode}` requires a certificate, set it in `sslrootcert`"
+        end
+
+      pg_sslmode == "verify-ca" ->
+        [cacerts: :public_key.cacerts_get(), verify: :verify_peer]
+
+      pg_sslmode == "require" ->
+        [verify: :verify_none]
+
+      pg_sslmode == "disable" ->
+        false
+
+      pg_sslmode ->
+        raise ArgumentError,
+              "PostgreSQL SSL mode `sslmode=#{pg_sslmode}` is not supported, use `disable`, `require`, `verify-ca` or `verify-full` instead"
+
+      true ->
+        # tls is disabled by default, because in self-hosted docker compose postgres is co-located
+        false
+    end
+
+  config :plausible, Plausible.Repo, ssl: pg_ssl
+end
+
+sentry_app_version = runtime_metadata[:version] || app_version
+
+config :sentry,
+  dsn: sentry_dsn,
+  environment_name: env,
+  release: sentry_app_version,
+  tags: %{
+    app_version: sentry_app_version,
+    app_host: app_host
+  },
+  client: Plausible.Sentry.Client,
+  send_max_attempts: 1,
+  before_send: {Plausible.SentryFilter, :before_send}
+
+config :plausible, :paddle,
+  vendor_auth_code: paddle_auth_code,
+  vendor_id: paddle_vendor_id
+
+config :plausible, :google,
+  client_id: google_cid,
+  client_secret: google_secret,
+  api_url: "https://www.googleapis.com",
+  reporting_api_url: "https://analyticsreporting.googleapis.com"
+
+config :plausible, Plausible.HelpScout,
+  app_id: help_scout_app_id,
+  app_secret: help_scout_app_secret,
+  signature_key: help_scout_signature_key,
+  vault_key: help_scout_vault_key
+
+config :plausible, :imported,
+  max_buffer_size: get_int_from_path_or_env(config_dir, "IMPORTED_MAX_BUFFER_SIZE", 10_000)
+
+maybe_ch_ipv6 = get_bool_from_path_or_env(config_dir, "ECTO_CH_IPV6", false)
+
+if maybe_ch_ipv6 && config_env() in [:ce, :ce_dev, :ce_test] do
+  Logger.warning(
+    "ECTO_CH_IPV6 is no longer necessary as all TCP connections now try IPv6 automatically with IPv4 fallback"
+  )
+end
+
+ch_cacertfile = get_var_from_path_or_env(config_dir, "CLICKHOUSE_CACERTFILE")
+
+ch_transport_opts = [
+  keepalive: true,
+  show_econnreset: true,
+  inet6: maybe_ch_ipv6
+]
+
+ch_transport_opts =
+  if ch_cacertfile do
+    ch_transport_opts ++ [cacertfile: ch_cacertfile]
+  else
+    ch_transport_opts
+  end
+
+config :plausible, Plausible.ClickhouseRepo,
+  queue_target: 500,
+  queue_interval: 2000,
+  timeout: 15_000,
+  url: ch_db_url,
+  transport_opts: ch_transport_opts,
+  settings: [
+    readonly: 1,
+    join_algorithm: "direct,parallel_hash,hash",
+    # stops queries when :timeout ClickhouseRepo connection :timeout value reached
+    cancel_http_readonly_queries_on_client_close: 1,
+    # stops queries when they will likely take over 20s
+    # NB! when :timeout is overridden to be over 20s,
+    # for it to have meaningful effect,
+    # this must be overridden as well
+    max_execution_time: 20
+  ]
+
+config :plausible, Plausible.IngestRepo,
+  queue_target: 500,
+  queue_interval: 2000,
+  url: ch_db_url,
+  transport_opts: ch_transport_opts,
+  flush_interval_ms: ch_flush_interval_ms,
+  max_buffer_size: ch_max_buffer_size,
+  pool_size: ingest_pool_size,
+  settings: [
+    materialized_views_ignore_errors: 1
+  ],
+  table_settings: [
+    storage_policy: get_var_from_path_or_env(config_dir, "CLICKHOUSE_DEFAULT_STORAGE_POLICY")
+  ]
+
+config :plausible, Plausible.AsyncInsertRepo,
+  queue_target: 500,
+  queue_interval: 2000,
+  url: ch_db_url,
+  transport_opts: ch_transport_opts,
+  pool_size: 1,
+  settings: [
+    async_insert: 1,
+    wait_for_async_insert: 0,
+    materialized_views_ignore_errors: 1
+  ]
+
+config :plausible, Plausible.ImportDeletionRepo,
+  queue_target: 500,
+  queue_interval: 2000,
+  url: ch_db_url,
+  transport_opts: ch_transport_opts,
+  pool_size: 1
+
+config :plausible, Plausible.Ingestion.Persistor,
+  backend: persistor_backend,
+  backend_percent_enabled: persistor_backend_percent_enabled
+
+config :plausible, Plausible.Ingestion.Persistor.Remote,
+  url: persistor_url,
+  count: persistor_count,
+  timeout_ms: persistor_timeout_ms
+
+config :ex_money,
+  open_exchange_rates_app_id: get_var_from_path_or_env(config_dir, "OPEN_EXCHANGE_RATES_APP_ID"),
+  retrieve_every: :timer.hours(24)
+
+case mailer_adapter do
+  "Bamboo.PostmarkAdapter" ->
+    config :plausible, Plausible.Mailer,
+      adapter: Bamboo.PostmarkAdapter,
+      request_options: [recv_timeout: 10_000],
+      api_key: get_var_from_path_or_env(config_dir, "POSTMARK_API_KEY")
+
+  "Bamboo.MailgunAdapter" ->
+    config :plausible, Plausible.Mailer,
+      adapter: Bamboo.MailgunAdapter,
+      hackney_opts: [recv_timeout: :timer.seconds(10)],
+      api_key: get_var_from_path_or_env(config_dir, "MAILGUN_API_KEY"),
+      domain: get_var_from_path_or_env(config_dir, "MAILGUN_DOMAIN")
+
+    if mailgun_base_uri = get_var_from_path_or_env(config_dir, "MAILGUN_BASE_URI") do
+      config :plausible, Plausible.Mailer, base_uri: mailgun_base_uri
+    end
+
+  "Bamboo.MandrillAdapter" ->
+    config :plausible, Plausible.Mailer,
+      adapter: Bamboo.MandrillAdapter,
+      hackney_opts: [recv_timeout: :timer.seconds(10)],
+      api_key: get_var_from_path_or_env(config_dir, "MANDRILL_API_KEY")
+
+  "Bamboo.SendGridAdapter" ->
+    config :plausible, Plausible.Mailer,
+      adapter: Bamboo.SendGridAdapter,
+      hackney_opts: [recv_timeout: :timer.seconds(10)],
+      api_key: get_var_from_path_or_env(config_dir, "SENDGRID_API_KEY")
+
+  "Bamboo.SMTPAdapter" ->
+    raise ArgumentError, """
+    Bamboo.SMTPAdapter is no longer supported as the adapter is no longer maintained.
+    Please switch to Bamboo.Mua instead.
+    """
+
+  "Bamboo.Mua" ->
+    config :plausible, Plausible.Mailer, adapter: Bamboo.Mua
+
+    # prevents common problems with Erlang's TLS v1.3
+    middlebox_comp_mode =
+      get_bool_from_path_or_env(config_dir, "SMTP_MIDDLEBOX_COMP_MODE", false)
+
+    config :plausible, Plausible.Mailer, ssl: [middlebox_comp_mode: middlebox_comp_mode]
+
+    if relay = get_var_from_path_or_env(config_dir, "SMTP_HOST_ADDR") do
+      port = get_int_from_path_or_env(config_dir, "SMTP_HOST_PORT", 587)
+      ssl_enabled = get_bool_from_path_or_env(config_dir, "SMTP_HOST_SSL_ENABLED")
+
+      protocol =
+        cond do
+          ssl_enabled -> :ssl
+          is_nil(ssl_enabled) and port == 465 -> :ssl
+          true -> :tcp
+        end
+
+      config :plausible, Plausible.Mailer, protocol: protocol, relay: relay, port: port
+    end
+
+    username = get_var_from_path_or_env(config_dir, "SMTP_USER_NAME")
+    password = get_var_from_path_or_env(config_dir, "SMTP_USER_PWD")
+
+    cond do
+      username && password ->
+        config :plausible, Plausible.Mailer, auth: [username: username, password: password]
+
+      username || password ->
+        raise ArgumentError, """
+        Both SMTP_USER_NAME and SMTP_USER_PWD must be set for SMTP authentication.
+        Please provide values for both environment variables.
+        """
+
+      _both_nil = true ->
+        nil
+    end
+
+  "Bamboo.LocalAdapter" ->
+    config :plausible, Plausible.Mailer, adapter: Bamboo.LocalAdapter
+
+  "Bamboo.TestAdapter" ->
+    config :plausible, Plausible.Mailer, adapter: Bamboo.TestAdapter
+
+  _ ->
+    raise ArgumentError, """
+    Unknown mailer_adapter: #{inspect(mailer_adapter)}
+
+    Please see https://hexdocs.pm/bamboo/readme.html#available-adapters
+    for the list of available adapters that ship with Bamboo
+    """
+end
+
+base_cron = [
+  # Daily at midnight
+  {"0 0 * * *", Plausible.Workers.RotateSalts},
+  # hourly
+  {"0 * * * *", Plausible.Workers.ScheduleEmailReports},
+  # hourly
+  {"0 * * * *", Plausible.Workers.SendSiteSetupEmails},
+  # Daily at midday
+  {"0 12 * * *", Plausible.Workers.SendCheckStatsEmails},
+  # Every 15 minutes
+  {"*/15 * * * *", Plausible.Workers.TrafficChangeNotifier},
+  # Every day at 1am
+  {"0 1 * * *", Plausible.Workers.CleanInvitations},
+  # Every 2 hours
+  {"30 */2 * * *", Plausible.Workers.CleanUserSessions},
+  # Every 2 hours
+  {"0 */2 * * *", Plausible.Workers.ExpireDomainChangeTransitions},
+  # Daily at midnight
+  {"0 0 * * *", Plausible.Workers.LocationsSync}
+]
+
+cloud_cron = [
+  # Daily at midday
+  {"0 12 * * *", Plausible.Workers.SendTrialNotifications},
+  # Daily at 14
+  {"0 14 * * *", Plausible.Workers.CheckUsage},
+  # Daily at 15
+  {"0 15 * * *", Plausible.Workers.NotifyAnnualRenewal},
+  # Every midnight
+  {"0 0 * * *", Plausible.Workers.LockSites},
+  # Daily at 8
+  {"0 8 * * *", Plausible.Workers.AcceptTrafficUntil},
+  # First sunday of the month, 4:00 UTC
+  {"0 4 1-7 * SUN", Plausible.Workers.ClickhouseCleanSites},
+  # Daily at 4:00 UTC
+  {"0 4 * * *", Plausible.Workers.SetLegacyTimeOnPageCutoff},
+  # Daily at 2:00 UTC
+  {"0 2 * * *", Plausible.Workers.ScoreTrialProspects}
+]
+
+crontab = if(is_selfhost, do: base_cron, else: base_cron ++ cloud_cron)
+
+base_queues = [
+  rotate_salts: 1,
+  schedule_email_reports: 1,
+  send_email_reports: 1,
+  spike_notifications: 1,
+  check_stats_emails: 1,
+  site_setup_emails: 1,
+  clean_invitations: 1,
+  clean_user_sessions: 1,
+  analytics_imports: 1,
+  analytics_exports: 1,
+  notify_exported_analytics: 1,
+  domain_change_transition: 1,
+  check_accept_traffic_until: 1,
+  clickhouse_clean_sites: 1,
+  locations_sync: 1
+]
+
+cloud_queues = [
+  trial_notification_emails: 1,
+  check_usage: 1,
+  notify_annual_renewal: 1,
+  lock_sites: 1,
+  legacy_time_on_page_cutoff: 1,
+  purge_cdn_cache: 1,
+  sso_domain_ownership_verification: 32,
+  score_trial_prospects: 1
+]
+
+queues = if(is_selfhost, do: base_queues, else: base_queues ++ cloud_queues)
+cron_enabled = !disable_cron
+
+thirty_days_in_seconds = 60 * 60 * 24 * 30
+
+if config_env() in [:prod, :ce, :load] do
+  config :plausible, Oban,
+    repo: Plausible.Repo,
+    plugins: [
+      # Keep 30 days history
+      {Oban.Plugins.Pruner, max_age: thirty_days_in_seconds},
+      {Oban.Plugins.Cron, crontab: if(cron_enabled, do: crontab, else: [])},
+      # Rescue orphaned jobs after 2 hours
+      {Oban.Plugins.Lifeline, rescue_after: :timer.minutes(120)},
+      # Daily at 1am
+      {Oban.Plugins.Reindexer, schedule: "0 1 * * *"}
+    ],
+    queues: if(cron_enabled, do: queues, else: []),
+    peer: if(cron_enabled, do: Oban.Peers.Postgres, else: false)
+else
+  config :plausible, Oban,
+    repo: Plausible.Repo,
+    queues: queues
+end
+
+config :plausible, :hcaptcha,
+  sitekey: hcaptcha_sitekey,
+  secret: hcaptcha_secret
+
+nolt_sso_secret = get_var_from_path_or_env(config_dir, "NOLT_SSO_SECRET")
+config :joken, default_signer: nolt_sso_secret
+
+config :plausible, Plausible.Sentry.Client,
+  finch_request_opts: [
+    pool_timeout: get_int_from_path_or_env(config_dir, "SENTRY_FINCH_POOL_TIMEOUT", 5000),
+    receive_timeout: get_int_from_path_or_env(config_dir, "SENTRY_FINCH_RECEIVE_TIMEOUT", 15000)
+  ]
+
+config :plausible, Plausible.Workers.PurgeCDNCache,
+  pullzone_id: get_var_from_path_or_env(config_dir, "BUNNY_PULLZONE_ID"),
+  api_key: get_var_from_path_or_env(config_dir, "BUNNY_API_KEY")
+
+config :ref_inspector,
+  init: {Plausible.Release, :configure_ref_inspector}
+
+config :ua_inspector,
+  init: {Plausible.Release, :configure_ua_inspector}
+
+geo_opts =
+  cond do
+    maxmind_license_key ->
+      [
+        license_key: maxmind_license_key,
+        edition: maxmind_edition,
+        cache_dir: persistent_cache_dir,
+        async: true
+      ]
+
+    ip_geolocation_db ->
+      [path: ip_geolocation_db]
+
+    true ->
+      raise """
+      Missing geolocation database configuration.
+
+      Please set the IP_GEOLOCATION_DB environment value to the location of
+      your IP geolocation .mmdb file:
+
+          IP_GEOLOCATION_DB=/etc/plausible/dbip-city.mmdb
+
+      Or authenticate with MaxMind by
+      configuring MAXMIND_LICENSE_KEY and (optionally) MAXMIND_EDITION environment
+      variables:
+
+          MAXMIND_LICENSE_KEY=LNpsJCCKPis6XvBP
+          MAXMIND_EDITION=GeoLite2-City # this is the default edition
+
+      """
+  end
+
+config :plausible, Plausible.Geo, geo_opts
+
+if geonames_source_file do
+  config :location, :geonames_source_file, geonames_source_file
+end
+
+if honeycomb_api_key && honeycomb_dataset do
+  config :opentelemetry,
+    resource: Plausible.OpenTelemetry.resource_attributes(runtime_metadata),
+    span_processor: :batch,
+    traces_exporter: :otlp
+
+  config :opentelemetry_exporter,
+    otlp_protocol: :grpc,
+    otlp_endpoint: otlp_endpoint,
+    otlp_headers: [
+      {"x-honeycomb-team", honeycomb_api_key},
+      {"x-honeycomb-dataset", honeycomb_dataset}
+    ]
+else
+  config :opentelemetry,
+    sampler: :always_off,
+    traces_exporter: :none
+end
+
+beam_metrics_enabled? = get_bool_from_path_or_env(config_dir, "BEAM_METRICS_ENABLED", false)
+
+if beam_metrics_enabled? do
+  beam_metrics_interval = get_int_from_path_or_env(config_dir, "BEAM_METRICS_INTERVAL_MS", 5_000)
+
+  beam_metrics_otlp_endpoint =
+    get_var_from_path_or_env(config_dir, "OTEL_EXPORTER_OTLP_ENDPOINT") || otlp_endpoint
+
+  config :opentelemetry_experimental,
+    readers: [
+      %{
+        module: :otel_metric_reader,
+        config: %{
+          export_interval_ms: beam_metrics_interval,
+          exporter:
+            {:otel_exporter_metrics_otlp,
+             %{
+               endpoints: [beam_metrics_otlp_endpoint]
+             }}
+        }
+      }
+    ]
+end
+
+config :tzdata, :data_dir, Path.join(persistent_cache_dir || System.tmp_dir!(), "tzdata_data")
+
+promex_disabled? = get_bool_from_path_or_env(config_dir, "PROMEX_DISABLED", true)
+
+config :plausible, Plausible.PromEx,
+  disabled: promex_disabled?,
+  manual_metrics_start_delay: :no_delay,
+  drop_metrics_groups: [],
+  grafana: :disabled,
+  metrics_server: :disabled
+
+config :plausible, Plausible.InstallationSupport.BrowserlessConfig,
+  token: get_var_from_path_or_env(config_dir, "BROWSERLESS_TOKEN", "dummy_token"),
+  endpoint: get_var_from_path_or_env(config_dir, "BROWSERLESS_ENDPOINT", "http://0.0.0.0:3000")
+
+if not is_selfhost do
+  site_default_ingest_threshold =
+    case System.get_env("SITE_DEFAULT_INGEST_THRESHOLD") do
+      threshold when byte_size(threshold) > 0 ->
+        {value, ""} = Integer.parse(threshold)
+        value
+
+      _ ->
+        nil
+    end
+
+  config :plausible, Plausible.Site, default_ingest_threshold: site_default_ingest_threshold
+end
+
+s3_disabled? = get_bool_from_path_or_env(config_dir, "S3_DISABLED", true)
+
+unless s3_disabled? do
+  s3_env = [
+    %{
+      name: "S3_ACCESS_KEY_ID",
+      example: "AKIAIOSFODNN7EXAMPLE"
+    },
+    %{
+      name: "S3_SECRET_ACCESS_KEY",
+      example: "wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY"
+    },
+    %{
+      name: "S3_REGION",
+      example: "us-east-1"
+    },
+    %{
+      name: "S3_ENDPOINT",
+      example: "https://<ACCOUNT_ID>.r2.cloudflarestorage.com"
+    },
+    %{
+      name: "S3_EXPORTS_BUCKET",
+      example: "my-csv-exports-bucket"
+    },
+    %{
+      name: "S3_IMPORTS_BUCKET",
+      example: "my-csv-imports-bucket"
+    }
+  ]
+
+  s3_env =
+    Enum.map(s3_env, fn var ->
+      Map.put(var, :value, get_var_from_path_or_env(config_dir, var.name))
+    end)
+
+  s3_missing_env = Enum.filter(s3_env, &is_nil(&1.value))
+
+  unless s3_missing_env == [] do
+    raise ArgumentError, """
+    Missing S3 configuration. Please set #{s3_missing_env |> Enum.map(& &1.name) |> Enum.join(", ")} environment variable(s):
+
+    #{s3_missing_env |> Enum.map(fn %{name: name, example: example} -> "\t#{name}=#{example}" end) |> Enum.join("\n")}
+    """
+  end
+
+  s3_env_value = fn name ->
+    s3_env |> Enum.find(&(&1.name == name)) |> Map.fetch!(:value)
+  end
+
+  config :ex_aws,
+    http_client: Plausible.S3.Client,
+    access_key_id: s3_env_value.("S3_ACCESS_KEY_ID"),
+    secret_access_key: s3_env_value.("S3_SECRET_ACCESS_KEY"),
+    region: s3_env_value.("S3_REGION")
+
+  %URI{scheme: s3_scheme, host: s3_host, port: s3_port} = URI.parse(s3_env_value.("S3_ENDPOINT"))
+
+  config :ex_aws, :s3,
+    scheme: s3_scheme <> "://",
+    host: s3_host,
+    port: s3_port
+
+  config :plausible, Plausible.S3,
+    exports_bucket: s3_env_value.("S3_EXPORTS_BUCKET"),
+    imports_bucket: s3_env_value.("S3_IMPORTS_BUCKET")
+end
+
+config :plausible, Plausible.Cache.Adapter, sessions: [partitions: 100]