app/routes/lab.kind.tsx

Functions

Imports

It imports app/components/breadcrumb.tsx, app/components/enhance.tsx, app/components/lab.tsx, app/components/page-shell.tsx, app/db/phages.ts, app/db/procedures.ts, app/db/registry.ts, app/kb/registry/catalog.mjs, app/kb/registry/kinds.mjs, app/kb/registry/route.ts, app/lib/access.server.ts, app/lib/context.ts, app/lib/json-ld.mjs, app/lib/seo.ts. No module of this repo imports it.

Source

1import { catalogRedirect, parseCatalogParams, queryCatalog } from "capsomer/behaviour/catalog";
2import { data, redirect } from "react-router";
3
4import { Breadcrumb } from "~/components/breadcrumb";
5import { Enhance } from "~/components/enhance";
6import { LabEquipment, LabEquipmentItem, LabPrimer, LabPrimers, LabReagent, LabReagents, LabStrain, LabStrains } from "~/components/lab";
7import { PageShell } from "~/components/page-shell";
8import { listPhages } from "~/db/phages";
9import { getRegistryItem, listRegistry } from "~/db/registry";
10import { listPublishedLibraryRecords } from "~/db/procedures";
11import { isAdminViewer } from "~/lib/access.server";
12import { getEnv } from "~/lib/context";
13import { jsonLd as serializeJsonLd } from "~/lib/json-ld.mjs";
14import { EQUIPMENT_CATALOG, LAB_PATH, PRIMERS, REAGENTS, STRAINS, equipmentRow, equipmentRows, hasItemPage, itemPath, kindFromSegment, kindPath, primerRow, primerRows, protocolsUsing, protocolsUsingStrain, reagentLabel, reagentRow, reagentRows, reagentSource, strainRow, strainRows } from "~/kb/registry/catalog.mjs";
15import { KINDS } from "~/kb/registry/kinds.mjs";
16import type { EquipmentRow, PrimerRow, ReagentRow, StrainRow } from "~/kb/registry/catalog.mjs";
17import { LAB_CACHE_TAGS } from "~/kb/registry/route";
18import { SITE_ORIGIN, breadcrumbJsonLd, pageMeta, publicHtmlHeaders } from "~/lib/seo";
19
20import type { Route } from "./+types/lab.kind";
21
22// Route-scoped: the catalog's tokens and components are Capsomer's, and only the registry pages use them.
23import "capsomer/tokens.css";
24import "capsomer/field.css";
25import "capsomer/button.css";
26import "capsomer/table.css";
27import "capsomer/chips.css";
28import "capsomer/empty.css";
29import "capsomer/pagination.css";
30import "capsomer/catalog.css";
31import "~/styles/prose.css";
32import "~/styles/site-catalog.css";
33import "~/styles/library.css";
34import "~/styles/registry.css";
35
36/**
37 * A kind's own page and one item of it, under /research/lab (docs/REGISTRY.md): /research/lab/primers is the kind's
38 * catalog, with the columns made for it, and /research/lab/primers/lco1490 is the item. One module because the item
39 * is the kind's own optional segment. A kind with no view here answers 404 until its change adds one.
40 */
41export function headers() {
42  return new Headers(publicHtmlHeaders(LAB_CACHE_TAGS));
43}
44
45const kindTitle = (kind: string) => {
46  const plural = KINDS[kind]?.plural ?? kind;
47  return plural.charAt(0).toUpperCase() + plural.slice(1);
48};
49
50type Used = Array<{ path: string; title: string }>;
51/* Declared, not inferred: the router merges the shapes of a loader's separate returns, which would make every field optional. */
52type Page =
53  | { view: "kind"; kind: "primer"; primers: ReturnType<typeof primerRows>; search: string }
54  | { view: "kind"; kind: "strain"; strains: StrainRow[]; search: string }
55  | { view: "kind"; kind: "reagent"; reagents: ReagentRow[]; search: string }
56  | { view: "kind"; kind: "equipment"; items: EquipmentRow[]; search: string }
57  | { view: "item"; kind: "primer"; primer: PrimerRow; primers: PrimerRow[]; usedBy: Used; draft: boolean }
58  | { view: "item"; kind: "strain"; strain: StrainRow; usedBy: Used; draft: boolean }
59  | { view: "item"; kind: "reagent"; reagent: ReagentRow; draft: boolean }
60  | { view: "item"; kind: "equipment"; equipment: EquipmentRow; draft: boolean };
61
62export async function loader({ request, params, context }: Route.LoaderArgs): Promise<{ page: Page }> {
63  const env = getEnv(context);
64  const url = new URL(request.url);
65  const kind = kindFromSegment(params.kind);
66  // Only the kinds with a view of their own are served; the others join as their changes land.
67  if (kind !== "primer" && kind !== "strain" && kind !== "reagent" && kind !== "equipment") throw data(null, { status: 404 });
68
69  if (params.id === undefined) {
70    const canonical =
71      kind === "primer"
72        ? catalogRedirect(PRIMERS, url)
73        : kind === "strain"
74          ? catalogRedirect(STRAINS, url)
75          : kind === "reagent"
76            ? catalogRedirect(REAGENTS, url)
77            : catalogRedirect(EQUIPMENT_CATALOG, url);
78    if (canonical) throw redirect(canonical, 301);
79    const published = await listRegistry(env, { kind, published: true });
80    if (kind === "primer") return { page: { view: "kind", kind, primers: primerRows(published), search: url.search } };
81    if (kind === "strain") return { page: { view: "kind", kind, strains: strainRows(published, await listPhages(env)), search: url.search } };
82    if (kind === "reagent") return { page: { view: "kind", kind, reagents: reagentRows(published, await listPublishedLibraryRecords(env)), search: url.search } };
83    return { page: { view: "kind", kind, items: equipmentRows(published, await listPublishedLibraryRecords(env)), search: url.search } };
84  }
85
86  // A kind that is only one table has no page for an item, and no address is kept for one that had a page.
87  if (!hasItemPage(kind)) throw data(null, { status: 404 });
88  const item = await getRegistryItem(env, kind, params.id);
89  if (!item) throw data(null, { status: 404 });
90  // A draft is the signed-in admin's alone; that request carries a cookie, and the Worker never stores it.
91  if (item.status === "draft" && !(await isAdminViewer(env, request))) throw data(null, { status: 404 });
92  const draft = item.status === "draft";
93  // A reagent's and an item of equipment's protocols are computed from the protocols that name them (docs/KNOWLEDGE-BASE.md, A1).
94  if (kind === "reagent") return { page: { view: "item", kind, reagent: reagentRow(item, await listPublishedLibraryRecords(env)), draft } };
95  if (kind === "equipment") return { page: { view: "item", kind, equipment: equipmentRow(item, await listPublishedLibraryRecords(env)), draft } };
96  if (kind === "strain") {
97    const [phages, protocols] = await Promise.all([listPhages(env), listPublishedLibraryRecords(env)]);
98    const strain = strainRow(item, phages);
99    return { page: { view: "item", kind, strain, usedBy: protocolsUsingStrain(strain, protocols), draft } };
100  }
101  const [others, protocols] = await Promise.all([listRegistry(env, { kind, published: true }), listPublishedLibraryRecords(env)]);
102  const primer = primerRow(item);
103  const primers = others.map(primerRow);
104  return { page: { view: "item", kind, primer, primers, usedBy: protocolsUsing(primer, protocols), draft } };
105}
106
107export function meta({ loaderData }: Route.MetaArgs) {
108  if (!loaderData) return [];
109  const page = loaderData.page;
110  const plural = (n: number, word: string) => `${n} ${word}${n === 1 ? "" : "s"}`;
111  if (page.view === "kind") {
112    if (page.kind === "strain") {
113      return pageMeta({
114        title: "Strains: the bacterial hosts of the lab's phage work",
115        description: `The ${plural(page.strains.length, "bacterial strain")} the lab's phages are isolated on, with each one's culture collection number and the phages counted from the phages table.`,
116        path: kindPath(page.kind),
117      });
118    }
119    if (page.kind === "equipment") {
120      return pageMeta({
121        title: "Equipment: the instruments and labware the lab's protocols use",
122        description: `The ${plural(page.items.length, "item")} the lab's protocols list under Equipment, in one table: manufacturer, rotor where it matters, and the protocols that use each.`,
123        path: kindPath(page.kind),
124      });
125    }
126    if (page.kind === "reagent") {
127      return pageMeta({
128        title: "Reagents: what the lab's protocols use",
129        description: `The ${plural(page.reagents.length, "reagent")} the lab's protocols use, in one table: supplier, catalog number, a link, and the protocols that use each. A reagent the lab prepares links its recipe.`,
130        path: kindPath(page.kind),
131      });
132    }
133    return pageMeta({
134      title: "Primers: sequences, targets and melting temperatures",
135      description: `The ${plural(page.primers.length, "primer")} the lab's protocols use, with each sequence as stored and its length and melting temperature computed.`,
136      path: kindPath(page.kind),
137    });
138  }
139  const noindex = page.draft ? [{ name: "robots", content: "noindex" }] : [];
140  const usedIn = (uses: Used) => (uses.length > 0 ? `, used in ${plural(uses.length, "protocol")}` : "");
141  if (page.kind === "reagent") {
142    const { reagent } = page;
143    const source = reagent.preparedInLab ? "Prepared in the lab" : [reagentSource(reagent), reagent.catalogNumber].filter(Boolean).join(", ") || "Reagent";
144    return [...pageMeta({ title: `${reagentLabel(reagent)}: reagent`, description: `${source}${usedIn(reagent.uses)}.`, path: reagent.path }), ...noindex];
145  }
146  if (page.kind === "equipment") {
147    const { equipment } = page;
148    const maker = equipment.manufacturer ? `Made by ${equipment.manufacturer}` : "Lab equipment";
149    return [...pageMeta({ title: `${equipment.name}: equipment`, description: `${maker}${usedIn(equipment.uses)}.`, path: equipment.path }), ...noindex];
150  }
151  if (page.kind === "strain") {
152    const { strain } = page;
153    const facts = [strain.collection && strain.collectionNumber ? `${strain.collection} ${strain.collectionNumber}` : null, `${plural(strain.phages.length, "phage")} isolated on it`]
154      .filter(Boolean)
155      .join(", ");
156    return [...pageMeta({ title: `${strain.name}: strain`, description: `${strain.organism ?? "Bacterial"} host strain, ${facts}.`, path: strain.path }), ...noindex];
157  }
158  const { primer } = page;
159  const facts = [primer.direction ? `${primer.direction} primer` : "Primer", primer.target ? `for ${primer.target}` : null].filter(Boolean).join(" ");
160  const sizes = [primer.length ? `${primer.length} nt` : null, primer.tm !== null ? `Tm ${primer.tm} °C` : null].filter(Boolean).join(", ");
161  return [...pageMeta({ title: `${primer.name}: primer`, description: `${facts}${sizes ? `, ${sizes}` : ""}.`, path: primer.path }), ...noindex];
162}
163
164export default function LabKindRoute({ loaderData }: Route.ComponentProps) {
165  const page = loaderData.page;
166  const item =
167    page.view !== "item" ? null : page.kind === "strain" ? page.strain : page.kind === "reagent" ? page.reagent : page.kind === "equipment" ? page.equipment : page.primer;
168  const trail: Array<[string, string]> = [
169    ["Research", "/research"],
170    ["Lab registry", LAB_PATH],
171    [kindTitle(page.kind), kindPath(page.kind)],
172    ...(item ? ([[item.name, itemPath(page.kind, item.id)]] as Array<[string, string]>) : []),
173  ];
174  const crumbs = (
175    <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: serializeJsonLd(breadcrumbJsonLd(SITE_ORIGIN, trail)) }} />
176  );
177  if (page.view === "item") {
178    const draft = page.draft;
179    return (
180      <PageShell trail={crumbs}>
181        <Breadcrumb trail={trail} />
182        <h1 className="page-title" id="registry-title">
183          {item?.name}
184        </h1>
185        {draft ? <p>Draft: only you can see this page.</p> : null}
186        {page.kind === "strain" ? (
187          <LabStrain strain={page.strain} usedBy={page.usedBy} />
188        ) : page.kind === "reagent" ? (
189          <LabReagent reagent={page.reagent} />
190        ) : page.kind === "equipment" ? (
191          <LabEquipmentItem equipment={page.equipment} />
192        ) : (
193          <LabPrimer primer={page.primer} primers={page.primers} usedBy={page.usedBy} />
194        )}
195      </PageShell>
196    );
197  }
198  return (
199    <PageShell trail={crumbs}>
200      <Breadcrumb trail={trail} />
201      <h1 className="page-title" id="registry-title">
202        {kindTitle(page.kind)}
203      </h1>
204      {page.kind === "strain" ? (
205        <LabStrains result={queryCatalog(STRAINS, page.strains, parseCatalogParams(STRAINS, page.search))} />
206      ) : page.kind === "reagent" ? (
207        <LabReagents result={queryCatalog(REAGENTS, page.reagents, parseCatalogParams(REAGENTS, page.search))} />
208      ) : page.kind === "equipment" ? (
209        <LabEquipment result={queryCatalog(EQUIPMENT_CATALOG, page.items, parseCatalogParams(EQUIPMENT_CATALOG, page.search))} />
210      ) : (
211        <LabPrimers result={queryCatalog(PRIMERS, page.primers, parseCatalogParams(PRIMERS, page.search))} />
212      )}
213      <Enhance module="catalog" />
214    </PageShell>
215  );
216}