[PR #18] [MERGED] UX improvements, some refactoring #26

New issue

Closed

opened 2026-10-15 18:07:56 +00:00 by bsakaguchi · 0 comments

bsakaguchi commented

2026-10-15 18:07:56 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/SillyTavern/SillyTavern-Timelines/pull/18
Author: @Technologicat
Created: 1/29/2024
Status: ✅ Merged
Merged: 2/2/2024
Merged by: @Cohee1207

Base: master ← Head: ux-improvements

📝 Commits (10+)

6c54b2b UX improvements, some refactoring
e472cbd preliminary README update
466e6e3 toast the auto-picked session
a32c226 toast only when multiple matches
4a9e084 Ehm, once more. Show file name, consistent with Manage chat files.
fdeced3 preliminary README update vol. 2
a4c7475 remove unused code
e53ad73 refreshLayout no longer requires parameters
91a993d clean up graph node metadata slightly
aafbcba remove unused import

📊 Changes

8 files changed (+1097 additions, -648 deletions)

View changed files

📝 README.md (+78 -19)
📝 index.js (+512 -298)
📝 timeline.html (+58 -27)
📝 tl_graph.js (+30 -6)
📝 tl_node_data.js (+121 -24)
📝 tl_style.css (+103 -134)
📝 tl_style.js (+44 -20)
📝 tl_utils.js (+151 -120)

📄 Description

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).

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/SillyTavern/SillyTavern-Timelines/pull/18 **Author:** [@Technologicat](https://github.com/Technologicat) **Created:** 1/29/2024 **Status:** ✅ Merged **Merged:** 2/2/2024 **Merged by:** [@Cohee1207](https://github.com/Cohee1207) **Base:** `master` ← **Head:** `ux-improvements` --- ### 📝 Commits (10+) - [`6c54b2b`](https://github.com/SillyTavern/SillyTavern-Timelines/commit/6c54b2b00c11493097c8c5452cd23dede65c8357) UX improvements, some refactoring - [`e472cbd`](https://github.com/SillyTavern/SillyTavern-Timelines/commit/e472cbd28bd621f3ae8eb8222f8cc83fabeaf2c9) preliminary README update - [`466e6e3`](https://github.com/SillyTavern/SillyTavern-Timelines/commit/466e6e3807dfc7b17f68db19354038b28e295e6e) toast the auto-picked session - [`a32c226`](https://github.com/SillyTavern/SillyTavern-Timelines/commit/a32c226f0551ff6f6926b013ba359841611ab5e0) toast only when multiple matches - [`4a9e084`](https://github.com/SillyTavern/SillyTavern-Timelines/commit/4a9e0844dd8120e66034d6aa778c234039efb229) Ehm, once more. Show file name, consistent with Manage chat files. - [`fdeced3`](https://github.com/SillyTavern/SillyTavern-Timelines/commit/fdeced3f6fce645b65d8edc0aeb5fc4b7f9fd341) preliminary README update vol. 2 - [`a4c7475`](https://github.com/SillyTavern/SillyTavern-Timelines/commit/a4c74758fa5e397dc82b6be703e4d3765b68dfab) remove unused code - [`e53ad73`](https://github.com/SillyTavern/SillyTavern-Timelines/commit/e53ad734fd4ec2d6cc6d3d07a379759d8a66e8f0) refreshLayout no longer requires parameters - [`91a993d`](https://github.com/SillyTavern/SillyTavern-Timelines/commit/91a993d64b0cc33d6c3b945ec2eff5a1ebb6392a) clean up graph node metadata slightly - [`aafbcba`](https://github.com/SillyTavern/SillyTavern-Timelines/commit/aafbcba5d35f3868663e55c496cc4a060fe40548) remove unused import ### 📊 Changes **8 files changed** (+1097 additions, -648 deletions) <details> <summary>View changed files</summary> 📝 `README.md` (+78 -19) 📝 `index.js` (+512 -298) 📝 `timeline.html` (+58 -27) 📝 `tl_graph.js` (+30 -6) 📝 `tl_node_data.js` (+121 -24) 📝 `tl_style.css` (+103 -134) 📝 `tl_style.js` (+44 -20) 📝 `tl_utils.js` (+151 -120) </details> ### 📄 Description 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). --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

bsakaguchi

2026-10-15 18:07:56 +00:00

closed this issue
added the
pull-request
label

No labels

pull-request

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

SillyTavern/SillyTavern-Timelines#26

No description provided.

Rows
Columns