Faceted tag search for plugins and tools

[simonw]

I want to be able to see all of the geospatial plugins, or all of the plugins that use a specific hook.

[simonw]

For plugin hooks: I could try installing all of the plugins in a virtual environment and then run datasette --get /-/plugins.json to see what hooks they use.

[simonw]

I tried that trick and it failed, because two of the current batch of plugins cause Datasette to crash on startup if they aren't configured properly:

• datasette-auth-existing-cookies
• datasette-redirect-to-https

After uninstalling those to (and installing everything in plugin_repos.yaml) I got the following output: https://gist.github.com/simonw/f95207c1483fe74990af5a92ef447315

[simonw]

Here's what I did:

python -m venv plugins-venv
# Convert plugin_repos.yml to all-plugins.txt by hand
plugins-venv/bin/pip install -r all-plugins.txt
plugins-venv/bin/datasette --get '/-/plugins.json'
# This broke
plugins-venv/bin/pip uninstall datasette-auth-existing-cookies
plugins-venv/bin/pip uninstall datasette-redirect-to-https
# Now this worked:
plugins-venv/bin/datasette --get '/-/plugins.json' | jq

[simonw]

I'm tempted to run a version of the above in a separate repo as a git scraper, which then commits that plugins.json file so that the datasette.io build script can load it and use it to populate a table.

[simonw]

This came up again on Discord: https://discord.com/channels/823971286308356157/823971286941302908/1004879739862909058

@davidbgk made a mockup:

[simonw]

OK, the first set of tags can be tried out here: https://datasette.io/content/plugin_repos?_facet_array=tags

[simonw]

My first attempt at the CSS - needs a lot of refining.

.tag {
  border-radius: 3px;
  white-space: nowrap;
  line-height: 2;
  border: 1px solid blue;
  padding: 3px 6px;
}

<div style="border-bottom: 4px solid #0e0c82">
    <a class="tag" href="#">Geospatial <span>10</span></a>
    <a class="tag" href="#">Render Cell <span>9</span></a>
    <a class="tag" href="#">Output <span>8</span></a>
    <a class="tag" href="#">SQL Functions <span>8</span></a>
    <a class="tag" href="#">Authentication <span>7</span></a>
    <a class="tag" href="#">Maps <span>7</span></a>
    <a class="tag" href="#">Data Import <span>6</span></a>
    <a class="tag" href="#">API <span>5</span></a>
    <a class="tag" href="#">Visualization <span>5</span></a>
    <a class="tag" href="#">Leaflet <span>4</span></a>
    <a class="tag" href="#">Search <span>3</span></a>
    <a class="tag" href="#">Publish <span>2</span></a>
    <a class="tag" href="#">Template <span>2</span></a>
</div>

[simonw]

The tags need to be displayed on the plugin detail panels too.

[simonw]

I'd like to find a better name than "Render Cell" for plugins that use the render_cell plugin hook to customize how cells are displayed in tables.

[davidbgk]

You probably want a tag-selected concept too, once you click/select a tag.

Considering the style, maybe surrounding the number of elements like for instance https://getbootstrap.com/docs/5.2/components/badge/#buttons would be pertinent for readability?

[simonw]

Yes, definitely want that kind of treatment for numbers - I wrapped them in a <span> to enable that - and we certainly need a toggle state for when a tag is selected.

[simonw]

One of the tags could mark known compatibility with https://lite.datasette.io/ - see:

• https://github.com/simonw/datasette-lite/issues/37

Ditto for Datasette Desktop.

[simonw]

Before adding those new tags:

After: