@datagouv/components-next 1.1.1 → 1.2.0

package/src/components/Search/GlobalSearch.vue

@@ -13,6 +13,7 @@
       <SearchInput
         v-model="q"
         :placeholder="resolvedPlaceholder"
+        :auto-focus
       />
     </div>
     <div class="grid grid-cols-12 mt-2 md:mt-5">
@@ -35,7 +36,7 @@
                 :value="configKey(typeConfig)"
                 :count="resultsMap[configKey(typeConfig)]?.data.value?.total"
                 :loading="resultsMap[configKey(typeConfig)]?.status.value === 'pending' || resultsMap[configKey(typeConfig)]?.status.value === 'idle'"
-                :icon="strategies[typeConfig.class].icon"
+                :icon="typeConfig.icon ?? strategies[typeConfig.class].icon"
               >
                 {{ typeConfig.name || strategies[typeConfig.class].name }}
               </RadioInput>
@@ -199,10 +200,13 @@
               <div class="fr-col">
                 <select
                   id="sort-search"
-                  v-model="sort"
+                  v-model="effectiveSort"
                   class="fr-select text-sm shadow-input-blue!"
                 >
-                  <option :value="undefined">
+                  <option
+                    v-if="!currentTypeConfig?.defaultSort"
+                    :value="undefined"
+                  >
                     {{ t('Pertinence') }}
                   </option>
                   <option
@@ -401,11 +405,17 @@ const props = withDefaults(defineProps<{
   config?: GlobalSearchConfig
   placeholder?: string | null
   hideSearchInput?: boolean
+  autoFocus?: boolean
 }>(), {
   config: getDefaultGlobalSearchConfig,
   hideSearchInput: false,
+  autoFocus: true,
 })
 
+const emit = defineEmits<{
+  resultsCount: [total: number]
+}>()
+
 // defineModel's default is static and can't depend on props, so we cast and initialize manually
 const currentType = defineModel<string>('type') as Ref<string>
 if (!currentType.value) currentType.value = configKey(props.config[0] ?? { class: 'datasets' })
@@ -475,8 +485,17 @@ const showSidebar = computed(() => props.config.length > 1 || activeFilters.valu
 // URL query params
 const q = useRouteQuery<string>('q', '')
 const { debounced: qDebounced, flush: flushQ } = useDebouncedRef(q, componentsConfig.searchDebounce ?? 300)
+// When the search input is hidden, the parent owns the input and is expected
+// to debounce user typing itself (otherwise typing would land in the URL
+// instantly via v-model and stack two debounces). Bypass the internal debounce
+// so URL-driven q changes hit the fetch params immediately.
+const qForParams = computed(() => props.hideSearchInput ? q.value : qDebounced.value)
 const page = useRouteQuery('page', 1, { transform: Number })
 const sort = useRouteQuery<string | undefined>('sort')
+const effectiveSort = computed({
+  get: () => sort.value ?? currentTypeConfig.value?.defaultSort,
+  set: (value) => { sort.value = value },
+})
 
 provide(searchFilterContextKey, {
   register(urlParam, entry) {
@@ -550,7 +569,7 @@ watch(currentType, () => {
 const stableParamsOptions = {
   allFilters,
   customFilterRegistry,
-  q: qDebounced,
+  q: qForParams,
   sort,
   page,
   pageSize,
@@ -643,7 +662,7 @@ for (const c of props.config) {
 // intentionally excluded here to avoid resetting the page when a filter
 // registers with its URL-derived value.
 const filtersForReset = computed(() => ({
-  q: qDebounced.value,
+  q: qForParams.value,
   organization: organizationId.value,
   organization_badge: organizationType.value,
   tag: tag.value,
@@ -712,6 +731,10 @@ function resetFilters() {
 const searchResults = computed(() => resultsMap[currentType.value]?.data.value)
 const searchResultsStatus = computed(() => resultsMap[currentType.value]?.status.value)
 
+watch(searchResults, (results) => {
+  if (results) emit('resultsCount', results.total)
+}, { immediate: true })
+
 // RSS feed URL for datasets
 const rssUrl = computed(() => {
   if (currentTypeConfig.value?.class !== 'datasets') return null
@@ -726,7 +749,7 @@ const rssUrl = computed(() => {
   }
 
   // Add active filters
-  if (qDebounced.value) params.set('q', qDebounced.value)
+  if (qForParams.value) params.set('q', qForParams.value)
   if (organizationId.value) params.set('organization', organizationId.value)
   if (organizationType.value) params.set('organization_badge', organizationType.value)
   if (tag.value) params.set('tag', tag.value)
@@ -743,7 +766,7 @@ const rssUrl = computed(() => {
   }, currentTypeConfig.value ? configKey(currentTypeConfig.value) : undefined)
 
   // Add sort if set
-  if (sort.value) params.set('sort', sort.value)
+  if (effectiveSort.value) params.set('sort', effectiveSort.value)
 
   const queryString = params.toString()
   const basePath = '/api/1/datasets/recent.atom'

package/src/components/Search/SearchInput.vue

@@ -37,7 +37,7 @@ import BrandedButton from '../BrandedButton.vue'
 
 const q = defineModel<string>({ required: true })
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   placeholder?: string | null
   autoFocus?: boolean
 }>(), {
@@ -57,6 +57,7 @@ const focus = () => {
 }
 
 onMounted(async () => {
+  if (!props.autoFocus) return
   await nextTick()
   focus()
 })

package/src/components/TabularExplorer/TabularExplorer.vue

@@ -1,164 +1,218 @@
 <template>
   <div>
-    <SimpleBanner
-      v-if="error"
-      type="warning"
-      class="mb-4"
+    <div
+      v-if="previewError"
+      class="max-w-3xl mx-auto"
     >
-      {{ t("L'aperçu de ce fichier n'a pas pu être chargé.") }}
-      <pre class="text-xs mt-2">{{ error }}</pre>
-    </SimpleBanner>
-
-    <template v-else-if="tableData">
-      <!-- Toolbar -->
-      <div class="flex items-center py-3 gap-2">
-        <!-- Mobile: filter & sort button -->
-        <BrandedButton
-          class="md:hidden"
-          color="tertiary"
-          size="2xs"
-          :icon="RiFilter2Line"
-          keep-margins-even-without-borders
-          @click="mobileFilterOpen = true"
-        >
-          {{ t('Filtres & tri') }}
-        </BrandedButton>
-
-        <div class="flex-1" />
-
-        <!-- Right: Stats -->
-        <div class="flex items-center gap-4">
-          <!-- Columns (clickable, opens column popover) -->
-          <Popover
-            ref="columnAnchor"
-            v-slot="{ open }"
-            class="relative"
-          >
-            <PopoverButton class="flex items-center gap-1.5 text-xs text-gray-plain rounded px-2 py-1 hover:bg-gray-50 focus:outline-none">
-              <RiLayoutColumnLine
-                class="size-3"
-                aria-hidden="true"
-              />
-              <span class="font-bold hidden md:inline">{{ t('Colonnes') }}</span>
-              <span class="font-mono tabular-nums">{{ visibleColumns.size }}/{{ allColumns.length }}</span>
-              <RiArrowDownSLine
-                class="size-3 opacity-50"
-                aria-hidden="true"
-              />
-            </PopoverButton>
-
-            <ClientOnly>
-              <Teleport to="#tooltips">
-                <PopoverPanel
-                  v-show="open"
-                  ref="columnPanel"
-                  static
-                  class="bg-white border border-gray-default rounded shadow-lg w-72 absolute z-[800]"
-                  :style="columnFloatingStyles"
-                >
-                  <div class="flex items-center justify-between px-3 py-2 border-b border-gray-default">
-                    <span class="text-xs font-medium text-gray-title">
-                      {{ visibleColumns.size }} {{ t('sur') }} {{ allColumns.length }} {{ t('colonnes visibles') }}
-                    </span>
-                    <BrandedButton
-                      v-if="hiddenCount"
-                      color="tertiary"
-                      size="2xs"
-                      @click="showAllColumns"
-                    >
-                      {{ t('Tout afficher') }}
-                    </BrandedButton>
-                  </div>
-                  <div class="max-h-64 overflow-auto p-1">
-                    <label
-                      v-for="col in allColumns"
-                      :key="col"
-                      class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-50 cursor-pointer text-xs"
-                    >
-                      <input
-                        type="checkbox"
-                        :checked="visibleColumns.has(col)"
-                        class="size-3.5 accent-new-primary"
-                        @change="toggleColumn(col)"
-                      >
-                      <span class="truncate">{{ col }}</span>
-                    </label>
-                  </div>
-                </PopoverPanel>
-              </Teleport>
-            </ClientOnly>
-          </Popover>
-
-          <!-- Rows -->
-          <span class="flex items-center gap-1.5 text-xs text-gray-plain">
-            <RiLayoutRowLine
-              class="size-3 text-mention-grey"
-              aria-hidden="true"
-            />
-            <span class="font-bold hidden md:inline">{{ t('Lignes') }}</span>
-            <span class="font-mono tabular-nums">{{ tableData.meta.total.toLocaleString() }}/{{ totalLines.toLocaleString() }}</span>
-          </span>
+      <SimpleBanner
+        type="warning"
+        class="mb-4"
+      >
+        {{ t("L'aperçu de ce fichier n'a pas pu être chargé.") }}
+        <pre class="text-xs mt-2 whitespace-pre-wrap break-words">{{ previewError }}</pre>
+      </SimpleBanner>
+    </div>
+
+    <div
+      v-else-if="previewLoading"
+      class="animate-pulse-placeholder"
+      :aria-label="t('Chargement de l\'aperçu…')"
+      role="status"
+    >
+      <div class="container">
+        <div class="flex items-center justify-end gap-4 py-3">
+          <div class="h-4 w-20 bg-gray-200" />
+          <div class="h-4 w-20 bg-gray-200" />
         </div>
       </div>
+      <div class="overflow-hidden">
+        <table class="w-full text-sm border-collapse">
+          <thead class="shadow-[inset_0_-1px_0_0_#E5E5E5]">
+            <tr>
+              <th
+                v-for="i in 6"
+                :key="i"
+                class="px-3 py-2 text-left"
+              >
+                <div class="h-4 w-24 bg-gray-200" />
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="row in 8"
+              :key="row"
+              class="border-b border-gray-100"
+            >
+              <td
+                v-for="col in 6"
+                :key="col"
+                class="px-3 py-2.5"
+              >
+                <div class="h-3 bg-gray-200" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
 
-      <!-- Active filters -->
-      <div
-        v-if="activeFilters.length > 0"
-        class="bg-gray-some border border-gray-default rounded-xl px-3 py-2.5 mb-3 space-y-2.5"
-      >
-        <!-- Header -->
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-2">
-            <RiFilter2Line
-              class="size-3.5"
-              aria-hidden="true"
-            />
-            <span class="text-xs text-gray-plain">{{ t('Filtres actifs') }}</span>
-            <span class="inline-flex items-center justify-center rounded-full bg-new-primary/10 text-new-primary text-xs tabular-nums min-w-5 h-5 px-1.5">
-              {{ activeFilters.length }}
-            </span>
-          </div>
+    <template v-else-if="tableData && profileData">
+      <!-- Toolbar (constrained width — only the table itself goes edge-to-edge) -->
+      <div class="container">
+        <div class="flex items-center py-3 gap-2">
+          <!-- Mobile: filter & sort button -->
           <BrandedButton
+            class="md:hidden"
             color="tertiary"
             size="2xs"
-            :icon="RiCloseLine"
-            @click="clearAllFilters"
+            :icon="RiFilter2Line"
+            keep-margins-even-without-borders
+            @click="mobileFilterOpen = true"
           >
-            {{ t('Tout effacer') }}
+            {{ t('Filtres & tri') }}
           </BrandedButton>
+
+          <div class="flex-1" />
+
+          <!-- Right: Stats -->
+          <div class="flex items-center gap-4">
+            <!-- Columns (clickable, opens column popover) -->
+            <Popover
+              ref="columnAnchor"
+              v-slot="{ open }"
+              class="relative"
+            >
+              <PopoverButton class="flex items-center gap-1.5 text-xs text-gray-plain rounded px-2 py-1 hover:bg-gray-50 focus:outline-none">
+                <RiLayoutColumnLine
+                  class="size-3"
+                  aria-hidden="true"
+                />
+                <span class="font-bold hidden md:inline">{{ t('Colonnes') }}</span>
+                <span class="font-mono tabular-nums">{{ visibleColumns.size }}/{{ allColumns.length }}</span>
+                <RiArrowDownSLine
+                  class="size-3 opacity-50"
+                  aria-hidden="true"
+                />
+              </PopoverButton>
+
+              <ClientOnly>
+                <Teleport to="#tooltips">
+                  <PopoverPanel
+                    v-show="open"
+                    ref="columnPanel"
+                    static
+                    class="bg-white border border-gray-default rounded shadow-lg w-72 absolute z-[800]"
+                    :style="columnFloatingStyles"
+                  >
+                    <div class="flex items-center justify-between px-3 py-2 border-b border-gray-default">
+                      <span class="text-xs font-medium text-gray-title">
+                        {{ visibleColumns.size }} {{ t('sur') }} {{ allColumns.length }} {{ t('colonnes visibles') }}
+                      </span>
+                      <BrandedButton
+                        v-if="hiddenCount"
+                        color="tertiary"
+                        size="2xs"
+                        @click="showAllColumns"
+                      >
+                        {{ t('Tout afficher') }}
+                      </BrandedButton>
+                    </div>
+                    <div class="max-h-64 overflow-auto p-1">
+                      <label
+                        v-for="col in allColumns"
+                        :key="col"
+                        class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-50 cursor-pointer text-xs"
+                      >
+                        <input
+                          type="checkbox"
+                          :checked="visibleColumns.has(col)"
+                          class="size-3.5 accent-new-primary"
+                          @change="toggleColumn(col)"
+                        >
+                        <span class="truncate">{{ col }}</span>
+                      </label>
+                    </div>
+                  </PopoverPanel>
+                </Teleport>
+              </ClientOnly>
+            </Popover>
+
+            <!-- Rows -->
+            <span class="flex items-center gap-1.5 text-xs text-gray-plain">
+              <RiLayoutRowLine
+                class="size-3 text-mention-grey"
+                aria-hidden="true"
+              />
+              <span class="font-bold hidden md:inline">{{ t('Lignes') }}</span>
+              <span class="font-mono tabular-nums">{{ tableData.meta.total.toLocaleString() }}/{{ totalLines.toLocaleString() }}</span>
+            </span>
+          </div>
         </div>
-        <!-- Chips -->
-        <div class="flex flex-wrap gap-1.5">
-          <span
-            v-for="af in activeFilters"
-            :key="af.column"
-            class="inline-flex items-center gap-1.5 bg-white border border-gray-silver rounded-lg pl-2 pr-1 py-1 text-xs"
-          >
-            <component
-              :is="getTypeConfig(af.column).icon"
-              class="size-3 text-gray-title"
-              aria-hidden="true"
-            />
-            <span class="text-gray-title">{{ af.column }}</span>
-            <span class="text-gray-plain">{{ af.label }}</span>
-            <button
-              class="rounded p-0.5 text-gray-low hover:text-gray-plain hover:bg-gray-100"
-              @click="removeFilter(af.column)"
+
+        <!-- Active filters -->
+        <div
+          v-if="activeFilters.length > 0"
+          class="bg-gray-some border border-gray-default rounded-xl px-3 py-2.5 mb-3 space-y-2.5"
+        >
+          <!-- Header -->
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <RiFilter2Line
+                class="size-3.5"
+                aria-hidden="true"
+              />
+              <span class="text-xs text-gray-plain">{{ t('Filtres actifs') }}</span>
+              <span class="inline-flex items-center justify-center rounded-full bg-new-primary/10 text-new-primary text-xs tabular-nums min-w-5 h-5 px-1.5">
+                {{ activeFilters.length }}
+              </span>
+            </div>
+            <BrandedButton
+              color="tertiary"
+              size="2xs"
+              :icon="RiCloseLine"
+              @click="clearAllFilters"
+            >
+              {{ t('Tout effacer') }}
+            </BrandedButton>
+          </div>
+          <!-- Chips -->
+          <div class="flex flex-wrap gap-1.5">
+            <span
+              v-for="af in activeFilters"
+              :key="af.column"
+              class="inline-flex items-center gap-1.5 bg-white border border-gray-silver rounded-lg pl-2 pr-1 py-1 text-xs"
             >
-              <RiCloseLine
-                class="size-3"
+              <component
+                :is="getTypeConfig(af.column).icon"
+                class="size-3 text-gray-title"
                 aria-hidden="true"
               />
-              <span class="sr-only">{{ t('Supprimer ce filtre') }}</span>
-            </button>
-          </span>
+              <span class="text-gray-title">{{ af.column }}</span>
+              <span class="text-gray-plain">{{ af.label }}</span>
+              <button
+                class="rounded p-0.5 text-gray-low hover:text-gray-plain hover:bg-gray-100"
+                @click="removeFilter(af.column)"
+              >
+                <RiCloseLine
+                  class="size-3"
+                  aria-hidden="true"
+                />
+                <span class="sr-only">{{ t('Supprimer ce filtre') }}</span>
+              </button>
+            </span>
+          </div>
         </div>
       </div>
+      <!-- /container (toolbar + active filters) -->
 
       <!-- Desktop: scrollable table -->
+      <!-- `-mx-4` lets the table extend edge-to-edge of the parent's px-4 wrapper
+           (used in both ResourceExplorerViewer's TabPanel and pages/explore.vue),
+           while the toolbar and active-filter rows above keep that padding. -->
       <div
         ref="scrollContainer"
-        class="hidden md:block overflow-auto max-h-[70vh]"
+        class="hidden md:block overflow-auto max-h-[70vh] -mx-4"
       >
         <table class="text-sm border-collapse">
           <thead class="sticky top-0 bg-white z-10 shadow-[inset_0_-1px_0_0_#E5E5E5]">
@@ -457,7 +511,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onUnmounted, ref, watch, useTemplateRef } from 'vue'
+import { computed, nextTick, onUnmounted, ref, watch, useTemplateRef } from 'vue'
 import { ofetch } from 'ofetch'
 import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
 import { Dialog, DialogPanel, DialogTitle, Popover, PopoverButton, PopoverPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
@@ -474,6 +528,7 @@ import {
 import { useFetch } from '../../functions/api'
 import { useComponentsConfig } from '../../config'
 import { useTranslation } from '../../composables/useTranslation'
+import { injectTabularProfile } from '../../composables/useTabularProfile'
 import { buildTypeConfig, hasFilterForColumn as _hasFilterForColumn, isTruthy, isFalsy } from '../../functions/tabular'
 import ClientOnly from '../ClientOnly.vue'
 import SimpleBanner from '../SimpleBanner.vue'
@@ -484,7 +539,7 @@ import TabularCellPopover from './TabularCellPopover.vue'
 import type { CellInfo } from './TabularCellPopover.vue'
 import TabularFilterContent from './TabularFilterContent.vue'
 import TabularFilterPopover from './TabularFilterPopover.vue'
-import type { TabularDataResponse, TabularProfileResponse, TabularRow, ColumnType, SortConfig, ColumnFilters, BadgeStyle } from './types'
+import type { TabularDataResponse, TabularRow, ColumnType, SortConfig, ColumnFilters, BadgeStyle } from './types'
 
 const props = defineProps<{
   resourceId: string
@@ -509,10 +564,6 @@ const dataUrl = computed(() =>
   `${config.tabularApiUrl}/api/resources/${props.resourceId}/data/`,
 )
 
-const profileUrl = computed(() =>
-  `${config.tabularApiUrl}/api/resources/${props.resourceId}/profile/`,
-)
-
 // Sort & filter state
 const sort = ref<SortConfig | null>(null)
 const filters = ref<Record<string, ColumnFilters>>({})
@@ -552,7 +603,17 @@ const dataQuery = computed(() => {
 
 const { data: tableData, error } = await useFetch<TabularDataResponse>(dataUrl, { raw: true, query: dataQuery })
 
-const { data: profileData } = await useFetch<TabularProfileResponse>(profileUrl, { raw: true })
+// Profile is shared with sibling components (e.g. DataStructure) via
+// `provideTabularProfile` in the parent. Falls back to a local fetch
+// when no parent provides it (standalone usage).
+const { data: profileData, error: profileError, status: profileStatus } = await injectTabularProfile(() => props.resourceId)
+
+// The component renders nothing useful until the profile is available
+// (allColumns is derived from it). Surface a clear loading / error state
+// so we don't end up with an empty table + a spinner running forever.
+const profileLoading = computed(() => !profileData.value && (profileStatus.value === 'idle' || profileStatus.value === 'pending'))
+const previewError = computed(() => error.value || profileError.value)
+const previewLoading = computed(() => !previewError.value && (!tableData.value || profileLoading.value))
 
 // Infinite scroll state
 const allRows = ref<TabularRow[]>([])
@@ -625,23 +686,65 @@ function showAllColumns() {
   visibleColumns.value = new Set(allColumns.value)
 }
 
-// Column resize
+// Column widths
+//
+// Strategy:
+// - On first render (when both data and profile are loaded), we measure the
+//   natural offsetWidth of each <th>, then distribute any leftover container
+//   space proportionally so the table fills the available horizontal area.
+// - We immediately lock all columns to those widths via `columnWidths`, so
+//   pagination, filtering, sorting or infinite-scroll never trigger a layout
+//   shift (the table doesn't re-auto-size based on newly visible content).
+// - Manual resize via the drag handle keeps working unchanged: it always sees
+//   columnWidths populated, so it goes straight into the resize loop.
 const columnWidths = ref<Record<string, number>>({})
 const resizing = ref<{ column: string, startX: number, startWidth: number } | null>(null)
 
-function initColumnWidths() {
-  const ths = scrollContainerRef.value?.querySelectorAll('th')
-  if (!ths) return
-  const widths: Record<string, number> = {}
+function measureAndDistributeColumnWidths() {
+  const container = scrollContainerRef.value
+  if (!container) return
+  const ths = container.querySelectorAll('th')
+  if (!ths || ths.length === 0) return
+
+  const naturalWidths: Record<string, number> = {}
+  let naturalSum = 0
   ths.forEach((th, i) => {
     const col = displayedColumns.value[i]
-    if (col) widths[col] = th.offsetWidth
+    if (!col) return
+    const w = th.offsetWidth
+    naturalWidths[col] = w
+    naturalSum += w
   })
+  if (naturalSum === 0) return
+
+  // Inflate to fill container if columns don't naturally cover it.
+  const containerWidth = container.clientWidth
+  const ratio = naturalSum < containerWidth ? containerWidth / naturalSum : 1
+
+  const widths: Record<string, number> = {}
+  for (const [col, w] of Object.entries(naturalWidths)) {
+    widths[col] = Math.floor(w * ratio)
+  }
   columnWidths.value = widths
 }
 
+// Lock columns once both data and profile are ready (so the <thead> is rendered
+// with content-driven natural widths). Only runs once — subsequent data changes
+// (pagination, filters) keep the locked widths and avoid layout shifts.
+watch(
+  () => [tableData.value !== null, displayedColumns.value.length] as const,
+  async ([dataReady, colCount]) => {
+    if (!dataReady || colCount === 0) return
+    if (Object.keys(columnWidths.value).length > 0) return
+    await nextTick()
+    measureAndDistributeColumnWidths()
+  },
+  { immediate: true },
+)
+
 function startResize(col: string, e: MouseEvent) {
-  if (!Object.keys(columnWidths.value).length) initColumnWidths()
+  // Fallback in case the user grabs the handle before the initial measure ran.
+  if (!Object.keys(columnWidths.value).length) measureAndDistributeColumnWidths()
   resizing.value = { column: col, startX: e.clientX, startWidth: columnWidths.value[col] ?? 100 }
   // Disable smooth scroll during resize
   if (scrollContainerRef.value) scrollContainerRef.value.style.scrollBehavior = 'auto'

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/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/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