Babar le 8 avril 2026 à 07:40

2026-04-08T07:40:31Z

← Version précédente		Version du 8 avril 2026 à 07:40
Ligne 11 :		Ligne 11 :
	'''Point important :''' DIOD Timeline Viewer est un fichier HTML autonome. Aucune installation requise, aucun compte à créer, aucune donnée n'est envoyée sur un serveur. Tout fonctionne directement dans votre navigateur.		'''Point important :''' DIOD Timeline Viewer est un fichier HTML autonome. Aucune installation requise, aucun compte à créer, aucune donnée n'est envoyée sur un serveur. Tout fonctionne directement dans votre navigateur.

	'''Version actuelle :''' v1.0 — '''Lien :''' [https://diod.m82-project.org/diod-~~timeline~~-~~viewer~~.html Accéder à l'outil]		'''Version actuelle :''' v1.0 — '''Lien :''' [https://diod.m82-project.org/diod-viewer-tool.html Accéder à l'outil]

	----		----

Babar : Page créée avec « = DIOD Timeline Viewer = == Qu'est-ce que c'est ? == '''DIOD Timeline Viewer''' est un outil web de visualisation comparative des opérations d'influence numérique documentées avec le DIOD Input Tool. Il permet aux analystes et chercheurs de superposer plusieurs incidents sur une même frise chronologique et d'en comparer les structures. '''Le principe :''' L'outil lit les fiches JSON produites par le DIOD Input Tool et les affiche sous forme de swimlanes para... »

2026-04-08T07:36:14Z

Page créée avec « = DIOD Timeline Viewer = == Qu'est-ce que c'est ? == '''DIOD Timeline Viewer''' est un outil web de visualisation comparative des opérations d'influence numérique documentées avec le DIOD Input Tool. Il permet aux analystes et chercheurs de superposer plusieurs incidents sur une même frise chronologique et d'en comparer les structures. '''Le principe :''' L'outil lit les fiches JSON produites par le DIOD Input Tool et les affiche sous forme de swimlanes para... »

Nouvelle page

= DIOD Timeline Viewer =
== Qu'est-ce que c'est ? ==
'''DIOD Timeline Viewer''' est un outil web de visualisation comparative des opérations d'influence numérique documentées avec le DIOD Input Tool. Il permet aux analystes et chercheurs de superposer plusieurs incidents sur une même frise chronologique et d'en comparer les structures.

'''Le principe :''' L'outil lit les fiches JSON produites par le DIOD Input Tool et les affiche sous forme de swimlanes parallèles. Chaque ligne correspond à une opération. L'approche reste centrée sur les incidents observables, conformément à la méthodologie M82_project.

L'outil mobilise les mêmes cadres analytiques que le DIOD Input Tool :
* Le '''Diamond Model''' affiche les 4 dimensions de chaque opération (Adversaire, Infrastructure, Capacités, Cible) sous forme de diagramme SVG
* Le framework '''DISARM''' et la méthodologie '''DIMA''' sont représentés dans une matrice de comparaison croisée entre opérations

'''Point important :''' DIOD Timeline Viewer est un fichier HTML autonome. Aucune installation requise, aucun compte à créer, aucune donnée n'est envoyée sur un serveur. Tout fonctionne directement dans votre navigateur.

'''Version actuelle :''' v1.0 — '''Lien :''' [https://diod.m82-project.org/diod-timeline-viewer.html Accéder à l'outil]

----
== Pourquoi utiliser cet outil ? ==
'''Comparaison multi-incidents'''
 Visualisez jusqu'à 20 opérations simultanément sur une frise chronologique commune. Identifiez les chevauchements temporels, les séquences d'événements et les patterns récurrents entre incidents.

'''Filtrage et recherche'''
 Filtrez les opérations par pays d'origine, type d'attaquant, technique DISARM ou statut. La recherche textuelle couvre les labels, événements, narratifs et mots-clés.

'''Visualisation Diamond Model comparative'''
 Le panneau Diamond Model affiche toutes les opérations filtrées côte à côte sous forme de cartes SVG. Comparez en un coup d'œil les adversaires, cibles, infrastructures et capacités.

'''Matrice de techniques'''
 Le panneau Matrice croise techniques DISARM ou DIMA avec les opérations chargées. Les points colorés indiquent quelles techniques sont partagées entre plusieurs incidents.

'''Jalons contextuels'''
 Ajoutez des jalons datés (élections, publications, événements géopolitiques) superposés à la timeline pour contextualiser les opérations.

'''Outil évolutif'''
 L'outil s'améliore grâce aux retours des utilisateurs. Vous pouvez proposer de nouvelles fonctionnalités ou de nouveaux champs selon vos besoins terrain.

----
== Comment ça fonctionne ? ==
L'outil se compose de 6 fonctionnalités principales accessibles depuis la barre d'outils :

=== 📥 Importer des données ===
Deux modes d'import sont disponibles :

'''Import fichier local :'''
* Glisser-déposer un ou plusieurs fichiers JSON sur la zone d'import
* Ou cliquer pour parcourir et sélectionner les fichiers
* Formats acceptés : fichiers .json générés par le DIOD Input Tool (v7.0+)
* Limite : 20 opérations simultanées, 10 Mo par fichier
* En cas de doublon (même code_operation), une confirmation de remplacement est proposée

'''Import depuis un dépôt Git :'''
* Saisir l'URL brute d'un fichier JSON hébergé sur GitHub ou GitLab
* Domaines autorisés : raw.githubusercontent.com, gitlab.com
* Timeout automatique après 10 secondes
* L'URL source est tracée et affichée dans la fiche de l'opération

=== 🕐 Timeline comparative ===
La zone centrale affiche les opérations sous forme de swimlanes horizontales :

'''Lanes (lignes d'opération) :'''
* Chaque opération occupe une lane colorée (8 couleurs distinctes, rotation automatique)
* La barre d'activité matérialise la durée de l'opération (date_debut → date_fin ou date du dernier événement)
* Les opérations sans date de fin sont affichées comme en cours jusqu'à la date du dernier événement documenté
* Réorganisation par glisser-déposer pour modifier l'ordre d'affichage

'''Marqueurs d'événements :'''
* Chaque événement de la chronologie est représenté par un point sur la lane
* Cercle plein : observation, détection, publication, action
* Cercle vide : fin d'incident, analyse, attribution
* Au survol : bulle d'information avec date, description et label de l'événement
* Au clic : modale de détail avec navigation précédent / suivant entre les événements

'''Axe temporel :'''
* Graduation automatique selon la durée totale des opérations chargées (jours, semaines, quinzaines, mois, bimestres)
* Alignement sur les lundis pour les intervalles hebdomadaires, sur le 1er et 15 du mois pour les intervalles plus longs

'''Jalons :'''
* Lignes verticales datées superposées à toutes les lanes
* Couleur et label personnalisables
* Ajout et suppression depuis le panneau Jalons

=== 🔍 Filtres et zoom ===
La barre de filtres permet de restreindre les opérations affichées :

* Filtre par pays d'origine de l'attaquant
* Filtre par type d'attaquant
* Filtre par technique DISARM (premier code détecté par opération)
* Filtre par statut (en cours, terminée, en analyse, archivée)
* Recherche textuelle libre (labels, événements, narratifs, mots-clés)
* Zoom temporel : restreindre la plage affichée avec des dates de début et fin
* Chips de filtres actifs : affichage et suppression individuelle
* Compteur opérations visibles / total chargé
* Bouton Reset pour réinitialiser tous les filtres en un clic

=== 🔷 Diamond Model ===
Le panneau Diamond Model s'ouvre depuis la barre d'outils :

* Affichage de toutes les opérations filtrées en cartes SVG côte à côte
* Chaque carte contient le diagramme complet avec les 4 sommets : Adversaire (haut), Cible (bas), Infrastructure (gauche), Capacités (droite)
* Bordure supérieure colorée selon la couleur de l'opération dans la timeline
* Code de l'opération affiché en titre au-dessus du diagramme
* Scroll horizontal automatique si le nombre de cartes dépasse la largeur disponible
* Les textes longs sont découpés intelligemment sur plusieurs lignes (max 3 lignes par sommet)

=== 📊 Matrice de techniques ===
Le panneau Matrice s'ouvre depuis la barre d'outils :

* Deux onglets : DISARM et DIMA
* Lignes : techniques identifiées dans au moins une des opérations chargées
* Colonnes : opérations (code_operation), avec en-tête coloré selon la palette de la timeline
* Point coloré : la technique est documentée dans cette opération
* Case vide : technique absente de cette opération
* En-têtes de colonnes pivotés verticalement si plus de 4 opérations (gain de place)
* Scroll horizontal automatique pour les grandes matrices

=== 📷 Export PNG ===
Le bouton Export PNG dans la barre d'outils déclenche la capture de la zone timeline :

* Capture de la timeline complète (toutes les lanes visibles, axe temporel, jalons)
* Résolution doublée (scale 2x) pour une qualité optimale
* Fond sombre préservé (#0F1419)
* Téléchargement automatique au format PNG avec nom horodaté (DIOD-Timeline-AAAA-MM-JJ.png)
* Toast de confirmation à la fin de l'export

----
== Panneau de détail d'une opération ==
Un clic sur une carte de détail (zone sous la timeline) ouvre la modale complète de l'opération :

* En-tête coloré avec code, statut, dates, attribution et badge source (Local / Git)
* Lien cliquable vers la source Git si l'opération a été importée depuis un dépôt
* Bouton d'accès direct au DIOD Input Tool
* Sections structurées selon le Diamond Model :
** '''Adversaire(s) :''' nom, type, pays, niveau d'attribution, rôle, description
** '''Cible(s) :''' pays, région, type de cible, description
** '''Infrastructure :''' canaux de diffusion et relais avec ampleur et rôle
** '''Capacités :''' techniques DISARM et DIMA sous forme de badges cliquables avec description
* Sections complémentaires : Objectifs, Narratifs (avec véracité et thèmes), Leviers psychologiques, Chronologie complète, Formats de contenu, Documents et sources, Mots-clés, Commentaires
* Fermeture par clic sur le fond, bouton X ou touche Échap

----
== Sécurité ==
L'outil applique les mêmes mesures de sécurité que le DIOD Input Tool v7.0 :

* '''Sanitization des données importées :''' validation de schéma strict, extraction de texte pur via DOMParser, regex de fallback renforcée, encodage des 5 entités HTML critiques
* '''Validation des dates :''' regex ISO 8601 stricte avec vérification des bornes (mois, jours, années 1900-2100)
* '''Protection prototype pollution :''' clés interdites (__proto__, constructor, prototype)
* '''Validation des URL Git :''' protocole HTTPS obligatoire, liste blanche de domaines, extension .json requise
* '''Content Security Policy (CSP) :''' politique stricte, sans trusted-types (incompatible html2canvas)
* '''Anti-clickjacking :''' détection d'iframe et blocage immédiat
* '''Vérification d'intégrité des CDN :''' hash SRI sur React 18.3.1 et ReactDOM 18.3.1 ; vérification runtime pour Tailwind (JIT, incompatible SRI par design)
* '''Limites de charge :''' 20 opérations maximum, 10 Mo par fichier, 100 éléments par tableau, 20 jalons maximum
* '''Error Boundary React :''' capture des erreurs de rendu avec affichage d'un message informatif et bouton de rechargement

----
== Compatibilité ==
* Navigateurs modernes : Chrome, Firefox, Safari, Edge (versions récentes)
* Aucune installation, aucun serveur, aucun backend
* Données conservées uniquement en mémoire vive pendant la session — aucune persistance locale ni envoi réseau (hors import Git)
* Interface disponible en français et en anglais (bascule depuis la barre d'outils)

----
== Liens utiles ==
* [https://diod.m82-project.org/index.php/DIOD_Input_Tool DIOD Input Tool]
* [https://diod.m82-project.org/index.php/Accueil Wiki DIOD]
* [https://github.com/DISARMFoundation/DISARMframeworks Framework DISARM]
* [https://diod.m82-project.org/index.php/Matrice_DIMA Matrice DIMA]

----
''Généré par DIOD — Digital Influence Operations Database — M82_project''
[[Catégorie:DIOD]]
[[Catégorie:Outils]]
[[Catégorie:Influence informationnelle]]

DIOD Viewer Tool - Historique des versions

Babar le 8 avril 2026 à 07:40