Use internal rounded bar in <btrix-meter> for QA analysis meters (#1869)
Closes #1851 This changes how we use the `<btrix-meter>` component: previously, we didn't set a `max` value on it, so it was drawing its internal (rounded) bar at 100% of the meter width, and then drawing the `<btrix-meter-bar>`s inside that 100% width bar. This changes that, and instead it now does the following: - Draws the internal rounded bar to the width of the proportion of their counts to the total page count; - Adjusts the `<btrix-meter-bar>`s to be proportional to the completed page count rather than the total page count - Uses the `"available"` slot in `<btrix-meter>` to draw the remaining "No data" bar & tooltip in the remaining space outside of the internal rounded bar This also includes a couple unrelated but adjacent changes: - Changes the page count text to say "Analysis starting" when the analysis run is starting, because there's no meaningful page count at that point. - Uses the pending state when the total page count is falsy (`undefined` or `0`), rather than just `undefined`
This commit is contained in:
Emma Segal-Grossman
GitHub
parent
879e509b39
commit
a7382ebb98
@ -44,7 +44,7 @@ import { formatNumber, getLocale } from "@/utils/localization";
|
||||
import { pluralOf } from "@/utils/pluralize";
|
||||
|
||||
type QAStatsThreshold = {
|
||||
lowerBoundary: `${number}` | "No data";
|
||||
lowerBoundary: `${number}`;
|
||||
count: number;
|
||||
};
|
||||
type QAStats = Record<"screenshotMatch" | "textMatch", QAStatsThreshold[]>;
|
||||
@ -505,9 +505,7 @@ export class ArchivedItemDetailQA extends TailwindElement {
|
||||
<div>
|
||||
<sl-tooltip
|
||||
content=${mostRecentSelected
|
||||
? msg(
|
||||
"You’re viewing the latest analysis run results.",
|
||||
)
|
||||
? msg("You’re viewing the latest analysis run results.")
|
||||
: msg(
|
||||
"You’re viewing results from an older analysis run.",
|
||||
)}
|
||||
@ -534,15 +532,13 @@ export class ArchivedItemDetailQA extends TailwindElement {
|
||||
})}
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-neutral-500">
|
||||
${when(
|
||||
qaRun.stats,
|
||||
(stats) => html`
|
||||
<div class="text-sm font-normal">
|
||||
${formatNumber(stats.done)} / ${formatNumber(stats.found)}
|
||||
${pluralOf("pages", stats.found)} ${msg("analyzed")}
|
||||
</div>
|
||||
`,
|
||||
)}
|
||||
<div class="text-sm font-normal">
|
||||
${qaRun.state === "starting"
|
||||
? msg("Analysis starting")
|
||||
: `${formatNumber(qaRun.stats.done)}/${formatNumber(qaRun.stats.found)}
|
||||
${pluralOf("pages", qaRun.stats.found)} ${msg("analyzed")}`}
|
||||
</div>
|
||||
|
||||
<sl-tooltip
|
||||
content=${msg(
|
||||
"Match analysis compares pages during a crawl against their replay during an analysis run. A good match indicates that the crawl is probably good, whereas severe inconsistencies may indicate a bad crawl.",
|
||||
@ -572,6 +568,7 @@ export class ArchivedItemDetailQA extends TailwindElement {
|
||||
? this.renderMeter(
|
||||
qaRun.stats.found,
|
||||
this.qaStats.value.screenshotMatch,
|
||||
isRunning,
|
||||
)
|
||||
: this.renderMeter()}
|
||||
</btrix-table-cell>
|
||||
@ -585,6 +582,7 @@ export class ArchivedItemDetailQA extends TailwindElement {
|
||||
? this.renderMeter(
|
||||
qaRun.stats.found,
|
||||
this.qaStats.value.textMatch,
|
||||
isRunning,
|
||||
)
|
||||
: this.renderMeter()}
|
||||
</btrix-table-cell>
|
||||
@ -613,16 +611,39 @@ export class ArchivedItemDetailQA extends TailwindElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private renderMeter(pageCount?: number, barData?: QAStatsThreshold[]) {
|
||||
if (pageCount === undefined || !barData) {
|
||||
private renderMeter(): TemplateResult<1>;
|
||||
private renderMeter(
|
||||
pageCount: number,
|
||||
barData: QAStatsThreshold[],
|
||||
qaIsRunning: boolean | undefined,
|
||||
): TemplateResult<1>;
|
||||
private renderMeter(
|
||||
pageCount?: number,
|
||||
barData?: QAStatsThreshold[],
|
||||
qaIsRunning?: boolean,
|
||||
) {
|
||||
if (!pageCount || !barData) {
|
||||
return html`<sl-skeleton
|
||||
class="h-4 flex-1 [--border-radius:var(--sl-border-radius-medium)]"
|
||||
effect="sheen"
|
||||
></sl-skeleton>`;
|
||||
}
|
||||
|
||||
barData = barData.filter(
|
||||
(bar) => (bar.lowerBoundary as string) !== "No data",
|
||||
);
|
||||
|
||||
const analyzedPageCount = barData.reduce(
|
||||
(prev, cur) => prev + cur.count,
|
||||
0,
|
||||
);
|
||||
|
||||
const remainingPageCount = pageCount - analyzedPageCount;
|
||||
const remainderBarLabel = qaIsRunning ? msg("Pending") : msg("Incomplete");
|
||||
|
||||
console.log({ pageCount, barData, analyzedPageCount });
|
||||
return html`
|
||||
<btrix-meter class="flex-1" value=${pageCount}>
|
||||
<btrix-meter class="flex-1" value=${analyzedPageCount} max=${pageCount}>
|
||||
${barData.map((bar) => {
|
||||
const threshold = qaStatsThresholds.find(
|
||||
({ lowerBoundary }) => bar.lowerBoundary === lowerBoundary,
|
||||
@ -632,23 +653,20 @@ export class ArchivedItemDetailQA extends TailwindElement {
|
||||
return bar.count !== 0
|
||||
? html`
|
||||
<btrix-meter-bar
|
||||
value=${(bar.count / pageCount) * 100}
|
||||
style="--background-color: ${threshold?.cssColor}"
|
||||
aria-label=${bar.lowerBoundary}
|
||||
value=${(bar.count / analyzedPageCount) * 100}
|
||||
style="--background-color: ${threshold?.cssColor ?? "none"}"
|
||||
aria-label=${threshold?.label ?? ""}
|
||||
>
|
||||
<div class="text-center">
|
||||
${bar.lowerBoundary === "No data"
|
||||
? msg("No Data")
|
||||
: threshold?.label}
|
||||
${threshold?.label}
|
||||
<div class="text-xs opacity-80">
|
||||
${bar.lowerBoundary !== "No data"
|
||||
? html`${idx === 0
|
||||
? `<${+qaStatsThresholds[idx + 1].lowerBoundary * 100}%`
|
||||
: idx === qaStatsThresholds.length - 1
|
||||
? `>=${threshold ? +threshold.lowerBoundary * 100 : 0}%`
|
||||
: `${threshold ? +threshold.lowerBoundary * 100 : 0}-${+qaStatsThresholds[idx + 1].lowerBoundary * 100 || 100}%`}
|
||||
match <br />`
|
||||
: nothing}
|
||||
${idx === 0
|
||||
? `<${+qaStatsThresholds[idx + 1].lowerBoundary * 100}%`
|
||||
: idx === qaStatsThresholds.length - 1
|
||||
? `>=${threshold ? +threshold.lowerBoundary * 100 : 0}%`
|
||||
: `${threshold ? +threshold.lowerBoundary * 100 : 0}-${+qaStatsThresholds[idx + 1].lowerBoundary * 100 || 100}%`}
|
||||
${msg("match", { desc: "label for match percentage" })}
|
||||
<br />
|
||||
${formatNumber(bar.count)} ${pluralOf("pages", bar.count)}
|
||||
</div>
|
||||
</div>
|
||||
@ -656,6 +674,24 @@ export class ArchivedItemDetailQA extends TailwindElement {
|
||||
`
|
||||
: nothing;
|
||||
})}
|
||||
${remainingPageCount > 0
|
||||
? html`
|
||||
<btrix-meter-bar
|
||||
slot="available"
|
||||
value=${(remainingPageCount / pageCount) * 100}
|
||||
aria-label=${remainderBarLabel}
|
||||
style="--background-color: none"
|
||||
>
|
||||
<div class="text-center">
|
||||
${remainderBarLabel}
|
||||
<div class="text-xs opacity-80">
|
||||
${formatNumber(remainingPageCount)}
|
||||
${pluralOf("pages", remainingPageCount)}
|
||||
</div>
|
||||
</div>
|
||||
</btrix-meter-bar>
|
||||
`
|
||||
: nothing}
|
||||
</btrix-meter>
|
||||
`;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user