Skip to content

Commit f4f34f3

Browse files
chindris-mihai-alexandruchindris-mihai-alexandru
committed
feat(ui): narrative engine always expanded
- Removed collapsible functionality from NarrativeInsights - Component now always shows horizontal 3-column layout - Removed useState and ChevronDown imports (no longer needed) - Cleaner UI with immediate content visibility - Maintains all existing functionality and styling
1 parent 7ecd385 commit f4f34f3

1 file changed

Lines changed: 42 additions & 54 deletions

File tree

‎frontend/src/components/NarrativeInsights.tsx‎

Lines changed: 42 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
'use client'
22

3-
import { useState } from 'react'
43
import { ChevronDown } from 'lucide-react'
54
import { NarrativeTimeline } from './NarrativeTimeline'
65
import { NarrativeCloud } from './NarrativeCloud'
@@ -35,16 +34,11 @@ interface NarrativeInsightsProps {
3534
}
3635

3736
export function NarrativeInsights({ ticker = 'Portfolio' }: NarrativeInsightsProps) {
38-
const [isExpanded, setIsExpanded] = useState(false)
3937

4038
return (
4139
<div className="w-full border border-border bg-bg-secondary">
42-
{/* Collapsible header */}
43-
<button
44-
onClick={() => setIsExpanded(!isExpanded)}
45-
className="w-full flex items-center justify-between px-6 py-4 hover:bg-white/[0.02] transition-colors cursor-pointer min-h-[44px]"
46-
aria-expanded={isExpanded}
47-
>
40+
{/* Always expanded header */}
41+
<div className="px-6 py-4 border-b border-border">
4842
<div className="flex items-center gap-3">
4943
<span className="text-[10px] font-mono text-brand-red uppercase tracking-[0.2em]">
5044
Narrative Engine
@@ -53,58 +47,52 @@ export function NarrativeInsights({ ticker = 'Portfolio' }: NarrativeInsightsPro
5347
{MOCK_CLOUD_NARRATIVES.length} active narratives · {MOCK_CLOUD_NARRATIVES.filter(n => n.regionsPresent.length > 1).length} cross-desk
5448
</span>
5549
</div>
56-
<ChevronDown
57-
className={`w-4 h-4 text-text-tertiary transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`}
58-
/>
59-
</button>
50+
</div>
6051

61-
{/* Expandable content */}
62-
{isExpanded && (
63-
<div className="px-6 pb-6 border-t border-border pt-5">
64-
{/* Horizontal layout - all components side by side */}
65-
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 min-h-[300px]">
66-
{/* Narrative Heatmap */}
67-
<div className="border border-border p-4">
68-
<h4 className="font-mono text-xs text-text-secondary uppercase tracking-wider mb-3">
69-
Narrative Heatmap
70-
</h4>
71-
<NarrativeCloud narratives={MOCK_CLOUD_NARRATIVES} ticker={ticker} />
72-
</div>
52+
{/* Always visible content - horizontal layout */}
53+
<div className="px-6 pb-6 border-t border-border pt-5">
54+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 min-h-[300px]">
55+
{/* Narrative Heatmap */}
56+
<div className="border border-border p-4">
57+
<h4 className="font-mono text-xs text-text-secondary uppercase tracking-wider mb-3">
58+
Narrative Heatmap
59+
</h4>
60+
<NarrativeCloud narratives={MOCK_CLOUD_NARRATIVES} ticker={ticker} />
61+
</div>
7362

74-
{/* Chronological Feed */}
75-
<div className="border border-border p-4">
76-
<h4 className="font-mono text-xs text-text-secondary uppercase tracking-wider mb-3">
77-
Chronological Feed
78-
</h4>
79-
<NarrativeTimeline events={MOCK_TIMELINE_EVENTS} ticker={ticker} />
80-
</div>
63+
{/* Chronological Feed */}
64+
<div className="border border-border p-4">
65+
<h4 className="font-mono text-xs text-text-secondary uppercase tracking-wider mb-3">
66+
Chronological Feed
67+
</h4>
68+
<NarrativeTimeline events={MOCK_TIMELINE_EVENTS} ticker={ticker} />
69+
</div>
8170

82-
{/* Cross-Desk Contagion */}
83-
<div className="border border-border p-4">
84-
<h4 className="font-mono text-xs text-text-secondary uppercase tracking-wider mb-3">
85-
Cross-Desk Contagion
86-
</h4>
87-
<div className="space-y-2 max-h-[200px] overflow-y-auto">
88-
{MOCK_CLOUD_NARRATIVES
89-
.filter(n => n.regionsPresent.length > 1)
90-
.map(n => (
91-
<div key={n.id} className="flex items-center gap-3 text-xs">
92-
<span className="text-brand-red font-mono">⚡</span>
93-
<span className="text-text-primary font-medium">{n.title}</span>
94-
<span className="text-text-tertiary">→</span>
95-
<span className="text-text-secondary font-mono">
96-
{n.regionsPresent.join(' · ')}
97-
</span>
98-
<span className="ml-auto text-text-tertiary font-mono text-[10px]">
99-
{n.mentionsPerDay.toFixed(1)}/day
100-
</span>
101-
</div>
102-
))}
103-
</div>
71+
{/* Cross-Desk Contagion */}
72+
<div className="border border-border p-4">
73+
<h4 className="font-mono text-xs text-text-secondary uppercase tracking-wider mb-3">
74+
Cross-Desk Contagion
75+
</h4>
76+
<div className="space-y-2 max-h-[200px] overflow-y-auto">
77+
{MOCK_CLOUD_NARRATIVES
78+
.filter(n => n.regionsPresent.length > 1)
79+
.map(n => (
80+
<div key={n.id} className="flex items-center gap-3 text-xs">
81+
<span className="text-brand-red font-mono">⚡</span>
82+
<span className="text-text-primary font-medium">{n.title}</span>
83+
<span className="text-text-tertiary">→</span>
84+
<span className="text-text-secondary font-mono">
85+
{n.regionsPresent.join(' · ')}
86+
</span>
87+
<span className="ml-auto text-text-tertiary font-mono text-[10px]">
88+
{n.mentionsPerDay.toFixed(1)}/day
89+
</span>
90+
</div>
91+
))}
10492
</div>
10593
</div>
10694
</div>
107-
)}
95+
</div>
10896
</div>
10997
)
11098
}

0 commit comments

Comments
 (0)