app/components/admin/kb-form-steps.tsx

Functions

Imports

It imports app/components/admin/kb-file-editor.tsx, app/components/admin/kb-form-fields.tsx, app/components/admin/kb-step-text.tsx, app/kb/form.mjs, app/kb/form.server.ts, app/kb/gap-labels.mjs. Imported by app/components/admin/kb-form.tsx.

Source

1import { useRef, useState } from "react";
2
3import { Button } from "capsomer/react/button";
4import { Panel } from "capsomer/react/panel";
5
6import { StepText } from "~/components/admin/kb-step-text";
7import type { FormBlock, FormBody, FormStep } from "~/kb/form.mjs";
8import { stepAnchor } from "~/kb/gap-labels.mjs";
9import type { Choice, KbForm } from "~/kb/form.server";
10import { plural } from "~/components/admin/kb-file-editor";
11import { DURATIONS, ReferencePicker, UNITS } from "~/components/admin/kb-form-fields";
12
13/* The form editor's method (kb-form.tsx): the step cards in their sections, and the body editor that orders them. */
14
15/**
16 * Scrolls to where a gap is filled in and puts the cursor there: the input itself, or in a step card the note that still
17 * says MISSING. Without script the link is a plain #anchor.
18 */
19export function goTo(e: React.MouseEvent | null, anchor: string) {
20  const target = document.getElementById(anchor);
21  if (!target) return;
22  e?.preventDefault();
23  target.scrollIntoView({ block: "center" });
24  const inputs = [...target.querySelectorAll<HTMLInputElement>("input")];
25  const field = target.matches("input, select, textarea") ? target : (inputs.find((i) => i.value.startsWith("MISSING:")) ?? target.querySelector<HTMLElement>("input, select, textarea"));
26  (field ?? target).focus({ preventScroll: true });
27  if (e) history.replaceState(null, "", `#${anchor}`);
28}
29
30/** The things a step card can insert, from the protocol's own lists and the lab registry. */
31export type Inserts = {
32  reagents: Choice[];
33  equipment: Choice[];
34  primers: Choice[];
35  strains: Choice[];
36  /** The names a chip can take: the protocol's reagents and equipment as it lists them. */
37  names: { reagent: string[]; equipment: string[] };
38  references: KbForm["references"];
39};
40
41function StepCard({
42  step,
43  index,
44  count,
45  number,
46  anchor,
47  flags,
48  inserts,
49  onChange,
50  onMove,
51  onRemove,
52  onInsert,
53  dragProps,
54}: {
55  step: FormStep;
56  index: number;
57  count: number;
58  number: number;
59  anchor: string;
60  flags: readonly string[];
61  inserts: Inserts;
62  onChange: (step: FormStep) => void;
63  onMove: (to: number) => void;
64  onRemove: () => void;
65  onInsert: (kind: "reagent" | "equipment" | "primer" | "strain", value: string, amount?: string) => string | null;
66  dragProps: React.HTMLAttributes<HTMLLIElement>;
67}) {
68  const caret = useRef<number | null>(null);
69  const [amount, setAmount] = useState({ value: "", unit: "µl" });
70  const [duration, setDuration] = useState({ value: "", unit: "minutes" });
71  const [temperature, setTemperature] = useState("");
72  const add = (words: string) => {
73    if (!words) return;
74    const at = Math.min(caret.current ?? step.text.length, step.text.length);
75    const before = step.text.slice(0, at);
76    const after = step.text.slice(at);
77    const pad = before && !before.endsWith(" ") ? " " : "";
78    onChange({ ...step, text: `${before}${pad}${words}${after && !after.startsWith(" ") ? " " : ""}${after}` });
79    caret.current = before.length + pad.length + words.length;
80  };
81  const pick = (kind: "reagent" | "equipment" | "primer" | "strain") => (e: React.ChangeEvent<HTMLSelectElement>) => {
82    const value = e.target.value;
83    e.target.value = "";
84    if (!value) return;
85    const words = onInsert(kind, value, kind === "reagent" && amount.value ? `${amount.value}%${amount.unit}` : undefined);
86    if (words) add(words);
87  };
88  const flagLines = step.lines.flatMap((line, i) => ("kind" in line ? [{ line, i }] : []));
89  const rawLines = step.lines.filter((line) => "raw" in line).map((line) => (line as { raw: string }).raw);
90  const label = `Step ${number}`;
91  return (
92    <li
93      id={anchor}
94      className="kb-step"
95      aria-label={label}
96      tabIndex={-1}
97      onKeyDown={(e) => {
98        if (!e.altKey || (e.key !== "ArrowUp" && e.key !== "ArrowDown")) return;
99        e.preventDefault();
100        onMove(e.key === "ArrowUp" ? index - 1 : index + 1);
101      }}
102      {...dragProps}
103    >
104      <div className="kb-step-head">
105        <span className="kb-drag" aria-hidden="true" title="Drag to reorder">
106          ⠿
107        </span>
108        <span className="kb-step-number">{label}</span>
109        <div className="app-actions" role="toolbar" aria-label={`${label}: move or remove`}>
110          {/* Native buttons, so the first step's Move up and the last step's Move down are simply off, with no reason to read. */}
111          <button type="button" className="cap-btn" data-variant="quiet" data-size="sm" aria-keyshortcuts="Alt+ArrowUp" disabled={index === 0} onClick={() => onMove(index - 1)} aria-label={`Move ${label.toLowerCase()} up`}>
112            Move up
113          </button>
114          <button type="button" className="cap-btn" data-variant="quiet" data-size="sm" aria-keyshortcuts="Alt+ArrowDown" disabled={index === count - 1} onClick={() => onMove(index + 1)} aria-label={`Move ${label.toLowerCase()} down`}>
115            Move down
116          </button>
117          <Button type="button" size="sm" variant="quiet" onClick={onRemove} aria-label={`Remove ${label.toLowerCase()}`}>
118            Remove
119          </Button>
120        </div>
121      </div>
122      <p className="cap-field-label" id={`${anchor}-label`}>
123        What to do
124      </p>
125      <StepText id={`${anchor}-text`} label={`${label}: what to do`} text={step.text} names={inserts.names} caret={caret} onChange={(next) => onChange({ ...step, text: next })} />
126
127      <details className="kb-insert">
128        <summary>Insert into this step: a reagent, equipment, a primer, a strain, a timer or a temperature</summary>
129      <div className="kb-inserts" role="group" aria-label={`${label}: insert`}>
130        <label className="kb-cell kb-cell-sm">
131          <span className="cap-field-label">Amount</span>
132          <input className="cap-input" inputMode="decimal" value={amount.value} onChange={(e) => setAmount({ ...amount, value: e.target.value })} />
133        </label>
134        <label className="kb-cell kb-cell-sm">
135          <span className="cap-field-label">Unit</span>
136          <select className="cap-input" value={amount.unit} onChange={(e) => setAmount({ ...amount, unit: e.target.value })}>
137            {UNITS.map((u) => (
138              <option key={u}>{u}</option>
139            ))}
140          </select>
141        </label>
142        <label className="kb-cell">
143          <span className="cap-field-label">Insert a reagent</span>
144          <select className="cap-input" defaultValue="" onChange={pick("reagent")}>
145            <option value="">Choose a reagent</option>
146            {inserts.reagents.map((o) => (
147              <option key={o.value} value={o.value}>
148                {o.label}
149              </option>
150            ))}
151          </select>
152        </label>
153        <label className="kb-cell">
154          <span className="cap-field-label">Insert equipment</span>
155          <select className="cap-input" defaultValue="" onChange={pick("equipment")}>
156            <option value="">Choose equipment</option>
157            {inserts.equipment.map((o) => (
158              <option key={o.value} value={o.value}>
159                {o.label}
160              </option>
161            ))}
162          </select>
163        </label>
164        <label className="kb-cell">
165          <span className="cap-field-label">Insert a primer</span>
166          <select className="cap-input" defaultValue="" onChange={pick("primer")}>
167            <option value="">Choose a primer</option>
168            {inserts.primers.map((o) => (
169              <option key={o.value} value={o.value}>
170                {o.label}
171              </option>
172            ))}
173          </select>
174        </label>
175        <label className="kb-cell">
176          <span className="cap-field-label">Insert a strain</span>
177          <select className="cap-input" defaultValue="" onChange={pick("strain")}>
178            <option value="">Choose a strain</option>
179            {inserts.strains.map((o) => (
180              <option key={o.value} value={o.value}>
181                {o.label}
182              </option>
183            ))}
184          </select>
185        </label>
186        <div className="kb-cell kb-cell-pair">
187          <label className="kb-cell kb-cell-sm">
188            <span className="cap-field-label">Duration</span>
189            <input className="cap-input" inputMode="decimal" value={duration.value} onChange={(e) => setDuration({ ...duration, value: e.target.value })} />
190          </label>
191          <select className="cap-input" aria-label="Duration unit" value={duration.unit} onChange={(e) => setDuration({ ...duration, unit: e.target.value })}>
192            {DURATIONS.map((u) => (
193              <option key={u}>{u}</option>
194            ))}
195          </select>
196          <Button type="button" size="sm" disabledReason={duration.value ? undefined : "Type a duration first."} onClick={() => add(`~{${duration.value}%${duration.unit}}`)}>
197            Insert timer
198          </Button>
199        </div>
200        <div className="kb-cell kb-cell-pair">
201          <label className="kb-cell kb-cell-sm">
202            <span className="cap-field-label">Temperature, °C</span>
203            <input className="cap-input" inputMode="decimal" value={temperature} onChange={(e) => setTemperature(e.target.value)} />
204          </label>
205          <Button type="button" size="sm" disabledReason={temperature ? undefined : "Type a temperature first."} onClick={() => add(`${temperature} °C`)}>
206            Insert temperature
207          </Button>
208        </div>
209      </div>
210      </details>
211
212      {flagLines.map(({ line, i }) => {
213        const flag = line as { kind: string; text: string; indent: string };
214        return (
215          <div className="kb-flag" key={i} data-flag={flag.kind}>
216            <select
217              className="cap-input"
218              aria-label={`${label}: note kind`}
219              value={flag.kind}
220              onChange={(e) => {
221                // A note that names something starts empty, to be picked; words carry over between the other kinds.
222                const named = (k: string) => k === "TROUBLESHOOTING" || k === "CALC";
223                const text = named(e.target.value) || named(flag.kind) ? "" : flag.text;
224                onChange({ ...step, lines: step.lines.map((l, j) => (j === i ? { ...flag, kind: e.target.value, text } : l)) });
225              }}
226            >
227              {flags.map((f) => (
228                <option key={f} value={f}>
229                  {f.charAt(0) + f.slice(1).toLowerCase()}
230                </option>
231              ))}
232            </select>
233            {flag.kind === "TROUBLESHOOTING" || flag.kind === "CALC" ? (
234              <ReferencePicker
235                label={`${label}: ${flag.kind === "CALC" ? "calculator" : "troubleshooting row"}`}
236                choices={flag.kind === "CALC" ? inserts.references.calculators : inserts.references.troubleshooting}
237                empty={flag.kind === "CALC" ? "Choose a calculator" : "Choose a row of the troubleshooting table"}
238                text={flag.text}
239                onChange={(next) => onChange({ ...step, lines: step.lines.map((l, j) => (j === i ? { ...flag, text: next } : l)) })}
240              />
241            ) : (
242              <input
243                className="cap-input"
244                aria-label={`${label}: ${flag.kind.toLowerCase()} note`}
245                value={flag.text}
246                onChange={(e) => onChange({ ...step, lines: step.lines.map((l, j) => (j === i ? { ...flag, text: e.target.value } : l)) })}
247              />
248            )}
249            <Button type="button" size="sm" variant="quiet" onClick={() => onChange({ ...step, lines: step.lines.filter((_, j) => j !== i) })} aria-label={`Remove this ${flag.kind.toLowerCase()} note`}>
250              Remove
251            </Button>
252          </div>
253        );
254      })}
255      <Button type="button" size="sm" onClick={() => onChange({ ...step, lines: [...step.lines, { kind: "CRITICAL", text: "", indent: "   " }] })}>
256        Add a note
257      </Button>
258      {rawLines.length > 0 ? (
259        <details className="kb-raw-lines">
260          <summary>{plural(rawLines.length, "more line", "more lines")} under this step, as written</summary>
261          <pre>
262            <code>{rawLines.join("\n")}</code>
263          </pre>
264          <p className="cap-field-help">Commands, output and wrapped notes are kept as written; edit them under Advanced.</p>
265        </details>
266      ) : null}
267    </li>
268  );
269}
270
271function StepList({
272  block,
273  sectionTitle,
274  flags,
275  inserts,
276  onChange,
277  onInsert,
278  announce,
279}: {
280  block: Extract<FormBlock, { type: "steps" }>;
281  sectionTitle: string;
282  flags: readonly string[];
283  inserts: Inserts;
284  onChange: (block: Extract<FormBlock, { type: "steps" }>) => void;
285  onInsert: (kind: "reagent" | "equipment" | "primer" | "strain", value: string, amount?: string) => string | null;
286  announce: (text: string) => void;
287}) {
288  const list = useRef<HTMLOListElement>(null);
289  const [dragging, setDragging] = useState<number | null>(null);
290  const move = (from: number, to: number) => {
291    if (to < 0 || to >= block.steps.length || from === to) return;
292    const steps = [...block.steps];
293    const [moved] = steps.splice(from, 1);
294    if (!moved) return;
295    steps.splice(to, 0, moved);
296    onChange({ ...block, steps });
297    announce(`Moved to step ${block.start + to} of ${block.start + steps.length - 1}, in ${sectionTitle}.`);
298    // Focus stays on the step that moved, so it can be moved again and its new place is read out.
299    requestAnimationFrame(() => list.current?.querySelectorAll<HTMLLIElement>(":scope > li")[to]?.focus());
300  };
301  return (
302    <ol className="kb-steps" ref={list} start={block.start}>
303      {block.steps.map((step, i) => (
304        <StepCard
305          key={i}
306          step={step}
307          index={i}
308          count={block.steps.length}
309          number={block.start + i}
310          anchor={stepAnchor(sectionTitle, block.start + i)}
311          flags={flags}
312          inserts={inserts}
313          onChange={(next) => onChange({ ...block, steps: block.steps.map((s, j) => (j === i ? next : s)) })}
314          onMove={(to) => move(i, to)}
315          onRemove={() => onChange({ ...block, steps: block.steps.filter((_, j) => j !== i) })}
316          onInsert={onInsert}
317          dragProps={{
318            draggable: true,
319            onDragStart: (e) => {
320              setDragging(i);
321              e.dataTransfer.effectAllowed = "move";
322            },
323            onDragOver: (e) => {
324              if (dragging !== null) e.preventDefault();
325            },
326            onDrop: (e) => {
327              e.preventDefault();
328              if (dragging !== null) move(dragging, i);
329              setDragging(null);
330            },
331            onDragEnd: () => setDragging(null),
332            className: `kb-step${dragging === i ? " kb-step-dragging" : ""}`,
333          }}
334        />
335      ))}
336    </ol>
337  );
338}
339
340export function BodyEditor({
341  body,
342  flags,
343  inserts,
344  onChange,
345  onInsert,
346}: {
347  body: FormBody;
348  flags: readonly string[];
349  inserts: Inserts;
350  onChange: (body: FormBody) => void;
351  onInsert: (kind: "reagent" | "equipment" | "primer" | "strain", value: string, amount?: string) => string | null;
352}) {
353  const [said, setSaid] = useState("");
354  const setSection = (i: number, next: FormBody["sections"][number]) => onChange({ ...body, sections: body.sections.map((s, j) => (j === i ? next : s)) });
355  return (
356    <>
357      <div aria-live="polite" className="cap-sr-only">
358        {said}
359      </div>
360      <Panel title="Introduction">
361        <div className="cap-field">
362          <label className="cap-field-label" htmlFor="kb-intro">
363            What this is, where it came from, who it is for
364          </label>
365          <textarea id="kb-intro" className="cap-input" rows={6} value={body.intro} onChange={(e) => onChange({ ...body, intro: e.target.value })} />
366        </div>
367      </Panel>
368      {body.sections.map((section, i) => (
369        <Panel key={i} title={section.heading || "New section"}>
370          <div className="cap-field">
371            <label className="cap-field-label" htmlFor={`kb-section-${i}`}>
372              Section heading
373            </label>
374            <input id={`kb-section-${i}`} className="cap-input" value={section.heading} onChange={(e) => setSection(i, { ...section, heading: e.target.value })} />
375          </div>
376          {section.blocks.map((block, b) =>
377            block.type === "prose" ? (
378              // Blank lines between blocks are kept in the file and not shown as an empty box.
379              block.text.trim() === "" ? null : (
380              <div className="cap-field" key={b}>
381                <label className="cap-field-label" htmlFor={`kb-prose-${i}-${b}`}>
382                  Text
383                </label>
384                <textarea
385                  id={`kb-prose-${i}-${b}`}
386                  className="cap-input"
387                  rows={Math.min(10, Math.max(2, block.text.split("\n").length))}
388                  value={block.text}
389                  onChange={(e) => setSection(i, { ...section, blocks: section.blocks.map((x, k) => (k === b ? { type: "prose", text: e.target.value } : x)) })}
390                />
391              </div>
392              )
393            ) : (
394              <StepList
395                key={b}
396                block={block}
397                sectionTitle={section.heading}
398                flags={flags}
399                inserts={inserts}
400                onInsert={onInsert}
401                announce={setSaid}
402                onChange={(next) => setSection(i, { ...section, blocks: section.blocks.map((x, k) => (k === b ? next : x)) })}
403              />
404            ),
405          )}
406          <Button
407            type="button"
408            size="sm"
409            onClick={() => {
410              const last = [...section.blocks].reverse().find((x) => x.type === "steps") as Extract<FormBlock, { type: "steps" }> | undefined;
411              const step: FormStep = { number: 0, text: "", lines: [], blanksBefore: 0 };
412              if (last) setSection(i, { ...section, blocks: section.blocks.map((x) => (x === last ? { ...last, steps: [...last.steps, step] } : x)) });
413              else setSection(i, { ...section, blocks: [...section.blocks, { type: "prose", text: "" }, { type: "steps", start: 1, steps: [step] }] });
414            }}
415          >
416            Add a step to {section.heading || "this section"}
417          </Button>
418        </Panel>
419      ))}
420      <Button type="button" onClick={() => onChange({ ...body, sections: [...body.sections, { heading: "New section", blocks: [{ type: "prose", text: "" }] }] })}>
421        Add a section
422      </Button>
423    </>
424  );
425}