@datagouv/components-next 1.1.2 → 1.3.0

package/src/components/TabularExplorer/TabularFilterContent.vue

@@ -26,20 +26,22 @@
     <!-- Null filter with progress bar -->
     <div
       v-if="columnProfile && columnProfile.nb_missing_values > 0"
-      class="flex items-center gap-2 px-3 py-2 border-b border-black/10"
+      class="px-3 py-2 border-b border-black/10 space-y-1.5"
     >
-      <span class="text-xs text-gray-plain whitespace-nowrap">
-        <span class="font-mono tabular-nums">{{ columnProfile.nb_missing_values }}</span>
-        null
-        <span class="text-gray-low">({{ nullPercent }})</span>
-      </span>
-      <ProgressBar
-        :value="columnProfile.nb_missing_values"
-        :max="totalLines"
-        bar-class="bg-gray-low"
-        class="flex-1 !h-1.5 !min-w-0 !border-0 !bg-gray-default"
-      />
-      <div class="flex items-center gap-0.5">
+      <div class="flex items-center gap-2">
+        <span class="text-xs text-gray-plain whitespace-nowrap">
+          <span class="font-mono tabular-nums">{{ columnProfile.nb_missing_values }}</span>
+          null
+          <span class="text-gray-low">({{ nullPercent }})</span>
+        </span>
+        <ProgressBar
+          :value="columnProfile.nb_missing_values"
+          :max="totalLines"
+          bar-class="bg-gray-low"
+          class="flex-1 !h-1.5 !min-w-0 !border-0 !bg-gray-default"
+        />
+      </div>
+      <div class="flex items-center justify-end gap-0.5">
         <BrandedButton
           :color="nullFilter === 'only' ? 'primary' : 'tertiary'"
           size="2xs"

package/src/components/TabularExplorer/TabularFilterPopover.vue

@@ -1,25 +1,26 @@
 <template>
-  <div
+  <Popover
     ref="anchor"
+    v-slot="{ open }"
     class="relative shrink-0"
   >
-    <button
-      class="p-0.5 rounded focus:outline-none"
+    <PopoverButton
+      class="p-0.5 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-new-primary"
       :class="hasColumnFilter ? 'bg-primary text-white' : 'hover:bg-gray-100'"
-      @click.stop="togglePopover"
     >
-      <RiFilter2Line
+      <RiFilterLine
         class="size-3.5"
         aria-hidden="true"
       />
       <span class="sr-only">{{ t('Filtrer') }} {{ column }}</span>
-    </button>
+    </PopoverButton>
 
     <ClientOnly>
       <Teleport to="#tooltips">
-        <div
-          v-show="isOpen"
+        <PopoverPanel
+          v-show="open"
           ref="panel"
+          static
           class="bg-white border border-black/10 rounded-lg shadow-md w-64 absolute z-[800]"
           :style="floatingStyles"
         >
@@ -50,17 +51,17 @@
             :category-badge-styles="categoryBadgeStyles"
             :boolean-counts="booleanCounts"
           />
-        </div>
+        </PopoverPanel>
       </Teleport>
     </ClientOnly>
-  </div>
+  </Popover>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useTemplateRef } from 'vue'
+import { computed, useTemplateRef } from 'vue'
 import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
-import { onClickOutside } from '@vueuse/core'
-import { RiFilter2Line, RiCloseLine } from '@remixicon/vue'
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import { RiFilterLine, RiCloseLine } from '@remixicon/vue'
 import { useTranslation } from '../../composables/useTranslation'
 import { hasFilterForColumn as _hasFilterForColumn } from '../../functions/tabular'
 import BrandedButton from '../BrandedButton.vue'
@@ -83,18 +84,12 @@ const filters = defineModel<Record<string, ColumnFilters>>('filters', { default:
 
 const { t } = useTranslation()
 
-const isOpen = ref(false)
-
-function togglePopover() {
-  isOpen.value = !isOpen.value
-}
-
-const anchorRef = useTemplateRef<HTMLElement>('anchor')
-const panelRef = useTemplateRef<HTMLElement>('panel')
-
-onClickOutside(panelRef, () => {
-  isOpen.value = false
-}, { ignore: [anchorRef] })
+// Headless UI Popover manages open state, Escape-to-close, outside-click,
+// focus handling and ARIA. floating-ui only positions the teleported panel.
+const anchorComponent = useTemplateRef<InstanceType<typeof Popover>>('anchor')
+const panelComponent = useTemplateRef<InstanceType<typeof PopoverPanel>>('panel')
+const anchorEl = computed(() => anchorComponent.value?.$el as HTMLElement | undefined)
+const panelEl = computed(() => panelComponent.value?.$el as HTMLElement | undefined)
 
 const hasColumnFilter = computed(() => _hasFilterForColumn(filters.value, props.column))
 
@@ -103,7 +98,7 @@ function clearColumnFilter() {
   filters.value = rest
 }
 
-const { floatingStyles } = useFloating(anchorRef, panelRef, {
+const { floatingStyles } = useFloating(anchorEl, panelEl, {
   placement: 'bottom-start',
   middleware: [flip(), shift()],
   whileElementsMounted: autoUpdate,

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/useHasTabularData.ts

@@ -11,10 +11,17 @@ 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']
+      && !sourceUnreachable
       && (config.tabularAllowRemote || resource.filetype === 'file')
     )
   }

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/composables/useStableQueryParams.ts

@@ -72,10 +72,14 @@ export function useStableQueryParams(options: StableQueryParamsOptions) {
     if (q.value) {
       params.q = q.value
     }
-    if (sort.value) {
+    const sortToUse = sort.value ?? typeConfig?.defaultSort
+    if (sortToUse) {
       const validSortValues = typeConfig?.sortOptions?.map(o => o.value as string) ?? []
-      if (validSortValues.includes(sort.value)) {
-        params.sort = sort.value
+      if (validSortValues.includes(sortToUse)) {
+        params.sort = sortToUse
+      }
+      else if (import.meta.env.DEV && typeConfig?.defaultSort && typeConfig?.sortOptions && sortToUse === typeConfig.defaultSort) {
+        console.warn(`[GlobalSearch] defaultSort "${typeConfig.defaultSort}" is not in sortOptions for "${typeConfig.class}". Valid values: ${validSortValues.join(', ')}`)
       }
     }
     params.page = page.value

package/src/composables/useTabularProfile.ts

@@ -0,0 +1,70 @@
+import { computed, inject, provide, toValue, type MaybeRefOrGetter, type Ref } from 'vue'
+import { useComponentsConfig } from '../config'
+import { useFetch } from '../functions/api'
+import type { AsyncDataRequestStatus } from '../functions/api.types'
+import type { TabularProfileResponse } from '../components/TabularExplorer/types'
+
+const TABULAR_PROFILE_KEY = Symbol('tabular-profile')
+
+export type TabularProfileState = {
+  resourceId: Readonly<Ref<string>>
+  data: Readonly<Ref<TabularProfileResponse | null>>
+  error: Readonly<Ref<unknown | null>>
+  status: Readonly<Ref<AsyncDataRequestStatus>>
+  refresh: () => Promise<void>
+}
+
+// What is shared through provide/inject: the resourceId (to let descendants
+// check they target the same resource) and the in-flight fetch promise. We
+// share the promise rather than the resolved state because `provide()` must
+// run synchronously during setup — see `provideTabularProfile`.
+type TabularProfileShared = {
+  resourceId: Readonly<Ref<string>>
+  state: Promise<TabularProfileState>
+}
+
+async function createProfileState(resourceId: MaybeRefOrGetter<string>): Promise<TabularProfileState> {
+  const config = useComponentsConfig()
+  const ridRef = computed(() => toValue(resourceId))
+
+  // Goes through the package's useFetch, which delegates to the host's
+  // customUseFetch (Nuxt useFetch in cdata) so the response is shared
+  // between SSR and CSR via the Nuxt payload — avoiding a double fetch.
+  const profileUrl = computed(() =>
+    ridRef.value ? `${config.tabularApiUrl}/api/resources/${ridRef.value}/profile/` : null,
+  )
+
+  const { data, error, status, refresh } = await useFetch<TabularProfileResponse>(profileUrl, { raw: true })
+
+  return { resourceId: ridRef, data, error, status, refresh }
+}
+
+/**
+ * Parent: fetch the tabular profile once and share it with descendants
+ * (TabularExplorer, DataStructure...) via provide/inject.
+ *
+ * Not async on purpose: `provide()` only works while the active component
+ * instance is set, which is lost after the first `await`. So we kick off the
+ * fetch, `provide()` the resulting promise synchronously, then return it for
+ * the caller to await.
+ */
+export function provideTabularProfile(resourceId: MaybeRefOrGetter<string>): Promise<TabularProfileState> {
+  const ridRef = computed(() => toValue(resourceId))
+  const state = createProfileState(resourceId)
+  provide<TabularProfileShared>(TABULAR_PROFILE_KEY, { resourceId: ridRef, state })
+  return state
+}
+
+/**
+ * Child: get the tabular profile from an ancestor that called
+ * `provideTabularProfile` for the same resourceId. Falls back to
+ * fetching on its own if no compatible ancestor is found — preserves
+ * standalone usage of TabularExplorer / DataStructure.
+ */
+export async function injectTabularProfile(resourceId: MaybeRefOrGetter<string>): Promise<TabularProfileState> {
+  const injected = inject<TabularProfileShared | null>(TABULAR_PROFILE_KEY, null)
+  if (injected && injected.resourceId.value === toValue(resourceId)) {
+    return await injected.state
+  }
+  return await createProfileState(resourceId)
+}

package/src/functions/activities.ts

@@ -11,9 +11,9 @@ export function getActivityTranslation(activity: Activity): string {
     'dataset:deleted': t('a supprimé le jeu de données'),
     'dataset:discussed': t('a discuté du jeu de données'),
     'dataset:followed': t('suit le jeu de données'),
-    'dataset:resource:added': t('a ajouté une ressource'),
-    'dataset:resource:updated': t('a mis à jour une ressource'),
-    'dataset:resource:deleted': t('a supprimé une ressource'),
+    'dataset:resource:added': t('a ajouté la ressource'),
+    'dataset:resource:updated': t('a mis à jour la ressource'),
+    'dataset:resource:deleted': t('a supprimé la ressource'),
     'dataservice:created': t('a créé le service de données'),
     'dataservice:updated': t('a mis à jour le service de données'),
     'dataservice:deleted': t('a supprimé le service de données'),

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/main.ts

@@ -40,6 +40,9 @@ import BrandedButton from './components/BrandedButton.vue'
 import CopyButton from './components/CopyButton.vue'
 import DataserviceCard from './components/DataserviceCard.vue'
 import DatasetCard from './components/DatasetCard.vue'
+import DataStructure from './components/ResourceAccordion/DataStructure.vue'
+import Downloads from './components/ResourceAccordion/Downloads.vue'
+import Metadata from './components/ResourceAccordion/Metadata.vue'
 import DescriptionListTerm from './components/DescriptionListTerm.vue'
 import DescriptionListDetails from './components/DescriptionListDetails.vue'
 import DiscussionMessageCard from './components/DiscussionMessageCard.vue'
@@ -60,6 +63,7 @@ import LoadingBlock from './components/LoadingBlock.vue'
 import MarkdownViewer from './components/MarkdownViewer.vue'
 import OrganizationCard from './components/OrganizationCard.vue'
 import OrganizationHorizontalCard from './components/OrganizationHorizontalCard.vue'
+import ObjectCardOwner from './components/ObjectCardOwner.vue'
 import OrganizationLogo from './components/OrganizationLogo.vue'
 import OrganizationNameWithCertificate from './components/OrganizationNameWithCertificate.vue'
 import OwnerType from './components/OwnerType.vue'
@@ -73,6 +77,7 @@ import PostCard from './components/PostCard.vue'
 import ReadMore from './components/ReadMore.vue'
 import ResourceAccordion from './components/ResourceAccordion/ResourceAccordion.vue'
 import ResourceIcon from './components/ResourceAccordion/ResourceIcon.vue'
+import ResourceSelector from './components/ResourceExplorer/ResourceSelector.vue'
 import ResourceExplorer from './components/ResourceExplorer/ResourceExplorer.vue'
 import ResourceExplorerSidebar from './components/ResourceExplorer/ResourceExplorerSidebar.vue'
 import ResourceExplorerViewer from './components/ResourceExplorer/ResourceExplorerViewer.vue'
@@ -82,9 +87,6 @@ import ReuseHorizontalCard from './components/ReuseHorizontalCard.vue'
 import ReuseDetails from './components/ReuseDetails.vue'
 import SchemaCard from './components/SchemaCard.vue'
 import SimpleBanner from './components/SimpleBanner.vue'
-import SmallChart from './components/SmallChart.vue'
-import ChartViewer from './components/Chart/ChartViewer.vue'
-import ChartViewerWrapper from './components/Chart/ChartViewerWrapper.vue'
 import StatBox from './components/StatBox.vue'
 import Tab from './components/Tabs/Tab.vue'
 import TabGroup from './components/Tabs/TabGroup.vue'
@@ -115,6 +117,8 @@ export * from './composables/useMetrics'
 export * from './composables/useReuseType'
 export * from './composables/useTranslation'
 export * from './composables/useHasTabularData'
+export * from './composables/useResourceCapabilities'
+export * from './composables/useTabularProfile'
 
 export * from './functions/activities'
 export * from './functions/datasets'
@@ -326,6 +330,9 @@ export {
   CopyButton,
   DataserviceCard,
   DatasetCard,
+  DataStructure,
+  Downloads,
+  Metadata,
   DatasetInformationSection,
   DatasetTemporalitySection,
   DatasetSpatialSection,
@@ -365,15 +372,14 @@ export {
   ResourceExplorer,
   ResourceExplorerSidebar,
   ResourceExplorerViewer,
+  ObjectCardOwner,
   ResourceIcon,
+  ResourceSelector,
   ReuseCard,
   ReuseDetails,
   ReuseHorizontalCard,
   SchemaCard,
   SimpleBanner,
-  SmallChart,
-  ChartViewer,
-  ChartViewerWrapper,
   StatBox,
   OpenApiViewer,
   Tab,

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>