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.

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

misc(treemap): initialize app structure #11635

Merged
merged 14 commits into from
Nov 13, 2020
Merged

misc(treemap): initialize app structure #11635

merged 14 commits into from
Nov 13, 2020

Conversation

connorjclark
Copy link
Collaborator

ref #11254, split off from #11545

Basic app structure, including build and puppeteer tests. Simply prints the LHR to the page.

@connorjclark connorjclark requested a review from a team as a code owner November 5, 2020 23:31
@connorjclark connorjclark requested review from Beytoven and removed request for a team November 5, 2020 23:31
@google-cla google-cla bot added the cla: yes label Nov 5, 2020
@connorjclark connorjclark mentioned this pull request Nov 5, 2020
24 tasks
@connorjclark
Copy link
Collaborator Author

Should the commits for this be misc(treemap) or should we add treemap (and viewer?) to the PR title linter?

Copy link
Collaborator

@patrickhulce patrickhulce left a comment

Choose a reason for hiding this comment

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

thanks for the split up, much easier to follow! 🎉 💯

m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

ga('create', 'UA-85519014-2', 'auto');
Copy link
Collaborator

Choose a reason for hiding this comment

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

is this the same analytics account as the viewer? I guess that's what we want when served over same domain anyway

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

ya

lighthouse-treemap/app/src/main.js Outdated Show resolved Hide resolved
*/
function injectOptions() {
// @ts-expect-error
if (!window.__injected) return;
Copy link
Collaborator

Choose a reason for hiding this comment

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

could this mean...?

Suggested change
if (!window.__injected) return;
// Don't inject again if we've already injected the options.
if (window.__injected) return;

Copy link
Collaborator

Choose a reason for hiding this comment

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

if so my dream about syncing the UI state to this seems to be DOA :)

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 refactored this a bit, I think I was mistaken that a separated boolean was needed here)

What do you mean by syncing UI state? For the Ctrl-S document save? I suppose we could delete and keep replacing this script tag as the user changes the view, to facilitate that. Although I doubt many will know to do this, and a better future plan would be a gist-hosted solution.

lighthouse-treemap/app/src/main.js Outdated Show resolved Hide resolved
lighthouse-treemap/app/src/main.js Outdated Show resolved Hide resolved
type Node = _Node;
}

interface WebTreeMapOptions {
Copy link
Collaborator

Choose a reason for hiding this comment

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

these aren't used yet 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.

nope. Just types for the webtreemap library. https://github.com/paulirish/webtreemap-cdt#options

package.json Show resolved Hide resolved
lighthouse-treemap/app/src/main.js Outdated Show resolved Hide resolved

async function main() {
if (window.__TREEMAP_OPTIONS) {
init(window.__TREEMAP_OPTIONS);
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
init(window.__TREEMAP_OPTIONS);
// Prefer the hardcoded options from a saved HTML file above all.
init(window.__TREEMAP_OPTIONS);

is this the only situation that this applies?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Yup!


declare global {
module Treemap {
interface Options {
Copy link
Collaborator

Choose a reason for hiding this comment

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

will this eventually have options in it too?

right now options feels like a bit of a misnomer, payload, initialization data, do any of those seem right?

I'm mostly pushing on this a bit because it feels like we are about to get some UI state for this app, which feels distinctly different from an initial payload. Maybe it's the intention to have all UI state configurable from the initial payload though?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Maybe it's the intention to have all UI state configurable from the initial payload though?

Yup. The UI state is called "Mode" in the WIP branch: https://github.com/GoogleChrome/lighthouse/compare/viewer-treemap-2#diff-c3c7c9ceaada02e42e7ba0b22d920ac101a4747c1742eae23000f6c7627c6f3bR13 The idea is that some bits of the LH report will set a mode to show a certain view.

@patrickhulce
Copy link
Collaborator

Should the commits for this be misc(treemap) or should we add treemap (and viewer?) to the PR title linter?

How active do you expect treemap viewer to be once the bulk is built? If the answer is "as active as viewer" I'd vote misc(treemap) :)

@connorjclark connorjclark changed the title treemap: initialize app structure misc(treemap): initialize app structure Nov 6, 2020
@connorjclark
Copy link
Collaborator Author

tsc -p lighthouse-viewer/ and tsc -p lighthouse-treemap/ completely fail, and I don't know how to resolve it yet.


<script src="src/bundled.js"></script>
<script>
(function (i, s, o, g, r, a, m) {
Copy link
Contributor

Choose a reason for hiding this comment

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

A comment here that summarizes what's happening could be helpful if it's not too much trouble. Personally, at first glance this bit threw me for a loop.

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 meant-to-be-unreadable code for google analytics :) it's what they give to you for copy/paste.

Copy link
Contributor

@Beytoven Beytoven left a comment

Choose a reason for hiding this comment

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

LGTM

@connorjclark
Copy link
Collaborator Author

@patrickhulce what further changes are you requesting?

@@ -0,0 +1,28 @@
import '../../types/treemap';
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 don't see any errors in vscode now, but yarn tsc -p lighthouse-treemap/ fails spectacularly. @brendankenny I'm quite lost here, do you have any advice?

Copy link
Collaborator

Choose a reason for hiding this comment

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

I think typeRoots might be your problem

@patrickhulce
Copy link
Collaborator

@patrickhulce what further changes are you requesting?

I don't know yet I thought you were still working on this, sorry. Is this awaiting my feedback?

Copy link
Collaborator

@patrickhulce patrickhulce left a comment

Choose a reason for hiding this comment

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

pretty much LGTM, just the types issue and cleanup of outstanding GA question

lighthouse-treemap/app/src/main.js Outdated Show resolved Hide resolved
* @param {LH.Treemap.Options} options
*/
function injectOptions(options) {
if (window.__treemapOptions) return;
Copy link
Collaborator

Choose a reason for hiding this comment

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

definitely fits now, so not worth discussing much, but can I reserve the right to object to options if this turns into state in future PRs? 😃

{
"extends": "../tsconfig",
"compilerOptions": {
"typeRoots": [
Copy link
Collaborator

Choose a reason for hiding this comment

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

I don't think this actually includes the types like you want it to, does it? That might be your problem, most of our types aren't packages, they're just files that should be in include, no?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

awesome, thanks!

@@ -0,0 +1,28 @@
import '../../types/treemap';
Copy link
Collaborator

Choose a reason for hiding this comment

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

I think typeRoots might be your problem

@devtools-bot devtools-bot merged commit fea7ffc into master Nov 13, 2020
@devtools-bot devtools-bot deleted the treemap-basic branch November 13, 2020 21:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants