#434

frontend/src/components/counts/CountsAdditionalConditions.tsx

@@ -7,6 +7,9 @@ import { countsConditionInputs, countsEventTypes, countsFieldLabel, countsFilter
 	 countsSetOperators, useCountsDefinition }
     from '@/lib/countsDefinitions'
 import useDialogue from '@/lib/dialogues/useDialogue'
+import { countsSummaryValue } from '@/lib/countsDisplay'
+import { countsAxisLabel } from '@/lib/countsDefinitions'
+import { useLocale } from '@/lib/useLocale'
 import { inputClass } from '@/lib/utils'
 import { useUITranslation } from '@/lib/useUITranslation'
 
@@ -97,6 +100,7 @@ const CountsAdditionalConditions = ({ params, update }: {
   const { label, message } = useUITranslation ('counts')
   const definition = useCountsDefinition ()
   const dialogue = useDialogue ()
+  const locale = useLocale ()
   const conditions = readCountState<CountsCondition[]> (params, 'conditions', [])
   const metadata = definition.filterFields ?? definition.fields
   const fields = metadata.filter (field => field.operators.length > 0 && !field.legacy)
@@ -153,7 +157,35 @@ const CountsAdditionalConditions = ({ params, update }: {
     <legend className="flex items-center gap-2">{label ('additionalConditions')}
       <Button type="button" variant="outline" size="sm" disabled={fields.length === 0}
 	  onClick={() => edit ()}>{label ('add')}</Button></legend>
-    {conditions.map ((condition, index) => (
+    {params.get ('tags') && params.get ('match') && <div
+        className="flex items-center gap-2">
+      <span>match = {params.get ('match')}</span>
+      <Button type="button" variant="ghost" size="sm"
+          aria-label={message ('remove').text} onClick={() => update ('match', '')}>×</Button>
+    </div>}
+    {readCountState<Record<string, string | number | boolean>[]> (
+        params, 'tag_refs', []).map ((reference, index, references) => (
+        <div key={`reference-${index}`} className="flex flex-wrap items-center gap-2">
+          <span>{Object.entries (reference).map (([key, value]) =>
+              `${key}=${value}`).join (' ')}</span>
+          <Button type="button" variant="ghost" size="sm"
+              aria-label={message ('remove').text}
+              onClick={() => update ('tag_refs', encodeCountState ('tag_refs',
+                  references.filter ((_, position) => position !== index)))}>×</Button>
+        </div>))}
+    {conditions.map ((condition, index) => condition.operator === 'axis_eq' ? (
+        <div key={index} className="flex flex-wrap items-center gap-2 border-b py-2">
+          <span>{countsAxisLabel (condition, definition, locale).text}</span>
+          <span>{label ('operatorSymbols.eq')}</span>
+          <span>{condition.value == null ? 'NULL' : (condition.field === 'tags'
+              ? condition.value : countsSummaryValue (
+              condition.value, condition, 0, { count: 0, page: 1, limit: 100 }, locale,
+              params.get ('timezone') ?? 'UTC'))}</span>
+          <Button type="button" variant="ghost" size="sm"
+              aria-label={message ('remove').text}
+              onClick={() => write (conditions.filter ((_, position) => position !== index))}>
+            ×</Button>
+        </div>) : (
 	<div key={index} className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-2
 	    border-b border-slate-200 py-2 dark:border-slate-700">
 	  <Button type="button" variant="ghost" size="sm" onClick={() => edit (index)}

frontend/src/components/counts/CountsSummaryResults.tsx

@@ -86,10 +86,10 @@ const CountsSummaryTable = (
       : totals.get (JSON.stringify ([row.values, column.values])) ?? 0
   const drill = (row: CountsPivotHeader, column: CountsPivotHeader) => {
     const next = new URLSearchParams (params)
-    const existing = readCountState<Record<string, string | number | null>[]> (params, 'drill', [])
-    setCountState (next, 'drill', encodeCountState ('drill', [...existing,
-        ...row.values.map ((value, index) => ({ ...rows[index], value })),
-        ...column.values.map ((value, index) => ({ ...cols[index], value }))]))
+    const existing = readCountState<Record<string, string | number | null>[]> (params, 'conditions', [])
+    setCountState (next, 'conditions', encodeCountState ('conditions', [...existing,
+        ...row.values.map ((value, index) => ({ ...rows[index], operator: 'axis_eq', value })),
+        ...column.values.map ((value, index) => ({ ...cols[index], operator: 'axis_eq', value }))]))
     next.set ('mode', 'details')
     next.delete ('sort')
     next.delete ('page')

frontend/src/lib/counts.ts

@@ -2,7 +2,7 @@ import { countsFieldLabel } from '@/lib/countsDefinitions'
 import { apiDownload, apiGet } from '@/lib/api'
 import { currentViewingLocale, localeLanguage } from '@/lib/locales'
 
-import { readCountState, encodeCountState } from '@/lib/queryState'
+import { readCountState, encodeCountState, setCountState } from '@/lib/queryState'
 
 import type { CountsAxis, CountsDefinition } from '@/lib/countsDefinitions'
 import type { LocaleCode } from '@/lib/locales'
@@ -368,6 +368,22 @@ export const normaliseCountsParams = (
     definition?: CountsDefinition,
 ): URLSearchParams => {
   const params = new URLSearchParams (source)
+  const drills = readCountState<Record<string, unknown>[]> (params, 'drill', [])
+  if (params.get ('tag'))
+  {
+    drills.push ({ field: 'tags', value: `${params.get ('kind') ?? 'internal'}:${
+        params.get ('tag')}` })
+    params.delete ('tag')
+    params.delete ('kind')
+  }
+  if (drills.length > 0)
+  {
+    const conditions = readCountState<Record<string, unknown>[]> (params, 'conditions', [])
+    setCountState (params, 'conditions', encodeCountState ('conditions', [
+        ...conditions, ...drills.map (entry => ({ ...entry, operator: 'axis_eq' }))]))
+    for (const key of [...params.keys ()])
+      if (key === 'drill' || key.startsWith ('drill.')) params.delete (key)
+  }
   if (!params.has ('limit')) params.set ('limit', '100')
   const nameScope = params.get ('name_scope')
   if (definition?.conditionAliases != null && (nameScope == null || nameScope === 'locale'))

frontend/src/lib/countsDefinitions.ts

@@ -8,7 +8,7 @@ import type { CountField, CountsResource } from '@/lib/counts'
 
 export type CountsAxis = { field: string; grain?: string }
 export type CountsCondition = {
-    field: string; operator: string; value?: string; end?: string; blank?: boolean
+    field: string; operator: string; grain?: string; value?: string; end?: string; blank?: boolean
     input?: 'single' | 'multiple' | 'list'; values?: (string | number | boolean)[] }
 export type CountsFieldType = 'string' | 'integer' | 'datetime' | 'enum'
     | 'json' | 'boolean' | 'interval'

frontend/src/lib/queryState.ts

@@ -1,7 +1,7 @@
 // Public URL grammar: space-delimited tokens and indexed scalar fields, never JSON.
 export type QueryRecord = Record<string, string | number | boolean | null | undefined>
 const schemas: Record<string, string[]> = {
-    conditions: ['field', 'operator', 'value', 'end', 'blank', 'input', 'values'],
+    conditions: ['field', 'operator', 'value', 'end', 'blank', 'input', 'values', 'grain', 'value_type'],
     condition_values: ['condition', 'value', 'value_type'],
     drill: ['field', 'grain', 'value', 'value_type'],
     tag_refs: ['name', 'tag_id', 'external_tag_id', 'negative', 'missing'],
@@ -54,7 +54,8 @@ export const setQueryRecords = (
       if (!schemas[key]?.includes (field)) continue
       const name = `${key}.${index}.${field}`
       if (field === 'value'
-	  && ['drill', 'measures', 'column_order', 'condition_values'].includes (key))
+	  && (['drill', 'measures', 'column_order', 'condition_values'].includes (key)
+              || (key === 'conditions' && record.operator === 'axis_eq')))
         params.set (`${key}.${index}.value_type`, value == null ? 'null' : typeof value)
       if (value == null) continue
       params.set (name, typeof value === 'boolean'
@@ -71,7 +72,8 @@ export const readCountState = <T,> (
     key: string,
     fallback: T,
 ): T => {
-  if (!params.has (key)) return fallback
+  if (!params.has (key) && ![...params.keys ()].some (name =>
+      name.startsWith (`${key}.`))) return fallback
   if (key === 'rows' || key === 'cols')
     return queryList (params.get (key)).map (token => {
       const [field, grain] = token.split (':')