Reorganize directory structure (#104)

While it was kind of nice having everything at the top level, the number of files is now getting a bit unwieldy and hard to understand, so I took a stab at organizing the directories without introducing too much nesting. Test Plan: - Ran `npm run serve` to ensure that local builds still work - Ran `npm run prepack` then `open dist/release/index.html` to ensure that release builds still work - Ran `scripts/deploy.sh` to ensure that the deployed version of the site will still work when I eventually redeploy - Ran `npm run jest` to ensure that tests still work correctly
2024-11-22 12:53:23 +03:00 · 2018-08-01 00:41:45 -07:00 · 2018-08-01 00:41:45 -07:00 · 608006232f
commit 608006232f
parent 11a3a67dce
86 changed files with 149 additions and 165 deletions
--- a/assets/favicon-16x16.png
+++ b/assets/favicon-16x16.png
--- a/assets/favicon-32x32.png
+++ b/assets/favicon-32x32.png
--- a/assets/favicon.ico
+++ b/assets/favicon.ico
--- a/assets/index.html
+++ b/assets/index.html
@ -166,7 +166,7 @@
 </head>

 <body>
-  <script src="./speedscope.tsx"></script>
+  <script src="../src/speedscope.tsx"></script>
 </body>

 </html>
--- a/assets/reset.css
+++ b/assets/reset.css
--- a/bin/cli.js
+++ b/bin/cli.js
@ -52,7 +52,7 @@ async function main() {
  }

  if (process.argv.includes('--version') || process.argv.includes('-v')) {
-    console.log('v' + require('./package.json').version)
+    console.log('v' + require('../package.json').version)
    return
  }

--- a/package.json
+++ b/package.json
@ -4,27 +4,20 @@
  "description": "",
  "main": "index.js",
  "bin": {
-    "speedscope": "./cli.js"
+    "speedscope": "./bin/cli.js"
  },
  "scripts": {
-    "deploy": "./deploy.sh",
-    "prepack": "./build-release.sh",
-    "prettier": "prettier --write './**/*.ts' './**/*.tsx'",
-    "lint": "eslint './**/*.ts' './**/*.tsx'",
-    "jest": "./test-setup.sh && jest",
+    "deploy": "./scripts/deploy.sh",
+    "prepack": "./scripts/build-release.sh",
+    "prettier": "prettier --write 'src/**/*.ts' 'src/**/*.tsx'",
+    "lint": "eslint 'src/**/*.ts' 'src/**/*.tsx'",
+    "jest": "./scripts/test-setup.sh && jest",
    "coverage": "npm run jest -- --coverage && coveralls < coverage/lcov.info",
    "test": "tsc --noEmit && npm run lint && npm run coverage",
-    "serve": "parcel index.html --open --no-autoinstall"
+    "serve": "parcel assets/index.html --open --no-autoinstall"
  },
-  "files": [
-    "cli.js",
-    "dist/release/**",
-    "!*.map"
-  ],
-  "browserslist": [
-    "last 2 Chrome versions",
-    "last 2 Firefox versions"
-  ],
+  "files": ["bin/cli.js", "dist/release/**", "!*.map"],
+  "browserslist": ["last 2 Chrome versions", "last 2 Firefox versions"],
  "author": "",
  "license": "MIT",
  "devDependencies": {
@ -57,17 +50,8 @@
      "^.+\\.tsx?$": "ts-jest"
    },
    "testRegex": "\\.test\\.tsx?$",
-    "collectCoverageFrom": [
-      "**/*.{ts,tsx}",
-      "!**/*.d.{ts,tsx}"
-    ],
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "json"
-    ]
+    "collectCoverageFrom": ["**/*.{ts,tsx}", "!**/*.d.{ts,tsx}"],
+    "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json"]
  },
  "dependencies": {
    "opn": "5.3.0"
--- a/scripts/build-release.sh
+++ b/scripts/build-release.sh
@ -16,7 +16,7 @@ date > "$OUTDIR"/release.txt
 git rev-parse HEAD >> "$OUTDIR"/release.txt

 # Place a json schema for the file format into the build directory too
-node generate-file-format-schema-json.js > "$OUTDIR"/file-format-schema.json
+node scripts/generate-file-format-schema-json.js > "$OUTDIR"/file-format-schema.json

 # Build the compiled assets
-node_modules/.bin/parcel build index.html --no-cache --out-dir "$OUTDIR" --public-url "./" --detailed-report
+node_modules/.bin/parcel build assets/index.html --no-cache --out-dir "$OUTDIR" --public-url "./" --detailed-report
--- a/scripts/deploy.sh
+++ b/scripts/deploy.sh
@ -10,7 +10,7 @@ set -e
 OUTDIR=`pwd`/dist/release
 echo $OUTDIR

-./build-release.sh
+./scripts/build-release.sh

 # Create a shallow clone of the repository
 TMPDIR=`mktemp -d -t speedscope-release`
--- a/scripts/generate-file-format-schema-json.js
+++ b/scripts/generate-file-format-schema-json.js
@ -3,7 +3,7 @@ const child_process = require('child_process')

 // Convert the file-format-spec.ts file into a json schema file
 let jsonSchema = child_process.execSync(
-  'node_modules/.bin/quicktype --lang schema ./file-format-spec.ts',
+  'node_modules/.bin/quicktype --lang schema ./src/lib/file-format-spec.ts',
  {
    encoding: 'utf8',
  },
--- a/scripts/test-setup.sh
+++ b/scripts/test-setup.sh
--- a/src/gl/canvas-context.ts
+++ b/src/gl/canvas-context.ts
@ -13,9 +13,9 @@ import {
  TextureRenderer,
  TextureRendererProps,
 } from './texture-cached-renderer'
-import {StatsPanel} from './stats'
+import {StatsPanel} from '../lib/stats'

-import {Vec2, Rect} from './math'
+import {Vec2, Rect} from '../lib/math'
 import {
  FlamechartColorPassRenderer,
  FlamechartColorPassRenderProps,
--- a/src/gl/flamechart-color-pass-renderer.ts
+++ b/src/gl/flamechart-color-pass-renderer.ts
@ -1,5 +1,5 @@
 import regl from 'regl'
-import {Vec2, Rect, AffineTransform} from './math'
+import {Vec2, Rect, AffineTransform} from '../lib/math'

 export interface FlamechartColorPassRenderProps {
  rectInfoTexture: regl.Texture
--- a/src/gl/flamechart-renderer.ts
+++ b/src/gl/flamechart-renderer.ts
@ -1,10 +1,10 @@
 import regl from 'regl'
-import {Flamechart} from './flamechart'
+import {Flamechart} from '../lib/flamechart'
 import {RectangleBatch} from './rectangle-batch-renderer'
 import {CanvasContext} from './canvas-context'
-import {Vec2, Rect, AffineTransform} from './math'
-import {Color} from './color'
-import {KeyedSet} from './utils'
+import {Vec2, Rect, AffineTransform} from '../lib/math'
+import {Color} from '../lib/color'
+import {KeyedSet} from '../lib/utils'
 import {RowAtlas} from './row-atlas'

 const MAX_BATCH_SIZE = 10000
--- a/src/gl/overlay-rectangle-renderer.ts
+++ b/src/gl/overlay-rectangle-renderer.ts
@ -1,5 +1,5 @@
 import regl from 'regl'
-import {AffineTransform, Rect} from './math'
+import {AffineTransform, Rect} from '../lib/math'

 export interface ViewportRectangleRendererProps {
  configSpaceToPhysicalViewSpace: AffineTransform
--- a/src/gl/rectangle-batch-renderer.ts
+++ b/src/gl/rectangle-batch-renderer.ts
@ -1,6 +1,6 @@
 import regl from 'regl'
-import {Rect, Vec2, AffineTransform} from './math'
-import {Color} from './color'
+import {Rect, Vec2, AffineTransform} from '../lib/math'
+import {Color} from '../lib/color'

 export class RectangleBatch {
  private rectCapacity = 1000
--- a/src/gl/row-atlas.ts
+++ b/src/gl/row-atlas.ts
@ -1,9 +1,9 @@
 import regl from 'regl'
-import {LRUCache} from './lru-cache'
+import {LRUCache} from '../lib/lru-cache'
 import {RectangleBatch} from './rectangle-batch-renderer'
 import {CanvasContext} from './canvas-context'
-import {Rect, Vec2} from './math'
-import {Color} from './color'
+import {Rect, Vec2} from '../lib/math'
+import {Color} from '../lib/color'

 export class RowAtlas<K> {
  texture: regl.Texture
--- a/src/gl/texture-cached-renderer.ts
+++ b/src/gl/texture-cached-renderer.ts
@ -1,5 +1,5 @@
 import regl from 'regl'
-import {Vec2, Rect, AffineTransform} from './math'
+import {Vec2, Rect, AffineTransform} from '../lib/math'

 export interface TextureRendererProps {
  texture: regl.Texture
--- a/src/import/snapshots/bg-flamegraph.test.ts.snap
+++ b/src/import/snapshots/bg-flamegraph.test.ts.snap
--- a/src/import/snapshots/chrome.test.ts.snap
+++ b/src/import/snapshots/chrome.test.ts.snap
--- a/src/import/snapshots/firefox.test.ts.snap
+++ b/src/import/snapshots/firefox.test.ts.snap
--- a/src/import/snapshots/instruments.test.ts.snap
+++ b/src/import/snapshots/instruments.test.ts.snap
--- a/src/import/snapshots/stackprof.test.ts.snap
+++ b/src/import/snapshots/stackprof.test.ts.snap
--- a/src/import/snapshots/v8proflog.test.ts.snap
+++ b/src/import/snapshots/v8proflog.test.ts.snap
--- a/src/import/bg-flamegraph.test.ts
+++ b/src/import/bg-flamegraph.test.ts
@ -1,4 +1,4 @@
-import {checkProfileSnapshot} from '../test-utils'
+import {checkProfileSnapshot} from '../lib/test-utils'

 test('importFromBGFlameGraph', async () => {
  await checkProfileSnapshot('./sample/profiles/stackcollapse/simple.txt')
--- a/src/import/bg-flamegraph.ts
+++ b/src/import/bg-flamegraph.ts
@ -1,6 +1,6 @@
 // https://github.com/brendangregg/FlameGraph#2-fold-stacks

-import {Profile, FrameInfo, StackListProfileBuilder} from '../profile'
+import {Profile, FrameInfo, StackListProfileBuilder} from '../lib/profile'

 interface BGSample {
  stack: FrameInfo[]
--- a/src/import/chrome.test.ts
+++ b/src/import/chrome.test.ts
@ -1,4 +1,4 @@
-import {checkProfileSnapshot} from '../test-utils'
+import {checkProfileSnapshot} from '../lib/test-utils'

 test('importFromChromeCPUProfile', async () => {
  await checkProfileSnapshot('./sample/profiles/Chrome/65/simple.cpuprofile')
--- a/src/import/chrome.ts
+++ b/src/import/chrome.ts
@ -1,6 +1,6 @@
-import {Profile, FrameInfo, CallTreeProfileBuilder} from '../profile'
-import {getOrInsert, lastOf} from '../utils'
-import {TimeFormatter} from '../value-formatters'
+import {Profile, FrameInfo, CallTreeProfileBuilder} from '../lib/profile'
+import {getOrInsert, lastOf} from '../lib/utils'
+import {TimeFormatter} from '../lib/value-formatters'

 interface TimelineEvent {
  pid: number
--- a/src/import/file-system-entry.ts
+++ b/src/import/file-system-entry.ts
--- a/src/import/firefox.test.ts
+++ b/src/import/firefox.test.ts
@ -1,4 +1,4 @@
-import {checkProfileSnapshot} from '../test-utils'
+import {checkProfileSnapshot} from '../lib/test-utils'

 test('importFromFirefox', async () => {
  await checkProfileSnapshot('./sample/profiles/Firefox/59/simple-firefox.json')
--- a/src/import/firefox.ts
+++ b/src/import/firefox.ts
@ -1,6 +1,6 @@
-import {Profile, FrameInfo, CallTreeProfileBuilder} from '../profile'
-import {getOrInsert, lastOf} from '../utils'
-import {TimeFormatter} from '../value-formatters'
+import {Profile, FrameInfo, CallTreeProfileBuilder} from '../lib/profile'
+import {getOrInsert, lastOf} from '../lib/utils'
+import {TimeFormatter} from '../lib/value-formatters'

 interface Allocations {
  frames: any[]
--- a/src/import/index.ts
+++ b/src/import/index.ts
@ -1,4 +1,4 @@
-import {Profile} from '../profile'
+import {Profile} from '../lib/profile'
 import {FileSystemDirectoryEntry} from './file-system-entry'

 import {importFromChromeCPUProfile, importFromChromeTimeline} from './chrome'
@ -6,8 +6,8 @@ import {importFromStackprof} from './stackprof'
 import {importFromInstrumentsDeepCopy, importFromInstrumentsTrace} from './instruments'
 import {importFromBGFlameGraph} from './bg-flamegraph'
 import {importFromFirefox} from './firefox'
-import {importSpeedscopeProfiles} from '../file-format'
-import {FileFormat} from '../file-format-spec'
+import {importSpeedscopeProfiles} from '../lib/file-format'
+import {FileFormat} from '../lib/file-format-spec'
 import {importFromV8ProfLog} from './v8proflog'

 export async function importProfile(fileName: string, contents: string): Promise<Profile | null> {
--- a/src/import/instruments.test.ts
+++ b/src/import/instruments.test.ts
@ -1,6 +1,6 @@
 import * as fs from 'fs'
 import * as path from 'path'
-import {dumpProfile, checkProfileSnapshot} from '../test-utils'
+import {dumpProfile, checkProfileSnapshot} from '../lib/test-utils'

 import * as JSZip from 'jszip'
 import {FileSystemEntry} from './file-system-entry'
--- a/src/import/instruments.ts
+++ b/src/import/instruments.ts
@ -1,10 +1,10 @@
 // This file contains methods to import data from OS X Instruments.app
 // https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/index.html

-import {Profile, FrameInfo, CallTreeProfileBuilder, StackListProfileBuilder} from '../profile'
-import {sortBy, getOrThrow, getOrInsert, lastOf, getOrElse, zeroPad} from '../utils'
+import {Profile, FrameInfo, CallTreeProfileBuilder, StackListProfileBuilder} from '../lib/profile'
+import {sortBy, getOrThrow, getOrInsert, lastOf, getOrElse, zeroPad} from '../lib/utils'
 import * as pako from 'pako'
-import {ByteFormatter, TimeFormatter} from '../value-formatters'
+import {ByteFormatter, TimeFormatter} from '../lib/value-formatters'
 import {FileSystemDirectoryEntry, FileSystemEntry, FileSystemFileEntry} from './file-system-entry'

 function parseTSV<T>(contents: string): T[] {
--- a/src/import/stackprof.test.ts
+++ b/src/import/stackprof.test.ts
@ -1,4 +1,4 @@
-import {checkProfileSnapshot} from '../test-utils'
+import {checkProfileSnapshot} from '../lib/test-utils'

 test('importFromStackprof', async () => {
  await checkProfileSnapshot('./sample/profiles/stackprof/simple-stackprof.json')
--- a/src/import/stackprof.ts
+++ b/src/import/stackprof.ts
@ -1,7 +1,7 @@
 // https://github.com/tmm1/stackprof

-import {Profile, FrameInfo, StackListProfileBuilder} from '../profile'
-import {TimeFormatter} from '../value-formatters'
+import {Profile, FrameInfo, StackListProfileBuilder} from '../lib/profile'
+import {TimeFormatter} from '../lib/value-formatters'

 interface StackprofFrame {
  name: string
--- a/src/import/v8proflog.test.ts
+++ b/src/import/v8proflog.test.ts
@ -1,4 +1,4 @@
-import {checkProfileSnapshot} from '../test-utils'
+import {checkProfileSnapshot} from '../lib/test-utils'

 test('importFromV8ProfLog', async () => {
  await checkProfileSnapshot('./sample/profiles/node/8.5.0/simple.v8log.json')
--- a/src/import/v8proflog.ts
+++ b/src/import/v8proflog.ts
@ -1,6 +1,6 @@
-import {Profile, FrameInfo, StackListProfileBuilder} from '../profile'
-import {getOrInsert, sortBy} from '../utils'
-import {TimeFormatter} from '../value-formatters'
+import {Profile, FrameInfo, StackListProfileBuilder} from '../lib/profile'
+import {getOrInsert, sortBy} from '../lib/utils'
+import {TimeFormatter} from '../lib/value-formatters'

 // This imports profiles generated by a combination of the following commands:
 //
--- a/src/lib/snapshots/file-format.test.ts.snap
+++ b/src/lib/snapshots/file-format.test.ts.snap
--- a/src/lib/color.ts
+++ b/src/lib/color.ts
--- a/src/lib/demangle-cpp.ts
+++ b/src/lib/demangle-cpp.ts
--- a/src/lib/emscripten.test.ts
+++ b/src/lib/emscripten.test.ts
--- a/src/lib/emscripten.ts
+++ b/src/lib/emscripten.ts
--- a/src/lib/file-format-spec.ts
+++ b/src/lib/file-format-spec.ts
--- a/src/lib/file-format.test.ts
+++ b/src/lib/file-format.test.ts
--- a/src/lib/file-format.ts
+++ b/src/lib/file-format.ts
@ -22,7 +22,7 @@ export function exportProfile(profile: Profile): FileFormat.File {
  }

  const file: FileFormat.File = {
-    version: require('./package.json').version,
+    version: require('../../package.json').version,
    $schema: 'https://www.speedscope.app/file-format-schema.json',
    shared: {frames},
    profiles: [eventedProfile],
--- a/src/lib/flamechart.ts
+++ b/src/lib/flamechart.ts
--- a/src/lib/hash-params.ts
+++ b/src/lib/hash-params.ts
--- a/src/lib/lru-cache.test.ts
+++ b/src/lib/lru-cache.test.ts
--- a/src/lib/lru-cache.ts
+++ b/src/lib/lru-cache.ts
--- a/src/lib/math.test.ts
+++ b/src/lib/math.test.ts
--- a/src/lib/math.ts
+++ b/src/lib/math.ts
--- a/src/lib/profile.test.ts
+++ b/src/lib/profile.test.ts
--- a/src/lib/profile.ts
+++ b/src/lib/profile.ts
--- a/src/lib/stats.ts
+++ b/src/lib/stats.ts
--- a/src/lib/test-utils.ts
+++ b/src/lib/test-utils.ts
@ -1,7 +1,7 @@
 import * as fs from 'fs'
 import * as path from 'path'
 import {Profile, CallTreeNode, Frame} from './profile'
-import {importProfile} from './import'
+import {importProfile} from '../import'
 import {exportProfile, importSpeedscopeProfiles} from './file-format'

 interface DumpedProfile {
--- a/src/lib/text-utils.ts
+++ b/src/lib/text-utils.ts
--- a/app-state/typed-redux.ts
+++ b/app-state/typed-redux.ts
--- a/src/lib/utils.test.ts
+++ b/src/lib/utils.test.ts
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
--- a/src/lib/value-formatters.test.ts
+++ b/src/lib/value-formatters.test.ts
--- a/src/lib/value-formatters.ts
+++ b/src/lib/value-formatters.ts
--- a/src/speedscope.tsx
+++ b/src/speedscope.tsx
@ -1,10 +1,10 @@
 import {h, render} from 'preact'
-import {createApplicationStore, ApplicationState} from './app-state'
+import {createApplicationStore, ApplicationState} from './store'
 import {Provider} from 'preact-redux'
-import {createContainer} from './app-state/typed-redux'
-import {Application} from './application'
+import {createContainer} from './lib/typed-redux'
+import {Application} from './views/application'

-console.log(`speedscope v${require('./package.json').version}`)
+console.log(`speedscope v${require('../package.json').version}`)

 declare const module: any
 if (module.hot) {
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@ -1,10 +1,10 @@
-import {actionCreator} from './typed-redux'
-import {Profile, CallTreeNode, Frame} from '../profile'
-import {SortMethod} from '../profile-table-view'
+import {actionCreator} from '../lib/typed-redux'
+import {Profile, CallTreeNode, Frame} from '../lib/profile'
+import {SortMethod} from '../views/profile-table-view'
 import {ViewMode} from '.'
 import {FlamechartID} from './flamechart-view-state'
-import {Rect, Vec2} from '../math'
-import {HashParams} from '../hash-params'
+import {Rect, Vec2} from '../lib/math'
+import {HashParams} from '../lib/hash-params'

 export namespace actions {
  // Set the top-level profile from which other data will be derived
--- a/src/store/flamechart-view-state.ts
+++ b/src/store/flamechart-view-state.ts
@ -1,6 +1,6 @@
-import {CallTreeNode} from '../profile'
-import {Rect, Vec2} from '../math'
-import {Reducer} from './typed-redux'
+import {CallTreeNode} from '../lib/profile'
+import {Rect, Vec2} from '../lib/math'
+import {Reducer} from '../lib/typed-redux'
 import {actions} from './actions'

 export enum FlamechartID {
--- a/src/store/getters.ts
+++ b/src/store/getters.ts
@ -1,9 +1,9 @@
-import {Frame, Profile} from '../profile'
-import {triangle, memoizeByReference, memoizeByShallowEquality} from '../utils'
-import {RowAtlas} from '../row-atlas'
-import {CanvasContext} from '../canvas-context'
-import {Color} from '../color'
-import {FlamechartRowAtlasKey} from '../flamechart-renderer'
+import {Frame, Profile} from '../lib/profile'
+import {triangle, memoizeByReference, memoizeByShallowEquality} from '../lib/utils'
+import {RowAtlas} from '../gl/row-atlas'
+import {CanvasContext} from '../gl/canvas-context'
+import {Color} from '../lib/color'
+import {FlamechartRowAtlasKey} from '../gl/flamechart-renderer'

 export const createGetColorBucketForFrame = memoizeByReference(
  (frameToColorBucket: Map<number | string, number>) => {
--- a/src/store/index.ts
+++ b/src/store/index.ts
@ -6,15 +6,15 @@ import {actions} from './actions'
 */

 import * as redux from 'redux'
-import {setter, Reducer} from './typed-redux'
-import {Profile} from '../profile'
+import {setter, Reducer} from '../lib/typed-redux'
+import {Profile} from '../lib/profile'
 import {
  createFlamechartViewStateReducer,
  FlamechartID,
  FlamechartViewState,
 } from './flamechart-view-state'
 import {SandwichViewState, sandwichView} from './sandwich-view-state'
-import {HashParams, getHashParams} from '../hash-params'
+import {HashParams, getHashParams} from '../lib/hash-params'

 export const enum ViewMode {
  CHRONO_FLAME_CHART,
--- a/src/store/sandwich-view-state.ts
+++ b/src/store/sandwich-view-state.ts
@ -1,11 +1,11 @@
-import {SortMethod, SortField, SortDirection} from '../profile-table-view'
-import {Frame} from '../profile'
+import {SortMethod, SortField, SortDirection} from '../views/profile-table-view'
+import {Frame} from '../lib/profile'
 import {
  FlamechartViewState,
  FlamechartID,
  createFlamechartViewStateReducer,
 } from './flamechart-view-state'
-import {Reducer} from './typed-redux'
+import {Reducer} from '../lib/typed-redux'
 import {actions} from './actions'

 export interface SandwichViewState {
--- a/src/typings/preact-redux.d.ts
+++ b/src/typings/preact-redux.d.ts
--- a/src/typings/regl.d.ts
+++ b/src/typings/regl.d.ts
--- a/src/views/application.tsx
+++ b/src/views/application.tsx
@ -1,19 +1,19 @@
 import {h, Component} from 'preact'
 import {StyleSheet, css} from 'aphrodite'
-import {FileSystemDirectoryEntry} from './import/file-system-entry'
+import {FileSystemDirectoryEntry} from '../import/file-system-entry'

-import {Profile, Frame} from './profile'
+import {Profile, Frame} from '../lib/profile'
 import {FontFamily, FontSize, Colors, Sizes, Duration} from './style'
-import {importEmscriptenSymbolMap} from './emscripten'
+import {importEmscriptenSymbolMap} from '../lib/emscripten'
 import {SandwichViewContainer} from './sandwich-view'
-import {saveToFile} from './file-format'
-import {ApplicationState, ViewMode, canUseXHR} from './app-state'
-import {actions} from './app-state/actions'
-import {Dispatch, StatelessComponent, WithDispatch} from './app-state/typed-redux'
+import {saveToFile} from '../lib/file-format'
+import {ApplicationState, ViewMode, canUseXHR} from '../store'
+import {actions} from '../store/actions'
+import {Dispatch, StatelessComponent, WithDispatch} from '../lib/typed-redux'
 import {LeftHeavyFlamechartView, ChronoFlamechartView} from './flamechart-view-container'
-import {getProfileToView} from './app-state/getters'
+import {getProfileToView} from '../store/getters'

-const importModule = import('./import')
+const importModule = import('../import')
 // Force eager loading of the module
 importModule.then(() => {})
 async function importProfile(fileName: string, contents: string): Promise<Profile | null> {
@ -24,7 +24,7 @@ async function importFromFileSystemDirectoryEntry(entry: FileSystemDirectoryEntr
 }

 declare function require(x: string): any
-const exampleProfileURL = require('./sample/profiles/stackcollapse/perf-vertx-stacks-01-collapsed-all.txt')
+const exampleProfileURL = require('../../sample/profiles/stackcollapse/perf-vertx-stacks-01-collapsed-all.txt')

 interface ToolbarProps extends ApplicationState {
  setViewMode(order: ViewMode): void
--- a/src/views/callee-flamegraph-view.ts
+++ b/src/views/callee-flamegraph-view.ts
@ -1,15 +1,15 @@
-import {memoizeByShallowEquality} from './utils'
-import {Profile, Frame} from './profile'
-import {Flamechart} from './flamechart'
+import {memoizeByShallowEquality} from '../lib/utils'
+import {Profile, Frame} from '../lib/profile'
+import {Flamechart} from '../lib/flamechart'
 import {createMemoizedFlamechartRenderer} from './flamechart-view-container'
-import {createContainer} from './app-state/typed-redux'
-import {ApplicationState} from './app-state'
+import {createContainer} from '../lib/typed-redux'
+import {ApplicationState} from '../store'
 import {
  getCanvasContext,
  createGetColorBucketForFrame,
  createGetCSSColorForFrame,
-} from './app-state/getters'
-import {FlamechartID} from './app-state/flamechart-view-state'
+} from '../store/getters'
+import {FlamechartID} from '../store/flamechart-view-state'
 import {FlamechartWrapper} from './flamechart-wrapper'

 const getCalleeProfile = memoizeByShallowEquality<
--- a/src/views/color-chit.tsx
+++ b/src/views/color-chit.tsx
--- a/src/views/flamechart-detail-view.tsx
+++ b/src/views/flamechart-detail-view.tsx
@ -1,10 +1,10 @@
 import {StyleDeclarationValue, css} from 'aphrodite'
 import {h, Component} from 'preact'
 import {style} from './flamechart-style'
-import {formatPercent} from './utils'
-import {Frame, CallTreeNode} from './profile'
+import {formatPercent} from '../lib/utils'
+import {Frame, CallTreeNode} from '../lib/profile'
 import {ColorChit} from './color-chit'
-import {Flamechart} from './flamechart'
+import {Flamechart} from '../lib/flamechart'

 interface StatisticsTableProps {
  title: string
--- a/src/views/flamechart-minimap-view.tsx
+++ b/src/views/flamechart-minimap-view.tsx
@ -1,13 +1,13 @@
 import {h, Component} from 'preact'
 import {css} from 'aphrodite'
-import {Flamechart} from './flamechart'
-import {Rect, Vec2, AffineTransform, clamp} from './math'
-import {FlamechartRenderer} from './flamechart-renderer'
+import {Flamechart} from '../lib/flamechart'
+import {Rect, Vec2, AffineTransform, clamp} from '../lib/math'
+import {FlamechartRenderer} from '../gl/flamechart-renderer'
 import {style} from './flamechart-style'
 import {FontFamily, FontSize, Colors, Sizes, commonStyle} from './style'
-import {CanvasContext} from './canvas-context'
-import {TextureCachedRenderer} from './texture-cached-renderer'
-import {cachedMeasureTextWidth} from './text-utils'
+import {CanvasContext} from '../gl/canvas-context'
+import {TextureCachedRenderer} from '../gl/texture-cached-renderer'
+import {cachedMeasureTextWidth} from '../lib/text-utils'

 interface FlamechartMinimapViewProps {
  flamechart: Flamechart
--- a/src/views/flamechart-pan-zoom-view.tsx
+++ b/src/views/flamechart-pan-zoom-view.tsx
@ -1,10 +1,10 @@
-import {Rect, AffineTransform, Vec2, clamp} from './math'
-import {CallTreeNode} from './profile'
-import {Flamechart, FlamechartFrame} from './flamechart'
-import {CanvasContext} from './canvas-context'
-import {FlamechartRenderer} from './flamechart-renderer'
+import {Rect, AffineTransform, Vec2, clamp} from '../lib/math'
+import {CallTreeNode} from '../lib/profile'
+import {Flamechart, FlamechartFrame} from '../lib/flamechart'
+import {CanvasContext} from '../gl/canvas-context'
+import {FlamechartRenderer} from '../gl/flamechart-renderer'
 import {Sizes, FontSize, Colors, FontFamily, commonStyle} from './style'
-import {cachedMeasureTextWidth, ELLIPSIS, trimTextMid} from './text-utils'
+import {cachedMeasureTextWidth, ELLIPSIS, trimTextMid} from '../lib/text-utils'
 import {style} from './flamechart-style'
 import {h, Component} from 'preact'
 import {css} from 'aphrodite'
--- a/src/views/flamechart-style.ts
+++ b/src/views/flamechart-style.ts
--- a/src/views/flamechart-view-container.tsx
+++ b/src/views/flamechart-view-container.tsx
@ -1,18 +1,18 @@
-import {FlamechartID, FlamechartViewState} from './app-state/flamechart-view-state'
-import {CanvasContext} from './canvas-context'
-import {Flamechart} from './flamechart'
-import {FlamechartRenderer, FlamechartRendererOptions} from './flamechart-renderer'
-import {Dispatch, createContainer, WithoutDispatch} from './app-state/typed-redux'
-import {Frame, Profile} from './profile'
-import {memoizeByShallowEquality} from './utils'
-import {ApplicationState} from './app-state'
+import {FlamechartID, FlamechartViewState} from '../store/flamechart-view-state'
+import {CanvasContext} from '../gl/canvas-context'
+import {Flamechart} from '../lib/flamechart'
+import {FlamechartRenderer, FlamechartRendererOptions} from '../gl/flamechart-renderer'
+import {Dispatch, createContainer, WithoutDispatch} from '../lib/typed-redux'
+import {Frame, Profile} from '../lib/profile'
+import {memoizeByShallowEquality} from '../lib/utils'
+import {ApplicationState} from '../store'
 import {FlamechartView} from './flamechart-view'
 import {
  getRowAtlas,
  createGetColorBucketForFrame,
  getCanvasContext,
  createGetCSSColorForFrame,
-} from './app-state/getters'
+} from '../store/getters'

 export type FlamechartViewProps = {
  id: FlamechartID
--- a/src/views/flamechart-view.tsx
+++ b/src/views/flamechart-view.tsx
@ -1,10 +1,10 @@
 import {h, Component} from 'preact'
 import {css} from 'aphrodite'

-import {CallTreeNode} from './profile'
+import {CallTreeNode} from '../lib/profile'

-import {Rect, Vec2, AffineTransform, clamp} from './math'
-import {formatPercent} from './utils'
+import {Rect, Vec2, AffineTransform, clamp} from '../lib/math'
+import {formatPercent} from '../lib/utils'
 import {FlamechartMinimapView} from './flamechart-minimap-view'

 import {style} from './flamechart-style'
@ -12,7 +12,7 @@ import {Sizes, commonStyle} from './style'
 import {FlamechartDetailView} from './flamechart-detail-view'
 import {FlamechartPanZoomView} from './flamechart-pan-zoom-view'
 import {Hovertip} from './hovertip'
-import {actions} from './app-state/actions'
+import {actions} from '../store/actions'
 import {FlamechartViewProps} from './flamechart-view-container'

 interface EmptyState {
--- a/src/views/flamechart-wrapper.tsx
+++ b/src/views/flamechart-wrapper.tsx
@ -1,14 +1,14 @@
-import {CallTreeNode} from './profile'
+import {CallTreeNode} from '../lib/profile'
 import {StyleSheet, css} from 'aphrodite'
 import {h} from 'preact'
 import {commonStyle, Colors} from './style'
-import {Rect, AffineTransform, Vec2, clamp} from './math'
+import {Rect, AffineTransform, Vec2, clamp} from '../lib/math'
 import {FlamechartPanZoomView} from './flamechart-pan-zoom-view'
-import {noop, formatPercent} from './utils'
+import {noop, formatPercent} from '../lib/utils'
 import {Hovertip} from './hovertip'
-import {actions} from './app-state/actions'
+import {actions} from '../store/actions'
 import {FlamechartViewProps} from './flamechart-view-container'
-import {StatelessComponent} from './app-state/typed-redux'
+import {StatelessComponent} from '../lib/typed-redux'

 export class FlamechartWrapper extends StatelessComponent<FlamechartViewProps> {
  private clampViewportToFlamegraph(viewportRect: Rect) {
--- a/src/views/hovertip.tsx
+++ b/src/views/hovertip.tsx
@ -1,4 +1,4 @@
-import {Vec2} from './math'
+import {Vec2} from '../lib/math'
 import {Sizes, Colors, FontSize, FontFamily, ZIndex} from './style'
 import {css, StyleSheet} from 'aphrodite'
 import {h, Component} from 'preact'
--- a/src/views/inverted-caller-flamegraph-view.ts
+++ b/src/views/inverted-caller-flamegraph-view.ts
@ -1,16 +1,16 @@
-import {memoizeByShallowEquality} from './utils'
-import {Profile, Frame} from './profile'
-import {Flamechart} from './flamechart'
+import {memoizeByShallowEquality} from '../lib/utils'
+import {Profile, Frame} from '../lib/profile'
+import {Flamechart} from '../lib/flamechart'
 import {createMemoizedFlamechartRenderer} from './flamechart-view-container'
-import {createContainer} from './app-state/typed-redux'
-import {ApplicationState} from './app-state'
+import {createContainer} from '../lib/typed-redux'
+import {ApplicationState} from '../store'
 import {
  getCanvasContext,
  createGetColorBucketForFrame,
  createGetCSSColorForFrame,
  getProfileWithRecursionFlattened,
-} from './app-state/getters'
-import {FlamechartID} from './app-state/flamechart-view-state'
+} from '../store/getters'
+import {FlamechartID} from '../store/flamechart-view-state'
 import {FlamechartWrapper} from './flamechart-wrapper'

 const getInvertedCallerProfile = memoizeByShallowEquality(
--- a/src/views/profile-table-view.tsx
+++ b/src/views/profile-table-view.tsx
@ -1,14 +1,14 @@
 import {h, Component} from 'preact'
 import {StyleSheet, css} from 'aphrodite'
-import {Profile, Frame} from './profile'
-import {sortBy, formatPercent} from './utils'
+import {Profile, Frame} from '../lib/profile'
+import {sortBy, formatPercent} from '../lib/utils'
 import {FontSize, Colors, Sizes, commonStyle} from './style'
 import {ColorChit} from './color-chit'
 import {ScrollableListView, ListItem} from './scrollable-list-view'
-import {actions} from './app-state/actions'
-import {Dispatch, createContainer} from './app-state/typed-redux'
-import {ApplicationState} from './app-state'
-import {createGetCSSColorForFrame} from './app-state/getters'
+import {actions} from '../store/actions'
+import {Dispatch, createContainer} from '../lib/typed-redux'
+import {ApplicationState} from '../store'
+import {createGetCSSColorForFrame} from '../store/getters'

 export enum SortField {
  SYMBOL_NAME,
--- a/src/views/sandwich-view.tsx
+++ b/src/views/sandwich-view.tsx
@ -1,11 +1,11 @@
-import {Frame} from './profile'
+import {Frame} from '../lib/profile'
 import {StyleSheet, css} from 'aphrodite'
 import {ProfileTableViewContainer} from './profile-table-view'
 import {h} from 'preact'
 import {commonStyle, Sizes, Colors, FontSize} from './style'
-import {actions} from './app-state/actions'
-import {createContainer, Dispatch, StatelessComponent} from './app-state/typed-redux'
-import {ApplicationState} from './app-state'
+import {actions} from '../store/actions'
+import {createContainer, Dispatch, StatelessComponent} from '../lib/typed-redux'
+import {ApplicationState} from '../store'
 import {InvertedCallerFlamegraphView} from './inverted-caller-flamegraph-view'
 import {CalleeFlamegraphView} from './callee-flamegraph-view'

--- a/src/views/scrollable-list-view.tsx
+++ b/src/views/scrollable-list-view.tsx
--- a/src/views/style.ts
+++ b/src/views/style.ts