Scroll selected node into sandwich view on mount (#126)

src/views/profile-table-view.tsx

@@ -154,7 +154,7 @@ export class ProfileTableView extends Component<ProfileTableViewProps, void> {
     }
   }
 
-  render() {
+  private getFrameList = (): Frame[] => {
     const {profile, sortMethod} = this.props
 
     const frameList: Frame[] = []
@@ -181,6 +181,26 @@ export class ProfileTableView extends Component<ProfileTableViewProps, void> {
       frameList.reverse()
     }
 
+    return frameList
+  }
+
+  private listView: ScrollableListView | null = null
+  private listViewRef = (listView: ScrollableListView | null) => {
+    if (listView === this.listView) return
+    this.listView = listView
+
+    const {selectedFrame} = this.props
+    if (!selectedFrame || !listView) return
+    const index = this.getFrameList().indexOf(selectedFrame)
+    if (index === -1) return
+    listView.scrollIndexIntoView(index)
+  }
+
+  render() {
+    const {sortMethod} = this.props
+
+    const frameList = this.getFrameList()
+
     const renderItems = (firstIndex: number, lastIndex: number) => {
       const rows: JSX.Element[] = []
 
@@ -235,6 +255,8 @@ export class ProfileTableView extends Component<ProfileTableViewProps, void> {
           </thead>
         </table>
         <ScrollableListView
+          ref={this.listViewRef}
+          axis={'y'}
           items={listItems}
           className={css(style.scrollView)}
           renderItems={renderItems}

src/views/scrollable-list-view.tsx

@@ -9,6 +9,7 @@ export interface ListItem {
 
 interface ScrollableListViewProps {
   items: ListItem[]
+  axis: 'x' | 'y'
   renderItems: (firstVisibleIndex: number, lastVisibleIndex: number) => JSX.Element | JSX.Element[]
   className?: string
 }
@@ -79,6 +80,22 @@ export class ScrollableListView extends Component<
     this.setState({invisiblePrefixSize, firstVisibleIndex, lastVisibleIndex})
   }
 
+  private pendingScroll = 0
+  public scrollIndexIntoView(index: number) {
+    this.pendingScroll = this.props.items.reduce((sum, cur, i) => {
+      if (i >= index) return sum
+      return sum + cur.size
+    }, 0)
+  }
+  private applyPendingScroll() {
+    if (!this.viewport) return
+
+    const leftOrTop = this.props.axis === 'y' ? 'top' : 'left'
+    this.viewport.scrollTo({
+      [leftOrTop]: this.pendingScroll,
+    })
+  }
+
   componentWillReceiveProps(nextProps: ScrollableListViewProps) {
     if (this.props.items !== nextProps.items) {
       this.recomputeVisibleIndices(nextProps)
@@ -86,6 +103,7 @@ export class ScrollableListView extends Component<
   }
 
   componentDidMount() {
+    this.applyPendingScroll()
     this.recomputeVisibleIndices(this.props)
     window.addEventListener('resize', this.onWindowResize)
   }