app/enhance/cv.ts

Functions

Imports

It imports app/lib/clipboard.ts, app/lib/cv/view.mjs. No module of this repo imports it.

Source

1import { enhance, type EnhancedChart, type SelectDetail } from "enarratio/enhance";
2
3import { copyText } from "~/lib/clipboard";
4import {
5  CHART_SERIES,
6  TIMELINE_ID,
7  activeCount,
8  facetCounts,
9  foldText,
10  formatDollars,
11  groupEntries,
12  headline,
13  isFiltered,
14  matches,
15  parseState,
16  stateToSearch,
17  summaryText,
18  type CvState,
19  type Facts,
20} from "~/lib/cv/view.mjs";
21
22/*
23 * The CV, live. The server already rendered every entry, the counts, the charts and the form for the
24 * URL's filters (app/routes/cv.tsx), so with script off the page is complete and the form is a plain
25 * GET. This runs the same functions (app/lib/cv/view.mjs, app/lib/cv/render-charts.ts) on every input
26 * instead of a round trip, and writes the state to the URL, so a copied address opens the same view.
27 */
28
29function must(root: Document | HTMLElement, selector: string): HTMLElement {
30  const found = root.querySelector<HTMLElement>(selector);
31  if (!found) throw new Error(`cv: the page has no ${selector}; app/routes/cv.tsx and this module disagree.`);
32  return found;
33}
34
35const root = must(document, "[data-cv]");
36const formElement = must(root, "form[data-cv-form]");
37if (!(formElement instanceof HTMLFormElement)) throw new Error("cv: [data-cv-form] is not a form.");
38const form: HTMLFormElement = formElement;
39const results = must(root, "[data-cv-results]");
40const summary = must(root, "[data-cv-summary]");
41const copied = must(root, "[data-cv-copied]");
42const timelineHost = must(root, "[data-cv-timeline]");
43const clear = must(root, "[data-cv-clear]");
44const PATH = form.getAttribute("action") ?? location.pathname;
45
46const items = new Map<string, HTMLLIElement>();
47for (const li of root.querySelectorAll<HTMLLIElement>("li[data-cv-entry]")) items.set(li.id, li);
48
49/** The group notes (talk totals, the mentoring rule) travel with their group when the sort changes. */
50const notes = new Map<string, Element>();
51for (const note of root.querySelectorAll(".cv-group-note")) {
52  const key = note.closest("[data-cv-group]")?.getAttribute("data-cv-group");
53  if (key) notes.set(key, note);
54}
55
56function numberOr(value: string | undefined, fallback: number | null) {
57  return value === undefined || value === "" ? fallback : Number(value);
58}
59
60const facts: Facts[] = [...items.values()]
61  .map((li) => {
62    const d = li.dataset;
63    const end = d.end;
64    return {
65      id: li.id,
66      type: d.type as Facts["type"],
67      section: d.section ?? null,
68      areas: (d.areas ?? "").split(" ").filter(Boolean) as Facts["areas"],
69      role: (d.role ?? null) as Facts["role"],
70      year: numberOr(d.year, null),
71      endYear: end === "present" ? ("present" as const) : numberOr(end, null),
72      students: numberOr(d.students, null),
73      cohort: d.cohort !== undefined,
74      amount: numberOr(d.amount, null),
75      order: Number(d.order),
76      search: foldText(li.textContent ?? ""),
77    };
78  })
79  .sort((a, b) => a.order - b.order);
80
81function readState(): CvState {
82  const params = new URLSearchParams();
83  for (const [key, value] of new FormData(form)) params.append(key, String(value));
84  return parseState(params);
85}
86
87let currentSort = readState().sort;
88
89function el(tag: string, className: string, attrs: Record<string, string> = {}) {
90  const node = document.createElement(tag);
91  node.className = className;
92  for (const [k, v] of Object.entries(attrs)) node.setAttribute(k, v);
93  return node;
94}
95
96/** Moves the existing entries into the new grouping; nothing is re-rendered, so open details stay open. */
97function regroup(sort: CvState["sort"]) {
98  const fragment = document.createDocumentFragment();
99  for (const group of groupEntries(facts, sort)) {
100    const section = el("section", "cv-group", { "data-cv-group": group.key });
101    const title = el("h2", "cv-group-title");
102    title.appendChild(document.createTextNode(`${group.heading} `));
103    title.appendChild(el("span", "cv-group-count", { "data-cv-group-count": "" }));
104    section.appendChild(title);
105    const note = notes.get(group.key);
106    if (note) section.appendChild(note);
107    for (const part of group.parts) {
108      const wrap = el("div", "cv-part", { "data-cv-part": part.key });
109      if (part.heading) {
110        const h3 = el("h3", "cv-part-title");
111        h3.textContent = part.heading;
112        wrap.appendChild(h3);
113      }
114      const list = el("ol", "cv-list");
115      for (const id of part.ids) {
116        const li = items.get(id);
117        if (!li) throw new Error(`cv: grouping named an entry the page does not have: ${id}`);
118        list.appendChild(li);
119      }
120      wrap.appendChild(list);
121      section.appendChild(wrap);
122    }
123    fragment.appendChild(section);
124  }
125  results.replaceChildren(fragment);
126  currentSort = sort;
127}
128
129function setText(selector: string, text: string) {
130  for (const node of root.querySelectorAll(selector)) node.textContent = text;
131}
132
133/* Enarratio's layer: bar links become keyboard filter buttons with details on hover and focus. */
134/*
135 * A filter that leaves nothing to chart is answered with one sentence marked data-cv-timeline-empty in place of
136 * the figure (app/lib/cv/charts.ts), so the chart is absent then and comes back when a filter selects something.
137 */
138const EMPTY = "[data-cv-timeline-empty]";
139let timeline: EnhancedChart | undefined = enhance().find((chart) => chart.figure.id === TIMELINE_ID);
140if (!timeline && !timelineHost.querySelector(EMPTY)) throw new Error("cv: the timeline is not an Enarratio figure.");
141
142const TYPE_BY_LABEL = new Map(CHART_SERIES.map(([id, label]) => [label as string, id as string]));
143const LABEL_BY_TYPE = new Map(CHART_SERIES.map(([id, label]) => [id as string, label as string]));
144timeline?.setFilter(chartFilter(readState()));
145
146/**
147 * The filter the chart itself shows for a state: one year as Enarratio's year filter, else one charted
148 * type as its key's pressed entry. A range, or several types, shows as the faded bars alone.
149 */
150function chartFilter(state: CvState): { field: string; value: string } | null {
151  if (state.from !== null && state.from === state.to) return { field: "year", value: String(state.from) };
152  if (state.types.length === 1) {
153    const label = LABEL_BY_TYPE.get(state.types[0] ?? "");
154    if (label) return { field: "type", value: label };
155  }
156  return null;
157}
158
159/** The request in flight; a newer filter aborts it, so an old answer never lands over a new one. */
160let pending: AbortController | null = null;
161
162/*
163 * The charts come from /cv/charts.json, drawn on the server by the same function as the page's, so
164 * this bundle carries no renderer. A failed fetch leaves the last charts up and throws, so it is seen.
165 */
166function drawCharts(state: CvState) {
167  pending?.abort();
168  const controller = new AbortController();
169  pending = controller;
170  const width = timelineHost.clientWidth;
171  const params = new URLSearchParams(stateToSearch(state).slice(1));
172  if (width > 0) params.set("w", String(width));
173  fetch(`${PATH}/charts.json?${params}`, { signal: controller.signal })
174    .then((response) => {
175      if (!response.ok) throw new Error(`cv: ${PATH}/charts.json answered ${response.status}.`);
176      return response.json() as Promise<Record<"timeline" | "papers" | "grants" | "students", string>>;
177    })
178    .then((charts) => {
179      if (controller.signal.aborted) return;
180      // Neither fires enarratio:select, only a reader's own choice does, and update() keeps focus.
181      drawTimeline(charts.timeline, state);
182      for (const name of ["papers", "grants", "students"] as const) {
183        const host = root.querySelector(`[data-cv-spark="${name}"]`);
184        if (host) host.innerHTML = charts[name];
185      }
186      // What the drawn charts answer to. The URL is written before they arrive, so it cannot say they are here.
187      timelineHost.dataset.cvDrawn = stateToSearch(state);
188    })
189    .catch((error: unknown) => {
190      if (error instanceof DOMException && error.name === "AbortError") return;
191      throw error;
192    });
193}
194
195/** The figure is updated in place when there is one, and made again when the sentence stood in its place. */
196function drawTimeline(markup: string, state: CvState) {
197  if (markup.includes("data-cv-timeline-empty")) {
198    timeline?.destroy();
199    timeline = undefined;
200    timelineHost.innerHTML = markup;
201    return;
202  }
203  if (timeline) {
204    timeline.update(markup);
205  } else {
206    timelineHost.innerHTML = markup;
207    timeline = enhance().find((chart) => chart.figure.id === TIMELINE_ID);
208    if (!timeline) throw new Error("cv: the timeline is not an Enarratio figure.");
209  }
210  timeline.setFilter(chartFilter(state));
211}
212
213let announceTimer = 0;
214
215function apply(state: CvState, options: { announceNow?: boolean } = {}) {
216  if (state.sort !== currentSort) regroup(state.sort);
217
218  const shown: Facts[] = [];
219  for (const f of facts) {
220    const visible = matches(f, state);
221    const li = items.get(f.id);
222    if (li) li.hidden = !visible;
223    if (visible) shown.push(f);
224  }
225
226  for (const part of results.querySelectorAll<HTMLElement>("[data-cv-part]")) {
227    part.hidden = !part.querySelector("li[data-cv-entry]:not([hidden])");
228  }
229  for (const group of results.querySelectorAll<HTMLElement>("[data-cv-group]")) {
230    const n = group.querySelectorAll("li[data-cv-entry]:not([hidden])").length;
231    group.hidden = n === 0;
232    const count = group.querySelector("[data-cv-group-count]");
233    if (count) count.textContent = String(n);
234  }
235
236  const counts = headline(shown);
237  setText('[data-cv-count="papers"]', String(counts.papers));
238  setText('[data-cv-count="grants"]', String(counts.grants));
239  setText('[data-cv-count="students"]', String(counts.students));
240  setText('[data-cv-count="dollars"]', `${formatDollars(counts.dollars)} awarded`);
241
242  const facets = facetCounts(facts, state);
243  for (const node of root.querySelectorAll<HTMLElement>("[data-cv-facet]")) {
244    const [kind, id] = (node.dataset.cvFacet ?? "").split(":");
245    const table = kind === "type" ? facets.types : kind === "area" ? facets.areas : facets.roles;
246    const n = table[id ?? ""] ?? 0;
247    if (node instanceof HTMLOptionElement) node.textContent = `${node.dataset.label ?? id} (${n})`;
248    else node.textContent = String(n);
249  }
250
251  drawCharts(state);
252  clear.hidden = !isFiltered(state);
253  const on = activeCount(state);
254  setText("[data-cv-active]", on > 0 ? `(${on} on)` : "");
255
256  /* A status region re-read on every keystroke would talk over the reader; it settles first. */
257  window.clearTimeout(announceTimer);
258  const say = () => {
259    summary.textContent = summaryText(shown.length, facts.length);
260  };
261  if (options.announceNow) say();
262  else announceTimer = window.setTimeout(say, 450);
263
264  const url = `${PATH}${stateToSearch(state)}${location.hash}`;
265  window.history.replaceState(window.history.state, "", url);
266}
267
268/* Instant filtering, so the Apply button is only for script off. */
269for (const button of form.querySelectorAll<HTMLElement>("[data-cv-apply]")) button.hidden = true;
270form.addEventListener("submit", (event) => {
271  event.preventDefault();
272  apply(readState(), { announceNow: true });
273});
274
275let typing = 0;
276form.addEventListener("input", (event) => {
277  const target = event.target;
278  window.clearTimeout(typing);
279  if (target instanceof HTMLInputElement && target.type === "search") {
280    typing = window.setTimeout(() => apply(readState()), 120);
281  } else {
282    apply(readState());
283  }
284});
285
286clear.addEventListener("click", (event) => {
287  event.preventDefault();
288  form.reset();
289  for (const input of form.querySelectorAll<HTMLInputElement>("input[type=checkbox]")) input.checked = false;
290  for (const select of form.querySelectorAll("select")) {
291    select.value = select.name === "sort" ? currentSort : "";
292  }
293  const search = form.querySelector<HTMLInputElement>("input[type=search]");
294  if (search) search.value = "";
295  apply(readState(), { announceNow: true });
296});
297
298function setYears(from: number | null, to: number | null) {
299  const fromSelect = form.elements.namedItem("from");
300  const toSelect = form.elements.namedItem("to");
301  if (!(fromSelect instanceof HTMLSelectElement) || !(toSelect instanceof HTMLSelectElement)) {
302    throw new Error("cv: the form has no year selects.");
303  }
304  fromSelect.value = from === null ? "" : String(from);
305  toSelect.value = to === null ? "" : String(to);
306}
307
308/*
309 * Enarratio reports a reader's selection as `enarratio:select`. A bar filters by its year (field
310 * "year"); an entry in the key by its type (field "type"). Selecting the same one again, or Escape,
311 * reports a null value, which clears that filter.
312 */
313timelineHost.addEventListener("enarratio:select", (event: CustomEvent<SelectDetail>) => {
314  if (event.detail.chartId !== TIMELINE_ID) return;
315  const { field, value } = event.detail;
316  if (field === "year") {
317    const year = value === null ? null : Number(value);
318    setYears(year, year);
319  } else if (field === "type") {
320    const type = value === null ? null : (TYPE_BY_LABEL.get(value) ?? null);
321    for (const input of form.querySelectorAll<HTMLInputElement>('input[name="type"]')) {
322      input.checked = type !== null && input.value === type;
323    }
324  } else {
325    throw new Error(`cv: the timeline reported a filter on "${field}", which the CV does not have.`);
326  }
327  apply(readState(), { announceNow: true });
328});
329
330for (const hint of root.querySelectorAll<HTMLElement>("[data-cv-hint]")) hint.hidden = false;
331
332/* Copying a citation: the plain one is on the page, BibTeX and RIS come from the paper's export route. */
333async function citationText(button: HTMLElement): Promise<string> {
334  const kind = button.dataset.cvCopy;
335  const id = button.dataset.cvFor ?? "";
336  if (kind === "plain") return (document.getElementById(`${id}-cite`)?.textContent ?? "").trim();
337  const inline = document.getElementById(`${id}-${kind}`);
338  if (inline instanceof HTMLTemplateElement) return (inline.content.textContent ?? "").trim();
339  const src = button.dataset.cvSrc;
340  if (!src) throw new Error(`cv: no ${kind} source for ${id}.`);
341  const response = await fetch(src);
342  if (!response.ok) throw new Error(`cv: ${src} answered ${response.status}.`);
343  return (await response.text()).trim();
344}
345
346const COPY_NAMES: Record<string, string> = { plain: "Citation", bibtex: "BibTeX", ris: "RIS" };
347
348for (const button of root.querySelectorAll<HTMLButtonElement>("button[data-cv-copy]")) {
349  button.hidden = false;
350  button.addEventListener("click", () => {
351    const name = COPY_NAMES[button.dataset.cvCopy ?? ""] ?? "Text";
352    copied.textContent = "";
353    citationText(button)
354      .then((text) => copyText(text))
355      .then(() => {
356        copied.textContent = `${name} copied.`;
357        button.dataset.copied = "";
358        window.setTimeout(() => delete button.dataset.copied, 1600);
359      })
360      .catch((error: unknown) => {
361        copied.textContent = `${name} was not copied. The file links beside the button download it.`;
362        throw error;
363      });
364  });
365}
366
367for (const button of root.querySelectorAll<HTMLButtonElement>("[data-cv-print]")) {
368  button.hidden = false;
369  button.addEventListener("click", () => window.print());
370}
371
372/*
373 * On a phone the filters fold behind their summary, open only when a filter is on; wider, they are
374 * always open and the summary is not shown. Script off, they stay open everywhere.
375 */
376const more = root.querySelector("details[data-cv-more]");
377if (more instanceof HTMLDetailsElement) {
378  const narrow = window.matchMedia("(max-width: 40rem)");
379  const fit = () => {
380    more.open = !narrow.matches || activeCount(readState()) > 0;
381  };
382  narrow.addEventListener("change", fit);
383  fit();
384}
385
386/* Redrawn at the container's width so the axis type is drawn at size, then on resize. */
387let resizing = 0;
388let drawnWidth = 0;
389const redraw = () => {
390  const width = timelineHost.clientWidth;
391  if (width === 0 || Math.abs(width - drawnWidth) < 8) return;
392  drawnWidth = width;
393  drawCharts(readState());
394};
395new ResizeObserver(() => {
396  window.clearTimeout(resizing);
397  resizing = window.setTimeout(redraw, 120);
398}).observe(timelineHost);
399redraw();
400
401root.dataset.cvEnhanced = "";