feat(framestack): allow jump to start and bottom (#36007)

static/app/components/profiling/FrameStack/frameStackTable.tsx

@@ -13,7 +13,6 @@ import {
 } from 'sentry/utils/profiling/hooks/useVirtualizedTree/useVirtualizedTree';
 import {VirtualizedTreeNode} from 'sentry/utils/profiling/hooks/useVirtualizedTree/VirtualizedTreeNode';
 import {FlamegraphRenderer} from 'sentry/utils/profiling/renderers/flamegraphRenderer';
-import theme from 'sentry/utils/theme';
 
 import {FrameCallersTableCell} from './frameStack';
 import {FrameStackContextMenu} from './frameStackContextMenu';
@@ -215,7 +214,7 @@ export function FrameStackTable({
           onZoomIntoNodeClick={handleZoomIntoNodeClick}
           contextMenu={contextMenu}
         />
-        <div style={{position: 'relative', height: '100%', background: theme.white}}>
+        <TableItemsContainer>
           <div ref={clickedGhostRowRef} />
           <div ref={hoveredGhostRowRef} />
           <div
@@ -237,12 +236,19 @@ export function FrameStackTable({
               </GhostRowContainer>
             </div>
           </div>
-        </div>
+        </TableItemsContainer>
       </FrameCallersTable>
     </FrameBar>
   );
 }
 
+const TableItemsContainer = styled('div')`
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  background: ${p => p.theme.white};
+`;
+
 const GhostRowContainer = styled('div')`
   display: flex;
   width: 100%;

static/app/utils/profiling/hooks/useVirtualizedTree/useVirtualizedTree.tsx

@@ -611,6 +611,11 @@ export function useVirtualizedTree<T extends TreeLike>(
         return;
       }
 
+      // Cant move anywhere if there are no nodes
+      if (!tree.flattened.length) {
+        return;
+      }
+
       if (event.key === 'Enter') {
         handleExpandTreeNode(tree.flattened[latestStateRef.current.tabIndexKey], {
           expandChildren: true,
@@ -619,6 +624,27 @@ export function useVirtualizedTree<T extends TreeLike>(
 
       if (event.key === 'ArrowDown') {
         event.preventDefault();
+
+        if (event.metaKey || event.ctrlKey) {
+          const index = tree.flattened.length - 1;
+
+          props.scrollContainer!.scrollTo({
+            // We need to offset for the scrollMargin
+            top: index * props.rowHeight + props.rowHeight,
+          });
+          dispatch({type: 'set tab index key', payload: index});
+          updateGhostRow({
+            ref: clickedGhostRowRef,
+            tabIndexKey: index,
+            scrollTop: latestStateRef.current.scrollTop,
+            rowHeight: props.rowHeight,
+            interaction: 'active',
+          });
+          return;
+        }
+
+        // This is fine because we are only searching visible items
+        // and not the entire tree of nodes
         const indexInVisibleItems = items.findIndex(
           i => i.key === latestStateRef.current.tabIndexKey
         );
@@ -646,6 +672,22 @@ export function useVirtualizedTree<T extends TreeLike>(
 
       if (event.key === 'ArrowUp') {
         event.preventDefault();
+
+        if (event.metaKey || event.ctrlKey) {
+          props.scrollContainer!.scrollTo({top: 0});
+          dispatch({type: 'set tab index key', payload: 0});
+          updateGhostRow({
+            ref: clickedGhostRowRef,
+            tabIndexKey: 0,
+            scrollTop: latestStateRef.current.scrollTop,
+            rowHeight: props.rowHeight,
+            interaction: 'active',
+          });
+          return;
+        }
+
+        // This is fine because we are only searching visible items
+        // and not the entire tree of nodes
         const indexInVisibleItems = items.findIndex(
           i => i.key === latestStateRef.current.tabIndexKey
         );
@@ -671,7 +713,7 @@ export function useVirtualizedTree<T extends TreeLike>(
         }
       }
     },
-    [handleExpandTreeNode, items, tree.flattened, props.rowHeight]
+    [handleExpandTreeNode, items, tree.flattened, props.rowHeight, props.scrollContainer]
   );
 
   // When a row is hovered, we update the ghost row