Visualisation Détaillée des Datasets

Vue d’ensemble

La fonctionnalité de visualisation détaillée des datasets offre une interface complète et moderne similaire à Kaggle pour explorer en profondeur les caractéristiques d’un dataset. Cette interface provide un "effet wow" avec des informations riches, des graphiques interactifs et une présentation visuelle soignée.

Architecture

Composants Frontend

DatasetDetailComponent

Composant principal de visualisation situé dans frontend/src/app/pages/datasets/dataset-detail.component.ts.

Responsabilités : - Chargement des données détaillées du dataset - Gestion de l’interface utilisateur avec onglets - Affichage des métriques de qualité et alertes - Navigation entre les différentes vues

Données chargées : - Dataset complet avec métadonnées étendues - Aperçu des données avec statistiques - Métriques de qualité calculées - Datasets similaires - Analyses de distribution et corrélations

Structure des Onglets

Onglet Description

Vue d’ensemble

Statistiques générales, informations métier, métriques de qualité, conformité éthique

Fichiers et Structure

Liste des fichiers du dataset, détails des colonnes, métadonnées techniques

Aperçu des Données

Échantillon de données tabulaires, statistiques descriptives par colonne

Analytics

Corrélations entre features, patterns de données manquantes, distribution des classes

Modèles de Données

Interfaces TypeScript Étendues

// Interface principale pour la vue détaillée
interface DatasetDetailView extends Dataset {
  files: DatasetFileMetadata[];
  quality_metrics: DatasetQualityMetrics;
  distribution_analysis: DataDistributionAnalysis;
  usage_examples?: UsageExample[];
  related_datasets?: RelatedDataset[];
  download_stats?: DownloadStats;
}

// Métriques de qualité
interface DatasetQualityMetrics {
  overall_score: number;
  completeness: number;
  consistency: number;
  accuracy: number;
  timeliness: number;
  ethical_compliance: number;
  missing_data_impact: number;
  outliers_percentage: number;
  pii_exposure_risk: number;
}

// Aperçu des données
interface DatasetPreview {
  dataset_id: string;
  file_name: string;
  sample_data: { [column: string]: any }[];
  total_rows: number;
  columns_info: ColumnInfo[];
}

Services API

DatasetService - Nouvelles Méthodes

// Récupération des détails complets
getDatasetDetails(id: string): Observable<DatasetDetailView>

// Aperçu des données
getDatasetPreview(id: string, fileId?: string, limit?: number): Observable<DatasetPreview>

// Métriques de qualité
getDatasetQualityMetrics(id: string): Observable<DatasetQualityMetrics>

// Analyse de distribution
getDataDistributionAnalysis(id: string): Observable<DataDistributionAnalysis>

// Statistiques des colonnes
getColumnStatistics(datasetId: string, fileId: string): Observable<ColumnStatistics[]>

// Datasets similaires
getSimilarDatasets(id: string, limit?: number): Observable<Dataset[]>

Interface Utilisateur

Design System

Header Héroïque

  • Gradient de fond avec pattern de données

  • Informations principales du dataset en évidence

  • Score de qualité circulaire avec animation

  • Boutons d’action (télécharger, favoris, partager)

  • Tags pour domaines et tâches ML

Alertes de Qualité

  • Système d’alertes contextuelles basé sur les métriques

  • Niveaux de sévérité (info, warning, error)

  • Recommandations actionables

  • Calcul automatique basé sur :

    • Complétude des données (< 80%)

    • Pourcentage de valeurs aberrantes (> 5%)

    • Risque d’exposition PII (> 30%)

Cartes d’Information

Design cohérent avec Material Design : - Cartes avec élévation et effets hover - Progressbars pour les métriques - Indicateurs booléens avec icônes - Grilles responsives

Responsive Design

Breakpoint Adaptations

Mobile (< 768px)

Layout vertical, hero simplifié, grilles 1 colonne

Tablet (768-1024px)

Grilles 2 colonnes, navigation conservée

Desktop (> 1024px)

Layout complet, grilles 3 colonnes maximum

Fonctionnalités Avancées

Aperçu Interactif des Données

Tableau de Données

  • Affichage limité aux 50 premières lignes

  • Colonnes scrollables horizontalement

  • Formatage automatique des valeurs

  • Indicateur du nombre total de lignes

Statistiques par Colonne

  • Type de données détecté

  • Statistiques descriptives (moyenne, écart-type, percentiles)

  • Valeurs manquantes et uniques

  • Exemples de valeurs sous forme de chips

Analytics Avancés

Corrélations entre Features

  • Tableau des corrélations les plus fortes (> 0.1)

  • Barres de progression pour visualiser l’intensité

  • Types de corrélation (Pearson, Spearman, Kendall)

  • Classification par force (forte > 0.7, moyenne > 0.3)

Patterns de Données Manquantes

  • Analyse des patterns de valeurs manquantes

  • Pourcentage et nombre d’occurrences

  • Tri par fréquence décroissante

Distribution des Classes

  • Graphiques en barres pour les variables catégorielles

  • Identification automatique de la variable cible

  • Détection des déséquilibres de classes

Recommandations de Datasets

Algorithme de Similarité

  • Comparaison basée sur :

    • Domaines d’application

    • Types de tâches ML

    • Taille et structure des données

    • Métriques de qualité

  • Score de similarité calculé

  • Raison de la recommandation explicite

Navigation et Routing

Route Configuration

// Dans datasets.routes.ts
{
  path: ':id',
  component: DatasetDetailComponent,
  data: {
    title: 'Détail Dataset',
    urls: [
      { title: 'Accueil', url: '/starter' },
      { title: 'Datasets', url: '/datasets' },
      { title: 'Détail' },
    ],
  },
}

Intégration avec Dataset Cards

Le bouton "Voir" dans les cartes de datasets navigue automatiquement vers la page de détail :

onViewDataset(datasetId: string): void {
  this.router.navigate(['/datasets', datasetId]);
}

Performance et Optimisations

Chargement des Données

Stratégie de Chargement

  • Chargement parallèle de toutes les données via forkJoin

  • Gestion d’erreurs gracieuse avec fallbacks

  • Indicateurs de chargement appropriés

Gestion d’Erreurs

// Chargement résilient avec fallbacks
forkJoin({
  dataset: this.datasetService.getDatasetDetails(id).pipe(
    catchError(error => of(null))
  ),
  preview: this.datasetService.getDatasetPreview(id).pipe(
    catchError(error => of(null))
  )
})

Optimisations d’Affichage

  • Limitation automatique des colonnes affichées (8 max)

  • Pagination des données d’aperçu (50 lignes max)

  • Lazy loading des onglets avec matTabContent

  • Debounce pour les interactions utilisateur

Internationalisation

Clés de Traduction

Structure organisée dans assets/i18n/ :

{
  "DATASET_DETAIL": {
    "TABS": {
      "OVERVIEW": "Vue d'ensemble",
      "FILES_STRUCTURE": "Fichiers et Structure",
      "DATA_PREVIEW": "Aperçu des Données",
      "ANALYTICS": "Analytics"
    },
    "QUALITY_ALERTS": {
      "TITLE": "Alertes de Qualité",
      "MISSING_DATA": "Données manquantes importantes"
    }
  }
}

Support Multi-langue

  • Français et anglais intégralement supportés

  • Formatage automatique des nombres selon la locale

  • Messages d’erreur localisés

Intégration Backend

Endpoints API Requis

Endpoint Méthode Description

/datasets/{id}/details

GET

Données complètes du dataset avec métriques

/datasets/{id}/preview

GET

Aperçu des données avec statistiques

/datasets/{id}/quality

GET

Métriques de qualité détaillées

/datasets/{id}/distribution

GET

Analyse de distribution et corrélations

/datasets/{id}/files/{fileId}/columns/stats

GET

Statistiques détaillées par colonne

/datasets/{id}/similar

GET

Datasets similaires recommandés

Format de Réponse

{
  "dataset": {
    "id": "uuid",
    "dataset_name": "EdNet Dataset",
    "files": [...],
    "quality_metrics": {
      "overall_score": 0.85,
      "completeness": 0.92,
      "ethical_compliance": 0.78
    },
    "distribution_analysis": {
      "correlations": [...],
      "missing_patterns": [...]
    }
  }
}

Tests et Validation

Tests Unitaires

Tests à implémenter pour : - Chargement des données et gestion d’erreurs - Calcul des alertes de qualité - Navigation entre onglets - Formatage des données

Tests d’Intégration

  • Navigation depuis la liste des datasets

  • Chargement complet d’une page de détail

  • Interaction avec l’API backend

Tests d’Accessibilité

  • Navigation au clavier

  • Lecteurs d’écran

  • Contraste et lisibilité

  • Focus et états visuels

Évolutions Futures

Fonctionnalités Prévues

Graphiques Interactifs

  • Histogrammes des distributions

  • Matrices de corrélation visuelles

  • Graphiques de dispersion

  • Heatmaps de données manquantes

Comparaison de Datasets

  • Interface de comparaison côte-à-côte

  • Métriques comparatives

  • Recommandations de fusion/combinaison

Export et Partage

  • Export des métriques en PDF/Excel

  • Liens de partage

  • Intégration avec outils externes

Intégrations Backend

ML Pipeline Integration

  • Lancement direct de pipelines depuis la page de détail

  • Configuration automatique basée sur les caractéristiques

  • Historique des entraînements

XAI Engine Integration

  • Prévisualisation des explications possibles

  • Configuration des méthodes XAI recommandées

  • Analyses de feature importance

Maintenance

Logs et Monitoring

  • Tracking des vues de datasets

  • Métriques de performance de chargement

  • Erreurs d’affichage et API

Mise à jour des Données

  • Cache des métriques de qualité

  • Synchronisation des aperçus de données

  • Invalidation automatique

Cette fonctionnalité represent un élément clé de l’expérience utilisateur ExAI, offrant une exploration riche et intuitive des datasets disponibles avec un design moderne et des informations actionables.