a68d73fa74
The two review tabs, runs and try-out, are one: /review. It is a column of three sections: try a classification and the classifier settings, each a folded bar (the settings' bar says what they are now), then the recent runs, always open. The settings had been pinned under the try-out form; they are now a section of their own. A new Disclosure primitive is the folding bar, a native details wearing the Panel's classes, so the folded and open sections read as the same surface. /review-runs and /review-tryout are gone, with no redirect.
65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
// <ClassificationEditor> — the fields of one review classification: a name, a
|
||
// description (the prompt the model answers), which answer passes, and how
|
||
// certain the model has to be for its answer to count.
|
||
import { Button } from "../../ui/button/Button.js";
|
||
import { SelectField } from "../../ui/select-field/SelectField.js";
|
||
import { TextAreaField } from "../../ui/text-area-field/TextAreaField.js";
|
||
import { TextField } from "../../ui/text-field/TextField.js";
|
||
import type { ClassificationDraft, Polarity } from "./TryOutTypes.js";
|
||
import "./ReviewTryOut.css";
|
||
|
||
const POLARITY_OPTIONS = [
|
||
{ value: "positive", label: "positive — the PR should match" },
|
||
{ value: "negative", label: "negative — the PR should not match" },
|
||
];
|
||
|
||
export function ClassificationEditor({
|
||
draft,
|
||
onChange,
|
||
onRemove,
|
||
}: {
|
||
draft: ClassificationDraft;
|
||
onChange: (next: ClassificationDraft) => void;
|
||
/** Absent when this is the only classification: one is the minimum. */
|
||
onRemove?: () => void;
|
||
}) {
|
||
const id = `tryout-${draft.key}`;
|
||
return (
|
||
<div class="ui-tryout-classification">
|
||
<TextField
|
||
id={`${id}-name`}
|
||
label="name"
|
||
value={draft.name}
|
||
placeholder="e.g. datetime"
|
||
onInput={(name) => onChange({ ...draft, name })}
|
||
/>
|
||
<TextAreaField
|
||
id={`${id}-description`}
|
||
label="description"
|
||
value={draft.description}
|
||
rows={4}
|
||
placeholder="what to look for in the PR, e.g. does it add a naive datetime?"
|
||
onInput={(description) => onChange({ ...draft, description })}
|
||
/>
|
||
<div class="ui-tryout-classification-row">
|
||
<SelectField
|
||
id={`${id}-polarity`}
|
||
label="polarity"
|
||
value={draft.polarity}
|
||
options={POLARITY_OPTIONS}
|
||
onChange={(polarity) =>
|
||
onChange({ ...draft, polarity: polarity as Polarity })
|
||
}
|
||
/>
|
||
<TextField
|
||
id={`${id}-threshold`}
|
||
label="threshold (0–100)"
|
||
value={draft.threshold}
|
||
pattern="[0-9]+"
|
||
onInput={(threshold) => onChange({ ...draft, threshold })}
|
||
/>
|
||
{onRemove ? <Button onClick={onRemove}>remove</Button> : null}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|