@Zache I've enhanced the PetScan Cat-a-lot integration script with these key improvements:

@Zache All the requested improvements have been successfully implemented:

@Zache These are actually some much better ideas. Thank you. I will be working on it this week.

@Zache Thanks for the feedback! Working on it. I would love to hear the ideas for this too.

@Zache Thanks for the feedback! I will make these changes shortly.

Hi @Tacsipacsi . This is my attempt on this task

1. Cat-a-lot Scratchpad Implementation

Thanks for this!
-I made a temporary change to the cat-a-lot and forgot to undo it, hence the selector stopped working correctly. I have fixed that

• I've changed the separator from pipe (|) to %0D%0A
• I've changed limit to output_limit as requested
• I have replaced the undeercsore with spacing and it now wraps properly
• I have also fixed the auto load issue
• For the empty line under tabs, I chnaged the margin-bottom from 15px to 0 of the .petscan-tab-buttons
• I added a max-width of 250px to limit the width of the PetScan ID field

-I alos removed the line of code that shows the state/status message of the autoload
Please let me know if these fixes were effective. I appreciate the feedback!

@Zache Noted!
I have made the necessary adjustments to the PetScan Cat-a-lot Integration script based on your feedback.

In T389739#10693331, @Zache wrote:

Thanks, it looks pretty cool! Just some notes

Interface loading
Currently the Petscan interface loads itself on every page. It should load iteself only when it is in Special:BlankPage/Cat-a-lot . You can do the page test like this:

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

Basic tab
Create new Petscan Query link doesn't work (ie. incorrect parameter values). You can use this to open Petscan query UI with Wikimedia Commons preselected
https://petscan.wmcloud.org/?project=wikimedia&language=commons

Categories tab
1.) Currently Categories (one per line) breaks if there is more than one Category. Reason is that it uses %0D%0A as separator and not %7C (%0D = carriage return ; %0A = line feed per w3school) I just checked from PetScan generated url:s what is the correct syntax.

• Example: https://petscan.wmcloud.org/?psid=33373583&categories=Helsinki%7CSuomenlinna&depth=4&limit=100

2.) Category Combination
Category Combination selector could be moved to between Category and negative categories box as it only effects to categories. Negative categories are always "AND". It could also use same labels than Petscan so we can use directly Petstan translations if needed. (ie. Combination, Intersection, Union )

3.) Default depth could be decreased to 2 ( it is too easy to have slow queries with 4 )

Templates&links
1.) Template selectors parameter names are incorrect. Correct url parameter names are:

• Has all of these templates = templates_yes
• Has any of these templates = templates_any
• Has none of these templates = templates_no

2.) Filter names. We could again use same labels than in Petscan so we can use Petscan's translations if needed

3.) Property Filters (P number and value) - ( this would be good if it would work reliably in Petscan for Wikimedia Commons SDC, however it doesn't so lets remove this )

Saved queries
It saves something to localStorage, but it doesn't seem to load all parameters correctly. For example it didn't load or save the templates tab values.

Settings
If thumbnail size is changed it doesn't increase the container size in result list and image will overflow.

Result list
The cat-a-lot seaction doesn't work because the selector in Cat-a-lot.js findAllLabels() is incorrect. It should work if change it like this (example diff)

this.labels = this.labels.add( $( 'ul.gallery li.gallerybox' ) );

List doesn't need extra Select all/ Deselect all buttons as the Cat-a-lot does it already.

Also Cat-a-lot main UI is broken (it overflows because there is too many categories). I hope that this is fixed in T388118 already so it is done there.

In T390364#10692076, @Ademola wrote:

Hello @Neyehh
Great work and nice effort
I tested the integration, and it works well , but there are some UX and functionality issues that need improvement based on my observations.
Issues Found:

1. Dark Mode Compatibility
   • The PetScan interface does not properly adapt to dark mode.
   • Some elements (buttons, input fields, and text) have low contrast, making them hard to read.
2. Bug: Adding Images to a Category
   • Some images do not get correctly processed when added to a category.
   • This might be due to event listeners not binding correctly or metadata missing when passing images from PetScan to Cat-a-lot.
3. Poor UX for Selected Images
   • The visual indicator for selected images is not intuitive.
   • The selection highlight is not clear enough, making it hard to distinguish selected images from unselected ones.(Try using clearer border color).

Inconclusion, i acknowledge your effort in implementing this feature but take note of this feedback and try fixing it, this review are based on this few tests i have done, if i see further changes that need to be made i will let you know.

In T390180#10682797, @adiba_anjum wrote:

Hey everyone! Since there is no existing translation for hindi language, I'll start working on it. If someone wants to collaborate, please inform, so that we can work on the same document.
Looking forward to working together!

@Tacsipacsi Thanks for the feedback!

In T389718#10688778, @Zache wrote:

There was suggestion in Mediawiki talk:Gadget-cat-a-lot.js that by using. Difference to my earlier question which targetted #cat_a_lot.noprint this uses just id as selector. I tested it with Safari, Chrome and Firefox and it was not visible when printing. Ie. it didn't break with chrome when Cat-a-lot UI was moved/resized.

@media print {
	#cat_a_lot {
		display: none !important;
	}
}

So, quesion is does this work with everybody else too?

In T389739#10685871, @Neyehh wrote:

Hello @Zache @Tacsipacsi I am currently working on this task and this is my report so far

PetScan Cat-a-lot Integration: Completion Report

I've was able to complete the PetScan and Cat-a-lot integration. The userscript now allows users to enter PetScan query IDs on the Special:BlankPage/Cat-a-lot page, load images from PetScan, and categorize them using Cat-a-lot.

The script includes all requested features:

• Input field for PetScan query IDs
• Advanced options for categories, negative categories, and depth
• Image limit control
• Thumbnail grid display
• Link to prefilled PetScan query

You can test the script here:
https://commons.wikimedia.org/wiki/User:Nenyee/PetScan-Cat-a-lot-Integration.js

To use it, simply add this line to your common.js page:

mw.loader.load('//commons.wikimedia.org/w/index.php?title=User:Nenyee/PetScan-Cat-a-lot-Integration.js&action=raw&ctype=text/javascript');
mw.loader.load('//commons.wikimedia.org/w/index.php?title=User:Nenyee/cat-a-lot-patch.js&action=raw&ctype=text/javascript');

Then visit https://commons.wikimedia.org/wiki/Special:BlankPage/Cat-a-lot to try it out.

I would appreciate if you could review the script and provide feedback on its functionality and any potential improvements.

In T389739#10686351, @Zache wrote:

@Neyehh , Thanks for this, couple of notes regarding testing:

GM_xmlhttpRequest
currently it requires requres GM_xmlhttpRequest to be working. It should be possible to get it working directly with native browser functions (i tested with Safari and Chrome that there is no CORS limitations)

mw.loader.load
In your description the loading line is:

mw.loader.load('https://commons.wikimedia.org/wiki/User:Nenyee/PetScan-Cat-a-lot-Integration.js');

However, it will require also action=raw and ctype (content-type) parameters:

mw.loader.load('//commons.wikimedia.org/w/index.php?title=User:Nenyee/PetScan-Cat-a-lot-Integration.js&action=raw&ctype=text/javascript');

Hi Adiba,

Hello @Zache @Tacsipacsi I am currently working on this task and this is my report so far

In T389718#10684318, @Zache wrote:

@Shellygarg10 Thank you, I was able to repeat it.

@Shellygarg10, @Spykelionel, @Nidhicodes, @Neyehh & all. Does the following CSS rule fix the problem in all cases? The rule's scope would be the cat_a_lot box without overriding the global noprint rule using the !important declaration.

@media print{
    #cat_a_lot.noprint {
        display: none !important;
    }
}

Hi, @Zache @Tacsipacsi

1. Commons API Refactoring Implementation Report

@Zache Please could you assign this task to me. I'd love to try it out

@Zache
Task Completion Report:
I successfully made the "Cat-a-lot" label translatable:

@Zache
Task completed successfully. I added the class "noprint" to $container and $head, which helped, but a tiny box remained. To ensure complete disappearance, I added the following CSS:

In T387982#10669966, @Zache wrote:

@Neyehh FYI, we found the problem. There was typo in my guide on filename when script is loaded from user:username/common.js the pagename is Gadget-Cat-a-lot.js and not Gadget-cat-a-lot.js (ie. difference is upper case C ) ( see T389760#10669795

I will try this. Thank you! @Zache

Hi @Zache. I have been working on the task and after setting up my environment and completing the steps, my changes are not effecting, I added a yellow background to the cat-a-lot to test and it did not display so i think I did something wrong in setting up. Could you help me with the issue please when you have the chance.

Alright. I will get on it. Thank you

Hello Mentors, I am Neye an outreachy contributor and I just completed this task. I have Cat-a-lot successfully working from user space.

In T377793#10652585, @Mazevedo wrote:

Hi @Neyehh, thanks for your interest in contributing.

This task already has a patch associated, so I suggest you take a look at our bug backlog here for tasks that are not currently assigned to anyone.
If you need any help, please tag me or any of the mentors, and we can assist you.

Hello Everyone! I am Neye, an outreachy contributor. I'd like to work on this project. Nice to meet everyone.

Hello Everyone, I am Neye, an outreachy contributor. I look forward to meeting and working with everyone on this project.