Add option to show labels on chart

src/plugin/plugin-app.jsx

@@ -14,6 +14,7 @@ export default React.createClass({
         return {
             assets: [],
             chartData: null,
+            labels: false,
             selectedAssetIndex: 0
         };
     },
@@ -54,6 +55,12 @@ export default React.createClass({
         });
     },
 
+    onLabelsChange(ev) {
+        this.setState({
+            labels: ev.target.checked
+        });
+    },
+
     render() {
         let assetList;
         let bundleDetails = {};
@@ -67,22 +74,27 @@ export default React.createClass({
 
         if (this.state.assets.length > 1) {
             assetList = (
-                <div>
-                    <select onChange={this.onAssetChange} value={this.state.selectedAssetIndex}>
-                        <option value={0}>All Chunks</option>
-                        {this.state.assets.map((asset, i) => <option key={i} value={i + 1}>{asset.name}</option>)}
-                    </select>
-                </div>
+                <select onChange={this.onAssetChange} value={this.state.selectedAssetIndex}>
+                    <option value={0}>All Chunks</option>
+                    {this.state.assets.map((asset, i) => <option key={i} value={i + 1}>{asset.name}</option>)}
+                </select>
             );
         }
 
         return (
             <div>
                 <h1>Webpack Visualizer</h1>
 
-                {assetList}
+                <div>
+                    {assetList}
+                    <input type="checkbox" checked={this.state.labels} 
+                           onChange={this.onLabelsChange} id="labels" />
+                    <label htmlFor="labels">Show labels</label>
+                </div>
 
-                <ChartWithDetails chartData={this.state.chartData} bundleDetails={bundleDetails} />
+                <ChartWithDetails chartData={this.state.chartData}
+                                  bundleDetails={bundleDetails}
+                                  labels={this.state.labels} />
 
                 {this.state.error && <div className="errorMessage">{this.state.error}</div>}
 

src/shared/components/chart-with-details.jsx

@@ -58,6 +58,7 @@ export default class ChartWithDetails extends React.Component {
                     onHover={this.onChartHover}
                     onUnhover={this.onChartUnhover}
                     onRender={this.onChartRender}
+                    labels={this.props.labels}
                 />
                 <Breadcrumbs nodes={this.state.breadcrumbNodes} />
             </div>

src/shared/components/chart.jsx

@@ -17,7 +17,11 @@ export default React.createClass({
     },
 
     componentDidUpdate(prevProps) {
-        if (this.props.data && this.props.data !== prevProps.data) {
+        let shouldUpdate = this.props.data && (
+            this.props.data !== prevProps.data ||
+            this.props.labels !== prevProps.labels
+        );
+        if (shouldUpdate) {
             this.createChart(this.props.data);
         }
     },
@@ -27,7 +31,8 @@ export default React.createClass({
             svgElement: this.refs.svg,
             root,
             onHover: this.props.onHover,
-            onUnhover: this.props.onUnhover
+            onUnhover: this.props.onUnhover,
+            labels: this.props.labels
         });
 
         if (this.props.onRender) {

src/shared/createVisualization.js

@@ -4,10 +4,53 @@ import {markDuplicates, getAllChildren, getAncestors} from './partitionedDataUti
 
 
 const FADE_OPACITY = 0.5;
+const MIN_CHARS_TO_SHOW = 4;
+const SPACE_PER_CHAR = 8;
 let paths, vis, totalSize;
 
 
-export default function createVisualization({svgElement, root, onHover, onUnhover}) {
+function addText(g) {
+    function cutText(d) {
+        let maxChars = getAllowedCharCount(d);
+        if (d.name.length <= maxChars) return d.name;
+        return d.name.substr(0, maxChars-1)+'…';
+    }
+
+    function getAllowedCharCount(d) {
+        let space = Math.sqrt(d.y + d.dy/2) * d.dx;
+        return Math.floor(space / SPACE_PER_CHAR);
+    }
+
+    function getTextRotation(d) {
+        return (d.x * 2 + d.dx) / 2 * 180 / Math.PI - 90;
+    }
+
+    function getTextTransform(d) {
+        let rotation = getTextRotation(d);
+        let translation = Math.sqrt(d.y + d.dy/2);
+        return `
+            rotate(${rotation})
+            translate(${translation} 0)
+            rotate(${(rotation > 0 && rotation < 180) ? -90 : 90})
+        `;
+    }
+
+    function shouldShowText(d) {
+        return getAllowedCharCount(d) >= MIN_CHARS_TO_SHOW;
+    }
+
+    g.append("text")
+        .filter(shouldShowText)
+        .attr('transform', getTextTransform)
+        .attr('text-anchor', 'middle')
+        .attr('dy', '.35em')
+        .text(d => cutText(d));
+}
+
+
+export default function createVisualization({
+    svgElement, root, onHover, onUnhover, labels
+}) {
     let chartSize = (root.maxDepth > 9) ? 950 : 750;
     let radius = Math.min(chartSize, chartSize) / 2;
 
@@ -45,11 +88,13 @@ export default function createVisualization({svgElement, root, onHover, onUnhove
         .attr('transform', `translate(${chartSize / 2}, ${chartSize / 2})`);
 
 
-    paths = vis.data([root]).selectAll('path')
+    let g = vis.data([root]).selectAll('path')
         .data(nodes)
         .enter()
-        .append('svg:path')
-        .attr('display', d => (d.depth ? null : 'none'))
+        .append('svg:g')
+        .attr('display', d => (d.depth ? null : 'none'));
+
+    paths = g.append('svg:path')
         .attr('d', arc)
         .attr('fill-rule', 'evenodd')
         .style('stroke', d => (d.duplicate) ? '#000' : '')
@@ -59,6 +104,10 @@ export default function createVisualization({svgElement, root, onHover, onUnhove
             mouseover(object, onHover);
         });
 
+    if (labels) {
+        addText(g);
+    }
+
     totalSize = paths.node().__data__.value;
 
 

src/shared/style.css

@@ -139,6 +139,10 @@ code {
 }
 
 
+#svgWrapper text {
+    font-size: 11px;
+}
+
 
 .errorMessage {
     margin-top: 2em;