#434

frontend/src/components/counts/CountsAdditionalConditions.tsx

@@ -7,7 +7,7 @@ import { countsConditionInputs, countsEventTypes, countsFieldLabel, countsFilter
 	 countsSetOperators, useCountsDefinition }
     from '@/lib/countsDefinitions'
 import useDialogue from '@/lib/dialogues/useDialogue'
-import { countsSummaryValue } from '@/lib/countsDisplay'
+import { countsConditionValue } from '@/lib/countsDisplay'
 import { countsAxisLabel } from '@/lib/countsDefinitions'
 import { useLocale } from '@/lib/useLocale'
 import { inputClass } from '@/lib/utils'
@@ -131,7 +131,7 @@ const CountsAdditionalConditions = ({ params, update }: {
     {
       const options: string[] = type === 'boolean' ? ['true', 'false'] : [...countsEventTypes]
       const namespace = type === 'boolean' ? 'truthValues' : 'events'
-      return <select value={condition[key] ?? ''} disabled={condition.blank}
+      return <select value={condition[key] == null ? '' : String (condition[key])} disabled={condition.blank}
 	  className={inputClass (false, 'h-10 w-36 min-w-0 max-w-full py-1')}
 	  aria-label={aria.text}
 	  lang={aria.language}
@@ -144,10 +144,10 @@ const CountsAdditionalConditions = ({ params, update }: {
     }
     if (type === 'datetime')
       return <DateTimeField precision="second" className="h-10 w-48 min-w-0 max-w-full py-1"
-	  value={condition[key] ?? ''} disabled={condition.blank}
+	  value={condition[key] == null ? '' : String (condition[key])} disabled={condition.blank}
 	  aria-label={aria.text} lang={aria.language}
 	  onChange={value => patch (index, { [key]: value ?? '' })}/>
-    return <input value={condition[key] ?? ''} disabled={condition.blank}
+    return <input value={condition[key] == null ? '' : String (condition[key])} disabled={condition.blank}
 	type={(type === 'integer' || type === 'interval') ? 'number' : 'text'}
 	className={inputClass (false, 'h-10 w-36 min-w-0 max-w-full py-1')}
 	aria-label={aria.text} lang={aria.language}
@@ -157,30 +157,12 @@ 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>
-    {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>
+          <span>{countsConditionValue (condition.value, condition, 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))}>

frontend/src/components/counts/CountsControls.tsx

@@ -226,8 +226,46 @@ const CountsControls = (
             </FormField>)}
           </div>
           {resource === 'posts' && <FormField label={label ('columns.tags')}>
-            {() => <TagInput includeNico includeUnused value={draft.get ('tags') ?? ''}
-                setValue={value => update ('tags', value)}/>}
+            {() => <div className="flex flex-wrap items-center gap-2">
+              <TagInput includeNico includeUnused value={draft.get ('tags') ?? ''}
+                  setValue={value => update ('tags', value)}/>
+              <select value={(draft.get ('match') === 'any'
+                  || draft.get ('tags')?.split (/\s+/).some (token =>
+                      token.toLowerCase () === 'type:or')) ? 'any' : 'all'}
+                  className={inputClass (false, 'h-10 w-auto')}
+                  aria-label={message ('columns.tags').text}
+                  onChange={event => {
+                    const match = event.target.value
+                    setDraft (previous => {
+                      const next = new URLSearchParams (previous)
+                      next.set ('match', match)
+                      next.set ('tags', (next.get ('tags') ?? '').split (/\s+/)
+                          .filter (token => token.toLowerCase () !== 'type:or').join (' '))
+                      next.delete ('page')
+                      return next
+                    })
+                  }}>
+                <option value="all">AND</option><option value="any">OR</option>
+              </select>
+              {draft.get ('tags') && <>
+                {readCountState<Record<string, string | number>[]> (
+                    draft, 'tag_refs', []).map ((reference, index) => (
+                    <span key={index} className="text-sm">
+                      {reference.name} ({[reference.tag_id == null ? ''
+                          : `internal:${reference.tag_id}`,
+                          reference.external_tag_id == null ? ''
+                          : `external:${reference.external_tag_id}`].filter (Boolean).join (' ')})
+                    </span>))}
+                <Button type="button" variant="ghost" size="sm"
+                    aria-label={message ('remove').text} onClick={() => setDraft (previous => {
+                      const next = new URLSearchParams (previous)
+                      for (const key of [...next.keys ()])
+                        if (['tags', 'tag', 'kind', 'match', 'tag_refs', 'page'].includes (key)
+                            || key.startsWith ('tag_refs.')) next.delete (key)
+                      return next
+                    })}>×</Button>
+              </>}
+            </div>}
           </FormField>}
 	  <CountsAdditionalConditions params={draft} update={update}/>
         </fieldset>

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; grain?: string; value?: string; end?: string; blank?: boolean
+    field: string; operator: string; grain?: string; value?: string | number | boolean | null; 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/countsDisplay.ts

@@ -445,6 +445,25 @@ const countsDateValue = (
 }
 
 
+export const countsConditionValue = (
+    value: string | number | boolean | null | undefined,
+    axis: CountsAxis, locale: LocaleCode, timezone: string,
+): string => {
+  if (value == null) return 'NULL'
+  if (typeof value === 'boolean')
+    return translateUIMessage (`truthValues.${value}`, 'counts', locale).text
+  if (axis.grain != null)
+    return countsDateValue (String (value), axis.grain, locale, timezone) ?? String (value)
+  if (axis.field === 'event_type')
+    return translateUIMessage (`events.${value}`, 'counts', locale).text
+  if (axis.field === 'category' || axis.field === 'tag_category')
+    return translateUIMessage (`common:categories.${value}`, 'counts', locale).text
+  if (['language_code', 'source_language_code'].includes (axis.field))
+    return languageUIMessage (String (value), locale).text
+  return String (value)
+}
+
+
 export const countsSummaryValue = (
     value: string | number | null,
     axis: CountsAxis,