Dropdown with thousands of items

#1

Hi Folks,

I’ve a tiddler that has a dropdown - with a list of static items (non-tagged).

  • The dropdown has many items listed - thousands

I would like to be able to qualify them:

Closed by default - only the “top-level” group is shown.

So - I want to see:

  • Item 1 (Group)
  • Item 2 (Group)
  • Item 3 (Group)
    ,…

And not this:

  • Item 1 (Group)
    ** Item 1a (Group)
    ** Item 1a1 (Group)
    *** Item A
    *** Item B
    *** Item C
  • Item 2 (Group)
    ** Item 2a (Group)
    ** Item 2a1 (Group)
    *** Item A
    *** Item B
    *** Item C
  • Item 3 (Group)
    ** Item 3a (Group)
    ** Item 3a1 (Group)
    *** Item A
    *** Item B
    *** Item C
    ,…

Also, I would like to have them “open” as I click on them:

  • Item 1 ← clicked
    ** Opens: Itesm 1a <— clicked
    *** Opens: Item 1a1 <— clicked
    **** Item A
    **** Item B
    **** Item C
    ,…
  • Item 2 (Group)
  • Item 3 (Group)
    ,…

This allows me to have as many items as I like.

Is this possible in TiddlyWiki?

I looked on:

  • TiddlyWiki site - searched dropdown, toc, css, etc.
  • Google - above plus some
  • Reddit - above - (I went down the rabbit hole - scary)
  • Google Groups - not much there

And pretty much exhausted myself,… :frowning:

Any ideas on how to do this?

Thanks,

TwN00b

#2

It sounds like you’re describing something like the <<toc-selective-expandable>> macro (take a look at the “Selective” tab here for a demo and comparison with the other TOC macros). You could put this in a $reveal popup (“dropdown”) in the same way you put anything else in a $reveal popup, though you’d need to include class="tc-popup-keep" to prevent the popup from closing when you click inside it.

However, the core TOC macros do depend on tag relationships, so you’ll need a variation if your data structure isn’t based on tags. I’d take a look at @pmario’s TocP plugin and/or @EricShulman’s TiddlyTools TOC, to begin with; both adapt the TOC macros to work with another field of your choice. If neither meets your needs out of the box, they may give you a good place to start.

Could you say more about your current/ideal data structure? What’s the relationship between Item 1, Item 1a1, and Item A? This will probably inform the kind of solution you need.

Depending on the complexity of your data structure (and on how you intend to use items in the tree structure—are they links? buttons? is it a navigational aid like the Contents tab on tiddlywiki.com?) you may also wish to consider an alternative presentation—for instance, a set of $select widgets, where each selection determines the options available at the next level. I say this in part because rendering a list of thousands of items may introduce some noticeable lag in your browser, even if you don’t have all the nodes open at once—and more complex items (e.g. a button vs. a simple link) will compound the issue.

If you do start to experience lag when displaying long/complex lists, you may want to consider adding an eventcatcher. Here’s a good introduction by @Scott_Sauyet and another demo by @CodaCoder.

#3

Wow and Thanks @etardiff - you’ve given me a lot to be able to look over.

I have a local Dictionary that I created - that has 50,000 items - and each item is unique.

I do have them categorized and with about 5 sub-panels - should be able to get pretty much anywhere.

My options are:

  1. Search the dictionary and generate a list based on then Index - - but that’s a waste - from what I’ve been reading
  2. Precreate my dropdown list - using the Select Widget (I learned about these a few days back)
    a. https://tiddlywiki.com/static/SelectWidget.html
    b My gut says that:
    1. Using a “list filter” on a dictionary - to generate content - each time the drop-down is selected - is more expensive than just using a Static DropDown - unsure though
  3. Keep it simple and make it a multi-step approach
    a. Popup 1 → Set’s “Field/Popup1” ( that will be used in Popup 2 )
    b. Popup 2 → Set’s “Field/Popup2” ( that will be used in Popup 3 )
    c. Popup 3 → Set’s “Field/Popup3” ( that will be used in Popup 4 )
    d. Popup 4 → Set’s “Field/Popup4” ( that will be used in Popup 5 )
    e. Popup 5 → Set’s “Field/DisplayMe” ( that in turn shows what I need from the Dictionary )
  4. See if I can decipher and use something you posted ← This is my hope

As for data - I’ve a small sample dictionary shared here - that can be used:

image
image1224×461 151 KB

From there - you can see the “DropDown” menus:

And - from there - I need to select the:

  • Chapter ← This is the Book Chapter
    • Verse ← This is the Chapters Verse

This said - this is actually a small Dictionary - the one I want to actually work with (a personal one) is close to 2 million lines - aka indexes. I actually think TiddlyWIki will be OK with this - (just a gut feeling from a consumer - not dev person).

I hope this helps - and Thanks - I will look at this in a couple of hours.

Regards,

TwN00b - The passionate TiddlyWiki Consumer,… :slight_smile:

#4

Just to help put this in context, when using single file wikis, the whole wiki is loaded into memory, and many features such as tags and tiddler titles have caches to improve look up performance. This really means performance is usually very good.

The question then become which interface to use when dealing with long lists.

  • Well the obvious one is search in the side bar as an example. See Customising search results
  • Inside a tiddler use the link button, Ctrl-L then start typing, this is a simpler version of search.

If you find an element or approach within tiddlywiki, arguably any website, you can make a version of it within tiddlywiki.

As a designer you need to find the best way to cope with the amount of data you wish to search.

1 Like
#6

Your link to sample page, does not look like your screenshot. – Did you fix the problem?

#7

Hi @pmario ,

I could not make heads-or-tails of the docs - so I created three drop-downs ,…

  • The first to select the Old or New Testatment
  • The second to select the book therein
  • The last to select the corresponding chapter

It’s fast - and that’s what I am going for - and will suffice - until I learn more.

Thanks,

TwN00b

#8

I think this is a reasonable approach and you can store the selected results and use the values as context, so you can go to the next in each level.

If you can create a tiddler which when displayed allows you list and browse through a large, perhaps selectable table of contents you can make a button that opens this tiddler in a modal to make a selection.

  • When selecting from large lists apparently the LinkCatcherWidget is an efficient way
  • On desktops you can even open the aforementioned TOC tiddler in a new window and in effect “Remote Control” your wiki, great for multiple screens.
#9

Thanks @TW_Tones - I am reading the LinkCatcherWidget docs now - to see if I can leverage them.

Thanks Again!

TwN00b