From 8bbe8aad947f3b016d0b3092383a2139c0246634 Mon Sep 17 00:00:00 2001
From: Mike Plummer <mikep@cypress.io>
Date: Fri, 10 Jun 2022 11:38:55 -0500
Subject: [PATCH 1/5] fix: SpecsList scrolling performance fixes

* Debounce virtualized list scroll monitor to avoid interrupting smooth scroll
* Fix 'scroll to top' watcher to only trigger when content of specs list changes rather than reference
---
 packages/app/src/specs/SpecsList.vue               | 14 +++++++++++++-
 .../src/composables/useVirtualList.ts              |  6 +++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/app/src/specs/SpecsList.vue b/packages/app/src/specs/SpecsList.vue
index edb17b1f014a..18431c229d90 100644
--- a/packages/app/src/specs/SpecsList.vue
+++ b/packages/app/src/specs/SpecsList.vue
@@ -394,7 +394,7 @@ useResizeObserver(containerProps.ref, (entries) => {
 
 // If you are scrolled down the virtual list and list changes,
 // reset scroll position to top of list
-watch(() => treeSpecList.value, () => scrollTo(0))
+watch(() => hashCode(treeSpecList.value.map((spec) => spec.id)), () => scrollTo(0))
 
 function getIdIfDirectory (row) {
   if (row.data.isLeaf && row.data) {
@@ -431,6 +431,18 @@ function refreshPage () {
   location.reload()
 }
 
+/**
+ * Generate a quasi-hash value to decompose an array of strings into a single numeric value that can be used to
+ * see whether it has changed from previous value(s).
+ */
+function hashCode (values: string[]): number {
+  return values.reduce((a, b) => {
+    a = ((a << 5) - a) + b.charCodeAt(0)
+
+    return a & a
+  }, 0)
+}
+
 </script>
 
 <style scoped>
diff --git a/packages/frontend-shared/src/composables/useVirtualList.ts b/packages/frontend-shared/src/composables/useVirtualList.ts
index 47d7735ada08..09017c5ec458 100644
--- a/packages/frontend-shared/src/composables/useVirtualList.ts
+++ b/packages/frontend-shared/src/composables/useVirtualList.ts
@@ -2,7 +2,7 @@ import type { Ref, CSSProperties } from 'vue'
 import { watch, ref, computed, shallowRef } from 'vue'
 import type { MaybeRef } from '@vueuse/core'
 import { useElementSize } from '@vueuse/core'
-import { isEqual } from 'lodash'
+import { debounce, isEqual } from 'lodash'
 
 export type UseVirtualListApi = ReturnType<typeof useVirtualList>['api']
 
@@ -161,9 +161,9 @@ export function useVirtualList<T = any> (list: MaybeRef<T[]>, options: UseVirtua
     scrollTo,
     containerProps: {
       ref: containerRef,
-      onScroll: () => {
+      onScroll: debounce(() => {
         calculateRange()
-      },
+      }, 100),
       style: containerStyle,
     },
     wrapperProps,

From 1cf0e3f073dec68d983f0789c84cfb2b88b2f2cb Mon Sep 17 00:00:00 2001
From: Mike Plummer <mikep@cypress.io>
Date: Fri, 10 Jun 2022 13:06:12 -0500
Subject: [PATCH 2/5] fix: Attempt to fix tooltip disposal issue

---
 packages/app/src/specs/RunStatusDots.vue            | 2 ++
 packages/frontend-shared/src/components/Tooltip.vue | 7 ++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/specs/RunStatusDots.vue b/packages/app/src/specs/RunStatusDots.vue
index 6fb3677ec09d..46c3d52915bc 100644
--- a/packages/app/src/specs/RunStatusDots.vue
+++ b/packages/app/src/specs/RunStatusDots.vue
@@ -8,6 +8,8 @@
       placement="top"
       :is-interactive="true"
       class="h-16px"
+      :show-group="props.gql.id"
+      :instant-move="true"
       popper-class="RunStatusDots_Tooltip"
     >
       <component
diff --git a/packages/frontend-shared/src/components/Tooltip.vue b/packages/frontend-shared/src/components/Tooltip.vue
index 9ad9749839e9..1ada3fd046ee 100644
--- a/packages/frontend-shared/src/components/Tooltip.vue
+++ b/packages/frontend-shared/src/components/Tooltip.vue
@@ -8,7 +8,8 @@
     :distance="distance"
     :skidding="skidding"
     :auto-hide="false /* to prevent the popper from getting focus */"
-    :delay="{show: 0, hide: 100 }"
+    :instant-move="instantMove"
+    :show-group="showGroup"
   >
     <slot />
     <template
@@ -35,6 +36,8 @@ const props = withDefaults(defineProps<{
   skidding?: number
   placement?: 'top' | 'right' | 'bottom' | 'left'
   popperClass?: string
+  instantMove?: boolean
+  showGroup?: string
 }>(), {
   color: 'dark',
   hideArrow: false,
@@ -44,6 +47,8 @@ const props = withDefaults(defineProps<{
   skidding: undefined,
   placement: undefined,
   popperClass: undefined,
+  instantMove: undefined,
+  showGroup: undefined,
 })
 
 const theme = computed(() => {

From 0a23a61ae93de05a36f093149c8495a56a63c17d Mon Sep 17 00:00:00 2001
From: Mike Plummer <mikep@cypress.io>
Date: Fri, 10 Jun 2022 15:33:49 -0500
Subject: [PATCH 3/5] fix: ACI styling issues

* Simplify scroll position reset trigger to just watch search
* Revert changes to virtualized list
---
 packages/app/src/specs/SpecsList.vue             | 16 ++--------------
 .../src/composables/useVirtualList.ts            |  6 +++---
 2 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/packages/app/src/specs/SpecsList.vue b/packages/app/src/specs/SpecsList.vue
index 18431c229d90..b058d021595b 100644
--- a/packages/app/src/specs/SpecsList.vue
+++ b/packages/app/src/specs/SpecsList.vue
@@ -392,9 +392,9 @@ useResizeObserver(containerProps.ref, (entries) => {
   }
 })
 
-// If you are scrolled down the virtual list and list changes,
+// If you are scrolled down the virtual list and the search filter changes,
 // reset scroll position to top of list
-watch(() => hashCode(treeSpecList.value.map((spec) => spec.id)), () => scrollTo(0))
+watch(() => debouncedSearchString.value, () => scrollTo(0))
 
 function getIdIfDirectory (row) {
   if (row.data.isLeaf && row.data) {
@@ -431,18 +431,6 @@ function refreshPage () {
   location.reload()
 }
 
-/**
- * Generate a quasi-hash value to decompose an array of strings into a single numeric value that can be used to
- * see whether it has changed from previous value(s).
- */
-function hashCode (values: string[]): number {
-  return values.reduce((a, b) => {
-    a = ((a << 5) - a) + b.charCodeAt(0)
-
-    return a & a
-  }, 0)
-}
-
 </script>
 
 <style scoped>
diff --git a/packages/frontend-shared/src/composables/useVirtualList.ts b/packages/frontend-shared/src/composables/useVirtualList.ts
index 09017c5ec458..47d7735ada08 100644
--- a/packages/frontend-shared/src/composables/useVirtualList.ts
+++ b/packages/frontend-shared/src/composables/useVirtualList.ts
@@ -2,7 +2,7 @@ import type { Ref, CSSProperties } from 'vue'
 import { watch, ref, computed, shallowRef } from 'vue'
 import type { MaybeRef } from '@vueuse/core'
 import { useElementSize } from '@vueuse/core'
-import { debounce, isEqual } from 'lodash'
+import { isEqual } from 'lodash'
 
 export type UseVirtualListApi = ReturnType<typeof useVirtualList>['api']
 
@@ -161,9 +161,9 @@ export function useVirtualList<T = any> (list: MaybeRef<T[]>, options: UseVirtua
     scrollTo,
     containerProps: {
       ref: containerRef,
-      onScroll: debounce(() => {
+      onScroll: () => {
         calculateRange()
-      }, 100),
+      },
       style: containerStyle,
     },
     wrapperProps,

From 54a08ad24dc10007f416df52e62eae7996a48812 Mon Sep 17 00:00:00 2001
From: Mike Plummer <mikep@cypress.io>
Date: Fri, 10 Jun 2022 15:50:19 -0500
Subject: [PATCH 4/5] fix: Tooltip hide issue

---
 packages/app/src/specs/RunStatusDots.vue            | 2 +-
 packages/frontend-shared/src/components/Tooltip.vue | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/specs/RunStatusDots.vue b/packages/app/src/specs/RunStatusDots.vue
index 46c3d52915bc..3e96336b3abe 100644
--- a/packages/app/src/specs/RunStatusDots.vue
+++ b/packages/app/src/specs/RunStatusDots.vue
@@ -8,8 +8,8 @@
       placement="top"
       :is-interactive="true"
       class="h-16px"
+      :hide-delay="0"
       :show-group="props.gql.id"
-      :instant-move="true"
       popper-class="RunStatusDots_Tooltip"
     >
       <component
diff --git a/packages/frontend-shared/src/components/Tooltip.vue b/packages/frontend-shared/src/components/Tooltip.vue
index 1ada3fd046ee..c84eaf0b75d6 100644
--- a/packages/frontend-shared/src/components/Tooltip.vue
+++ b/packages/frontend-shared/src/components/Tooltip.vue
@@ -8,7 +8,7 @@
     :distance="distance"
     :skidding="skidding"
     :auto-hide="false /* to prevent the popper from getting focus */"
-    :instant-move="instantMove"
+    :delay="{show: 0, hide: hideDelay }"
     :show-group="showGroup"
   >
     <slot />
@@ -36,6 +36,7 @@ const props = withDefaults(defineProps<{
   skidding?: number
   placement?: 'top' | 'right' | 'bottom' | 'left'
   popperClass?: string
+  hideDelay?: number
   instantMove?: boolean
   showGroup?: string
 }>(), {
@@ -47,6 +48,7 @@ const props = withDefaults(defineProps<{
   skidding: undefined,
   placement: undefined,
   popperClass: undefined,
+  hideDelay: 100,
   instantMove: undefined,
   showGroup: undefined,
 })

From 3c33a6be5a2698a91a4d7168b3e4f17bff29a7c0 Mon Sep 17 00:00:00 2001
From: Mike Plummer <mikep@cypress.io>
Date: Fri, 10 Jun 2022 17:02:57 -0500
Subject: [PATCH 5/5] fix: Fix cursor styling on tooltip headers

---
 packages/app/src/specs/LastUpdatedHeader.vue          | 2 +-
 packages/app/src/specs/SpecHeaderCloudDataTooltip.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/specs/LastUpdatedHeader.vue b/packages/app/src/specs/LastUpdatedHeader.vue
index b1f11a0c8c40..09f1ac31cbdc 100644
--- a/packages/app/src/specs/LastUpdatedHeader.vue
+++ b/packages/app/src/specs/LastUpdatedHeader.vue
@@ -4,7 +4,7 @@
     :is-interactive="true"
   >
     <div
-      class="decoration-dotted underline underline-gray-300 underline-offset-4"
+      class="cursor-default decoration-dotted underline underline-gray-300 underline-offset-4"
       tabindex="0"
       data-cy="last-updated-header"
     >
diff --git a/packages/app/src/specs/SpecHeaderCloudDataTooltip.vue b/packages/app/src/specs/SpecHeaderCloudDataTooltip.vue
index ab9815f1f43b..8902f7a0a986 100644
--- a/packages/app/src/specs/SpecHeaderCloudDataTooltip.vue
+++ b/packages/app/src/specs/SpecHeaderCloudDataTooltip.vue
@@ -4,7 +4,7 @@
     :is-interactive="true"
   >
     <div
-      class="decoration-dotted underline underline-gray-300 underline-offset-4"
+      class="cursor-default decoration-dotted underline underline-gray-300 underline-offset-4"
       tabindex="0"
     >
       {{ headerText }}