app/components/plate-i.tsx

Functions

Imports

It imports app/components/plate-i-geometry.ts. Imported by app/routes/home.tsx.

Source

1import { KEY_ICONS, NARROW, WIDE, WIDE_VIEW, type PlateLayout, type Shape } from "./plate-i-geometry";
2
3// CSS shows one of the two drawings; `display: none` removes the other from the accessibility
4// tree and the tab order, so a reader meets one plate either way.
5
6/** The six, in numeral order. The drawing, its labels and the row all read from this. */
7const PLAQUES = [
8  { id: "i", name: "clear", title: "Clear", note: "Complete lysis; lytic." },
9  { id: "ii", name: "turbid", title: "Turbid", note: "Lawn survives inside; temperate." },
10  { id: "iii", name: "bullseye", title: "Bullseye", note: "Clear center, turbid ring." },
11  { id: "iv", name: "halo", title: "Halo", note: "Turbid ring beyond the edge; depolymerase." },
12  { id: "v", name: "pinpoint", title: "Pinpoint", note: "Under 1 mm." },
13  { id: "vi", name: "diffuse edge", title: "Diffuse edge", note: "No defined boundary." },
14] as const;
15
16/** The numerals in row order: the key's icons are drawn in this order. */
17const PLAQUE_IDS: readonly string[] = PLAQUES.map((p) => p.id);
18
19function plaque(id: string) {
20  const meta = PLAQUES.find((p) => p.id === id);
21  if (!meta) throw new Error(`Plate I: no plaque "${id}" in PLAQUES`);
22  return meta;
23}
24
25const FILL = { paper: "var(--paper)", lawn: "var(--fig-lawn)", turbid: "var(--fig-turbid)", none: "none" };
26const STROKE = { ink: "var(--text)", dust: "var(--fig-dust-300)", none: "none" };
27
28const VIEW = {
29  wide: WIDE_VIEW,
30  narrow: { x: -14, y: -30, w: 375, h: 364 },
31};
32
33const DESCRIPTION =
34  "A bacterial lawn in a petri dish with one plaque of each morphology, each on a leader to its " +
35  "label: " +
36  PLAQUES.map((p) => `${p.id}, ${p.name}`).join("; ") +
37  ". A scale bar marks 1 cm.";
38
39function ShapeOf({ s }: { s: Shape }) {
40  const paint = {
41    fill: FILL[s.fill],
42    stroke: STROKE[s.stroke],
43    strokeWidth: s.stroke === "none" ? undefined : s.width,
44    strokeDasharray: s.dash ?? undefined,
45  };
46  return s.kind === "circle" ? (
47    <circle cx={s.c[0]} cy={s.c[1]} r={s.c[2]} {...paint} />
48  ) : (
49    <path d={s.d} {...paint} />
50  );
51}
52
53function Drawing({ layout, variant }: { layout: PlateLayout; variant: "wide" | "narrow" }) {
54  const v = VIEW[variant];
55  const { cx, cy, rim, lawn } = layout.dish;
56  const [sx1, sy1, sx2, sy2] = layout.scale.line;
57  return (
58    <svg
59      className={`plate plate--${variant}`}
60      viewBox={`${v.x} ${v.y} ${v.w} ${v.h}`}
61      role="group"
62      aria-labelledby={`plate-i-title-${variant} plate-i-desc-${variant}`}
63    >
64      <title id={`plate-i-title-${variant}`}>Plate I. Plaque morphology, drawn.</title>
65      <desc id={`plate-i-desc-${variant}`}>{DESCRIPTION}</desc>
66
67      <circle cx={cx} cy={cy} r={rim} fill="var(--paper)" stroke="var(--text)" strokeWidth="1.6" />
68      <circle cx={cx} cy={cy} r={lawn} fill="var(--fig-lawn)" />
69
70      {layout.plaques.map((p) => {
71        const meta = plaque(p.id);
72        return (
73          <g key={p.id} className="plate-plaque" data-plaque={p.id} role="img" aria-label={`Plaque ${p.id}, ${meta.name}`}>
74            {p.shapes.map((s, j) => (
75              <ShapeOf key={j} s={s} />
76            ))}
77          </g>
78        );
79      })}
80
81      {/* Annotation after every plaque, so no fill is ever drawn over a leader. */}
82      {layout.plaques.map((p) => (
83        <g key={p.id} className="plate-leader" data-plaque={p.id}>
84          {p.leader.map(([x1, y1, x2, y2], j) => (
85            <line key={j} x1={x1} y1={y1} x2={x2} y2={y2} />
86          ))}
87          <text x={p.label.x} y={p.label.y} textAnchor={p.label.anchor} className="plate-label" aria-hidden="true">
88            {`${p.id} · ${plaque(p.id).name}`}
89          </text>
90        </g>
91      ))}
92
93      <line x1={sx1} y1={sy1} x2={sx2} y2={sy2} stroke="var(--text)" strokeWidth="1.5" />
94      <text x={layout.scale.label.x} y={layout.scale.label.y} className="plate-scale" aria-hidden="true">
95        {layout.scale.label.text}
96      </text>
97    </svg>
98  );
99}
100
101export function PlateI() {
102  return (
103    <>
104      <Drawing layout={WIDE} variant="wide" />
105      <Drawing layout={NARROW} variant="narrow" />
106    </>
107  );
108}
109
110export function PlateKeyRow() {
111  return (
112    <section className="plate-key u-wide" aria-label="Plate I key">
113      {KEY_ICONS.map((icon, i) => {
114        const p = plaque(PLAQUE_IDS[i] ?? "");
115        return (
116        <figure key={p.id} className="plate-key-entry" data-plaque={p.id}>
117          <svg className="plate-key-art" viewBox="0 0 76 76" width="76" height="76" role="img" aria-label={`${p.title} plaque, drawn.`}>
118            {icon.map((s, j) => (
119              <ShapeOf key={j} s={s} />
120            ))}
121          </svg>
122          <figcaption>
123            <span className="plate-key-num">{p.id}</span>
124            <b className="plate-key-name">{p.title}</b>
125            <span className="plate-key-note">{p.note}</span>
126          </figcaption>
127        </figure>
128        );
129      })}
130    </section>
131  );
132}