Page MenuHomePhabricator

Create user script for Cat-a-lot year filter
Open, Needs TriagePublic

Description

This task is for creating a user script which will be a proof-of-concept on how the year filter would work. The basic idea is to create a similar year selection widget that is used in Fortepan. This task contains the client side (= code executed in browser part), and as it uses QLever as the backend, it would work independently without creating the server side parts first.

Example UI

Required features

  • ability to select specific year using slider
  • ability to show images between start and end years as alternative for specific year
  • show filtered images as imagegrid
  • In the UI, there should be the ability to define a PetScan ID as a photo source. Use 33506148 as the default PetScan ID.

Source photos

Implementation

if (mw.config.get("wgPageName") !== "Special:BlankPage/Cat-a-lot_yearfilter") { return; }

Example SPARQL queries for year filtering

SPARQL Query using specific year

PREFIX wd: <http://www.wikidata.org/entity/>
PREFIX wdt: <http://www.wikidata.org/prop/direct/>
SELECT * WHERE {
    ?media wdt:P9478 ?finna_id .
    ?media wdt:P571 ?inception .
    ?media schema:url ?image.
    FILTER(YEAR(?inception) = 1965)
}
LIMIT 100

SPARQL Query using between start and end year
https://qlever.cs.uni-freiburg.de/wikimedia-commons/Xt4YYw

PREFIX wd: <http://www.wikidata.org/entity/>
PREFIX wdt: <http://www.wikidata.org/prop/direct/>
SELECT * WHERE {
    ?media wdt:P9478 ?finna_id .
    ?media wdt:P571 ?inception .
    ?media schema:url ?image.
    FILTER(YEAR(?inception) >= 1923 && YEAR(?inception) <= 1968)
}
LIMIT 100

SPARQL query where target photos are defined using mediates
mediaitem = "sdc:M" + page_id

  • use POST instead of GET
  • basically number of items in VALUES keyword is unlimited. It is OK to list 50000 mediaitems.
PREFIX wd: <http://www.wikidata.org/entity/>
PREFIX wdt: <http://www.wikidata.org/prop/direct/>
SELECT * WHERE {
    VALUES ?media {  sdc:M100129757 sdc:M100212050 sdc:M100254412 }
    ?media wdt:P571 ?inception .
    ?media schema:url ?image.
    FILTER(YEAR(?inception) >= 1923 && YEAR(?inception) <= 1968)
}
LIMIT 100

SPARQL query using Javascript example

/* <nowiki>
 * Minimal QLever SPARQL Query Script for Wikimedia Commons using POST
 */
(function() {
    // QLever SPARQL endpoint for Wikimedia Commons
    var endpoint = 'https://qlever.cs.uni-freiburg.de/api/wikimedia-commons';

    // SPARQL query as a template literal
    var sparqlQuery = `
        PREFIX wd: <http://www.wikidata.org/entity/>
        PREFIX wdt: <http://www.wikidata.org/prop/direct/>
        PREFIX schema: <http://schema.org/>
        SELECT ?media ?inception ?image WHERE {
            ?media wdt:P9478 ?finna_id .
            ?media wdt:P571 ?inception .
            ?media schema:url ?image .
            FILTER(YEAR(?inception) >= 1923 && YEAR(?inception) <= 1968)
        }
        LIMIT 20
    `;

    // Prepare POST parameters by URL-encoding the query and desired output format
    var postParams = 'query=' + encodeURIComponent(sparqlQuery) + '&format=json';

    // Execute the POST request using the fetch API
    fetch(endpoint, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: postParams
    })
    .then(function(response) {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(function(data) {
        console.log("SPARQL Query Results:", data);
        // Add any additional processing or display logic for the results here.
    })
    .catch(function(error) {
        console.error("Error running SPARQL query:", error);
    });
})();

Event Timeline

Hi @Zache, I'd like to start working on this task. Based on the prompt, I’ll:

  • Build a client-side user script for Wikimedia Commons that adds a year-filtering widget
  • Use PetScan as the image source and QLever SPARQL for year-based filtering.
  • Implement:
    • A slider for single-year/range selection.
    • Thumbnail grid rendering.
    • field to define a PetScan ID as a photo source
    • Caching to avoid redundant PetScan/SPARQL queries.

Let me know if you’d like me to follow any particular approach or prioritize specific subtasks. I’ll share progress updates as I go!
Thanks!

Go for it.

I think that it would be good idea to use similar html structure for images what gallery tag is using. ( example, so it is easy to adapt cat-a-lot to it)

Another note is that if you haven't used SPARQL before, LLMs are pretty good at modifying existing queries. For example Claude.ai and ChatGPT. However, one caveat is that they systematically hallucinate the identifiers (wdt:P123, wd:Q123 etc. values), so they need to be either stated explicitly when asking an LLM to modify the query or fixed by hand afterwards. However, SPARQL syntax itself is usually good.

Thanks for the green light and helpful notes! I’ll keep you posted on progress and reach out if I hit blockers.

Hey @Zache, I've made significant progress on the year filter userscript and believe it now aligns well with the task requirements. Here's a summary of the current implementation:

Core Features:

  • Range slider and single-year selection
  • Dynamic PetScan ID input with default preset
  • SPARQL-backed filtering via QLever
  • Responsive gallery grid with lazy loading
  • Auto-adjusts to dataset's year range

Testing Instructions

  • Add the following to your common.js mw.loader.load('//commons.wikimedia.org/wiki/User:Adiba_anjum3/cat-a-lot-yearfilter.js?action=raw&ctype=text/javascript');
  • Live testable version at: Your_Special:BlankPage/Cat-a-lot_yearfilter

Please let me know your opinion. Thank you for your guidance!