@datagouv/components-next 1.0.2-dev.20 → 1.0.2-dev.200

package/src/components/TabularExplorer/useTabularContext.ts

@@ -0,0 +1,82 @@
+import type { Component, ComputedRef, InjectionKey, Ref } from 'vue'
+import { inject, provide } from 'vue'
+import type {
+  ColumnFilters,
+  ColumnType,
+  SortConfig,
+  TabularColumnProfile,
+  TabularDataResponse,
+  TabularRow,
+} from './types'
+
+export type ActiveFilter = {
+  column: string
+  label: string
+}
+
+export type ColumnDisplay = {
+  icon: Component
+  label: string
+}
+
+// Data + cross-cutting state shared by the tabular explorer's parts (toolbar, header
+// filters, table). Provided by <TabularExplorer>, injected by children so they can be
+// arranged freely without prop-drilling.
+//
+// NOT here — kept local to whoever renders it, because nothing else needs it:
+//   - column widths / resize, cell popover, mobile row expansion → TabularTable
+//   - mobile filter sheet's expanded column → TabularMobileFilters
+export type TabularContext = {
+  // Data & pagination (the parent owns the fetch, children just render it)
+  tableData: Ref<TabularDataResponse | null>
+  totalLines: ComputedRef<number>
+  allRows: Ref<TabularRow[]>
+  hasMore: Ref<boolean>
+  loadNextPage: () => Promise<void>
+  // A sort / filter / search change is refetching while the previous rows are
+  // still on screen.
+  isRefreshing: ComputedRef<boolean>
+
+  // Sort & filters
+  sort: Ref<SortConfig | null>
+  filters: Ref<Record<string, ColumnFilters>>
+  activeFilters: ComputedRef<ActiveFilter[]>
+  removeFilter: (column: string) => void
+  clearAllFilters: () => void
+  hasFilterForColumn: (col: string) => boolean
+
+  // Columns visibility
+  allColumns: ComputedRef<string[]>
+  visibleColumns: Ref<Set<string>>
+  displayedColumns: ComputedRef<string[]>
+  hiddenCount: ComputedRef<number>
+  toggleColumn: (col: string) => void
+  showAllColumns: () => void
+  hideAllColumns: () => void
+  selectOnlyColumn: (col: string) => void
+
+  // Mobile filter sheet open/close (button lives in the toolbar, sheet elsewhere)
+  mobileFilterOpen: Ref<boolean>
+
+  // Column metadata helpers (pure derivations of the profile)
+  columnTypesMap: ComputedRef<Record<string, ColumnType>>
+  getColumnType: (col: string) => ColumnType
+  getColumnProfile: (col: string) => TabularColumnProfile | null
+  getColumnDisplay: (col: string) => ColumnDisplay
+  getNullPercent: (col: string) => string
+  getBooleanCounts: (col: string) => { trueCount: number, falseCount: number }
+}
+
+const TABULAR_CONTEXT_KEY: InjectionKey<TabularContext> = Symbol('tabular-context')
+
+export function provideTabularContext(context: TabularContext) {
+  provide(TABULAR_CONTEXT_KEY, context)
+}
+
+export function useTabularContext(): TabularContext {
+  const context = inject(TABULAR_CONTEXT_KEY)
+  if (!context) {
+    throw new Error('useTabularContext() must be used inside a <TabularExplorer>')
+  }
+  return context
+}

package/src/components/TopicCard.vue

@@ -41,12 +41,20 @@
         aria-hidden="true"
         class="hidden md:block size-4 flex-none fill-gray-medium"
       />
-      <div
+      <TranslationT
         v-if="topic.last_modified"
+        tag="div"
         class="w-full md:w-auto text-gray-medium whitespace-nowrap"
+        keypath="Mis à jour {date}"
       >
-        {{ t('Mis à jour {date}', { date: formatDate(topic.last_modified) }) }}
-      </div>
+        <template #date>
+          <FormattedDate
+            :date="topic.last_modified"
+            format="relative"
+            :options="{ dateStyle: 'long' }"
+          />
+        </template>
+      </TranslationT>
     </div>
 
     <ObjectCardShortDescription :text="topic.description" />
@@ -97,8 +105,6 @@
 import { RiBookShelfLine, RiDatabase2Line, RiLineChartLine, RiSubtractLine, RiTerminalLine } from '@remixicon/vue'
 import type { RouteLocationRaw } from 'vue-router'
 import type { TopicV2 } from '../types/topics'
-import { useFormatDate } from '../functions/dates'
-import { useTranslation } from '../composables/useTranslation'
 import ObjectCardHeader from './ObjectCardHeader.vue'
 import ObjectCardOwner from './ObjectCardOwner.vue'
 import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
@@ -106,6 +112,8 @@ import OrganizationLogo from './OrganizationLogo.vue'
 import Avatar from './Avatar.vue'
 import Placeholder from './Placeholder.vue'
 import ObjectCard from './ObjectCard.vue'
+import FormattedDate from './FormattedDate.vue'
+import TranslationT from './TranslationT.vue'
 
 type TopicWithStats = TopicV2 & {
   nb_datasets?: number
@@ -122,13 +130,4 @@ withDefaults(defineProps<{
   showLogo: true,
   showStats: true,
 })
-
-const { t } = useTranslation()
-const { formatRelativeIfRecentDate } = useFormatDate()
-
-const formatDate = (dateString: string) => {
-  return formatRelativeIfRecentDate(dateString, {
-    dateStyle: 'long',
-  })
-}
 </script>

package/src/composables/useActiveDescendant.ts

@@ -60,23 +60,28 @@ export function useActiveDescendant<T extends Option>(options: MaybeRefOrGetter<
 
   function handleKeyPressForActiveDescendant(key: KeyboardEvent, alreadyMovedDown = false) {
     switch (key.key as CommonKeyboardKeys) {
+      // An arrow that moves the active option must not also scroll the page behind it
       case 'ArrowDown':
         if (direction === 'vertical' && !alreadyMovedDown && !key.altKey) {
+          key.preventDefault()
           activateNextOption()
         }
         break
       case 'ArrowUp':
         if (direction === 'vertical') {
+          key.preventDefault()
           activatePreviousOption()
         }
         break
       case 'ArrowLeft':
         if (direction === 'horizontal') {
+          key.preventDefault()
           activatePreviousOption()
         }
         break
       case 'ArrowRight':
         if (direction === 'horizontal' && !alreadyMovedDown && !key.altKey) {
+          key.preventDefault()
           activateNextOption()
         }
         break

package/src/composables/useDatasetResources.ts

@@ -0,0 +1,164 @@
+import { computed, ref, toValue, watch, type MaybeRefOrGetter, type Ref } from 'vue'
+import { useRouteQuery } from '@vueuse/router'
+import { useComponentsConfig } from '../config'
+import { useDebouncedRef } from './useDebouncedRef'
+import { useFetch } from '../functions/api'
+import { RESOURCE_EXPLORER_PAGE_SIZE, RESOURCE_TYPE } from '../functions/resources'
+import type { PaginatedArray } from '../types/api'
+import type { DatasetV2 } from '../types/datasets'
+import type { Resource, ResourceGroup, ResourceType } from '../types/resources'
+
+// Fetches a dataset's resources grouped by type (paginated per type, searchable)
+// and derives the currently selected resource from the `resource_id` query param.
+// Shared by the dataset page and the explore page so the left navigation behaves
+// identically in both.
+export async function useDatasetResources(datasetGetter: MaybeRefOrGetter<DatasetV2>) {
+  const config = useComponentsConfig()
+
+  const search = ref('')
+  const { debounced: searchDebounced, flush } = useDebouncedRef(search, config.searchDebounce ?? 300)
+
+  const datasetId = computed(() => toValue(datasetGetter).id)
+  const url = computed(() => `/api/2/datasets/${datasetId.value}/resources/`)
+
+  const makeParams = (type: ResourceType) => computed(() => ({
+    type,
+    page_size: RESOURCE_EXPLORER_PAGE_SIZE,
+    q: searchDebounced.value || undefined,
+  }))
+
+  // Evaluated once at setup (before any search) — never changes afterwards
+  const hasAnyResources = computed(() => toValue(datasetGetter).resources.total > 0)
+
+  const extraResourcesByType: Ref<Resource[]>[] = RESOURCE_TYPE.map(() => ref<Resource[]>([]))
+  const pageByType: Ref<number>[] = RESOURCE_TYPE.map(() => ref(1))
+
+  watch(searchDebounced, () => {
+    for (let i = 0; i < RESOURCE_TYPE.length; i++) {
+      extraResourcesByType[i]!.value = []
+      pageByType[i]!.value = 1
+    }
+  })
+
+  // Separate useFetch for loadMore, initialized with immediate: false so it doesn't
+  // fetch until execute() is called from the event handler.
+  const loadMoreType = ref<ResourceType>('main')
+  const loadMorePage = ref(1)
+  const loadMoreParams = computed(() => ({
+    type: loadMoreType.value,
+    page_size: RESOURCE_EXPLORER_PAGE_SIZE,
+    page: loadMorePage.value,
+    q: searchDebounced.value || undefined,
+  }))
+
+  const resourceIdQuery = useRouteQuery<string | undefined>('resource_id')
+  const initialResourceId = resourceIdQuery.value
+
+  // Vue rule: composables must be called synchronously, before any `await` — `inject()`
+  // needs the active component instance, which a plain .ts composable loses after its
+  // first await (documented in useTabularProfile.ts). The package's `useFetch` calls
+  // `useComponentsConfig()` (an inject) on every call, so we kick off every request
+  // up-front, then await them together. This is also the idiomatic Nuxt parallel-fetch.
+  const typeFetches = RESOURCE_TYPE.map(type =>
+    useFetch<PaginatedArray<Resource>>(url, {
+      params: makeParams(type),
+      // Only main is server-rendered; the rest hydrate client-side to keep SSR light.
+      server: type === 'main',
+    }),
+  )
+  const loadMoreFetch = useFetch<PaginatedArray<Resource>>(url, { params: loadMoreParams, immediate: false, watch: false })
+  // The resource pointed at by `resource_id` (SSR / deep link) may live beyond the first
+  // page of its type group, so it wouldn't be in flatResources — fetch it directly.
+  const fetchedResourceFetch = initialResourceId
+    ? useFetch<Resource>(`/api/1/datasets/${datasetId.value}/resources/${initialResourceId}/`)
+    : null
+
+  const typeResults = await Promise.all(typeFetches)
+  const { data: loadMoreData, execute: executeLoadMore } = await loadMoreFetch
+  const fetchedResource = fetchedResourceFetch ? (await fetchedResourceFetch).data : ref<Resource | null>(null)
+
+  const rawDataByType = typeResults.map(result => result.data)
+
+  // Which type group is currently loading its next page. A single loadMoreFetch is
+  // shared across types, so we track the type here to show the spinner on the right
+  // group's "Charger plus…" button.
+  const loadingType = ref<ResourceType | null>(null)
+
+  const loadMore = async (type: ResourceType) => {
+    const index = RESOURCE_TYPE.indexOf(type)
+    if (index === -1) return
+    const pageRef = pageByType[index]!
+    const extraRef = extraResourcesByType[index]!
+    pageRef.value++
+
+    loadMoreType.value = type
+    loadMorePage.value = pageRef.value
+    loadingType.value = type
+    try {
+      await executeLoadMore()
+
+      if (loadMoreData.value) {
+        extraRef.value = [...extraRef.value, ...loadMoreData.value.data]
+      }
+    }
+    finally {
+      loadingType.value = null
+    }
+  }
+
+  const groups = computed<ResourceGroup[]>(() => {
+    return RESOURCE_TYPE
+      .map((type, index) => {
+        const rawData = rawDataByType[index]!
+        const extraData = extraResourcesByType[index]!
+        return {
+          type: type as ResourceType,
+          total: rawData.value?.total ?? 0,
+          items: [...(rawData.value?.data ?? []), ...extraData.value],
+        }
+      })
+      .filter(group => group.items.length > 0)
+  })
+
+  const flatResources = computed(() => groups.value.flatMap(g => g.items))
+
+  // The URL is the single source of truth for the selection: no ref to keep in
+  // sync, navigation is done with plain links that change `resource_id`.
+  let lastShown: Resource | null = null
+  const remember = (resource: Resource | null) => {
+    if (resource) lastShown = resource
+    return resource
+  }
+
+  const selectedResource = computed<Resource | null>(() => {
+    const wantedId = resourceIdQuery.value
+    const fromList = flatResources.value.find(r => r.id === wantedId)
+    if (fromList) return remember(fromList)
+    // `fetchedResource` answers for `initialResourceId` only: it holds that one
+    // resource, so using it for any other id would show something the URL doesn't
+    // point at.
+    if (wantedId && wantedId === initialResourceId) return remember(fetchedResource.value)
+    // A search that matches nothing narrows the navigation, it doesn't unload the
+    // viewer — keep showing what we had, which is the dataset's first resource when
+    // nothing has been clicked yet.
+    return remember(flatResources.value[0] ?? null) ?? lastShown
+  })
+
+  function updateSearch(newSearch: string) {
+    search.value = newSearch
+    // Only a reset skips the debounce: typing must stay debounced, since each
+    // change fires one request per resource type.
+    if (!newSearch) flush()
+  }
+
+  return {
+    groups,
+    flatResources,
+    hasAnyResources,
+    selectedResource,
+    loadMore,
+    loadingType,
+    search,
+    updateSearch,
+  }
+}

package/src/composables/useHasTabularData.ts

@@ -1,14 +1,28 @@
 import { useComponentsConfig } from '../config'
+import { hasTabularParsingError } from '../functions/resources'
 import type { Resource } from '../types/resources'
 
+/**
+ * Composable to determine if a resource has tabular data.
+ * This is used to show the "Données" tab for tabular files AND the "Structure des données" tab (for tabular data structure).
+ *
+ * @returns A function to check if a resource has tabular data.
+ */
 export const useHasTabularData = () => {
   const config = useComponentsConfig()
 
   return (resource: Resource) => {
+    // Reject resources whose source URL last check failed (>= 400):
+    // the tabular-api purges its parquet when the source dies, but
+    // `parsing_table` may still be set — leading to a 404 on fetch.
+    const checkStatus = resource.extras['check:status']
+    const sourceUnreachable = typeof checkStatus === 'number' && checkStatus >= 400
+
     return (
       config.tabularApiUrl
       && resource.extras['analysis:parsing:parsing_table']
-      && !resource.extras['analysis:parsing:error']
+      && !hasTabularParsingError(resource)
+      && !sourceUnreachable
       && (config.tabularAllowRemote || resource.filetype === 'file')
     )
   }

package/src/composables/useMetrics.ts

@@ -13,6 +13,6 @@ export function useMetrics() {
     getDatasetMetrics: (datasetId: string) => getDatasetMetrics(datasetId, config.metricsApiUrl!),
     getDataserviceMetrics: (dataserviceId: string) => getDataserviceMetrics(dataserviceId, config.metricsApiUrl!),
     getReuseMetrics: (reuseId: string) => getReuseMetrics(reuseId, config.metricsApiUrl!),
-    createDatasetsForOrganizationMetricsUrl: (organizationId: string) => createDatasetsForOrganizationMetricsUrl(organizationId, config.metricsApiUrl!, config.apiBase),
+    createDatasetsForOrganizationMetricsUrl: (organizationId: string) => createDatasetsForOrganizationMetricsUrl(organizationId, config.metricsApiUrl!, config.apiBase, config.$fetch),
   }
 }

package/src/composables/useResizable.ts

@@ -0,0 +1,46 @@
+import { ref } from 'vue'
+import { useEventListener } from '@vueuse/core'
+
+type UseResizableOptions = {
+  initialWidth: number
+  minWidth: number
+  maxWidth: number
+}
+
+// Drag-to-resize a horizontal panel. Returns the reactive width, a `resizing`
+// flag (to disable width transitions while dragging) and a `startResize` handler
+// to bind on a drag handle's `mousedown`. Encapsulates the drag math, clamping and
+// the temporary body cursor / text-selection lock. VueUse has no ready-made panel
+// resize (useResizeObserver only observes size), so we build it on `useEventListener`
+// which handles listener cleanup and SSR for us.
+export function useResizable({ initialWidth, minWidth, maxWidth }: UseResizableOptions) {
+  const width = ref(initialWidth)
+  const resizing = ref(false)
+  let startX = 0
+  let startWidth = 0
+
+  const clamp = (value: number) => Math.min(maxWidth, Math.max(minWidth, Math.round(value)))
+
+  function startResize(event: MouseEvent) {
+    event.preventDefault()
+    startX = event.clientX
+    startWidth = width.value
+    resizing.value = true
+    document.body.style.userSelect = 'none'
+    document.body.style.cursor = 'col-resize'
+  }
+
+  useEventListener('mousemove', (event: MouseEvent) => {
+    if (!resizing.value) return
+    width.value = clamp(startWidth + event.clientX - startX)
+  })
+
+  useEventListener('mouseup', () => {
+    if (!resizing.value) return
+    resizing.value = false
+    document.body.style.userSelect = ''
+    document.body.style.cursor = ''
+  })
+
+  return { width, resizing, startResize }
+}

package/src/composables/useResourceCapabilities.ts

@@ -1,16 +1,20 @@
-import { computed, toValue, type MaybeRefOrGetter } from 'vue'
+import { computed, type MaybeRefOrGetter, toValue } from 'vue'
 import { useComponentsConfig } from '../config'
-import { useTranslation } from './useTranslation'
-import { useHasTabularData } from './useHasTabularData'
-import { detectOgcService } from '../functions/resources'
 import { isOrganizationCertified } from '../functions/organizations'
-import type { Resource, WfsMetadata } from '../types/resources'
+import { getGeneratedFormats, getWfsExportFormats } from '../functions/resourceCapabilities'
+import { detectOgcService, getParsingErrorMessage, getParsingErrorStep, isImagePreviewFormat } from '../functions/resources'
 import type { Dataset, DatasetV2 } from '../types/datasets'
-import { getWfsExportFormats } from '../functions/resourceCapabilities'
+import type { Resource, WfsMetadata } from '../types/resources'
+import { useHasTabularData } from './useHasTabularData'
+import { useTranslation } from './useTranslation'
 
-const GENERATED_FORMATS = ['parquet', 'pmtiles', 'geojson']
 const URL_FORMATS = ['url', 'doi', 'www:link', 'www:link-1.0-http--link', 'www:link-1.0-http--partners', 'www:link-1.0-http--related', 'www:link-1.0-http--samples']
 
+// Which preview the data tab shows. Single source of truth: the viewer renders it and
+// the skeleton picks the matching placeholder shape, so each holding its own copy of
+// this precedence would let the two drift apart.
+export type PreviewKind = 'json' | 'pdf' | 'xml' | 'image' | 'datafair' | 'openapi' | 'tabular' | 'unavailable'
+
 export function useResourceCapabilities(
   resource: MaybeRefOrGetter<Resource>,
   dataset: MaybeRefOrGetter<Dataset | DatasetV2>,
@@ -19,11 +23,6 @@ export function useResourceCapabilities(
   const { t } = useTranslation()
   const checkTabularData = useHasTabularData()
 
-  const hasPreview = computed(() => {
-    const format = toValue(resource).format?.toLowerCase()
-    return format === 'json' || format === 'pdf' || format === 'xml'
-  })
-
   const hasTabularData = computed(() => {
     const r = toValue(resource)
     return checkTabularData(r)
@@ -49,24 +48,12 @@ export function useResourceCapabilities(
   const ogcService = computed(() => detectOgcService(toValue(resource)))
   const ogcWms = computed(() => ogcService.value === 'wms')
 
-  const generatedFormats = computed(() => {
-    const r = toValue(resource)
-    const formats = GENERATED_FORMATS
-      .filter(format => `analysis:parsing:${format}_url` in r.extras)
-      .map(format => ({
-        url: r.extras[`analysis:parsing:${format}_url`] as string,
-        size: r.extras[`analysis:parsing:${format}_size`] as number | undefined,
-        format,
-      }))
-    if ('analysis:parsing:parsing_table' in r.extras) {
-      formats.push({
-        url: `${config.tabularApiUrl}/api/resources/${r.id}/data/json/`,
-        size: undefined,
-        format: 'json',
-      })
-    }
-    return formats
-  })
+  // The map is built from a pmtiles export; when that export fails we still want
+  // to show the Carte tab, but with the reason it could not be generated.
+  const hasPmtilesError = computed(() => getParsingErrorStep(toValue(resource)) === 'pmtiles_export')
+  const pmtilesError = computed(() => hasPmtilesError.value ? getParsingErrorMessage(toValue(resource)) : null)
+
+  const generatedFormats = computed(() => getGeneratedFormats(toValue(resource), config.tabularApiUrl))
 
   const wfsFormats = computed(() => {
     return getWfsExportFormats(toValue(resource))
@@ -81,43 +68,64 @@ export function useResourceCapabilities(
 
   const isResourceUrl = computed(() => URL_FORMATS.includes(toValue(resource).format))
 
+  // A dedicated preview always wins over the interactive table: a PDF that also
+  // carries a parsing table is a PDF first.
+  const previewKind = computed<PreviewKind>(() => {
+    const format = toValue(resource).format?.toLowerCase()
+    if (format === 'json') return 'json'
+    if (format === 'pdf') return 'pdf'
+    if (format === 'xml') return 'xml'
+    if (isImagePreviewFormat(format)) return 'image'
+    if (hasDatafairPreview.value) return 'datafair'
+    if (hasOpenAPIPreview.value) return 'openapi'
+    if (hasTabularData.value) return 'tabular'
+    return 'unavailable'
+  })
+
   const tabsOptions = computed(() => {
     const r = toValue(resource)
     const options = []
 
-    if (hasTabularData.value) {
-      options.push({ key: 'data', label: t('Données') })
+    const dataTab = { key: 'data', label: hasTabularData.value ? t('Données') : t('Aperçu') }
+    const mapTab = { key: 'map', label: t('Carte') }
+    const hasMap = hasPmtiles.value || ogcWms.value
+
+    // The map is the most visual preview: when it is available, show it first.
+    // When its generation failed, keep the data preview first and surface the
+    // Carte tab (with its error) right after.
+    if (hasMap) {
+      options.push(mapTab, dataTab)
+    }
+    else if (hasPmtilesError.value) {
+      options.push(dataTab, mapTab)
     }
     else {
-      options.push({ key: 'data', label: t('Aperçu') })
+      options.push(dataTab)
     }
 
     if (hasTabularData.value) {
       options.push({ key: 'data-structure', label: t('Structure des données') })
     }
 
-    if (hasPmtiles.value || ogcWms.value) {
-      options.push({ key: 'map', label: t('Carte') })
-    }
-
     if (r.description) {
       options.push({ key: 'description', label: t('Description') })
     }
 
     options.push({ key: 'metadata', label: t('Métadonnées') })
-    options.push({ key: 'downloads', label: t('Téléchargements') })
 
     if (hasTabularData.value) {
-      options.push({ key: 'swagger', label: t('Swagger') })
+      options.push({ key: 'api', label: t('API') })
     }
 
     return options
   })
 
   return {
-    hasPreview,
+    previewKind,
     hasTabularData,
     hasPmtiles,
+    hasPmtilesError,
+    pmtilesError,
     hasDatafairPreview,
     hasOpenAPIPreview,
     ogcService,