conversation composable + virtual scrolling for trees (somewhat)

src/components/conversation/conversation.js

@@ -20,17 +20,13 @@ import ThreadTree from 'src/components/thread_tree/thread_tree.vue'
 
 import { useInterfaceStore } from 'src/stores/interface.js'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
-import { useOAuthStore } from 'src/stores/oauth.js'
 import { useStatusesStore } from 'src/stores/statuses.js'
 import { useStreamingStore } from 'src/stores/streaming.js'
 
+import { useConversation } from 'src/composables/useConversation.js'
 import { useTreeConversationTopology } from 'src/composables/useTreeConversationTopology.js'
 import { useVirtualScrolling } from 'src/composables/useVirtualScrolling.js'
 
-import {
-  fetchConversation as apiFetchConversation,
-  fetchStatus as apiFetchStatus,
-} from 'src/api/public.js'
 import { WSConnectionStatus } from 'src/api/websocket.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -73,11 +69,22 @@ export default {
     RichContent,
   },
   setup(props) {
+    // # Helpers
+    const getStatusObject = (id) => useStatusesStore().allStatuses.get(id)
+    const getConversationId = (statusId) => {
+      const status = getStatusObject(statusId)
+      return get(
+        status,
+        'retweeted_status.statusnet_conversation_id',
+        get(status, 'statusnet_conversation_id'),
+      )
+    }
+
     const { statusId } = toRefs(props)
 
     const router = useRouter()
 
-    // # Main Configuration
+    // # Main Configuration / global state
     const { mergedConfig } = storeToRefs(useMergedConfigStore())
     const { mastoUserSocketStatus } = storeToRefs(useStreamingStore())
     const displayStyle = computed(() => mergedConfig.value.conversationDisplay)
@@ -86,12 +93,26 @@ export default {
         mergedConfig.value.useStreamingApi &&
         mastoUserSocketStatus === WSConnectionStatus.JOINED,
     )
-
-    // # Misc
-    const loadStatusError = ref(null)
     const { layoutType } = storeToRefs(useInterfaceStore())
     const mobileLayout = computed(() => layoutType.value === 'mobile')
 
+    // # Conversation Expansion
+    const expanded = ref(false)
+    const { isPage } = toRefs(props)
+    const isExpanded = computed(() => !!(expanded.value || isPage.value))
+    const toggleExpanded = () => {
+      expanded.value = !expanded.value
+    }
+    watch(expanded, (value) => {
+      if (value) {
+        fetchConversation()
+      } else {
+        resetDisplayState()
+      }
+    })
+    provide('isExpanded', isExpanded)
+    provide('isPage', isPage)
+
     // # Focus
     const focusedId = ref(statusId.value)
     const focused = computed(() => (isExpanded.value ? focusedId.value : null))
@@ -109,49 +130,15 @@ export default {
     provide('focused', focused)
 
     // # Main things
-    const getStatusObject = (id) => useStatusesStore().allStatuses.get(id)
+    const {
-    const getConversationId = (statusId) => {
+      currentStatus,
-      const status = getStatusObject(statusId)
+      conversation,
-      return get(
+      replies,
-        status,
+      getReplies,
-        'retweeted_status.statusnet_conversation_id',
+      fetchConversation,
-        get(status, 'statusnet_conversation_id'),
+      loadError,
-      )
+    } = useConversation(focusedId, isExpanded)
-    }
-    const currentStatus = computed(() => getStatusObject(focusedId.value))
 
-    const fetchConversation = async () => {
-      if (currentStatus.value) {
-        const {
-          data: { ancestors, descendants },
-          timestamp,
-        } = await apiFetchConversation({
-          id: statusId.value,
-          credentials: useOAuthStore().token,
-        })
-
-        useStatusesStore().addNewStatuses({ statuses: ancestors, timestamp })
-        useStatusesStore().addNewStatuses({
-          statuses: descendants,
-          timestamp,
-        })
-      } else {
-        try {
-          loadStatusError.value = null
-
-          const { data: status } = await apiFetchStatus({
-            id: statusId.value,
-            credentials: useOAuthStore().token,
-          })
-
-          useStatusesStore().addNewStatuses({ statuses: [status] })
-          fetchConversation()
-        } catch (error) {
-          console.error(error)
-          loadStatusError.value = error
-        }
-      }
-    }
     const resetDisplayState = () => {
       setFocused(statusId.value)
       resetThreadDisplay()
@@ -171,80 +158,6 @@ export default {
       }
     })
 
-    const sortById = (a, b) => {
-      const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
-      const idB = b.type === 'retweet' ? b.retweeted_status.id : b.id
-      const seqA = Number(idA)
-      const seqB = Number(idB)
-      const isSeqA = !Number.isNaN(seqA)
-      const isSeqB = !Number.isNaN(seqB)
-      if (isSeqA && isSeqB) {
-        return seqA < seqB ? -1 : 1
-      } else if (isSeqA && !isSeqB) {
-        return -1
-      } else if (!isSeqA && isSeqB) {
-        return 1
-      } else {
-        return idA < idB ? -1 : 1
-      }
-    }
-    const conversationId = computed(() => getConversationId(statusId.value))
-    const conversation = computed(() => {
-      if (!currentStatus.value) {
-        return []
-      }
-
-      if (!isExpanded.value) {
-        return [currentStatus.value]
-      }
-
-      const conversation = useStatusesStore().conversations.get(
-        conversationId.value,
-      )
-
-      return [...conversation.keys()]
-        .map((k) => useStatusesStore().allStatuses.get(k))
-        .filter((status) => status.type != 'repeat') // Old backend behavior?
-        .toSorted(sortById)
-    })
-    const replies = computed(() =>
-      conversation.value.reduce(
-        (result, { id, in_reply_to_status_id: irid }, index) => {
-          if (irid) {
-            if (!result.has(irid)) {
-              result.set(irid, new Set())
-            }
-            result.get(irid).add({
-              name: `#${index}`,
-              id,
-            })
-          }
-          return result
-        },
-        new Map(),
-      ),
-    )
-    const getReplies = (id) => replies.value.get(id) ?? new Set()
-    provide('conversation', conversation)
-    provide('replies', replies)
-
-    // # Conversation Expansion
-    const expanded = ref(false)
-    const { isPage } = toRefs(props)
-    const isExpanded = computed(() => !!(expanded.value || isPage.value))
-    const toggleExpanded = () => {
-      expanded.value = !expanded.value
-    }
-    watch(expanded, (value) => {
-      if (value) {
-        fetchConversation()
-      } else {
-        resetDisplayState()
-      }
-    })
-    provide('isExpanded', isExpanded)
-    provide('isPage', isPage)
-
     // Component created
     if (isPage.value) {
       fetchConversation()
@@ -280,6 +193,21 @@ export default {
     } = useTreeConversationTopology(conversation, replies, focusedId)
     provide('threadDisplay', threadDisplay)
 
+    const ancestorsElement = useTemplateRef('ancestors')
+    const {
+      heightChart: heightChartAncestors,
+      changeSuspendState: changeSuspendStateAncestors,
+      updateVirtualHeight: updateVirtualHeightAncestors,
+    } = useVirtualScrolling(currentAncestors, ancestorsElement)
+
+    const currentLevel = computed(() => [currentStatus.value])
+    const currentLevelElement = useTemplateRef('currentLevel')
+    const {
+      heightChart: heightChartCurrentLevel,
+      changeSuspendState: changeSuspendStateCurrentLevel,
+      updateVirtualHeight: updateVirtualHeightCurrentLevel,
+    } = useVirtualScrolling(currentLevel, currentLevelElement)
+
     const treeViewIsSimple = computed(
       () => !mergedConfig.value.conversationTreeAdvanced,
     )
@@ -296,14 +224,6 @@ export default {
       () => mergedConfig.value.conversationOtherRepliesButton === 'below',
     )
 
-    // # Virtual scrolling stuff
-    const onStatusSuspendStateChange = ({ id, suspend }) => {
-      changeSuspendStateLinear({ id, suspend })
-    }
-    const updateVirtualHeight = ({ id, height }) => {
-      updateVirtualHeightLinear({ id, height })
-    }
-
     // # Scrolling
     const tryScrollTo = (id) => {
       if (!id) {
@@ -340,7 +260,7 @@ export default {
 
     return {
       // # Misc
-      loadStatusError,
+      loadError,
       mobileLayout,
 
       // # Focus
@@ -357,20 +277,28 @@ export default {
       isExpanded,
       toggleExpanded,
 
-      // # Virtual scrolling stuff
-      onStatusSuspendStateChange,
-      updateVirtualHeight,
-
       // # Misc UI things
       getStatusClasses,
 
       // # Linear style stuff
       isLinearView,
+
+      // ## Linear virtual scrolling
       heightChartLinear,
+      changeSuspendStateLinear,
+      updateVirtualHeightLinear,
 
       // # Tree style stuff
       isTreeView,
 
+      // ## Tree virtual scrolling
+      heightChartAncestors,
+      changeSuspendStateAncestors,
+      updateVirtualHeightAncestors,
+      heightChartCurrentLevel,
+      changeSuspendStateCurrentLevel,
+      updateVirtualHeightCurrentLevel,
+
       // ## Tree state
       // ### Topology
       topLevel,
@@ -379,7 +307,7 @@ export default {
       // ### Thread Display
       showThreadRecursively,
 
-      // ## Derived values and config
+      // ### Derived values and config
       treeViewIsSimple,
       shouldShowAllConversationButton,
       shouldShowAncestors,

src/components/conversation/conversation.vue

@@ -42,7 +42,7 @@
       ref="body"
       :class="{ 'panel-body': isExpanded }"
     >
-      <p v-if="!loadStatusError">
+      <p v-if="!loadError">
         <FAIcon
           spin
           icon="circle-notch"
@@ -50,7 +50,7 @@
         {{ $t('status.loading') }}
       </p>
       <p v-else>
-        {{ $t('status.load_error', { error: loadStatusError }) }}
+        {{ $t('status.load_error', { error: loadError }) }}
       </p>
     </div>
     <div
@@ -88,6 +88,7 @@
         </div>
         <div
           v-if="shouldShowAncestors"
+          ref="ancestors"
           class="thread-ancestors"
         >
           <article
@@ -107,8 +108,8 @@
 
               @goto="setFocused"
               @dive="diveIntoStatus(status.id)"
-              @suspendable-state-change="onStatusSuspendStateChange"
+              @suspendable-state-change="changeSuspendStateAncestors"
-              @height-change="updateVirtualHeight"
+              @height-change="updateVirtualHeightAncestors"
             />
             <div
               v-if="shouldShowOtherRepliesButton && getReplies(status.id).size > 1"
@@ -139,17 +140,32 @@
             </div>
           </article>
         </div>
-        <ThreadTree
+        <div
-          :status-id="currentStatus.id"
+          class="currentStatus"
-          :depth="0"
+          ref="currentLevel"
+        >
+          <!-- Technically this will always have a single element but -->
+          <!-- it's more convenient for us to use a v-for here -->
+          <template v-for="element in heightChartCurrentLevel">
+            <ThreadTree
+              v-if="element.type === 'status'"
+              :status-id="currentStatus.id"
+              :depth="0"
 
-          @goto="setFocused"
+              @goto="setFocused"
-          @dive="diveIntoStatus"
+              @dive="diveIntoStatus"
-          @toggle-expanded="toggleExpanded"
+              @toggle-expanded="toggleExpanded"
-          @show-thread-recursively="showThreadRecursively"
+              @show-thread-recursively="showThreadRecursively"
-          @suspendable-state-change="onStatusSuspendStateChange"
+              @suspendable-state-change="changeSuspendStateCurrentLevel"
-          @height-change="updateVirtualHeight"
+              @height-change="updateVirtualHeightCurrentLevel"
-        />
+            />
+            <div
+              v-if="element.type === 'spacer'"
+              class="virtual-spacer"
+              :style="{ height: element.height + 'px' }"
+            />
+          </template>
+        </div>
       </div>
       <div
         v-else-if="isLinearView"
@@ -176,8 +192,8 @@
 
             @goto="setFocused"
             @toggle-expanded="toggleExpanded"
-            @suspendable-state-change="onStatusSuspendStateChange"
+            @suspendable-state-change="changeSuspendStateLinear"
-            @height-change="updateVirtualHeight"
+            @height-change="updateVirtualHeightLinear"
           />
         </article>
       </div>

src/components/thread_tree/thread_tree.js

@@ -15,7 +15,19 @@ const ThreadTree = {
     statusId: String,
     depth: Number,
   },
+  data() {
+    return {
+      resizeObserver: new ResizeObserver(this.updateVirtualHeight),
+    }
+  },
+  mounted() {
+    this.resizeObserver.observe(this.$refs.root)
+  },
+  unmounted() {
+    this.resizeObserver.disconnect()
+  },
   emits: [
+    'heightChange',
     'suspendableStateChange',
     'goto',
     'dive',
@@ -88,6 +100,14 @@ const ThreadTree = {
     getReplies(id) {
       return this.replies.get(id) ?? new Set()
     },
+    updateVirtualHeight(e) {
+      const [entry] = e
+      this.$emit('heightChange', {
+        id: this.statusId,
+        height: entry.contentRect.height,
+        element: this.$refs.root,
+      })
+    },
   },
 }
 

src/components/thread_tree/thread_tree.vue

@@ -1,5 +1,8 @@
 <template>
-  <article class="thread-tree">
+<article
+  ref="root"
+  class="thread-tree"
+>
     <Status
       :key="statusId"
       class="conversation-status conversation-status-treeview panel-body"
@@ -12,7 +15,7 @@
       @dive="$emit('dive', statusId)"
       @goto="$emit('goto', statusId)"
       @toggle-expanded="$emit('toggleExpanded', statusId)"
-      @suspendable-state-change="$emit('suspendableStateChange', e)"
+      @suspendable-state-change="(e) => $emit('suspendableStateChange', e)"
     />
     <div
       v-if="currentReplies.length > 0 && threadShowing"

src/composables/useConversation.js

@@ -0,0 +1,124 @@
+import { get } from 'lodash-es'
+import { computed, provide, ref } from 'vue'
+
+import { useOAuthStore } from 'src/stores/oauth.js'
+import { useStatusesStore } from 'src/stores/statuses.js'
+
+import {
+  fetchConversation as apiFetchConversation,
+  fetchStatus as apiFetchStatus,
+} from 'src/api/public.js'
+
+export function useConversation(statusId, expanded) {
+  const getStatusObject = (id) => useStatusesStore().allStatuses.get(id)
+  const getConversationId = (statusId) => {
+    const status = getStatusObject(statusId)
+    return get(
+      status,
+      'retweeted_status.statusnet_conversation_id',
+      get(status, 'statusnet_conversation_id'),
+    )
+  }
+
+  const loadError = ref(null)
+  const currentStatus = computed(() => getStatusObject(statusId.value))
+
+  const sortById = (a, b) => {
+    const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
+    const idB = b.type === 'retweet' ? b.retweeted_status.id : b.id
+    const seqA = Number(idA)
+    const seqB = Number(idB)
+    const isSeqA = !Number.isNaN(seqA)
+    const isSeqB = !Number.isNaN(seqB)
+    if (isSeqA && isSeqB) {
+      return seqA < seqB ? -1 : 1
+    } else if (isSeqA && !isSeqB) {
+      return -1
+    } else if (!isSeqA && isSeqB) {
+      return 1
+    } else {
+      return idA < idB ? -1 : 1
+    }
+  }
+  const conversationId = computed(() => getConversationId(statusId.value))
+  const conversation = computed(() => {
+    if (!currentStatus.value) {
+      return []
+    }
+
+    if (!expanded.value) {
+      return [currentStatus.value]
+    }
+
+    const conversation = useStatusesStore().conversations.get(
+      conversationId.value,
+    )
+
+    return [...conversation.keys()]
+      .map((k) => useStatusesStore().allStatuses.get(k))
+      .filter((status) => status.type != 'repeat') // Old backend behavior?
+      .toSorted(sortById)
+  })
+  const replies = computed(() =>
+    conversation.value.reduce(
+      (result, { id, in_reply_to_status_id: irid }, index) => {
+        if (irid) {
+          if (!result.has(irid)) {
+            result.set(irid, new Set())
+          }
+          result.get(irid).add({
+            name: `#${index}`,
+            id,
+          })
+        }
+        return result
+      },
+      new Map(),
+    ),
+  )
+  const getReplies = (id) => replies.value.get(id) ?? new Set()
+  provide('conversation', conversation)
+  provide('replies', replies)
+
+  const fetchConversation = async () => {
+    if (currentStatus.value) {
+      const {
+        data: { ancestors, descendants },
+        timestamp,
+      } = await apiFetchConversation({
+        id: statusId.value,
+        credentials: useOAuthStore().token,
+      })
+
+      useStatusesStore().addNewStatuses({ statuses: ancestors, timestamp })
+      useStatusesStore().addNewStatuses({
+        statuses: descendants,
+        timestamp,
+      })
+    } else {
+      try {
+        loadError.value = null
+
+        const { data: status } = await apiFetchStatus({
+          id: statusId.value,
+          credentials: useOAuthStore().token,
+        })
+
+        useStatusesStore().addNewStatuses({ statuses: [status] })
+        fetchConversation()
+      } catch (error) {
+        console.error(error)
+        loadError.value = error
+      }
+    }
+  }
+
+  return {
+    currentStatus,
+    conversation,
+    replies,
+    getReplies,
+    fetchConversation,
+    loadError,
+  }
+}

src/composables/useVirtualScrolling.js

@@ -63,11 +63,11 @@ export function useVirtualScrolling(conversation, body) {
   }
 
   // Scrolling
-  const { y: topScrollBoundary } = useScrollPosition()
+  const { y: scrollY } = useScrollPosition()
   const { height: windowHeight } = useWindowSize()
 
-  const realTopScrollBoundary = ref(0)
+  const topScrollBoundary = ref(0)
-  const realBottomScrollBoundary = ref(0)
+  const bottomScrollBoundary = ref(0)
   const updateBoundaries = () => {
     if (!body.value) return // Not mounted yet
 
@@ -76,11 +76,11 @@ export function useVirtualScrolling(conversation, body) {
     const distanceItemTopToWindowTop = 0 - top
     const distanceItemTopToWindowBottom = windowHeight.value - top
 
-    realTopScrollBoundary.value = distanceItemTopToWindowTop
+    topScrollBoundary.value = distanceItemTopToWindowTop
-    realBottomScrollBoundary.value = distanceItemTopToWindowBottom
+    bottomScrollBoundary.value = distanceItemTopToWindowBottom
   }
   watch(windowHeight, updateBoundaries)
-  watch(topScrollBoundary, updateBoundaries)
+  watch(scrollY, updateBoundaries)
   watch(totalHeight, updateBoundaries)
   onMounted(updateBoundaries)
 
@@ -113,17 +113,17 @@ export function useVirtualScrolling(conversation, body) {
       const itemBottomBoundary = heightChartItem.top + heightChartItem.height
       const itemTopBoundary = heightChartItem.top
 
-      const finalTopScrollBoundary = realTopScrollBoundary.value - buffer.value
+      const finalTopScrollBoundary = topScrollBoundary.value - buffer.value
       const finalBottomScrollBoundary =
-        realBottomScrollBoundary.value + buffer.value
+        bottomScrollBoundary.value + buffer.value
 
       // To be visible, item's bottom boundary shoud be below top scroll boundary)
-      const belowTopBoundary = itemBottomBoundary > finalTopScrollBoundary
+      const isBelowTopBoundary = itemBottomBoundary > finalTopScrollBoundary
       // To be visible, item's top boundary shoud be above bottom scroll boundary)
-      const aboveBottomBoundary = itemTopBoundary < finalBottomScrollBoundary
+      const isAboveBottomBoundary = itemTopBoundary < finalBottomScrollBoundary
       // This accounts for the case where item's boundaries exceed scroll boundary
 
-      heightChartItem.visible = belowTopBoundary && aboveBottomBoundary
+      heightChartItem.visible = isBelowTopBoundary && isAboveBottomBoundary
     })
 
     // Group invisible statuses into spacers