Redesign application homepage

[simonw]

Most Datasette instances only host a single database, but the current homepage design assumes that it should leave plenty of space for multiple databases:

Reconsider this design - should the default show more information?

The Covid-19 Datasette homepage looks particularly sparse I think: https://covid-19.datasettes.com/

[simonw]

Sketched out an option:

diff --git a/datasette/templates/index.html b/datasette/templates/index.html
index c1adfc5..eab3053 100644
--- a/datasette/templates/index.html
+++ b/datasette/templates/index.html
@@ -5,6 +5,14 @@
 {% block body_class %}index{% endblock %}
 
 {% block content %}
+<style>
+.db-table {
+    padding-left: 2em;
+}
+.db-table h3 {
+    margin: 0 0 0.15em 0;
+}
+</style>
 <h1>{{ metadata.title or "Datasette" }}{% if private %} 🔒{% endif %}</h1>
 
 {% block description_source_license %}{% include "_description_source_license.html" %}{% endblock %}
@@ -21,8 +29,20 @@
             {{ "{:,}".format(database.views_count) }} view{% if database.views_count != 1 %}s{% endif %}
         {% endif %}
     </p>
-    <p>{% for table in database.tables_and_views_truncated %}<a href="{{ database.path }}/{{ table.name|quote_plus 
-    }}"{% if table.count %} title="{{ table.count }} rows"{% endif %}>{{ table.name }}</a>{% if table.private %} 🔒{% endif %}{% if not loop.last %}, {% endif %}{% endfor %}{% if database.tables_and_views_more %}, <a href="{{ database.path }}">...</a>{% endif %}</p>
+    {% for table in database.tables_and_views_truncated %}
+        {% if show_hidden or not table.hidden %}
+        <div class="db-table">
+            <h3><a href="{{ database_url(database.name) }}/{{ table.name|quote_plus }}">{{ table.name }}</a>{% if table.private %} 🔒{% endif %}{% if table.hidden %}<em> (hidden)</em>{% endif %}</h3>
+            <p><em>{% for column in table.columns[:9] %}{{ column }}{% if not loop.last %}, {% endif %}{% endfor %}{% if table.columns|length > 9 %}...{% endif %}</em></p>
+            <p>{% if table.count is none %}Many rows{% else %}{{ "{:,}".format(table.count) }} row{% if table.count == 1 %}{% else %}s{% endif %}{% endif %}</p>
+        </div>
+        {% endif %}
+    {% endfor %}
+
+    {% if database.tables_and_views_more %}
+        <p><a href="{{ database.path }}">All {{ database.tables_count }} tables in {{ database.name }}</a></p>
+    {% endif %}
+
 {% endfor %}
 
 {% endblock %}

[simonw]

Relevant: #1021 asks about controlling the order of databases on that page that have been loaded using configuration directory mode.

[simonw]

Thinking more about pagination and search from #461: if the job of the homepage is to showcase the data that is available in the instance - data that is mostly in tables - maybe it's the tables themselves (and the ability to paginate and search through them) that becomes key to the design of the page.

[simonw]

I'm really interested in exploring how this page could work with hundreds of database files attached and thousands of total tables.

[simonw]

https://biglocal.datasettes.com/ is one of my larger Datasettes in terms of number of databases.

[furilo]

Here is one quick sketch (done in Figma :P) for an idea: a possible filter to switch between showing all tables from all databases, or grouping tables by database.

(the switch is interactive)

All tables: https://www.figma.com/proto/BjFrMroEtmVx6EeRjvSrox/Datasette-test?node-id=1%3A2&viewport=536%2C348%2C0.5&scaling=min-zoom

Grouped: https://www.figma.com/proto/BjFrMroEtmVx6EeRjvSrox/Datasette-test?node-id=3%3A974&viewport=536%2C348%2C0.5&scaling=min-zoom

When only 1 database: https://www.figma.com/proto/BjFrMroEtmVx6EeRjvSrox/Datasette-test?node-id=1%3A162&viewport=536%2C348%2C0.5&scaling=min-zoom

Is this is useful, I can send some more suggestions/sketches.

[simonw]

Idea: implement this using the existing table view, with a custom template called table-internal-bb0ec0-tables.html - that's the custom template listed in the HTML comments at the bottom of https://latest.datasette.io/_internal/tables