From 8d65b877ddcd23e422cdd1270e71430c4bfba533 Mon Sep 17 00:00:00 2001
From: Al Azhar <alazhar@indomaret.co.id>
Date: Mon, 27 Apr 2026 21:34:30 +0700
Subject: [PATCH] rev1.3

---
 index.html | 210 ++++++++++++++++++++++++++++++-----------------------
 1 file changed, 118 insertions(+), 92 deletions(-)
diff --git a/index.html b/index.html
index 427327e..825fd29 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Log Viewer Pro // Analytics</title>
+    <title>Log Viewer Pro // Timeline Brush</title>
 
     <link href="css/bootstrap.min.css" rel="stylesheet">
     <link href="css/dataTables.bootstrap5.min.css" rel="stylesheet">
@@ -18,6 +18,8 @@
             --bg-dark: #0f172a;
             --card-dark: #1e293b;
             --border-color: #334155;
+            --selection-bg: rgba(74, 222, 128, 0.2);
+            --selection-border: rgba(74, 222, 128, 0.5);
         }
 
         body {
@@ -34,7 +36,6 @@
             height: 100vh;
         }
 
-        /* Sidebar */
         aside {
             width: var(--sidebar-width);
             background: var(--card-dark);
@@ -74,7 +75,6 @@
             font-weight: 600;
         }
 
-        /* Main Content */
         main {
             flex-grow: 1;
             display: flex;
@@ -91,16 +91,34 @@
             align-items: center;
         }
 
-        /* Intensity Chart */
+        /* Chart Area with Selection Overlay */
         .chart-container {
-            height: 150px;
+            height: 160px;
             background: #0b0e14;
             padding: 10px 20px;
             border-bottom: 1px solid var(--border-color);
             position: relative;
+            user-select: none;
         }
 
-        /* Stats & Toggles */
+        #selection-overlay {
+            position: absolute;
+            top: 10px;
+            left: 20px;
+            right: 20px;
+            bottom: 10px;
+            pointer-events: none;
+            z-index: 10;
+        }
+
+        .selection-rect {
+            fill: var(--selection-bg);
+            stroke: var(--selection-border);
+            stroke-width: 1;
+            display: none;
+        }
+
+        /* Toggles & Controls */
         .level-toggles .btn {
             border: none;
             font-size: 0.7rem;
@@ -114,16 +132,6 @@
             filter: grayscale(0.8);
         }
 
-        .btn-trc {
-            background: #64748b;
-            color: #fff;
-        }
-
-        .btn-dbg {
-            background: #0ea5e9;
-            color: #fff;
-        }
-
         .btn-inf {
             background: #10b981;
             color: #fff;
@@ -144,16 +152,9 @@
             color: #fff;
         }
 
-        /* Search & Time Filter */
-        .controls-group {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
         .search-container {
             position: relative;
-            width: 250px;
+            width: 280px;
         }
 
         .search-container input {
@@ -185,17 +186,6 @@
             display: none;
         }
 
-        /* Time Filter Dropdown */
-        .time-range-select {
-            background: #242b3d;
-            border: 1px solid var(--border-color);
-            color: #94a3b8;
-            font-size: 0.75rem;
-            border-radius: 6px;
-            padding: 4px 8px;
-        }
-
-        /* Table */
         .content-area {
             flex-grow: 1;
             padding: 1rem;
@@ -240,10 +230,10 @@
         <aside>
             <div class="sidebar-header">
                 <h6 class="mb-3 d-flex align-items-center gap-2">
-                    <i data-lucide="terminal" class="text-success"></i> LogViewer Pro
+                    <i data-lucide="activity" class="text-success"></i> LogAnalytics
                 </h6>
                 <button class="btn btn-sm btn-outline-secondary w-100" onclick="$('#dir-input').click()">
-                    <i data-lucide="folder" size="14"></i> Open Directory
+                    <i data-lucide="folder" size="14"></i> Directory
                 </button>
                 <input type="file" id="dir-input" webkitdirectory hidden>
             </div>
@@ -263,29 +253,27 @@
                     <label class="btn btn-crt" for="t-CRT">CRT <span id="c-CRT">0</span></label>
                 </div>
 
-                <div class="controls-group">
-                    <select id="time-range" class="time-range-select">
-                        <option value="all">All Time</option>
-                        <option value="5">Last 5 Mins</option>
-                        <option value="15">Last 15 Mins</option>
-                        <option value="60">Last 1 Hour</option>
-                        <option value="custom">Custom Range...</option>
-                    </select>
-
+                <div class="d-flex align-items-center gap-2">
+                    <div id="filter-info" class="small text-muted me-2" style="display:none">
+                        <span class="badge bg-secondary">Time Filtered</span>
+                    </div>
                     <div class="search-container">
                         <i data-lucide="search" size="14" class="search-icon"></i>
-                        <input type="text" id="global-search" placeholder="Search logs...">
+                        <input type="text" id="global-search" placeholder="Search... (RegEx enabled)">
                         <button id="clear-search" class="clear-btn"><i data-lucide="x" size="14"></i></button>
                     </div>
                 </div>
             </div>
 
-            <div class="chart-container">
+            <div class="chart-container" id="chart-parent">
                 <canvas id="intensityChart"></canvas>
+                <svg id="selection-overlay" width="100%" height="100%">
+                    <rect class="selection-rect" x="0" y="0" width="0" height="100%"></rect>
+                </svg>
             </div>
 
             <div class="content-area">
-                <div class="table-container">
+                <div class="table-container shadow">
                     <table id="log-table" class="table table-dark table-hover table-sm w-100">
                         <thead>
                             <tr>
@@ -306,8 +294,8 @@
         <div class="modal-dialog modal-xl modal-dialog-centered">
             <div class="modal-content bg-dark border-secondary">
                 <div class="modal-body p-0">
-                    <pre id="modal-content" class="m-0 p-4 text-info-emphasis"
-                        style="font-size: 0.75rem; background: #000; overflow-x: auto;"></pre>
+                    <pre id="modal-content" class="m-0 p-4 text-success-emphasis"
+                        style="font-size: 0.75rem; background: #000; overflow-x: auto; font-family: 'Fira Code', monospace;"></pre>
                 </div>
             </div>
         </div>
@@ -321,7 +309,7 @@
     <script>
         lucide.createIcons();
         let chart, table;
-        let latestLogTime = null;
+        let timeRange = { start: null, end: null };
 
         $(document).ready(function () {
             table = $('#log-table').DataTable({
@@ -338,71 +326,109 @@
                 drawCallback: () => lucide.createIcons()
             });
 
-            // Search Control
+            // Global Search
             $('#global-search').on('keyup', function () {
                 table.search(this.value, true, false).draw();
                 $('#clear-search').toggle(this.value.length > 0);
             });
 
-            $('#clear-search').on('click', function () {
+            $('#clear-search').on('click', resetFilters);
+
+            function resetFilters() {
                 $('#global-search').val('').trigger('keyup');
-                $('#time-range').val('all').trigger('change');
-            });
+                timeRange = { start: null, end: null };
+                table.draw();
+                $('#filter-info').hide();
+                $('.selection-rect').hide();
+            }
 
             // Intensity Chart
             const ctx = document.getElementById('intensityChart').getContext('2d');
             chart = new Chart(ctx, {
                 type: 'bar',
-                data: { labels: [], datasets: [{ label: 'Logs', data: [], backgroundColor: '#4ade80', borderRadius: 2 }] },
+                data: { labels: [], datasets: [{ label: 'Logs', data: [], backgroundColor: '#4ade80', barPercentage: 0.9, categoryPercentage: 0.9 }] },
                 options: {
                     responsive: true, maintainAspectRatio: false,
-                    plugins: { legend: { display: false } },
+                    plugins: { legend: { display: false }, tooltip: { enabled: true } },
                     scales: {
                         x: { ticks: { color: '#64748b', font: { size: 10 } }, grid: { display: false } },
                         y: { beginAtZero: true, grid: { color: '#1e293b' }, ticks: { color: '#64748b', font: { size: 10 } } }
-                    },
-                    onClick: (e, els) => {
-                        if (els.length > 0) {
-                            const label = chart.data.labels[els[0].index];
-                            table.column(2).search('^' + label, true, false).draw();
-                        }
                     }
                 }
             });
 
-            // Right click chart reset
-            $('#intensityChart').on('contextmenu', e => { e.preventDefault(); table.column(2).search('').draw(); });
+            // --- DRAG TO SELECT LOGIC ---
+            let isDragging = false;
+            let startX = 0;
+            const $overlay = $('#selection-overlay');
+            const $rect = $('.selection-rect');
 
-            // --- GRAFANA TIME RANGE LOGIC ---
-            $('#time-range').on('change', function () { table.draw(); });
+            $('#chart-parent').on('mousedown', function (e) {
+                isDragging = true;
+                startX = e.pageX - $overlay.offset().left;
+                $rect.attr({ 'x': startX, 'width': 0 }).show();
+            });
 
+            $(window).on('mousemove', function (e) {
+                if (!isDragging) return;
+                let currentX = e.pageX - $overlay.offset().left;
+                let width = currentX - startX;
+                if (width < 0) {
+                    $rect.attr('x', currentX).attr('width', Math.abs(width));
+                } else {
+                    $rect.attr('width', width);
+                }
+            });
+
+            $(window).on('mouseup', function (e) {
+                if (!isDragging) return;
+                isDragging = false;
+
+                const finalX = parseInt($rect.attr('x'));
+                const finalWidth = parseInt($rect.attr('width'));
+
+                if (finalWidth < 5) { // If just a click
+                    resetFilters();
+                    return;
+                }
+
+                // Map pixels to Chart labels
+                const labels = chart.data.labels;
+                const chartArea = chart.chartArea;
+                const scale = chart.scales.x;
+
+                const getValAtPixel = (px) => {
+                    const decimal = scale.getValueForPixel(px);
+                    const index = Math.round(decimal);
+                    return labels[Math.max(0, Math.min(labels.length - 1, index))];
+                };
+
+                timeRange.start = getValAtPixel(finalX);
+                timeRange.end = getValAtPixel(finalX + finalWidth);
+
+                $('#filter-info').show();
+                table.draw();
+            });
+
+            // Right-click reset
+            $('#chart-parent').on('contextmenu', e => { e.preventDefault(); resetFilters(); });
+
+            // Custom Table Filter (Time + Level)
             $.fn.dataTable.ext.search.push((settings, data, dataIndex) => {
-                // Level Filter
                 const lvl = data[1];
                 const checked = $('.btn-check:checked').map((i, el) => $(el).val()).get();
                 if (!checked.includes(lvl)) return false;
 
-                // Time Range Filter
-                const range = $('#time-range').val();
-                if (range === 'all') return true;
-                if (range === 'custom') return true; // Placeholder for custom modal
-
-                const logTimeStr = data[2]; // HH:mm:ss.SSS
-                if (!latestLogTime) return true;
-
-                const diffMinutes = getMinutesDiff(logTimeStr, latestLogTime);
-                return diffMinutes <= parseInt(range);
+                if (timeRange.start && timeRange.end) {
+                    const logTime = data[2].substring(0, 5); // HH:mm
+                    return logTime >= timeRange.start && logTime <= timeRange.end;
+                }
+                return true;
             });
 
-            function getMinutesDiff(timeStr, latestStr) {
-                const parse = (s) => {
-                    const parts = s.split(':');
-                    return parseInt(parts[0]) * 60 + parseInt(parts[1]) + (parseFloat(parts[2]) / 60);
-                };
-                return Math.abs(parse(latestStr) - parse(timeStr));
-            }
+            $('.btn-check').on('change', () => table.draw());
 
-            // Load Files
+            // File loading
             $('#dir-input').on('change', function (e) {
                 const files = Array.from(e.target.files).filter(f => f.name.endsWith('.log'));
                 $('#file-list').empty().append(files.map((f, i) => `<div class="file-item" onclick="loadLog(${i})"><span>${f.name}</span></div>`));
@@ -414,9 +440,9 @@
                 const reader = new FileReader();
                 reader.onload = e => {
                     const logs = parseLogs(e.target.result);
-                    if (logs.length > 0) latestLogTime = logs[logs.length - 1].time;
                     table.clear().rows.add(logs).draw();
                     updateAnalytics(logs);
+                    resetFilters();
                 };
                 reader.readAsText(window.loadedFiles[idx]);
             };
@@ -439,10 +465,10 @@
                     const min = l.time.substring(0, 5);
                     bins[min] = (bins[min] || 0) + 1;
                 });
-                Object.keys(counts).forEach(k => $(`#c-${k}`).text(counts[k]));
-                const labels = Object.keys(bins).sort();
-                chart.data.labels = labels;
-                chart.data.datasets[0].data = labels.map(l => bins[l]);
+                Object.keys(counts).forEach(k => $(`#c-${k}`).text(counts[k].toLocaleString()));
+                const sortedLabels = Object.keys(bins).sort();
+                chart.data.labels = sortedLabels;
+                chart.data.datasets[0].data = sortedLabels.map(l => bins[l]);
                 chart.update();
             }
 
