app/components/phage-tool.tsx

Functions

Imports

It imports app/components/enhance.tsx, app/lib/phage-tools.mjs. Imported by app/components/procedure-steps.tsx, app/routes/content-page.tsx.

Source

1import { Fragment, type ReactNode } from "react";
2
3import { Enhance } from "~/components/enhance";
4import { TOOLS, resultView, runTool, textParts, toolValues, toolsOnPage, type ViewNode } from "~/lib/phage-tools.mjs";
5
6import "~/styles/phage-tools.css";
7
8/** A view node from app/lib/phage-tools.mjs as React, the same markup app/enhance/tools.ts builds. */
9function renderNode(node: ViewNode | string, key: number): ReactNode {
10  if (typeof node === "string") return <Fragment key={key}>{node}</Fragment>;
11  const Tag = node.tag;
12  return (
13    <Tag key={key} className={node.className}>
14      {node.children.map(renderNode)}
15    </Tag>
16  );
17}
18
19/**
20 * One calculator's form and its result. `instance` keys the ids and the status regions, so the same
21 * calculator can sit under several steps of one page (a page of its own uses the tool's id). `embedded`
22 * is a calculator inside a procedure step: its form still submits to the tool's own page, which answers
23 * with script off, and app/enhance/tools.ts leaves the address bar alone.
24 */
25function ToolBody({
26  id,
27  instance = id,
28  values,
29  embedded = false,
30}: {
31  id: string;
32  instance?: string;
33  values: Record<string, string>;
34  embedded?: boolean;
35}) {
36  const tool = TOOLS[id];
37  if (!tool) throw new Error(`No calculator named ${id}.`);
38  const view = resultView(runTool(id, values));
39  return (
40    <div className="phage-tool-body">
41      <form
42        className="phage-tool-form"
43        method="get"
44        action={tool.path}
45        data-tool={id}
46        data-tool-instance={instance}
47        data-tool-embedded={embedded ? "" : undefined}
48      >
49        {tool.fields.map((field) => {
50          const inputId = `${instance}-${field.name}`;
51          const hintId = `${inputId}-hint`;
52          const described = field.hint || field.source;
53          return (
54            <div className="phage-tool-field" key={field.name}>
55              <label htmlFor={inputId}>
56                {field.label}
57                {field.unit ? <span className="phage-tool-unit"> ({field.unit})</span> : null}
58              </label>
59              <input
60                id={inputId}
61                name={field.name}
62                type="text"
63                inputMode="decimal"
64                autoComplete="off"
65                spellCheck={false}
66                defaultValue={values[field.name]}
67                aria-describedby={described ? hintId : undefined}
68              />
69              {described ? (
70                <p id={hintId} className="phage-tool-hint">
71                  {field.hint
72                    ? textParts(field.hint).map((part, i) =>
73                        part.sup ? <sup key={i}>{part.text}</sup> : <Fragment key={i}>{part.text}</Fragment>,
74                      )
75                    : null}
76                  {field.hint && field.source ? " " : null}
77                  {field.source ? (
78                    <>
79                      Lab default: <a href={field.source.href}>{field.source.label}</a>.
80                    </>
81                  ) : null}
82                </p>
83              ) : null}
84            </div>
85          );
86        })}
87        <button type="submit" className="phage-tool-submit">
88          Calculate
89        </button>
90      </form>
91      <div className="phage-tool-output">
92        <div className="phage-tool-status" role="status" data-tool-status={instance}>
93          {view.summary.map(renderNode)}
94        </div>
95        <div className="phage-tool-detail" data-tool-detail={instance}>
96          {view.detail.map(renderNode)}
97        </div>
98      </div>
99    </div>
100  );
101}
102
103/**
104 * The calculators on a /research/tools page, computed on the server from the query string (or the
105 * worked example when there is none), so the page reads complete with script off and the Calculate
106 * button works as a plain GET. app/enhance/tools.ts recomputes on every input with the same module.
107 */
108export function PhageTools({ path, search }: { path: string; search: string }) {
109  const ids = toolsOnPage(path);
110  if (ids.length === 0) return null;
111  const params = new URLSearchParams(search);
112  return (
113    <>
114      {ids.map((id) => {
115        const tool = TOOLS[id];
116        if (!tool) throw new Error(`No calculator named ${id}.`);
117        const titleId = `tool-${id}-title`;
118        return (
119          <section key={id} className="phage-tool" aria-labelledby={titleId}>
120            <h2 id={titleId} className="phage-tool-title">
121              {tool.title}
122            </h2>
123            <ToolBody id={id} values={toolValues(id, params)} />
124          </section>
125        );
126      })}
127      <Enhance module="tools" />
128    </>
129  );
130}
131
132/**
133 * The calculators a procedure step names (`> CALC: webbed-plate`), each folded under the step it serves
134 * with the lab's worked example in its fields, except any value the step itself states. The caller adds the
135 * "tools" enhancement once per page.
136 */
137export function StepCalculators({ calculators, scope }: { calculators: Array<{ id: string; values: Record<string, string> }>; scope: string }) {
138  return (
139    <>
140      {calculators.map(({ id, values }) => {
141        const tool = TOOLS[id];
142        if (!tool) throw new Error(`No calculator named ${id}.`);
143        return (
144          <details key={id} className="phage-tool phage-tool-step">
145            <summary>
146              Calculator: {tool.title}
147            </summary>
148            <p className="phage-tool-hint">The fields start on the lab&apos;s worked example{Object.keys(values).length ? ", except what this step states" : ""}. Enter your own numbers.</p>
149            <ToolBody id={id} instance={`${scope}-${id}`} values={{ ...toolValues(id), ...values }} embedded />
150            <p className="phage-tool-more">
151              <a href={tool.path}>Open the {tool.title.toLowerCase()} on its own page</a>
152            </p>
153          </details>
154        );
155      })}
156    </>
157  );
158}