1383 lines
48 KiB
TypeScript
1383 lines
48 KiB
TypeScript
|
import { configDefaults } from "./config-schema.js";
|
|||
|
|
import { resolveRenders } from "./render-hooks.js";
|
|||
|
|
import { readerExtensionSettings } from "./reader-extensions.js";
|
|||
|
|
import { usePrompt } from "./drafts.js";
|
|||
|
|
import {
|
|||
|
|
LocalInput,
|
|||
|
|
LocalSelect,
|
|||
|
|
LocalTextArea,
|
|||
|
|
Choice,
|
|||
|
|
LocalChoice,
|
|||
|
|
Toggle,
|
|||
|
|
useCommandControl,
|
|||
|
|
TextArea,
|
|||
|
|
TextInput,
|
|||
|
|
} from "@quixos/camino-react/ui";
|
|||
|
|
import { useEffect, useRef, useState } from "react";
|
|||
|
|
import {
|
|||
|
|
referenceOf,
|
|||
|
|
useCaminoMembers,
|
|||
|
|
useCrdtText,
|
|||
|
|
useInterface,
|
|||
|
|
useMutationFeedback,
|
|||
|
|
type ExactReference,
|
|||
|
|
} from "@quixos/camino-react";
|
|||
|
|
import { ColorPicker, FontPicker, NumberControl, Options, Switch } from "./controls.js";
|
|||
|
|
import { configDefinition } from "./annotator-config.js";
|
|||
|
|
import { authoringTitle, FeatureConversation } from "./tasks.js";
|
|||
|
|
import { ReaderPreview } from "./preview.js";
|
|||
|
|
import { interfaces } from "./gen/client.js";
|
|||
|
|
import {
|
|||
|
|
CustomConfig,
|
|||
|
|
fontFields,
|
|||
|
|
underlineFields,
|
|||
|
|
configFields,
|
|||
|
|
configValues,
|
|||
|
|
type ConfigValues,
|
|||
|
|
type ConfigValue,
|
|||
|
|
} from "./annotator-config.js";
|
|||
|
|
import {
|
|||
|
|
accepted,
|
|||
|
|
errorMessage,
|
|||
|
|
type Catalog,
|
|||
|
|
type FeatureNode,
|
|||
|
|
type ReaderNode,
|
|||
|
|
type Root,
|
|||
|
|
type NavigationValues,
|
|||
|
|
type DocNode,
|
|||
|
|
} from "./model.js";
|
|||
|
|
|
|||
|
|
export const appearances = [
|
|||
|
|
{ key: "overhead", title: "Text labels", description: "Words or notes above or below the text." },
|
|||
|
|
{ key: "highlight", title: "Highlight", description: "Color behind the text." },
|
|||
|
|
{ key: "underline", title: "Underline", description: "A line beneath the text." },
|
|||
|
|
{ key: "color", title: "Text color", description: "Change the color of the text." },
|
|||
|
|
{ key: "tooltip", title: "Tooltip", description: "A floating note on hover or click." },
|
|||
|
|
{ key: "sidebar", title: "Sidebar", description: "Definitions, translations, or longer notes." },
|
|||
|
|
{ key: "replace", title: "Replace text", description: "Display different text in place of a source span." },
|
|||
|
|
{ key: "bold", title: "Bold", description: "Emphasize selected words." },
|
|||
|
|
{ key: "italic", title: "Italic", description: "Set selected words in italics." },
|
|||
|
|
];
|
|||
|
|
export const revealOptions = (style: string) => [
|
|||
|
|
...(["tooltip", "sidebar"].includes(style) ? [] : [{ value: "always", label: "Permanent" }]),
|
|||
|
|
...(["overhead", "replace", "bold", "italic"].includes(style) ? [] : [{ value: "hover", label: "On hover" }]),
|
|||
|
|
{ value: "click", label: "On click" },
|
|||
|
|
];
|
|||
|
|
export function Preview({
|
|||
|
|
style,
|
|||
|
|
color = "#53796c",
|
|||
|
|
placement = "above",
|
|||
|
|
pattern = "solid",
|
|||
|
|
}: {
|
|||
|
|
style: string;
|
|||
|
|
color?: string;
|
|||
|
|
placement?: string;
|
|||
|
|
pattern?: string;
|
|||
|
|
}) {
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className={"lr-preview lr-preview-" + style + " lr-preview-" + placement + " lr-preview-line-" + pattern}
|
|||
|
|
style={{ "--annotation": color } as React.CSSProperties}
|
|||
|
|
aria-hidden="true"
|
|||
|
|
>
|
|||
|
|
<span className="lr-preview-source">
|
|||
|
|
Un{" "}
|
|||
|
|
<b>
|
|||
|
|
{style === "overhead" && <small className="lr-preview-label">coffee</small>}
|
|||
|
|
{style === "tooltip" && <small className="lr-preview-tip-label">coffee</small>}
|
|||
|
|
{style === "replace" ? "coffee" : "café"}
|
|||
|
|
</b>
|
|||
|
|
</span>
|
|||
|
|
{style === "sidebar" && (
|
|||
|
|
<small className="lr-preview-margin">
|
|||
|
|
café
|
|||
|
|
<br />
|
|||
|
|
coffee
|
|||
|
|
</small>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
export function Modal({
|
|||
|
|
title,
|
|||
|
|
children,
|
|||
|
|
close,
|
|||
|
|
wide = false,
|
|||
|
|
heading,
|
|||
|
|
}: {
|
|||
|
|
title: string;
|
|||
|
|
children: React.ReactNode;
|
|||
|
|
close: () => void;
|
|||
|
|
wide?: boolean;
|
|||
|
|
heading?: React.ReactNode;
|
|||
|
|
}) {
|
|||
|
|
const panel = useRef<HTMLDivElement>(null),
|
|||
|
|
previous = useRef<Element | null>(null);
|
|||
|
|
useEffect(() => {
|
|||
|
|
previous.current = (panel.current?.getRootNode() as Document | ShadowRoot)?.activeElement ?? document.activeElement;
|
|||
|
|
panel.current?.focus();
|
|||
|
|
return () => {
|
|||
|
|
if (previous.current instanceof HTMLElement && previous.current.isConnected) previous.current.focus();
|
|||
|
|
};
|
|||
|
|
}, []);
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className="lr-backdrop"
|
|||
|
|
onPointerDown={(event) => {
|
|||
|
|
if (event.target === event.currentTarget) close();
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
className={wide ? "lr-modal lr-settings-modal" : "lr-modal"}
|
|||
|
|
role="dialog"
|
|||
|
|
aria-modal="true"
|
|||
|
|
aria-label={title}
|
|||
|
|
tabIndex={-1}
|
|||
|
|
ref={panel}
|
|||
|
|
onKeyDown={(event) => {
|
|||
|
|
if ((event.target as Element).closest("dialog[open], [popover]:popover-open")) return;
|
|||
|
|
if (event.key === "Escape") close();
|
|||
|
|
if (event.key === "Tab") {
|
|||
|
|
const elements = Array.from(
|
|||
|
|
panel.current?.querySelectorAll<HTMLElement>(
|
|||
|
|
"button:not([disabled]),input:not([disabled]),textarea:not([disabled]),select:not([disabled]),a[href]",
|
|||
|
|
) ?? [],
|
|||
|
|
);
|
|||
|
|
const active =
|
|||
|
|
(panel.current?.getRootNode() as Document | ShadowRoot)?.activeElement ?? document.activeElement;
|
|||
|
|
const first = elements[0],
|
|||
|
|
last = elements[elements.length - 1];
|
|||
|
|
if (event.shiftKey && (active === first || active === panel.current)) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
last?.focus();
|
|||
|
|
} else if (!event.shiftKey && active === last) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
first?.focus();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<header>
|
|||
|
|
<div>{heading ?? <h2>{title}</h2>}</div>
|
|||
|
|
<button className="lr-icon" onClick={close} aria-label="Close dialog">
|
|||
|
|
×
|
|||
|
|
</button>
|
|||
|
|
</header>
|
|||
|
|
{children}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
export function FeatureToggle({
|
|||
|
|
feature,
|
|||
|
|
onIntent,
|
|||
|
|
}: {
|
|||
|
|
feature: FeatureNode;
|
|||
|
|
onIntent?: (enabled: boolean | null) => void;
|
|||
|
|
}) {
|
|||
|
|
const ops = useInterface(interfaces.ReadingFeature, referenceOf(feature));
|
|||
|
|
const [intent, setIntent] = useState<boolean | null>(null),
|
|||
|
|
[busy, setBusy] = useState(false),
|
|||
|
|
[error, setError] = useState("");
|
|||
|
|
const enabled = intent ?? feature.data.enabled;
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (intent !== null && intent === feature.data.enabled) {
|
|||
|
|
setIntent(null);
|
|||
|
|
onIntent?.(null);
|
|||
|
|
}
|
|||
|
|
}, [intent, feature.data.enabled, onIntent]);
|
|||
|
|
return (
|
|||
|
|
<div className="lr-feature-toggle">
|
|||
|
|
<Switch
|
|||
|
|
label={feature.data.name + " enabled"}
|
|||
|
|
value={enabled}
|
|||
|
|
disabled={busy || ops.status !== "ready"}
|
|||
|
|
change={(value) => {
|
|||
|
|
if (ops.status !== "ready") return;
|
|||
|
|
setIntent(value);
|
|||
|
|
onIntent?.(value);
|
|||
|
|
setBusy(true);
|
|||
|
|
setError("");
|
|||
|
|
const ticket = ops.value.setEnabled.call(value);
|
|||
|
|
void ticket.local.catch((e) => {
|
|||
|
|
setIntent(null);
|
|||
|
|
onIntent?.(null);
|
|||
|
|
setError(errorMessage(e));
|
|||
|
|
});
|
|||
|
|
void ticket.settled.then(
|
|||
|
|
(result) => {
|
|||
|
|
setBusy(false);
|
|||
|
|
if (result.status !== "accepted") {
|
|||
|
|
setIntent(null);
|
|||
|
|
onIntent?.(null);
|
|||
|
|
setError("Could not change this annotator");
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
(e) => {
|
|||
|
|
setBusy(false);
|
|||
|
|
setIntent(null);
|
|||
|
|
onIntent?.(null);
|
|||
|
|
setError(errorMessage(e));
|
|||
|
|
},
|
|||
|
|
);
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
<span>{enabled ? "Enabled" : "Disabled"}</span>
|
|||
|
|
{error && <small role="alert">{error}</small>}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** Reader reassignment checks the complete inverse relation, not a paginated query window. */
|
|||
|
|
function ReaderAssignmentInputs({
|
|||
|
|
reader,
|
|||
|
|
ready,
|
|||
|
|
}: {
|
|||
|
|
reader: ReaderNode;
|
|||
|
|
ready: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
|
|||
|
|
}) {
|
|||
|
|
const ref = referenceOf(reader);
|
|||
|
|
const inputs = useCaminoMembers({
|
|||
|
|
subject: ref,
|
|||
|
|
interface: "interface:reading:reader@1",
|
|||
|
|
members: ["reading:reader:documents", "reading:reader:features"],
|
|||
|
|
complete: { "reading:reader:documents": 512, "reading:reader:features": 512 },
|
|||
|
|
});
|
|||
|
|
useEffect(() => {
|
|||
|
|
const available = inputs.status === "ready";
|
|||
|
|
ready((current) => (current[ref.object] === available ? current : { ...current, [ref.object]: available }));
|
|||
|
|
}, [inputs.status, ref.object, ready]);
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function ReaderSettings({
|
|||
|
|
library,
|
|||
|
|
document,
|
|||
|
|
root,
|
|||
|
|
catalog,
|
|||
|
|
initialReader,
|
|||
|
|
navigation,
|
|||
|
|
navigationValues,
|
|||
|
|
previewDocument = null,
|
|||
|
|
previewCursor = 0,
|
|||
|
|
close,
|
|||
|
|
}: {
|
|||
|
|
library: ExactReference;
|
|||
|
|
document?: ExactReference;
|
|||
|
|
root: Root;
|
|||
|
|
catalog: Catalog;
|
|||
|
|
initialReader?: string;
|
|||
|
|
navigation: ExactReference;
|
|||
|
|
navigationValues: NavigationValues;
|
|||
|
|
previewDocument?: DocNode | null;
|
|||
|
|
previewCursor?: number;
|
|||
|
|
close: () => void;
|
|||
|
|
}) {
|
|||
|
|
const api = useInterface(interfaces.LanguageReader, library),
|
|||
|
|
nav = useInterface({ selectSettings: interfaces.ReadingNavigation.selectSettings }, navigation);
|
|||
|
|
const chosen =
|
|||
|
|
navigationValues.settingsReader?._camino.ref.object ??
|
|||
|
|
initialReader ??
|
|||
|
|
root.defaultReader?._camino.ref.object ??
|
|||
|
|
"";
|
|||
|
|
const settingsWrite = useRef<string | null>(null);
|
|||
|
|
const section =
|
|||
|
|
navigationValues.ui.section === "feature"
|
|||
|
|
? (navigationValues.settingsFeature?._camino.ref.object ?? "general")
|
|||
|
|
: navigationValues.ui.section;
|
|||
|
|
const setSection = (section: string) => {
|
|||
|
|
if (nav.status !== "ready") return;
|
|||
|
|
const feature = root.features.entries.find((e) => referenceOf(e.node).object === section)?.node;
|
|||
|
|
const ticket = nav.value.selectSettings.call(
|
|||
|
|
{
|
|||
|
|
reader: null,
|
|||
|
|
feature: feature ? referenceOf(feature) : null,
|
|||
|
|
section: feature ? "feature" : section,
|
|||
|
|
open: false,
|
|||
|
|
document: null,
|
|||
|
|
},
|
|||
|
|
{ requires: settingsWrite.current ? [settingsWrite.current] : [] },
|
|||
|
|
);
|
|||
|
|
settingsWrite.current = ticket.operationId;
|
|||
|
|
void accepted(ticket).catch((e) => {
|
|||
|
|
if (settingsWrite.current === ticket.operationId) settingsWrite.current = null;
|
|||
|
|
setError(errorMessage(e));
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
const selectReader = (ref: ExactReference) => {
|
|||
|
|
if (nav.status !== "ready") return;
|
|||
|
|
const ticket = nav.value.selectSettings.call(
|
|||
|
|
{
|
|||
|
|
reader: asReader(ref),
|
|||
|
|
feature: null,
|
|||
|
|
section: "general",
|
|||
|
|
open: false,
|
|||
|
|
document: document
|
|||
|
|
? { ...document, expectation: { kind: "interface", id: "interface:reading:document@1" } }
|
|||
|
|
: null,
|
|||
|
|
},
|
|||
|
|
{ requires: settingsWrite.current ? [settingsWrite.current] : [] },
|
|||
|
|
);
|
|||
|
|
settingsWrite.current = ticket.operationId;
|
|||
|
|
void accepted(ticket).catch((e) => {
|
|||
|
|
if (settingsWrite.current === ticket.operationId) settingsWrite.current = null;
|
|||
|
|
setError(errorMessage(e));
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
const selectFeature = (ref: ExactReference) => {
|
|||
|
|
if (nav.status !== "ready") return;
|
|||
|
|
const ticket = nav.value.selectSettings.call(
|
|||
|
|
{
|
|||
|
|
reader: null,
|
|||
|
|
feature: { ...ref, expectation: { kind: "interface", id: "interface:reading:feature@1" } },
|
|||
|
|
section: "feature",
|
|||
|
|
open: false,
|
|||
|
|
document: null,
|
|||
|
|
},
|
|||
|
|
{ requires: settingsWrite.current ? [settingsWrite.current] : [] },
|
|||
|
|
);
|
|||
|
|
settingsWrite.current = ticket.operationId;
|
|||
|
|
void accepted(ticket).catch((e) => {
|
|||
|
|
if (settingsWrite.current === ticket.operationId) settingsWrite.current = null;
|
|||
|
|
setError(errorMessage(e));
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
const setChosen = (object: string) => {
|
|||
|
|
const reader = readers.find((r) => referenceOf(r).object === object);
|
|||
|
|
if (reader) selectReader(referenceOf(reader));
|
|||
|
|
};
|
|||
|
|
const [error, setError] = useState(""),
|
|||
|
|
[creating, setCreating] = useState(false),
|
|||
|
|
[assignmentReady, setAssignmentReady] = useState<Record<string, boolean>>({});
|
|||
|
|
const readers = root.readers.entries.map((e) => e.node);
|
|||
|
|
const retainedReader = navigationValues.settingsReader;
|
|||
|
|
if (retainedReader && !readers.some((r) => referenceOf(r).object === referenceOf(retainedReader).object))
|
|||
|
|
readers.push(retainedReader);
|
|||
|
|
const reader = readers.find((r) => referenceOf(r).object === chosen);
|
|||
|
|
const members = new Set(reader?.features.entries.map((e) => referenceOf(e.node).object) ?? []),
|
|||
|
|
features = root.features.entries.map((e) => e.node).filter((f) => members.has(referenceOf(f).object));
|
|||
|
|
const selected = features.find((f) => referenceOf(f).object === section);
|
|||
|
|
const settingsExtension = readerExtensionSettings.find((extension) => section === `extension:${extension.id}`);
|
|||
|
|
const ExtensionSettings = settingsExtension?.Settings;
|
|||
|
|
const [previewReader, setPreviewReader] = useState<ReaderNode | null>(null),
|
|||
|
|
[previewFeature, setPreviewFeature] = useState<FeatureNode | null>(null);
|
|||
|
|
const shownReader =
|
|||
|
|
previewReader && reader && referenceOf(previewReader).object === referenceOf(reader).object
|
|||
|
|
? previewReader
|
|||
|
|
: reader;
|
|||
|
|
const shownFeatures = features.map((feature) =>
|
|||
|
|
previewFeature && referenceOf(previewFeature).object === referenceOf(feature).object ? previewFeature : feature,
|
|||
|
|
);
|
|||
|
|
async function add(copy: boolean) {
|
|||
|
|
if (api.status !== "ready" || !reader || creating) return;
|
|||
|
|
setCreating(true);
|
|||
|
|
try {
|
|||
|
|
const ref = await accepted(
|
|||
|
|
api.value.addReader.call({
|
|||
|
|
name: copy ? reader.data.name + " copy" : "New reader",
|
|||
|
|
copy: copy ? { ...referenceOf(reader), expectation: { kind: "atom", id: "atom:reading:reader" } } : null,
|
|||
|
|
}),
|
|||
|
|
);
|
|||
|
|
selectReader(ref);
|
|||
|
|
} catch (e) {
|
|||
|
|
setError(errorMessage(e));
|
|||
|
|
} finally {
|
|||
|
|
setCreating(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return (
|
|||
|
|
<Modal wide title="Reader settings" close={close}>
|
|||
|
|
<div className="lr-settings-top">
|
|||
|
|
<LocalChoice
|
|||
|
|
aria-label="Configure reader"
|
|||
|
|
className="lr-reader-choice"
|
|||
|
|
value={reader ? referenceOf(reader).object : ""}
|
|||
|
|
onValueChange={setChosen}
|
|||
|
|
disabled={nav.status !== "ready"}
|
|||
|
|
options={readers.map((r) => ({
|
|||
|
|
value: referenceOf(r).object,
|
|||
|
|
label: r.data.name,
|
|||
|
|
disabled: !assignmentReady[referenceOf(r).object],
|
|||
|
|
}))}
|
|||
|
|
/>
|
|||
|
|
<div className="lr-reader-actions">
|
|||
|
|
<button disabled={!reader || creating} onClick={() => void add(true)}>
|
|||
|
|
Clone reader
|
|||
|
|
</button>
|
|||
|
|
<details className="lr-new-reader">
|
|||
|
|
<summary>New reader</summary>
|
|||
|
|
<div>
|
|||
|
|
<button disabled={creating} onClick={() => void add(false)}>
|
|||
|
|
Blank reader
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
disabled={creating || api.status !== "ready"}
|
|||
|
|
onClick={(event) => {
|
|||
|
|
if (api.status !== "ready") return;
|
|||
|
|
event.currentTarget.closest("details")?.removeAttribute("open");
|
|||
|
|
setCreating(true);
|
|||
|
|
void accepted(api.value.addFrenchReader.call(null))
|
|||
|
|
.then(
|
|||
|
|
(ref) => {
|
|||
|
|
selectReader(ref);
|
|||
|
|
},
|
|||
|
|
(e) => setError(errorMessage(e)),
|
|||
|
|
)
|
|||
|
|
.finally(() => setCreating(false));
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
French · click glosses
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</details>
|
|||
|
|
</div>
|
|||
|
|
{readers.map((r) => (
|
|||
|
|
<ReaderAssignmentInputs key={referenceOf(r).object} reader={r} ready={setAssignmentReady} />
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
<div className="lr-settings-body lr-settings-with-preview">
|
|||
|
|
<nav className="lr-settings-nav" aria-label="Reader settings sections">
|
|||
|
|
<button
|
|||
|
|
disabled={nav.status !== "ready"}
|
|||
|
|
aria-current={section === "general" ? "page" : undefined}
|
|||
|
|
onClick={() => setSection("general")}
|
|||
|
|
>
|
|||
|
|
General
|
|||
|
|
</button>
|
|||
|
|
{readerExtensionSettings
|
|||
|
|
.filter((extension) => extension.Settings)
|
|||
|
|
.map((extension) => (
|
|||
|
|
<button
|
|||
|
|
key={extension.id}
|
|||
|
|
disabled={nav.status !== "ready"}
|
|||
|
|
aria-current={section === `extension:${extension.id}` ? "page" : undefined}
|
|||
|
|
onClick={() => setSection(`extension:${extension.id}`)}
|
|||
|
|
>
|
|||
|
|
{extension.title}
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
<div className="lr-nav-label">Annotators</div>
|
|||
|
|
{features.map((f) => (
|
|||
|
|
<button
|
|||
|
|
key={referenceOf(f).object}
|
|||
|
|
disabled={nav.status !== "ready"}
|
|||
|
|
aria-current={section === referenceOf(f).object ? "page" : undefined}
|
|||
|
|
onClick={() => setSection(referenceOf(f).object)}
|
|||
|
|
>
|
|||
|
|
<i className="lr-annotator-dot" />
|
|||
|
|
{f.data.name}
|
|||
|
|
{!f.data.enabled && <small>Off</small>}
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
{root.tasks.entries
|
|||
|
|
.map((e) => e.node)
|
|||
|
|
.filter(
|
|||
|
|
(t) =>
|
|||
|
|
t.data.kind === "customize" &&
|
|||
|
|
t.reader?._camino.ref.object === chosen &&
|
|||
|
|
!features.some((f) => f.authoring?._camino.ref.object === referenceOf(t).object) &&
|
|||
|
|
["queued", "running", "waiting_input"].includes(
|
|||
|
|
t.thread?.active?.progress.status ?? t.request?.progress.status ?? t.data.status,
|
|||
|
|
),
|
|||
|
|
)
|
|||
|
|
.map((t) => (
|
|||
|
|
<div className="lr-building-annotator" role="status" key={referenceOf(t).object}>
|
|||
|
|
<span className="lr-spinner" />
|
|||
|
|
<span>
|
|||
|
|
{authoringTitle(t)}
|
|||
|
|
<small>Building…</small>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
<button disabled={nav.status !== "ready"} onClick={() => setSection("new")}>
|
|||
|
|
＋ New annotator
|
|||
|
|
</button>
|
|||
|
|
</nav>
|
|||
|
|
<div className="lr-settings-content" key={`${reader ? referenceOf(reader).object : ""}:${section}`}>
|
|||
|
|
<nav className="lr-breadcrumb" aria-label="Settings path">
|
|||
|
|
<button onClick={() => setSection("general")}>{reader?.data.name ?? "Reader"}</button>
|
|||
|
|
<span>
|
|||
|
|
{" "}
|
|||
|
|
/{" "}
|
|||
|
|
{selected?.data.name ??
|
|||
|
|
(settingsExtension
|
|||
|
|
? settingsExtension.title
|
|||
|
|
: section === "new"
|
|||
|
|
? "New annotator"
|
|||
|
|
: section === "templates"
|
|||
|
|
? "New annotator"
|
|||
|
|
: "General")}
|
|||
|
|
</span>
|
|||
|
|
</nav>
|
|||
|
|
{reader &&
|
|||
|
|
(selected ? (
|
|||
|
|
<ExistingFeature
|
|||
|
|
key={referenceOf(selected).object}
|
|||
|
|
feature={selected}
|
|||
|
|
catalog={catalog}
|
|||
|
|
onPreviewChange={setPreviewFeature}
|
|||
|
|
/>
|
|||
|
|
) : ExtensionSettings ? (
|
|||
|
|
<ExtensionSettings
|
|||
|
|
library={library}
|
|||
|
|
reader={reader}
|
|||
|
|
defaultVocabulary={root.defaultVocabulary ? referenceOf(root.defaultVocabulary) : null}
|
|||
|
|
/>
|
|||
|
|
) : section === "new" || section === "templates" ? (
|
|||
|
|
<NewAnnotator
|
|||
|
|
key={referenceOf(reader).object}
|
|||
|
|
library={library}
|
|||
|
|
reader={reader}
|
|||
|
|
navigation={navigation}
|
|||
|
|
navigationValues={navigationValues}
|
|||
|
|
catalog={catalog}
|
|||
|
|
archivedTypes={root.archivedTypes}
|
|||
|
|
added={selectFeature}
|
|||
|
|
libraryOpen={section === "templates"}
|
|||
|
|
created={() => setSection("general")}
|
|||
|
|
/>
|
|||
|
|
) : (
|
|||
|
|
<GeneralReader key={referenceOf(reader).object} reader={reader} onPreviewChange={setPreviewReader} />
|
|||
|
|
))}
|
|||
|
|
{reader && selected && !selected.authoring && (
|
|||
|
|
<AskForChange library={library} reader={reader} feature={selected} navigation={navigation} />
|
|||
|
|
)}
|
|||
|
|
{reader && (
|
|||
|
|
<FeatureConversation
|
|||
|
|
library={library}
|
|||
|
|
reader={referenceOf(reader)}
|
|||
|
|
navigation={navigation}
|
|||
|
|
tasks={root.tasks.entries
|
|||
|
|
.map((e) => e.node)
|
|||
|
|
.filter(
|
|||
|
|
(t) =>
|
|||
|
|
t.data.kind === "customize" &&
|
|||
|
|
t.reader?._camino.ref.object === referenceOf(reader).object &&
|
|||
|
|
(selected
|
|||
|
|
? selected.authoring?._camino.ref.object === referenceOf(t).object
|
|||
|
|
: section === "general"),
|
|||
|
|
)}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
{shownReader && (
|
|||
|
|
<ReaderPreview
|
|||
|
|
defaultVocabulary={root.defaultVocabulary ? referenceOf(root.defaultVocabulary) : null}
|
|||
|
|
document={previewDocument}
|
|||
|
|
cursor={previewCursor}
|
|||
|
|
reader={shownReader}
|
|||
|
|
features={shownFeatures}
|
|||
|
|
selected={selected}
|
|||
|
|
catalog={catalog}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
{error && <p role="alert">{error}</p>}
|
|||
|
|
</Modal>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
const asReader = (ref: ExactReference) => ({
|
|||
|
|
...ref,
|
|||
|
|
expectation: { kind: "interface" as const, id: "interface:reading:reader@1" as const },
|
|||
|
|
});
|
|||
|
|
function GeneralReader({
|
|||
|
|
reader,
|
|||
|
|
onPreviewChange,
|
|||
|
|
}: {
|
|||
|
|
reader: ReaderNode;
|
|||
|
|
onPreviewChange?: (reader: ReaderNode | null) => void;
|
|||
|
|
}) {
|
|||
|
|
const api = useInterface(interfaces.ReadingReader, referenceOf(reader)),
|
|||
|
|
feedback = useMutationFeedback();
|
|||
|
|
const [intent, setIntent] = useState<ReaderNode["data"] | null>(null),
|
|||
|
|
[paletteIntent, setPaletteIntent] = useState<ReaderNode["palette"] | null>(null),
|
|||
|
|
[saveError, setSaveError] = useState("");
|
|||
|
|
const saved = useRef(reader.data),
|
|||
|
|
queued = useRef<Partial<ReaderNode["data"]>>({}),
|
|||
|
|
running = useRef(false);
|
|||
|
|
saved.current = reader.data.configRevision >= saved.current.configRevision ? reader.data : saved.current;
|
|||
|
|
const d = intent ?? reader.data,
|
|||
|
|
[name, setName] = useState(d.name),
|
|||
|
|
[width, setWidth] = useState(d.width);
|
|||
|
|
useEffect(() => {
|
|||
|
|
onPreviewChange?.({ ...reader, data: d, palette: paletteIntent ?? reader.palette });
|
|||
|
|
}, [reader, d, paletteIntent, onPreviewChange]);
|
|||
|
|
useEffect(() => () => onPreviewChange?.(null), [onPreviewChange]);
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (paletteIntent && paletteIntent.text === reader.palette.text && paletteIntent.accent === reader.palette.accent)
|
|||
|
|
setPaletteIntent(null);
|
|||
|
|
}, [reader.palette, paletteIntent]);
|
|||
|
|
useEffect(() => {
|
|||
|
|
setName(d.name);
|
|||
|
|
setWidth(d.width);
|
|||
|
|
}, [d.name, d.width]);
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (
|
|||
|
|
!running.current &&
|
|||
|
|
!Object.keys(queued.current).length &&
|
|||
|
|
intent &&
|
|||
|
|
reader.data.configRevision >= intent.configRevision
|
|||
|
|
)
|
|||
|
|
setIntent(null);
|
|||
|
|
}, [reader.data, intent]);
|
|||
|
|
function update(changes: Partial<typeof d>) {
|
|||
|
|
if (api.status !== "ready") return;
|
|||
|
|
setIntent((previous) => ({ ...saved.current, ...previous, ...changes }));
|
|||
|
|
Object.assign(queued.current, changes);
|
|||
|
|
if (running.current) return;
|
|||
|
|
running.current = true;
|
|||
|
|
setSaveError("");
|
|||
|
|
void (async () => {
|
|||
|
|
try {
|
|||
|
|
while (Object.keys(queued.current).length) {
|
|||
|
|
const next = queued.current;
|
|||
|
|
queued.current = {};
|
|||
|
|
const { configRevision, ...settings } = saved.current;
|
|||
|
|
const value = { ...settings, ...next };
|
|||
|
|
await accepted(api.value.configure.call({ ...value, expectedRevision: configRevision }));
|
|||
|
|
saved.current = { ...value, configRevision: configRevision + 1 };
|
|||
|
|
}
|
|||
|
|
setIntent(saved.current);
|
|||
|
|
} catch (error) {
|
|||
|
|
queued.current = {};
|
|||
|
|
setIntent(null);
|
|||
|
|
saved.current = reader.data;
|
|||
|
|
setSaveError(errorMessage(error));
|
|||
|
|
} finally {
|
|||
|
|
running.current = false;
|
|||
|
|
}
|
|||
|
|
})();
|
|||
|
|
}
|
|||
|
|
const widths = [640, 800, 1000, 1200, 1600, 0];
|
|||
|
|
return (
|
|||
|
|
<section className="lr-settings-section">
|
|||
|
|
<h3>General</h3>
|
|||
|
|
{saveError && <p role="alert">{saveError}</p>}
|
|||
|
|
<p className="lr-muted">Applies to all texts using this reader.</p>
|
|||
|
|
<label className="lr-field lr-name-field">
|
|||
|
|
Reader name
|
|||
|
|
<LocalInput
|
|||
|
|
aria-label="Reader name"
|
|||
|
|
value={name}
|
|||
|
|
onChange={(e) => setName(e.target.value)}
|
|||
|
|
onBlur={() => name !== d.name && update({ name })}
|
|||
|
|
maxLength={100}
|
|||
|
|
/>
|
|||
|
|
</label>
|
|||
|
|
<div className="lr-setting-row">
|
|||
|
|
<div>
|
|||
|
|
<strong>Text size</strong>
|
|||
|
|
</div>
|
|||
|
|
<NumberControl label="Reader font size" value={d.size} min={12} max={64} change={(size) => update({ size })} />
|
|||
|
|
</div>
|
|||
|
|
<div className="lr-setting-row">
|
|||
|
|
<div>
|
|||
|
|
<strong>Text width</strong>
|
|||
|
|
<small>Text stays centered beside your notes.</small>
|
|||
|
|
</div>
|
|||
|
|
<div className="lr-width-control">
|
|||
|
|
<LocalInput
|
|||
|
|
aria-label="Maximum reading width"
|
|||
|
|
type="range"
|
|||
|
|
min={0}
|
|||
|
|
max={5}
|
|||
|
|
step={1}
|
|||
|
|
value={Math.max(0, widths.indexOf(width))}
|
|||
|
|
onChange={(e) => setWidth(widths[Number(e.target.value)])}
|
|||
|
|
onPointerUp={() => width !== d.width && update({ width })}
|
|||
|
|
onKeyUp={() => width !== d.width && update({ width })}
|
|||
|
|
/>
|
|||
|
|
<small>{width ? width + " px" : "Full width"}</small>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="lr-setting-block">
|
|||
|
|
<h4>Reading fonts</h4>
|
|||
|
|
<FontPicker label="Reader font and fallbacks" value={d.font} change={(font) => update({ font })} />
|
|||
|
|
</div>
|
|||
|
|
<div className="lr-setting-block">
|
|||
|
|
<h4>Text color</h4>
|
|||
|
|
<ColorPicker
|
|||
|
|
label="Reader text color"
|
|||
|
|
value={reader.palette.text}
|
|||
|
|
change={(text) => {
|
|||
|
|
if (api.status !== "ready") return;
|
|||
|
|
const palette = { ...reader.palette, ...paletteIntent, text };
|
|||
|
|
setPaletteIntent(palette);
|
|||
|
|
feedback.track(api.value.palette.set(palette));
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="lr-setting-block">
|
|||
|
|
<h4>Accent color</h4>
|
|||
|
|
<ColorPicker
|
|||
|
|
label="Reader accent color"
|
|||
|
|
value={reader.palette.accent}
|
|||
|
|
change={(accent) => {
|
|||
|
|
if (api.status !== "ready") return;
|
|||
|
|
const palette = { ...reader.palette, ...paletteIntent, accent };
|
|||
|
|
setPaletteIntent(palette);
|
|||
|
|
feedback.track(api.value.palette.set(palette));
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="lr-setting-block">
|
|||
|
|
<h4>Background color</h4>
|
|||
|
|
<ColorPicker
|
|||
|
|
label="Reader background"
|
|||
|
|
background
|
|||
|
|
value={d.background}
|
|||
|
|
change={(background) => update({ background })}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
{feedback.message && <p role="alert">{feedback.message}</p>}
|
|||
|
|
</section>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function AnnotatorLibrary({
|
|||
|
|
library,
|
|||
|
|
reader,
|
|||
|
|
catalog,
|
|||
|
|
archivedTypes,
|
|||
|
|
added,
|
|||
|
|
initiallyOpen,
|
|||
|
|
}: {
|
|||
|
|
library: ExactReference;
|
|||
|
|
reader: ReaderNode;
|
|||
|
|
catalog: Catalog;
|
|||
|
|
archivedTypes: readonly string[];
|
|||
|
|
added: (ref: ExactReference) => void;
|
|||
|
|
initiallyOpen: boolean;
|
|||
|
|
}) {
|
|||
|
|
const api = useInterface(interfaces.LanguageReader, library);
|
|||
|
|
const [selected, setSelected] = useState<string | null>(null),
|
|||
|
|
[values, setValues] = useState<ConfigValues>({}),
|
|||
|
|
[title, setTitle] = useState(""),
|
|||
|
|
[archiveIntent, setArchiveIntent] = useState<Record<string, boolean>>({}),
|
|||
|
|
[busy, setBusy] = useState(false),
|
|||
|
|
[error, setError] = useState("");
|
|||
|
|
useEffect(() => {
|
|||
|
|
setArchiveIntent((previous) =>
|
|||
|
|
Object.fromEntries(
|
|||
|
|
Object.entries(previous).filter(([key, archived]) => archivedTypes.includes(key) !== archived),
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}, [archivedTypes]);
|
|||
|
|
const isArchived = (key: string) => archiveIntent[key] ?? archivedTypes.includes(key);
|
|||
|
|
const item = catalog.find((candidate) => candidate.key === selected);
|
|||
|
|
const definition = configDefinition(item?.config ?? "{}");
|
|||
|
|
const channels = resolveRenders(definition.renders, values);
|
|||
|
|
const style = channels[0]?.style ?? "color";
|
|||
|
|
const choose = (candidate: Catalog[number]) => {
|
|||
|
|
const fields = configDefinition(candidate.config).fields;
|
|||
|
|
setValues(configDefaults(fields));
|
|||
|
|
setTitle(candidate.label);
|
|||
|
|
setSelected(candidate.key);
|
|||
|
|
setError("");
|
|||
|
|
};
|
|||
|
|
async function archive(candidate: Catalog[number], archived: boolean) {
|
|||
|
|
if (api.status !== "ready") return;
|
|||
|
|
setArchiveIntent((previous) => ({ ...previous, [candidate.key]: archived }));
|
|||
|
|
setError("");
|
|||
|
|
try {
|
|||
|
|
await accepted(api.value.archiveType.call({ processor: candidate.key, archived }));
|
|||
|
|
if (selected === candidate.key && archived) setSelected(null);
|
|||
|
|
} catch (error) {
|
|||
|
|
setArchiveIntent((previous) => {
|
|||
|
|
const next = { ...previous };
|
|||
|
|
delete next[candidate.key];
|
|||
|
|
return next;
|
|||
|
|
});
|
|||
|
|
setError(errorMessage(error));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
async function add() {
|
|||
|
|
if (api.status !== "ready" || !item) return;
|
|||
|
|
setBusy(true);
|
|||
|
|
setError("");
|
|||
|
|
try {
|
|||
|
|
added(
|
|||
|
|
await accepted(
|
|||
|
|
api.value.addFeature.call({
|
|||
|
|
authoring: null,
|
|||
|
|
reader: { ...referenceOf(reader), expectation: { kind: "atom", id: "atom:reading:reader" } },
|
|||
|
|
name: title.trim() || item.label,
|
|||
|
|
processor: item.key,
|
|||
|
|
options: JSON.stringify(values),
|
|||
|
|
}),
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
} catch (error) {
|
|||
|
|
setError(errorMessage(error));
|
|||
|
|
} finally {
|
|||
|
|
setBusy(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return (
|
|||
|
|
<details className="lr-type-library" open={initiallyOpen || undefined}>
|
|||
|
|
<summary>
|
|||
|
|
<span className="lr-library-symbol" aria-hidden="true">
|
|||
|
|
▦
|
|||
|
|
</span>
|
|||
|
|
<span>
|
|||
|
|
<strong>Use an existing type</strong>
|
|||
|
|
<small>Add another annotator with its own settings.</small>
|
|||
|
|
</span>
|
|||
|
|
<span className="lr-library-chevron" aria-hidden="true">
|
|||
|
|
⌄
|
|||
|
|
</span>
|
|||
|
|
</summary>
|
|||
|
|
<div className="lr-type-library-content">
|
|||
|
|
{item ? (
|
|||
|
|
<div className="lr-type-instance">
|
|||
|
|
<button className="lr-type-back" onClick={() => setSelected(null)}>
|
|||
|
|
← All types
|
|||
|
|
</button>
|
|||
|
|
<header>
|
|||
|
|
<h4>{item.label}</h4>
|
|||
|
|
<p>{definition.description}</p>
|
|||
|
|
</header>
|
|||
|
|
<label className="lr-field">
|
|||
|
|
Name
|
|||
|
|
<LocalInput
|
|||
|
|
aria-label="Existing type annotator name"
|
|||
|
|
value={title}
|
|||
|
|
onChange={(event) => setTitle(event.target.value)}
|
|||
|
|
maxLength={100}
|
|||
|
|
/>
|
|||
|
|
</label>
|
|||
|
|
<CustomConfig
|
|||
|
|
processor={item.key}
|
|||
|
|
fields={definition.fields}
|
|||
|
|
values={values}
|
|||
|
|
disabled={busy}
|
|||
|
|
change={(key, value) => setValues((previous) => ({ ...previous, [key]: value }))}
|
|||
|
|
/>
|
|||
|
|
<footer>
|
|||
|
|
<span>
|
|||
|
|
{style === "overhead"
|
|||
|
|
? "Text labels"
|
|||
|
|
: (appearances.find((appearance) => appearance.key === style)?.title ?? style)}{" "}
|
|||
|
|
·{" "}
|
|||
|
|
{channels[0]?.reveal === "click" ? "On click" : channels[0]?.reveal === "hover" ? "On hover" : "Always"}
|
|||
|
|
</span>
|
|||
|
|
<button className="lr-primary" disabled={busy || api.status !== "ready"} onClick={() => void add()}>
|
|||
|
|
{busy ? "Adding…" : "Add to reader"}
|
|||
|
|
</button>
|
|||
|
|
</footer>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
<div className="lr-type-list">
|
|||
|
|
{catalog
|
|||
|
|
.filter((candidate) => !isArchived(candidate.key))
|
|||
|
|
.map((candidate) => {
|
|||
|
|
const config = configDefinition(candidate.config);
|
|||
|
|
return (
|
|||
|
|
<article className="lr-type-card" key={candidate.key}>
|
|||
|
|
<button className="lr-type-card-select" onClick={() => choose(candidate)}>
|
|||
|
|
<span className="lr-type-mark" aria-hidden="true">
|
|||
|
|
{config.renders?.[0]?.style === "overhead"
|
|||
|
|
? "Ā"
|
|||
|
|
: config.renders?.[0]?.style === "sidebar"
|
|||
|
|
? "☷"
|
|||
|
|
: config.renders?.[0]?.style === "tooltip"
|
|||
|
|
? "◌"
|
|||
|
|
: "Aa"}
|
|||
|
|
</span>
|
|||
|
|
<span>
|
|||
|
|
<strong>{candidate.label}</strong>
|
|||
|
|
<small>{config.description}</small>
|
|||
|
|
</span>
|
|||
|
|
<span className="lr-type-card-arrow" aria-hidden="true">
|
|||
|
|
›
|
|||
|
|
</span>
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
className="lr-type-archive"
|
|||
|
|
aria-label={"Archive type: " + candidate.label}
|
|||
|
|
title="Hide this type from the library; existing annotators stay active."
|
|||
|
|
disabled={api.status !== "ready"}
|
|||
|
|
onClick={() => void archive(candidate, true)}
|
|||
|
|
>
|
|||
|
|
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|||
|
|
<path d="M3 3h14v4H3zM4 7v10h12V7M8 10h4" />
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
</article>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
{!catalog.some((candidate) => !isArchived(candidate.key)) && (
|
|||
|
|
<p className="lr-muted">No types in the library. Restore an archived type or create one below.</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
{catalog.some((candidate) => isArchived(candidate.key)) && (
|
|||
|
|
<details className="lr-archived-types">
|
|||
|
|
<summary>Archived types ({catalog.filter((candidate) => isArchived(candidate.key)).length})</summary>
|
|||
|
|
<p>Existing annotators are unaffected.</p>
|
|||
|
|
{catalog
|
|||
|
|
.filter((candidate) => isArchived(candidate.key))
|
|||
|
|
.map((candidate) => (
|
|||
|
|
<div key={candidate.key}>
|
|||
|
|
<span>{candidate.label}</span>
|
|||
|
|
<button
|
|||
|
|
disabled={api.status !== "ready"}
|
|||
|
|
onClick={() => void archive(candidate, false)}
|
|||
|
|
aria-label={"Restore type: " + candidate.label}
|
|||
|
|
>
|
|||
|
|
Restore
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</details>
|
|||
|
|
)}
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
{error && <p role="alert">{error}</p>}
|
|||
|
|
</div>
|
|||
|
|
</details>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
function LabelPosition({
|
|||
|
|
value,
|
|||
|
|
change,
|
|||
|
|
disabled = false,
|
|||
|
|
}: {
|
|||
|
|
value: string;
|
|||
|
|
change: (value: string) => void;
|
|||
|
|
disabled?: boolean;
|
|||
|
|
}) {
|
|||
|
|
return (
|
|||
|
|
<div className="lr-field lr-label-position">
|
|||
|
|
<span>Label position</span>
|
|||
|
|
<Options
|
|||
|
|
label="Label position"
|
|||
|
|
value={value}
|
|||
|
|
disabled={disabled}
|
|||
|
|
options={[
|
|||
|
|
{
|
|||
|
|
value: "above",
|
|||
|
|
label: "Above",
|
|||
|
|
preview: (
|
|||
|
|
<span className="lr-position-preview lr-position-above">
|
|||
|
|
<small>note</small>
|
|||
|
|
<span>mot</span>
|
|||
|
|
</span>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: "below",
|
|||
|
|
label: "Below",
|
|||
|
|
preview: (
|
|||
|
|
<span className="lr-position-preview lr-position-below">
|
|||
|
|
<small>note</small>
|
|||
|
|
<span>mot</span>
|
|||
|
|
</span>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
]}
|
|||
|
|
change={change}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
function NewAnnotator({
|
|||
|
|
library,
|
|||
|
|
reader,
|
|||
|
|
navigation,
|
|||
|
|
navigationValues,
|
|||
|
|
catalog,
|
|||
|
|
archivedTypes,
|
|||
|
|
added,
|
|||
|
|
libraryOpen,
|
|||
|
|
created,
|
|||
|
|
}: {
|
|||
|
|
library: ExactReference;
|
|||
|
|
reader: ReaderNode;
|
|||
|
|
navigation: ExactReference;
|
|||
|
|
navigationValues: NavigationValues;
|
|||
|
|
catalog: Catalog;
|
|||
|
|
archivedTypes: readonly string[];
|
|||
|
|
added: (ref: ExactReference) => void;
|
|||
|
|
libraryOpen: boolean;
|
|||
|
|
created: () => void;
|
|||
|
|
}) {
|
|||
|
|
const api = useInterface(interfaces.LanguageReader, library),
|
|||
|
|
nav = useInterface(interfaces.ReadingNavigation, navigation);
|
|||
|
|
const title = usePrompt(navigation, "name");
|
|||
|
|
const instructions = useCrdtText({
|
|||
|
|
key: navigation.object + "/annotator-instructions",
|
|||
|
|
reference: navigation,
|
|||
|
|
operation: interfaces.ReadingNavigation.draft.edit,
|
|||
|
|
path: ["custom"],
|
|||
|
|
});
|
|||
|
|
const name = title.text,
|
|||
|
|
text = instructions.text;
|
|||
|
|
const { style, reveal, color } = navigationValues.builder,
|
|||
|
|
options = configValues(navigationValues.builder.options);
|
|||
|
|
const updateBuilder = (changes: Partial<typeof navigationValues.builder>) => {
|
|||
|
|
if (nav.status === "ready")
|
|||
|
|
void accepted(nav.value.builder.set({ ...navigationValues.builder, ...changes })).catch((e) =>
|
|||
|
|
setError(errorMessage(e)),
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
const setStyle = (style: string) =>
|
|||
|
|
updateBuilder({
|
|||
|
|
style,
|
|||
|
|
reveal: revealOptions(style).some((o) => o.value === reveal) ? reveal : revealOptions(style)[0].value,
|
|||
|
|
});
|
|||
|
|
const setReveal = (reveal: string) => updateBuilder({ reveal });
|
|||
|
|
const setColor = (color: string) => updateBuilder({ color });
|
|||
|
|
const [busy, setBusy] = useState(false),
|
|||
|
|
[error, setError] = useState("");
|
|||
|
|
async function build() {
|
|||
|
|
await Promise.all([title.flush(), instructions.flush()]);
|
|||
|
|
if (api.status !== "ready") return;
|
|||
|
|
setBusy(true);
|
|||
|
|
setError("");
|
|||
|
|
try {
|
|||
|
|
await accepted(
|
|||
|
|
api.value.customize.call({
|
|||
|
|
feature: null,
|
|||
|
|
reader: { ...referenceOf(reader), expectation: { kind: "atom", id: "atom:reading:reader" } },
|
|||
|
|
configuration: JSON.stringify({ name, style, reveal, color, ...options, instructions: text }),
|
|||
|
|
text: text.trim(),
|
|||
|
|
createdAt: new Date().toISOString(),
|
|||
|
|
}),
|
|||
|
|
);
|
|||
|
|
created();
|
|||
|
|
} catch (e) {
|
|||
|
|
setError(errorMessage(e));
|
|||
|
|
} finally {
|
|||
|
|
setBusy(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return (
|
|||
|
|
<section className="lr-new-annotator">
|
|||
|
|
<AnnotatorLibrary
|
|||
|
|
library={library}
|
|||
|
|
reader={reader}
|
|||
|
|
catalog={catalog}
|
|||
|
|
archivedTypes={archivedTypes}
|
|||
|
|
added={added}
|
|||
|
|
initiallyOpen={libraryOpen}
|
|||
|
|
/>
|
|||
|
|
<div className="lr-create-divider">
|
|||
|
|
<span>Create a new type</span>
|
|||
|
|
</div>
|
|||
|
|
<label className="lr-field lr-new-title">
|
|||
|
|
Title
|
|||
|
|
<TextInput aria-label="Annotator title" binding={title} placeholder="New Annotator" maxLength={100} />
|
|||
|
|
</label>
|
|||
|
|
<h3 className="lr-create-heading">How should it appear?</h3>
|
|||
|
|
<div className="lr-appearance-grid">
|
|||
|
|
{appearances
|
|||
|
|
.filter((a) => !["underline", "color", "bold", "italic"].includes(a.key))
|
|||
|
|
.map((a) => (
|
|||
|
|
<button
|
|||
|
|
key={a.key}
|
|||
|
|
className="lr-appearance"
|
|||
|
|
aria-pressed={
|
|||
|
|
a.key === "highlight"
|
|||
|
|
? ["highlight", "underline", "color", "bold", "italic"].includes(style)
|
|||
|
|
: style === a.key
|
|||
|
|
}
|
|||
|
|
onClick={() => setStyle(a.key)}
|
|||
|
|
>
|
|||
|
|
<Preview style={a.key} color={color} placement={String(options.placement ?? "above")} />
|
|||
|
|
<strong>{a.key === "highlight" ? "Formatting" : a.title}</strong>
|
|||
|
|
<small>{a.key === "highlight" ? "Highlight, underline, color, bold, or italic." : a.description}</small>
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
{["highlight", "underline", "color", "bold", "italic"].includes(style) && (
|
|||
|
|
<div className="lr-field lr-format-picker">
|
|||
|
|
Format
|
|||
|
|
<Options
|
|||
|
|
label="Formatting style"
|
|||
|
|
value={style}
|
|||
|
|
options={appearances
|
|||
|
|
.filter((a) => ["highlight", "underline", "color", "bold", "italic"].includes(a.key))
|
|||
|
|
.map((a) => ({
|
|||
|
|
value: a.key,
|
|||
|
|
label: a.title,
|
|||
|
|
preview: (
|
|||
|
|
<span
|
|||
|
|
className={"lr-format-sample lr-format-sample-" + a.key}
|
|||
|
|
style={{ "--annotation": color } as React.CSSProperties}
|
|||
|
|
>
|
|||
|
|
mot
|
|||
|
|
</span>
|
|||
|
|
),
|
|||
|
|
}))}
|
|||
|
|
change={setStyle}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
<div className="lr-creation-options">
|
|||
|
|
<label className="lr-field">
|
|||
|
|
Show it
|
|||
|
|
<Options
|
|||
|
|
label="When to show annotations"
|
|||
|
|
value={reveal}
|
|||
|
|
options={revealOptions(style).map((o) => ({
|
|||
|
|
...o,
|
|||
|
|
label: o.value === "always" ? "Always" : o.value === "hover" ? "When hovering" : "When clicked",
|
|||
|
|
}))}
|
|||
|
|
change={setReveal}
|
|||
|
|
/>
|
|||
|
|
</label>
|
|||
|
|
{["overhead", "highlight", "underline", "color"].includes(style) && (
|
|||
|
|
<label className="lr-field">
|
|||
|
|
Suggested color
|
|||
|
|
<ColorPicker label="Suggested annotation color" value={color} change={setColor} />
|
|||
|
|
</label>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
{style === "underline" && (
|
|||
|
|
<CustomConfig
|
|||
|
|
processor="underline-pattern"
|
|||
|
|
fields={underlineFields}
|
|||
|
|
values={options}
|
|||
|
|
disabled={busy}
|
|||
|
|
change={(key, value) => updateBuilder({ options: JSON.stringify({ ...options, [key]: value }) })}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
{style === "overhead" && (
|
|||
|
|
<div className="lr-label-options">
|
|||
|
|
<LabelPosition
|
|||
|
|
value={String(options.placement ?? "above")}
|
|||
|
|
disabled={busy}
|
|||
|
|
change={(placement) => updateBuilder({ options: JSON.stringify({ ...options, placement }) })}
|
|||
|
|
/>
|
|||
|
|
<details className="lr-label-font-options">
|
|||
|
|
<summary>Label font and size</summary>
|
|||
|
|
<CustomConfig
|
|||
|
|
processor="overhead-font"
|
|||
|
|
fields={fontFields}
|
|||
|
|
values={options}
|
|||
|
|
disabled={busy}
|
|||
|
|
change={(key, value) => updateBuilder({ options: JSON.stringify({ ...options, [key]: value }) })}
|
|||
|
|
/>
|
|||
|
|
</details>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
<label className="lr-field lr-build-instructions">
|
|||
|
|
What should it do?
|
|||
|
|
<TextArea
|
|||
|
|
binding={instructions}
|
|||
|
|
aria-label="Annotator instructions"
|
|||
|
|
rows={3}
|
|||
|
|
placeholder="Describe the words to annotate and the information to show."
|
|||
|
|
maxLength={12000}
|
|||
|
|
/>
|
|||
|
|
</label>
|
|||
|
|
<div className="lr-intents">
|
|||
|
|
{["Translate to English", "Define unfamiliar words", "Transliterate"].map((intent) => (
|
|||
|
|
<button key={intent} onClick={() => instructions.appendText((instructions.text ? "\n" : "") + intent)}>
|
|||
|
|
{intent}
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
<footer className="lr-create-footer">
|
|||
|
|
<small>Built and checked by the agent. A title is generated if left empty.</small>
|
|||
|
|
<button
|
|||
|
|
className="lr-primary"
|
|||
|
|
disabled={busy || api.status !== "ready" || !text.trim()}
|
|||
|
|
onClick={() => void build()}
|
|||
|
|
>
|
|||
|
|
{busy ? "Starting…" : "Create annotator"}
|
|||
|
|
</button>
|
|||
|
|
</footer>
|
|||
|
|
{error && <p role="alert">{error}</p>}
|
|||
|
|
</section>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
export function ExistingFeature({
|
|||
|
|
feature,
|
|||
|
|
catalog,
|
|||
|
|
onPreviewChange,
|
|||
|
|
}: {
|
|||
|
|
feature: FeatureNode;
|
|||
|
|
catalog: Catalog;
|
|||
|
|
onPreviewChange?: (feature: FeatureNode | null) => void;
|
|||
|
|
}) {
|
|||
|
|
const ops = useInterface(interfaces.ReadingFeature, referenceOf(feature)),
|
|||
|
|
feedback = useMutationFeedback();
|
|||
|
|
const d = feature.data;
|
|||
|
|
const [title, setTitle] = useState(d.name),
|
|||
|
|
[enabledIntent, setEnabledIntent] = useState<boolean | null>(null),
|
|||
|
|
[appearanceIntent, setAppearanceIntent] = useState<Partial<FeatureNode["data"]> | null>(null),
|
|||
|
|
[draft, setDraft] = useState<{ values: ConfigValues; revision: number } | null>(null),
|
|||
|
|
[saving, setSaving] = useState(false),
|
|||
|
|
[error, setError] = useState("");
|
|||
|
|
useEffect(() => setTitle(d.name), [d.name]);
|
|||
|
|
function update(changes: Partial<typeof d>) {
|
|||
|
|
if (ops.status !== "ready") return;
|
|||
|
|
const { processor: _, configRevision, ...settings } = d;
|
|||
|
|
setAppearanceIntent((previous) => ({ ...previous, ...changes }));
|
|||
|
|
feedback.track(ops.value.configure.call({ ...settings, ...changes, expectedRevision: configRevision }));
|
|||
|
|
}
|
|||
|
|
const definition = configDefinition(catalog.find((item) => item.key === d.processor)?.config ?? "{}"),
|
|||
|
|
persisted = configValues(feature.options),
|
|||
|
|
values = draft?.values ?? persisted;
|
|||
|
|
useEffect(() => {
|
|||
|
|
onPreviewChange?.({
|
|||
|
|
...feature,
|
|||
|
|
data: { ...d, ...appearanceIntent, ...(enabledIntent === null ? {} : { enabled: enabledIntent }) },
|
|||
|
|
options: JSON.stringify(values),
|
|||
|
|
});
|
|||
|
|
}, [feature, appearanceIntent, enabledIntent, draft, onPreviewChange]);
|
|||
|
|
useEffect(() => () => onPreviewChange?.(null), [onPreviewChange]);
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (
|
|||
|
|
appearanceIntent &&
|
|||
|
|
Object.entries(appearanceIntent).every(([key, value]) => d[key as keyof typeof d] === value)
|
|||
|
|
)
|
|||
|
|
setAppearanceIntent(null);
|
|||
|
|
}, [d, appearanceIntent]);
|
|||
|
|
const change = (key: string, value: ConfigValue) =>
|
|||
|
|
setDraft((previous) => ({
|
|||
|
|
revision: previous?.revision ?? d.configRevision,
|
|||
|
|
values: { ...persisted, ...previous?.values, [key]: value },
|
|||
|
|
}));
|
|||
|
|
async function save() {
|
|||
|
|
if (ops.status !== "ready" || !draft) return;
|
|||
|
|
setSaving(true);
|
|||
|
|
setError("");
|
|||
|
|
try {
|
|||
|
|
await accepted(
|
|||
|
|
ops.value.configureOptions.call({ expectedRevision: draft.revision, options: JSON.stringify(draft.values) }),
|
|||
|
|
);
|
|||
|
|
setDraft(null);
|
|||
|
|
} catch (e) {
|
|||
|
|
setError(errorMessage(e));
|
|||
|
|
} finally {
|
|||
|
|
setSaving(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return (
|
|||
|
|
<section className="lr-existing-row lr-settings-section">
|
|||
|
|
<header className="lr-annotator-head">
|
|||
|
|
<div>
|
|||
|
|
<h3>{d.name}</h3>
|
|||
|
|
<p className="lr-muted">{definition.description}</p>
|
|||
|
|
</div>
|
|||
|
|
<FeatureToggle feature={feature} onIntent={setEnabledIntent} />
|
|||
|
|
</header>
|
|||
|
|
<label className="lr-field lr-name-field">
|
|||
|
|
Title
|
|||
|
|
<LocalInput
|
|||
|
|
aria-label="Annotator title"
|
|||
|
|
value={title}
|
|||
|
|
maxLength={100}
|
|||
|
|
onChange={(e) => setTitle(e.target.value)}
|
|||
|
|
onBlur={() => title !== d.name && update({ name: title })}
|
|||
|
|
/>
|
|||
|
|
</label>
|
|||
|
|
<p className="lr-output-summary">
|
|||
|
|
{resolveRenders(definition.renders, values)
|
|||
|
|
.map(
|
|||
|
|
(render) =>
|
|||
|
|
`${appearances.find((a) => a.key === render.style)?.title ?? render.style} · ${render.reveal === "always" ? "Always" : render.reveal === "hover" ? "On hover" : "On click"}`,
|
|||
|
|
)
|
|||
|
|
.join("; ")}
|
|||
|
|
</p>
|
|||
|
|
<CustomConfig
|
|||
|
|
processor={d.processor}
|
|||
|
|
fields={definition.fields}
|
|||
|
|
values={values}
|
|||
|
|
disabled={saving}
|
|||
|
|
change={change}
|
|||
|
|
/>
|
|||
|
|
{draft && (
|
|||
|
|
<div className="lr-config-save">
|
|||
|
|
<button className="lr-primary" disabled={saving} onClick={() => void save()}>
|
|||
|
|
{saving ? "Saving…" : "Save annotation options"}
|
|||
|
|
</button>
|
|||
|
|
<button disabled={saving} onClick={() => setDraft(null)}>
|
|||
|
|
Cancel
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{(error || feedback.message) && <p role="alert">{error || feedback.message}</p>}
|
|||
|
|
<div className="lr-annotator-footer">
|
|||
|
|
<small>To change what this annotator does, ask its authoring agent.</small>
|
|||
|
|
<button
|
|||
|
|
className="lr-danger"
|
|||
|
|
disabled={feedback.pending > 0}
|
|||
|
|
onClick={() => ops.status === "ready" && feedback.track(ops.value.remove.call(null))}
|
|||
|
|
>
|
|||
|
|
Remove annotator
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
function AskForChange({
|
|||
|
|
library,
|
|||
|
|
reader,
|
|||
|
|
feature,
|
|||
|
|
navigation,
|
|||
|
|
}: {
|
|||
|
|
library: ExactReference;
|
|||
|
|
reader: ReaderNode;
|
|||
|
|
feature: FeatureNode;
|
|||
|
|
navigation: ExactReference;
|
|||
|
|
}) {
|
|||
|
|
const prompt = usePrompt(navigation, "change");
|
|||
|
|
const text = prompt.text;
|
|||
|
|
const api = useInterface(interfaces.LanguageReader, library),
|
|||
|
|
[busy, setBusy] = useState(false),
|
|||
|
|
[error, setError] = useState("");
|
|||
|
|
return (
|
|||
|
|
<details className="lr-ask-change">
|
|||
|
|
<summary>
|
|||
|
|
<span>Change this annotator</span>
|
|||
|
|
<small>Describe a change for its agent to build</small>
|
|||
|
|
</summary>
|
|||
|
|
<form
|
|||
|
|
onSubmit={(event) => {
|
|||
|
|
event.preventDefault();
|
|||
|
|
if (api.status !== "ready") return;
|
|||
|
|
setBusy(true);
|
|||
|
|
setError("");
|
|||
|
|
void accepted(
|
|||
|
|
api.value.customize.call({
|
|||
|
|
feature: { ...referenceOf(feature), expectation: { kind: "atom", id: "atom:reading:feature" } },
|
|||
|
|
reader: { ...referenceOf(reader), expectation: { kind: "atom", id: "atom:reading:reader" } },
|
|||
|
|
configuration: JSON.stringify({
|
|||
|
|
name: feature.data.name,
|
|||
|
|
instructions: text,
|
|||
|
|
feature: referenceOf(feature),
|
|||
|
|
}),
|
|||
|
|
text: `Modify the existing annotator ${feature.data.name} (${referenceOf(feature).object}), preserving its other settings. ${text}`,
|
|||
|
|
createdAt: new Date().toISOString(),
|
|||
|
|
}),
|
|||
|
|
).then(
|
|||
|
|
() => {
|
|||
|
|
prompt.clearSubmitted(text);
|
|||
|
|
setBusy(false);
|
|||
|
|
},
|
|||
|
|
(e) => {
|
|||
|
|
setError(errorMessage(e));
|
|||
|
|
setBusy(false);
|
|||
|
|
},
|
|||
|
|
);
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<TextArea
|
|||
|
|
binding={prompt}
|
|||
|
|
aria-label="Change this annotator"
|
|||
|
|
rows={3}
|
|||
|
|
placeholder="Describe what you want to change"
|
|||
|
|
/>
|
|||
|
|
<button disabled={busy || !text.trim()} className="lr-primary">
|
|||
|
|
{busy ? "Starting…" : "Send change"}
|
|||
|
|
</button>
|
|||
|
|
{error && <p role="alert">{error}</p>}
|
|||
|
|
</form>
|
|||
|
|
</details>
|
|||
|
|
);
|
|||
|
|
}
|