Merge fc5d089 into 7321483

danvk · May 4, 2020 · 4c9fe25 · 4c9fe25
2 parents 7321483 + fc5d089
commit 4c9fe25
Show file tree

Hide file tree

Showing 4 changed files with 226 additions and 56 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,24 @@ 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)), ...treeData];
+  }
+
+  for (const webTreeData of treeData) {
+    addSizeToTitle(webTreeData.data, webTreeData.data.data['$area']);
+  }
+
+  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 +51,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 +90,61 @@ function makeMergedBundle(exploreResults: ExploreBundleResult[]): ExploreBundleR
   };
 }
 
+/**
+ * Create a combined tree data where each of the inputs is a separate node under the root
+ */
+export function makeMergedTreeDataMap(treeData: WebTreeData[]): WebTreeData {
+  const data: WebTreeMapNode = newNode('/');
+
+  data.children = [];
+
+  for (const result of treeData) {
+    const childTree = result.data;
+
+    childTree.name = result.name;
+
+    data.data['$area'] += childTree.data['$area'];
+    data.children.push(childTree);
+  }
+
+  removeSameRootPaths(data.children);
+
+  return {
+    name: '[combined]',
+    data,
+  };
+}
+
+/**
+ * Find and remove the same root paths
+ */
+function removeSameRootPaths(nodes: WebTreeMapNode[]): void {
+  if (nodes.length > 0) {
+    const sameParts = splitFilename(nodes[0].name);
+
+    for (const childTree of nodes) {
+      const parts = splitFilename(childTree.name);
+
+      for (let i = sameParts.length - 1; i >= 0; i--) {
+        if (parts.length <= i || sameParts[i] !== parts[i]) {
+          sameParts.pop();
+        } else {
+          break;
+        }
+      }
+    }
+
+    if (sameParts.length > 0) {
+      for (const childTree of nodes) {
+        let parts = splitFilename(childTree.name);
+
+        parts = parts.slice(sameParts.length);
+        childTree.name = getNodePath(parts, parts.length - 1);
+      }
+    }
+  }
+}
+
 type TreeNodesMap = { [source: string]: string[] };
 
 function getNodePath(parts: string[], depthIndex: number): string {
@@ -160,6 +220,11 @@ interface WebTreeMapNode {
   children?: WebTreeMapNode[];
 }
 
+export interface WebTreeData {
+  name: string;
+  data: WebTreeMapNode;
+}
+
 /**
  * Convert file size map to webtreemap data
  */
@@ -171,8 +236,6 @@ export function getWebTreeMapData(files: FileDataMap): WebTreeMapNode {
     addNode(treeNodesMap[source], files[source], treeData);
   }
 
-  addSizeToTitle(treeData, treeData.data['$area']);
-
   return treeData;
 }
 

diff --git a/tests/performance/api.test.ts b/tests/performance/api.test.ts
@@ -5,7 +5,7 @@ import { explore } from '../../src/lib/api';
 import { setTestFolder } from '../test-helpers';
 
 // Set to value actual for CI (not your local environment)
-const BIG_FILE_EXPLORE_WITH_HTML_MS = 12000;
+const BIG_FILE_EXPLORE_WITH_HTML_MS = 8000;
 
 describe('api', () => {
   describe('explore', () => {