Proposal for Asynchronous Loading of Item Tooltips on the Wiki

[rahmani]

Hello Project 1999 Community,

I've been exploring ways to enhance the user experience on our wiki, particularly concerning the loading efficiency of pages with transcluded item templates, like {{:Ice Crystal Staff}}. The current setup requires the entire page content, including item templates, to be fully loaded before rendering, which can be time-consuming.

To address this, I've developed a method to asynchronously load item data. The core idea is to initially load a placeholder for each item, and then fetch the item details in the background after the page loads. This approach significantly accelerates the initial page load time.

Here's the implementation outline:

1. JavaScript Code: This script will replace each item placeholder with the actual item link and details fetched asynchronously.
   
   

   $(document).ready(function() {
       $('.item-data-placeholder').each(function() {
           var itemId = this.id.substring(10);  // Trims "item-data-" prefix
           var $this = $(this);
           $.get(mw.util.wikiScript('api'), {
               action: 'expandtemplates',
               text: '{{:' + itemId + '}}',
               prop: 'wikitext',
               format: 'json'
           }, function(data) {
               var wikitext = data.expandtemplates.wikitext;
               $.get(mw.util.wikiScript('api'), {
                   action: 'parse',
                   contentmodel: 'wikitext',
                   text: wikitext,
                   prop: 'text',
                   format: 'json'
               }, function(data) {
                   var itemData = data.parse.text['*'];
                   var itemLink = mw.util.getUrl(itemId);
                   $this.html('<a href="' + itemLink + '">' + itemData + '</a>');
               });
           });
       });
   });

2. Template: ItemLink: This is a simple placeholder template for each item.
   
   

   <span id="item-data-{{{1}}}" class="item-data-placeholder">[[{{{1}}}]]</span>

3. Usage Example in Wikitext: This demonstrates how to use the ItemLink template in a page.
   
   

   == [[Bard]] ==
   * '''Ears'''      - {{ItemLink|Black Sapphire Electrum Earring}}
   * '''Fingers'''   - {{ItemLink|Djarn's Amethyst Ring}}, {{ItemLink|Platinum Fire Wedding Ring}}
   [ ... and so on for other items ... ]

The implementation ensures that the page becomes visible and interactive much faster, while item details are fetched and displayed subsequently. This should create a smoother and more responsive user experience.

I hope this solution can be useful for our community. If anyone with admin access to the wiki is interested, I'd be glad to assist in implementing this feature.

Best regards,
Rahmani

[rahmani]

PS:

I've been tinkering with something on my own wikis that got me thinking about potential future enhancements for the Project 1999 Wiki, particularly in the realm of search functionality. CirrusSearch essentially draws relationship graphs between mediawiki pages using Elasticsearch. I'm using it on my wikis, but I'm aware it's not currently a part of the Project 1999 Wiki setup.

CirrusSearch is a big step up from traditional MediaWiki search tools. It can handle complex searches and categorizing content accurately. This is especially relevant when we consider the distinction between in-game items and the templates used on the wiki.

For instance, consider the way we're currently handling items with templates like {{:Ice Crystal Staff}} and {{ItemLink|Ice Crystal Staff}}. These serve very different functions, yet in terms of search and categorization, they might be treated similarly. If the wiki ever decided to use a network search tool, it could lead to dramatically less efficient searches and more convoluted relationship graphs.

If the Project 1999 Wiki ever considers adopting CirrusSearch, it could improve really improve the content searching.

I'm just putting this out there as a thought. I realize that integrating CirrusSearch might not be on the radar for the Project 1999 Wiki admins, but from my experience, it's a tool that could offer significant benefits in terms of search efficiency and data organization.

[rahmani]

After fiddling around a bit more, this will only trigger API calls to the mediawiki whenever someone hovers their mouse over an item, which should dramatically reduce the server load on the wiki

$(document).ready(function() {
    $('.item-data-placeholder').mouseenter(function() {
        var $this = $(this);
        // Check if the data has already been fetched
        if (!$this.data('fetched')) {
            var itemId = this.id.replace('item-data-', '');  // Trims "item-data-" prefix
            $.get(mw.util.wikiScript('api'), {
                action: 'parse',
                contentmodel: 'wikitext',
                text: '{{:' + itemId + '}}',
                prop: 'text',
                format: 'json'
            }, function(data) {
                var itemData = data.parse.text['*'];
                var itemLink = mw.util.getUrl(itemId);
                $this.html('<a href="' + itemLink + '">' + itemData + '</a>');
                // Mark the data as fetched
                $this.data('fetched', true);
            });
        }
    });
});

[rahmani]

I'd love to get some feedback on this proposal. I have implemented this on my own version of the wiki, and pages with large amounts of item links load almost instantly -- at the expense of asynchronous calls after load.

[loramin]

Maybe I can provide some helpful context.

Originally Posted by rahmani

CirrusSearch is a big step up from traditional MediaWiki search tools

I don't think this will ever happen at wiki.project1999.com. You'd have to convince Rogean to install, host, and maintain that whole new app (in addition to P99 itself, the existing wiki, this forum, and everything else he manages) ... and I just don't see that happening.

But if you really want to see it happen, you could get a Digital Ocean droplet, AWS EC2 instance, etc. for <$10/month and host it yourself. You'd have to migrate the wiki data, but if the new wiki is better, people will use it. Just look at the success of third-party hosted auction sites (which replaced the wiki's auction tracker, for lots of people at least).

{{:Ice Crystal Staff}} and {{ItemLink|Ice Crystal Staff}}

Just to clarify, your solution could be implemented today, with only a new template (ItemLink) and custom JS. However, changing the built-in {{:Ice Crystal Staff}} would be a lot more challenging, as it actually relies on a custom PHP extension, which (I believe) embeds the code for the Ice Crystal staff on the page.

(In theory, that approach should be faster than fetching the Ice Crystal Staff page via AJAX, so I'm curious why that isn't the case. Any thoughts?)

If anyone with admin access to the wiki is interested

Here's the thing: we have other wiki admins, but I don't know if any of them know Javascript. I am an admin who knows JS (and wrote a lot of the custom JS in the wiki) ... but I no longer play. Honestly, you lucked out with me even checking the forum today.

So, sadly, my desire to test and debug your code (for a wiki for a game I don't play) is extremely low. If you can find another wiki admin who knows the JS, really they would be a better option.

But since I don't think there is such an option, here's what I'll recommend. First, go take a look at https://wiki.project1999.com/MediaWiki:Common.js. It's the JS included on every page, so it would handle something like item links ... although as you'll see, a lot of "features" are kept in separate files, and brought in via the wiki's wannabe-version of require, eg. importScript('MediaWiki:Zones.js').

Step two: simulate (using the dev tools) adding your code. Just dynamically append a script tag with the code in it, or something. But then here's the key part: test it, HEAVILY. Test it on all kinds of different pages, and test it to the point you're 99.9% certain it won't break anything.

Step three: give me the file for your code, the exact code changes I'll need to make to Common.js, and where exactly I'll need to make ithem.

If you do all that, plus one last thing, I'll see what I can do about getting the code in. What's that "one more thing"?

Convince me that you also have a plan to fix all the existing {{: links ... or that the wiki will truly be better off with two types of links, one of which is rare, more verbose, and loads slightly quicker.

P.S. I'd recommend PMing me instead of (or in addition to) posting back here. I don't read the forum regularly, but PMs email me.

[loramin]

P.S. Here is the admin list: https://wiki.project1999.com/index.p...sysop&limit=50. Ravhin is the original wiki god, but he no longer plays, so I'd rule him out. Same for Rogean: he ain't got time for this.

Any of the rest might be active and might know JS: you'd have to use wiki talk or the forum PM system (most people have the same forum/wiki name) to ask if they still play (and know JS).

[Xitayasl]

Originally Posted by rahmani [You must be logged in to view images. Log in or Register.]

Hello Project 1999 Community,

I've been exploring ways to enhance the user experience on our wiki, particularly concerning the loading efficiency of pages with transcluded item templates, like {{:Ice Crystal Staff}}. The current setup requires the entire page content, including item templates, to be fully loaded before rendering, which can be time-consuming.

To address this, I've developed a method to asynchronously load item data. The core idea is to initially load a placeholder for each item, and then fetch the item details in the background after the page loads. This approach significantly accelerates the initial page load time.

Here's the implementation outline:

1. JavaScript Code: This script will replace each item placeholder with the actual item link and details fetched asynchronously.
   
   

   $(document).ready(function() {
       $('.item-data-placeholder').each(function() {
           var itemId = this.id.substring(10);  // Trims "item-data-" prefix
           var $this = $(this);
           $.get(mw.util.wikiScript('api'), {
               action: 'expandtemplates',
               text: '{{:' + itemId + '}}',
               prop: 'wikitext',
               format: 'json'
           }, function(data) {
               var wikitext = data.expandtemplates.wikitext;
               $.get(mw.util.wikiScript('api'), {
                   action: 'parse',
                   contentmodel: 'wikitext',
                   text: wikitext,
                   prop: 'text',
                   format: 'json'
               }, function(data) {
                   var itemData = data.parse.text['*'];
                   var itemLink = mw.util.getUrl(itemId);
                   $this.html('<a href="' + itemLink + '">' + itemData + '</a>');
               });
           });
       });
   });

2. Template: ItemLink: This is a simple placeholder template for each item.
   
   

   <span id="item-data-{{{1}}}" class="item-data-placeholder">[[{{{1}}}]]</span>

3. Usage Example in Wikitext: This demonstrates how to use the ItemLink template in a page.
   
   

   == [[Bard]] ==
   * '''Ears'''      - {{ItemLink|Black Sapphire Electrum Earring}}
   * '''Fingers'''   - {{ItemLink|Djarn's Amethyst Ring}}, {{ItemLink|Platinum Fire Wedding Ring}}
   [ ... and so on for other items ... ]

The implementation ensures that the page becomes visible and interactive much faster, while item details are fetched and displayed subsequently. This should create a smoother and more responsive user experience.

I hope this solution can be useful for our community. If anyone with admin access to the wiki is interested, I'd be glad to assist in implementing this feature.

Best regards,
Rahmani

You've done a great job that will definitely be beneficial to us. Thank you!