Refactor

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
-    }
-  }
 }