@datagouv/components-next 1.2.0 → 1.3.0

package/src/components/TabularExplorer/types.ts

@@ -1,5 +1,5 @@
 /** Response from /api/resources/{rid}/data/ */
-export interface TabularDataResponse {
+export type TabularDataResponse = {
   data: TabularRow[]
   meta: {
     page: number
@@ -17,11 +17,11 @@ export interface TabularDataResponse {
 export type TabularRow = Record<string, unknown> & { __id: number }
 
 /** Response from /api/resources/{rid}/profile/ */
-export interface TabularProfileResponse {
+export type TabularProfileResponse = {
   profile: TabularProfile
 }
 
-export interface TabularProfile {
+export type TabularProfile = {
   header: string[]
   columns: Record<string, TabularColumnInfo>
   formats: Record<string, string[]>
@@ -38,13 +38,13 @@ export interface TabularProfile {
   trailing_columns: number
 }
 
-export interface TabularColumnInfo {
+export type TabularColumnInfo = {
   score: number
   format: string
   python_type: string
 }
 
-export interface TabularColumnProfile {
+export type TabularColumnProfile = {
   tops: TabularTopValue[]
   nb_distinct: number
   nb_missing_values: number
@@ -54,14 +54,14 @@ export interface TabularColumnProfile {
   mean?: number
 }
 
-export interface TabularTopValue {
+export type TabularTopValue = {
   value: string
   count: number
 }
 
 export type ColumnType = 'number' | 'categorical' | 'text' | 'date' | 'boolean'
 
-export interface ColumnFilters {
+export type ColumnFilters = {
   in?: string[]
   exact?: string
   min?: number
@@ -72,12 +72,12 @@ export interface ColumnFilters {
 
 export type SortDirection = 'asc' | 'desc'
 
-export interface SortConfig {
+export type SortConfig = {
   column: string
   direction: SortDirection
 }
 
-export interface BadgeStyle {
+export type BadgeStyle = {
   backgroundColor: string
   color: string
 }

package/src/composables/useResourceCapabilities.ts

@@ -108,7 +108,7 @@ export function useResourceCapabilities(
     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

package/src/composables/useSearchFilter.ts

@@ -94,10 +94,12 @@ export function useSearchFilter(
   })
 
   onScopeDispose(() => {
-    // Clear the URL param when the scope ends. This mirrors GlobalSearch's
-    // own `watch(currentType)` logic that drops built-in filters which don't
-    // apply to the new type: a custom filter's applicability is signalled
-    // by the consumer via `v-if`, so its unmount is the equivalent signal.
+    // Type-scoped filters (typeKeys set) are cleared by GlobalSearch's
+    // watch(currentType) instead, so their URL update batches with the other
+    // type-change resets via useRouteQuery rather than racing them with the
+    // separate router.replace below. Here we only clear filters that apply to
+    // all types: their unmount is a consumer signal unrelated to a type switch,
+    // which GlobalSearch has no way to detect.
     //
     // We cannot use `value.value = defaultValue` here because VueUse's
     // useRouteQuery registers its own tryOnScopeDispose cleanup that zeroes
@@ -105,7 +107,7 @@ export function useSearchFilter(
     // The setter then sees `query === v` and early-returns without ever
     // calling router.replace(). Instead we read the live route.query directly
     // (which is router state, not affected by that cleanup) and push the update.
-    if (route.query[urlParam] !== undefined) {
+    if (normalizedTypeKeys === undefined && route.query[urlParam] !== undefined) {
       const { [urlParam]: _removed, ...restQuery } = route.query
       router.replace({
         query: defaultValue === undefined ? restQuery : { ...restQuery, [urlParam]: String(defaultValue) },

package/src/functions/api.ts

@@ -26,7 +26,7 @@ export async function useFetch<DataT, ErrorT = never>(
   const error: Ref<ErrorT | null> = ref(null)
   const status = ref<AsyncDataRequestStatus>('idle')
 
-  const execute = async () => {
+  const execute = async (signal?: AbortSignal) => {
     const urlValue = toValue(url)
     if (!urlValue) return
     const params = deepToValue(options?.params)
@@ -36,13 +36,15 @@ export async function useFetch<DataT, ErrorT = never>(
       data.value = isRaw
         // Raw targets another data.gouv service (the Tabular API in TabularExplorer) via its own
         // absolute URL, so it must stay bare ofetch: no datagouv apiBase, no datagouv auth attached.
-        ? await ofetch<DataT | null>(urlValue, { params: params ?? query })
+        ? await ofetch<DataT | null>(urlValue, { params: params ?? query, signal })
         // The configured `$fetch` carries baseURL + auth + headers (see the `datagouv` plugin install
         // for the default one). We only forward the URL and params here.
-        : await config.$fetch<DataT | null>(urlValue, { baseURL: config.apiBase, params: params ?? query })
+        : await config.$fetch<DataT | null>(urlValue, { baseURL: config.apiBase, params: params ?? query, signal })
       status.value = 'success'
     }
     catch (e) {
+      // Ignore aborted requests — they're superseded by a newer call, not a real error.
+      if (signal?.aborted) return
       error.value = e as ErrorT
       status.value = 'error'
     }
@@ -51,14 +53,18 @@ export async function useFetch<DataT, ErrorT = never>(
   // When server is false, only start watching after mount (client-side only)
   if (options?.server === false) {
     onMounted(() => {
-      watchEffect(async () => {
-        await execute()
+      watchEffect((onCleanup) => {
+        const controller = new AbortController()
+        onCleanup(() => controller.abort())
+        void execute(controller.signal)
       })
     })
   }
   else {
-    watchEffect(async () => {
-      await execute()
+    watchEffect((onCleanup) => {
+      const controller = new AbortController()
+      onCleanup(() => controller.abort())
+      void execute(controller.signal)
     })
   }
 

package/src/functions/resources.ts

@@ -91,6 +91,11 @@ export function getResourceTitleId(resource: Resource) {
 export const RESOURCE_TYPE = readonly(['main', 'documentation', 'update', 'api', 'code', 'other'] as const)
 export type ResourceType = typeof RESOURCE_TYPE[number]
 
+// Page size used by ResourceExplorer for its per-type resource fetches.
+// Exported so consumers (e.g. the dataset page's `main` prefetch) can build a
+// byte-for-byte identical cache key and let Nuxt dedupe the request.
+export const RESOURCE_EXPLORER_PAGE_SIZE = 10
+
 export const getResourceLabel = (type: ResourceType, count?: number) => {
   const { t } = useTranslation()
   switch (type) {

package/src/functions/tabular.ts

@@ -4,9 +4,24 @@ import {
   RiPriceTag3Line,
   RiText,
   RiCalendarLine,
+  RiCalendarEventLine,
+  RiTimeLine,
   RiCheckboxLine,
+  RiMapPin2Line,
+  RiGlobalLine,
+  RiFocus3Line,
+  RiFingerprintLine,
+  RiMailLine,
+  RiLinksLine,
+  RiPhoneLine,
+  RiUserLine,
+  RiMoneyEuroCircleLine,
+  RiPercentLine,
+  RiBracesLine,
+  RiCodeLine,
 } from '@remixicon/vue'
 import { useTranslation } from '../composables/useTranslation'
+import type { TranslationFunction } from '../composables/useTranslation'
 import type { ColumnFilters, ColumnType } from '../components/TabularExplorer/types'
 
 export function hasFilterForColumn(filters: Record<string, ColumnFilters>, column: string): boolean {
@@ -15,7 +30,12 @@ export function hasFilterForColumn(filters: Record<string, ColumnFilters>, colum
   return !!(f.in?.length || f.exact != null || f.contains || f.null || f.min != null || f.max != null)
 }
 
-export function buildTypeConfig(t: (s: string) => string): Record<ColumnType, { icon: Component, label: string }> {
+export type TypeDisplay = {
+  icon: Component
+  label: string
+}
+
+export function buildTypeConfig(t: TranslationFunction): Record<ColumnType, TypeDisplay> {
   return {
     number: { icon: RiHashtag, label: t('Nombre') },
     categorical: { icon: RiPriceTag3Line, label: t('Catégoriel') },
@@ -25,6 +45,88 @@ export function buildTypeConfig(t: (s: string) => string): Record<ColumnType, {
   }
 }
 
+// csv-detective formats that carry no semantic meaning beyond the generic
+// display type already resolved by `ColumnType` — these fall back to
+// `buildTypeConfig` (Texte / Nombre / Date / Booléen) in the header.
+export const GENERIC_FORMATS = new Set(['string', 'int', 'float', 'date', 'bool', 'booleen'])
+
+// Semantic types detected by csv-detective (see ../../../csv-detective/csv_detective/formats).
+// The list is intentionally exhaustive, but unknown formats are tolerated:
+// `getColumnDisplay` humanizes any format missing from this map.
+export function buildFormatConfig(t: TranslationFunction): Record<string, TypeDisplay> {
+  return {
+    // Geo — territories & addresses
+    adresse: { icon: RiMapPin2Line, label: t('Adresse') },
+    commune: { icon: RiMapPin2Line, label: t('Commune') },
+    code_commune: { icon: RiMapPin2Line, label: t('Code INSEE commune') },
+    code_commune_insee: { icon: RiMapPin2Line, label: t('Code INSEE commune') },
+    departement: { icon: RiMapPin2Line, label: t('Département') },
+    code_departement: { icon: RiMapPin2Line, label: t('Code département') },
+    region: { icon: RiMapPin2Line, label: t('Région') },
+    code_region: { icon: RiMapPin2Line, label: t('Code région') },
+    code_epci: { icon: RiMapPin2Line, label: t('Code EPCI') },
+    code_postal: { icon: RiMapPin2Line, label: t('Code postal') },
+    insee_canton: { icon: RiMapPin2Line, label: t('Canton') },
+    code_fantoir: { icon: RiMapPin2Line, label: t('Code FANTOIR') },
+    id_rnb: { icon: RiMapPin2Line, label: t('Identifiant RNB') },
+    // Geo — countries
+    pays: { icon: RiGlobalLine, label: t('Pays') },
+    iso_country_code_alpha2: { icon: RiGlobalLine, label: t('Code pays (ISO α-2)') },
+    iso_country_code_alpha3: { icon: RiGlobalLine, label: t('Code pays (ISO α-3)') },
+    iso_country_code_numeric: { icon: RiGlobalLine, label: t('Code pays (ISO num.)') },
+    // Geo — coordinates
+    latitude_wgs: { icon: RiFocus3Line, label: t('Latitude') },
+    latitude_wgs_fr_metropole: { icon: RiFocus3Line, label: t('Latitude') },
+    longitude_wgs: { icon: RiFocus3Line, label: t('Longitude') },
+    longitude_wgs_fr_metropole: { icon: RiFocus3Line, label: t('Longitude') },
+    latitude_l93: { icon: RiFocus3Line, label: t('Latitude (Lambert 93)') },
+    longitude_l93: { icon: RiFocus3Line, label: t('Longitude (Lambert 93)') },
+    latlon_wgs: { icon: RiFocus3Line, label: t('Latitude / longitude') },
+    lonlat_wgs: { icon: RiFocus3Line, label: t('Longitude / latitude') },
+    // Identifiers
+    siren: { icon: RiFingerprintLine, label: t('SIREN') },
+    siret: { icon: RiFingerprintLine, label: t('SIRET') },
+    code_rna: { icon: RiFingerprintLine, label: t('Identifiant RNA') },
+    code_waldec: { icon: RiFingerprintLine, label: t('Identifiant WALDEC') },
+    code_import: { icon: RiFingerprintLine, label: t('Code Import') },
+    uai: { icon: RiFingerprintLine, label: t('UAI') },
+    insee_ape700: { icon: RiFingerprintLine, label: t('Code APE') },
+    code_csp_insee: { icon: RiFingerprintLine, label: t('Code CSP') },
+    uuid: { icon: RiFingerprintLine, label: t('UUID') },
+    mongo_object_id: { icon: RiFingerprintLine, label: t('Identifiant Mongo') },
+    // Contact
+    email: { icon: RiMailLine, label: t('Email') },
+    url: { icon: RiLinksLine, label: t('URL') },
+    tel_fr: { icon: RiPhoneLine, label: t('Téléphone') },
+    username: { icon: RiUserLine, label: t('Nom d\'utilisateur') },
+    // People
+    sexe: { icon: RiUserLine, label: t('Sexe') },
+    csp_insee: { icon: RiUserLine, label: t('Catégorie socio-pro.') },
+    // Quantities
+    money: { icon: RiMoneyEuroCircleLine, label: t('Montant') },
+    percent: { icon: RiPercentLine, label: t('Pourcentage') },
+    // Temporal
+    year: { icon: RiCalendarLine, label: t('Année') },
+    date_fr: { icon: RiCalendarLine, label: t('Date') },
+    jour_de_la_semaine: { icon: RiCalendarEventLine, label: t('Jour de la semaine') },
+    mois_de_lannee: { icon: RiCalendarEventLine, label: t('Mois de l\'année') },
+    datetime_naive: { icon: RiTimeLine, label: t('Date et heure') },
+    datetime_aware: { icon: RiTimeLine, label: t('Date et heure') },
+    datetime_rfc822: { icon: RiTimeLine, label: t('Date et heure') },
+    // Structured
+    json: { icon: RiBracesLine, label: t('JSON') },
+    geojson: { icon: RiBracesLine, label: t('GeoJSON') },
+    binary: { icon: RiCodeLine, label: t('Binaire') },
+  }
+}
+
+// Tolerant fallback for a semantic format we don't explicitly know about:
+// "code_truc_machin" -> "Code truc machin".
+export function humanizeFormat(format: string): string {
+  const spaced = format.replace(/_/g, ' ').trim()
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1)
+}
+
 export function useFormatTabular() {
   const { locale } = useTranslation()
 

package/src/types/resources.ts

@@ -46,7 +46,6 @@ export type OgcLayerInfo = { name: string, default_crs: string | null }
 
 export type WfsMetadata = {
   format: string
-  layers: Array<OgcLayerInfo>
   version: string
   detected_layer: OgcLayerInfo | null
   output_formats: Array<string>