Networked tags!

[towerofnix]

Development:

• Merge alongside Networked tags hsmusic-data#293.

Builds on the existing tag system to add capabilities for interconnectedness, as well as other convenient details, all of which are displayed in an interactive manner on the existing tag gallery page as well as the new tag info page.

• Adds Direct Descendant Tags field (directDescendantArtTags). Like Referenced Tracks and the like, this is the only field which is used to completely define the tag network - reversals are computed dynamically.
  • This network is similar to a tree, but instead of having one root, it has several - it's further along the branches that these start to overlap, and so each each leaf node (and most branching nodes) comes from not just one but several root nodes. Apart from having multiple roots, it's otherwise a fairly typical directed acyclic graph. (There's probably a specific term describing the network here, but we aren't actually familiar with graph theory.)
  • You can think of nodes as branching forwards (to more branching nodes or to leaves), but also backwards (i.e. to more than one direct ancestor, each of which is another branching node or a root).
  • There may even be multiple paths which lead back to the same single root node (Davepeta -> Dave (archetype) -> Human archetypes -> Archetypes from Homestuck, Davepeta -> Nepeta (archetype) -> Troll archetypes -> Archetypes from Homestuck!).
  • The implementations of this network in data structure (for example withAncestorArtTagBaobabTree) and user interface (for example generateArtTagAncestorDescendantMapList) are built around this.
• Adds Description and Extra Reading URLs fields (description, extraReadingURLs) to art tags, so that they're easier to identify - and so it's possible to link to other art tags which are contextually related, but semantically disconnected.
  • The Description field supports the same <hr class="split"> syntax used in group descriptions and news entries, and a new component is introduced (generateQuickDescription) to only display the shorter part (descriptionShort) - by default! - on gallery pages. This component has also been added to group gallery pages!
  • In order to make navigation easier without introducing extra complexity anywhere in the codebase or, worse, in data files, the [[tag:art-tag-directory]] replacer has been updated to use a new component (linkArtTagDynamically) which automatically swaps between linking to the tag's gallery page or info page depending on what page is currently being rendered. The default, like before, is to the gallery - it's just tag info pages that will automatically link to other tag info pages. (This hooks into the same pagePath extra dependency that was exposed a while ago for generateFooterLocalizationLinks.)
  • External links (linkExternal) have been updated to support nicer messaging for links to Fandom and specifically MSPA wiki (still hard-coded, sorry!). The name of the linked wiki page will be parsed out of the URL and displayed, e.g. "MSPA Wiki (John Egbert)".
• Adds a completely new tag info page!
  • This is almost never the default when linking to tags - for most intents and purposes the gallery is where the tag is best serving its purpose, after all. The tag info page has an expanded description and a more consistent layout for navigating to descendant and ancestor art tags, and is quick to load - compared to certain tags that might have several thousand items in a gallery grid!
  • Art tags also get a brand new, highly dynamic (but hopefully quite predictable) sidebar element. It's exclusive to the tag info page, since the gallery page needs to have as much room to breathe as possible - so it can feature lots of artworks without squishing them down!
  • As discussed above, the sidebar is designed to make the "multiple roots" network structure easier to understand and navigate. Each root node (which is computed as the unique leaf nodes of a "baobab" by walking a tag's ancestors, rather than its descendants!) receives its own expandable section. (These almost always default to collapsed.)
  • Once expanded, a "map" appears beneath the root showing the single or multiple paths which lead from that root to the current tag (or vice versa). Each tag between the two may branch out and eventually lead to other roots, but only the paths leading between the current tag and the expanded root are shown. Depending on the network and the current tag, there may be significant overlap from the paths leading to/from one root and those to/from another!
  • The map (for each root) is a nested <dl>-style list. Siblings of a displayed direct ancestor of the current tag (i.e. the first branch along a path to the root) are all listed, so you can hop between sibling tags without navigating to the common ancestor in-between. To keep the map otherwise concise and readable, other siblings are aggressively abbreviated - displaying "(...3 other tags...)", for example.
  • Each ancestor node on the map gets a new underline (actually border-bottom) style to look "extra" bold, increasing contrast and making the list easier to navigate. This will hopefully be a help - previously we found the nested structure (often containing tags of various colors in a row) can be a little tricky just to visually parse at a glance, even if it isn't conceptually that confusing (we promise!).
• This PR also makes a few related adjustments to other existing pages and elements.
  • As discussed, tag gallery pages get direct ancestor and descendant info (but no sidebar), and the shorter version of a tag's description.
  • Any page that uses "quick info" (centered info lines in galleries, mostly) gets a style tweak - these elements now have the same 12% left/right padding as "long content", meaning they take up the same rectangle. This helps balance out longer quick-info messages, where you'd previously get one line which filled pretty much the whole content area/screen, and the second line would just be a couple of words in comparison.
  • Adds a new "Art Tag Network" listing, which lays the whole network bare in a mostly coherent, navigable list. Good for (apart from getting a neat summary) highlighting things that probably aren't quite right in the network, even though it's perfectly valid data!

[towerofnix]

This is essentially good to go as-is, but there are still some additional features I'm looking to get in as long as time permits!

[towerofnix]

Um, goes without saying, but to say it anyway... this has been on pause pending a probably light refresh and a good, fresh look-over. It'll take some rebasing work and catching up (especially #319). We're coming back to it quite soon, just not at this immediate moment!

It is worth mentioning that the work on this PR was spiritually foundational (and in various ways, technologically, as well) to basically all recent work and feature additions. It's kind of ridiculous to believe this came together over practically eight days.

[towerofnix]

Alright, there's probably still a good amount of touching up to do here (on code and maybe some design), but a lot of the foundations turned out to be quite solid, and this has been neatly rebased onto all the latest preview changes finally! Pending more data work in #293 (by us and Celeste), but otherwise this ain't looking half bad. 🎊