Migrating HTML reprs to jinja2

[jacobtomlinson]

This PR starts the task of migrating HTML reprs over to use Jinja2 templates instead of multiline strings. There should be no changes to the reprs themselves but they should be easier to create and more maintainable going forwards.

Before

Currently we construct HTML within Python strings

class HasWhat(dict):
    """A dictionary of all workers and which keys that worker has."""

    def _repr_html_(self):
        rows = ""

        for worker, keys in sorted(self.items()):
            summary = ""
            for key in keys:
                summary += f"""<tr><td>{key}</td></tr>"""

            rows += f"""<tr>
            <td>{worker}</td>
            <td>{len(keys)}</td>
            <td>
                <details>
                <summary style='display:list-item'>Expand</summary>
                <table>
                {summary}
                </table>
                </details>
            </td>
        </tr>"""

        output = f"""
        <table>
        <tr>
            <th>Worker</th>
            <th>Key count</th>
            <th>Key list</th>
        </tr>
        {rows}
        </table>
        """

        return output

After

Instead we can use the new distributed.widgets submodule to render this from a template.

from distributed.widgets import get_template

class HasWhat(dict):
    """A dictionary of all workers and which keys that worker has."""

    def _repr_html_(self):
        return get_template("has_what.html.j2").render(has_what=self)

And the template itself gets placed in distributed/widgets/templates and is much more readable.

<table>
<tr>
    <th>Worker</th>
    <th>Key count</th>
    <th>Key list</th>
</tr>
{% for worker, keys in has_what.items() %}
    <tr>
        <td>{{ worker }}</td>
        <td>{{ keys | length }}</td>
        <td>
            <details>
            <summary style='display:list-item'>Expand</summary>
            <table>
            {% for key in keys %}
                <tr><td>{{ key }}</td></tr>
            {% endfor %}
            </table>
            </details>
        </td>
    </tr>
{% endfor %}
</table>

[fjetter]

FYI jinja is already a transitive dependency via bokeh. Bokeh, however, is currently an optional dependency so this would promote jinja to a must have. I'm not too worried about this, just wanted to highlight this.

Changes otherwise look good to me

[jacobtomlinson]

Thanks for the review @jrbourbeau. This is now complete, all HTML reprs have been migrated. Ready for final review and merge.

[jrbourbeau]

Thanks @jacobtomlinson! This is in