app/components/procedure-steps.tsx

Functions

Imports

It imports app/components/phage-tool.tsx, app/components/procedure-materials.tsx, app/kb/procedures/parse.mjs, app/kb/procedures/recipe-views.mjs, app/kb/procedures/render.mjs. Imported by app/components/procedure.tsx.

Source

1import { StepCalculators } from "~/components/phage-tool";
2import { fillQuantities, type ProcedureRecord } from "~/kb/procedures/render.mjs";
3import { PLATFORMS } from "~/kb/procedures/parse.mjs";
4import { gramsPerCup, ingredientNames, showQuantity, showTemperatures, stepId, stepIngredients, type UnitSystem } from "~/kb/procedures/recipe-views.mjs";
5import { type Step, html } from "~/components/procedure-materials";
6
7/* The procedure page's method (procedure.tsx): its steps, their flags and the commands they run. */
8
9function Flag({ kind, label, children }: { kind: string; label: string; children: React.ReactNode }) {
10  return (
11    <div className={`procedure-flag procedure-flag-${kind}`} role="note">
12      <strong className="procedure-flag-label">{label}</strong> {children}
13    </div>
14  );
15}
16
17export function StepItem({
18  step,
19  factor,
20  troubleshooting,
21  scope = "",
22  brief = false,
23  units = null,
24  densities = null,
25  names,
26}: {
27  step: Step;
28  factor: number;
29  troubleshooting: ProcedureRecord["troubleshooting"];
30  /** Keys this step's calculators apart from the same tool under another list's step 1. */
31  scope?: string;
32  brief?: boolean;
33  /** A recipe's units as the reader asked for them (recipe-views.mjs). */
34  units?: UnitSystem | null;
35  /** A recipe's grams per cup by ingredient; null for a protocol or a how-to, which list no ingredients under a step. */
36  densities?: Map<string, number> | null;
37  /** A recipe's words for each ingredient, as its ingredient list gives them. */
38  names?: Map<string, string>;
39}) {
40  const show = (q: Parameters<NonNullable<Parameters<typeof fillQuantities>[2]>>[0]) => showQuantity(q, factor, units, densities?.get(q.name?.toLowerCase() ?? "") ?? null);
41  const text = showTemperatures(fillQuantities(step, factor, densities ? show : undefined), units);
42  // A recipe step lists what goes into it (R2), with the amounts the reader asked for.
43  const ingredients = densities && !brief ? stepIngredients(step, factor, units, densities, names) : [];
44  return (
45    <li
46      value={step.number}
47      id={scope ? stepId(scope, step.number) : undefined}
48      className="procedure-step"
49      data-step={step.number}
50      data-timers={step.timers.length > 0 ? JSON.stringify(step.timers) : undefined}
51    >
52      <p className="procedure-step-text" data-run-swap="step" dangerouslySetInnerHTML={html(text)} />
53      {ingredients.length > 0 ? (
54        <p className="procedure-step-ingredients">
55          <span className="procedure-step-ingredients-label">Ingredients: </span>
56          {ingredients.map((i) => (i.amount ? `${i.amount} ${i.name}` : i.name)).join(", ")}
57        </p>
58      ) : null}
59      {step.spin.map((s) => (
60        <Flag key={s} kind="spin" label="Spin:">
61          {s}
62        </Flag>
63      ))}
64      {step.critical.map((c, i) => (
65        <Flag key={`c${i}`} kind="critical" label="Critical step.">
66          <span dangerouslySetInnerHTML={html(c)} />
67        </Flag>
68      ))}
69      {step.pause.map((p, i) => (
70        <Flag key={`p${i}`} kind="pause" label="Pause point.">
71          <span dangerouslySetInnerHTML={html(p)} />
72        </Flag>
73      ))}
74      {step.expect.map((e, i) => (
75        <Flag key={`e${i}`} kind="expect" label="Expected:">
76          <span dangerouslySetInnerHTML={html(e)} />
77        </Flag>
78      ))}
79      {commandGroups(step.commands).map((group, g) =>
80        group.length === 1 && !group[0]!.platform ? (
81          <Command key={`cmd${g}`} cmd={group[0]!} />
82        ) : (
83          <Platforms key={`cmd${g}`} group={group} id={`${scope ? stepId(scope, step.number) : `step-${step.number}`}-${g}`} brief={brief} />
84        ),
85      )}
86      {step.photos.map((p) => (
87        <img
88          key={p.src}
89          className="procedure-photo"
90          src={p.src}
91          alt={p.alt}
92          loading="lazy"
93          decoding="async"
94          {...(p.width && p.height ? { width: p.width, height: p.height } : {})}
95        />
96      ))}
97      {brief
98        ? null
99        : (step.challenges ?? []).map((c, i) => (
100            <div key={`ch${i}`} className="procedure-challenge" role="note">
101              <strong className="procedure-flag-label">Challenge.</strong>
102              <div dangerouslySetInnerHTML={html(c.html)} />
103              {c.solutionHtml ? (
104                <details className="procedure-solution">
105                  <summary>Solution</summary>
106                  <div dangerouslySetInnerHTML={html(c.solutionHtml)} />
107                </details>
108              ) : null}
109            </div>
110          ))}
111      {/* A row compiled before calculators existed has no `calculators` until the next sync rewrites it. */}
112      {brief || !step.calculators?.length ? null : <StepCalculators calculators={step.calculators} scope={`${scope}s${step.number}`} />}
113      {brief
114        ? null
115        : step.why.map((w, i) => <div key={`w${i}`} className="procedure-why" dangerouslySetInnerHTML={html(w)} />)}
116      {step.troubleshooting.length > 0 ? (
117        <p className="procedure-step-trouble">
118          Troubleshooting:{" "}
119          {step.troubleshooting.map((id, i) => {
120            const row = troubleshooting.find((r) => r.id === id);
121            return (
122              <span key={id}>
123                {i > 0 ? ", " : ""}
124                <a href={`#trouble-${id}`}>{(row?.problem ?? id).replace(/<[^>]+>/g, "")}</a>
125              </span>
126            );
127          })}
128        </p>
129      ) : null}
130    </li>
131  );
132}
133
134type Cmd = Step["commands"][number];
135
136/** A step's commands in runs: each run of blocks that name a platform is one set of tabs; any other block stands alone. */
137function commandGroups(commands: Cmd[]) {
138  const groups: Cmd[][] = [];
139  for (const cmd of commands) {
140    const last = groups[groups.length - 1];
141    if (cmd.platform && last?.[0]?.platform) last.push(cmd);
142    else groups.push([cmd]);
143  }
144  return groups;
145}
146
147function Command({ cmd }: { cmd: Cmd }) {
148  return (
149    <div className="procedure-command">
150      <pre data-lang={cmd.lang || "text"}>
151        <code>{cmd.code}</code>
152      </pre>
153      {cmd.output !== null ? (
154        <>
155          <p className="procedure-output-label">Expected output</p>
156          <pre className="procedure-output">
157            <code>{cmd.output}</code>
158          </pre>
159        </>
160      ) : null}
161    </div>
162  );
163}
164
165const platformName = (p: string | null) => PLATFORMS[p as keyof typeof PLATFORMS] ?? p ?? "";
166
167/**
168 * One command for each platform (S4). With no script every block shows, under its name, and the tabs are links to them;
169 * app/enhance/platforms.ts turns the links into tabs and remembers the reader's platform. The sheet lists them all.
170 */
171function Platforms({ group, id, brief }: { group: Cmd[]; id: string; brief: boolean }) {
172  return (
173    <div className="procedure-platforms" data-platforms="">
174      {brief ? null : (
175        <p className="procedure-platform-tabs">
176          {group.map((cmd) => (
177            <a key={cmd.platform} href={`#${id}-${cmd.platform}`} data-platform={cmd.platform ?? ""}>
178              {platformName(cmd.platform)}
179            </a>
180          ))}
181        </p>
182      )}
183      {group.map((cmd) => (
184        <div key={cmd.platform} id={`${id}-${cmd.platform}`} className="procedure-platform" data-platform={cmd.platform ?? ""}>
185          <p className="procedure-platform-label">{platformName(cmd.platform)}</p>
186          <Command cmd={cmd} />
187        </div>
188      ))}
189    </div>
190  );
191}
192
193/** A list of short markdown lines under a heading: a tutorial's questions, objectives or key points (S2). */
194export function Bullets({ id, title, items }: { id: string; title: string; items: string[] }) {
195  if (items.length === 0) return null;
196  return (
197    <>
198      <h3 id={id}>{title}</h3>
199      <ul>
200        {items.map((x, i) => (
201          <li key={i} dangerouslySetInnerHTML={html(x)} />
202        ))}
203      </ul>
204    </>
205  );
206}
207
208export function Steps({ steps, factor, record, scope, units = null }: { steps: Step[]; factor: number; record: ProcedureRecord; scope: string; units?: UnitSystem | null }) {
209  const densities = record.profile === "recipe" ? gramsPerCup(record) : null;
210  const names = record.profile === "recipe" ? ingredientNames(record) : undefined;
211  return (
212    <ol className="procedure-steps" start={steps[0]?.number ?? 1}>
213      {steps.map((step) => (
214        <StepItem key={step.number} step={step} factor={factor} troubleshooting={record.troubleshooting} scope={scope} units={units} densities={densities} names={names} />
215      ))}
216    </ol>
217  );
218}