File size: 3,032 Bytes
0bd62e5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
<script lang="ts">
type HighlightedTextType = {
token: string;
class_or_confidence: string | number | null;
};
export let value: HighlightedTextType[];
export let category: string | number | null;
export let active: string;
export let labelToEdit: number;
export let indexOfLabel: number;
export let text: string;
export let handleValueChange: () => void;
export let isScoresMode = false;
export let _color_map: Record<string, { primary: string; secondary: string }>;
let _input_value = category;
function handleInput(e: Event): void {
let target = e.target as HTMLInputElement;
if (target) {
_input_value = target.value;
}
}
function updateLabelValue(
e: Event,
elementIndex: number,
text: string
): void {
let target = e.target as HTMLInputElement;
value = [
...value.slice(0, elementIndex),
{
token: text,
class_or_confidence:
target.value === ""
? null
: isScoresMode
? Number(target.value)
: target.value
},
...value.slice(elementIndex + 1)
];
handleValueChange();
}
function clearPlaceHolderOnFocus(e: FocusEvent): void {
let target = e.target as HTMLInputElement;
if (target && target.placeholder) target.placeholder = "";
}
</script>
<!-- svelte-ignore a11y-autofocus -->
<!-- autofocus should not be disorienting for a screen reader users
as input is only rendered once a new label is created -->
{#if !isScoresMode}
<input
class="label-input"
autofocus
id={`label-input-${indexOfLabel}`}
type="text"
placeholder="label"
value={category}
style:background-color={category === null || (active && active !== category)
? ""
: _color_map[category].primary}
style:width={_input_value
? _input_value.toString()?.length + 4 + "ch"
: "8ch"}
on:input={handleInput}
on:blur={(e) => updateLabelValue(e, indexOfLabel, text)}
on:keydown={(e) => {
if (e.key === "Enter") {
updateLabelValue(e, indexOfLabel, text);
labelToEdit = -1;
}
}}
on:focus={clearPlaceHolderOnFocus}
/>
{:else}
<input
class="label-input"
autofocus
type="number"
step="0.1"
style={"background-color: rgba(" +
(typeof category === "number" && category < 0
? "128, 90, 213," + -category
: "239, 68, 60," + category) +
")"}
value={category}
style:width="7ch"
on:input={handleInput}
on:blur={(e) => updateLabelValue(e, indexOfLabel, text)}
on:keydown={(e) => {
if (e.key === "Enter") {
updateLabelValue(e, indexOfLabel, text);
labelToEdit = -1;
}
}}
/>
{/if}
<style>
.label-input {
transition: 150ms;
margin-top: 1px;
margin-right: calc(var(--size-1));
border-radius: var(--radius-xs);
padding: 1px 5px;
color: black;
font-weight: var(--weight-bold);
font-size: var(--text-sm);
text-transform: uppercase;
line-height: 1;
color: white;
}
.label-input::placeholder {
color: rgba(1, 1, 1, 0.5);
}
</style>
|