Skip to content

Commit 068d084

Browse files
devversiondevversion
committed
refactor: pre-format report-viewer.html to reduce future diffs
1 parent 3783c98 commit 068d084

File tree

1 file changed

+135
-71
lines changed

1 file changed

+135
-71
lines changed

‎report-app/src/app/pages/report-viewer/report-viewer.html‎

Lines changed: 135 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
label="Score"
1313
size="large"
1414
[total]="overview.totalPoints"
15-
[max]="overview.maxOverallPoints" />
15+
[max]="overview.maxOverallPoints"
16+
/>
1617
</div>
1718
<div>
1819
<h2>{{ overview.displayName }}</h2>
@@ -31,31 +32,29 @@ <h2>{{ overview.displayName }}</h2>
3132
<div class="summary-grid">
3233
<div>
3334
<h3>Model</h3>
34-
<provider-label
35-
[id]="overview.model"
36-
[label]="overview.model"/>
35+
<provider-label [id]="overview.model" [label]="overview.model" />
3736
</div>
3837
@if (fw) {
3938
<div>
4039
<h3>Framework</h3>
4140
<div class="framework-info">
4241
<provider-label
4342
[id]="fw.fullStackFramework.id"
44-
[label]="fw.fullStackFramework.displayName"/>
43+
[label]="fw.fullStackFramework.displayName"
44+
/>
4545
@if (fw.clientSideFramework.id !== fw.fullStackFramework.id) {
4646
<provider-label
4747
[id]="fw.clientSideFramework.id"
48-
[label]="fw.clientSideFramework.displayName"/>
48+
[label]="fw.clientSideFramework.displayName"
49+
/>
4950
}
5051
</div>
5152
</div>
5253
}
5354
@if (runner) {
5455
<div>
5556
<h3>Runner</h3>
56-
<provider-label
57-
[id]="runner.id"
58-
[label]="runner.displayName"/>
57+
<provider-label [id]="runner.id" [label]="runner.displayName" />
5958
</div>
6059
}
6160
</div>
@@ -113,7 +112,9 @@ <h3 class="chart-title">
113112
</h3>
114113
<div class="summary-card-item">
115114
<stacked-bar-chart
116-
[data]="accessibilityStatsAsGraphData(overview.stats.accessibility)!"
115+
[data]="
116+
accessibilityStatsAsGraphData(overview.stats.accessibility)!
117+
"
117118
[compact]="true"
118119
/>
119120
</div>
@@ -124,21 +125,27 @@ <h3 class="chart-title">
124125
@if (details) {
125126
<h3>Usage Details</h3>
126127
<ul class="status-badge-group">
127-
<li class="status-badge neutral">Input tokens: {{ details.summary.usage.inputTokens | number }}</li>
128-
<li class="status-badge neutral">Output tokens: {{ details.summary.usage.outputTokens | number }}</li>
128+
<li class="status-badge neutral">
129+
Input tokens: {{ details.summary.usage.inputTokens | number }}
130+
</li>
131+
<li class="status-badge neutral">
132+
Output tokens: {{ details.summary.usage.outputTokens | number }}
133+
</li>
129134

130135
@if (details.summary.usage.totalTokens != null) {
131-
<li class="status-badge neutral">Total tokens: {{ details.summary.usage.totalTokens | number }}</li>
136+
<li class="status-badge neutral">
137+
Total tokens: {{ details.summary.usage.totalTokens | number }}
138+
</li>
132139
}
133140
</ul>
134141
}
135142
</div>
136143
</section>
137144

138145
@if (isLoading()) {
139-
<message-spinner message="Loading full report"/>
146+
<message-spinner message="Loading full report" />
140147
} @else if (error()) {
141-
<pre class="callout error code">{{error()?.stack}}</pre>
148+
<pre class="callout error code">{{ error()?.stack }}</pre>
142149
} @else if (report) {
143150
@let details = report.details;
144151

@@ -151,12 +158,18 @@ <h3>Usage Details</h3>
151158
@if (details.systemInstructionsPrompt || details.bestPracticesPrompt) {
152159
<!-- Legacy code path for older reports. -->
153160
<h4>System Prompt</h4>
154-
<pre class="callout neutral code">{{ details.systemInstructionsPrompt }}</pre>
161+
<pre class="callout neutral code">{{
162+
details.systemInstructionsPrompt
163+
}}</pre>
155164
<h4>Best Practices Prompt</h4>
156-
<pre class="callout neutral code">{{ details.bestPracticesPrompt }}</pre>
165+
<pre class="callout neutral code">{{
166+
details.bestPracticesPrompt
167+
}}</pre>
157168
} @else {
158169
<h4>Generation System Prompt</h4>
159-
<pre class="callout neutral code">{{ details.systemPromptGeneration }}</pre>
170+
<pre class="callout neutral code">{{
171+
details.systemPromptGeneration
172+
}}</pre>
160173
<h4>Repair System Prompt</h4>
161174
<pre class="callout neutral code">{{ details.systemPromptRepair }}</pre>
162175
}
@@ -219,7 +232,9 @@ <h4>Logs</h4>
219232
<h2>Generated applications</h2>
220233
@if (allFailedChecks().length > 0) {
221234
<details class="filter-dropdown" #dropdown>
222-
<summary>Filter by failed checks ({{ selectedChecks().size }} selected)</summary>
235+
<summary>
236+
Filter by failed checks ({{ selectedChecks().size }} selected)
237+
</summary>
223238
<div class="dropdown-content">
224239
<failed-checks-filter
225240
[allFailedChecks]="allFailedChecks()"
@@ -236,14 +251,17 @@ <h2>Generated applications</h2>
236251
<score
237252
size="small"
238253
[total]="result.score.totalPoints"
239-
[max]="result.score.maxOverallPoints" />
254+
[max]="result.score.maxOverallPoints"
255+
/>
240256
<div class="app-header">
241257
{{ result.promptDef.name }}
242258

243259
<div class="status-badge-group">
244260
@let initialBuild = result.attemptDetails[0].buildResult;
245261
@let repairBuild =
246-
result.attemptDetails.length > 1 ? result.attemptDetails[1].buildResult : null;
262+
result.attemptDetails.length > 1
263+
? result.attemptDetails[1].buildResult
264+
: null;
247265
@let finalBuild = repairBuild ?? initialBuild;
248266

249267
@if (finalBuild.runtimeErrors) {
@@ -259,7 +277,6 @@ <h2>Generated applications</h2>
259277
}
260278
</div>
261279
</div>
262-
263280
</expansion-panel-header>
264281

265282
@if (appPanel.opened()) {
@@ -273,7 +290,9 @@ <h4>Prompt</h4>
273290
<h4>Results</h4>
274291
@for (category of result.score.categories; track category.id) {
275292
<h5>
276-
{{ category.name }} ({{ category.points }}/{{ category.maxPoints }}
293+
{{ category.name }} ({{ category.points }}/{{
294+
category.maxPoints
295+
}}
277296
points)
278297
</h5>
279298

@@ -283,16 +302,24 @@ <h5>
283302
@if (isSkippedAssessment(check)) {
284303
<span class="status">➖</span>
285304
<span class="name">{{ check.name }}</span>
286-
<span class="status-text points">Skipped: {{ check.message }}</span>
305+
<span class="status-text points"
306+
>Skipped: {{ check.message }}</span
307+
>
287308
} @else {
288309
@let isMax = check.successPercentage === 1;
289-
<span class="status status-text" [class.success]="isMax" [class.error]="!isMax">{{
290-
isMax ? '✔' : '✘'
291-
}}</span>
310+
<span
311+
class="status status-text"
312+
[class.success]="isMax"
313+
[class.error]="!isMax"
314+
>{{ isMax ? '✔' : '✘' }}</span
315+
>
292316
<span class="name">{{ check.name }}</span>
293-
<span class="status-text points" [class.success]="isMax" [class.error]="!isMax">{{
294-
check.message
295-
}}</span>
317+
<span
318+
class="status-text points"
319+
[class.success]="isMax"
320+
[class.error]="!isMax"
321+
>{{ check.message }}</span
322+
>
296323
}
297324
</div>
298325
} @empty {
@@ -302,15 +329,21 @@ <h5>
302329
}
303330
<!-- Total score section -->
304331
<div class="check-details total">
305-
@let totalPercent = formatScore(result.score.totalPoints, result.score.maxOverallPoints);
332+
@let totalPercent =
333+
formatScore(
334+
result.score.totalPoints,
335+
result.score.maxOverallPoints
336+
);
306337
<span class="status"></span>
307338
<span class="name">Total: &nbsp;</span>
308339
<span
309340
class="status-text points"
310341
[class.success]="totalPercent >= 90"
311342
[class.warn]="totalPercent < 90 && totalPercent >= 80"
312-
[class.error]="totalPercent < 80">
313-
{{ result.score.totalPoints }} / {{ result.score.maxOverallPoints }} points ({{
343+
[class.error]="totalPercent < 80"
344+
>
345+
{{ result.score.totalPoints }} /
346+
{{ result.score.maxOverallPoints }} points ({{
314347
totalPercent
315348
}})
316349
</span>
@@ -322,33 +355,46 @@ <h4>Additional info</h4>
322355
@for (attempt of result.attemptDetails; track attempt) {
323356
@let isBuilt = attempt.buildResult.status === 'success';
324357
@let axeViolations = attempt.buildResult.axeViolations;
325-
@let hasAxeViolations = axeViolations && axeViolations.length > 0;
358+
@let hasAxeViolations =
359+
axeViolations && axeViolations.length > 0;
326360

327361
<expansion-panel #expansionPanel>
328362
<expansion-panel-header>
329-
{{ $index === 0 ? 'Initial response' : `Repair attempt #${$index}` }}
363+
{{
364+
$index === 0
365+
? 'Initial response'
366+
: `Repair attempt #${$index}`
367+
}}
330368
@if (!isBuilt) {
331-
<span
332-
class="status-badge"
333-
[class.error]="!isBuilt">Build</span>
369+
<span class="status-badge" [class.error]="!isBuilt"
370+
>Build</span
371+
>
334372
}
335373
@if (hasAxeViolations) {
336-
<span
337-
class="status-badge"
338-
[class.error]="hasAxeViolations">A11y</span>
374+
<span
375+
class="status-badge"
376+
[class.error]="hasAxeViolations"
377+
>A11y</span
378+
>
339379
}
340380
</expansion-panel-header>
341381

342382
@if (expansionPanel.opened()) {
343383
@if (attempt.reasoning) {
344384
<details class="thoughts-button">
345-
<summary class="neutral-button">See LLM Thoughts</summary>
346-
<pre class="callout neutral code">{{ attempt.reasoning }}</pre>
385+
<summary class="neutral-button">
386+
See LLM Thoughts
387+
</summary>
388+
<pre class="callout neutral code">{{
389+
attempt.reasoning
390+
}}</pre>
347391
</details>
348392
}
349393
@if (!isBuilt) {
350394
<h4>Build Message</h4>
351-
<pre class="callout warn code">{{ attempt.buildResult.message }}</pre>
395+
<pre class="callout warn code">{{
396+
attempt.buildResult.message
397+
}}</pre>
352398
}
353399

354400
@if (hasAxeViolations) {
@@ -381,17 +427,26 @@ <h4>Generated Code</h4>
381427
Format source code
382428
</button>
383429
</div>
384-
<app-code-viewer [code]="formatted().get(file) ?? file.code" />
430+
<app-code-viewer
431+
[code]="formatted().get(file) ?? file.code"
432+
/>
385433
}
386434
}
387435
</expansion-panel>
388436
}
389437

390-
@if (result.userJourneys && result.userJourneys.result.length > 0) {
438+
@if (
439+
result.userJourneys && result.userJourneys.result.length > 0
440+
) {
391441
<expansion-panel>
392-
<expansion-panel-header>User Journeys</expansion-panel-header>
393-
@for (journey of result.userJourneys.result; track journey.name) {
394-
<h4>{{journey.name}}</h4>
442+
<expansion-panel-header
443+
>User Journeys</expansion-panel-header
444+
>
445+
@for (
446+
journey of result.userJourneys.result;
447+
track journey.name
448+
) {
449+
<h4>{{ journey.name }}</h4>
395450

396451
<ol>
397452
@for (step of journey.steps; track $index) {
@@ -408,32 +463,39 @@ <h4>Debugging Tools</h4>
408463
<button
409464
class="neutral-button"
410465
title="Download a ZIP for debugging. You can upload the ZIP to AI Studio for further analysis of a specific app."
411-
(click)="downloadDebuggingZip(result)">
466+
(click)="downloadDebuggingZip(result)"
467+
>
412468
Download ZIP for debugging
413469
</button>
414470
@if (result.toolLogs && result.toolLogs.length > 0) {
415471
<expansion-panel>
416472
<expansion-panel-header>Tool Logs</expansion-panel-header>
417473
<ul class="tool-logs-list">
418-
@for (log of result.toolLogs; track $index) {
419-
<li>
420-
<details class="details mcp-log-entry">
421-
@let name = log.request.name;
422-
<summary>
423-
Log Entry #{{ $index + 1
424-
}}{{ name ? ' - ' + name : '' }}
425-
</summary>
426-
<div class="mcp-log-content">
427-
<h5>Request</h5>
428-
<ngx-json-viewer [json]="log.request" [expanded]="false"></ngx-json-viewer>
429-
<h5>Response</h5>
430-
<ngx-json-viewer [json]="log.response" [expanded]="false"></ngx-json-viewer>
431-
</div>
432-
</details>
433-
</li>
434-
} @empty {
435-
<li>No MCP logs were recorded for this run.</li>
436-
}
474+
@for (log of result.toolLogs; track $index) {
475+
<li>
476+
<details class="details mcp-log-entry">
477+
@let name = log.request.name;
478+
<summary>
479+
Log Entry #{{ $index + 1
480+
}}{{ name ? ' - ' + name : '' }}
481+
</summary>
482+
<div class="mcp-log-content">
483+
<h5>Request</h5>
484+
<ngx-json-viewer
485+
[json]="log.request"
486+
[expanded]="false"
487+
></ngx-json-viewer>
488+
<h5>Response</h5>
489+
<ngx-json-viewer
490+
[json]="log.response"
491+
[expanded]="false"
492+
></ngx-json-viewer>
493+
</div>
494+
</details>
495+
</li>
496+
} @empty {
497+
<li>No MCP logs were recorded for this run.</li>
498+
}
437499
</ul>
438500
</expansion-panel>
439501
}
@@ -442,7 +504,9 @@ <h5>Response</h5>
442504
@if (finalBuild.runtimeErrors) {
443505
<div class="app-details-section">
444506
<h4>Runtime errors</h4>
445-
<pre class="callout warn code">{{ finalBuild.runtimeErrors }}</pre>
507+
<pre class="callout warn code">{{
508+
finalBuild.runtimeErrors
509+
}}</pre>
446510
</div>
447511
}
448512

@@ -451,7 +515,7 @@ <h4>Runtime errors</h4>
451515
@if (screenshot) {
452516
<div class="app-details-section">
453517
<h4>Screenshot</h4>
454-
<img class="screenshot" [src]="screenshot"/>
518+
<img class="screenshot" [src]="screenshot" />
455519
</div>
456520
}
457521
</div>

0 commit comments

Comments
 (0)