Introduce filtering via Ctrl+F/Cmd+F into the sandwich view (#293)

This is the first step towards fixing #38. 

I started with the easiest part from a UI-paradigm perspective, and also the place that's the most confusing that search doesn't work. Before this PR, browers' Cmd+F/Ctrl+F would *look* like it worked in the Sandwich view, but they wouldn't work fully because the view in the sandwich view is a virtualized table, meaning that it doesn't put all of the rows in the DOM. Instead, it only renders enough to fill the viewport to make rendering much faster.

Here's what the changes from this PR look like in action:

![Kapture 2020-07-12 at 23 17 33](https://user-images.githubusercontent.com/150329/87276802-ef2b8780-c495-11ea-9856-9c834ea7f028.gif)

Before closing #38, I'll be adding search functionality to the flamechart views too.

src/store/actions.ts

@@ -8,36 +8,19 @@ import {HashParams} from '../lib/hash-params'
 import {actionCreatorWithIndex} from './profiles-state'
 
 export namespace actions {
-  // Set the top-level profile group from which other data will be derived
   export const setProfileGroup = actionCreator<ProfileGroup>('setProfileGroup')
-
-  // Set the index into the profile group to view
   export const setProfileIndexToView = actionCreator<number>('setProfileIndexToView')
-
   export const setGLCanvas = actionCreator<HTMLCanvasElement | null>('setGLCanvas')
-
-  // Set which top-level view should be displayed
   export const setViewMode = actionCreator<ViewMode>('setViewMode')
-
-  // Set whether or not recursion should be flattened when viewing flamegraphs
   export const setFlattenRecursion = actionCreator<boolean>('setFlattenRecursion')
-
-  // Set whether a file drag is currently active. Used to indicate that the
-  // application is a valid drop target.
+  export const setSearchQuery = actionCreator<string>('setSearchQuery')
+  export const setSearchIsActive = actionCreator<boolean>('setSearchIsActive')
   export const setDragActive = actionCreator<boolean>('setDragActive')
-
-  // Set whether the application is currently in a loading state. Used to
-  // display a loading progress bar.
   export const setLoading = actionCreator<boolean>('setLoading')
-
-  // Set whether the application is in an errored state.
   export const setError = actionCreator<boolean>('setError')
-
-  // Set whether parameters defined by the URL encoded k=v pairs after the # in the URL
   export const setHashParams = actionCreator<HashParams>('setHashParams')
 
   export namespace sandwichView {
-    // Set the table sorting method used for the sandwich view.
     export const setTableSortMethod = actionCreator<SortMethod>('sandwichView.setTableSortMethod')
 
     export const setSelectedFrame = actionCreatorWithIndex<Frame | null>(

src/store/index.ts

@@ -19,20 +19,43 @@ export const enum ViewMode {
 }
 
 export interface ApplicationState {
+  // The top-level profile group from which most other data will be derived
+  profileGroup: ProfileGroupState
+
+  // Parameters defined by the URL encoded k=v pairs after the # in the URL
   hashParams: HashParams
 
   glCanvas: HTMLCanvasElement | null
 
+  // Which top-level view should be displayed
+  viewMode: ViewMode
+
+  // True if recursion should be flattened when viewing flamegraphs
   flattenRecursion: boolean
 
-  viewMode: ViewMode
+  // The query used in top-level views
+  //
+  // An empty string indicates that the search is open by no filter is applied.
+  // searchIsActive is stored separately, because we may choose to persist the
+  // query even when the search input is closed.
+  searchQuery: string
+  searchIsActive: boolean
+
+  // True when a file drag is currently active. Used to indicate that the
+  // application is a valid drop target.
   dragActive: boolean
+
+  // True when the application is currently in a loading state. Used to
+  // display a loading progress bar.
   loading: boolean
+
+  // True when the application is an error state, e.g. because the profile
+  // imported was invalid.
   error: boolean
 
+  // The table sorting method using for the sandwich view, specifying the column
+  // to sort by, and the direction to sort that clumn.
   tableSortMethod: SortMethod
-
-  profileGroup: ProfileGroupState
 }
 
 const protocol = window.location.protocol
@@ -56,6 +79,9 @@ export function createAppStore(initialState?: ApplicationState): redux.Store<App
 
     viewMode: setter<ViewMode>(actions.setViewMode, ViewMode.CHRONO_FLAME_CHART),
 
+    searchQuery: setter<string>(actions.setSearchQuery, ''),
+    searchIsActive: setter<boolean>(actions.setSearchIsActive, false),
+
     glCanvas: setter<HTMLCanvasElement | null>(actions.setGLCanvas, null),
 
     dragActive: setter<boolean>(actions.setDragActive, false),

src/store/profiles-state.ts

@@ -12,7 +12,10 @@ import {objectsHaveShallowEquality} from '../lib/utils'
 
 export type ProfileGroupState = {
   name: string
+
+  // The index within the list of profiles currently being viewed
   indexToView: number
+
   profiles: ProfileState[]
 } | null