trentuna/candle-annotator
8
0
Fork 0
Code Issues Pull requests Releases Packages Activity Actions

fix: make sidebar scrollable so training/predictions panels are always visible

Browse source
This commit is contained in:
Marko Djordjevic 2026-02-17 22:10:54 +01:00
parent 2faa8879f3
commit d34dc9d729
2 changed files with 52 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

48
src/app/page.tsx
View file

@ -760,7 +760,7 @@ export default function Home() {
{/* Sidebar */} {/* Sidebar */}
<div className="flex flex-col bg-sidebar border-r border-sidebar-border w-60 flex-shrink-0 animate-fade-in"> <div className="flex flex-col bg-sidebar border-r border-sidebar-border w-60 flex-shrink-0 animate-fade-in">
{/* Sidebar Header */} {/* Sidebar Header */}
<div className="flex items-center justify-between px-4 py-3 border-b border-sidebar-border"> <div className="flex items-center justify-between px-4 py-3 border-b border-sidebar-border flex-shrink-0">
<div> <div>
<h1 className="text-sm font-semibold text-foreground tracking-tight">Candle Annotator</h1> <h1 className="text-sm font-semibold text-foreground tracking-tight">Candle Annotator</h1>
<p className="text-[10px] text-muted-foreground">Chart annotation tool</p> <p className="text-[10px] text-muted-foreground">Chart annotation tool</p>
@ -771,7 +771,7 @@ export default function Home() {
</div> </div>
{/* Chart Selector */} {/* Chart Selector */}
<div className="px-3 py-2 border-b border-sidebar-border"> <div className="px-3 py-2 border-b border-sidebar-border flex-shrink-0">
<ChartSelector <ChartSelector
charts={charts} charts={charts}
activeChartId={activeChartId} activeChartId={activeChartId}
@ -781,12 +781,12 @@ export default function Home() {
</div> </div>
{/* File Upload */} {/* File Upload */}
<div className="px-3 py-2 border-b border-sidebar-border"> <div className="px-3 py-2 border-b border-sidebar-border flex-shrink-0">
<FileUpload onUploadSuccess={handleUploadSuccess} /> <FileUpload onUploadSuccess={handleUploadSuccess} />
</div> </div>
{/* Toolbox */} {/* Toolbox */}
<div className="px-3 py-2 border-b border-sidebar-border"> <div className="px-3 py-2 border-b border-sidebar-border flex-shrink-0">
<Toolbox <Toolbox
activeTool={activeTool} activeTool={activeTool}
onToolChange={setActiveTool} onToolChange={setActiveTool}
@ -806,8 +806,10 @@ export default function Home() {
/> />
</div> </div>
{/* Annotations List - scrollable */} {/* Scrollable middle: Annotations + TA-Lib + Training + Predictions */}
<div className="flex-1 overflow-y-auto scrollbar-thin px-3 py-2 min-h-0"> <div className="flex-1 overflow-y-auto scrollbar-thin min-h-0">
{/* Annotations List */}
<div className="px-3 py-2 border-b border-sidebar-border">
<SpanAnnotationList <SpanAnnotationList
spanAnnotations={spanAnnotations} spanAnnotations={spanAnnotations}
spanLabelTypes={spanLabelTypes} spanLabelTypes={spanLabelTypes}
@ -818,7 +820,7 @@ export default function Home() {
</div> </div>
{/* TA-Lib Pattern Panel */} {/* TA-Lib Pattern Panel */}
<div className="px-3 py-2 border-t border-sidebar-border"> <div className="px-3 py-2 border-b border-sidebar-border">
<TalibPatternPanel <TalibPatternPanel
activeChartId={activeChartId} activeChartId={activeChartId}
onAnnotationsChanged={() => fetchSpanAnnotations(activeChartId)} onAnnotationsChanged={() => fetchSpanAnnotations(activeChartId)}
@ -826,24 +828,13 @@ export default function Home() {
/> />
</div> </div>
{/* Delete all annotations */}
<div className="px-3 py-2 border-t border-sidebar-border">
<button
onClick={handleDeleteAllAnnotations}
disabled={!activeChartId}
className="w-full px-2 py-1 text-[10px] text-destructive border border-destructive/30 rounded hover:bg-destructive/10 transition-colors disabled:opacity-50"
>
Delete All Annotations
</button>
</div>
{/* Training Panel */} {/* Training Panel */}
<div className="px-3 py-2 border-t border-sidebar-border"> <div className="px-3 py-2 border-b border-sidebar-border">
<TrainingPanel /> <TrainingPanel />
</div> </div>
{/* Predictions */} {/* Predictions */}
<div className="px-3 py-2 border-t border-sidebar-border"> <div className="px-3 py-2">
<PredictionPanel <PredictionPanel
predictionState={predictionState} predictionState={predictionState}
onToggleVisibility={togglePredictionVisibility} onToggleVisibility={togglePredictionVisibility}
@ -858,9 +849,22 @@ export default function Home() {
onModelLoaded={handleModelLoaded} onModelLoaded={handleModelLoaded}
/> />
</div> </div>
</div>
{/* Fixed bottom actions */}
{/* Delete all annotations */}
<div className="px-3 py-2 border-t border-sidebar-border flex-shrink-0">
<button
onClick={handleDeleteAllAnnotations}
disabled={!activeChartId}
className="w-full px-2 py-1 text-[10px] text-destructive border border-destructive/30 rounded hover:bg-destructive/10 transition-colors disabled:opacity-50"
>
Delete All Annotations
</button>
</div>
{/* Export */} {/* Export */}
<div className="px-3 py-2 border-t border-sidebar-border"> <div className="px-3 py-2 border-t border-sidebar-border flex-shrink-0">
<button <button
onClick={handleExport} onClick={handleExport}
className="w-full flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs rounded bg-primary/10 hover:bg-primary/20 text-primary transition-colors" className="w-full flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs rounded bg-primary/10 hover:bg-primary/20 text-primary transition-colors"
@ -871,7 +875,7 @@ export default function Home() {
</div> </div>
{/* Settings */} {/* Settings */}
<div className="relative px-3 py-2 border-t border-sidebar-border"> <div className="relative px-3 py-2 border-t border-sidebar-border flex-shrink-0">
<button <button
onClick={() => setSettingsOpen((o) => !o)} onClick={() => setSettingsOpen((o) => !o)}
className="flex items-center gap-1.5 px-2 py-1.5 text-xs rounded text-muted-foreground hover:text-foreground hover:bg-secondary/50 transition-colors" className="flex items-center gap-1.5 px-2 py-1.5 text-xs rounded text-muted-foreground hover:text-foreground hover:bg-secondary/50 transition-colors"

2
tsconfig.tsbuildinfo
View file

File diff suppressed because one or more lines are too long