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

adding iterators #83

Merged
merged 2 commits into from
Jul 25, 2023
Merged

adding iterators #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b729d4c
adding iterators
dlockhart Jul 20, 2023
a9c7b5c
use tier1 chevrons instead
dlockhart Jul 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 102 additions & 75 deletions src/server/report/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import './button.js';
import { COMMON_STYLE, FILTER_STATUS, FULL_MODE, LAYOUTS, renderEmpty, renderTestStatus } from './common.js';
import { css, html, LitElement, nothing } from 'lit';
import { ICON_NEXT, ICON_PREV } from './icons.js';
import { RADIO_STYLE, renderRadio } from './radio.js';
import { renderBrowserResults, RESULT_STYLE } from './result.js';
import { renderTabButtons, renderTabPanel, TAB_STYLE } from './tabs.js';
import data from './data.js';
import { ICON_HOME } from './icons.js';
import page from 'page';

class App extends LitElement {
Expand All @@ -15,41 +15,38 @@ class App extends LitElement {
_filterTest: { state: true },
_fullMode: { state: true },
_layout: { state: true },
_overlay: { state: true },
_selectedBrowserIndex: { state: true }
_overlay: { state: true }
};
static styles = [COMMON_STYLE, RADIO_STYLE, RESULT_STYLE, TAB_STYLE, css`
.container {
:host {
display: grid;
grid-auto-flow: row;
grid-template-areas: "sidebar content";
grid-template-columns: 300px auto;
grid-template-columns: 275px auto;
height: 100vh;
overflow: hidden;
Copy link
Member Author

Choose a reason for hiding this comment

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

Was able to simplify the CSS grid stuff a bit.

}
aside {
background-color: #fff;
border-right: 1px solid #e6e6e6;
box-shadow: 0 0 6px rgba(0,0,0,.07);
box-sizing: border-box;
grid-area: sidebar;
height: 100vh;
position: sticky;
top: 0;
z-index: 10;
}
aside > div {
padding: 10px;
padding: 20px;
}
main {
background-color: #fafafa;
grid-area: content;
overflow-y: scroll;
}
main > .item-container:first-child {
padding-top: 20px;
}
.list-file-title {
padding-bottom: 20px;
Copy link
Member Author

Choose a reason for hiding this comment

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

The test list now uses similar spacing and separators as the results:

Screenshot 2023-07-20 at 4 59 30 PM

}
table {
background-color: #ffffff;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dfe6ef;
border: 1px solid #cdd5dc;
padding: 10px;
text-align: center;
}
Expand All @@ -68,49 +65,46 @@ class App extends LitElement {
}
fieldset {
border: none;
margin-inline: 0;
padding-inline: 0;
margin: 20px 0;
padding: 0;
}
fieldset > legend {
font-weight: bold;
}
.test-results {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-areas:
'header'
'content';
height: 100vh;
}
.header {
background-color: #f0f0f0;
border-bottom: 1px solid #cdd5dc;
box-shadow: 0 0 6px rgba(0,0,0,.07);
grid-area: header;
}
.tab-panels {
grid-area: content;
overflow: auto;
}
.title {
align-items: center;
display: flex;
font-size: 1.5rem;
gap: 5px;
padding: 20px 20px 0 20px;
}
.title h2 {
margin: 0;
}
.title-info {
flex: 1 0 auto;
}
.title-navigation {
flex: 0 0 auto;
font-size: inherit;
}
.settings {
align-items: center;
display: flex;
padding: 20px;
gap: 20px;
gap: 10px;
}
.settings > * {
flex: 0 0 auto;
}
.settings > .spacer {
flex: 1 1 auto;
}
.settings-box {
background-color: #ffffff;
Expand Down Expand Up @@ -145,6 +139,7 @@ class App extends LitElement {
} else {
this._filterFile = undefined;
this._filterTest = undefined;
this._selectedBrowserIndex = -1;
}
if (searchParams.has('status')) {
let filterStatus = searchParams.get('status');
Expand All @@ -160,20 +155,15 @@ class App extends LitElement {
}
render() {
return html`
<div class="container">
<aside>
<div>
<h1>Visual-diff Results</h1>
${this._renderFilters()}
</div>
</aside>
<main>${this._renderMainView()}</main>
</div>
<aside>
<div>
<h1>Visual-diff Results</h1>
${this._renderFilters()}
</div>
</aside>
<main>${this._renderMainView()}</main>
`;
}
_handleBackClick() {
this._updateSearchParams({ file: undefined, test: undefined });
}
Copy link
Member Author

Choose a reason for hiding this comment

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

This and _handleListTestClick didn't end up being necessary due to the <a href> doing the same thing -- it was actually firing things twice.

_handleFilterBrowserChange(e) {
const browsers = data.browsers.map(b => b.name).filter(b => {
if (b === e.target.value) {
Expand All @@ -187,13 +177,15 @@ class App extends LitElement {
_handleFilterStatusChange(e) {
this._updateSearchParams({ status: e.target.value });
}
_handleListTestClick(e) {
this._updateSearchParams({ file: e.target.dataset.file, test: e.target.dataset.test });
return false;
_handleNextClick() {
this._updateSearchParams(this._next);
}
_handleOverlayChange(e) {
this._overlay = e.target.checked;
}
_handlePrevClick() {
this._updateSearchParams(this._prev);
}
_renderError(message, source) {
return html`<div class="padding"><p>${message}: <b>${source}</b>.</p></div>`;
}
Expand Down Expand Up @@ -248,18 +240,22 @@ class App extends LitElement {
searchParams.set('file', file.name);
searchParams.delete('test');
return html`
<h2><a href="${this._root}?${searchParams.toString()}" @click="${this._handleListFileClick}" data-file="${file.name}">${file.name}</a></h2>
<table>
<thead>
<tr>
<th style="text-align: left;">Test</th>
${data.browsers.map(b => renderBrowserCell(b))}
</tr>
</thead>
<tbody>
${file.tests.map(t => this._renderListFileTest(file, t))}
</tbody>
</table>
<div class="item-container">
<div class="list-file-title">
<h2><a href="${this._root}?${searchParams.toString()}">${file.name}</a></h2>
</div>
<table>
<thead>
<tr>
<th style="text-align: left;">Test</th>
${data.browsers.map(b => renderBrowserCell(b))}
</tr>
</thead>
<tbody>
${file.tests.map(t => this._renderListFileTest(file, t))}
</tbody>
</table>
</div>
`;
}
_renderListFileTest(file, test) {
Expand All @@ -275,21 +271,19 @@ class App extends LitElement {
searchParams.set('test', test.name);
return html`
<tr>
<th style="text-align: left;"><a href="${this._root}?${searchParams.toString()}" @click="${this._handleListTestClick}" data-file="${file.name}" data-test="${test.name}">${test.name}</a></th>
<th style="text-align: left;"><a href="${this._root}?${searchParams.toString()}">${test.name}</a></th>
${results}
</tr>
`;
}
_renderMainView() {

if (this._filterFile === undefined) {
let list;
if (this._files.length === 0) {
return renderEmpty();
} else {
list = this._files.map(f => this._renderListFile(f));
return this._files.map(f => this._renderListFile(f));
}
return html`<div class="padding">${list}</div>`;
}

const fileData = this._files.find(f => f.name === this._filterFile);
Expand All @@ -312,6 +306,7 @@ class App extends LitElement {
return renderTabButtons('browser results', tabs, index => {
this._selectedBrowserIndex = index;
this.shadowRoot.querySelector('.tab-panels').scrollTo(0, 0);
this.requestUpdate();
Copy link
Member Author

Choose a reason for hiding this comment

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

_selectedBrowserIndex isn't a reactive state property anymore since we modify it ourselves. But in this case they've selected a new tab so we force a re-render.

});
}
_renderTabPanels(tabs) {
Expand Down Expand Up @@ -349,9 +344,13 @@ class App extends LitElement {
});
});

const selectedBrowser = browsers[this._selectedBrowserIndex] ||
browsers.find(b => browserResults.get(b.name) < tests.length) ||
browsers[0];
if (!browsers[this._selectedBrowserIndex]) {
this._selectedBrowserIndex = Math.max(
browsers.findIndex((b) => browserResults.get(b.name) < tests.length),
0
);
Copy link
Member Author

Choose a reason for hiding this comment

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

We need to remember the index we automatically pick for them so that it stays as they iterate.

}
const selectedBrowser = browsers[this._selectedBrowserIndex];

const tabs = browsers.map((b) => {
const numPassed = browserResults.get(b.name);
Expand All @@ -364,21 +363,25 @@ class App extends LitElement {
};
});

const homeSearchParams = new URLSearchParams(window.location.search);
homeSearchParams.delete('file');
homeSearchParams.delete('test');

return html`
<div class="test-results">
<div class="header">
<div class="title">
<div class="title-info">
<h2>${fileData.name}</h2>
</div>
<div class="title-navigation">
<d2l-vdiff-report-button text="Back" @click="${this._handleBackClick}">${ICON_HOME}</d2l-vdiff-report-button>
</div>
<a href="${this._root}?${homeSearchParams.toString()}">Home</a>
<span>&nbsp;&gt;&nbsp;</span>
<h2>${fileData.name}</h2>
</div>
<div class="settings">
${renderRadio('layout', this._layout, (val) => this._layout = val, [LAYOUTS.FULL, LAYOUTS.SPLIT])}
<label class="settings-box"><input type="checkbox" ?checked="${this._overlay}" @change="${this._handleOverlayChange}">Overlay Difference</label>
${fullMode}
<div class="spacer"></div>
<d2l-vdiff-report-button ?disabled="${this._prev === undefined}" text="Prev" @click="${this._handlePrevClick}">${ICON_PREV}</d2l-vdiff-report-button>
<d2l-vdiff-report-button ?disabled="${this._next === undefined}" text="Next" @click="${this._handleNextClick}">${ICON_NEXT}</d2l-vdiff-report-button>
</div>
${this._renderTabButtons(tabs)}
</div>
Expand All @@ -391,6 +394,12 @@ class App extends LitElement {

const files = [];
let foundFilterTest = false;
let lookingForNextFile = false;
let lookingForNextTest = false;
let prevFile, prevTest;

this._next = undefined;
this._prev = undefined;

data.files.forEach(f => {
const tests = [];
Expand All @@ -403,13 +412,31 @@ class App extends LitElement {
!r.passed && this._filterStatus === FILTER_STATUS.FAILED)) numStatusMatch++;
});
if (numStatusMatch > 0) {
tests.push(t);
if (t.name === this._filterTest) {
if (lookingForNextTest) {
lookingForNextTest = false;
this._next = { file: f.name, test: t.name };
}
if (t.name === this._filterTest && f.name === this._filterFile) {
foundFilterTest = true;
lookingForNextTest = true;
this._prev = prevTest;
}
prevTest = { file: f.name, test: t.name };
tests.push(t);
}
});
if (tests.length > 0) {
if (this._filterTest === undefined) {
if (lookingForNextFile) {
lookingForNextFile = false;
this._next = { file: f.name };
}
if (f.name === this._filterFile) {
lookingForNextFile = true;
this._prev = prevFile;
}
}
prevFile = { file: f.name };
files.push({ ...f, tests });
}
});
Expand Down
17 changes: 15 additions & 2 deletions src/server/report/button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { css, html, LitElement } from 'lit';

class Button extends LitElement {
static properties = {
disabled: { type: Boolean },
text: { type: String }
};
static styles = [css`
Expand All @@ -10,7 +11,6 @@ class Button extends LitElement {
}
button {
align-items: center;
background-color: #ffffff;
border: 1px solid #cdd5dc;
border-radius: 5px;
cursor: pointer;
Expand All @@ -22,6 +22,11 @@ class Button extends LitElement {
padding: 10px;
user-select: none;
}
button,
button[disabled]:hover {
background-color: #ffffff;
color: #6e7477;
}
button:hover,
button:focus {
background-color: #007bff;
Expand All @@ -31,9 +36,17 @@ class Button extends LitElement {
border-color: #007bff;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #007bff;
}
button[disabled] {
cursor: default;
opacity: 0.5;
}
`];
constructor() {
super();
this.disabled = false;
}
render() {
return html`<button type="button"><slot></slot>${this.text}</button>`;
return html`<button ?disabled="${this.disabled}" type="button"><slot></slot>${this.text}</button>`;
}
}

Expand Down
Loading