🎉 automatic breadcrumbs from the tag graph

[ikesau]

Resolves #3406

Changes:

• Adds programmatically generated breadcrumbs to our tagged gdocs articles, based on the tag graph
• Fixes erroneous parent tag logic to reflect the fact that a tag may have multiple paths to get to it
  • This requires a somewhat verbose new structure called a ParentTagArray which is an array of tags. One child tag can have multiple ParentTagArrays e.g. "Nuclear Energy" can be a child of "Energy" and in a different part of the graph, a child of "CO2 Emissions"
  • We want all of these parent tags for Algolia indexing, so the code has been fixed to reflect this

Rules for the programmatic breadcrumbs:

1. For each tag, pick the root-to-leaf subgraph with the highest weighted top node (tiebreak alphabetically)
2. For each subgraph, filter out non-topic nodes
3. Pick the longest filtered subgraph

I considered a "highest average weight" strategy as well, but seeing as weighting is only really used to order nodes relative to one another at each level, I didn't think it would lead to intuitive results.

This means that the ordering of the areas in the tag graph will determine which breadcrumbs trump which. I think this makes the most sense because presumably whichever topic we put at the top of the nav, we think is the most important and therefore its children are more important also, in some abstract way.

Automatic breadcrumbs render slightly differently to manually set breadcrumbs:

Manually set breadcrumbs were made for SDGs at first, where we wanted the leaf node to unclickable. For non-SDG articles, authors have (sensibly) shortened the title for this leaf node, but that's not something we're going to be able to do programmatically, so instead we'll only show topic breadcrumbs, and not a leaf node for the article.

[owidbot]

Quick links (staging server):

Site Dev	Site Preview	Admin	Wizard	Docs

Login: ssh owid@staging-site-breadcrumbs

• Site-screenshots: https://github.com/owid/site-screenshots/compare/breadcrumbs
• SVG tester: https://github.com/owid/owid-grapher-svgs/compare/breadcrumbs

SVG tester:

Number of differences (default views): 0 ✅
Number of differences (all views): 0 ✅

Edited: 2025-01-09 23:29:36 UTC
Execution time: 1.18 seconds

[danyx23]

Nice work! A few notes from playing with it: I think it would be great if there were an easier way in the admin to understand if breadcrumbs were set automatically or manually.

The final leaf node not being shown is understandable but quite an inconsistency. It might work well to use the slug, split by dash and sentence cased? E.g. "us-airline-travel" -> "Us airline travel". This will clearly sometimes not be perfect but this is what manual overrides are for. What do you think?

My hunch is also that we should advertise this staging server quite prominently after the christmas break - I'm pretty sure that Joe, Ed and maybe Max will want to look at quite a few examples to get a feeling for the logic. I think it works very well (e.g. the tie breaking etc) but I anticipate some discussion there.

[danyx23]

The types in getParentTagArraysByChildName should be a bit more explicit IMHO, otherwise this looks good!

As I wrote above, I think the semantics of this PR will warrant a bit of scrutiy and discussion and this might mean a few more code changes - if so, ping me again quickly before this gets merged.

[ikesau]

Going to chat with Marwa/Ed to talk about what to do with leaf nodes
titles.json

[ikesau]

Hey @danyx23 🙂

Updates:

• Renames the posts_gdocs breadcrumbs column to manualBreadcrumbs to disambiguate it from automatic breadcrumbs throughout the codebase
  • Fixes various overlooked admin preview bugs that were due to these getting mixed up
• Adds a migration to delete the ~30 manually set breadcrumbs for non-SDG articles to ensure "no last node" consistency for all non-SDG breadcrumbs (Marwa's okay with this)
• Updates CSS
• Improves admin UI to make it clearer where breadcrumbs are coming from

breadcrumbs.overrides.demo.mp4

[danyx23]

The automatic breadcrumbs work fine AFAICS but the manual ones have two weirdnesses about them:

• When you edit them, you don't immediately see any changes. At least when clicking on "done" I would like the preview to be refreshed. I also don't understand why we have both "done" and "save draft" at this point. I think we should fold the behaviour of "save draft" into the "done" button. Happy to chat about the details of this.
• The other one is that it seems impossible to recreate the behaviour of the current automatic breadcrumbs with manual breadcrumbs. I can leave the last field empty but it still renders a ">" to an empty string in the breadcrumbs in that case. I'd also like to have better instructions for how to fill this in when the manual breadcrumbs is active (something like "Keep the last item empty unless you are editing an SDG page. See the writing guildelines for recommendations for how to pick topic parents")

Once these are tackled this is good to merge!