@datagouv/components-next 1.0.2-dev.195 → 1.0.2-dev.196

package/dist/{vue3-xml-viewer.common-AEbzQxXP.js → vue3-xml-viewer.common-BEL6n95l.js}

@@ -1,4 +1,4 @@
-import { g as Ke } from "./main-B3IzELg_.js";
+import { g as Ke } from "./main-B03fYwPN.js";
 import We from "vue";
 function Fe($, K) {
   for (var V = 0; V < K.length; V++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "1.0.2-dev.195",
+  "version": "1.0.2-dev.196",
   "private": false,
   "type": "module",
   "engines": {

package/src/components/LoadingBlock.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="relative">
     <div :class="{ 'opacity-50 min-h-64': loading }">
+      <!-- Keep the previous content while reloading, dimmed under the loader:
+           dropping it collapses the page height, which makes the browser clamp
+           the scroll and throws the reader back to the top. -->
       <slot
-        v-if="!loading && !hasError && data"
+        v-if="!hasError && data"
         :data="data"
       />
       <slot

package/src/components/Pagination.vue

@@ -104,6 +104,7 @@ import { computed, useTemplateRef } from 'vue'
 import { useRoute } from 'vue-router'
 import { useTranslation } from '../composables/useTranslation'
 import { clampPage, getVisiblePages } from '../functions/paginate'
+import { scrollToBlockTop } from '../functions/scroll'
 
 type Props = {
   /**
@@ -141,10 +142,7 @@ const nav = useTemplateRef('navRef')
 function change(index: number) {
   emit('change', index)
 
-  if (!nav.value || !nav.value.parentElement) return
-
-  nav.value.parentElement.style.scrollMarginTop = '100px'
-  nav.value.parentElement.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  scrollToBlockTop(nav.value?.parentElement)
 }
 
 function onClick(index: number) {

package/src/components/Search/GlobalSearch.vue

@@ -6,7 +6,6 @@
   >
     <div
       v-if="!hideSearchInput"
-      ref="search"
       class="flex flex-wrap items-center justify-between"
       data-cy="search"
     >
@@ -357,6 +356,7 @@
 <script setup lang="ts">
 import { computed, provide, shallowReactive, useSlots, watch, useTemplateRef, type Component, type Ref } from 'vue'
 import { useRouteQuery } from '@vueuse/router'
+import { useRoute } from 'vue-router'
 import { RiBookShelfLine, RiBuilding2Line, RiCloseCircleLine, RiDatabase2Line, RiLightbulbLine, RiLineChartLine, RiRssLine, RiTerminalLine } from '@remixicon/vue'
 import magnifyingGlassSrc from '../../../assets/illustrations/magnifying_glass.svg?url'
 import { useTranslation } from '../../composables/useTranslation'
@@ -365,6 +365,7 @@ import { configKey, forEachActiveCustomFilter, isCustomFilterActive, searchFilte
 import { useStableQueryParams } from '../../composables/useStableQueryParams'
 import { useComponentsConfig } from '../../config'
 import { useFetch } from '../../functions/api'
+import { scrollToBlockTop } from '../../functions/scroll'
 import type { AsyncDataRequestStatus } from '../../functions/api.types'
 import type { Dataset } from '../../types/datasets'
 import type { Dataservice } from '../../types/dataservices'
@@ -423,6 +424,7 @@ if (!currentType.value) currentType.value = configKey(props.config[0] ?? { class
 
 const { t } = useTranslation()
 const componentsConfig = useComponentsConfig()
+const route = useRoute()
 
 // Custom filter registry for useSearchFilter composable
 const customFilterRegistry = shallowReactive(new Map<string, CustomFilterEntry>())
@@ -797,14 +799,15 @@ function getFacets(key: string): FacetItem[] | undefined {
 }
 
 // Scroll handling
-const searchRef = useTemplateRef('search')
+const resultsRef = useTemplateRef('results')
 
-function scrollToTop() {
-  searchRef.value?.scrollIntoView({ behavior: 'smooth' })
-}
+// Every criteria lives in the URL, custom filters included, so watching the
+// query covers them all: whenever the result list is replaced, bring its top
+// back into view rather than leaving the reader in the middle of a list they
+// have not seen yet.
+watch(() => route.query, () => scrollToBlockTop(resultsRef.value))
 
 function changePage(newPage: number) {
   page.value = newPage
-  scrollToTop()
 }
 </script>

package/src/components/TabularExplorer/types.ts

@@ -24,25 +24,28 @@ export type TabularProfileResponse = {
   indexes: null
 }
 
+// Only CSV resources go through csv-detective: for the other formats the API
+// indexes (parquet…), the profile is reduced to the column names, their types
+// and the row count. Everything csv-detective produces is therefore optional.
 export type TabularProfile = {
   header: string[]
   columns: Record<string, TabularColumnInfo>
-  formats: Record<string, string[]>
-  profile: Record<string, TabularColumnProfile>
-  encoding: string
-  separator: string
-  categorical: string[]
   total_lines: number
-  nb_duplicates: number
-  columns_fields: Record<string, TabularColumnInfo>
-  columns_labels: Record<string, TabularColumnInfo>
-  header_row_idx: number
-  heading_columns: number
-  trailing_columns: number
+  formats?: Record<string, string[]>
+  profile?: Record<string, TabularColumnProfile>
+  encoding?: string
+  separator?: string
+  categorical?: string[]
+  nb_duplicates?: number
+  columns_fields?: Record<string, TabularColumnInfo>
+  columns_labels?: Record<string, TabularColumnInfo>
+  header_row_idx?: number
+  heading_columns?: number
+  trailing_columns?: number
 }
 
 export type TabularColumnInfo = {
-  score: number
+  score?: number
   format: string
   python_type: string
 }

package/src/components/TabularExplorer/useColumnMetadata.ts

@@ -38,7 +38,7 @@ export function useColumnMetadata(
     if (!profile) return 'text'
     const colInfo = profile.columns[col]
     if (!colInfo) return 'text'
-    return resolveColumnType(colInfo, profile.categorical.includes(col))
+    return resolveColumnType(colInfo, profile.categorical?.includes(col) ?? false)
   }
 
   const columnTypesMap = computed<Record<string, ColumnType>>(() => {

package/src/functions/charts.ts

@@ -72,13 +72,13 @@ export function toChartApi(chartForm: ChartForm): ChartForApi {
 export function buildColumnsFromProfile(profile: { profile: TabularProfile }): Array<ColumnDefinition> {
   return profile.profile.header.map((name) => {
     const colInfo = profile.profile.columns[name]
-    const isCategorical = profile.profile.categorical.includes(name)
+    const isCategorical = profile.profile.categorical?.includes(name) ?? false
     // The chart stack only branches on 'number' and 'date' (continuous axis,
     // aggregatable series, time formatting): it has no notion of a year column,
     // and on an axis a year is a number.
     const resolvedType = resolveColumnType(colInfo ?? { python_type: 'unknown', format: undefined }, isCategorical)
     const colType = resolvedType === 'year' ? 'number' : resolvedType
-    const colProfile = profile.profile.profile[name]
+    const colProfile = profile.profile.profile?.[name]
     return {
       name,
       type: colType,

package/src/functions/scroll.ts

@@ -0,0 +1,20 @@
+// Leaves room for the sticky elements sitting at the top of the viewport.
+const SCROLL_MARGIN = 100
+
+/**
+ * Bring the top of a block back into view after its content changed (paging,
+ * searching, filtering), so the reader restarts at the first result.
+ *
+ * Does nothing when the top of the block is already on screen: aligning the
+ * viewport on a block the reader is already looking at moves the page under
+ * them for no reason.
+ */
+export function scrollToBlockTop(block: HTMLElement | null | undefined) {
+  if (!block) return
+
+  const { top } = block.getBoundingClientRect()
+  if (top >= 0 && top <= window.innerHeight) return
+
+  block.style.scrollMarginTop = `${SCROLL_MARGIN}px`
+  block.scrollIntoView({ behavior: 'smooth', block: 'start' })
+}