Sort galleries randomly

[thebrokenfacade]

Please describe your suggestion, and the problem it'd solve.
My collection has exceeded 50,000 items in over 500 pages in lanraragi. It would be nice to have the ability to sort the galleries randomly both when a search filter has been applied, and on the landing page before a search is applied.

This would help prevent people with large collections from seeing the same few doujin all the time. It could also help rediscover old forgotten favorites, or discover new ones.

Hopefully this is easy to implement.

[Difegue]

The carousel on top of the index page does this already: It presents random archives from the current search filter, or the entire DB if there's no search.

I don't plan on adding random sorting to search results themselves as I think it'd make no sense from a UX perspective.

[thebrokenfacade]

My intent with this message is not to be argumentative or combative, but the better explain why I thought adding a random sort may be beneficial specifically from a UX standpoint and not just for my use case with a large collection. Who knows, perhaps it will change your mind. Either way, thank you for your time and for developing this app. It is awesome.

As an example, let us consider how many motions (scrolling, clicking, etc.) it takes to user to look at the thumbnails of about 100 archives. We will assume the user wants randomly selected archives, otherwise they would not use the carousel in the first place. I will use the number of motions determined in the third and fifth paragraphs for my calculations.

The carousel displays a maximum of 15 archives each time it is refreshed. To view 100 archives the carousel would need to be refreshed 6 times. On a 1440p monitor, it takes 7 clicks of the 'next' button in the carousel to view those 15 archives. If the mouse wheel is used instead of the button, it takes 2-3 scrolls to see all 15 archives. On that final scroll immediately after the 15th archive is displayed, continuing to scroll moves the entire page down. That means if you lose track of how close you are to that 15th archive and scroll an extra time, or that 15th archive is displayed mid-scroll and you do not immediately stop scrolling, instead of scrolling the carousel horizontally, suddenly you are scrolling the entire page vertically. At that point you have to scroll back up to the top of the page to see the carousel again.

At best, it takes 20 movements to view 105 archives with the carousel. 14 scrolls to view all the archives and 6 clicks on the 'refresh selection' button. That is assuming you never over-scroll as described in the third paragraph. Any over-scrolling just adds extra movements to the ideal count above. Also, the page suddenly moving vertically when the user over-scrolls is jarring; not great for UX. If the 'next' button is used in the carousel it would take 55 movements to view 105 archives. 49 clicks of the 'next' button to view all the archives and 6 clicks on the 'refresh selection' button. Neither of these cases consider moving the mouse to click on the 'refresh selection' button which would add another movement on the first page.

If a random sort could be applied to the main thumbnail container, 100 archives could be looked at on a single page. On a 1440p monitor, it takes 3-4 scrolls to get to the bottom of a page. Once the bottom of the page is reached, continuing to scroll does not have some unexpected behavior: it just stops scrolling. Thus it only takes at most 4 movements to view 100 archive thumbnails and there is no possibility of the page behaving unexpectedly using a random sort in the main thumbnail container.

That means that using the carousel is at best 5x (20/4=5) less efficient than having a random sort option for the main page in terms of the motions or actions required to view about 100 thumbnails. At worst it is 18x (55/3=18.33) less efficient in terms of the motions required to view about 100 thumbnails.

I am not a UX designer, or even a coder, so perhaps there is some other reason not to implement a random sorting feature that I am not considering. But to me, at least a 5x improvement in efficiency for the user seems compelling.

[Difegue]

Thanks for the detailed insight! I certainly appreciate it. Likewise, I hope you didn't take my original comment as aggressive, I did write it in a hurry so it might've been a bit too dry. 😅

As far as your calculations go, they're certainly correct from an efficiency standpoint! However:

• The carousel is always present and doesn't require an extra click to get in 'n out like a random sort option would do. I believe it's a more "natural" entrypoint for random content as a result, and that's kinda what you want for that whole "rediscovering old content" aspect. (and feedback I've received certainly goes that way!)
• Most users are... Not going to look for a hundred+ random archives! 👀 The usual flow, from what I've seen, is closer to finding a few interesting books out of the 10-20 first random results, and naturally following on that by either opening them or running a search for related tags/artists.
• You could argue that the carousel can stay and random sort added as an extra option, but in that case where does it go? The most obvious place is in the sort by: dropdown, but that's only a thing for thumbnail mode, not the compact table view that's also an option.
• I will concede the overscrolling issue on the current iteration of the carousel though 😬 I think that's an issue with the library I use for it, and I'd like to have that fixed in the future.

That's the kind of stuff I mean by UX, as it's not only about raw efficiency but also trying to have an interface that's usable at first glance by the layman without drowning them in poweruser options right off the gate. (*cough hydrus*)
It's obviously not perfect in its current state either, since there's always a balancing act between the desired state of things and how much javascript I have to throw into the beast to get there. 🥲

But I'm not a professional designer either (and even if I was that wouldn't magically make me immune to criticism), so I'm always open to hear suggestions from others!
Since this issue now has a lot of words™️ in it I'll convert it to a GH discussion, so that others can see it and chime on the idea if they want to. 👍

[thebrokenfacade]

Not a problem. I just did not want to come off as a whiny entitled user after being told 'no'. I also see how much energy it would take to respond fully and politely to each of the 300+ issues on github.

[thebrokenfacade]

The carousel certainly is nice for quickly finding a random archive to read. I do think it should stay for the same reasons of accessability and for non-powerusers that you mentioned.

My use case is likely quite rare in that I download every english archive with a rating of more than 2 stars from my favorite site. This is for archival purposes just in case the site gets shut down. That means there is a large portion of my 52,000+ item collection that really does not interest me. With a sample size of only 15, the chances that none of the archives in the carousel apeal to me is quite high.

If it is not too difficult to implement, and it is a change you think would be worth making, it seems like just adding a random sort to the dropdown in the thumbnail view would be a good compromise on the UX efficiency and ease of use for new users. It would make the app useful in more use cases for more people, but also not clutter up the ui. The sort dropdown has 17 options for me right now; I think one more would not be a problem. Also, if the compact table view does not have the dropdown in the first place, I don't see why it would have any weight on decisions about the dropdown.

As an aside, if possible, adding the dropdown to the complact table view would be cool too. I personally never use it, but it seems odd that both views do not have the same sort features.

From the coding side, I have no idea how difficult 'simply' adding a random sort option would be. I know just enough to dramatically underestimate the effort required :-).

[cazendium]

Please describe your suggestion, and the problem it'd solve. My collection has exceeded 50,000 items in over 500 pages in lanraragi. It would be nice to have the ability to sort the galleries randomly both when a search filter has been applied, and on the landing page before a search is applied.

This would help prevent people with large collections from seeing the same few doujin all the time. It could also help rediscover old forgotten favorites, or discover new ones.

Hopefully this is easy to implement.

@thebrokenfacade I agree that if you have lots of duplications and a large library it’s easy to forget many archives.

I got it working on my end rather easily. You can reuse the same code that randomly selects archives for the carousel, then clear the thumb container and append the results into it. I set this function to a “shuffle” button that will give me 300 random archives. It works in categories too.

It’s a temporary solution for now, but at least I don’t end up favouring archives at the very beginning or end of my categories (or I’m just less likely to get to the middle) and I can easily rediscover old archives with less limitations.

edit: I just tested with searches and it works for that too

[thebrokenfacade]

Nice! I've been out of the scene since my last post. Is there a specific file you had to edit or is it a more complicated mod? I'd like to give this a shot.

To clarify, does this change the functionality of the carousel to show more entries or does it impliment the carousel's code into a sorting option for the main pages?

[cazendium]

Nice! I've been out of the scene since my last post. Is there a specific file you had to edit or is it a more complicated mod? I'd like to give this a shot.

Yes, @thebrokenfacade you can apply these changes to /public/js/index.js

LANraragi/public/js/index.js

Line 326 in a260e16

endpoint = `/api/search/random?filter=${IndexTable.currentSearch}&category=${Index.selectedCategory}&count=15`;

Notice a count there for number of randomly picked archives. That's for the carousel.

I basically copied the whole function, Index.updateCarousel = function (e) { and pasted it just below it, and kept what I think I needed to achieve this:

Index.shuffleArchives = function (e) {
    e?.preventDefault();
    let endpoint = `/api/search/random?filter=${IndexTable.currentSearch}&category=${Index.selectedCategory}&count=300`;
    document.getElementById("thumbs_container").innerHTML = "";
    const div = $("#thumbs_container");

    Server.callAPI(endpoint, "GET", null, "Error getting carousel data!",
        (results) => {
            const slides = results.data
                .map((archive) => LRR.buildThumbnailDiv(archive));
            div.append(slides);
        },
    );
};

Then find Index.loadCategories = function () {, after let html = "";, you can append the shuffle button at line 588

LANraragi/public/js/index.js

Lines 580 to 588 in a260e16

	Index.loadCategories = function () {
	Server.callAPI("/api/categories", "GET", null, "Couldn't load categories",
	(data) => {
	// Sort by LastUsed + pinned
	// Pinned categories are shown at the beginning
	data.sort((a, b) => parseFloat(b.last_used) - parseFloat(a.last_used));
	data.sort((a, b) => parseFloat(b.pinned) - parseFloat(a.pinned));
	let html = "";

Something like:

html += `<div style='display:inline-block'>
                <input class='favtag-btn' 
                        type='button' id='shuffle' value='🔀 Shuffle' 
                        onclick='Index.shuffleArchives()'/>
            </div>`;

I've made a lot of changes to my LRR, but I'm pretty sure you're good to go to just copy and paste this. You should let me know if it works or not, so I can update what I shared. You probably want to update the error message to something accurate.

To clarify, does this change the functionality of the carousel to show more entries or does it impliment the carousel's code into a sorting option for the main pages?

The code I shared doesn't change the carousel. It just calls the same API that the carousel uses when you press the "shuffle" button. But instead of 15 archives in the carousel, you get 300 archives in your main feed. The thumb container gets emptied and the shuffled results are put there.

If you change pages it'll just go back to how it's supposed to be, you'll have to do the rest if you actually want a random sort order. But realistically you're probably just gonna hit the shuffle button again instead of going to the next page anyway.

[thebrokenfacade]

That worked without any issues on a fresh install of Lanraragi from source on a PopOS system.

As an aside, I did use distrobox to set up a virtual ubuntu 23.10 environment so that all the build dependancies did not clutter my system. I am not sure if there might be some dependacy issue on a standard Pop!_OS system.

I would note for the giga-noobs that let html = ""; will no longer be on line 588 after the Index.shuffleArchives = function (e) { stuff is added. It will be further down in the file. For me it was around line 604. Just in case someone blindly pastes that at line 588. Also, I would recommend making a copy of the index.js before editing the file so that is something goes wrong the user can restore the original file. I remember back in the day that was the kind of stuff that would trip me up when trying to follow a guide.

I'll see if I can mess around with it some more to get another 🔀 Shuffle button at the bottom of the page too so you don't have to scroll back up to click it again.

[cazendium]

That worked without any issues on a fresh install of Lanraragi from source on a PopOS system.

Glad it worked 👍

I'll see if I can mess around with it some more to get another 🔀 Shuffle button at the bottom of the page too so you don't have to scroll back up to click it again.

/templates/index.html.tt2 if you wanna add the button there alongside the sort buttons its around these lines right here (127-148):

LANraragi/templates/index.html.tt2

Lines 127 to 148 in a260e16

	<div class="table-options" style="display: none;">
	<div class="thumbnail-options">Sort by:
	<select class="favtag-btn" id="namespace-sortby">
	<option selected value="title">Title</option>
	<option selected value="date_added">Date</option>
	</select>
	<a class="fa fa-sort-alpha-down fa-2x table-option" id="order-sortby" href="#"
	title="Sort Order"></a>
	<input id="thumbnail-crop" class="fa table-option" type="checkbox"
	title="If enabled, thumbnails that don't fit a regular A4 page will be cropped to only show the left side.">
	<label for="thumbnail-crop" style="vertical-align: middle; padding-top:6px">Crop thumbnails</label>
	</div>
	<div style="margin-left:auto">Go to Page:
	<select class="favtag-btn" id="page-select">
	</select>
	<a class="fa fa-list fa-2x mode-toggle thumbnail-toggle table-option" href="#"
	title="Switch to Compact Mode"></a>
	<a class="fa fa-table fa-2x mode-toggle compact-toggle table-option" href="#"
	title="Switch to Thumbnail Mode"></a>
	</div>
	</div>

Instead of an emoji, you can use "fas fa-random" their website if you want more consistency, since LRR uses Font Awesome.

[thebrokenfacade]

So I wound up NOT adding the bit of the index.js mod about html += '<div style='display:inline-block'> because it gets mixed in with the catagories that I have. Assuming anyone actually adds several catagories the shuffle button can get tough to find. That and it looks goofy being so far from the table of galleries that it shuffles.

Instead I added

<div>
     <input class='favtag-btn' 
          type='button' id='shuffle' value='🔀 Shuffle' 
          onclick='Index.shuffleArchives()'/>
</div>

into /templates/index.html.tt2 at line 149 just after the table-options div and at line 174 just after the itg datatables div in the unmodified html file. This adds a shuffle button just above the Showing 1 to 100 of xxxx ancient chinese lithographies and at the bottom of the page below the paginator.

I'll try to edit this later with the actual blocks of code I used once I figure out how to do that properly in a reply.

[cazendium]

Yeah, I decided to move it beside the page buttons, so it's accessible when I get to the bottom of the page / shuffled results