code_public/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(clustering): dégradé HSL multi-stop basé sur le score de non-humanité

Browse Source 
Remplace la palette par index par un dégradé continu HSL :
- risk=0.0  → hue 220° (bleu froid   — humain légitime)
- risk=0.25 → hue 165° (cyan-vert    — légèrement suspect)
- risk=0.50 → hue 110° (vert-jaune   — comportement mixte)
- risk=0.75 → hue  55° (jaune-orange — probable bot)
- risk=1.0  → hue   0° (rouge vif    — bot confirmé)

Saturation : 70%→90%, Lightness : 58%→48% (couleur plus intense = plus alarmant)

Légende : barre de dégradé 'Humain ← → Bot' avec stops HSL alignés

Suppression de spread_clusters (chevauchement des zones autorisé)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
SOC Analyst
2026-03-19 14:23:27 +01:00
parent 08d003a050
commit 2f73860cc8
3 changed files with 49 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/components/ClusteringView.tsx
View File

@ -519,20 +519,19 @@ export default function ClusteringView() {
style={{ width: '100%', height: '100%' }}
controller={true}
>
{/* Légende overlay */}
<div style={{ position: 'absolute', bottom: 16, left: 16, pointerEvents: 'all' }}>
<div className="bg-black/70 rounded-lg p-2 text-xs flex flex-col gap-1">
<div className="text-white/50 text-[10px] uppercase tracking-wide mb-1">Clusters</div>
{data?.nodes?.slice(0, 6).map((n) => (
<div key={n.id} className="flex items-center gap-2">
<span className="w-3 h-3 rounded-full flex-shrink-0" style={{ background: n.color }} />
<span className="text-white/70 truncate max-w-[120px]">{n.label}</span>
</div>
))}
{(data?.nodes?.length ?? 0) > 6 && (
<div className="text-white/30 text-[10px]">+{(data?.nodes?.length ?? 0) - 6} autres…</div>
)}
<div className="mt-1 pt-1 border-t border-white/10 text-white/40 text-[10px] cursor-help" title={TIPS.features_31}>
{/* Légende overlay — gradient non-humanité */}
<div style={{ position: 'absolute', bottom: 16, left: 16, pointerEvents: 'none' }}>
<div className="bg-black/70 rounded-lg p-2 text-xs flex flex-col gap-1.5">
<div className="text-white/50 text-[10px] uppercase tracking-wide">Non-humanité</div>
{/* Barre de dégradé bleu → rouge */}
<div className="relative w-28 h-3 rounded-full overflow-hidden"
style={{ background: 'linear-gradient(to right, hsl(220,70%,58%), hsl(165,78%,53%), hsl(110,82%,52%), hsl(55,86%,52%), hsl(0,90%,48%)' }}>
</div>
<div className="flex justify-between w-28 text-[9px] text-white/50">
<span>Humain</span>
<span>Bot</span>
</div>
<div className="mt-0.5 pt-1 border-t border-white/10 text-white/40 text-[10px] cursor-help" title={TIPS.features_31}>
30 features · PCA 2D ⓘ
</div>
</div>