Diagram generator

a.ts

function tmap<T, U>(f : (x : T) => U, xss: T[][]): U[][] {
  return xss.map(xs => xs.map(x => f(x)));
}

function table<T>(xss: string[][], extra? : string): string {
  const es = extra || '';
  let buf = `<table ${es}>`;
  xss.forEach(xs => {
	 buf += "<tr>";
	 xs.forEach(x => {
		buf += "<td>";
		buf += x;
		buf += "</td>";
	 });
	 buf += "</tr>";
  });
  buf += "</table>";
  return buf;
}

function iter(xss : Points): Points {
  return xss.map(xs => darr.concat(xs)).concat(xss.map(xs => earr.concat(xs)));
}

function cross(xss: Points, yss: Points): Points[][] {
  return xss.map(xs => yss.map(ys => [xs, ys]));
}

function counterexample_func(x: Obj, y: Obj, a: Obj, b: Obj): boolean {
  // This is a particular functor of type
  //     A^op x A^op x A x A -> Set
  // where A is the arrow category d -> e.
  //
  // x and y are the two contravariant args, a and b are the two covariant args
  return (x == 'd' && y == 'd') || (a == 'e' && b == 'e');
}
type Cell<T> = {enabled: boolean, lets: T[][]};

type Obj = 'd' | 'e';
const darr: Obj[] = ['d'];
const earr: Obj[] = ['e'];
type Points = Obj[][];
const t: Points = iter(iter(iter([[]])));
const u: Points[][] = cross(t, t);

const u2 : Cell<Obj>[][] = tmap(lets => {
  // F^{ab}_{ac}
  //                                        ^  a        ^  b        _  a        _  c
  const enabled1 = counterexample_func(lets[0][0], lets[0][1], lets[1][0], lets[1][2]);
  // F^{ac}_{ab}
  //                                        ^  a        ^  c        _  a        _  b
  const enabled2 = counterexample_func(lets[0][0], lets[0][2], lets[1][0], lets[1][1]);

  const enabled = enabled1 && enabled2;
  return {enabled, lets};
}, u);

const v1: Cell<string>[][] = tmap(z => ({enabled: z.enabled,
													  lets: tmap(x => x == 'd' ? 'd' : '<span style="color:#99f">e</span>', z.lets)}), u2);
const v2: string[][] = tmap(z => {
  let buf = table(z.lets);
  if (z.enabled)
	 buf = `<div class="enabled">${buf}</span>`;
  return buf;
}, v1);
const w: string = table(v2, "class=main");

console.log(`
<style>
.enabled {
background-color: #def;
}
table {
border-spacing: 0px;
}
table.main {
border-spacing: 20px;
}
</style>`);
console.log(w);


/*

The diagram this outputs depicts the functor

    F^{ab}_{ac} x F^{ac}_{ab}

over three bivariant variables a, b, c over the arrow category d -> e.
Each cell

    abc
    abc

is filled in if
    abc
   F
    abc

has exactly one inhabitant, superscripts being contravariant, and
subscripts being covariant.

It looks like this:

1 1 1 1 1 1 1 1
. . . . . . 1 1
. . . . . 1 . 1
. . . . . . . 1
. . . . . . . 1
. . . . . . . 1
. . . . . . . 1
. . . . . . . 1

(with morphisms going hypercubically up and to the right)

if we take the coend along c we get

1 1 1 1
. . . 1
. . . 1
. . . 1

and if we take the coend along b we get

1 2
. 1

which has no end.

*/

// Here's the output:

/*

<style>
.enabled {
background-color: #def;
}
table {
border-spacing: 0px;
}
table.main {
border-spacing: 20px;
}
</style>
<table class=main><tr><td><div class="enabled"><table ><tr><td>d</td>
<td>d</td>
<td>d</td>
</tr><tr><td>d</td>
<td>d</td>
<td>d</td>
</tr></table></span></td>
<td><div class="enabled"><table ><tr><td>d</td>
<td>d</td>
<td>d</td>
</tr><tr><td>d</td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr></table></span></td>
<td><div class="enabled"><table ><tr><td>d</td>
<td>d</td>
<td>d</td>
</tr><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr></table></span></td>
<td><div class="enabled"><table ><tr><td>d</td>
<td>d</td>
<td>d</td>
</tr><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr></table></span></td>
<td><div class="enabled"><table ><tr><td>d</td>
<td>d</td>
<td>d</td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td>d</td>
</tr></table></span></td>
<td><div class="enabled"><table ><tr><td>d</td>
<td>d</td>
<td>d</td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr></table></span></td>
<td><div class="enabled"><table ><tr><td>d</td>
<td>d</td>
<td>d</td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr></table></span></td>
<td><div class="enabled"><table ><tr><td>d</td>
<td>d</td>
<td>d</td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr></table></span></td>
</tr><tr><td><table ><tr><td>d</td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td>d</td>
<td>d</td>
<td>d</td>
</tr></table></td>
<td><table ><tr><td>d</td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td>d</td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr></table></td>
<td><table ><tr><td>d</td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr></table></td>
<td><table ><tr><td>d</td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr></table></td>
<td><table ><tr><td>d</td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td>d</td>
</tr></table></td>
<td><table ><tr><td>d</td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr></table></td>
<td><div class="enabled"><table ><tr><td>d</td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr></table></span></td>
<td><div class="enabled"><table ><tr><td>d</td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr></table></span></td>
</tr><tr><td><table ><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr><tr><td>d</td>
<td>d</td>
<td>d</td>
</tr></table></td>
<td><table ><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr><tr><td>d</td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr></table></td>
<td><table ><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr></table></td>
<td><table ><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr></table></td>
<td><table ><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td>d</td>
</tr></table></td>
<td><div class="enabled"><table ><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr></table></span></td>
<td><table ><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr></table></td>
<td><div class="enabled"><table ><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr></table></span></td>
</tr><tr><td><table ><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td>d</td>
<td>d</td>
<td>d</td>
</tr></table></td>
<td><table ><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td>d</td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr></table></td>
<td><table ><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr></table></td>
<td><table ><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr></table></td>
<td><table ><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td>d</td>
</tr></table></td>
<td><table ><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr></table></td>
<td><table ><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr></table></td>
<td><div class="enabled"><table ><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr></table></span></td>
</tr><tr><td><table ><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td>d</td>
</tr><tr><td>d</td>
<td>d</td>
<td>d</td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td>d</td>
</tr><tr><td>d</td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td>d</td>
</tr><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td>d</td>
</tr><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td>d</td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td>d</td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td>d</td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td>d</td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr></table></td>
<td><div class="enabled"><table ><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td>d</td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr></table></span></td>
</tr><tr><td><table ><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td>d</td>
<td>d</td>
<td>d</td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td>d</td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td>d</td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr></table></td>
<td><div class="enabled"><table ><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr></table></span></td>
</tr><tr><td><table ><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr><tr><td>d</td>
<td>d</td>
<td>d</td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr><tr><td>d</td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td>d</td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr></table></td>
<td><div class="enabled"><table ><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr></table></span></td>
</tr><tr><td><table ><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td>d</td>
<td>d</td>
<td>d</td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td>d</td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td>d</td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td>d</td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td>d</td>
<td><span style="color:#99f">e</span></td>
</tr></table></td>
<td><table ><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td>d</td>
</tr></table></td>
<td><div class="enabled"><table ><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr><tr><td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
<td><span style="color:#99f">e</span></td>
</tr></table></span></td>
</tr></table>

*/