react-cheminfo 0.11.0 → 0.13.0

package/src/deploy/core/types.ts

@@ -0,0 +1,87 @@
+/** What a repository got wrong against the deployment contract. */
+export type DeployProblemKind =
+  | 'missing-compose'
+  | 'invalid-compose'
+  | 'unpinned-image'
+  | 'missing-build'
+  | 'wrong-image-name'
+  | 'required-env-file'
+  | 'floating-sidecar'
+  | 'missing-healthcheck'
+  | 'missing-env-example'
+  | 'missing-deploy-ignore';
+
+/** One way a repository would fail, or silently mis-deploy, on the server. */
+export interface DeployProblem {
+  /** The file it was found in, named as the caller named it. */
+  file: string;
+  /** Which line, counting from 1; 0 when the problem is the file's absence. */
+  line: number;
+  /** What kind of mistake it is. */
+  kind: DeployProblemKind;
+  /** What is wrong, in one line. */
+  message: string;
+  /** What to write instead, in one line. */
+  hint: string;
+}
+
+/** One file of the repository, with the path a report names it by. */
+export interface DeployFile {
+  /** The path, relative to the repository root. */
+  path: string;
+  /** Its content. */
+  text: string;
+}
+
+/** What the contract is checked against. */
+export interface CheckDeployOptions {
+  /**
+   * The package this repository's own workflow publishes, without a tag —
+   * `ghcr.io/<owner>/<repo>`, the repository name verbatim. When given, every
+   * compose file must default `IMAGE_NAME` to exactly this.
+   * @default undefined
+   */
+  imageName?: string;
+  /**
+   * Images built elsewhere, matched as a prefix before the tag. They are exempt
+   * from the `IMAGE_NAME`/`IMAGE_TAG` rule but must still carry a pinned tag.
+   * @default []
+   */
+  foreignImages?: readonly string[];
+  /**
+   * Compose files the repository is expected to ship. A site behind fewer
+   * exposures names fewer.
+   * @default DEPLOY_COMPOSE_FILES
+   */
+  composeFiles?: readonly string[];
+  /**
+   * Whether every service must declare a `healthcheck`. The deploy script keeps
+   * a new container only once Docker reports it healthy.
+   * @default true
+   */
+  requireHealthcheck?: boolean;
+  /**
+   * A comment carrying this marker inside a service waives the healthcheck for
+   * it, for a worker with no HTTP surface to probe. The reason is written next
+   * to the marker, where the next reader of the compose file will find it.
+   * @default 'healthcheck-ok'
+   */
+  healthcheckMarker?: string;
+  /**
+   * A comment carrying this marker on, or just above, an `image:` line waives
+   * the tag rules for it — for an image somebody else builds and this site
+   * deliberately tracks. The reason is written next to the marker.
+   * @default 'pin-ok'
+   */
+  pinMarker?: string;
+}
+
+/**
+ * The compose files every deployed site ships, one per exposure: a published
+ * port, a Traefik reverse proxy, a Cloudflare Tunnel.
+ */
+export const DEPLOY_COMPOSE_FILES: readonly string[] = [
+  'compose.yaml',
+  'compose.traefik.yaml',
+  'compose.cloudflared.yaml',
+];

package/src/disclosure/ui/CollapsibleSection.tsx

@@ -3,6 +3,8 @@ import { Collapse, Icon } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 import { useState } from 'react';
 
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
+
 /** What a titled section that folds away needs. */
 export interface CollapsibleSectionProps {
   /** The heading, which is also what opens and closes the section. */
@@ -84,11 +86,7 @@ export function CollapsibleSection(
   return (
     <section
       id={id}
-      className={
-        className === undefined
-          ? 'collapsible-section'
-          : `collapsible-section ${className}`
-      }
+      className={joinClassNames('collapsible-section', className)}
     >
       <div style={HEADER_STYLE}>
         <button

package/src/download/ui/FigureDownloadPanel.tsx

@@ -36,6 +36,12 @@ export interface FigureDownloadPanelProps {
   onScaleChange: (scale: number) => void;
   /** Called when they press save. */
   onSave: () => void;
+  /**
+   * Whether the SVG holds a rendered picture rather than vector drawings, as
+   * for a WebGL scene: its resolution then applies, and the hint says so.
+   * @default false
+   */
+  rasterSvg?: boolean;
 }
 
 /**
@@ -59,14 +65,14 @@ export function FigureDownloadPanel(
   props: FigureDownloadPanelProps,
 ): ReactElement {
   const { title, format, scale, scales, size, failure, saving } = props;
-  const { onFormatChange, onScaleChange, onSave } = props;
+  const { onFormatChange, onScaleChange, onSave, rasterSvg = false } = props;
 
-  const vector = format === 'svg';
+  const vector = format === 'svg' && !rasterSvg;
 
   return (
     <OverlayPanel
       title={title}
-      hint={hintOf(format, size, scale, failure)}
+      hint={hintOf(format, size, scale, failure, rasterSvg)}
       actions={
         <OverlayAction
           text="Save"
@@ -148,6 +154,7 @@ function scaleChoices(
  * @param size - How big the figure is on the page.
  * @param scale - The multiple it is painted at.
  * @param failure - What went wrong last time, if anything.
+ * @param rasterSvg - Whether the SVG embeds a rendered picture.
  * @returns The sentence.
  */
 function hintOf(
@@ -155,9 +162,13 @@ function hintOf(
   size: FigurePixels | null,
   scale: number,
   failure: string | null,
+  rasterSvg: boolean,
 ): string {
   if (failure !== null) return failure;
   if (size === null) return 'There is no figure on the page to save yet.';
+  if (format === 'svg' && rasterSvg) {
+    return `An SVG holding a picture of ${formatFigurePixels(figurePixels(size, scale))}: a 3D scene has no vector form.`;
+  }
   if (format === 'svg') {
     return `An SVG stays sharp at any size, so the resolution does not apply. Drawn ${formatFigurePixels(size)}.`;
   }

package/src/ecosystem/core/groups.ts

@@ -0,0 +1,59 @@
+/**
+ * The topics the family's tools are gathered under.
+ *
+ * A single grid of tiles tells a visitor nothing about which of them is for
+ * a first-year student and which is for a research project. The groups are the
+ * answer, and they read as a progression: the chemistry a course opens with,
+ * then the molecule itself, then what was measured of it, then the work only a
+ * project needs — and last the three tools that are not chemistry at all.
+ */
+
+/** The topics, in the order they are written. */
+export type SiteGroupId =
+  'basics' | 'structures' | 'spectra' | 'research' | 'computing';
+
+/** One topic the family's tools are gathered under. */
+export interface SiteGroup {
+  /** The identifier a site names in its `group`. */
+  id: SiteGroupId;
+  /** The heading the group is written under. */
+  label: string;
+  /**
+   * The line under the heading. It says who the group is for rather than what
+   * it contains — the tiles already say that, one tagline each.
+   */
+  blurb: string;
+}
+
+/**
+ * Every topic, in the order a menu and a footer write them. A site names one of
+ * these in its `group`, and that is the only place the order of the menu is
+ * decided; within a topic, sites keep the order they are declared in.
+ */
+export const SITE_GROUPS: readonly SiteGroup[] = [
+  {
+    id: 'basics',
+    label: 'Chemistry basics',
+    blurb: 'Where a course starts, and what you go back to.',
+  },
+  {
+    id: 'structures',
+    label: 'Structures & notation',
+    blurb: 'Draw a molecule, convert it between notations, see it in space.',
+  },
+  {
+    id: 'spectra',
+    label: 'Spectra',
+    blurb: 'Process a measurement, and work back to the structure behind it.',
+  },
+  {
+    id: 'research',
+    label: 'Research & data',
+    blurb: 'Specialised work: real datasets, and molecules nobody has made.',
+  },
+  {
+    id: 'computing',
+    label: 'Computing & teaching',
+    blurb: 'Around the chemistry: build a course, typeset it, parse it.',
+  },
+];

package/src/ecosystem/core/index.ts

@@ -1,5 +1,14 @@
-export { renderEcosystemLinksHtml } from './links.ts';
-export { findSiteByHost, siteById, siteDisplayName } from './lookup.ts';
+export type { SiteGroup, SiteGroupId } from './groups.ts';
+export { SITE_GROUPS } from './groups.ts';
+export type { GroupedSites } from './lookup.ts';
+export {
+  findSiteByHost,
+  groupedSites,
+  siteById,
+  siteDisplayName,
+} from './lookup.ts';
+export type { SiteNameColors, SiteNameColorsOptions } from './nameColors.ts';
+export { siteNameColors } from './nameColors.ts';
 export type {
   EcosystemSite,
   SiteId,
@@ -7,4 +16,4 @@ export type {
   SiteName,
 } from './sites.ts';
 export { ECOSYSTEM_SITES, siteUrl } from './sites.ts';
-export { siteThemeColor, siteTokensCss } from './tokens.ts';
+export { siteTokensCss } from './tokens.ts';

package/src/ecosystem/core/lookup.ts

@@ -1,6 +1,44 @@
+import type { SiteGroup, SiteGroupId } from './groups.ts';
+import { SITE_GROUPS } from './groups.ts';
 import type { EcosystemSite, SiteId } from './sites.ts';
 import { ECOSYSTEM_SITES } from './sites.ts';
 
+/** One topic and the sites written under it. */
+export interface GroupedSites {
+  /** The topic. */
+  group: SiteGroup;
+  /** Its sites, in the order they are declared. */
+  sites: EcosystemSite[];
+}
+
+/**
+ * The family gathered under its topics, which is how a menu and a footer list
+ * it. A topic nobody is written under is left out rather than headed over an
+ * empty space.
+ * @returns Each topic that has sites, in the order the topics are declared.
+ */
+export function groupedSites(): GroupedSites[] {
+  const grouped: GroupedSites[] = [];
+  for (const group of SITE_GROUPS) {
+    const sites = sitesInGroup(group.id);
+    if (sites.length > 0) grouped.push({ group, sites });
+  }
+  return grouped;
+}
+
+/**
+ * The sites written under one topic.
+ * @param id - The topic being asked for.
+ * @returns Its sites, in the order they are declared.
+ */
+export function sitesInGroup(id: SiteGroupId): EcosystemSite[] {
+  const sites: EcosystemSite[] = [];
+  for (const site of ECOSYSTEM_SITES) {
+    if (site.group === id) sites.push(site);
+  }
+  return sites;
+}
+
 /**
  * One site of the family, by the identifier its entry carries.
  * @param id - The site being asked for.

package/src/ecosystem/core/nameColors.ts

@@ -0,0 +1,50 @@
+import { FAMILY_TOKEN_VALUES, TOKEN } from '../../tokens/core/familyTokens.ts';
+
+import type { EcosystemSite } from './types.ts';
+
+/** The colour each half of a site's name is written in. */
+export interface SiteNameColors {
+  /** The first half of the name. */
+  lead: string;
+  /** The second half of the name. */
+  alt: string;
+  /** The faint dot between an address-shaped name's two halves. */
+  dot: string;
+}
+
+/** Where the family's own colours in a name come from. */
+export interface SiteNameColorsOptions {
+  /**
+   * `tokens` reads the family's ink and faint grey from the page, falling back
+   * to their values; `literal` writes the values out, for a document that
+   * loads no stylesheet of ours, such as a social card.
+   * @default 'tokens'
+   */
+  colors?: 'tokens' | 'literal';
+}
+
+/**
+ * How a site's name is coloured, so a wordmark in a header, a tile in a menu
+ * and a social card never write the same name two different ways.
+ *
+ * A site whose own logo leaves one half in black says so with `name.ink`, and
+ * the colour it owns then falls on the other half rather than being spent on
+ * both.
+ * @param site - The site being named.
+ * @param options - Whether the family's colours are read from the page.
+ * @returns The colour of each half, and of the dot between them.
+ */
+export function siteNameColors(
+  site: EcosystemSite,
+  options: SiteNameColorsOptions = {},
+): SiteNameColors {
+  const literal = options.colors === 'literal';
+  const ink = literal ? FAMILY_TOKEN_VALUES['--text'] : TOKEN.text;
+  const { ink: inkHalf } = site.name;
+  return {
+    lead: inkHalf === 'lead' ? ink : site.brand,
+    alt:
+      inkHalf === 'alt' ? ink : inkHalf === 'lead' ? site.brand : site.brandAlt,
+    dot: literal ? FAMILY_TOKEN_VALUES['--text-faint'] : TOKEN.textFaint,
+  };
+}

package/src/ecosystem/core/sites.ts

@@ -1,73 +1,12 @@
 // tokens-ok: file — every site's two colours are declared here.
-/** The sites the menu links to, in the order they are listed. */
-export type SiteId =
-  | 'learn'
-  | 'inchi'
-  | 'vcl'
-  | 'smiles'
-  | 'chemcalc'
-  | 'nmrium'
-  | 'metabo'
-  | 'derepflow'
-  | 'surge'
-  | 'tex'
-  | 'lcao'
-  | 'regexp'
-  | 'pdb'
-  | 'elucidation'
-  | 'equilibrium'
-  | 'polycarp'
-  | '3d'
-  | 'periodic-table'
-  | 'database';
+import type { EcosystemSite } from './types.ts';
 
-export interface SiteName {
-  /** First half of the name, set in the site's leading colour. */
-  lead: string;
-  /** Second half, set in the site's answering colour. */
-  alt: string;
-  /**
-   * Whether a faint dot separates the two halves, as an address-shaped name
-   * takes and a product-shaped one does not.
-   * @default false
-   */
-  dot?: boolean;
-}
-
-export interface EcosystemSite {
-  id: SiteId;
-  /** The name, split the way the site's own wordmark splits it. */
-  name: SiteName;
-  /** Where the site lives, written the way it is typed. */
-  host: string;
-  /** Where the sources live, and what a Source link opens. */
-  repository: string;
-  /** One line on what the site does. */
-  tagline: string;
-  /** The colour the first half of the name is set in. */
-  brand: string;
-  /**
-   * The colour the second half is set in. It is the site's answering colour
-   * darkened until it is readable on white, because several of those are
-   * yellows and ambers that sit around 2:1 there.
-   */
-  brandAlt: string;
-  /** The plate of the site's mark, and the colour one element of it carries. */
-  mark: SiteMarkColors;
-}
-
-export interface SiteMarkColors {
-  /** The rounded square the mark is drawn on. */
-  plate: string;
-  /** The colour exactly one element of the mark takes. */
-  accent: string;
-  /**
-   * The hairline a plate as light as the tile behind it needs, so it still
-   * reads as a plate rather than as a drawing floating on the row.
-   * @default undefined
-   */
-  edge?: string;
-}
+export type {
+  EcosystemSite,
+  SiteId,
+  SiteMarkColors,
+  SiteName,
+} from './types.ts';
 
 /**
  * Every site of the family, each with the two colours it owns. The marks that
@@ -80,6 +19,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'learn.cheminfo.org',
     repository: 'https://github.com/cheminfo/learn.cheminfo.org',
     tagline: 'Arrange the tools into a course and hand out its link.',
+    group: 'computing',
     brand: '#0d9488',
     brandAlt: '#b45309',
     mark: { plate: '#0d9488', accent: '#f59e0b' },
@@ -90,6 +30,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'inchi.cheminfo.org',
     repository: 'https://github.com/cheminfo/inchi.cheminfo.org',
     tagline: 'InChI and InChIKey from a structure, in the browser.',
+    group: 'structures',
     brand: '#5b21b6',
     brandAlt: '#a16207',
     mark: { plate: '#5b21b6', accent: '#fcd34d' },
@@ -100,6 +41,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'vcl.cheminfo.org',
     repository: 'https://github.com/cheminfo/vcl.cheminfo.org',
     tagline: 'Combine a core and fragments into a screened library.',
+    group: 'research',
     brand: '#2d72d2',
     brandAlt: '#9a3412',
     mark: { plate: '#2d72d2', accent: '#eb6847' },
@@ -110,16 +52,29 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'smiles.cheminfo.org',
     repository: 'https://github.com/cheminfo/smiles.cheminfo.org',
     tagline: 'Draw a structure, read its SMILES, learn the notation.',
+    group: 'structures',
     brand: '#1c6e42',
     brandAlt: '#9a3412',
     mark: { plate: '#1c6e42', accent: '#ea580c' },
   },
+  {
+    id: 'openbabel',
+    name: { lead: 'openbabel', alt: 'cheminfo', dot: true },
+    host: 'openbabel.cheminfo.org',
+    repository: 'https://github.com/cheminfo/openbabel.cheminfo.org',
+    tagline: 'Convert a structure between any pair of chemical file formats.',
+    group: 'structures',
+    brand: '#0f766e',
+    brandAlt: '#c2410c',
+    mark: { plate: '#0f766e', accent: '#fb923c' },
+  },
   {
     id: 'chemcalc',
     name: { lead: 'Chem', alt: 'Calc' },
     host: 'www.chemcalc.org',
     repository: 'https://github.com/cheminfo/chemcalc.org',
     tagline: 'Molecular formula, exact mass and isotopic distribution.',
+    group: 'basics',
     brand: '#5b52e0',
     brandAlt: '#d63384',
     mark: { plate: '#5b52e0', accent: '#ff8ac2' },
@@ -130,6 +85,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'www.nmrium.org',
     repository: 'https://github.com/cheminfo/nmrium',
     tagline: 'Process and assign NMR spectra in the browser.',
+    group: 'spectra',
     brand: '#ea580c',
     brandAlt: '#2b143e',
     mark: { plate: '#2b143e', accent: '#ea580c' },
@@ -143,19 +99,21 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'metabo.nmrium.com',
     repository: 'https://github.com/cheminfo/metabo',
     tagline: 'Turn a batch of NMR spectra into a map of your samples.',
+    group: 'spectra',
     brand: '#4d7c0f',
     brandAlt: '#b91c1c',
     mark: { plate: '#4d7c0f', accent: '#b91c1c' },
   },
   {
     id: 'derepflow',
-    name: { lead: 'Derep', alt: 'Flow' },
+    name: { lead: 'Derep', alt: 'Flow', ink: 'lead' },
     host: 'derepflow.cheminfo.org',
     repository: 'https://github.com/cheminfo/derepflow',
     tagline: 'Identify the constituents of a mixture from its ¹³C spectrum.',
-    brand: '#be185d',
-    brandAlt: '#0f766e',
-    mark: { plate: '#be185d', accent: '#0d9488' },
+    group: 'spectra',
+    brand: '#127ba3',
+    brandAlt: '#1e293b',
+    mark: { plate: '#1e293b', accent: '#127ba3' },
   },
   {
     id: 'surge',
@@ -163,6 +121,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'surge.cheminfo.org',
     repository: 'https://github.com/cheminfo/surge.cheminfo.org',
     tagline: 'Every constitutional isomer of a molecular formula.',
+    group: 'structures',
     brand: '#4338ca',
     brandAlt: '#be123c',
     mark: { plate: '#4338ca', accent: '#e11d48' },
@@ -173,6 +132,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'tex.cheminfo.org',
     repository: 'https://github.com/cheminfo/tex.cheminfo.org',
     tagline: 'LaTeX formulas rendered to SVG or PNG from a URL.',
+    group: 'computing',
     brand: '#a21caf',
     brandAlt: '#a16207',
     mark: { plate: '#a21caf', accent: '#facc15' },
@@ -183,6 +143,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'lcao.cheminfo.org',
     repository: 'https://github.com/cheminfo/lcao.cheminfo.org',
     tagline: 'Combine atomic orbitals into molecular ones.',
+    group: 'basics',
     brand: '#1565c0',
     brandAlt: '#c62828',
     mark: { plate: '#ffffff', accent: '#c62828', edge: '#dfe3e8' },
@@ -193,6 +154,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'regexp.cheminfo.org',
     repository: 'https://github.com/cheminfo/regexp.cheminfo.org',
     tagline: 'Learn regular expressions in a live playground.',
+    group: 'computing',
     brand: '#1e3a8a',
     brandAlt: '#a16207',
     mark: { plate: '#1e3a8a', accent: '#fde047' },
@@ -203,6 +165,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'pdb.cheminfo.org',
     repository: 'https://github.com/cheminfo/pdb.cheminfo.org',
     tagline: 'A fast look at any Protein Data Bank entry.',
+    group: 'research',
     brand: '#2563eb',
     brandAlt: '#b45309',
     mark: { plate: '#2563eb', accent: '#fbbf24' },
@@ -213,6 +176,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'elucidation.cheminfo.org',
     repository: 'https://github.com/cheminfo/elucidation.cheminfo.org',
     tagline: 'A structure from a 1H NMR spectrum and a formula.',
+    group: 'spectra',
     brand: '#7e22ce',
     brandAlt: '#b45309',
     mark: { plate: '#7e22ce', accent: '#f59e0b' },
@@ -223,6 +187,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'equilibrium.cheminfo.org',
     repository: 'https://github.com/cheminfo/equilibrium.cheminfo.org',
     tagline: 'Chemical equilibria: pH, speciation and titration curves.',
+    group: 'basics',
     brand: '#0b5754',
     brandAlt: '#a56600',
     mark: { plate: '#0b5754', accent: '#f2a71b' },
@@ -233,6 +198,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'polycarp.cheminfo.org',
     repository: 'https://github.com/cheminfo/polycarp.cheminfo.org',
     tagline: 'Predict the microstructure of a radical copolymerisation.',
+    group: 'research',
     brand: '#701a75',
     brandAlt: '#4d7c0f',
     mark: { plate: '#701a75', accent: '#a3e635' },
@@ -243,6 +209,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: '3d.cheminfo.org',
     repository: 'https://github.com/cheminfo/3d.cheminfo.org',
     tagline: 'Conformers in 3D from a structure you draw.',
+    group: 'structures',
     brand: '#155e75',
     brandAlt: '#b45309',
     mark: { plate: '#155e75', accent: '#f97316' },
@@ -253,6 +220,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'periodic-table.cheminfo.org',
     repository: 'https://github.com/cheminfo/periodic-table.cheminfo.org',
     tagline: 'The periodic table, coloured, plotted and taken apart.',
+    group: 'basics',
     brand: '#15803d',
     brandAlt: '#a16207',
     mark: { plate: '#15803d', accent: '#fbbf24' },
@@ -263,6 +231,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'database.cheminfo.org',
     repository: 'https://github.com/cheminfo/database.cheminfo.org',
     tagline: 'Query a real chemical dataset in SQL and in Mango.',
+    group: 'research',
     brand: '#7c2d12',
     brandAlt: '#0b6e85',
     mark: { plate: '#7c2d12', accent: '#06b6d4' },

package/src/ecosystem/core/tokens.ts

@@ -30,17 +30,6 @@ export function siteTokensCss(id: SiteId): string {
   return `:root {\n  ${declarations.join('\n  ')}\n}\n`;
 }
 
-/**
- * What a browser paints its own chrome with on that site — the address bar on
- * Android, the title bar of an installed page — which is the site's leading
- * colour.
- * @param id - The site whose colour is wanted.
- * @returns The colour, as the `<meta name="theme-color">` content.
- */
-export function siteThemeColor(id: SiteId): string {
-  return siteById(id).brand;
-}
-
 // The second colour as the site's mark draws it: on the accent element, unless
 // the mark inverts the pair and gives the plate the answering colour instead.
 function answeringColor(site: EcosystemSite): string {