Refactor

app/src/components/Tree/TreeNode/TreeNodeSubnodes.tsx

@@ -29,7 +29,7 @@ function useStagedRendering(treeNode: q.TreeNode<any>) {
     if (alreadyAdded < edges.length) {
       renderMoreAnimationFrame = (window as any).requestIdleCallback(
         () => {
-          setAlreadyAdded(alreadyAdded * 1.5)
+          setAlreadyAdded(Math.max(25, alreadyAdded * 1.5))
         },
         { timeout: 500 }
       )

app/src/components/Tree/TreeNode/effects/useAnimationToIndicateTopicUpdate.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react'
+var inViewport = require('in-viewport')
 
 export function useAnimationToIndicateTopicUpdate(
   ref: React.MutableRefObject<HTMLDivElement | undefined>,
@@ -9,6 +10,10 @@ export function useAnimationToIndicateTopicUpdate(
 ) {
   useEffect(() => {
     if (ref.current && shouldAnimate && Date.now() - lastUpdate < 3000 && !selected) {
+      if (!inViewport(ref.current)) {
+        return
+      }
+
       let timeout: any
       let animationFrame = requestAnimationFrame(() => {
         ref.current && ref.current.classList.add(className)

app/src/components/Tree/TreeNode/effects/useIsAllowedToAutoExpandState.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
 export function useIsAllowedToAutoExpandState(props: Props): boolean {
   const { settings, treeNode, isRoot } = props
   const [isAllowedToAutoExpand, setAllowAutoExpand] = useState(false)
+
   useEffect(() => {
     const newIsAllowedToAutoExpand = isRoot || treeNode.edgeCount() <= settings.get('autoExpandLimit')
     if (newIsAllowedToAutoExpand !== isAllowedToAutoExpand) {

app/src/components/Tree/TreeNode/effects/useViewModelSubscriptions.tsx

@@ -8,37 +8,37 @@ export function useViewModelSubscriptions(
   setSelected: (value: boolean) => void,
   setCollapsedOverride: (value: boolean) => void
 ) {
-  const selectionDidChange = () => {
-    const selected = treeNode.viewModel && treeNode.viewModel.isSelected()
-    treeNode.viewModel && setSelected(Boolean(selected))
-
-    if (selected && nodeRef && nodeRef.current) {
-      nodeRef.current.focus({ preventScroll: false })
-    }
-  }
-
-  const expandedDidChange = () => {
-    treeNode.viewModel && setCollapsedOverride(!treeNode.viewModel.isExpanded())
-  }
-
   useEffect(() => {
+    const selectionDidChange = () => {
+      const selected = treeNode.viewModel && treeNode.viewModel.isSelected()
+      treeNode.viewModel && setSelected(Boolean(selected))
+
+      if (selected && nodeRef && nodeRef.current) {
+        nodeRef.current.focus({ preventScroll: false })
+      }
+    }
+
+    const expandedDidChange = () => {
+      treeNode.viewModel && setCollapsedOverride(!treeNode.viewModel.isExpanded())
+    }
+
+    function addSubscriber() {
+      treeNode.viewModel = new TopicViewModel()
+      treeNode.viewModel.selectionChange.subscribe(selectionDidChange)
+      treeNode.viewModel.expandedChange.subscribe(expandedDidChange)
+    }
+
+    function removeSubscriber() {
+      if (treeNode.viewModel) {
+        treeNode.viewModel.selectionChange.unsubscribe(selectionDidChange)
+        treeNode.viewModel.expandedChange.unsubscribe(expandedDidChange)
+        treeNode.viewModel = undefined
+      }
+    }
+
     addSubscriber()
     return function cleanup() {
       removeSubscriber()
     }
   }, [treeNode])
-
-  function addSubscriber() {
-    treeNode.viewModel = new TopicViewModel()
-    treeNode.viewModel.selectionChange.subscribe(selectionDidChange)
-    treeNode.viewModel.expandedChange.subscribe(expandedDidChange)
-  }
-
-  function removeSubscriber() {
-    if (treeNode.viewModel) {
-      treeNode.viewModel.selectionChange.unsubscribe(selectionDidChange)
-      treeNode.viewModel.expandedChange.unsubscribe(expandedDidChange)
-      treeNode.viewModel = undefined
-    }
-  }
 }

app/src/components/Tree/TreeNode/index.tsx

@@ -48,10 +48,6 @@ function TreeNodeComponent(props: Props) {
   const isCollapsed =
     Boolean(collapsedOverride) === collapsedOverride ? Boolean(collapsedOverride) : !isAllowedToAutoExpand
 
-  const toggle = useCallback(() => {
-    setCollapsedOverride(!isCollapsed)
-  }, [isCollapsed])
-
   const didSelectTopic = useCallback(
     (event?: React.MouseEvent) => {
       event && event.stopPropagation()
@@ -64,17 +60,17 @@ function TreeNodeComponent(props: Props) {
     (event: React.MouseEvent) => {
       event.stopPropagation()
       didSelectTopic()
-      toggle()
+      setCollapsedOverride(!isCollapsed)
     },
-    [toggle, didSelectTopic]
+    [isCollapsed, didSelectTopic]
   )
 
   const toggleCollapsed = useCallback(
     (event: React.MouseEvent) => {
       event.stopPropagation()
-      toggle()
+      setCollapsedOverride(!isCollapsed)
     },
-    [toggle]
+    [isCollapsed]
   )
 
   const didObtainFocus = useCallback(() => {