Skip to content

Commit 45d9eb8

Browse files
author
m.buchhorn-roth
committed
fix(graph): larger legend text and clearer relation direction
- enlarge Knotentypen legend typography and marker dots - strengthen relationship line contrast and width - increase arrow size/position and set bright directional arrow color - increase relation label size and contrast - increase directional particles for clearer flow
1 parent b3521f7 commit 45d9eb8

1 file changed

Lines changed: 48 additions & 39 deletions

File tree

‎src/components/RELIEFKnowledgeGraph3D.tsx‎

Lines changed: 48 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -546,42 +546,49 @@ export function RELIEFKnowledgeGraph3D() {
546546
return 'rgba(100, 116, 139, 0.08)'
547547
}
548548
switch (link.type) {
549-
case 'SR_CONTAINS': return 'rgba(59, 130, 246, 0.5)'
550-
case 'SR_REALIZED_BY': return 'rgba(16, 185, 129, 0.5)'
551-
case 'SR_REFERENCES': return 'rgba(139, 92, 246, 0.4)'
552-
case 'SR_SEQUENCE': return 'rgba(34, 197, 94, 0.6)'
553-
case 'SR_BETRIFFT': return 'rgba(244, 114, 182, 0.7)'
554-
case 'SR_GEHOERT_ZU': return 'rgba(244, 114, 182, 0.4)'
555-
case 'SR_EINGEREICHT': return 'rgba(251, 191, 36, 0.5)'
556-
case 'SR_FEHLT': return 'rgba(239, 68, 68, 0.8)'
557-
case 'SR_HAT_PROBLEM': return 'rgba(249, 115, 22, 0.7)'
558-
case 'SR_LOEST': return 'rgba(34, 197, 94, 0.8)'
559-
case 'SR_COMPLIANT': return 'rgba(6, 182, 212, 0.5)'
560-
case 'SR_UNTERSTUETZT': return 'rgba(34, 197, 94, 0.5)'
561-
case 'SR_DEFINIERT_DURCH': return 'rgba(99, 102, 241, 0.5)'
562-
case 'SR_EREIGNIS': return 'rgba(168, 85, 247, 0.6)'
563-
case 'SR_DURCHLAEUFT': return 'rgba(16, 185, 129, 0.6)'
564-
case 'SR_HAT': return 'rgba(239, 68, 68, 0.4)'
565-
case 'SR_IN_AKTE': return 'rgba(251, 191, 36, 0.3)'
566-
case 'SR_NACHWEIS': return 'rgba(251, 191, 36, 0.6)'
567-
case 'SR_PRUEFT': return 'rgba(239, 68, 68, 0.6)'
568-
case 'SR_APPLIES_TO': return 'rgba(6, 182, 212, 0.4)'
569-
default: return 'rgba(148, 163, 184, 0.3)'
549+
case 'SR_CONTAINS': return 'rgba(59, 130, 246, 0.88)'
550+
case 'SR_REALIZED_BY': return 'rgba(16, 185, 129, 0.88)'
551+
case 'SR_REFERENCES': return 'rgba(139, 92, 246, 0.84)'
552+
case 'SR_SEQUENCE': return 'rgba(34, 197, 94, 0.92)'
553+
case 'SR_BETRIFFT': return 'rgba(244, 114, 182, 0.92)'
554+
case 'SR_GEHOERT_ZU': return 'rgba(244, 114, 182, 0.84)'
555+
case 'SR_EINGEREICHT': return 'rgba(251, 191, 36, 0.9)'
556+
case 'SR_FEHLT': return 'rgba(239, 68, 68, 0.96)'
557+
case 'SR_HAT_PROBLEM': return 'rgba(249, 115, 22, 0.94)'
558+
case 'SR_LOEST': return 'rgba(34, 197, 94, 0.94)'
559+
case 'SR_COMPLIANT': return 'rgba(6, 182, 212, 0.88)'
560+
case 'SR_UNTERSTUETZT': return 'rgba(34, 197, 94, 0.88)'
561+
case 'SR_DEFINIERT_DURCH': return 'rgba(99, 102, 241, 0.88)'
562+
case 'SR_EREIGNIS': return 'rgba(168, 85, 247, 0.9)'
563+
case 'SR_DURCHLAEUFT': return 'rgba(16, 185, 129, 0.9)'
564+
case 'SR_HAT': return 'rgba(239, 68, 68, 0.84)'
565+
case 'SR_IN_AKTE': return 'rgba(251, 191, 36, 0.84)'
566+
case 'SR_NACHWEIS': return 'rgba(251, 191, 36, 0.9)'
567+
case 'SR_PRUEFT': return 'rgba(239, 68, 68, 0.9)'
568+
case 'SR_APPLIES_TO': return 'rgba(6, 182, 212, 0.84)'
569+
default: return 'rgba(148, 163, 184, 0.72)'
570570
}
571571
}, [isLinkConnectedToSelected, selectedNode])
572572

573+
const linkDirectionalArrowColor = useCallback((link: GraphLink) => {
574+
if (selectedNode && !isLinkConnectedToSelected(link)) {
575+
return 'rgba(148, 163, 184, 0.2)'
576+
}
577+
return 'rgba(248, 250, 252, 0.98)'
578+
}, [isLinkConnectedToSelected, selectedNode])
579+
573580
const linkWidth = useCallback((link: GraphLink) => {
574-
if (!selectedNode) return 1.8
575-
return isLinkConnectedToSelected(link) ? 3.8 : 0.5
581+
if (!selectedNode) return 2.9
582+
return isLinkConnectedToSelected(link) ? 5.2 : 0.6
576583
}, [isLinkConnectedToSelected, selectedNode])
577584

578585
const linkDirectionalParticles = useCallback((link: GraphLink) => {
579586
if (selectedNode && !isLinkConnectedToSelected(link)) return 0
580-
return link.type === 'SR_SEQUENCE' ? 3
581-
: link.type === 'SR_LOEST' ? 3
582-
: link.type === 'SR_FEHLT' ? 2
583-
: link.type === 'SR_HAT_PROBLEM' ? 2
584-
: 1
587+
return link.type === 'SR_SEQUENCE' ? 4
588+
: link.type === 'SR_LOEST' ? 4
589+
: link.type === 'SR_FEHLT' ? 3
590+
: link.type === 'SR_HAT_PROBLEM' ? 3
591+
: 2
585592
}, [isLinkConnectedToSelected, selectedNode])
586593

587594
const linkThreeObject = useCallback((link: GraphLink) => {
@@ -594,9 +601,9 @@ export function RELIEFKnowledgeGraph3D() {
594601

595602
const label = new SpriteText(relationText) as any
596603
label.color = '#f8fafc'
597-
label.textHeight = selectedNode ? 3.2 : 2.4
598-
label.backgroundColor = selectedNode ? 'rgba(15, 23, 42, 0.96)' : 'rgba(15, 23, 42, 0.72)'
599-
label.padding = selectedNode ? [1.8, 3.6] : [1.2, 2.6]
604+
label.textHeight = selectedNode ? 4.5 : 3.6
605+
label.backgroundColor = selectedNode ? 'rgba(15, 23, 42, 0.98)' : 'rgba(15, 23, 42, 0.9)'
606+
label.padding = selectedNode ? [2.2, 4.2] : [1.8, 3.4]
600607
label.borderRadius = 2
601608
if (label.material) {
602609
label.material.depthTest = false
@@ -664,19 +671,20 @@ export function RELIEFKnowledgeGraph3D() {
664671
</div>
665672

666673
{/* Legend */}
667-
<div className="absolute bottom-3 left-3 z-20 bg-slate-900/90 backdrop-blur-sm rounded-lg p-4 border border-slate-700">
668-
<div className="text-sm text-slate-200 font-semibold mb-2">Knotentypen</div>
674+
<div className="absolute bottom-3 left-3 z-20 bg-slate-900/90 backdrop-blur-sm rounded-lg p-5 border border-slate-700">
675+
<div className="text-lg text-slate-100 font-bold mb-2">Knotentypen</div>
669676
<div className="grid grid-cols-2 gap-x-4 gap-y-1">
670677
{(Object.keys(NODE_LABELS) as NodeType[]).map(type => (
671678
<div key={type} className="flex items-center gap-1.5">
672679
<span
673-
className="w-3 h-3 rounded-full flex-shrink-0"
680+
className="w-3.5 h-3.5 rounded-full flex-shrink-0"
674681
style={{ backgroundColor: NODE_COLORS[type] }}
675682
/>
676-
<span className="text-xs text-slate-200 whitespace-nowrap">{NODE_LABELS[type]}</span>
683+
<span className="text-base text-slate-100 whitespace-nowrap">{NODE_LABELS[type]}</span>
677684
</div>
678685
))}
679686
</div>
687+
<div className="mt-2 text-sm text-slate-300">Pfeilspitze zeigt die Richtung der Beziehung.</div>
680688
</div>
681689

682690
{/* Stats */}
@@ -698,14 +706,15 @@ export function RELIEFKnowledgeGraph3D() {
698706
onNodeClick={handleNodeClick}
699707
nodeThreeObjectExtend={true}
700708
linkColor={linkColor}
709+
linkDirectionalArrowColor={linkDirectionalArrowColor}
701710
linkWidth={linkWidth}
702711
linkThreeObject={linkThreeObject}
703712
linkPositionUpdate={linkPositionUpdate}
704-
linkDirectionalArrowLength={4}
705-
linkDirectionalArrowRelPos={0.85}
713+
linkDirectionalArrowLength={10}
714+
linkDirectionalArrowRelPos={0.94}
706715
linkDirectionalParticles={linkDirectionalParticles}
707-
linkDirectionalParticleWidth={2}
708-
linkDirectionalParticleSpeed={0.005}
716+
linkDirectionalParticleWidth={4}
717+
linkDirectionalParticleSpeed={0.009}
709718
enableNodeDrag={true}
710719
enableNavigationControls={true}
711720
showNavInfo={false}

0 commit comments

Comments
 (0)