From 093ac40558429ca5538db86b8237e095d6ed5f65 Mon Sep 17 00:00:00 2001
From: Louis Chan <louisch@fastmail.com>
Date: Wed, 1 Apr 2026 18:02:27 +0800
Subject: [PATCH 1/4] Add graph with metadata to test dataset

---
 test_server.py | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/test_server.py b/test_server.py
index 242562f..1df8351 100644
--- a/test_server.py
+++ b/test_server.py
@@ -144,6 +144,13 @@ def random_created_at():
     return int(created.timestamp() * 1000)
 
 
+def setup_graph_with_metadata(graph):
+    setup_graph(graph)
+    for i in range(0, 20):
+        graph.add_metadata({ f"prop{i}": 100 })
+    return graph
+
+
 def setup_large_graph(graph):
     graph.add_node(0, "center")
     for i in range(0, 500):
@@ -193,6 +200,9 @@ def __main__():
     graph.save_to_file(f"{work_dir}/new_folder/persistent_second_filler")
     graph.save_to_file(f"{work_dir}/vanilla/persistent_second_filler")
 
+    graph = setup_graph_with_metadata(Graph())
+    graph.save_to_file(f"{work_dir}/vanilla/graph_with_metadata")
+
     server = graphql.GraphServer(work_dir=work_dir)
     server.run(port=port)
 

From ec401a09ebc3e9581eada63452f99dd3acbe1bef Mon Sep 17 00:00:00 2001
From: Louis Chan <louisch@fastmail.com>
Date: Wed, 1 Apr 2026 18:02:45 +0800
Subject: [PATCH 2/4] Add test that overview can be scrolled when overflowing

---
 tests/e2e/graph.spec.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/tests/e2e/graph.spec.ts b/tests/e2e/graph.spec.ts
index 8add83f..0f2221e 100644
--- a/tests/e2e/graph.spec.ts
+++ b/tests/e2e/graph.spec.ts
@@ -144,6 +144,17 @@ test('Click on Ben node in graph', async ({ page }) => {
     await expect(page.getByText('Age', { exact: true })).toBeVisible();
 });
 
+test('Overflowing elements can be scrolled into view', async ({ page }) => {
+    await navigateToSavedGraphBySavedGraphsTable(
+        page,
+        'vanilla',
+        'graph_with_metadata',
+    );
+    await expect(page.getByText('Relationships')).not.toBeInViewport();
+    await page.getByText('Relationships').scrollIntoViewIfNeeded();
+    await expect(page.getByText('Relationships')).toBeInViewport();
+});
+
 test('Double click expand node and delete by floating actions button', async ({
     page,
 }) => {

From d75bac52fb215547dc8c73448e1e453922a71c53 Mon Sep 17 00:00:00 2001
From: Louis Chan <louisch@fastmail.com>
Date: Wed, 1 Apr 2026 18:33:17 +0800
Subject: [PATCH 3/4] Change test to check tooltip is entirely inside viewport

---
 tests/e2e/temporalview.spec.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/tests/e2e/temporalview.spec.ts b/tests/e2e/temporalview.spec.ts
index 4335260..175b480 100644
--- a/tests/e2e/temporalview.spec.ts
+++ b/tests/e2e/temporalview.spec.ts
@@ -36,7 +36,7 @@ async function hoverEdgeAndExpectTooltip(
     const box = await line.boundingBox();
     if (!box) throw new Error(`Element ${selector} is not visible or rendered`);
     await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
-    await expect(page.getByText(expectedText)).toBeVisible();
+    await expect(page.getByText(expectedText)).toBeInViewport({ ratio: 1 });
     await page.mouse.move(0, 0);
 }
 
@@ -48,7 +48,9 @@ test('Close temporal view button and open again', async ({ page }) => {
     await expect(page.locator('text="Ben"')).toBeVisible();
 });
 
-test('Temporal view hover over edges', async ({ page }) => {
+test('Temporal view hover over edges and ensure tooltips in viewport', async ({
+    page,
+}) => {
     await setupGraphPage(page);
 
     await hoverEdgeAndExpectTooltip(

From 2bb9856adbdd77a8052ef6d342cf67e57b253a93 Mon Sep 17 00:00:00 2001
From: Louis Chan <louisch@fastmail.com>
Date: Fri, 10 Apr 2026 17:05:16 +0800
Subject: [PATCH 4/4] Fix saved graphs test having wrong number of graphs

---
 tests/e2e/saved-graphs.spec.ts | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/tests/e2e/saved-graphs.spec.ts b/tests/e2e/saved-graphs.spec.ts
index 9ffdeec..ef9f2c9 100644
--- a/tests/e2e/saved-graphs.spec.ts
+++ b/tests/e2e/saved-graphs.spec.ts
@@ -16,10 +16,23 @@ test('Saved graphs table is visible', async ({ page }) => {
     await expect(page.getByText('PROPERTIES')).toBeVisible();
 });
 
-test('Card view has 7 cards per page', async ({ page }) => {
+const SAVED_GRAPHS_EXPECTED_CARDS_PER_PAGE = 8;
+// Currently, this is true. If more graphs are added into vanilla this number
+// needs to change.
+const VANILLA_FOLDER_TOTAL_NUM_GRAPHS = SAVED_GRAPHS_EXPECTED_CARDS_PER_PAGE;
+
+test(`Card view has ${SAVED_GRAPHS_EXPECTED_CARDS_PER_PAGE} cards per page`, async ({
+    page,
+}) => {
     await navigateToSavedGraphsFolder(page, 'vanilla');
-    await expect(page.getByText('1-7 of 7')).toBeVisible();
-    await expect(page.getByRole('button', { name: 'GRAPH' })).toHaveCount(7);
+    await expect(
+        page.getByText(
+            `1-${SAVED_GRAPHS_EXPECTED_CARDS_PER_PAGE} of ${VANILLA_FOLDER_TOTAL_NUM_GRAPHS}`,
+        ),
+    ).toBeVisible();
+    await expect(page.getByRole('button', { name: 'GRAPH' })).toHaveCount(
+        SAVED_GRAPHS_EXPECTED_CARDS_PER_PAGE,
+    );
 });
 
 test('Row sorting on saved graphs table by columns', async ({ page }) => {