From 1ea0ed4fd01a2a5a70560f8314a5368d68479fc9 Mon Sep 17 00:00:00 2001
From: Paul Irish <paulirish@google.com>
Date: Mon, 17 May 2021 17:39:53 -0700
Subject: [PATCH] misc(treemap): esc to zoom out

---
 lighthouse-treemap/app/src/main.js    | 6 +++++-
 lighthouse-treemap/types/treemap.d.ts | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/lighthouse-treemap/app/src/main.js b/lighthouse-treemap/app/src/main.js
index 5edfd5a8c9b0..6e928e1c2783 100644
--- a/lighthouse-treemap/app/src/main.js
+++ b/lighthouse-treemap/app/src/main.js
@@ -161,10 +161,14 @@ class TreemapViewer {
       this.updateColors();
     });
 
-    treemapEl.addEventListener('keypress', (e) => {
+    treemapEl.addEventListener('keyup', (e) => {
       if (!(e instanceof KeyboardEvent)) return;
 
       if (e.key === 'Enter') this.updateColors();
+
+      if (e.key === 'Escape' && this.treemap) {
+        this.treemap.zoom([]); // zoom out to root
+      }
     });
 
     treemapEl.addEventListener('mouseover', (e) => {
diff --git a/lighthouse-treemap/types/treemap.d.ts b/lighthouse-treemap/types/treemap.d.ts
index f74fd5fa9cad..23be6861de61 100644
--- a/lighthouse-treemap/types/treemap.d.ts
+++ b/lighthouse-treemap/types/treemap.d.ts
@@ -7,6 +7,7 @@ declare global {
     constructor(data: any, options: WebTreeMapOptions);
     render(el: HTMLElement): void;
     layout(data: any, el: HTMLElement): void;
+    zoom(address: number[]): void
   }
 
   interface WebTreeMapOptions {