From bd6b73b389ed0a886f56073112602cc2377e3aef Mon Sep 17 00:00:00 2001
From: Anton Volnuhin <anton@volnuhin.com>
Date: Fri, 30 Jan 2026 19:04:15 +0300
Subject: [PATCH] Fix header blinking on hover by tracking section state

- Set isInsideSection=true for all depth levels (1, 2, and others)
- Only reset to default view if not inside a section
- Prevents mouseout from resetting header when moving between sectors

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/app.js b/app.js
index 3afd415..9493440 100644
--- a/app.js
+++ b/app.js
@@ -1601,6 +1601,7 @@ function setupHoverEvents(sunburstData, contextName = null) {
             
             // Handle subcategory nodes (depth 2): show microcategories and transactions without microcategory
             if (depth === 2) {
+                isInsideSection = true;
                 console.log('DEBUG: Hovered subcategory node:', params.name, 'Transactions:', params.data.transactions, 'Children:', params.data.children);
                 const itemColor = params.color || (params.data.itemStyle ? params.data.itemStyle.color : '#cccccc');
                 updateDetailsHeader(params.name, params.value, itemColor, params.data);
@@ -1624,6 +1625,7 @@ function setupHoverEvents(sunburstData, contextName = null) {
             }
             // Handle category nodes (depth 1): show subcategories and transactions without microcategory
             if (depth === 1) {
+                isInsideSection = true;
                 const itemColor = params.color || (params.data.itemStyle ? params.data.itemStyle.color : '#cccccc');
                 updateDetailsHeader(params.name, params.value, itemColor, params.data);
                 const MAX_DETAIL_ITEMS = 10;
@@ -1720,13 +1722,13 @@ function setupHoverEvents(sunburstData, contextName = null) {
     // When mouse leaves a section but is still within the chart, we'll handle it with mousemove
     myChart.on('mouseout', function(params) {
         if (params.data) {
-            isInsideSection = false;
             isOverChartSector = false;
             // Hide the floating eye button (unless hovering over it)
             hideChartEyeButton();
             // Reset details with a small delay to allow eye button mouseenter to fire first
+            // But only if we're not still inside another section
             setTimeout(() => {
-                if (!isOverEyeButton) {
+                if (!isOverEyeButton && !isInsideSection) {
                     showDefaultView();
                 }
             }, 50);
@@ -1735,9 +1737,9 @@ function setupHoverEvents(sunburstData, contextName = null) {
 
     // Add back the downplay event handler - this is triggered when sections lose emphasis
     myChart.on('downplay', function(params) {
-        // Reset to default view when a section is no longer emphasized (unless hovering eye button)
+        // Reset to default view when a section is no longer emphasized (unless hovering eye button or still in section)
         setTimeout(() => {
-            if (!isOverEyeButton) {
+            if (!isOverEyeButton && !isInsideSection) {
                 showDefaultView();
             }
         }, 50);