Merge 50f9098 into 7321483

danvk · Apr 30, 2020 · 678d8cf · 678d8cf
2 parents 7321483 + 50f9098
commit 678d8cf
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 18 deletions.
diff --git a/src/lib/html.ts b/src/lib/html.ts
@@ -3,6 +3,7 @@ import ejs from 'ejs';
 import fs from 'fs';
 import path from 'path';
 import escapeHtml from 'escape-html';
+import { cloneDeep } from 'lodash';
 
 import { formatBytes, getCommonPathPrefix, getFileContent, formatPercent } from './helpers';
 import { getColorByPercent } from './coverage';
@@ -21,6 +22,18 @@ export function generateHtml(
     webtreemapCss: btoa(fs.readFileSync(require.resolve('./vendor/webtreemap.css'))),
   };
 
+  // Get webtreemap data to update map on bundle select
+  let treeData = exploreResults.map<WebTreeData>((data) => ({
+    name: data.bundleName,
+    data: getWebTreeMapData(data.files),
+  }));
+
+  if (treeData.length > 1) {
+    treeData = [makeMergedTreeDataMap(cloneDeep(treeData))].concat(treeData);
+  }
+  const treeDataMap = { ...treeData };
+  const template = getFileContent(path.join(__dirname, 'tree-viz.ejs'));
+
   // Create a combined bundle if applicable
   if (exploreResults.length > 1) {
     exploreResults = [makeMergedBundle(exploreResults)].concat(exploreResults);
@@ -32,20 +45,6 @@ export function generateHtml(
     size: formatBytes(data.totalBytes),
   }));
 
-  // Get webtreemap data to update map on bundle select
-  const treeDataMap = exploreResults.reduce<Record<string, { name: string; data: WebTreeMapNode }>>(
-    (result, data, index) => {
-      result[index] = {
-        name: data.bundleName,
-        data: getWebTreeMapData(data.files),
-      };
-
-      return result;
-    },
-    {}
-  );
-  const template = getFileContent(path.join(__dirname, 'tree-viz.ejs'));
-
   return ejs.render(template, {
     options,
     bundles,
@@ -85,6 +84,32 @@ function makeMergedBundle(exploreResults: ExploreBundleResult[]): ExploreBundleR
   };
 }
 
+/**
+ * Create a combined tree data where each of the inputs is a separate node under the root
+ */
+function makeMergedTreeDataMap(treeData: WebTreeData[]): WebTreeData {
+  const data: WebTreeMapNode = newNode('/');
+
+  data.children = [];
+
+  for (const result of treeData) {
+    const childTree = result.data;
+
+    childTree.originalName = result.name;
+
+    data.data['$area'] += childTree.data['$area'];
+
+    data.children.push(childTree);
+  }
+
+  addSizeToTitle(data, data.data['$area']);
+
+  return {
+    name: '[combined]',
+    data,
+  };
+}
+
 type TreeNodesMap = { [source: string]: string[] };
 
 function getNodePath(parts: string[], depthIndex: number): string {
@@ -152,6 +177,7 @@ function getTreeNodesMap(fileDataMap: FileDataMap): TreeNodesMap {
 
 interface WebTreeMapNode {
   name: string;
+  originalName: string;
   data: {
     $area: number;
     coveredSize?: number;
@@ -160,6 +186,11 @@ interface WebTreeMapNode {
   children?: WebTreeMapNode[];
 }
 
+interface WebTreeData {
+  name: string;
+  data: WebTreeMapNode;
+}
+
 /**
  * Convert file size map to webtreemap data
  */
@@ -177,8 +208,11 @@ export function getWebTreeMapData(files: FileDataMap): WebTreeMapNode {
 }
 
 function newNode(name: string): WebTreeMapNode {
+  name = escapeHtml(name);
+
   return {
-    name: escapeHtml(name),
+    name,
+    originalName: name,
     data: {
       $area: 0,
     },
@@ -229,7 +263,7 @@ function addNode(parts: string[], fileData: FileData, treeData: WebTreeMapNode):
 function addSizeToTitle(node: WebTreeMapNode, total: number): void {
   const { $area: size, coveredSize } = node.data;
 
-  const titleParts = [node.name, formatBytes(size), `${formatPercent(size, total, 1)}%`];
+  const titleParts = [node.originalName, formatBytes(size), `${formatPercent(size, total, 1)}%`];
 
   // Add coverage label to leaf nodes only
   if (coveredSize !== undefined && node.children === undefined) {