UX improvements, some refactoring

[Technologicat]

Here's the UX overhaul PR for Timelines.

Changelog:

• Ignore dead links when populating the graph - no more checkpoint proliferation!
  • NOTE: This catches the case where you create a checkpoint, and later delete (or rename) the spawned chat file. Now the resulting dead link in the originating chat file no longer matters.
  • This does NOT catch the opposite case. If you overwrite a checkpoint on a chat message that already has one, the old link is severed, a new chat file is spawned, and the link in the originating chat file now points to that new chat file. This means that the spawned chat file of the old checkpoint has become an independent chat, with no link to its originating chat. Old links are currently not preserved in the chat file format, so there's nothing the extension can (reasonably) do to this.
• Swipes:
  • Revised to how I felt the comments and docstrings indicated it was originally intended to be.
  • In navigateToMessage:
  • If branch is true, always create a new branch (as we did before)
  • If branch is false, attempt to avoid creating a branch (no more branch proliferation - previously, navigating to a swipe always created a branch)
    • If the swipes are on the last message in the chat, they are still available, so just navigate there
    • But if the swipes are on an older message, then create a branch so that we can reveal the stored swipes
  • GUI: On swipe nodes where the swipes are on an older message, disable the main button (and show it as disabled) on the node panel; the branch button ('→') is always available.
  • In other words, the main button is enabled whenever "navigate here without creating a branch" is possible.
  • GUI: Double-clicking on a node now Does What You Mean:
  • When possible, do not create branch, just navigate
  • But if double-clicking a swipe on an older message, create a branch
• GUI: Ordering of UI elements in full info panel (when you click a node) changed: now the buttons are between the metadata header and the text content.
  • This fixes an UX issue where a long chat message hid the buttons, and required a lot of scrolling to reach them.
  • With the exception of the first message or two near the root of the timeline tree, the same message doesn't usually appear in many chats, so in the general case there will be few buttons, which nicely fit at the top under the metadata header.
• GUI: When opening the timeline view, auto-zoom to the current chat, flashing the last node in it a few times to draw the user's attention
• GUI: Text search: zoom to the matching elements as you type, and zoom out if no match (or if you clear the search)
• GUI: Add toolbar button to zoom out to the whole graph
• GUI: Add toolbar button to zoom to the current chat (and flash the last node in it)
  • NOTE: If that chat is part of a timeline shared with other chats, and that chat ends before the end of the timeline, the last node of the chat might not be the last node of that timeline (i.e. it is not always the rightmost/bottommost node that flashes).
• GUI: Clicking a legend item now zooms to the matching elements.
  • The "clicked" status also resets if you click a legend item, but then do a text search.
• GUI: All these new auto-zooms use padding, to show the matched region sensibly (e.g. show also the nodes at the endpoints of a checkpoint path).
  • Also "zoom out to the whole graph" leaves some padding at the edges (looks better).
• GUI: Legend now has a translucent background to improve readability when part of the graph is behind it.
• GUI: Stable random color for named checkpoints
  • Works by string-hashing the name and feeding that into a seedable RNG.
• GUI: Tooltip and full info panel:
  • The default dynamic placement now avoids covering other important nearby nodes, to ease navigation.
  • On a regular node, avoids placing the tooltip/panel on top of other nodes on the same timeline.
  • On a swipe node, avoids placing the tooltip/panel on top of the other swipe nodes that originate from the same node.
  • This accounts for graph orientation.
  • The full info panel attempts to avoid a double-scrollbar situation by limiting the maximum height of the message text content box. (Tested on 4k and 1080p displays.)
  • The placement of the full info panel can now use GPU accelerated styles.
  • This was originally always off, because it sometimes lost the tooltip arrow on some machines. I tried it and didn't observe this.
  • Now it is enabled by default. I think it should be safe.
  • Added a setting to switch it off, for those (rare?) machines where it causes trouble.
• Settings:
  • Add Auto-expand Swipe Nodes to start in "expand swipes" mode when the timeline view first opens (or whenever the graph is refreshed).
  • Add configurable zoom levels: min, max, and the zoom level used when auto-zooming to the current chat.
  • Replace Fixed Tooltip by Fixed Position for Full Info Panel, and add a separate Fixed Position for Tooltip.
  • Remove Lock Nodes. It did nothing, because nodes were always locked after running the layout, regardless of the value of this setting. The graph changes often enough (besides being large and never saved) that manual editing of node positions is not useful.
• Hotkeys:
  • Esc to close timeline view (like many other panels in ST)
  • Ctrl+Shift+F to focus the search text entry (a bare Ctrl+F would also open the browser's "find in page" bar)
• Logging:
  • Use debug/info/warning/error levels explicitly, not the generic log.
  • navigateToMessage: If this goes wrong, it could be pretty hard to debug, so add enough log messages to figure out what it did and why.
• Remove unused code, and improve code cleanliness.

Left for later, NOT done now:

• Hotkeys: Tab to jump between chat branches matching a search.
  • This requires some nontrivial logic to determine what a branch is, either from the graph structure, or from node positions in the rendered graph.
• Icon sizes at the top right of the timeline view should match each other.
  • I.e. not perfect, but serviceable for now.
• Some more code cleanup (see parts marked TODO).

[Technologicat]

Ah, and I forgot to mention it explicitly, but this will resolve #17 when complete.

[Technologicat]

Documenting how to add a new setting to the Timelines extension:

• Add UI element(s) to timeline.html
• Add default value to defaultSettings in index.js.
• Populate the UI element from the saved state at startup, in loadSettings in index.js.
• Add the new setting to idsToSettingsMap in the jQuery entry point in index.js. This sets up event handlers to update the settings when they are changed in the UI, and to auto-save the settings when a value changes.
• If you need to trigger some logic when the value of the setting changes in the GUI, add that logic to onInputChange in index.js.
  • For example, valid values for the zoom sliders depend on each other. There are now examples of simply clamping the setting that is being changed, as well as of updating another setting based on the one being changed.

I haven't yet analyzed whether the settings processing done in loadSettings and in the jQuery entry point are both necessary. EDIT: Yes, they are. loadSettings updates extension_settings.timeline → Extensions ⊳ Timelines settings UI when the extension starts up, whereas the jQuery entry point sets up event handlers to update in the other direction (and to auto-save settings when a value changes).

Note also that some UI elements may need introducing a new CSS style class in tl_style.css, so that the code can query for the UI element(s) easily. For example the buttons at the upper edge of the timeline view are implemented like this (events are wired to the buttons after finding each button via a CSS style class search).

[Technologicat]

@Cohee1207: This Timelines UX PR will probably be ready for review tomorrow.

I'll just look at the positioning of the full info panel, and then Timelines will be complete for now.

As always in software development, there are still a lot of things that could be fixed (marked as TODO in the code comments) - but nothing really important. I think we can leave those for later.

[Technologicat]

@Cohee1207: Now this PR is complete.

I'll give it a final once-over tomorrow, then it's ready for review. I'll let you know.

[Technologicat]

@Cohee1207: It's done, with some last-minute fixes and cleanups. Please review.

The new screenshot is loaded from my fork, not the original, because I don't have write access to the original. It's 1.2MB at PNG compression level 9 (even though it's only from a 1080p screen, to keep file size down), so I agree with @city-unit's original decision not to include the screenshot file in the repo itself.

EDIT: Also, I scrubbed all unused stuff from the CSS stylesheet. EDIT: Removed a done TODO marker from code comments.

[Technologicat]

By the way, I have some more changes stashed - support for multiple parent nodes*, highlight edges on hover, click edge to navigate, and per-timeline navigation buttons in the full info panel.

I can push these changes here, or if you prefer, send them in separately later.

• This means a history can converge as well as diverge. Multiple parent nodes for the same chat node occur when you send the same canned reply at the same chat depth in different chat sessions - for example, when using the script I posted in https://github.com/SillyTavern/SillyTavern/issues/1777.

[Technologicat]

Thanks for the merge!

And for your patience keeping up with the pace of these PRs :)

[Technologicat]

Oh, and nice icon choices!

Didn't yet occur to me to look inside fontawesome for those.