Show enabled facets in flexbox columns, refs #255

datasette/static/app.css

@@ -231,3 +231,22 @@ a.not-underlined {
 .not-underlined .underlined {
     text-decoration: underline;
 }
+
+.facet-results {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+.facet-info {
+    width: 250px;
+    margin-right: 20px;
+}
+.facet-info li,
+.facet-info ul {
+    margin: 0;
+    padding: 0;
+}
+.facet-info ul {
+    padding-left: 1.25em;
+    margin-bottom: 1em;
+}

datasette/templates/table.html

@@ -98,17 +98,23 @@
     <p>Suggested facets: {% for facet in suggested_facets %}<a href="{{ facet.toggle_url }}">{{ facet.name }}</a>{% if not loop.last %}, {% endif %}{% endfor %}
 {% endif %}
 
-{% for facet_name, facet_info in facet_results.items() %}
-    <p><strong><a href="{{ path_with_removed_args(request, {'_facet': facet_name}) }}">{{ facet_name }}</a></strong></p>
-    <ul>
-        {% for facet_value in facet_info.results %}
-            <li><a href="{{ facet_value.toggle_url }}">{{ facet_value.label }}</a> {{ "{:,}".format(facet_value.count) }}</li>
+{% if facet_results %}
+    <div class="facet-results">
+        {% for facet_info in sorted_facet_results %}
+            <div class="facet-info facet-{{ database|to_css_class }}-{{ table|to_css_class }}-{{ facet_info.name|to_css_class }}">
+                <p><strong>{{ facet_info.name }}</strong> (<a href="{{ path_with_removed_args(request, {'_facet': facet_info['name']}) }}">-</a>)</p>
+                <ul>
+                    {% for facet_value in facet_info.results %}
+                        <li><a href="{{ facet_value.toggle_url }}">{{ facet_value.label }}</a> {{ "{:,}".format(facet_value.count) }}</li>
+                    {% endfor %}
+                    {% if facet_info.truncated %}
+                        <li>...</li>
+                    {% endif %}
+                </ul>
+            </div>
         {% endfor %}
-        {% if facet_info.truncated %}
-            <li>...</li>
-        {% endif %}
-    </ul>
-{% endfor %}
+    </div>
+{% endif %}
 
 {% include custom_rows_and_columns_templates %}
 

datasette/views/table.py

@@ -555,17 +555,21 @@ class TableView(RowTableShared):
             )
             try:
                 facet_rows = await self.execute(
-                    name, facet_sql, params, truncate=False, custom_time_limit=200
+                    name, facet_sql, params,
+                    truncate=False, custom_time_limit=200
                 )
+                facet_results_values = []
                 facet_results[column] = {
                     "name": column,
-                    "results": [],
+                    "results": facet_results_values,
                     "truncated": len(facet_rows) > FACET_SIZE,
                 }
                 facet_rows = facet_rows[:FACET_SIZE]
                 # Attempt to expand foreign keys into labels
                 values = [row["value"] for row in facet_rows]
-                expanded = (await self.expand_foreign_keys(name, table, column, values))
+                expanded = (await self.expand_foreign_keys(
+                    name, table, column, values
+                ))
                 for row in facet_rows:
                     selected = str(other_args.get(column)) == str(row["value"])
                     if selected:
@@ -576,7 +580,7 @@ class TableView(RowTableShared):
                         toggle_path = path_with_added_args(
                             request, {column: row["value"]}
                         )
-                    facet_results[column]["results"].append({
+                    facet_results_values.append({
                         "value": row["value"],
                         "label": expanded.get(
                             (column, row["value"]),
@@ -710,6 +714,11 @@ class TableView(RowTableShared):
                 "display_columns": display_columns,
                 "filter_columns": filter_columns,
                 "display_rows": display_rows,
+                "sorted_facet_results": sorted(
+                    facet_results.values(),
+                    key=lambda f: len(f["results"]),
+                    reverse=True
+                ),
                 "is_sortable": any(c["sortable"] for c in display_columns),
                 "path_with_replaced_args": path_with_replaced_args,
                 "path_with_removed_args": path_with_removed_args,