Liez les graphes pour créer des tableaux de bord navigables et des connexions logiques

• Graphe : L'ensemble complet des données, incluant metadata, le tableau de nœuds, le tableau d'arêtes, et éventuellement l'état de disposition ou de vue.
• Nœud : Un sommet avec un id obligatoire plus des attributs optionnels comme label, type, size, color, et des coordonnées. Les nœuds peuvent également inclure un champ info Markdown ou des propriétés personnalisées utilisées par les intégrations.
• Arête : Une relation avec les identifiants de nœuds source et target, et optionnellement label, type, weight, et des métadonnées de style.
• Conteneur : Un nœud qui regroupe des éléments connexes. Les conteneurs peuvent être imbriqués et servent souvent de limites visuelles ou sémantiques.

Quantickle’s internal graph JSON is a flattened structure with nodes and edges arrays. Container relationships and classes are preserved as node metadata.

Formats d'import et d'export

Quantickle accepte plusieurs formats d'import depuis Fichier → Importer des données et depuis les intégrations automatisées. Chaque importateur alimente le même pipeline de graphe utilisé lors de la sauvegarde des fichiers de projet .qut, donc les structures ci-dessous représentent également les formes d'export.

Imports CSV

L'importateur CSV reconnaît deux dispositions :

1. Sections nœuds + arêtes – format d'export utilisé par Quantickle et l'option la plus sûre lors de la préparation manuelle des données. Le fichier contient un tableau de nœuds suivi d'une ligne vide et d'un tableau d'arêtes : ```csv node_id,node_label,node_type,node_size,node_color,node_x,node_y srv-1,Gateway,server,40,#2dd4bf,100,250 cli-1,Analyst,client,28,#38bdf8,320,210

   source,target,label,weight,type srv-1,cli-1,allows,1,connection

   root@kitploit:~

Les colonnes supplémentaires sont tolérées—l'importateur normalise les en-têtes tels que Node Label, nodeLabel, ou label, préserve toute valeur explicite de color/size et conserve les coordonnées lorsqu'elles sont fournies.

2. Liste d'arêtes avec attributs optionnels – CSV minimaux contenant au moins les colonnes source et target. Les colonnes optionnelles telles que label, type, weight, source_type, target_type, source_label, ou color sont fusionnées dans les nœuds et arêtes générés lorsqu'elles sont présentes : ```csv source,target,label,source_type,target_type srv-1,cli-1,allows,server,client srv-1,sensor-2,monitors,server,sensor
   root@kitploit:~

Quantickle analyse les en-têtes sans tenir compte de la casse, accepte à la fois les noms en snake_case et les noms avec espaces, et ignore automatiquement les lignes vides.

Liste d'arêtes (.edges)

Les paires d'arêtes simples séparées par des espaces sont prises en charge pour des graphes squelettes rapides. Les nœuds manquants sont créés automatiquement :```text srv-1 cli-1 srv-1 sensor-2

Fichiers hérités qui stockent les nœuds/arêtes à l'intérieur d'un objet data sont toujours acceptés—le chargeur les aplatit automatiquement et préserve les coordonnées, les classes et les métadonnées de hiérarchie de conteneurs.

Charges utiles API

Lors de l'échange de données avec l'API HTTP ou l'intégration Neo4j, envoyez la même forme aplatie utilisée par les fichiers .qut :```json { "nodes": [ { "id": "srv-1", "label": "Gateway", "type": "server", "size": 40 } ], "edges": [ { "id": "srv-1_cli-1", "source": "srv-1", "target": "cli-1", "label": "allows" } ] }

Disposition Timeline

La disposition personnalisée timeline positionne les nœuds le long d'un axe temporel. Vous pouvez personnaliser la barre centrale via l'option barStyle :```javascript cy.layout({ name: 'timeline', barStyle: { color: '#3498db', // bar color height: 15, // bar height in pixels className: 'my-timeline-bar' // optional CSS class } }).run();

Voir graphs/radial_time_rings.qut pour un petit exemple qui montre des bandes de temps concentriques groupées par métadonnées de cluster/type.

Disposition en nuage de points temporelle

Utilisez la disposition timeline-scatter pour mapper les horodatages directement aux positions x tout en distribuant les nœuds verticalement par similarité, catégorie ou communauté. Elle accepte des échelles ajustables pour les deux axes et un décalage optionnel pour réduire le chevauchement :```javascript cy.layout({ name: 'timeline-scatter', xScale: 0.5, // pixels per millisecond (auto-calculated when omitted) yScale: 60, // spread for similarity/category lanes jitter: 4, // optional per-node jitter to minimise overlap barStyle: { // applied when timeline bars already exist color: '#222', height: 12, className: 'scatter-bar' } }).run();

Select Disposition → Temporal Attraction - Time Weighted dans l'interface ou passez name: 'temporal-attraction' via la configuration de disposition CLI/API pour l'activer.

Intégrations

Quantickle peut extraire des données ou se synchroniser avec des systèmes externes. Les intégrations transitent généralement par le serveur car elles nécessitent des identifiants, des règles de proxy ou une persistance.

• Neo4j — stocker et interroger des instantanés de graphes ; voir NEO4J_INTEGRATION_README.md.
• SerpAPI — utilisé par le pipeline RAG pour la recherche web ; voir Clés API.
• VirusTotal — enrichir les nœuds avec des renseignements sur les domaines/IP/fichiers/URL et des graphes de relations.
• CIRCL-LU (flux MISP OSINT) — ingérer des événements MISP organisés issus du flux CIRCL-LU.
• Observateur OPML RSS — importer des listes de flux OPML et transformer les articles correspondants en graphes.

Flux de travail

🧭 Premiers pas dans l'application

• Lancez l'interface dans votre navigateur à l'adresse http://localhost:3000.
• Utilisez Fichier → Définir l'espace de travail pour choisir où sont stockés les fichiers du projet.
• Importez des jeux de données via Fichier → Importer des données, collez des données depuis le presse-papier, ou placez simplement des nœuds manuellement en utilisant le menu contextuel.
• Basculez entre les vues Graphe, Définitions de types et Tableau de données selon vos besoins.
• Ouvrez l'Éditeur de nœuds via Outils → Éditeur de nœuds pour une édition détaillée.
• Pour définir les valeurs par défaut du graphe, utilisez Outils → Éditeur de zone de graphe.

Pour des tutoriels plus détaillés et des captures d'écran, consultez le Guide d'utilisation.

Exportation et partage

• Sauvegardez au format .qut pour un instantané de projet haute fidélité (disposition, métadonnées, conteneurs).
• Exportez en CSV pour une interopérabilité avec les outils de tableur ou les pipelines de graphes.
• Exportez en HTML statique, PNG ou PDF pour des résultats prêts à être rapportés.

Initialisation

Quantickle s'initialise via le global window.QuantickleApp défini dans js/main.js. L'application appelle automatiquement window.QuantickleApp.init() lorsque le DOM est prêt.

Configuration

Paramètres de performance```javascript

// js/config.js const config = { performance: { nodeLimit: 1000, // Max nodes to render at once batchSize: 100, // Nodes to add per batch webgl: true, // Enable WebGL rendering hideEdgesOnViewport: false // Hide edges while dragging } }

La liste blanche de base se trouve dans config/proxy-allowlist.json. Vous devez fournir ce fichier (ou définir une variable d'environnement PROXY_ALLOWLIST séparée par des virgules avant de démarrer le serveur) ; sinon, le proxy enregistre une erreur de configuration fatale et rejette chaque requête avec HTTP 403.

Les hôtes spécifiques à l'intégration (pour les adaptateurs d'intégration backend comme OpenAI et VirusTotal) sont régis par config/integration-allowlist.json (ou INTEGRATION_ALLOWLIST). Au moment de l'exécution, les deux listes blanches sont fusionnées. Chaque entrée doit lister un hôte ou un motif générique que le proxy peut atteindre. Les motifs génériques utilisant * sont pris en charge n'importe où dans une entrée, donc *.example.com permet n'importe quel sous-domaine de example.com, et les masques comme news-* se comportent comme prévu. Les sous-domaines héritent également de l'entrée de leur domaine parent, donc ajouter example.com permet automatiquement www.example.com.

Un fichier de liste blanche minimal ressemble à :

Si vous préférez les variables d'environnement, définissez PROXY_ALLOWLIST="otx.alienvault.com,feeds.example.org" avant de lancer le serveur.

Lorsque le proxy transmet une requête, il envoie désormais un ensemble d'en-têtes similaires à ceux d'un navigateur (incluant les valeurs modernes User-Agent, Accept, Accept-Language et Sec-Fetch-* de Chrome) afin que les sites qui filtrent le contenu derrière des protections anti-bot répondent de la même manière qu'ils le feraient lors d'un chargement de page normal. N'importe lequel de ces en-têtes peut être remplacé en fournissant des surcharges x-proxy-<header> depuis la requête client si nécessaire.

Stockage

Quantickle conserve l'état du graphe dans le navigateur pendant que vous travaillez, puis le persiste lorsque vous exportez ou synchronisez.

• Stockage navigateur — les paramètres et clés API sont stockés localement dans le navigateur.
• Fichiers de projet (.qut) — sauvegardés dans votre dossier de travail pour des instantanés de graphe haute fidélité. Voir GRAPH_FILE_MANAGEMENT_README.md pour les règles du dossier de travail et le cycle de vie des fichiers.
• Neo4j — persistance optionnelle côté serveur pour la collaboration et la recherche, configurée via l'intégration Neo4j.

Structure du projet```

quantickle/ ├── assets/ # Static assets │ ├── backgrounds/ # Background graphics │ ├── icons/ # Mostly empty now; icons are colocated with node types │ ├── domains/ # Node type definitions │ ├── help/ # Help pages │ ├── examples/ # Example graphs │ └── css/ # Stylesheets referenced by index.html ├── config/ # Proxy allowlist ├── data_retrieval/ # SerpAPI/web search helpers used by the RAG pipeline ├── graphs/ # Workspace folder for bundled and test .qut graphs ├── js/ # Front-end source modules │ ├── main.js # Application bootstrap │ ├── ai-input-manager.js # Currently unused │ ├── api.js # HTTP client for server endpoints │ ├── graph.js # Graph rendering and management │ ├── graph-manager.js # High-level graph state orchestration │ ├── graph-reference-resolver.js # Normalization of graph references │ ├── layouts.js # Layout registration and options │ ├── 3d-globe-layout.js # 3D Layout │ ├── absolute-layout.js # Absolute coordinate layout │ ├── custom-layouts.js # Other custom layouts │ ├── aggressive-performance-fix.js # Aggressive Performance Fix for Large Graph Panning │ ├── non-invasive-performance-fix.js # Non-Invasive Performance Fix for Large Graphs │ ├── lod-system.js # Level of Detail (LOD) System │ ├── auto-refresh.js # Auto-refresh functionality when new data arrives │ ├── config.js # Default settings │ ├── domain-loader.js # Loading and managing domain-specific node type configurations │ ├── edge-editor.js # Editing edge styles │ ├── extensions.js # Loading and registration of Cytoscape extensions │ ├── integrations.js # Configuration and connection to external services │ ├── rag-pipeline.js # Handles AI-assisted data ingestion │ ├── secure-storage.js # Encrypts sensitive values in sessionStorage │ ├── source-editor.js # Editor for the JSON graph source │ ├── tables.js # Data table updates, filtering, and display │ ├── ui.js # User interface interactions and notifications │ ├── validation.js # Validation of all data inputs │ ├── workspace-manager.js # Workspace file functionality │ ├── utils.js # Shared browser utilities │ ├── integrations/ # Integration-specific helpers (MISP/CIRCL-LU, etc.) │ └── features/ # Feature modules (node editor, callouts, timeline, ...) ├── tests/ # Automated regression tests covering UI flows, imports, and APIs ├── utils/ # Node helpers (Neo4j client, readability shim, CLI scripts) ├── public/
│ ├── index.html # Static front-end │ └── favicon.ico # Main app icon ├── package.json # Node dependencies and scripts └── server.js # Express server exposing the HTTP API