@contraagent/elements 0.6.2 → 0.7.1

package/src/graph/views/dag.ts

@@ -173,6 +173,7 @@ function node(h: GraphHost, n: GraphNode, parent: Rect | null) {
           : nothing}</span>
     </div>
     ${bar ? statusBar(h, n, group) : marks(h, group)}
+    ${n.expected ? html`<span class="expected" part="expected" aria-hidden="true" title=${n.expected.label}>${n.expected.text}</span>` : nothing}
     ${n.notes?.length ? html`<div class="ex" aria-hidden="true">${notes(n)}</div>` : nothing}
   </section>`;
 }
@@ -212,6 +213,7 @@ function mark(h: GraphHost, g: MarkGroup, s: Slot, i: number, tabStop: boolean,
   const { key, on } = h.lit();
   const hlKey = hlKeyOf(s);
   const lit = on !== null && ((s.series !== '' && s.series === key) || on.has(m.id));
+  const link = lit && on !== null && 'get' in on ? (on.get(m.id) ?? null) : null;
   const sel = h.selected === m.id ? 'sel' : '';
   const focus = (e: FocusEvent) => {
     h.hover = hlKey;
@@ -227,7 +229,7 @@ function mark(h: GraphHost, g: MarkGroup, s: Slot, i: number, tabStop: boolean,
   }
   const look = h.states[m.state];
   return html`<button type="button" class="mark ${lit ? 'on' : ''} ${sel}" part="mark" data-tone=${toneAttr(look?.tone)} data-shape=${look?.shape ?? nothing}
-    data-i=${i} data-n=${m.badge ?? nothing} tabindex=${tabStop ? 0 : -1}
+    data-link=${link ?? nothing} data-i=${i} data-n=${m.badge ?? nothing} tabindex=${tabStop ? 0 : -1}
     title=${m.tip ?? nothing}
     aria-label=${m.label} aria-pressed=${!!sel}
     @mouseenter=${() => (h.hover = hlKey)}

package/src/graph/views/foot.ts

@@ -59,7 +59,7 @@ const legendMark = (h: GraphHost, state: string, badge?: string) => {
 
 /**
  * What the view shows that needs a word: the states of the marks shown, a badge when a
- * mark shows one, the icons the host names, the edge styles when both are drawn, a
+ * mark shows one, the icons the host names, the edge styles when another than solid is drawn, a
  * cluster's return, and the mark of an item with an inner view.
  */
 function legend(h: GraphHost, mx: MarkMatrixInput | null) {
@@ -74,12 +74,15 @@ function legend(h: GraphHost, mx: MarkMatrixInput | null) {
   const shown = marks.filter((m): m is { state: string; badge: string | undefined } => m !== null);
   const present = new Set(shown.map((m) => m.state));
   const badge = shown.some((m) => m.badge);
-  const dashed = !mx && !flat && [...g.edges, ...g.stubs].some((e) => e.style === 'dashed');
+  const styles = new Set(!mx && !flat ? [...g.edges, ...g.stubs].map((e) => e.style) : []);
+  const edgeStyles = styles.size > 1 || (styles.size === 1 && !styles.has('solid')) ? (['solid', 'dotted', 'dashed'] as const).filter((s) => styles.has(s)) : [];
   const icons = new Set(mx ? mx.head.flat().flatMap((c) => c.icons ?? []) : g.nodes.flatMap((n) => n.icons ?? []));
   const cycles = !mx && !flat && g.clusters.some((c) => c.cycle);
   const inner = !mx && ((!flat && g.clusters.some((c) => c.drill)) || g.nodes.some((n) => n.drill));
   const first = Object.keys(h.states)[0] ?? '';
-  const line = (dash: boolean) => svg`<svg width="22" height="8" aria-hidden="true"><path d="M1,4 H21" stroke-dasharray=${dash ? '5 4' : 'none'}></path></svg>`;
+  const line = (style: 'solid' | 'dotted' | 'dashed') =>
+    svg`<svg width="22" height="8" aria-hidden="true"><path class=${style} d="M1,4 H21" stroke-dasharray=${style === 'dashed' ? '5 4' : style === 'dotted' ? '0.1 4' : 'none'}></path></svg>`;
+  const edgeWord = { solid: h.words.solidEdge, dotted: h.words.dottedEdge, dashed: h.words.dashedEdge };
   const items: LegendItem[] = [
     ...Object.entries(h.states)
       .filter(([s]) => present.has(s))
@@ -88,12 +91,7 @@ function legend(h: GraphHost, mx: MarkMatrixInput | null) {
     ...Object.entries(h.words.iconNames)
       .filter(([name]) => icons.has(name))
       .map(([name, label]) => ({ label, icon: h.renderIcon(name) })),
-    ...(dashed
-      ? [
-          { label: h.words.solidEdge, icon: line(false) },
-          { label: h.words.dashedEdge, icon: line(true) },
-        ]
-      : []),
+    ...edgeStyles.map((s) => ({ label: edgeWord[s], icon: line(s) })),
     ...(cycles
       ? [
           {

package/src/graph/views/node-table.ts

@@ -7,13 +7,13 @@ import { cycleIcon, innerIcon } from '../icons.js';
 import type { EdgeStyle, GraphInput, GraphNode } from '../types.js';
 import { notes } from './dag.js';
 
-/** The names of the nodes `n` is joined to: by a solid edge, by a dashed one, and the later ones. */
+/** The names of the nodes `n` is joined to: by a solid edge, a dotted one or a dashed one, and the later ones. */
 export function neighbours(
   n: GraphNode,
   g: Pick<GraphInput, 'edges' | 'stubs'>,
   nodes: ReadonlyMap<string, GraphNode>,
   inCluster: (label: string) => string,
-): { solid: string[]; dashed: string[]; later: string[] } {
+): { solid: string[]; dotted: string[]; dashed: string[]; later: string[] } {
   const label = (id: string) => {
     const x = nodes.get(id);
     return !x ? id : x.cluster ? inCluster(x.label) : x.label;
@@ -22,7 +22,7 @@ export function neighbours(
     ...g.stubs.filter((s) => s.to === n.id && s.style === style).map((s) => s.label),
     ...g.edges.filter((e) => e.to === n.id && e.style === style).map((e) => label(e.from)),
   ];
-  return { solid: into('solid'), dashed: into('dashed'), later: [...new Set(g.edges.filter((e) => e.from === n.id).map((e) => label(e.to)))] };
+  return { solid: into('solid'), dotted: into('dotted'), dashed: into('dashed'), later: [...new Set(g.edges.filter((e) => e.from === n.id).map((e) => label(e.to)))] };
 }
 
 /**
@@ -33,6 +33,7 @@ export function neighbours(
 export function nodeTable(h: GraphHost) {
   const g = h.drawn;
   const w = h.words;
+  const dotted = [...g.edges, ...g.stubs].some((e) => e.style === 'dotted');
   const dashed = [...g.edges, ...g.stubs].some((e) => e.style === 'dashed');
   const list = (xs: string[]) => w.list(xs) || w.none;
   // The frame keeps the drawing's height when the drawing of this graph was laid out (left to right); else the table's own, up to the frame's limit.
@@ -46,6 +47,7 @@ export function nodeTable(h: GraphHost) {
           <th scope="col" class="fit">${w.nameHeader}</th>
           <th scope="col" class="fit">${w.statusHeader}</th>
           <th scope="col">${w.solidHeader}</th>
+          ${dotted ? html`<th scope="col">${w.dottedHeader}</th>` : nothing}
           ${dashed ? html`<th scope="col">${w.dashedHeader}</th>` : nothing}
           <th scope="col">${w.laterHeader}</th>
         </tr>
@@ -72,6 +74,7 @@ export function nodeTable(h: GraphHost) {
             </th>
             <td class="fit st">${statusLine(n)}</td>
             <td class="rel"><span>${list(nb.solid)}</span></td>
+            ${dotted ? html`<td class="rel"><span>${list(nb.dotted)}</span></td>` : nothing}
             ${dashed ? html`<td class="rel"><span>${list(nb.dashed)}</span></td>` : nothing}
             <td class="rel"><span>${list(nb.later)}</span></td>
           </tr>`;