From 2193026fd938d151d813c273f52068d263f26676 Mon Sep 17 00:00:00 2001
From: Gerwin Kuijntjes <administratie@gerwinkuijntjes.nl>
Date: Tue, 31 Mar 2026 14:47:31 +0200
Subject: [PATCH] GraphPage: hide double-tap hint after first user interaction

Hint overlay is dismissed on first pan/zoom/click via iframe app://interaction
signal from the vis.js event handler.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../Xamarin.Neo4j/Pages/GraphPage.xaml        | 21 ++++++++++++++++++-
 .../Xamarin.Neo4j/Pages/GraphPage.xaml.cs     |  7 +++++++
 .../Xamarin.Neo4j/Visualization/visgraph.html | 11 ++++++++++
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Pages/GraphPage.xaml b/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Pages/GraphPage.xaml
index 1663a40..fb43fc5 100644
--- a/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Pages/GraphPage.xaml
+++ b/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Pages/GraphPage.xaml
@@ -5,6 +5,25 @@
              Title="Graph"
              x:Class="Xamarin.Neo4j.Pages.GraphPage">
     <ContentPage.Content>
-        <WebView x:Name="webView" Source="{Binding Source}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
+        <Grid>
+            <WebView x:Name="webView" Source="{Binding Source}"
+                     HorizontalOptions="FillAndExpand"
+                     VerticalOptions="FillAndExpand" />
+
+            <!-- Double-tap hint — hidden after first interaction -->
+            <Border x:Name="hintBorder"
+                    VerticalOptions="End"
+                    HorizontalOptions="Center"
+                    Margin="16,0,16,16"
+                    BackgroundColor="#CC000000"
+                    StrokeThickness="0"
+                    StrokeShape="RoundRectangle 12"
+                    Padding="12,8">
+                <Label Text="Double-tap a node to expand its relationships"
+                       TextColor="White"
+                       FontSize="13"
+                       HorizontalTextAlignment="Center" />
+            </Border>
+        </Grid>
     </ContentPage.Content>
 </ContentPage>
diff --git a/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Pages/GraphPage.xaml.cs b/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Pages/GraphPage.xaml.cs
index 7c15580..2c3b2c2 100644
--- a/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Pages/GraphPage.xaml.cs
+++ b/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Pages/GraphPage.xaml.cs
@@ -33,6 +33,13 @@ namespace Xamarin.Neo4j.Pages
         {
             Console.WriteLine($"[Graph] Navigating: {e.Url}");
 
+            if (e.Url.Contains("interaction"))
+            {
+                e.Cancel = true;
+                hintBorder.IsVisible = false;
+                return;
+            }
+
             if (!e.Url.Contains("expand") || !e.Url.Contains("nodeId")) return;
 
             e.Cancel = true;
diff --git a/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Visualization/visgraph.html b/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Visualization/visgraph.html
index d94c160..f0a9f1e 100644
--- a/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Visualization/visgraph.html
+++ b/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Visualization/visgraph.html
@@ -440,6 +440,16 @@
 
             // ---- interaction handling (touch + mouse/pointer) ----
             var ptrStartX, ptrStartY, ptrEndX, ptrEndY, ptrStartTime, dragging = null, panning = false, mouseDown = false;
+            var interacted = false;
+            function notifyInteraction() {
+                if (interacted) return;
+                interacted = true;
+                var f = document.createElement('iframe');
+                f.style.display = 'none';
+                f.src = 'app://interaction';
+                document.body.appendChild(f);
+                setTimeout(function () { document.body.removeChild(f); }, 200);
+            }
 
             function edgeAt(sx, sy) {
                 var w = toWorld(sx, sy);
@@ -477,6 +487,7 @@
 
             function handleStart(e) {
                 if (e.touches) e.preventDefault();
+                notifyInteraction();
                 var p = coordFromEvent(e);
                 ptrStartX = ptrEndX = p.x;
                 ptrStartY = ptrEndY = p.y;