diff --git a/index.tsx b/index.tsx index fbc02cf..ccb4f28 100644 --- a/index.tsx +++ b/index.tsx @@ -7,19 +7,37 @@ import {importFromStackprof} from './import/stackprof' import {Profile} from './profile' import {Flamechart, FlamechartView} from './flamechart' +const enum SortOrder { + CHRONO, + ALPHA +} + interface ApplicationState { profile: Profile | null flamechart: Flamechart | null + sortedFlamechart: Flamechart | null + sortOrder: SortOrder } class Application extends Component<{}, ApplicationState> { + constructor() { + super() + this.state = { + profile: null, + flamechart: null, + sortedFlamechart: null, + sortOrder: SortOrder.CHRONO + } + } + onDrop = (ev: DragEvent) => { const file = ev.dataTransfer.files.item(0) const reader = new FileReader reader.addEventListener('loadend', () => { const profile = file.name.endsWith('json') ? importFromStackprof(reader.result) : importFromBGFlameGraph(reader.result) const flamechart = new Flamechart(profile) - this.setState({profile, flamechart}) + const sortedFlamechart = new Flamechart(profile.sortedAlphabetically()) + this.setState({profile, flamechart, sortedFlamechart}) }) reader.readAsText(file) ev.preventDefault() @@ -29,17 +47,37 @@ class Application extends Component<{}, ApplicationState> { ev.preventDefault() } + onWindowKeyPress = (ev: KeyboardEvent) => { + if (ev.key == 'a') { + this.setState({ + sortOrder: this.state.sortOrder === SortOrder.CHRONO ? SortOrder.ALPHA : SortOrder.CHRONO + }) + } + } + + onWindowResize = () => { + this.forceUpdate() + } + componentDidMount() { - window.addEventListener('resize', () => { - this.forceUpdate() - }) + window.addEventListener('resize', this.onWindowResize) + // TODO(jlfwong): for this to be safely embeddable, there'll need to be some + // way of specify event focus. + window.addEventListener('keypress', this.onWindowKeyPress) + } + + componentWillUnmount() { + window.removeEventListener('resize', this.onWindowResize) + window.removeEventListener('keypress', this.onWindowKeyPress) } render() { - const {flamechart} = this.state + const {flamechart, sortedFlamechart, sortOrder} = this.state + const flamechartToView = sortOrder == SortOrder.CHRONO ? flamechart : sortedFlamechart + return