From c4d45593c3a9ec3c8b56d7f5d234181405c8a132 Mon Sep 17 00:00:00 2001
From: Craig Harshbarger <pleek91@gmail.com>
Date: Tue, 22 Mar 2022 14:58:22 -0500
Subject: [PATCH 1/2] Pluck virtual scroller and compositions

---
 .../src/components/FlowsPageFlowList.vue      | 13 +++-
 .../src/components/VirtualScroller.vue        | 71 ++++++++++++++++++
 .../src/components/VirtualScrollerChunk.vue   | 50 +++++++++++++
 .../orion-design/src/components/index.ts      |  2 +
 .../orion-design/src/compositions/index.ts    |  4 +-
 .../compositions/useIntersectionObserver.ts   | 74 +++++++++++++++++++
 .../compositions/useSubscriptionWithPaging.ts | 72 ++++++++++++++++++
 7 files changed, 282 insertions(+), 4 deletions(-)
 create mode 100644 orion-ui/packages/orion-design/src/components/VirtualScroller.vue
 create mode 100644 orion-ui/packages/orion-design/src/components/VirtualScrollerChunk.vue
 create mode 100644 orion-ui/packages/orion-design/src/compositions/useIntersectionObserver.ts
 create mode 100644 orion-ui/packages/orion-design/src/compositions/useSubscriptionWithPaging.ts

diff --git a/orion-ui/packages/orion-design/src/components/FlowsPageFlowList.vue b/orion-ui/packages/orion-design/src/components/FlowsPageFlowList.vue
index e1af710721ed..b37facf4e887 100644
--- a/orion-ui/packages/orion-design/src/components/FlowsPageFlowList.vue
+++ b/orion-ui/packages/orion-design/src/components/FlowsPageFlowList.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="flows-list">
     <m-card shadow="sm">
-      <template v-for="flow in flows" :key="flow.id">
-        <FlowsPageFlowListItem :flow="flow" />
-      </template>
+      <VirtualScroller :items="flows" :item-estimate-height="70" @bottom="emit('bottom')">
+        <template #default="{ item }">
+          <FlowsPageFlowListItem :flow="item" />
+        </template>
+      </VirtualScroller>
     </m-card>
     <template v-if="empty">
       <div class="text-center my-8">
@@ -15,6 +17,7 @@
 
 <script lang="ts" setup>
   import { computed } from 'vue'
+  import VirtualScroller from './VirtualScroller.vue'
   import FlowsPageFlowListItem from '@/components/FlowsPageFlowListItem.vue'
   import { Flow } from '@/models/Flow'
 
@@ -22,5 +25,9 @@
     flows: Flow[],
   }>()
 
+  const emit = defineEmits<{
+    (event: 'bottom'): void,
+  }>()
+
   const empty = computed(() => props.flows.length === 0)
 </script>
\ No newline at end of file
diff --git a/orion-ui/packages/orion-design/src/components/VirtualScroller.vue b/orion-ui/packages/orion-design/src/components/VirtualScroller.vue
new file mode 100644
index 000000000000..20b131c2ca77
--- /dev/null
+++ b/orion-ui/packages/orion-design/src/components/VirtualScroller.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="virtual-scroller">
+    <template v-for="(chunk, index) in chunks" :key="index">
+      <VirtualScrollerChunk :height="itemEstimateHeight * chunk.length" v-bind="{ observerOptions }">
+        <template v-for="(item, itemIndex) in chunk" :key="itemIndex">
+          <slot :item="item as any" />
+        </template>
+      </VirtualScrollerChunk>
+    </template>
+    <div ref="bottom" class="virtual-scroller__bottom" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, onMounted, ref, watch, withDefaults } from 'vue'
+  import VirtualScrollerChunk from './VirtualScrollerChunk.vue'
+  import { useIntersectionObserver } from '@/compositions/useIntersectionObserver'
+
+  const props = withDefaults(defineProps<{
+    // any is the correct type here
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    items: Record<string, any>[],
+    itemEstimateHeight?: number,
+    chunkSize?: number,
+    observerOptions?: IntersectionObserverInit,
+  }>(), {
+    itemEstimateHeight: 50,
+    chunkSize: 50,
+    observerOptions: () =>({
+      rootMargin: '200px',
+    }),
+  })
+
+  const emit = defineEmits<{
+    (event: 'bottom'): void,
+  }>()
+
+  const bottom = ref<HTMLDivElement>()
+  const { observe, check } = useIntersectionObserver(intersect, props.observerOptions)
+
+  const chunks = computed(() => {
+    const chunks = []
+    const source = props.items
+
+    for (let i = 0; i < source.length; i += props.chunkSize) {
+      chunks.push(source.slice(i, i + props.chunkSize))
+    }
+
+    return chunks
+  })
+
+  function intersect(entries: IntersectionObserverEntry[]): void {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        emit('bottom')
+      }
+    })
+  }
+
+  watch(() => props.items, (current, previous) => {
+    if (previous.length >= current.length) {
+      return
+    }
+
+    check(bottom)
+  })
+
+  onMounted(() => {
+    observe(bottom)
+  })
+</script>
\ No newline at end of file
diff --git a/orion-ui/packages/orion-design/src/components/VirtualScrollerChunk.vue b/orion-ui/packages/orion-design/src/components/VirtualScrollerChunk.vue
new file mode 100644
index 000000000000..2386935a812f
--- /dev/null
+++ b/orion-ui/packages/orion-design/src/components/VirtualScrollerChunk.vue
@@ -0,0 +1,50 @@
+<template>
+  <div ref="el" class="virtual-scroller-item" :style="styles">
+    <template v-if="visible">
+      <slot />
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, onMounted, ref } from 'vue'
+  import { useIntersectionObserver } from '@/compositions/useIntersectionObserver'
+
+  const props = defineProps<{
+    height: number,
+    observerOptions: IntersectionObserverInit,
+  }>()
+
+  const styles = computed(() => ({
+    height: !visible.value ? `${height.value ?? props.height}px` : undefined,
+  }))
+
+  const el = ref<HTMLDivElement>()
+  const visible = ref(false)
+  const height = ref<number | null>(null)
+  const { observe } = useIntersectionObserver(intersect, props.observerOptions)
+
+  function setHeight(): void {
+    setTimeout(() => {
+      const rect = el.value!.getBoundingClientRect()
+
+      height.value = rect.height
+    })
+  }
+
+  function intersect(entries: IntersectionObserverEntry[]): void {
+    entries.forEach(entry => {
+      if (!entry.isIntersecting) {
+        setHeight()
+      }
+
+      setTimeout(() => {
+        visible.value = entry.isIntersecting
+      })
+    })
+  }
+
+  onMounted(() => {
+    observe(el)
+  })
+</script>
\ No newline at end of file
diff --git a/orion-ui/packages/orion-design/src/components/index.ts b/orion-ui/packages/orion-design/src/components/index.ts
index 7dc3a83a6759..e9995c090c52 100644
--- a/orion-ui/packages/orion-design/src/components/index.ts
+++ b/orion-ui/packages/orion-design/src/components/index.ts
@@ -51,6 +51,8 @@ export { default as TabSet } from './TabSet.vue'
 export { default as TagsInput } from './TagsInput.vue'
 export { default as TaskRunLink } from './TaskRunLink.vue'
 export { default as ValidationMessage } from './ValidationMessage.vue'
+export { default as VirtualScroller } from './VirtualScroller.vue'
+export { default as VirtualScrollerChunk } from './VirtualScrollerChunk.vue'
 export { default as WorkQueueCreateButton } from './WorkQueueCreateButton.vue'
 export { default as WorkQueueCreatePanel } from './WorkQueueCreatePanel.vue'
 export { default as WorkQueueEditPanel } from './WorkQueueEditPanel.vue'
diff --git a/orion-ui/packages/orion-design/src/compositions/index.ts b/orion-ui/packages/orion-design/src/compositions/index.ts
index a1ce86edb56f..6824b0af41a6 100644
--- a/orion-ui/packages/orion-design/src/compositions/index.ts
+++ b/orion-ui/packages/orion-design/src/compositions/index.ts
@@ -1 +1,3 @@
-export * from './useInjectedServices'
\ No newline at end of file
+export * from './useInjectedServices'
+export * from './useIntersectionObserver'
+export * from './useSubscriptionWithPaging'
\ No newline at end of file
diff --git a/orion-ui/packages/orion-design/src/compositions/useIntersectionObserver.ts b/orion-ui/packages/orion-design/src/compositions/useIntersectionObserver.ts
new file mode 100644
index 000000000000..29731925c329
--- /dev/null
+++ b/orion-ui/packages/orion-design/src/compositions/useIntersectionObserver.ts
@@ -0,0 +1,74 @@
+import { onMounted, onUnmounted, Ref } from 'vue'
+
+type useIntersectionObserverResponse = {
+  observe: (element: Ref<HTMLElement | undefined>) => void,
+  unobserve: (element: Ref<HTMLElement | undefined>) => void,
+  disconnect: () => void,
+  check: (element: Ref<HTMLElement | undefined>) => void,
+}
+
+export function useIntersectionObserver(callback: (entries: IntersectionObserverEntry[]) => void, options: IntersectionObserverInit): useIntersectionObserverResponse {
+
+  let intersectionObserver: IntersectionObserver | null = null
+
+  function observe(element: Ref<HTMLElement | undefined>): void {
+    const observer = getObserver()
+
+    if (element.value) {
+      observer.observe(element.value)
+    }
+  }
+
+  function unobserve(element: Ref<HTMLElement | undefined>): void {
+    const observer = getObserver()
+
+    if (element.value) {
+      observer.unobserve(element.value)
+    }
+  }
+
+  function disconnect(): void {
+    const observer = getObserver()
+
+    observer.disconnect()
+  }
+
+  function check(element: Ref<HTMLElement | undefined>): void {
+    if (!element.value) {
+      return
+    }
+
+    const observer = new IntersectionObserver(callback, options)
+
+    observer.observe(element.value)
+
+    setTimeout(() => observer.disconnect(), 100)
+  }
+
+  function getObserver(): IntersectionObserver {
+    if (!intersectionObserver) {
+      createObserver()
+    }
+
+    return intersectionObserver!
+  }
+
+  function createObserver(): void {
+    intersectionObserver = new IntersectionObserver(callback, options)
+  }
+
+  onMounted(() => {
+    createObserver()
+  })
+
+  onUnmounted(() => {
+    disconnect()
+  })
+
+  return {
+    observe,
+    disconnect,
+    unobserve,
+    check,
+  }
+}
\ No newline at end of file
diff --git a/orion-ui/packages/orion-design/src/compositions/useSubscriptionWithPaging.ts b/orion-ui/packages/orion-design/src/compositions/useSubscriptionWithPaging.ts
new file mode 100644
index 000000000000..c1540b3b43de
--- /dev/null
+++ b/orion-ui/packages/orion-design/src/compositions/useSubscriptionWithPaging.ts
@@ -0,0 +1,72 @@
+
+import { useSubscription } from '@prefecthq/vue-compositions'
+import Subscription from '@prefecthq/vue-compositions/src/subscribe/subscription'
+import { ActionArguments, ActionResponse, SubscriptionOptions } from '@prefecthq/vue-compositions/src/subscribe/types'
+import { unrefArgs, watchableArgs } from '@prefecthq/vue-compositions/src/subscribe/utilities'
+import { computed, isReactive, isRef, reactive, ref, unref, watch } from 'vue'
+import { UnionFilters } from '@/services/Filter'
+
+type UnionFiltersAction = (filters: UnionFilters) => any[] | Promise<any[]>
+type UnionFiltersActionResponse<T extends UnionFiltersAction> = {
+  loadMore: () => void,
+  response: ActionResponse<T>,
+}
+
+export function useSubscriptionWithPaging<T extends UnionFiltersAction>(
+  action: T,
+  args: ActionArguments<T>,
+  options: SubscriptionOptions = {},
+): UnionFiltersActionResponse<T> {
+  const subscriptions = reactive<Subscription<T>[]>([])
+  const pages = ref(0)
+
+  const response = computed<ActionResponse<T>>(() => {
+    const acc = [] as ActionResponse<T>
+
+    return subscriptions.reduce((acc, subscription) => {
+      const response = (subscription.response as any).value ?? []
+
+      return [...acc, ...response] as ActionResponse<T>
+    }, acc)
+  })
+
+  const loadMore = (): void => {
+    const [unwrappedFilters] = unrefArgs(args)
+    const limit = unwrappedFilters.limit ?? 200
+
+    if (subscriptions.length * limit > response.value.length) {
+      return
+    }
+
+    const offset = (unwrappedFilters.offset ?? limit) * pages.value
+    const subscriptionFilters = [{ ...unwrappedFilters, offset, limit }] as Parameters<T>
+    const subscription = useSubscription<T>(action, subscriptionFilters, options)
+
+    subscriptions.push(reactive(subscription))
+
+    pages.value++
+  }
+
+  if (
+    isRef(args) ||
+    isReactive(args) ||
+    (unref(args) as Parameters<T>).some(isRef) ||
+    (unref(args) as Parameters<T>).some(isReactive)
+  ) {
+    const argsToWatch = watchableArgs(args)
+
+    watch(argsToWatch, () => {
+      pages.value = 0
+      subscriptions.forEach(subscription => subscription.unsubscribe())
+      subscriptions.splice(0)
+
+      loadMore()
+    })
+  }
+
+  return reactive({
+    response,
+    loadMore,
+  })
+
+}
\ No newline at end of file

From 4954f18ca8e85843ff96ba5d91ee01fd8513d0ab Mon Sep 17 00:00:00 2001
From: Craig Harshbarger <pleek91@gmail.com>
Date: Tue, 22 Mar 2022 15:21:04 -0500
Subject: [PATCH 2/2] Fix class name

---
 .../orion-design/src/components/VirtualScrollerChunk.vue        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/orion-ui/packages/orion-design/src/components/VirtualScrollerChunk.vue b/orion-ui/packages/orion-design/src/components/VirtualScrollerChunk.vue
index 2386935a812f..a2df9c2988ad 100644
--- a/orion-ui/packages/orion-design/src/components/VirtualScrollerChunk.vue
+++ b/orion-ui/packages/orion-design/src/components/VirtualScrollerChunk.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="el" class="virtual-scroller-item" :style="styles">
+  <div ref="el" class="virtual-scroller-chunk" :style="styles">
     <template v-if="visible">
       <slot />
     </template>