Improve pipeline debug styling (#15849)

This commit is contained in:
Paulus Schoutsen 2023-03-17 13:04:14 -04:00 committed by GitHub
parent 30b8dc258a
commit 1c9e3915e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 103 additions and 4 deletions

View File

@ -119,8 +119,6 @@ export const runPipelineFromText = (
return;
}
run.events.push(updateEvent);
if (updateEvent.type === "stt-start") {
run = { ...run, stage: "stt", stt: updateEvent.data };
} else if (updateEvent.type === "stt-finish") {
@ -139,8 +137,12 @@ export const runPipelineFromText = (
} else if (updateEvent.type === "error") {
run = { ...run, stage: "error", error: updateEvent.data };
unsubProm.then((unsub) => unsub());
} else {
run = { ...run };
}
run.events = [...run.events, updateEvent];
callback(run);
},
{

View File

@ -2,6 +2,8 @@ import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import "../../../../../../components/ha-card";
import "../../../../../../components/ha-button";
import "../../../../../../components/ha-circular-progress";
import "../../../../../../components/ha-expansion-panel";
import "../../../../../../components/ha-textfield";
import {
PipelineRun,
@ -12,6 +14,58 @@ import { SubscribeMixin } from "../../../../../../mixins/subscribe-mixin";
import { haStyle } from "../../../../../../resources/styles";
import { HomeAssistant } from "../../../../../../types";
const RUN_DATA = {
pipeline: "Pipeline",
language: "Language",
};
const ERROR_DATA = {
code: "Code",
message: "Message",
};
const INTENT_DATA = {
engine: "Engine",
intent_input: "Input",
};
const renderProgress = (
pipelineRun: PipelineRun,
stage: PipelineRun["stage"]
) =>
pipelineRun.stage !== stage && stage in pipelineRun
? html``
: pipelineRun.stage === stage
? html`<ha-circular-progress size="tiny" active></ha-circular-progress>`
: "";
const renderData = (data: Record<string, any>, keys: Record<string, string>) =>
Object.entries(keys).map(
([key, label]) =>
html`
<div class="row">
<div>${label}</div>
<div>${data[key]}</div>
</div>
`
);
const dataMinusKeysRender = (
data: Record<string, any>,
keys: Record<string, string>
) => {
const result = {};
let render = false;
for (const key in data) {
if (key in keys) {
continue;
}
render = true;
result[key] = data[key];
}
return render ? html`<pre>${JSON.stringify(result, null, 2)}</pre>` : "";
};
@customElement("assist-pipeline-debug")
export class AssistPipelineDebug extends SubscribeMixin(LitElement) {
@property({ attribute: false }) public hass!: HomeAssistant;
@ -52,11 +106,44 @@ export class AssistPipelineDebug extends SubscribeMixin(LitElement) {
</ha-card>
${this._pipelineRun
? html`
<ha-card heading="Pipeline Run">
<ha-card>
<div class="card-content">
<pre>${JSON.stringify(this._pipelineRun, null, 2)}</pre>
<div class="row heading">
<div>Run</div>
<div>${this._pipelineRun.stage}</div>
</div>
${renderData(this._pipelineRun.run, RUN_DATA)}
${this._pipelineRun.error
? renderData(this._pipelineRun.error, ERROR_DATA)
: ""}
</div>
</ha-card>
<ha-card>
<div class="card-content">
<div class="row heading">
<span>Natural Language Processing</span>
${renderProgress(this._pipelineRun, "intent")}
</div>
${this._pipelineRun.intent
? html`
<div class="card-content">
${renderData(this._pipelineRun.intent, INTENT_DATA)}
${dataMinusKeysRender(
this._pipelineRun.intent,
INTENT_DATA
)}
</div>
`
: ""}
</div>
</ha-card>
<ha-card>
<ha-expansion-panel>
<span slot="header">Raw</span>
<pre>${JSON.stringify(this._pipelineRun, null, 2)}</pre>
</ha-expansion-panel>
</ha-card>
`
: ""}
</div>
@ -92,9 +179,19 @@ export class AssistPipelineDebug extends SubscribeMixin(LitElement) {
.run-pipeline-card ha-textfield {
display: block;
}
.row {
display: flex;
justify-content: space-between;
}
pre {
margin: 0;
}
ha-expansion-panel {
padding-left: 8px;
}
.heading {
font-weight: 500;
}
`,
];
}