Page MenuHomePhabricator

Vector Search: Adjust bolding pattern of suggestions in Wikidata
Closed, ResolvedPublic3 Estimated Story Points


As a Wikidata user, I want to be able to easily locate the result I'm looking for in the search suggestions provided by the Vector 2022 search.


In the current TypeaheadSearch component, the non-matching part of labels (and aliases, in case of Wikidata) is bolded to support recognition. This pattern is adequate for Wikipedia, where results are ordered alphabetically, following the title of the article. The solution allows users' attention to focus on the desambiating part of the title, thus supporting selection:

Screenshot 2023-02-03 at 12.46.18.png (1×1 px, 514 KB)

Unfortunately, this bolding pattern is not so fitting for Wikidata. In our platform, results 1. are not presented alphabetically (so vertical comparison between matches is not facilitated), and 2. include aliases. Aliases are treated separately from labels and receive the same bolding treatment (matching parts present a regular weight). As a result, Wikidata search suggestions present irregular font weights: this doesn't support findability and instead creates a zig-zag reading pattern.

Screenshot 2023-02-03 at 12.47.17.png (1×1 px, 305 KB)


In order to avoid the irregular (and potentially confusing) bolding of suggestions, we'd like to disable the current TypeaheadSearch suggestion bolding pattern in Wikidata. In our search, all both labels and aliases will present a bold style by default.


Screenshot 2023-02-03 at 13.01.18.png (1×1 px, 301 KB)

Acceptance criteria

  • In Wikidata, suggestion labels are shown in a bold style by default

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Michael added subscribers: Sarai-WMDE, Michael.

As far as I can tell, this works as designed on Wikidata. Compare also the behavior on enwiki:
Since this might be (partially) a design issue, I'm adding the Codex tag as well.

egardner moved this task from Requests to Up Next on the Design-Systems-Team board.
Lydia_Pintscher added a subscriber: Lydia_Pintscher.

I added screenshots to illustrate the problem.

Hey there. This is not an issue. The new bolding behavior is correct and works as intended/specified by the original designs of Vector 2022's TypeaheadSearch. Please see T255603: Design spec for new Vue.js search experience.

It might work as intended but this really really doesn't feel right. I think the design should be given some more thought tbh.

This comment was removed by Sarai-WMDE.

[Agh. Deleted that unintentionally. Adding again:]

This was given quite some thought:

I can reach out to Alex and ask if their team received any feedback from the community that contradicts his recommendation. And check if this pattern matches the search use case in Wikidata too (as he mentions, bolding might not be helpful in certain cases).

In any case, we would open a design ticket. This bug report should probably be closed because the Vector 2022 search behaves consistently and as intended.

Ah, the comment at T255603#6369734 does indeed illustrate the thought behind this well and I can see it working for a Wikipedia:

image.png (718×557 px, 113 KB)

I guess the major difference is that on Wikipedia, the search is a strict match on the beginning of the page title. So the typed query are always the first characters of a result.

However, on Wikidata, that assumptions does not hold:

image.png (588×579 px, 74 KB)

Here on Wikidata, the same typed query ("Vi") can appear anywhere in the Label of the Item or in an Alias.

Though I agree that this is not an implementation bug. It works as designed. I'll change the task to be a normal one for now. (We can still close it if that is still desired.)

Michael changed the subtype of this task from "Bug Report" to "Task".Jan 23 2023, 6:09 PM

Yes, changing the task to a regular one makes sense. Thanks, Michael!

And, agreed, it's worth exploring if the original solution specifically works for Wikidata's search, where, as you mention 1. the match can appear anywhere in the result, and 2. results are not presented in alphabetical order.

Sarai-WMDE renamed this task from Vector 2022 search bolding issue to Vector Search: Adjust bolding pattern of suggestions in Wikidata.Feb 3 2023, 12:02 PM
Sarai-WMDE updated the task description. (Show Details)

Search query highlighting behavior can be turned off via the highlightQuery prop, which is a boolean prop of both CdxTypeaheadSearch and the Vector search app. Currently, in Vector, highlightQuery is set to true or false based on the UI language and whether words can safely be split to highlight the search query in that language. To turn this off for Wikidata, some logic would need to be added there to also allow this to be configured via a config variable.

@AnneT Thanks so much for the valuable guidance :D

This comment was removed by Sarai-WMDE.
karapayneWMDE set the point value for this task to 3.Feb 7 2023, 11:11 AM

Change 926461 had a related patch set uploaded (by Noa wmde; author: Noa wmde):

[mediawiki/extensions/Wikibase@master] Add highlightQuery to the vector search client config

Change 926463 had a related patch set uploaded (by Noa wmde; author: Noa wmde):

[mediawiki/skins/Vector@master] Add highlightQuery as search client property

@AnneT Thanks for the hints!
We've tried to use Wikibase's Vector search client to override the attribute, however at this point it seems that the parallel Resource Loader config is the one Vector eventually adheres to, at least when tested locally with the implementation in the patches added to the task. Would you have an idea on how to circumvent that for Wikibase?

Hi @noarave! I think this will require a change in that Vector code that you linked, so that it first checks if highlightQuery is set in the VectorWvuiSearchOptions config variable. If so, it should respect that value, and if not, it can do what it currently does. Perhaps this should be captured in a separate task? cc @Jdlrobson

@Sarai-WMDE @Arian_Bozorg @Lydia_Pintscher Turning off the highlightQuery option results in the Label always being bold, but the Alias being shown in normal font. That is not what the AC states.

image.png (238×551 px, 19 KB)

Is that also acceptable, or do you want us to spend more time looking into what needs to be done for the alias to be bold too?

From my side it's not amazing but acceptable and better than what we have yeah.

Also fine from my side, ideally we would have it all bold like it is in Vector Legacy

image.png (242×397 px, 23 KB)

But all good from my end. @Sarai-WMDE this ok for you too?

In case it's fine with product in terms of effort, I'd say that we should look into making aliases bold too. The current solution is perpetuating the issue of applying different font weights to the searchable text. The assumption is that this could generate confusion ("is the matching pattern bold or regular?") and direct the users' attention to the non-matching text in some cases (like in the example that Michael shared), generating that "zigzag" effect.

That works from my end, thanks Sarai

@Arian_Bozorg and @Lydia_Pintscher. Correct me if I'm wrong, but I believe that our last decision here was to only apply a bold style to labels after all, since increasing the weight of aliases too seemed to involve more effort or coordination than expected/reasonable. While discussing this, we also pondered the possibility of customizing this in the future Scoped TypeaheadSearch component (although I'm unsure that's totally a good practice. I can consult the DST on this).

Yes, that's correct! I'll update the A/C

@Jdlrobson we need you to weigh in on a patch to this ticket, will you be available to take a look?

noarave changed the task status from Open to Stalled.Jul 10 2023, 12:38 PM

Stalling till Vector patch review from the WMF

Change 926463 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Allow overriding the search pattern highlighting for Wikibase

noarave changed the task status from Stalled to Open.Jul 12 2023, 6:49 AM

Only the Wikibase change left now

Change 926461 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Add a hook handler to override vector's default search highlighting

Looks good to me!

Thanks so much :)