Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

misc(treemap): root node selector #12360

Merged
merged 5 commits into from
Apr 22, 2021
Merged

misc(treemap): root node selector #12360

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
85231a1
misc: treemap selector
connorjclark Apr 13, 2021
531c3f0
styles
connorjclark Apr 13, 2021
9857d31
oops
connorjclark Apr 13, 2021
8e60e08
update
connorjclark Apr 17, 2021
f809afd
update
connorjclark Apr 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
66 changes: 35 additions & 31 deletions lighthouse-treemap/app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,38 +22,42 @@
<div class="lh-settings">
<header>
<div class="lh-header--section">
<!-- Lighthouse logo. Stolen from templates.html -->
<svg class="lh-topbar__logo" viewBox="0 0 24 24">
<defs>
<linearGradient x1="57.456%" y1="13.086%" x2="18.259%" y2="72.322%" id="lh-topbar__logo--a">
<stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
<stop stop-color="#262626" stop-opacity="0" offset="100%"/>
</linearGradient>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="lh-topbar__logo--b">
<stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
<stop stop-color="#262626" stop-opacity="0" offset="100%"/>
</linearGradient>
<linearGradient x1="58.764%" y1="65.756%" x2="36.939%" y2="50.14%" id="lh-topbar__logo--c">
<stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
<stop stop-color="#262626" stop-opacity="0" offset="100%"/>
</linearGradient>
<linearGradient x1="41.635%" y1="20.358%" x2="72.863%" y2="85.424%" id="lh-topbar__logo--d">
<stop stop-color="#FFF" stop-opacity=".1" offset="0%"/>
<stop stop-color="#FFF" stop-opacity="0" offset="100%"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M12 3l4.125 2.625v3.75H18v2.25h-1.688l1.5 9.375H6.188l1.5-9.375H6v-2.25h1.875V5.648L12 3zm2.201 9.938L9.54 14.633 9 18.028l5.625-2.062-.424-3.028zM12.005 5.67l-1.88 1.207v2.498h3.75V6.86l-1.87-1.19z" fill="#F44B21"/>
<path fill="#FFF" d="M14.201 12.938L9.54 14.633 9 18.028l5.625-2.062z"/>
<path d="M6 18c-2.042 0-3.95-.01-5.813 0l1.5-9.375h4.326L6 18z" fill="url(#lh-topbar__logo--a)" fill-rule="nonzero" transform="translate(6 3)"/>
<path fill="#FFF176" fill-rule="nonzero" d="M13.875 9.375v-2.56l-1.87-1.19-1.88 1.207v2.543z"/>
<path fill="url(#lh-topbar__logo--b)" fill-rule="nonzero" d="M0 6.375h6v2.25H0z" transform="translate(6 3)"/>
<path fill="url(#lh-topbar__logo--c)" fill-rule="nonzero" d="M6 6.375H1.875v-3.75L6 0z" transform="translate(6 3)"/>
<path fill="url(#lh-topbar__logo--d)" fill-rule="nonzero" d="M6 0l4.125 2.625v3.75H12v2.25h-1.688l1.5 9.375H.188l1.5-9.375H0v-2.25h1.875V2.648z" transform="translate(6 3)"/>
</g>
</svg>
<span>
<!-- Lighthouse logo. Stolen from templates.html -->
<svg class="lh-topbar__logo" viewBox="0 0 24 24">
<defs>
<linearGradient x1="57.456%" y1="13.086%" x2="18.259%" y2="72.322%" id="lh-topbar__logo--a">
<stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
<stop stop-color="#262626" stop-opacity="0" offset="100%"/>
</linearGradient>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="lh-topbar__logo--b">
<stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
<stop stop-color="#262626" stop-opacity="0" offset="100%"/>
</linearGradient>
<linearGradient x1="58.764%" y1="65.756%" x2="36.939%" y2="50.14%" id="lh-topbar__logo--c">
<stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
<stop stop-color="#262626" stop-opacity="0" offset="100%"/>
</linearGradient>
<linearGradient x1="41.635%" y1="20.358%" x2="72.863%" y2="85.424%" id="lh-topbar__logo--d">
<stop stop-color="#FFF" stop-opacity=".1" offset="0%"/>
<stop stop-color="#FFF" stop-opacity="0" offset="100%"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M12 3l4.125 2.625v3.75H18v2.25h-1.688l1.5 9.375H6.188l1.5-9.375H6v-2.25h1.875V5.648L12 3zm2.201 9.938L9.54 14.633 9 18.028l5.625-2.062-.424-3.028zM12.005 5.67l-1.88 1.207v2.498h3.75V6.86l-1.87-1.19z" fill="#F44B21"/>
<path fill="#FFF" d="M14.201 12.938L9.54 14.633 9 18.028l5.625-2.062z"/>
<path d="M6 18c-2.042 0-3.95-.01-5.813 0l1.5-9.375h4.326L6 18z" fill="url(#lh-topbar__logo--a)" fill-rule="nonzero" transform="translate(6 3)"/>
<path fill="#FFF176" fill-rule="nonzero" d="M13.875 9.375v-2.56l-1.87-1.19-1.88 1.207v2.543z"/>
<path fill="url(#lh-topbar__logo--b)" fill-rule="nonzero" d="M0 6.375h6v2.25H0z" transform="translate(6 3)"/>
<path fill="url(#lh-topbar__logo--c)" fill-rule="nonzero" d="M6 6.375H1.875v-3.75L6 0z" transform="translate(6 3)"/>
<path fill="url(#lh-topbar__logo--d)" fill-rule="nonzero" d="M6 0l4.125 2.625v3.75H12v2.25h-1.688l1.5 9.375H.188l1.5-9.375H0v-2.25h1.875V2.648z" transform="translate(6 3)"/>
</g>
</svg>

<span class="lh-header--title lh-text-dim">Lighthouse Treemap</span>
</span>

<span class="lh-header--title lh-text-dim">Lighthouse Treemap</span>
<select class="bundle-selector"></select>
</div>

<div class="lh-header--section">
Expand Down
172 changes: 139 additions & 33 deletions lighthouse-treemap/app/src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,19 +55,25 @@ class TreemapViewer {
this.el = el;
this.getHueForKey = TreemapUtil.stableHasher(TreemapUtil.COLOR_HUES);

// TODO: make "DataSelector" to switch between different groups or specific d1 nodes
const group = 'scripts';
const depthOneNodes = this.depthOneNodesByGroup[group];
this.currentTreemapRoot = this.wrapNodesInNewRootNode(depthOneNodes);
TreemapUtil.walk(this.currentTreemapRoot, (node, path) => this.nodeToPathMap.set(node, path));

this.viewModes = this.createViewModes();
this.currentViewMode = this.viewModes[0];
/* eslint-disable no-unused-expressions */
/** @type {LH.Treemap.Node} */
this.currentTreemapRoot;
/** @type {LH.Treemap.ViewMode} */
this.currentViewMode;
/** @type {LH.Treemap.Selector} */
this.selector;
/** @type {LH.Treemap.ViewMode[]} */
this.viewModes;
/** @type {RenderState=} */
this.previousRenderState;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cant this also be initialized with the same shape? it'd mean you can remove the awkward !this.previousRenderState || bits below, right?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did try, but it made things more awkward.

/** @type {WebTreeMap} */
this.treemap;
/* eslint-enable no-unused-expressions */

renderViewModeButtons(this.viewModes);
this.createHeader();
this.render();
this.initListeners();
this.setSelector({type: 'group', value: 'scripts'});
this.render();
}

createHeader() {
Expand All @@ -77,6 +83,50 @@ class TreemapViewer {

const bytes = this.wrapNodesInNewRootNode(this.depthOneNodesByGroup.scripts).resourceBytes;
TreemapUtil.find('.lh-header--size').textContent = TreemapUtil.formatBytes(bytes);

this.createBundleSelector();
}

createBundleSelector() {
paulirish marked this conversation as resolved.
Show resolved Hide resolved
const bundleSelectorEl = TreemapUtil.find('select.bundle-selector');
bundleSelectorEl.innerHTML = ''; // Clear just in case document was saved with Ctrl+S.

/** @type {LH.Treemap.Selector[]} */
const selectors = [];

/**
* @param {LH.Treemap.Selector} selector
* @param {string} text
*/
function makeOption(selector, text) {
const optionEl = TreemapUtil.createChildOf(bundleSelectorEl, 'option');
optionEl.value = String(selectors.length);
selectors.push(selector);
optionEl.textContent = text;
}

for (const [group, depthOneNodes] of Object.entries(this.depthOneNodesByGroup)) {
makeOption({type: 'group', value: group}, `All ${group}`);
for (const depthOneNode of depthOneNodes) {
// Only add bundles.
if (!depthOneNode.children) continue;

makeOption({type: 'depthOneNode', value: depthOneNode.name}, depthOneNode.name);
}
}

const currentSelectorIndex = selectors.findIndex(s => {
return this.selector &&
s.type === this.selector.type &&
s.value === this.selector.value;
});
bundleSelectorEl.value = String(currentSelectorIndex !== -1 ? currentSelectorIndex : 0);
bundleSelectorEl.addEventListener('change', () => {
const index = Number(bundleSelectorEl.value);
const selector = selectors[index];
this.setSelector(selector);
this.render();
});
}

initListeners() {
Expand Down Expand Up @@ -173,32 +223,88 @@ class TreemapViewer {
return viewModes;
}

render() {
TreemapUtil.walk(this.currentTreemapRoot, node => {
// @ts-ignore: webtreemap will store `dom` on the data to speed up operations.
// However, when we change the underlying data representation, we need to delete
// all the cached DOM elements. Otherwise, the rendering will be incorrect when,
// for example, switching between "All JavaScript" and a specific bundle.
delete node.dom;

// @ts-ignore: webtreemap uses `size` to partition the treemap.
node.size = node[this.currentViewMode.partitionBy || 'resourceBytes'] || 0;
});
webtreemap.sort(this.currentTreemapRoot);
/**
* @param {LH.Treemap.Selector} selector
*/
setSelector(selector) {
this.selector = selector;

if (selector.type === 'group') {
this.currentTreemapRoot =
this.wrapNodesInNewRootNode(this.depthOneNodesByGroup[selector.value]);
} else if (selector.type === 'depthOneNode') {
let node;
outer: for (const depthOneNodes of Object.values(this.depthOneNodesByGroup)) {
for (const depthOneNode of depthOneNodes) {
if (depthOneNode.name === selector.value) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if there any any duplicates, then this can match incorrectly.
with the current data, it seems unlikely, but once we go intra-bundle, i suspect we'll run into this.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is just depth one nodes, so for a duplicate to be possible that would mean there are multiple instances of network requests with the same URL.

node = depthOneNode;
break outer;
}
}
}

this.treemap = new webtreemap.TreeMap(this.currentTreemapRoot, {
padding: [16, 3, 3, 3],
spacing: 10,
caption: node => this.makeCaption(node),
});
if (!node) {
throw new Error('unknown depthOneNode: ' + selector.value);
}

this.el.innerHTML = '';
this.treemap.render(this.el);
this.currentTreemapRoot = node;
} else {
throw new Error('unknown selector: ' + JSON.stringify(selector));
}

applyActiveClass(this.currentViewMode.id);
TreemapUtil.find('.webtreemap-node').classList.add('webtreemap-node--root');
this.viewModes = this.createViewModes();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

doing this inside of setSelector seems odd. why not create viewmodes in constructor?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the labels are based on the bundle selected. also could be that some view modes are not relevant for a selected bundle (like the upcoming duplicated modules)

if (!this.currentViewMode) this.currentViewMode = this.viewModes[0];
}

this.updateColors();
/**
* @param {LH.Treemap.ViewMode} viewMode
*/
setViewMode(viewMode) {
this.currentViewMode = viewMode;
}

render() {
const rootChanged =
!this.previousRenderState || this.previousRenderState.root !== this.currentTreemapRoot;
const viewChanged =
!this.previousRenderState || this.previousRenderState.viewMode !== this.currentViewMode;

if (rootChanged) {
this.nodeToPathMap = new Map();
TreemapUtil.walk(this.currentTreemapRoot, (node, path) => this.nodeToPathMap.set(node, path));
renderViewModeButtons(this.viewModes);

TreemapUtil.walk(this.currentTreemapRoot, node => {
// @ts-ignore: webtreemap will store `dom` on the data to speed up operations.
// However, when we change the underlying data representation, we need to delete
// all the cached DOM elements. Otherwise, the rendering will be incorrect when,
// for example, switching between "All JavaScript" and a specific bundle.
delete node.dom;

// @ts-ignore: webtreemap uses `size` to partition the treemap.
node.size = node[this.currentViewMode.partitionBy || 'resourceBytes'] || 0;
});
webtreemap.sort(this.currentTreemapRoot);

this.treemap = new webtreemap.TreeMap(this.currentTreemapRoot, {
padding: [16, 3, 3, 3],
spacing: 10,
caption: node => this.makeCaption(node),
});
this.el.innerHTML = '';
this.treemap.render(this.el);
TreemapUtil.find('.webtreemap-node').classList.add('webtreemap-node--root');
}

if (rootChanged || viewChanged) {
this.updateColors();
applyActiveClass(this.currentViewMode.id);
}

this.previousRenderState = {
root: this.currentTreemapRoot,
viewMode: this.currentViewMode,
};
}

resize() {
Expand Down Expand Up @@ -292,7 +398,7 @@ function renderViewModeButtons(viewModes) {
});

inputEl.addEventListener('click', () => {
treemapViewer.currentViewMode = viewMode;
treemapViewer.setViewMode(viewMode);
treemapViewer.render();
});
}
Expand Down
9 changes: 7 additions & 2 deletions lighthouse-treemap/app/styles/treemap.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,10 @@ body {
.lh-header--section {
display: flex;
align-items: center;
font-size: 20px;
justify-content: space-between;
}
.lh-header--section:nth-of-type(2) {
justify-content: space-between;
font-size: 20px;
}
.lh-header--url {
font-weight: bold;
Expand All @@ -54,6 +54,11 @@ body {
white-space: nowrap;
}

.bundle-selector {
width: 50%;
padding: 2px;
}

.lh-topbar__logo {
width: 24px;
height: 24px;
Expand Down
5 changes: 5 additions & 0 deletions lighthouse-treemap/types/treemap.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@ declare global {
showNode?(node: LH.Treemap.Node): boolean;
}

interface RenderState {
root: LH.Treemap.Node;
viewMode: LH.Treemap.ViewMode;
}

var webtreemap: {
TreeMap: typeof WebTreeMap;
render(el: HTMLElement, data: any, options: WebTreeMapOptions): void;
Expand Down
5 changes: 5 additions & 0 deletions types/treemap.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ declare global {

type NodePath = string[];

interface Selector {
type: 'depthOneNode' | 'group';
value: string;
}

interface ViewMode {
id: 'all' | 'unused-bytes';
label: string;
Expand Down