#434

frontend/src/pages/CountsResourcePage.tsx

@@ -1,8 +1,9 @@
 import { useQuery } from '@tanstack/react-query'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 
 import PrefetchLink from '@/components/PrefetchLink'
+import CountsExportProgress from '@/components/counts/CountsExportProgress'
 import CountsControls from '@/components/counts/CountsControls'
 import CountsSummaryResults from '@/components/counts/CountsSummaryResults'
 import CountsResults from '@/components/counts/CountsResults'
@@ -14,7 +15,7 @@ import Pagination from '@/components/common/Pagination'
 import MainArea from '@/components/layout/MainArea'
 import SidebarComponent from '@/components/layout/SidebarComponent'
 import { Button } from '@/components/ui/button'
-import { countsRequestParams, defaultCountsMode, exportCounts, fieldsForCounts, fetchCounts,
+import { countsRequestParams, defaultCountsMode, countsExportPayload, fieldsForCounts, fetchCounts,
 	 isCountsState, normaliseCountsParams, selectedCountColumns } from '@/lib/counts'
 import { countsExportLabels } from '@/lib/countsDisplay'
 import { CountsDefinitionContext, countsAxisFields, countsAxisLabel,
@@ -24,6 +25,7 @@ import { CountsDefinitionContext, countsAxisFields, countsAxisLabel,
 import { countsKeys } from '@/lib/queryKeys'
 import { cn } from '@/lib/utils'
 import { useClientMotion } from '@/lib/useClientMotion'
+import useDialogue from '@/lib/dialogues/useDialogue'
 import { useLocale } from '@/lib/useLocale'
 import { useUITranslation } from '@/lib/useUITranslation'
 
@@ -42,7 +44,7 @@ const CountsResourceContent = ({ resource }: { resource: CountsResource }) => {
   controlParams.delete ('order')
   controlParams.delete ('row_numbers')
   controlParams.set ('columns', selectedCountColumns (resource, params, definition)
-      .filter (column => column !== 'thumbnail').join (','))
+      .filter (column => column !== 'thumbnail').sort ().join (','))
   const request = countsRequestParams (params)
   const [open, setOpen] = useState (false)
   const [sidebarOpen, setSidebarOpen] = useState (false)
@@ -52,12 +54,14 @@ const CountsResourceContent = ({ resource }: { resource: CountsResource }) => {
     setExpanded (previous => new Set ([...previous, resource]))
   }, [resource])
   const locale = useLocale ()
+  const dialogue = useDialogue ()
   const { label, message } = useUITranslation ('counts')
   const mode = params.get ('mode') ?? 'summary'
   const state = isCountsState (params)
   const cacheParams = new URLSearchParams (request)
   cacheParams.set ('definition', state ? 'latest' : 'history')
   const [exporting, setExporting] = useState (false)
+  const exportInFlight = useRef (false)
   const [exportError, setExportError] = useState (false)
   const { data, isPending, isError, isPlaceholderData, refetch } = useQuery ({
       enabled: params.has ('timezone'),
@@ -103,6 +107,8 @@ const CountsResourceContent = ({ resource }: { resource: CountsResource }) => {
     setParams (next)
   }
   const download = async (format: 'csv' | 'json') => {
+    if (exportInFlight.current) return
+    exportInFlight.current = true
     setExporting (true)
     setExportError (false)
     try
@@ -119,12 +125,17 @@ const CountsResourceContent = ({ resource }: { resource: CountsResource }) => {
 	  ? [...axes.map (axis => countsAxisLabel (axis, definition, locale).text),
 	     message ('count').text]
 	  : fields.map (field => message (field.label).text)
-      await exportCounts (resource, params, locale, format,
+      const payload = countsExportPayload (resource, params, format,
 	  fields.map (field => field.key), headers,
 	  { ...countsExportLabels (resource, locale, definition),
 	      ...Object.fromEntries (countsAxisFields (definition, !state).map (field => [
 		  field.key, message (field.label).text])), count: message ('count').text },
-	  () => setExportError (true))
+	  definition)
+      const handle = { cancel: async () => false }
+      await dialogue.form ({ title: label ('exportProgress.title'),
+	  footerLayout: 'inline', onCancel: () => handle.cancel (),
+	  body: controls => <CountsExportProgress payload={payload} locale={locale}
+	      handle={handle} controls={controls}/> })
 
     }
     catch
@@ -133,6 +144,7 @@ const CountsResourceContent = ({ resource }: { resource: CountsResource }) => {
     }
     finally
     {
+      exportInFlight.current = false
       setExporting (false)
     }
   }