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

Functions

Imports

It imports app/kb/form.server.ts, app/kb/gap-labels.mjs. Imported by app/components/admin/kb-form-steps.tsx, app/components/admin/kb-form.tsx.

Source

1import type { ReactNode } from "react";
2
3import { Button } from "capsomer/react/button";
4
5import { cellAnchor, fieldAnchor } from "~/kb/gap-labels.mjs";
6import type { Choice, FormField, KbForm } from "~/kb/form.server";
7
8/* The form editor's field inputs (kb-form.tsx): one input per field, the materials and equipment lists, and the reference picker. */
9
10export type Values = Record<string, unknown>;
11export type Material = Record<string, unknown> & { name?: string; reagent?: string };
12export type EquipmentEntry = string | (Record<string, unknown> & { name?: string; equipment?: string });
13
14const isGap = (value: unknown): value is string => typeof value === "string" && value.startsWith("MISSING:");
15const reason = (value: unknown) => (isGap(value) ? value.replace(/^MISSING:\s*/, "") : null);
16const shown = (value: unknown) => (value === undefined || value === null || isGap(value) ? "" : String(value));
17export const UNITS = ["µl", "ml", "l", "mg", "g", "µg", "ng", "mM", "M", "%", "U", "tubes", "plates"];
18export const DURATIONS = ["seconds", "minutes", "hours", "days"];
19
20/** An input's id from a field key, so a Needs info link lands on its input. */
21const fieldId = fieldAnchor;
22
23/**
24 * A value set from an input: what was typed, or, for an input left empty, the gap the field held, so a field nobody has
25 * an answer for yet keeps its reason rather than becoming blank.
26 */
27function fromInput(typed: string, original: unknown): unknown {
28  if (typed !== "") return typed;
29  return isGap(original) ? original : undefined;
30}
31
32function Field({ field, children, wide }: { field: FormField; children: ReactNode; wide?: boolean }) {
33  const gap = field.gap;
34  return (
35    <div className={`cap-field kb-field${wide ? " kb-field-wide" : ""}${gap ? " kb-field-gap" : ""}`}>
36      <label className="cap-field-label" htmlFor={fieldId(field.key)}>
37        {field.label}
38      </label>
39      {children}
40      {gap ? <p className="cap-field-help kb-gap-reason">Needs info: {gap}</p> : field.help ? <p className="cap-field-help">{field.help}</p> : null}
41    </div>
42  );
43}
44
45function Checks({ id, options, picked, onChange, label }: { id: string; options: Choice[]; picked: string[]; onChange: (next: string[]) => void; label: string }) {
46  return (
47    <fieldset className="kb-checks" id={id}>
48      <legend className="cap-sr-only">{label}</legend>
49      {options.map((o) => (
50        <label key={o.value} className="kb-check">
51          <input
52            type="checkbox"
53            checked={picked.includes(o.value)}
54            onChange={(e) => onChange(e.target.checked ? [...picked, o.value] : picked.filter((v) => v !== o.value))}
55          />{" "}
56          {o.label}
57        </label>
58      ))}
59    </fieldset>
60  );
61}
62
63function MaterialsEditor({ id, rows, reagents, solutions, onChange }: { id: string; rows: Material[]; reagents: Choice[]; solutions: Choice[]; onChange: (rows: Material[]) => void }) {
64  const set = (i: number, key: string, typed: string) =>
65    onChange(rows.map((row, j) => (j === i ? { ...row, [key]: fromInput(typed, row[key]) } : row)));
66  const cell = (row: Material, i: number, key: string, label: string) => (
67    <label className="kb-cell">
68      <span className="cap-field-label">{label}</span>
69      <input
70        id={row.name ? cellAnchor("materials", String(row.name), key) : undefined}
71        className="cap-input"
72        value={shown(row[key])}
73        placeholder={reason(row[key]) ?? ""}
74        aria-invalid={isGap(row[key]) || undefined}
75        onChange={(e) => set(i, key, e.target.value)}
76      />
77    </label>
78  );
79  return (
80    <div className="kb-rows" id={id}>
81      {rows.map((row, i) => (
82        <div className="kb-row" key={i}>
83          {cell(row, i, "name", "Name")}
84          <label className="kb-cell">
85            <span className="cap-field-label">Registry reagent</span>
86            <select className="cap-input" value={String(row.reagent ?? "")} onChange={(e) => set(i, "reagent", e.target.value)}>
87              <option value="">None</option>
88              {reagents.map((r) => (
89                <option key={r.value} value={r.value}>
90                  {r.label}
91                </option>
92              ))}
93            </select>
94          </label>
95          {cell(row, i, "amount", "Amount")}
96          {cell(row, i, "final", "Final")}
97          {solutions.length > 0 || row.solution ? (
98            <label className="kb-cell">
99              <span className="cap-field-label">Made as</span>
100              <select className="cap-input" value={String(row.solution ?? "")} onChange={(e) => set(i, "solution", e.target.value)}>
101                <option value="">Not a solution made in the lab</option>
102                {solutions.map((o) => (
103                  <option key={o.value} value={o.value}>
104                    {o.label}
105                  </option>
106                ))}
107                {row.solution && !solutions.some((o) => o.value === row.solution) ? <option value={String(row.solution)}>A solution not in the solutions list</option> : null}
108              </select>
109            </label>
110          ) : null}
111          <Button type="button" variant="quiet" size="sm" onClick={() => onChange(rows.filter((_, j) => j !== i))} aria-label={`Remove ${shown(row.name) || "this row"}`}>
112            Remove
113          </Button>
114        </div>
115      ))}
116      <Button type="button" size="sm" onClick={() => onChange([...rows, { name: "" }])}>
117        Add a reagent
118      </Button>
119    </div>
120  );
121}
122
123function EquipmentEditor({ id, rows, items, onChange }: { id: string; rows: EquipmentEntry[]; items: Choice[]; onChange: (rows: EquipmentEntry[]) => void }) {
124  const asObject = (row: EquipmentEntry) => (typeof row === "string" ? { name: row } : row);
125  const set = (i: number, key: string, typed: string) =>
126    onChange(rows.map((row, j) => (j === i ? { ...asObject(row), [key]: typed === "" ? undefined : typed } : row)));
127  return (
128    <div className="kb-rows" id={id}>
129      {rows.map((row, i) => {
130        const r = asObject(row);
131        return (
132          <div className="kb-row" key={i}>
133            <label className="kb-cell">
134              <span className="cap-field-label">Name</span>
135              <input className="cap-input" value={shown(r.name)} onChange={(e) => set(i, "name", e.target.value)} />
136            </label>
137            <label className="kb-cell">
138              <span className="cap-field-label">Registry item</span>
139              <select className="cap-input" value={String(r.equipment ?? "")} onChange={(e) => set(i, "equipment", e.target.value)}>
140                <option value="">None</option>
141                {items.map((o) => (
142                  <option key={o.value} value={o.value}>
143                    {o.label}
144                  </option>
145                ))}
146              </select>
147            </label>
148            <Button type="button" variant="quiet" size="sm" onClick={() => onChange(rows.filter((_, j) => j !== i))} aria-label={`Remove ${shown(r.name) || "this row"}`}>
149              Remove
150            </Button>
151          </div>
152        );
153      })}
154      <Button type="button" size="sm" onClick={() => onChange([...rows, { name: "" }])}>
155        Add equipment
156      </Button>
157    </div>
158  );
159}
160
161/** One field's input, by its kind. */
162export function FieldInput({
163  field,
164  value,
165  original,
166  yaml,
167  form,
168  onValue,
169  onYaml,
170}: {
171  field: FormField;
172  value: unknown;
173  original: unknown;
174  yaml: string;
175  form: KbForm;
176  onValue: (value: unknown) => void;
177  onYaml: (text: string) => void;
178}) {
179  const id = fieldId(field.key);
180  const list = (v: unknown) => (Array.isArray(v) ? v : []);
181  switch (field.kind) {
182    case "readonly":
183      return (
184        <Field field={field}>
185          <p id={id} className="kb-readonly">
186            <code>{field.yaml || "none"}</code>
187          </p>
188        </Field>
189      );
190    case "text":
191      return (
192        <Field field={field}>
193          <input id={id} className="cap-input" value={shown(value)} placeholder={reason(original) ?? ""} onChange={(e) => onValue(fromInput(e.target.value, original))} />
194        </Field>
195      );
196    case "textarea":
197      return (
198        <Field field={field} wide>
199          <textarea id={id} className="cap-input" rows={3} value={shown(value)} onChange={(e) => onValue(fromInput(e.target.value, original))} />
200        </Field>
201      );
202    case "lines":
203      return (
204        <Field field={field} wide>
205          <textarea
206            id={id}
207            className="cap-input"
208            rows={3}
209            value={isGap(value) ? "" : list(value).join("\n")}
210            onChange={(e) => {
211              const lines = e.target.value.split("\n").map((l) => l.trim()).filter(Boolean);
212              onValue(lines.length ? lines : isGap(original) ? original : undefined);
213            }}
214          />
215        </Field>
216      );
217    case "date":
218      return (
219        <Field field={field}>
220          <input id={id} type="date" className="cap-input" value={/^\d{4}-\d{2}-\d{2}$/.test(shown(value)) ? shown(value) : ""} onChange={(e) => onValue(fromInput(e.target.value, original))} />
221        </Field>
222      );
223    case "number":
224      return (
225        <Field field={field}>
226          <input
227            id={id}
228            type="number"
229            min={0}
230            className="cap-input"
231            value={typeof value === "number" ? value : ""}
232            onChange={(e) => onValue(e.target.value === "" ? (isGap(original) ? original : undefined) : Number(e.target.value))}
233          />
234        </Field>
235      );
236    case "checkbox":
237      return (
238        <div className="cap-field kb-field">
239          <label className="kb-check" htmlFor={id}>
240            <input id={id} type="checkbox" checked={value === true} onChange={(e) => onValue(e.target.checked ? true : original === undefined ? undefined : false)} /> {field.label}
241          </label>
242        </div>
243      );
244    case "select":
245      return (
246        <Field field={field}>
247          <select id={id} className="cap-input" value={isGap(value) ? "" : shown(value)} onChange={(e) => onValue(fromInput(e.target.value, original))}>
248            <option value="">Choose one</option>
249            {(field.options ?? []).map((o) => (
250              <option key={o.value} value={o.value}>
251                {o.label}
252              </option>
253            ))}
254          </select>
255        </Field>
256      );
257    case "choice":
258      return (
259        <Field field={field}>
260          <div id={id} role="radiogroup" aria-label={field.label} className="kb-checks">
261            {(field.options ?? []).map((o) => (
262              <label key={o.value} className="kb-check">
263                <input type="radio" name={`choice-${field.key}`} checked={value === o.value} onChange={() => onValue(o.value)} /> {o.label}
264              </label>
265            ))}
266          </div>
267        </Field>
268      );
269    case "multi":
270      return (
271        <Field field={field} wide>
272          <Checks id={id} label={field.label} options={field.options ?? []} picked={list(value).map(String)} onChange={(next) => onValue(next.length ? next : isGap(original) ? original : undefined)} />
273        </Field>
274      );
275    case "primers":
276      return (
277        <Field field={field} wide>
278          <Checks
279            id={id}
280            label={field.label}
281            options={form.registry.primer}
282            picked={list(value).map((p) => String((p as { primer?: string }).primer))}
283            onChange={(next) => onValue(next.length ? next.map((primer) => ({ primer })) : typeof original === "string" ? original : undefined)}
284          />
285        </Field>
286      );
287    case "strains": {
288      const notApplicable = value === "not applicable";
289      return (
290        <Field field={field} wide>
291          <label className="kb-check">
292            <input type="checkbox" checked={notApplicable} onChange={(e) => onValue(e.target.checked ? "not applicable" : isGap(original) ? original : undefined)} /> Not applicable
293          </label>
294          {notApplicable ? null : (
295            <Checks
296              id={id}
297              label={field.label}
298              options={form.registry.strain}
299              picked={list(value).map((s) => String((s as { strain?: string }).strain))}
300              onChange={(next) => onValue(next.length ? next.map((strain) => ({ strain })) : isGap(original) ? original : undefined)}
301            />
302          )}
303        </Field>
304      );
305    }
306    case "materials":
307      return (
308        <Field field={field} wide>
309          <MaterialsEditor id={id} rows={list(value) as Material[]} reagents={form.registry.reagent} solutions={form.references.solutions} onChange={(rows) => onValue(rows)} />
310        </Field>
311      );
312    case "equipment":
313      return (
314        <Field field={field} wide>
315          <EquipmentEditor id={id} rows={list(value) as EquipmentEntry[]} items={form.registry.equipment} onChange={(rows) => onValue(rows)} />
316        </Field>
317      );
318    default:
319      return (
320        <Field field={{ ...field, help: field.help ?? "YAML, as in the file." }} wide>
321          <textarea id={id} className="cap-input kb-yaml" rows={Math.min(12, Math.max(2, yaml.split("\n").length))} value={yaml} onChange={(e) => onYaml(e.target.value)} />
322        </Field>
323      );
324  }
325}
326
327/**
328 * A note that names something (a troubleshooting row, a calculator) is picked by name. A calculator's preset values
329 * after its id are kept as written.
330 */
331export function ReferencePicker({ label, choices, empty, text, onChange }: { label: string; choices: Choice[]; empty: string; text: string; onChange: (text: string) => void }) {
332  const [first = "", ...rest] = text.trim().split(/\s+/).filter(Boolean);
333  const id = first.includes("=") ? "" : first;
334  const extra = first.includes("=") ? [first, ...rest] : rest;
335  return (
336    <select className="cap-input" aria-label={label} value={id} onChange={(e) => onChange([e.target.value, ...extra].filter(Boolean).join(" "))}>
337      <option value="">{empty}</option>
338      {choices.map((o) => (
339        <option key={o.value} value={o.value}>
340          {o.label}
341        </option>
342      ))}
343      {id && !choices.some((o) => o.value === id) ? <option value={id}>Not found; pick one from the list</option> : null}
344    </select>
345  );
346}