@datagouv/components-next 1.0.2-dev.17 → 1.0.2-dev.170

package/src/components/TabularExplorer/TabularFilterContent.vue

@@ -0,0 +1,370 @@
+<template>
+  <div>
+    <!-- Sort -->
+    <div class="flex items-center gap-1 px-2 py-1.5 border-b border-black/10 text-xs">
+      <span class="text-gray-plain">{{ t('Trier') }}</span>
+      <BrandedButton
+        :color="sort?.column === column && sort?.direction === 'asc' ? 'primary' : 'tertiary'"
+        size="2xs"
+        :icon="RiArrowUpLine"
+        keep-margins-even-without-borders
+        @click="toggleSort('asc')"
+      >
+        {{ t('Croissant') }}
+      </BrandedButton>
+      <BrandedButton
+        :color="sort?.column === column && sort?.direction === 'desc' ? 'primary' : 'tertiary'"
+        size="2xs"
+        :icon="RiArrowDownLine"
+        keep-margins-even-without-borders
+        @click="toggleSort('desc')"
+      >
+        {{ t('Décroissant') }}
+      </BrandedButton>
+    </div>
+
+    <!-- Null filter with progress bar -->
+    <div
+      v-if="columnProfile && columnProfile.nb_missing_values > 0"
+      class="px-3 py-2 border-b border-black/10 space-y-1.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"
+          keep-margins-even-without-borders
+          @click="toggleNullFilter('only')"
+        >
+          {{ t('seul.') }}
+        </BrandedButton>
+        <BrandedButton
+          :color="nullFilter === 'exclude' ? 'primary' : 'tertiary'"
+          size="2xs"
+          keep-margins-even-without-borders
+          @click="toggleNullFilter('exclude')"
+        >
+          {{ t('exclure') }}
+        </BrandedButton>
+      </div>
+    </div>
+
+    <!-- Search (contains) or date filter -->
+    <div
+      v-if="columnType !== 'boolean'"
+      class="px-3 py-2 border-b border-black/10"
+    >
+      <div class="relative">
+        <component
+          :is="searchField.icon"
+          class="absolute left-2 top-1/2 -translate-y-1/2 size-3.5 text-gray-medium"
+          aria-hidden="true"
+        />
+        <input
+          v-model="search"
+          :type="searchField.type"
+          class="w-full h-8 text-sm border border-transparent rounded-lg py-1 pl-8 pr-3 bg-[#f3f3f5] focus:outline-none focus:border-new-primary"
+          :placeholder="searchField.placeholder"
+        >
+      </div>
+    </div>
+
+    <!-- Categorical values -->
+    <div
+      v-if="columnType === 'categorical' && columnProfile?.tops && filteredTops.length"
+      class="max-h-56 overflow-auto p-1"
+    >
+      <button
+        v-for="top in filteredTops"
+        :key="top.value"
+        class="flex w-full items-center gap-2 px-2 py-1.5 rounded-md hover:bg-gray-50 cursor-pointer text-xs select-none"
+        :class="isValueSelected(top.value) && 'bg-gray-50'"
+        @click="toggleValue(top.value)"
+      >
+        <span
+          class="flex size-4 shrink-0 items-center justify-center rounded border"
+          :class="isValueSelected(top.value) ? 'border-new-primary bg-new-primary text-white' : 'border-gray-low'"
+        >
+          <RiCheckLine
+            v-if="isValueSelected(top.value)"
+            class="size-3"
+            aria-hidden="true"
+          />
+        </span>
+        <span class="flex-1 truncate text-left text-xs">
+          <span
+            v-if="categoryBadgeStyles?.[top.value]"
+            class="inline-block rounded font-medium px-2 py-0.5 text-xs"
+            :style="{ backgroundColor: categoryBadgeStyles![top.value]!.backgroundColor, color: categoryBadgeStyles![top.value]!.color }"
+          >{{ top.value }}</span>
+          <template v-else>
+            {{ top.value ?? 'null' }}
+          </template>
+        </span>
+        <span class="font-mono text-xs text-gray-low tabular-nums shrink-0">{{ top.count }}</span>
+      </button>
+    </div>
+
+    <!-- Boolean filter -->
+    <div
+      v-if="columnType === 'boolean'"
+      class="px-3 py-3 space-y-1.5"
+    >
+      <button
+        class="flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-xs transition-colors"
+        :class="booleanFilter === true ? 'bg-new-primary text-white' : 'bg-gray-some text-gray-title hover:bg-gray-default'"
+        @click="toggleBooleanFilter(true)"
+      >
+        <span
+          class="size-2.5 rounded-full shrink-0"
+          :class="booleanFilter === true ? 'bg-new-success-light' : 'bg-new-success'"
+        />
+        <span class="flex-1 text-left">{{ t('Vrai') }}</span>
+        <span
+          v-if="booleanCounts"
+          class="font-mono tabular-nums text-xs"
+          :class="booleanFilter === true ? 'text-white/70' : 'text-gray-low'"
+        >{{ booleanCounts.trueCount }}</span>
+      </button>
+      <button
+        class="flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-xs transition-colors"
+        :class="booleanFilter === false ? 'bg-new-primary text-white' : 'bg-gray-some text-gray-title hover:bg-gray-default'"
+        @click="toggleBooleanFilter(false)"
+      >
+        <span
+          class="size-2.5 rounded-full shrink-0"
+          :class="booleanFilter === false ? 'bg-new-warning-light' : 'bg-new-error'"
+        />
+        <span class="flex-1 text-left">{{ t('Faux') }}</span>
+        <span
+          v-if="booleanCounts"
+          class="font-mono tabular-nums text-xs"
+          :class="booleanFilter === false ? 'text-white/70' : 'text-gray-low'"
+        >{{ booleanCounts.falseCount }}</span>
+      </button>
+    </div>
+
+    <!-- Number range -->
+    <form
+      v-if="(columnType === 'number' || columnType === 'year') && columnProfile"
+      class="px-3 py-2 border-b border-black/10 space-y-2"
+      @submit.prevent="applyRange"
+    >
+      <div class="flex items-center gap-2 text-xs text-gray-plain">
+        <span class="tabular-nums">{{ columnType === 'year' ? profileMin : formatNumber(profileMin) }}</span>
+        <span class="text-gray-medium">—</span>
+        <span class="tabular-nums">{{ columnType === 'year' ? profileMax : formatNumber(profileMax) }}</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <input
+          v-model.number="rangeMin"
+          type="number"
+          step="any"
+          class="w-full h-7 text-xs border border-black/10 rounded px-2 bg-[#f3f3f5] focus:outline-none focus:border-new-primary tabular-nums"
+          :placeholder="String(profileMin)"
+          :min="profileMin"
+          :max="profileMax"
+        >
+        <span class="text-gray-medium text-xs">–</span>
+        <input
+          v-model.number="rangeMax"
+          type="number"
+          step="any"
+          class="w-full h-7 text-xs border border-black/10 rounded px-2 bg-[#f3f3f5] focus:outline-none focus:border-new-primary tabular-nums"
+          :placeholder="String(profileMax)"
+          :min="profileMin"
+          :max="profileMax"
+        >
+      </div>
+      <div class="flex items-center gap-2">
+        <BrandedButton
+          color="primary"
+          size="2xs"
+          type="submit"
+        >
+          {{ t('Appliquer') }}
+        </BrandedButton>
+        <BrandedButton
+          color="tertiary"
+          size="2xs"
+          type="button"
+          keep-margins-even-without-borders
+          @click="clearRange"
+        >
+          {{ t('Effacer') }}
+        </BrandedButton>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { watchDebounced } from '@vueuse/core'
+import {
+  RiArrowUpLine,
+  RiArrowDownLine,
+  RiSearchLine,
+  RiCalendarLine,
+  RiCheckLine,
+} from '@remixicon/vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { useFormatTabular } from '../../functions/tabular'
+import BrandedButton from '../BrandedButton.vue'
+import ProgressBar from '../ProgressBar.vue'
+import type { TabularColumnProfile, ColumnType, ColumnFilters, SortConfig, SortDirection, BadgeStyle } from './types'
+
+const props = defineProps<{
+  column: string
+  columnType: ColumnType
+  columnProfile: TabularColumnProfile | null
+  nullPercent: string
+  totalLines: number
+  categoryBadgeStyles?: Record<string, BadgeStyle>
+  booleanCounts?: { trueCount: number, falseCount: number }
+}>()
+
+const sort = defineModel<SortConfig | null>('sort')
+const filters = defineModel<Record<string, ColumnFilters>>('filters', { default: () => ({}) })
+
+const { t } = useTranslation()
+const { formatNumber } = useFormatTabular()
+
+const search = ref('')
+
+// Numbers, years and dates are matched exactly (the API has no `contains` for
+// them), so the field offers the matching native picker instead of a text search.
+const searchField = computed(() => {
+  switch (props.columnType) {
+    case 'date': return { icon: RiCalendarLine, type: 'date', placeholder: '' }
+    case 'number':
+    case 'year': return { icon: RiSearchLine, type: 'number', placeholder: t('Rechercher...') }
+    default: return { icon: RiSearchLine, type: 'text', placeholder: t('Rechercher...') }
+  }
+})
+
+watchDebounced(search, (q) => {
+  const existing = filters.value[props.column] ?? {}
+  const operator = props.columnType === 'number' || props.columnType === 'year' || props.columnType === 'date' ? 'exact' : 'contains'
+  if (q) {
+    filters.value = { ...filters.value, [props.column]: { ...existing, [operator]: q } }
+  }
+  else {
+    const { [operator]: _, ...rest } = existing
+    filters.value = { ...filters.value, [props.column]: rest }
+  }
+}, { debounce: 300 })
+
+// Null filter helpers
+const nullFilter = computed(() => filters.value[props.column]?.null ?? null)
+
+function toggleNullFilter(mode: 'only' | 'exclude') {
+  const existing = filters.value[props.column] ?? {}
+  if (existing.null === mode) {
+    const { null: _, ...rest } = existing
+    filters.value = { ...filters.value, [props.column]: rest }
+  }
+  else {
+    filters.value = { ...filters.value, [props.column]: { ...existing, null: mode } }
+  }
+}
+
+// Categorical filter helpers
+const selectedValues = computed(() => filters.value[props.column]?.in ?? [])
+
+const filteredTops = computed(() => {
+  if (!props.columnProfile?.tops) return []
+  if (!search.value) return props.columnProfile.tops
+  const q = search.value.toLowerCase()
+  return props.columnProfile.tops.filter(top =>
+    (top.value ?? '').toLowerCase().includes(q),
+  )
+})
+
+function isValueSelected(value: string) {
+  return selectedValues.value.includes(value)
+}
+
+function toggleValue(value: string) {
+  const current = selectedValues.value
+  const next = current.includes(value)
+    ? current.filter(v => v !== value)
+    : [...current, value]
+  const existing = filters.value[props.column] ?? {}
+  filters.value = { ...filters.value, [props.column]: { ...existing, in: next } }
+}
+
+// Number range filter helpers
+const profileMin = computed(() => props.columnProfile?.min ?? 0)
+const profileMax = computed(() => props.columnProfile?.max ?? 100)
+const rangeMin = ref<number | undefined>(undefined)
+const rangeMax = ref<number | undefined>(undefined)
+
+function applyRange() {
+  const existing = filters.value[props.column] ?? {}
+  const next = { ...existing }
+  if (Number.isFinite(rangeMin.value)) {
+    next.min = rangeMin.value
+  }
+  else {
+    delete next.min
+  }
+  if (Number.isFinite(rangeMax.value)) {
+    next.max = rangeMax.value
+  }
+  else {
+    delete next.max
+  }
+  filters.value = { ...filters.value, [props.column]: next }
+}
+
+function clearRange() {
+  rangeMin.value = undefined
+  rangeMax.value = undefined
+  const existing = filters.value[props.column]
+  if (existing) {
+    const { min: _min, max: _max, ...rest } = existing
+    filters.value = { ...filters.value, [props.column]: rest }
+  }
+}
+
+// Boolean filter helpers
+const booleanFilter = computed<boolean | null>(() => {
+  const f = filters.value[props.column]
+  if (!f || f.exact == null) return null
+  return f.exact === 'true'
+})
+
+function toggleBooleanFilter(value: boolean) {
+  const existing = filters.value[props.column] ?? {}
+  const strValue = String(value)
+  if (existing.exact === strValue) {
+    const { exact: _, ...rest } = existing
+    filters.value = { ...filters.value, [props.column]: rest }
+  }
+  else {
+    filters.value = { ...filters.value, [props.column]: { ...existing, exact: strValue } }
+  }
+}
+
+function toggleSort(direction: SortDirection) {
+  if (sort.value?.column === props.column && sort.value.direction === direction) {
+    sort.value = null
+  }
+  else {
+    sort.value = { column: props.column, direction }
+  }
+}
+</script>

package/src/components/TabularExplorer/TabularFilterPopover.vue

@@ -0,0 +1,107 @@
+<template>
+  <Popover
+    ref="anchor"
+    v-slot="{ open }"
+    class="relative shrink-0"
+  >
+    <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'"
+    >
+      <RiFilterLine
+        class="size-3.5"
+        aria-hidden="true"
+      />
+      <span class="sr-only">{{ t('Filtrer') }} {{ column }}</span>
+    </PopoverButton>
+
+    <ClientOnly>
+      <Teleport to="#tooltips">
+        <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"
+          :data-testid="`column-filter-${column}`"
+        >
+          <!-- Title -->
+          <div class="flex items-center justify-between px-3 py-2 border-b border-black/10">
+            <p class="text-sm font-medium mb-0">
+              {{ t('Filtrer') }} : {{ column }}
+            </p>
+            <BrandedButton
+              v-if="hasColumnFilter"
+              color="tertiary"
+              size="2xs"
+              :icon="RiCloseLine"
+              @click="clearColumnFilter"
+            >
+              {{ t('Effacer') }}
+            </BrandedButton>
+          </div>
+
+          <TabularFilterContent
+            v-model:sort="sort"
+            v-model:filters="filters"
+            :column="column"
+            :column-type="columnType"
+            :column-profile="columnProfile"
+            :null-percent="nullPercent"
+            :total-lines="totalLines"
+            :category-badge-styles="categoryBadgeStyles"
+            :boolean-counts="booleanCounts"
+          />
+        </PopoverPanel>
+      </Teleport>
+    </ClientOnly>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue'
+import { flip, shift, autoUpdate, useFloating } from '@floating-ui/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'
+import ClientOnly from '../ClientOnly.vue'
+import TabularFilterContent from './TabularFilterContent.vue'
+import type { TabularColumnProfile, ColumnType, ColumnFilters, SortConfig, BadgeStyle } from './types'
+
+const props = defineProps<{
+  column: string
+  columnType: ColumnType
+  columnProfile: TabularColumnProfile | null
+  nullPercent: string
+  totalLines: number
+  categoryBadgeStyles?: Record<string, BadgeStyle>
+  booleanCounts?: { trueCount: number, falseCount: number }
+}>()
+
+const sort = defineModel<SortConfig | null>('sort')
+const filters = defineModel<Record<string, ColumnFilters>>('filters', { default: () => ({}) })
+
+const { t } = useTranslation()
+
+// 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))
+
+function clearColumnFilter() {
+  const { [props.column]: _, ...rest } = filters.value
+  filters.value = rest
+}
+
+const { floatingStyles } = useFloating(anchorEl, panelEl, {
+  placement: 'bottom-start',
+  middleware: [flip(), shift()],
+  whileElementsMounted: autoUpdate,
+})
+</script>

package/src/components/TabularExplorer/types.ts

@@ -0,0 +1,86 @@
+/** Response from /api/resources/{rid}/data/ */
+export type TabularDataResponse = {
+  data: TabularRow[]
+  meta: {
+    page: number
+    page_size: number
+    total: number
+  }
+  links: {
+    profile: string
+    swagger: string
+    next: string | null
+    prev: string | null
+  }
+}
+
+export type TabularRow = Record<string, unknown> & { __id: number }
+
+/** Response from /api/resources/{rid}/profile/ */
+export type TabularProfileResponse = {
+  profile: TabularProfile
+  deleted_at: string | null
+  dataset_id: string
+  indexes: null
+}
+
+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
+}
+
+export type TabularColumnInfo = {
+  score: number
+  format: string
+  python_type: string
+}
+
+export type TabularColumnProfile = {
+  tops: TabularTopValue[]
+  nb_distinct: number
+  nb_missing_values: number
+  min?: number | string
+  max?: number | string
+  std?: number
+  mean?: number
+}
+
+export type TabularTopValue = {
+  value: string
+  count: number
+}
+
+export type ColumnType = 'number' | 'categorical' | 'text' | 'date' | 'boolean' | 'year'
+
+export type ColumnFilters = {
+  in?: string[]
+  exact?: string
+  min?: number
+  max?: number
+  contains?: string
+  null?: 'only' | 'exclude'
+}
+
+export type SortDirection = 'asc' | 'desc'
+
+export type SortConfig = {
+  column: string
+  direction: SortDirection
+}
+
+export type BadgeStyle = {
+  backgroundColor: string
+  color: string
+}

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),
   }
 }