Fix for janky scrolling on the run page

Author: matt-aitken

apps/webapp/app/components/primitives/TreeView/TreeView.tsx

@@ -19,7 +19,7 @@ export type TreeViewProps<TData> = {
   nodes: UseTreeStateOutput["nodes"];
   autoFocus?: boolean;
   virtualizer: Virtualizer<HTMLElement, Element>;
-  parentRef: MutableRefObject<HTMLElement | null>;
+  parentRef?: MutableRefObject<HTMLElement | null>;
   scrollRef?: MutableRefObject<HTMLElement | null>;
   onScroll?: (scrollTop: number) => void;
 } & Pick<UseTreeStateOutput, "getTreeProps" | "getNodeProps">;
@@ -42,9 +42,9 @@ export function TreeView<TData>({
 }: TreeViewProps<TData>) {
   useEffect(() => {
     if (autoFocus) {
-      parentRef.current?.focus();
+      parentRef?.current?.focus();
     }
-  }, [autoFocus, parentRef.current]);
+  }, [autoFocus, parentRef?.current]);
 
   const virtualItems = virtualizer.getVirtualItems();
 
@@ -58,7 +58,7 @@ export function TreeView<TData>({
   );
 
   useEffect(() => {
-    //subscribe to parentRef scroll event
+    //subscribe to scrollRef scroll event
     if (!scrollRef?.current || onScroll === undefined) return;
     scrollRef.current.addEventListener("scroll", scrollCallback);
     return () => scrollRef.current?.removeEventListener("scroll", scrollCallback);
@@ -67,7 +67,9 @@ export function TreeView<TData>({
   return (
     <motion.div
       ref={(element) => {
-        parentRef.current = element;
+        if (parentRef) {
+          parentRef.current = element;
+        }
         if (scrollRef) {
           scrollRef.current = element;
         }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx

@@ -319,7 +319,7 @@ function TasksTreeView({
               renderNode={({ node, state }) => (
                 <div
                   className={cn(
-                    "flex h-8 cursor-pointer items-center overflow-hidden rounded-l-sm pr-2",
+                    "delay-[25ms] flex h-8 cursor-pointer items-center overflow-hidden rounded-l-sm pr-2 transition-colors",
                     state.selected
                       ? "bg-grid-dimmed hover:bg-grid-bright"
                       : "bg-transparent hover:bg-grid-dimmed"
@@ -377,10 +377,7 @@ function TasksTreeView({
               )}
               onScroll={(scrollTop) => {
                 //sync the scroll to the tree
-                if (
-                  timelineScrollRef.current &&
-                  timelineScrollRef.current.scrollTop !== scrollTop
-                ) {
+                if (timelineScrollRef.current) {
                   timelineScrollRef.current.scrollTop = scrollTop;
                 }
               }}
@@ -571,7 +568,6 @@ function TimelineView({
               />
             )}
             <TreeView
-              parentRef={parentRef}
               scrollRef={timelineScrollRef}
               virtualizer={virtualizer}
               tree={events}
@@ -623,7 +619,7 @@ function TimelineView({
               }}
               onScroll={(scrollTop) => {
                 //sync the scroll to the tree
-                if (treeScrollRef.current && treeScrollRef.current.scrollTop !== scrollTop) {
+                if (treeScrollRef.current) {
                   treeScrollRef.current.scrollTop = scrollTop;
                 }
               }}
@@ -643,6 +639,7 @@ function NodeText({ node }: { node: RunEvent }) {
     </Paragraph>
   );
 }
+
 function NodeStatusIcon({ node }: { node: RunEvent }) {
   if (node.data.level !== "TRACE") return null;
   if (node.data.style.variant !== "primary") return null;