Seems non-ideal. Typically range controls handle this case.

![Screen Recording 2019-04-12 at 07 54 PM](https://user-images.githubusercontent.com/810438/56059844-0e041100-5d5d-11e9-892c-f3872414ffaa.gif)


---
Originally reported by @gaearon via https://github.com/bvaughn/react-devtools-experimental/issues/141
import SnapshotCommitListItem from './SnapshotCommitListItem';
import {minBarWidth} from './constants';
import styles from './SnapshotCommitList.css';
export type ItemData = {|
  commitDurations: Array<number>,
  commitTimes: Array<number>,
  filteredCommitIndices: Array<number>,
  isMouseDown: boolean,
  maxDuration: number,
  selectedCommitIndex: number | null,
  selectedFilteredCommitIndex: number | null,
  selectCommitIndex: (index: number) => void,
|};
type Props = {|
  commitDurations: Array<number>,
  commitTimes: Array<number>,
  filteredCommitIndices: Array<number>,
  selectedCommitIndex: number | null,
  selectedFilteredCommitIndex: number | null,
  selectCommitIndex: (index: number) => void,
|};
export default function SnapshotCommitList({
  commitDurations,
  commitTimes,
  filteredCommitIndices,
  selectedCommitIndex,
  selectedFilteredCommitIndex,
  selectCommitIndex,
}: Props) {
  return (