Navigating complex tiddler relationships, a discussion for the enthusiast

A few recent discussions have once again returned to the subject of next and previous tiddlers. In a tiddlywiki with a good set of your information organised with tags, references and even fields or list fields containing tiddler titles, actually presents us with more than one possible Next and Previous. I think this presents an opportunity as well as a challenge.

Background

For Example, think of a tiddler that has a tag, such as On tiddlywiki.com a tiddler with the TableOfContents tag, for example the “Features” tiddler. Such a tiddler will appear in the list of tiddlers that have the same tag. As a result we can determine the next and previous tiddler in the list and the first and last tiddler in the list. We can even obtain the numeric position of the tiddler in that tag list.

Now also consider the case where the current tiddler has more than one tag, for example the “addsuffix Operator” tiddler, it has both the “Filter Operators” tag and “String Operators” tag. Now we have two sets of next/previous, first/last, one for each tag.

  • It is quite easy to imagine cases where you may have half a dozen tags. Which next/previous is relevant to your current navigation of your data?

Lets not forget the current tiddler may be tagging one or more other tiddlers itself, or the current tiddler is referenced elsewhere, contains links within it etc…

You start to realise that Next/Previous navigation is insufficient to navigate or describe the relationships between tiddlers.

The Challenge
I want to open this discussion to the community to think about new ways to assist navigation across multiple tiddlers according to their various relationships. Can we represent this complexity in simpler ways, perhaps graphically or visually?

  • What if we trace the journey, and allow you to easily take detours but return to your place, so you can continue through a particular set? Perhaps return another day and continue your journey?
  • What if you were on more than one Journey at a time?
  • What if we store analytics about the places (tiddlers) you visit the most, and provide it back to you to learn about your own usage of your tiddlywiki and the data you choose to store in it?
    • Or use this to build decision trees and optimise the paths you take?

I have some ideas but want to hear yours without prejudicing your thoughts.

Here’s an example of a “TOCNav” tiddler that defines macros to perform Previous/Next navigation for all the tiddlers in a given TOC tree, using a depth-first recursive “tree walk” to view the TOC tree tiddlers in the order they occur in the fully expanded tree.

\define toc-root()  TableOfContents
\define toc-depth() 3

\define toc-nav()
\define tv-wikilinks() no
<$list filter="[enlist<all>before<currentTiddler>]">
   <$button class="tc-btn-invisible" style="float:left;" to=<<currentTiddler>>>
      {{$:/core/images/chevron-left}} <<toc-caption>>
   </$button>
</$list>
<$list filter="[enlist<all>after<currentTiddler>]">
   <$button class="tc-btn-invisible" style="float:right;" to=<<currentTiddler>>>
      <<toc-caption>> {{$:/core/images/chevron-right}}
   </$button>
</$list>
<div style="clear:both;"/>
\end

\define toc-list(here,max,exclude,level:"1")
<$list filter="""[tag[$here$]] $exclude$ -[[$here$]]""">
   <$text text="[["/><<currentTiddler>><$text text="]]"/><br>
   <$reveal default="$level$" type="nomatch" text="$max$">
      <$macrocall $name="toc-list" here=<<currentTiddler>> max="$max$"
         exclude="""$exclude$ -[[$here$]]""" level={{{ [[$level$]add[1]] }}}/>
   </$reveal>
</$list>
\end

<$wikify name="all"
   text="""<$macrocall $name="toc-list" here=<<toc-root>> max=<<toc-depth>>/>""">
<<toc-nav>>
</$wikify>

Notes:

  • Give this tiddler a tag of $:/tags/ViewTemplate and a list-before field with an empty value. This will display the Previous/Next navigation links at the top of each tiddler that is part of the specified TOC.
  • Set toc-root() to the top-level tag for the desired TOC tree (e.g., “TableOfContents”)
  • Set toc-depth() to the maximum depth to “walk” the tree (e.g., “3”). Use a non-numeric value (e.g., “nolimit”) to walk the tree to it’s full depth.
  • The above code has not been optimized and, for particularly large trees such as the “TableOfContents” TOC on https://TiddlyWiki.com, computing the initial “flattened” tiddler list for the entire TOC can take a second or two (maybe more!).
  • Performance during navigation is somewhat improved because the TWCore caches the results of previous invoked [tag[...]] filters. Performance can also be improved by using toc-depth() to limit the number of tiddlers to be traversed.

-e

3 Likes

IMO the existing order at tiddlywiki.com is kind of useless, since most of the time the information is sorted alphabetically by default.

There are some core internal issues and there is the “consistency goal” of TW.

It avoids the possibility to create “user stories”, which will “tell a story in an order that makes sense to users that want to learn something”.

User stories typically go from “simple” to “more complex”. So the way to go here is a field with a “tag-like” behaviour, that is sorted as a story.


Remark: I stopped reading the thread after the paragraph posted above.

This was exactly the need I had in a wiki I’m building (behind corporate walls, so I can’t share.) I have a few Tutorial threads through a subset of the otherwise non-linear wiki. It got me to write my first plugin: Wizard Nav Demo — adding previous/next navigation, which given my beginner status took lots of help from several threads here.

But this discussion makes me realize that the is a better way to do some of my configuration, and I think the same idea would apply to the core. When we have a tag list, we would always default to sorting ascending by title, case insensitive. But, if there is a Tag Tiddler for the tag, and it has a sort_field field and/or sort_direction field, that default would be overridden with such values, possible a sort_case_insensitive one as well. This would apply only to the tag operator, but it would happen there every time the operator is run.

This doesn’t deal with the UI issue Tony discussed about the complexity of multiple next/previous paths that run through the same tiddler. In my plugin I have a solution that will work for my use-case, where that will be quite rare, but would probably be too busy if there are many such paths for individual tidders. But it might be a start.

If we’re in the context of a tutorial, adding more “dimensions” to the otherwise linear flow of the tutorial can be very confusing. You not only need to take a note of where you were in the main thread but then also keep track of the current digression (and hope it doesn’t digress into more branches). I remember years ago when I first stumbled upon Reveal JS (tool for making presentations) I was very confused by how you could not only navigate left-right but also up/down in the demo presentation. Is the stuff below important or not?

I think this line of thinking could be extrapolated into the context of a tutorial. Let’s say we have a tutorial that is made of some tiddlers and one of them is part of another tutorial. Looking at this from the point of view of the user, how should they know how to proceed? Continue the same branch? Go down the other one first? And what if the other branch branches out more later or it’s actually the middle of a branch?

My personal experience is that on average people have hard time following linear tutorials, and I am talking mostly about programmers who could reasonably be held to a higher standard than an average computer user¹. If the functionality of Prev/Next would be used in the context of a tutorial I think the best approach would be to:

  • Make it linear – significantly reduces mental load of keeping more information in head at once and knowing how to proceed.
  • Make it on point and avoid digressions – for the same reasons as above.

If used outside the context of tutorial and just, say, documentation then I’d ask “what purpose does the navigation serve?” @TW_Tones mentions two examples: Features and addsuffix Operator. For the former I think it makes a lot of sense to be able to go through them one-by-one as you’re likely learning about the system’s capabilities and building an index of knowledge in your head.

But filters? If you’re reading about addsuffix you are probably trying to understand how exactly it works, all of the nitty-gritty details. I find it unlikely you’ll want to read about after filter next. If anything you’ll want to go back to the list of all filters where you can get a better overview of the existing filters, in which case breadcrumbs seem like a better navigation tool.

I think I very indirectly am addressing the challenge posed in the first post – that is, good navigation requires understanding how your users will use the product.

But from a more personal level, here are some thoughts and experiences about navigation:

  • I like the idea of Prev / Next provided it’s used in a context where it’s desirable to navigate that way
  • Breadcrumbs are underrated and they are great if you want to quickly see the bigger picture / orient yourself in space. But it works best in tree/multi-tree structures
  • I am very quickly overwhelmed and confused when using Tiddlywiki.com for documentation and having more than 1-2 tiddlers open:
    • I use browser’s Ctrl+F extensively and unnecessary tiddlers make it less effective
    • Some tiddlers are large and it’s a lot of scrolling to get where I want
  • Also on Tiddlywiki.com, I sometimes look for a specific filter. I open it, quickly scan its contents, close it and then am annoyed it doesn’t take me back to where I was when I originally opened it.
  • I think I am not very good with non-linear navigation.
  • I also never use the “Open” tab in the sidebar.
  • In both of my personal TWs I use Zoom In with tabs at the top.

¹ - I say programmers could be held to a higher standard is because their job is understanding complex systems so it should make sense they’ll digest complex information easily. Turns out they’re still just human.

3 Likes

Thanks all, very helpful ideas so far, and certainly inspiring more ideas on my part.

Questions of clarification before I reply

  • Nice implementation Eric, I am wondering how you would treat more than one tiddler?, eg “addsuffix Operator” with more than one tag?
  • What is this solution? (the multi-tag problem), I tried to find what it is, do you mean presenting a list of next previous

Folks,
I have read each of your replies deeply, and taken notes. Thank you because you have really helped me consider the many branches to navigating complex tiddler relationships. You are like my “muse”'s. Here are some replies to solicit more information not in my Questions of clarification.

If you are short of time, just see the comments following my quotes of your replies, and perhaps my “In closing” at the bottom.

  • Yes and no, if all we are trying to do is to scan a list of children for relevant items, or step through each then alphanumeric lists are fine.
  • But I get your point that more value could be given by curated sort orders more relevant to the content and what the user is looking for.
    • The problem is there can be more than one use of the content - a problem worth solving.
  • I think you raise important terms here, “users Stories”, Stories and Journeys which are different and we can have more than one and past, present and future positions in them. See also my comment below on breadcrumbs.
    • Perhaps a story “has being written” and a Journey the “way we travel” through the story and its digressions?
  • You mention tag-like behaviour, perhaps alt-tag’s or just use more tags?
  • I hope you can return to the OT and continue. I value your contribution
  • But thanks for your honesty.
  • This effort of yours is largely why I wanted to return to this issue that has being on my mind for years.
  • Your @Scott_Sauyet and @EricShulman solutions show how effective solutions can be, but become challenged when the complexity grows.
  • I think storing information in the “tags tiddler” is an underused method but we can also use the tags title for other “state tiddlers” eg; $:/story-position/storyname/tagname.
  • Certainly alternative sort orders are important, as @pmario also raised.
    • A Question for you both may be how do we “curate” alternative sort orders?
  • Yes, sort direction is important as well. One could even view Next and Previous as simplified changes in direction.
    • Perhaps instead of next/previous we have a direction toggle and show what is in that direction, this would also allow us to detect when the user changes direction, or digresses.
    • I also consider first and last as important as well.
    • In some cases the numeric position or even a count of those visited and not yet visited would be relevant.
  • In some ways our data may just be complex, so part of the challenge raised in this Topic, is finding a way to deal with it when it arises.

First I must say that @Maurycy your reply has being extremely helpful at inspiring ideas for me on this topic, thanks. Everyone has helped of course.

  • I agree this is true for Tutorials and other organisational structures
  • You raise a good guideline and I think we need to have (and do already I think) solutions that help keep this simple for such cases.
    • In many cases “less is more”.
  • Considering the case of a Tutorial also raises the questions about “stories/journeys” that do not have the same needs, when “less is not more” ?
  • yes, and hence this Topic, how can we provide this support?
    • Perhaps this needs user or session awareness as well.
  • Yes, and as a result we need to ask “how do we do this?”
  • Actually your comment made be relook at bread crumbs,
  • we, and especially myself have used breadcrumbs to represent where in a hierarchy we are, but really they could be about “where we have being”, seperate from the structure we navigate, the reverse of breadcrumbs may be where we “plan to go”, even if its not where we go.
  • I have some history tools would that help but I think we can still do more to help with this. Just ask if you want to see them.
  • I think everyone thinks this, especially when they don’t have the right tools to assist.
    • however you may surprise yourself given we have “trail memory”, I am sure when you travel to your local shops you can quickly find another route when one is blocked. We do have innate navigation skills, the problem is our software is not leveraging this. This is what I am trying to do.
    • Another innate skill is touch, look how the world of mobility changed when devices started to use touch.
  • Yes, and other professions used to complex systems, I suppose I place myself here, but I do recognise my human limitations and that is what I am trying to overcome.

In closing
Thanks all for your valuable comments and inspiration. Do add more if you are interested. I expect the value of your contributions will take a while to manifest but we have started the “Journey” and will one day “tell the story”.

  • Because of TiddlyWiki’s many possible uses, has an interesting result, trying to find “general solutions” in tiddlywiki, are in fact similar to finding “universal solutions”.
  • Finding improved ways to navigate complex information, stands to be as revolutionary as co-opting the human sense of touch, to turbo-charge solutions.

I will do another shorter reply on what I am currently thinking soon. However I still do not want to prejudice your current thinking.

I was talking about this:

My use-case is simple enough: prev/next is opt-in on a per-tag basis, and it will be quite rare for one tiddler to have even two such opted-in tags, and probably never more. The project is a read-only wiki for a mid-sized in-house application. Of the maybe 250 eventual top-level views, perhaps 50% will be Reference, 40% will be Tutorial, 30% each will be Explanation and How-to. (Over 100%, but some will be in multiple categories.) There will probably be about ten tutorials, each one spanning 8 - 12 pages. Most of the tiddlers making up the tutorials will only appear in one, but a few will appear in multiple places.

So for my case, my WizardNav plugin seems to cover the need well. If you’re in a tutorial, you get a footer giving prev/next, and in rare cases, you’ll have two.

But this does not scale to situations where tiddlers can appear in many linear paths. Here your suggestions to improve tag pills makes great deal of sense, although I think there might need to be some way to opt in or out of the various features you present, even on a per-tag basis. I have some thoughts about how to do that, but they’re not even half-formed yet.

I may have a solution for this I developed recently. Especially if only a few tiddlers “appear in more than one linear path”.

It needs a small conceptual leap. I have a package called “masquerade”, it allows one tiddler to masquerade as another.

  • For example create a tiddler “Control Panel” and masquerade $:/ControlPanel
    • When you open the tiddler it looks as if it is the $:/ControlPanel tiddler but it is not, and can have its own tags.
    • Unlike $:/ControlPanel “Control Panel” is now searchable because its not a system tiddler.
  • So when confronted with a tiddler that may appear in more than one “linear path” we can just masquerade the original and put this second tiddler in one path and not the other.
  • If you want you can even give tiddlers, including a masquerading one, an alt-title but still the same content (with my alt-title package)

I am yet to create a button to make it easy to masquerade tiddlers.

  • Looking forward to hearing about them as they mature.
  • The work I/we are doing here may provide some answers as well.

This would require tracking some state about which pathway you’re following, yes?

I considered that for my own work – not that I know how to do so yet, anyway! – and rejected it as being contrary to the spirit of TW. But I’m still new here, so I may be misunderstanding.

I guess the History mechanism must do something similar, so it’s certainly possible, but I don’t see how it would work well. If you’re following Path1, and land on TiddlerA, then click on a normal, non-navigation link to Tiddler B, then follow Path2 back to TiddlerA, what would we expect the navigation links to show, Path1 or Path2? It seems it would only make sense if navigation were restricted to using these links. It just feels awkward. Do you have a way around this problem?

I look forward to seeing more.

Very nice!

I want to say that I wish I’d seen this before starting my own quite similar idea. But I don’t, because it helped me learn much more than if I’d just adopted someone else’s work.

I’m not sure that I have the sort of broad, theoretical solution you’re looking for, but I recently handled a similarly unwieldy list in my own wiki via the tabs macro. The first tab on the “landing page” is the default alphabetic sort; the other tabs each correspond to a category, and some tiddlers belong to multiple categories and so appear in more than one view. If you wanted to present multiple views / paths through the same set of tiddlers, you could alternately have each tab correspond to a different filter.

  • My favorite thing about this approach: since the tabs macro accepts a template, I don’t need a tiddler for each category I want to show. Most of my category tabs correspond to tiddlers that don’t actually exist.
1 Like
  • Think so, use in tiddler navigation that keeps track of the position in the path you are following. If you go elsewhere the last position in the path remains. Also @etardiff has triggered the idea of a Path tiddler inside which the journey occurs.

Great idea, One could even have a tiddler or tab, in which you navigate and only the view the current tiddler in the path, if you divert you open another tiddler with its own navigation, but your original path is retained in the path tiddler.

1 Like

I am currently looking for resources on road and traffic signs because I think most users may be familiar with these. I am particularly interested in the following sources;

  • HTML CSS street signs
  • SVG
  • Unicode

And I am trying to identify which signs to use for the alternative tiddlywiki navigations.

I think you accidentally chose one of the worst examples for me, because I have terrible navigation and topographical skills so no, in this case I really can’t find another route unless it’s a route I’ve been going so many times you could see it with naked eye on an x-ray of my brain :slight_smile:.

In terms of tutorials and documentation I am very doubtful that explicitly exposing non-linearity would make it easier to digest as the barrier is the amount of short-term information a person can hold in their head at once. It could be helpful to experienced consumers, since that makes it easy for them to navigate via the relationships, but I think the most obvious or basic way to consume should be linear for the non-expert.

It’s one of those things where solving the problem will take more time than it will ever save me, so I’ll pass.

I think that’s another good tool for tutorials – once you’re done with one instead of being presented with a blank wall or just “here is this next tutorial” it’d better to give the user a set of options. “Okay, you just learned how to make a character in Godot animate. Here is tutorial on how to make them move around in a platformer setting, here is one for top-down. If you want to add sound to the animation, here is a tutorial for that. For collisions see here…”


I just realized I am still tuck in the tutorial mindset. In terms of how I navigate my own TWs:

  • For the DnD campaign one:
    • I have a Table of Contents grouping things by category so I can use that to find things
    • I have a front page with links to the notes from each session which is what I spend most time interacting with
    • When prepping I’ll usually just use my Go To Shortcut plugin to navigate to a specific tiddler since I usually know their name. Sometimes when I can’t remember a name I’ll go to the category tiddler (Characters, places, scenes, quests, organizations, etc) and scan it to find the name I am looking for.
    • During play I spend most time either on the current session’s notes tiddler or one of the Scenes/Quests tiddler relating to what’s happening during play
  • For my personal notes TW:
    • I almost exclusively use Go To Shortcut to quickly navigate to specific tiddlers since I know them all by name.
    • I also have a front page which lists favorited tiddlers and a TOC in the sidebar that I sometimes use

I don’t really use TW for any other purposes than those and with the exception of Tiddlywiki.com I never really interact with other people’s TWs either.

This reminds me about a plugin I did for TWclassic (2010). There was the possibility to manage as many stories as needed. See Active Stories in the screenshot.

At the bottom of the tiddler there where the next an previous buttons and an indicator, which was part of the NavigatorMacro from Saq. I did add a StoryGlueMacro, that allowed my SelectStoryMacro and the NavigatorMacro to work together.

If a tiddler was active, which was “out of the current story”, but part of a different story, instead of the tiddler-list a Story-List was shown. … Not perfect, but an improvement for me at that time :wink:

There was a plugin, which I did never publish and I can’t find anymore, which showed 2 or more stories at the bottom, if a tiddler was part of several stories. … BUT it was confusing so never published.

1 Like

For this type of “back and forth” searches I use my advanced-search-plus plugin. It allows me to save every search as a new tab to advanced-search. So I can easily switch between “saved” and new searches.

It also adds the advanced-search box to the right sidebar. So it’s possible to have fast access.

I do like a tab-like story river, but there is no implementation at the moment, that fits my needs.

The animation of the zoomin-view is so overwhelmingly distracting for me, that I immediately switch to “classic” whenever I see it.

I depend on the Open tab and the classic story river. … It’s no problem for me to open 30 tiddlers in the story river and switch back and forth between them with the Open tab.

Because … I use some private plugins discussed below.

What I would really like would be a dynamic TOC, OpenTab and StorysTab that shows the “active” tiddler in the story river in the context of the TOC. As prototyped and shown at youtube. TW Table Of Content Refactoring Status - YouTube (I did some brainstorming about “story handling” in the video)

I do use these mechanisms for my own wikis. BUT they only work with the classic story view, because some functionality in the core is missing to work with all “storyviews”.

$:/config/AnimationDuration ?

Putting the Open List into the menubar works pretty well for me with zoomin. I put it in a flex-box with flex-shrink and text-overflow on the children, so it works pretty well even with a larger number of open tiddlers. With some motivation, one could style it to look like tabs if one wanted. I don’t think it’ll work on mobile, but that’s not really a concern for me personally.

Have a nice day
Yaisog

To help us not stray too far from the OT

With replies discussing peoples current navigation methods I thought I would share some of what I have on a key wiki (which by its nature is complex).

  • You see there the content and open/jump dropdowns which are obvious.
  • History is tiddlers I have visited this session and may already have being closed
  • “How to” is a list of documentation tiddlers
  • “New today” is tiddlers created today, I have noticed they are often the most common ones I go looking for, along with recent/recent system tiddlers.
  • Star is projects with a star - the main ones I visit regularly in a list I step through
  • Due are Projectify todo items due today and not done, being due is something needed today.
  • Todays Projects - Are Projectify Projects and sub Projects I have stamped due today - for focus today
  • I have a number of other ways to organise my wiki I will not detail here as they a somewhat Novel and/or experimental.

Why did I share these?

  • To add them to those others are sharing
  • to point out, these are in effect automated/curated lists, lists with a particular view into my wiki, based on available information. As the user of this data however, I do need to think which curated list may have what I am looking for.
  • I wish to point out from the OT, I want to go beyond this kind of navigation into a more intuitive way to navigate the information that is found in the wiki as I navigate it. This has two aspects
    • From where I am, where do the relationships suggest I could go?
    • If following a curated list/path, simultaneously how do I follow that path and yet deal with possible detours the content offers me.

So I am looking to do all this in as simple a representation of the relationships as possible without ignoring relationships that may be worth considering.

  • My current tentative position is using the model of traffic signs to display the possible directions including those to help navigate a curated path for a particular purpose, help handle detours and return to the curated path.
    • I think the a Curated path can be like following the “Tourist Drive” which is a guiding set of signs found where navigating through every day streets, and other signage.
  • Imagine also signs that direct you to the freeway, or the interesting “All Directions” signs found in France :smiley:

So I am starting to focus on this traffic signs metaphor but I am very keen to find out if any of you can think of alternative ones.

  • Well please remain engaged in this discussion because we need diverse users when considering such complex navigation, ideally we may find an approach to “Navigating complex tiddler relationships” that makes it easier for you and a subset of users you represent. Thanks for being so open/Honest.
  • I totally agree and hoped I reflected this earlier. Tutorials, which are a form of “Directed attention” realty benefit from a curated path allowing one to remain focused.
    • However good a Tutorial Path is the learners have different ways to learn eg some prefer doing others prefer reading, others prefer experimenting.
  • I am not asking you “to do this for yourself” but provide input from your perspective so we can do it for everyone.
  • Does your Go To Shortcut Plugin" shared/have link? or perhaps you could describe it.
  • Tiddlywiki classic had this, where it provided a search of only titles for quick navigation.
  • I think search is important complement to navigation but what we are missing (I have and have seen examples) is in “context search”, for example when in the “Filter Operators” tiddler, you should be able to search titles and text of all filter operators and their children but NOT elsewhere.
  • Interesting. Perhaps inspiration for a metaphor for this kind of navigation is the TiddlyWiki story.
  • Which a few of us have done recently and also found it confusing, this is in part why I raised this Topic and want to solve it.
  • To me this seems somewhat similar to my above Menu bar dropdowns, but with search.
  • I cant handle the zoom story, I like the classic + the $:/plugins/tongerner/tiddlersbar plugin but would love to make it sticky above the story.
  • Me too and a mechanism to add this in numerous places.
  • Even if it did not respond to scrolling into position, but say once set the tiddler as the “focused tiddler”
  • Although your automated suggestion is even better (Scroll to focus) this semi-automatic way is complementary.
  • When we click a link it opens an gains focus, but what if shift-click on any link opened it but did not give it focus, then where you came from retains focus.
    • A message catcher on navigation events (within each tiddler on a path) could differentiate between links to tiddlers on the path and not on the path, and manage the focus differently ie keep the focus on the path.