#434

frontend/src/components/counts/CountsControls.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useId, useState } from 'react'
+import { useEffect, useId, useRef, useState } from 'react'
 
 import CountsAdditionalConditions from '@/components/counts/CountsAdditionalConditions'
 import CountsAxes from '@/components/counts/CountsAxes'
@@ -9,10 +9,10 @@ import FormField from '@/components/common/FormField'
 import HelpPopover from '@/components/common/HelpPopover'
 import TagInput from '@/components/common/TagInput'
 import { Button } from '@/components/ui/button'
-import { countsUseLatest, fieldsForCounts, normaliseCountsParams,
+import { countsUseLatest, fieldsForCounts, normaliseCountsParams, readCountSort,
 	 selectedCountChildren, selectedCountColumns } from '@/lib/counts'
 import { countsNestedIsScalar } from '@/lib/countsDisplay'
-import { useCountsDefinition } from '@/lib/countsDefinitions'
+import { readCountsJSON, useCountsDefinition } from '@/lib/countsDefinitions'
 import { useClientMotion } from '@/lib/useClientMotion'
 import { inputClass } from '@/lib/utils'
 import { useUITranslation } from '@/lib/useUITranslation'
@@ -42,6 +42,7 @@ const CountsControls = (
   const nestedJSON = applied.get ('nested_json')
   const rowNumbers = applied.get ('row_numbers')
   const thumbnail = selectedCountColumns (resource, applied, definition).includes ('thumbnail')
+  const previousThumbnail = useRef (thumbnail)
   const mode = draft.get ('mode') ?? 'summary'
   const columns = selectedCountColumns (resource, draft, definition)
   const details = mode === 'details'
@@ -50,8 +51,10 @@ const CountsControls = (
       && !countsNestedIsScalar (field.children, field.key, draft)
       && field.children.some (child => selectedCountChildren (draft)
 	  .has (`${field.key}.${child.key}`)))
-  // Immediate presentation changes merge into the pending query, never replace it.
+  // Preserve absent columns until a real presentation change or an explicit edit.
   useEffect (() => {
+    if (previousThumbnail.current === thumbnail) return
+    previousThumbnail.current = thumbnail
     setDraft (previous => {
       const next = new URLSearchParams (previous)
       const columns = selectedCountColumns (resource, previous, definition)
@@ -75,16 +78,26 @@ const CountsControls = (
   const history = draft.get ('definition') === 'history'
   const update = (key: string, value: string) => setDraft (previous => {
     const next = new URLSearchParams (previous)
-    if (['mode', 'rows', 'cols'].includes (key)) next.delete ('sort')
+    if (['rows', 'cols'].includes (key) && next.get ('sort') !== '') next.delete ('sort')
     next.set (key, value)
-    return next
+    if (key !== 'mode') return next
+    const resolved = normaliseCountsParams (resource, next, definition)
+    const axes = [...readCountsJSON<unknown[]> (resolved, 'rows', []),
+        ...readCountsJSON<unknown[]> (resolved, 'cols', [])]
+    const allowed = value === 'summary'
+        ? ['count', ...axes.map ((_, index) => `a${index}`)]
+        : fieldsForCounts (resource, definition).map (field => field.key)
+    if (readCountSort (resolved.get ('sort')).some (sort => !allowed.includes (sort.key)
+        && !(value === 'summary' && /^measure_[0-9a-f]+$/.test (sort.key))))
+      next.delete ('sort')
+    return normaliseCountsParams (resource, next, definition)
   })
   return <form className="shrink-0" onSubmit={event => {
     event.preventDefault ()
     const next = new URLSearchParams (draft)
     next.delete ('page')
     next.delete ('execution_at')
-    execute (normaliseCountsParams (resource, next))
+    execute (normaliseCountsParams (resource, next, definition))
   }}>
     {!history && <div className="flex flex-wrap items-center gap-2 border-b pb-1
 	dark:border-slate-700">