Add a hash param to control view-mode (#362)

e.g. "view=left-heavy", "view=sandwich"

Fixes #355

src/app-state/index.ts

@@ -1,4 +1,5 @@
 import {Atom} from '../lib/atom'
+import {ViewMode} from '../lib/view-mode'
 import {getHashParams, HashParams} from '../lib/hash-params'
 import {ProfileGroupAtom} from './profile-group'
 
@@ -13,12 +14,6 @@ export const flattenRecursionAtom = new Atom<boolean>(false, 'flattenRecursion')
 export const searchIsActiveAtom = new Atom<boolean>(false, 'searchIsActive')
 export const searchQueryAtom = new Atom<string>('', 'searchQueryAtom')
 
-export const enum ViewMode {
-  CHRONO_FLAME_CHART,
-  LEFT_HEAVY_FLAME_GRAPH,
-  SANDWICH_VIEW,
-}
-
 // Which top-level view should be displayed
 export const viewModeAtom = new Atom<ViewMode>(ViewMode.CHRONO_FLAME_CHART, 'viewMode')
 

src/lib/hash-params.ts

@@ -1,7 +1,23 @@
+import {ViewMode} from '../lib/view-mode'
+
 export interface HashParams {
   profileURL?: string
   title?: string
   localProfilePath?: string
+  viewMode?: ViewMode
+}
+
+function getViewMode(value: string): ViewMode | null {
+  switch (value) {
+    case 'time-ordered':
+      return ViewMode.CHRONO_FLAME_CHART
+    case 'left-heavy':
+      return ViewMode.LEFT_HEAVY_FLAME_GRAPH
+    case 'sandwich':
+      return ViewMode.SANDWICH_VIEW
+    default:
+      return null
+  }
 }
 
 export function getHashParams(hashContents = window.location.hash): HashParams {
@@ -20,6 +36,13 @@ export function getHashParams(hashContents = window.location.hash): HashParams {
         result.title = value
       } else if (key === 'localProfilePath') {
         result.localProfilePath = value
+      } else if (key === 'view') {
+        const mode = getViewMode(value)
+        if (mode !== null) {
+          result.viewMode = mode
+        } else {
+          console.error(`Ignoring invalid view specifier: ${value}`)
+        }
       }
     }
     return result

src/lib/view-mode.ts

@@ -0,0 +1,5 @@
+export const enum ViewMode {
+  CHRONO_FLAME_CHART,
+  LEFT_HEAVY_FLAME_GRAPH,
+  SANDWICH_VIEW,
+}

src/views/application.tsx

@@ -13,7 +13,8 @@ import {CanvasContext} from '../gl/canvas-context'
 import {Toolbar} from './toolbar'
 import {importJavaScriptSourceMapSymbolRemapper} from '../lib/js-source-map'
 import {Theme, withTheme} from './themes/theme'
-import {canUseXHR, ViewMode} from '../app-state'
+import {ViewMode} from '../lib/view-mode'
+import {canUseXHR} from '../app-state'
 import {ProfileGroupState} from '../app-state/profile-group'
 import {HashParams} from '../lib/hash-params'
 import {StatelessComponent} from '../lib/preact-helpers'
@@ -199,6 +200,10 @@ export class Application extends StatelessComponent<ApplicationProps> {
     }
     document.title = `${profileGroup.name} - speedscope`
 
+    if (this.props.hashParams.viewMode) {
+      this.props.setViewMode(this.props.hashParams.viewMode)
+    }
+
     for (let profile of profileGroup.profiles) {
       await profile.demangle()
     }

src/views/toolbar.tsx

@@ -7,7 +7,8 @@ import {ProfileSelect} from './profile-select'
 import {Profile} from '../lib/profile'
 import {objectsHaveShallowEquality} from '../lib/utils'
 import {colorSchemeToString, useTheme, withTheme} from './themes/theme'
-import {ViewMode, viewModeAtom} from '../app-state'
+import {ViewMode} from '../lib/view-mode'
+import {viewModeAtom} from '../app-state'
 import {ProfileGroupState} from '../app-state/profile-group'
 import {colorSchemeAtom} from '../app-state/color-scheme'
 import {useAtom} from '../lib/atom'