From 00ae58907713f9424d0b72b056edd1fb59417e3f Mon Sep 17 00:00:00 2001
From: Karolis Strazdas <karolis.strazdas@protonmail.com>
Date: Mon, 1 Sep 2025 16:44:07 +0300
Subject: [PATCH] Fix label overlay capture

---
 index.html               |   9 ++
 src/charts/timeSeries.ts | 225 +++++++++++++++++++++++++++++++++++++++
 src/data/csvProcessor.ts |  26 +++--
 src/shared/misc.ts       |   9 ++
 src/uploads/index.ts     |  21 ++++
 5 files changed, 284 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index b31d92a..67216ba 100644
--- a/index.html
+++ b/index.html
@@ -326,6 +326,15 @@ <h5 id="cfg-view-heading" class="text-sm text-muted" style="margin: 0">
                     >
                         <span class="material-symbols-outlined">point_scan</span>
                     </button>
+                    <button
+                        class="btn-icon btn-neutral"
+                        id="btn-label-mode"
+                        aria-pressed="false"
+                        aria-label="Label mode"
+                        title="Toggle labeling mode"
+                    >
+                        <span class="material-symbols-outlined">ink_highlighter</span>
+                    </button>
                     <!-- Collapse/expand side panels -->
                     <button
                         class="btn-icon btn-neutral"
diff --git a/src/charts/timeSeries.ts b/src/charts/timeSeries.ts
index b82a2c2..1e46b2b 100644
--- a/src/charts/timeSeries.ts
+++ b/src/charts/timeSeries.ts
@@ -1,3 +1,6 @@
+import type { TimeSeriesLabel } from '@domain/timeSeries';
+import { hexToRgba, uuid } from '@shared/misc';
+
 import { installModalFocusTrap } from '../ui/dom';
 
 import { init, type EChartOption, type ECharts } from './echarts';
@@ -7,6 +10,17 @@ interface DataZoomEvent {
     readonly end?: number;
 }
 
+interface LabelOption {
+    readonly value: string;
+    readonly label: string;
+    readonly color?: string;
+}
+
+interface LabelDropdownEl extends HTMLElement {
+    value: string;
+    options: LabelOption[];
+}
+
 /**
  * Interface for time series data - clean abstraction for different data sources
  */
@@ -17,6 +31,8 @@ export interface TimeSeriesData {
     getData(xColumn: string, yColumn: string): ReadonlyArray<readonly [number, number]>;
     isLabeled(): boolean;
     setLabeled(labeled: boolean): void;
+    getLabels(): ReadonlyArray<TimeSeriesLabel>;
+    addLabel(label: TimeSeriesLabel): void;
 }
 
 /**
@@ -71,6 +87,11 @@ export class TimeSeriesChart {
     private chartConfigCleanup: (() => void) | null = null;
     private lastConfig: TimeSeriesConfig | null = null;
     private currentData: ReadonlyArray<readonly [number | string, number]> = [];
+    private labelMode = false;
+    private labelOverlay: HTMLDivElement | null = null;
+    private labelStartX: number | null = null;
+    private activeLabelRect: HTMLDivElement | null = null;
+    private activeLabelLine: HTMLDivElement | null = null;
     private readonly handleZoomEvent = (params: DataZoomEvent): void => {
         this.updateYAxisFromZoom(params.start, params.end);
     };
@@ -112,6 +133,9 @@ export class TimeSeriesChart {
             this.chart = chartInstance;
             chartInstance.setOption(option);
 
+            // Overlay must be created after chart initialization to avoid removal
+            this.setupLabelOverlay();
+
             // Create empty state element AFTER chart is ready
             this.createEmptyStateElement();
 
@@ -162,6 +186,31 @@ export class TimeSeriesChart {
         window.addEventListener('timelab:layoutChanged', this.layoutChangeHandler);
     }
 
+    /**
+     * Create overlay element used for interactive labeling
+     */
+    private setupLabelOverlay(): void {
+        const overlay = document.createElement('div');
+        overlay.style.position = 'absolute';
+        overlay.style.inset = '0';
+        overlay.style.pointerEvents = 'none';
+        overlay.style.zIndex = '10';
+        overlay.style.touchAction = 'none';
+        overlay.addEventListener('pointerdown', this.handleLabelStart);
+        overlay.addEventListener('pointermove', this.handleLabelMove);
+        overlay.addEventListener('pointerup', this.handleLabelEnd);
+        overlay.addEventListener('pointerleave', this.handleLabelEnd);
+        overlay.addEventListener('wheel', this.blockWheel, { passive: false });
+
+        const containerStyle = window.getComputedStyle(this.container);
+        if (containerStyle.position === 'static') {
+            this.container.style.position = 'relative';
+        }
+
+        this.container.appendChild(overlay);
+        this.labelOverlay = overlay;
+    }
+
     /**
      * Create the HTML empty state overlay
      */
@@ -402,6 +451,155 @@ export class TimeSeriesChart {
         }
     }
 
+    toggleLabelMode(): boolean {
+        this.labelMode = !this.labelMode;
+        if (this.labelOverlay) {
+            this.labelOverlay.style.pointerEvents = this.labelMode ? 'auto' : 'none';
+        }
+        if (!this.labelMode) {
+            this.cleanupActiveRect();
+        }
+        return this.labelMode;
+    }
+
+    private getActiveLabelDefinition(): { name: string; color: string } | null {
+        const dropdown = document.getElementById('active-label') as LabelDropdownEl | null;
+        if (!dropdown) {
+            return null;
+        }
+        const val = dropdown.value;
+        const opt = dropdown.options.find((o) => o.value === val);
+        if (!opt || !opt.color) {
+            return null;
+        }
+        return { name: opt.label, color: opt.color };
+    }
+
+    private blockWheel = (e: WheelEvent): void => {
+        if (!this.labelMode) {
+            return;
+        }
+        e.stopPropagation();
+        e.preventDefault();
+    };
+
+    private handleLabelStart = (e: PointerEvent): void => {
+        if (!this.labelMode || !this.labelOverlay) {
+            return;
+        }
+
+        const def = this.getActiveLabelDefinition();
+        if (!def) {
+            return;
+        }
+
+        e.stopPropagation();
+        e.preventDefault();
+        this.labelOverlay.setPointerCapture(e.pointerId);
+
+        const startX = e.offsetX;
+        this.labelStartX = startX;
+
+        const line = document.createElement('div');
+        line.style.position = 'absolute';
+        line.style.top = '0';
+        line.style.bottom = '0';
+        line.style.left = String(startX) + 'px';
+        line.style.width = '1px';
+        line.style.background = def.color;
+        line.style.pointerEvents = 'none';
+        this.labelOverlay.appendChild(line);
+        this.activeLabelLine = line;
+
+        const rect = document.createElement('div');
+        rect.style.position = 'absolute';
+        rect.style.top = '0';
+        rect.style.bottom = '0';
+        rect.style.left = String(startX) + 'px';
+        rect.style.background = hexToRgba(def.color, 0.3);
+        rect.style.pointerEvents = 'none';
+        this.labelOverlay.appendChild(rect);
+        this.activeLabelRect = rect;
+    };
+
+    private handleLabelMove = (e: PointerEvent): void => {
+        if (!this.labelMode || this.labelStartX === null || !this.activeLabelRect) {
+            return;
+        }
+
+        e.stopPropagation();
+        e.preventDefault();
+
+        const currentX = e.offsetX;
+        const left = Math.min(this.labelStartX, currentX);
+        const width = Math.abs(currentX - this.labelStartX);
+        this.activeLabelRect.style.left = String(left) + 'px';
+        this.activeLabelRect.style.width = String(width) + 'px';
+    };
+
+    private handleLabelEnd = (e: PointerEvent): void => {
+        if (
+            !this.labelMode ||
+            this.labelStartX === null ||
+            !this.chart ||
+            !this.activeLabelRect ||
+            !this.activeLabelLine
+        ) {
+            this.cleanupActiveRect();
+            return;
+        }
+
+        e.stopPropagation();
+        e.preventDefault();
+
+        if (this.labelOverlay) {
+            this.labelOverlay.releasePointerCapture(e.pointerId);
+        }
+
+        const endX = e.offsetX;
+        const startPx = this.labelStartX;
+        const start = this.chart.convertFromPixel({ xAxisIndex: 0 }, [
+            Math.min(startPx, endX),
+            0,
+        ])[0] as number;
+        const end = this.chart.convertFromPixel({ xAxisIndex: 0 }, [
+            Math.max(startPx, endX),
+            0,
+        ])[0] as number;
+
+        this.cleanupActiveRect();
+
+        const def = this.getActiveLabelDefinition();
+        if (!def || start === end) {
+            return;
+        }
+
+        const label: TimeSeriesLabel = {
+            id: uuid(),
+            name: def.name,
+            startTime: Math.min(start, end),
+            endTime: Math.max(start, end),
+            color: def.color,
+        };
+        const source = this.getCurrentSource();
+        source?.addLabel(label);
+        if (this.lastConfig) {
+            this.updateDisplay(this.lastConfig);
+        }
+    };
+
+    private cleanupActiveRect(): void {
+        if (this.activeLabelRect && this.labelOverlay) {
+            this.labelOverlay.removeChild(this.activeLabelRect);
+        }
+        if (this.activeLabelLine && this.labelOverlay) {
+            this.labelOverlay.removeChild(this.activeLabelLine);
+        }
+        this.activeLabelRect = null;
+        this.activeLabelLine = null;
+        this.labelStartX = null;
+    }
+
     /**
      * Update chart display with current configuration
      */
@@ -425,6 +623,7 @@ export class TimeSeriesChart {
         }
 
         const data = source.getData(config.xColumn, config.yColumn);
+        const labels = source.getLabels();
 
         // Apply configuration with defaults
         const xType = config.xType || 'category';
@@ -489,6 +688,16 @@ export class TimeSeriesChart {
                       axisPointer: { type: 'cross' as const, snap },
                   };
 
+        const markArea =
+            labels.length > 0
+                ? ({
+                      data: labels.map((l) => [
+                          { xAxis: l.startTime, itemStyle: { color: hexToRgba(l.color, 0.3) } },
+                          { xAxis: l.endTime },
+                      ]),
+                  } as unknown as EChartOption.SeriesLine['markArea'])
+                : undefined;
+
         this.chart.setOption(
             {
                 tooltip,
@@ -504,6 +713,7 @@ export class TimeSeriesChart {
                         lineStyle: { width: lineWidth },
                         areaStyle: showArea ? {} : undefined,
                         markLine,
+                        markArea,
                         data: [...seriesData] as Array<[number | string, number]>,
                     },
                 ],
@@ -613,6 +823,15 @@ export class TimeSeriesChart {
             this.emptyStateElement.remove();
             this.emptyStateElement = null;
         }
+        if (this.labelOverlay) {
+            this.labelOverlay.removeEventListener('pointerdown', this.handleLabelStart);
+            this.labelOverlay.removeEventListener('pointermove', this.handleLabelMove);
+            this.labelOverlay.removeEventListener('pointerup', this.handleLabelEnd);
+            this.labelOverlay.removeEventListener('pointerleave', this.handleLabelEnd);
+            this.labelOverlay.removeEventListener('wheel', this.blockWheel);
+            this.labelOverlay.remove();
+            this.labelOverlay = null;
+        }
     }
 
     /**
@@ -741,6 +960,7 @@ function bindUIControls(chart: TimeSeriesChart): void {
     const elPrev = document.getElementById('series-prev') as HTMLButtonElement | null;
     const elNext = document.getElementById('series-next') as HTMLButtonElement | null;
     const btnToggleLabeled = document.getElementById('toggle-labeled') as HTMLButtonElement | null;
+    const btnLabelMode = document.getElementById('btn-label-mode') as HTMLButtonElement | null;
 
     elPrev?.addEventListener('click', () => {
         chart.previousSeries();
@@ -752,6 +972,11 @@ function bindUIControls(chart: TimeSeriesChart): void {
         chart.toggleLabeled();
     });
 
+    btnLabelMode?.addEventListener('click', () => {
+        const active = chart.toggleLabelMode();
+        btnLabelMode.setAttribute('aria-pressed', String(active));
+    });
+
     // Bind axis dropdown changes
     const xDropdown = document.querySelector('#x-axis');
     const yDropdown = document.querySelector('#y-axis');
diff --git a/src/data/csvProcessor.ts b/src/data/csvProcessor.ts
index 5ebf31a..9dd3218 100644
--- a/src/data/csvProcessor.ts
+++ b/src/data/csvProcessor.ts
@@ -2,6 +2,8 @@
  * CSV data processing and TimeSeriesData implementation
  */
 
+import type { TimeSeriesLabel } from '@domain/timeSeries';
+
 import type { TimeSeriesData } from '../charts/timeSeries';
 import type { TDataFile } from '../uploads';
 
@@ -15,6 +17,7 @@ export class CSVTimeSeriesData implements TimeSeriesData {
     private parsedData: ReadonlyArray<readonly number[]> = [];
     private labeled = false;
     private sourceFile: TDataFile;
+    private labels: TimeSeriesLabel[] = [];
 
     constructor(file: TDataFile) {
         this.id = file.id;
@@ -26,12 +29,8 @@ export class CSVTimeSeriesData implements TimeSeriesData {
         this.columns = columns;
         this.parsedData = data;
 
-        // Initialize labeled state from file data
-        if (file.labeled) {
-            this.labeled = file.labeled;
-        } else {
-            this.labeled = false;
-        }
+        this.labels = Array.isArray(file.labels) ? file.labels : [];
+        this.labeled = file.labeled || this.labels.length > 0;
     }
 
     getData(xColumn: string, yColumn: string): ReadonlyArray<readonly [number, number]> {
@@ -66,6 +65,21 @@ export class CSVTimeSeriesData implements TimeSeriesData {
         });
         window.dispatchEvent(event);
     }
+
+    getLabels(): ReadonlyArray<TimeSeriesLabel> {
+        return this.labels;
+    }
+
+    addLabel(label: TimeSeriesLabel): void {
+        this.labels = [...this.labels, label];
+        this.labeled = true;
+        this.sourceFile.labels = this.labels;
+        this.sourceFile.labeled = true;
+        const event = new CustomEvent('timelab:labelsChanged', {
+            detail: { fileId: this.sourceFile.id, labels: this.labels },
+        });
+        window.dispatchEvent(event);
+    }
 }
 
 /**
diff --git a/src/shared/misc.ts b/src/shared/misc.ts
index 5a53004..5ae45a3 100644
--- a/src/shared/misc.ts
+++ b/src/shared/misc.ts
@@ -16,3 +16,12 @@ export const formatBytes = (bytes: number): string => {
 
     return (bytes / (1024 * 1024 * 1024)).toFixed(1) + ' GB';
 };
+
+export function hexToRgba(hex: string, alpha: number): string {
+    const normalized = hex.replace('#', '');
+    const bigint = parseInt(normalized, 16);
+    const r = (bigint >> 16) & 255;
+    const g = (bigint >> 8) & 255;
+    const b = bigint & 255;
+    return 'rgba(' + String(r) + ', ' + String(g) + ', ' + String(b) + ', ' + String(alpha) + ')';
+}
diff --git a/src/uploads/index.ts b/src/uploads/index.ts
index 5c730a5..5c91c8d 100644
--- a/src/uploads/index.ts
+++ b/src/uploads/index.ts
@@ -1,3 +1,5 @@
+import type { TimeSeriesLabel } from '@domain/timeSeries';
+
 import { getAllRecords, saveRecord, deleteRecord } from '../platform/storage';
 import { formatBytes, uuid } from '../shared/misc';
 import { confirmDelete } from '../ui/confirmation';
@@ -5,6 +7,7 @@ import { closeModal, openModal } from '../ui/dom';
 
 export type TDataFile = {
     labeled: boolean;
+    labels: TimeSeriesLabel[];
     id: string;
     name: string;
     size: number;
@@ -55,6 +58,17 @@ export function setupUploads(): void {
         );
     };
 
+    window.addEventListener('timelab:labelsChanged', (event) => {
+        const detail = (event as CustomEvent<{ fileId: string; labels: TimeSeriesLabel[] }>).detail;
+        const file = dataFiles.find((f) => f.id === detail.fileId);
+        if (file) {
+            file.labels = detail.labels.slice();
+            file.labeled = file.labels.length > 0;
+            void saveRecord(file);
+            notifyChange();
+        }
+    });
+
     type UploadItemUI = { state: { cancelled: boolean }; detach: () => void } & {
         row: HTMLDivElement;
         bar: HTMLDivElement;
@@ -307,6 +321,7 @@ export function setupUploads(): void {
             addedAt: Date.now(),
             visible: true,
             labeled: false,
+            labels: [],
             text,
             demo: true,
         };
@@ -360,6 +375,7 @@ export function setupUploads(): void {
                     addedAt: Date.now(),
                     visible: true,
                     labeled: false,
+                    labels: [],
                     text,
                 };
                 dataFiles.push(record);
@@ -459,6 +475,11 @@ export function setupUploads(): void {
         try {
             const storedResult = await getAllRecords<TDataFile>();
             if (storedResult.ok && storedResult.value.length > 0) {
+                storedResult.value.forEach((record) => {
+                    if (!Array.isArray(record.labels)) {
+                        record.labels = [];
+                    }
+                });
                 dataFiles.push(...storedResult.value);
                 renderFilesList();
                 notifyChange();