feat: icicle layout

src/components/FlameGraph/FlameGraph.jsx

@@ -18,14 +18,15 @@
 
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { Dimmer, Loader, Divider, Container, Button, Input } from 'semantic-ui-react'
+import { Dimmer, Loader, Divider, Container, Button, Input, Dropdown } from 'semantic-ui-react'
 import { pushBreadcrumb, popBreadcrumb } from '../../actions/Navbar'
 import { connect } from 'react-redux'
 import { flamegraph } from 'd3-flame-graph'
 import { select } from 'd3-selection'
 import 'd3-flame-graph/dist/d3-flamegraph.css'
 import './flamegraph.less'
 import queryString from 'query-string'
+import { layout } from '../../config.jsx'
 
 const styles = {
     container: {
@@ -50,15 +51,23 @@ class FlameGraph extends Component {
             'handleSearchClick',
             'handleOnKeyDown',
             'updateSearchQuery',
+            'handleLayoutChange',
         ].forEach((k) => {
           this[k] = this[k].bind(this);
         });
+
+        const preferredLayout = () => {
+            if(localStorage.getItem('layout')){
+                return localStorage.getItem('layout');
+            } else return layout.flame;
+        }
 
         this.state = {
           data: {},
           loading: false,
           chart: null,
           searchTerm: '',
+          layout: preferredLayout()
         };
     }
 
@@ -128,6 +137,7 @@ class FlameGraph extends Component {
             .transitionDuration(750)
             .sort(true)
             .title('')
+            .inverted(this.state.layout === layout.icicle)
 
         var details = document.getElementById("details")
         chart.details(details)
@@ -171,19 +181,39 @@ class FlameGraph extends Component {
         this.props.history.push({search: params.toString(),});
     }
 
+    handleLayoutChange(event, data) {
+        this.setState({layout: data.value}, () => {
+            this.state.chart
+                .inverted(this.state.layout === layout.icicle)
+                .resetZoom()
+            localStorage.setItem('layout', this.state.layout)
+        })
+    }
+
     render() {
         const searchButton = 
         <Button color='red' size='small' onClick={this.handleSearchClick}>
             <Button.Content>Search</Button.Content>
         </Button>
-
+        const layoutOptions = [
+            {
+                text: "Flame",
+                value: layout.flame
+            },
+            {
+                text: "Icicle",
+                value: layout.icicle
+            }
+        ]
+
         return (
             <div>
                 <Dimmer page inverted active={this.state.loading}>
                     <Loader size='huge' inverted>Loading</Loader>
                 </Dimmer> 
                 <Container style={styles.container}>
                     <Container textAlign='right'>
+                        <Dropdown selection options={layoutOptions} onChange={this.handleLayoutChange} defaultValue={this.state.layout} compact button />
                         <Button inverted color='red' size='small' onClick={this.handleResetClick}>
                             <Button.Content>
                                 Reset Zoom

src/config.jsx

@@ -0,0 +1,4 @@
+export const layout = {
+    flame: 'flame',
+    icicle: 'icicle',
+}