mponent.
  if (!data.Components.Names) { // undefined, null, or empty
    data.Components.Names = ["default"];
  }
  if (!data.Components.Assignments) { // undefined, null, or empty
    data.Components.Assignments = {};
  }

  // Rebuild list of components.
  const componentsContainer = document.getElementById('components');
  componentsContainer.replaceChildren(); // clear out previous state
  const assignSelect = document.getElementById('assign-select');
  assignSelect.replaceChildren(); // clear out previous state
  const componentsList = document.createElement('ul');
  componentsContainer.appendChild(componentsList);
  data.Components.Names.forEach((name, i) => {
      // <li>■ name ×
    const li = document.createElement('li');
    li.index = i; // custom index field holds component index (for onClickDeleteComponent)
    componentsList.appendChild(li);

    // ■ name
    const span = document.createElement('span');
    span.className = 'component';
    span.style.color = componentColors[i % componentColors.length];
    span.append('■ ', name)
    li.append(span);

    // ×
    if (i > 0) { // the default component cannot be deleted
      const xSpan = document.createElement('span');
      xSpan.className = 'delete';
      xSpan.append(' ×')
      xSpan.addEventListener('click', onClickDeleteComponent);
      li.append(xSpan);
    }

    // Add component to the assignment dropdown.
    assignSelect.add(new Option(name, null));
  })

  // Rebuild list of decls grouped by file.
  const filesContainer = document.getElementById('files');
  filesContainer.replaceChildren(); // clear out previous state
  data.Files.forEach(fileJson => {
    filesContainer.appendChild(createFileDiv(fileJson));
  });

  // Display strongly connected components.
  const deps = document.getElementById('deps');
  deps.replaceChildren(); // clear out previous state
  const depsList = document.createElement('ul');
  deps.append(depsList);

  // Be explicit if there are no component dependencies.
  if (data.Edges.length == 0) {
    const li = document.createElement('li');
    depsList.append(li);
    li.append("No dependencies");
    return;
  }

  // List all sets of mutually dependent components.
  data.Cycles.forEach((scc) => {
    const item = document.createElement('li');
    item.append("⚠ Component cycle: " +
		scc.map(index => data.Components.Names[index]).join(', '))
    depsList.append(item);
  })

  // Show intercomponent edges.
  data.Edges.forEach((edge) => {
    const edgeItem = document.createElement('li');
    depsList.append(edgeItem);

    // component edge
    const from = data.Components.Names[edge.From];
    const to   = data.Components.Names[edge.To];
    edgeItem.append((edge.Cyclic ? "⚠ " : "") + from + " ➤ " + to);

    // sublist of symbol references that induced the edge
    const refsList = document.createElement('ul');
    edgeItem.appendChild(refsList);
    refsList.className = 'refs-list';
    edge.Refs.forEach(ref => {
      refsList.appendChild(createRefItem(ref));
    });
  })
}

/**
 * makeURL returns a URL string with the specified path,
 * but preserving the current page's query parameters (view, pkg).
 */
function makeURL(path) {
  const url = new URL(window.location.href);
  url.pathname = url.pathname.substring(0, url.pathname.lastIndexOf('/')) + path;
  return url.href;
}

/** createFileDiv creates a <div> for a fileJSON object. */
function createFileDiv(fileData) {
  // Create the main container for the file entry.
  const fileContainer = document.createElement('div');
  fileContainer.className = 'file-node';

  // Create and append the file's base name as a para.
  const para = document.createElement('p');
  fileContainer.appendChild(para);

  // The file's checkbox applies in bulk to all specs within it.
  var specCheckboxes = [];
  const fileCheckbox = document.createElement('input');
  fileCheckbox.type = 'checkbox';
  fileCheckbox.addEventListener('click', (event) => {
    // Select/deselect all specs belonging to the file.
    const checked = event.target.checked;
    specCheckboxes.forEach(checkbox => {
      checkbox.checked = checked;
    });
  })
  para.appendChild(fileCheckbox);
  para.append("File ");

  // Link file name to start of file.
  const baseName = document.createElement('a');
  para.appendChild(baseName);
  baseName.className = 'file-link';
  baseName.textContent = fileData.Base;
  baseName.addEventListener('click', () => httpGET(fileData.URL));

  // Process declarations if they exist.
  if (fileData.Decls && fileData.Decls.length > 0) {
    const declsList = document.createElement('ul');
    declsList.className = 'decls-list';
    // For now we flatten out the decl/spec grouping.
    fileData.Decls.forEach(decl => {
      if (decl.Specs && decl.Specs.length > 0) {
        decl.Specs.forEach(spec => {
          declsList.appendChild(createSpecItem(decl.Kind, spec, specCheckboxes));
        });
      }
    });
    fileContainer.appendChild(declsList);
  }

  return fileContainer;
}

/** createSpecItem creates an <li> element for a specJSON object (one declared name). */
function createSpecItem(kind, specData, checkboxes) {
  // <li><checkbox/>ⓕ <a>myfunc</a>...
  const specItem = document.createElement('li');
  specItem.className = 'spec-node';
  specItem.dataset.name = specData.Name; // custom .name field holds symbol's unique logical name

  // First child is a checkbox.
  const specCheckbox = document.createElement('input');
  specCheckbox.type = 'checkbox';
  specItem.appendChild(specCheckbox);
  checkboxes.push(specCheckbox);

  // Next is the component assignment color swatch.
  const assignSpan = document.createElement('span');
  assignSpan.className = 'component-swatch';
  assignSpan.textContent = "■";
  {
    var index = data.Components.Assignments[specData.Name]; // may be undefined
    if (!index) {
      index = 0; // default
    }
    assignSpan.style.color = componentColors[index % componentColors.length];
    assignSpan.title = "Component " + data.Components.Names[index]; // tooltip
  }
  specItem.appendChild(assignSpan);

  // Encircle the func/var/const/type indicator.
  const symbolSpan = document.createElement('span');
  const symbol = String.fromCodePoint(kind.codePointAt(0) - 'a'.codePointAt(0) + 'ⓐ'.codePointAt(0));
  symbolSpan.title = kind; // tooltip
  symbolSpan.append(`${symbol} `);
  specItem.append(symbolSpan);

  // Link name to declaration.
  const specName = document.createElement('a');
  specItem.appendChild(specName);
  specName.textContent = ` ${specData.Name}`;
  specName.addEventListener('click', () => httpGET(specData.URL));

  return specItem;
}

/** createRefItem creates an <li> element for a refJSON object (a reference). */
function createRefItem(refData) {
  const refItem = document.createElement('li');
  refItem.className = 'ref-node';

  // Link (from -> to) to the reference in from.
  const refLink = document.createElement('a');
  refItem.appendChild(refLink);
  refLink.addEventListener('click', () => httpGET(refData.URL));
  refLink.textContent = "${refData.From} ➤ ${refData.To}";

  return refItem;
}

/** componentColors is a palette of dark, high-contrast colors. */
const componentColors = [
  "#298429",
  "#4B4B8F",
  "#AD2C2C",
  "#A62CA6",
  "#6E65AF",
  "#D15050",
  "#2CA6A6",
  "#C55656",
  "#7B8C58",
  "#587676",
  "#B95EE1",
  "#AF6D41",
];
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>

body {
    font-size: 14px;
    font-family: Arial, sans-serif;
}

h1 {
    font-size: 18px;
    display: inline-block;
    margin: 0 1em .5em 0;
}

#helplink {
    display: inline-block;
}

#help {
    display: none;
}

.stats {
    font-size: 60%;
}

table {
    border: 1px solid black;
    table-layout: fixed;
    width: 300px;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    width: 400px;
    vertical-align: top;
    padding: 5px;
}

td > h2 {
    cursor: pointer;
    font-size: 120%;
}

td.collapsed {
    font-size: 12px;
    width: 12px;
    border: 0px;
    padding: 0;
    cursor: pointer;
    background: #fafafa;
}

td.collapsed  div {
     -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
       -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
         margin-top: 10.3em;
         margin-left: -10em;
         margin-right: -10em;
         text-align: right;
}

code, pre, .lines, .ast {
    font-family: Menlo, monospace;
    font-size: 12px;
}

pre {
    -moz-tab-size: 4;
    -o-tab-size:   4;
    tab-size:      4;
}

.allow-x-scroll {
    overflow-x: scroll;
}

.lines {
    float: left;
    overflow: hidden;
    text-align: right;
}

.lines div {
    padding-right: 10px;
    color: gray;
}

div.line-number {
    font-size: 12px;
}

.ast {
    white-space: nowrap;
}

td.ssa-prog {
    width: 600px;
    word-wrap: break-word;
}

li {
    list-style-type: none;
}

li.ssa-long-value {
    text-indent: -2em;  /* indent wrapped lines */
}

li.ssa-value-list {
    display: inline;
}

li.ssa-start-block {
    padding: 0;
    margin: 0;
}

li.ssa-end-block {
    padding: 0;
    margin: 0;
}

ul.ssa-print-func {
    padding-left: 0;
}

li.ssa-start-block button {
    padding: 0 1em;
    margin: 0;
    border: none;
    display: inline;
    font-size: 14px;
    float: right;
}

button:hover {
    background-color: #eee;
    cursor: pointer;
}

dl.ssa-gen {
    padding-left: 0;
}

dt.ssa-prog-src {
    padding: 0;
    margin: 0;
    float: left;
    width: 4em;
}

dd.ssa-prog {
    padding: 0;
    margin-right: 0;
    margin-left: 4em;
}

.dead-value {
    color: gray;
}

.dead-block {
    opacity: 0.5;
}

.depcycle {
    font-style: italic;
}

.line-number {
    font-size: 11px;
}

.no-line-number {
    font-size: 11px;
    color: gray;
}

.zoom {
	position: absolute;
	float: left;
	white-space: nowrap;
	background-color: #eee;
}

.zoom a:link, .zoom a:visited  {
    text-decoration: none;
    color: blue;
    font-size: 16px;
    padding: 4px 2px;
}

svg {
    cursor: default;
    outline: 1px solid #eee;
}

.highlight-aquamarine     { background-color: aquamarine; }
.highlight-coral          { background-color: coral; }
.highlight-lightpink      { background-color: lightpink; }
.highlight-lightsteelblue { background-color: lightsteelblue; }
.highlight-palegreen      { background-color: palegreen; }
.highlight-skyblue        { background-color: skyblue; }
.highlight-lightgray      { background-color: lightgray; }
.highlight-yellow         { background-color: yellow; }
.highlight-lime           { background-color: lime; }
.highlight-khaki          { background-color: khaki; }
.highlight-aqua           { background-color: aqua; }
.highlight-salmon         { background-color: salmon; }

.outline-blue           { outline: blue solid 2px; }
.outline-red            { outline: red solid 2px; }
.outline-blueviolet     { outline: blueviolet solid 2px; }
.outline-darkolivegreen { outline: darkolivegreen solid 2px; }
.outline-fuchsia        { outline: fuchsia solid 2px; }
.outline-sienna         { outline: sienna solid 2px; }
.outline-gold           { outline: gold solid 2px; }
.outline-orangered      { outline: orangered solid 2px; }
.outline-teal           { outline: teal solid 2px; }
.outline-maroon         { outline: maroon solid 2px; }
.outline-black          { outline: black solid 2px; }

ellipse.outline-blue           { stroke-width: 2px; stroke: blue; }
ellipse.outline-red            { stroke-width: 2px; stroke: red; }
ellipse.outline-blueviolet     { stroke-width: 2px; stroke: blueviolet; }
ellipse.outline-darkolivegreen { stroke-width: 2px; stroke: darkolivegreen; }
ellipse.outline-fuchsia        { stroke-width: 2px; stroke: fuchsia; }
ellipse.outline-sienna         { stroke-width: 2px; stroke: sienna; }
ellipse.outline-gold           { stroke-width: 2px; stroke: gold; }
ellipse.outline-orangered      { stroke-width: 2px; stroke: orangered; }
ellipse.outline-teal           { stroke-width: 2px; stroke: teal; }
ellipse.outline-maroon         { stroke-width: 2px; stroke: maroon; }
ellipse.outline-black          { stroke-width: 2px; stroke: black; }

</style>

<script type="text/javascript">
// ordered list of all available highlight colors
var highlights = [
    "highlight-aquamarine",
    "highlight-coral",
    "highlight-lightpink",
    "highlight-lightsteelblue",
    "highlight-palegreen",
    "highlight-skyblue",
    "highlight-lightgray",
    "highlight-yellow",
    "highlight-lime",
    "highlight-khaki",
    "highlight-aqua",
    "highlight-salmon"
];

// state: which value is highlighted this color?
var highlighted = {};
for (var i = 0; i < highlights.length; i++) {
    highlighted[highlights[i]] = "";
}

// ordered list of all available outline colors
var outlines = [
    "outline-blue",
    "outline-red",
    "outline-blueviolet",
    "outline-darkolivegreen",
    "outline-fuchsia",
    "outline-sienna",
    "outline-gold",
    "outline-orangered",
    "outline-teal",
    "outline-maroon",
    "outline-black"
];

// state: which value is outlined this color?
var outlined = {};
for (var i = 0; i < outlines.length; i++) {
    outlined[outlines[i]] = "";
}

window.onload = function() {
    var ssaElemClicked = function(elem, event, selections, selected) {
        event.stopPropagation();

        // TODO: pushState with updated state and read it on page load,
        // so that state can survive across reloads

        // find all values with the same name
        var c = elem.classList.item(0);
        var x = document.getElementsByClassName(c);

        // if selected, remove selections from all of them
        // otherwise, attempt to add

        var remove = "";
        for (var i = 0; i < selections.length; i++) {
            var color = selections[i];
            if (selected[color] == c) {
                remove = color;
                break;
            }
        }

        if (remove != "") {
            for (var i = 0; i < x.length; i++) {
                x[i].classList.remove(remove);
            }
            selected[remove] = "";
            return;
        }

        // we're adding a selection
        // find first available color
        var avail = "";
        for (var i = 0; i < selections.length; i++) {
            var color = selections[i];
            if (selected[color] == "") {
                avail = color;
                break;
            }
        }
        if (avail == "") {
            alert("out of selection colors; go add more");
            return;
        }

        // set that as the selection
        for (var i = 0; i < x.length; i++) {
            x[i].classList.add(avail);
        }
        selected[avail] = c;
    };

    var ssaValueClicked = function(event) {
        ssaElemClicked(this, event, highlights, highlighted);
    };

    var ssaBlockClicked = function(event) {
        ssaElemClicked(this, event, outlines, outlined);
    };

    var ssavalues = document.getElementsByClassName("ssa-value");
    for (var i = 0; i < ssavalues.length; i++) {
        ssavalues[i].addEventListener('click', ssaValueClicked);
    }

    var ssalongvalues = document.getElementsByClassName("ssa-long-value");
    for (var i = 0; i < ssalongvalues.length; i++) {
        // don't attach listeners to li nodes, just the spans they contain
        if (ssalongvalues[i].nodeName == "SPAN") {
            ssalongvalues[i].addEventListener('click', ssaValueClicked);
        }
    }

    var ssablocks = document.getElementsByClassName("ssa-block");
    for (var i = 0; i < ssablocks.length; i++) {
        ssablocks[i].addEventListener('click', ssaBlockClicked);
    }

    var lines = document.getElementsByClassName("line-number");
    for (var i = 0; i < lines.length; i++) {
        lines[i].addEventListener('click', ssaValueClicked);
    }

    // Contains phase names which are expanded by default. Other columns are collapsed.
    var expandedDefault = [
        "start",
        "deadcode",
        "opt",
        "lower",
        "late deadcode",
        "regalloc",
        "genssa",
    ];

    function toggler(phase) {
        return function() {
            toggle_cell(phase+'-col');
            toggle_cell(phase+'-exp');
        };
    }

    function toggle_cell(id) {
        var e = document.getElementById(id);
        if (e.style.display == 'table-cell') {
            e.style.display = 'none';
        } else {
            e.style.display = 'table-cell';
        }
    }

    // Go through all columns and collapse needed phases.
    var td = document.getElementsByTagName("td");
    for (var i = 0; i < td.length; i++) {
        var id = td[i].id;
        var phase = id.substr(0, id.length-4);
        var show = expandedDefault.indexOf(phase) !== -1
        if (id.endsWith("-exp")) {
            var h2 = td[i].getElementsByTagName("h2");
            if (h2 && h2[0]) {
                h2[0].addEventListener('click', toggler(phase));
            }
        } else {
            td[i].addEventListener('click', toggler(phase));
        }
        if (id.endsWith("-col") && show || id.endsWith("-exp") && !show) {
            td[i].style.display = 'none';
            continue;
        }
        td[i].style.display = 'table-cell';
    }

    // find all svg block nodes, add their block classes
    var nodes = document.querySelectorAll('*[id^="graph_node_"]');
    for (var i = 0; i < nodes.length; i++) {
    	var node = nodes[i];
    	var name = node.id.toString();
    	var block = name.substring(name.lastIndexOf("_")+1);
    	node.classList.remove("node");
    	node.classList.add(block);
        node.addEventListener('click', ssaBlockClicked);
        var ellipse = node.getElementsByTagName('ellipse')[0];
        ellipse.classList.add(block);
        ellipse.addEventListener('click', ssaBlockClicked);
    }

    // make big graphs smaller
    var targetScale = 0.5;
    var nodes = document.querySelectorAll('*[id^="svg_graph_"]');
    // TODO: Implement smarter auto-zoom using the viewBox attribute
    // and in case of big graphs set the width and height of the svg graph to
    // maximum allowed.
    for (var i = 0; i < nodes.length; i++) {
    	var node = nodes[i];
    	var name = node.id.toString();
    	var phase = name.substring(name.lastIndexOf("_")+1);
    	var gNode = document.getElementById("g_graph_"+phase);
    	var scale = gNode.transform.baseVal.getItem(0).matrix.a;
    	if (scale > targetScale) {
    		node.width.baseVal.value *= targetScale / scale;
    		node.height.baseVal.value *= targetScale / scale;
    	}
    }
};

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if (e.style.display == 'block') {
        e.style.display = 'none';
    } else {
        e.style.display = 'block';
    }
}

function hideBlock(el) {
    var es = el.parentNode.parentNode.getElementsByClassName("ssa-value-list");
    if (es.length===0)
        return;
    var e = es[0];
    if (e.style.display === 'block' || e.style.display === '') {
        e.style.display = 'none';
        el.innerHTML = '+';
    } else {
        e.style.display = 'block';
        el.innerHTML = '-';
    }
}

// TODO: scale the graph with the viewBox attribute.
function graphReduce(id) {
    var node = document.getElementById(id);
    if (node) {
    		node.width.baseVal.value *= 0.9;
    		node.height.baseVal.value *= 0.9;
    }
    return false;
}

function graphEnlarge(id) {
    var node = document.getElementById(id);
    if (node) {
    		node.width.baseVal.value *= 1.1;
    		node.height.baseVal.value *= 1.1;
    }
    return false;
}

function makeDraggable(event) {
    var svg = event.target;
    if (window.PointerEvent) {
        svg.addEventListener('pointerdown', startDrag);
        svg.addEventListener('pointermove', drag);
        svg.addEventListener('pointerup', endDrag);
        svg.addEventListener('pointerleave', endDrag);
    } else {
        svg.addEventListener('mousedown', startDrag);
        svg.addEventListener('mousemove', drag);
        svg.addEventListener('mouseup', endDrag);
        svg.addEventListener('mouseleave', endDrag);
    }

    var point = svg.createSVGPoint();
    var isPointerDown = false;
    var pointerOrigin;
    var viewBox = svg.viewBox.baseVal;

    function getPointFromEvent (event) {
        point.x = event.clientX;
        point.y = event.clientY;

        // We get the current transformation matrix of the SVG and we inverse it
        var invertedSVGMatrix = svg.getScreenCTM().inverse();
        return point.matrixTransform(invertedSVGMatrix);
    }

    function startDrag(event) {
        isPointerDown = true;
        pointerOrigin = getPointFromEvent(event);
    }

    function drag(event) {
        if (!isPointerDown) {
            return;
        }
        event.preventDefault();

        var pointerPosition = getPointFromEvent(event);
        viewBox.x -= (pointerPosition.x - pointerOrigin.x);
        viewBox.y -= (pointerPosition.y - pointerOrigin.y);
    }

    function endDrag(event) {
        isPointerDown = false;
    }
}</script>

</head>