Page MenuHomePhabricator

Standard UI for including statements in constraint violation messages
Open, LowPublic


Currently, four constraint violation messages include a statement:

  • value required claim: “… should also have a statement property value.”
  • target required claim: “… should have a statement property value.”
  • symmetric: “… should also have the symmetric statement property value.”
  • inverse: “… should also have the inverse statement property value.”

We should make it clearer that these are statements and their different parts (values, properties, items) so people have an easier time understanding the constraint violation messages.

(We go with the first option.)

image.png (439×445 px, 39 KB)

image.png (88×272 px, 6 KB)

Related Objects

View Standalone Graph
This task is connected to more than 200 other tasks. Only direct parents and subtasks are shown here. Use View Standalone Graph to show more of the graph.

Event Timeline

Quick’n’dirty mockup for the punctuation and pill suggestions:

Screen Shot 2017-06-06 at 14.41.00.png (206×402 px, 14 KB)

EDIT: Or closer to Wikidata’s Statement template:

Screenshot from 2017-06-06 14-49-21.png (79×367 px, 7 KB)

The big advantage of a “pill-like” solution over the punctuation, in my opinion, is that it’s independent of language. For the punctuation, we have to change the English message texts, which will invalidate all the existing translations, and there might also not be an obvious equivalent in some languages. The pills are just <span>s around the HTML that we already inject into the messages, plus some CSS to style them. In fact, we can even leave the CSS to the user script.

The big advantage of a “pill-like” solution over the punctuation, in my opinion, is that it’s independent of language.

We can also change it easier, which is nice for design.

Change 357779 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/WikibaseQualityConstraints@master] Add semantic tags to values rendered into messages

I’ve uploaded a suggested patch (see gerritbot’s comment). It doesn’t include stylesheets, so you won’t see any change directly, but you can try adding different style sheets to it, e. g. P5557. I also deployed this to, so you don’t need a local installation to play with it.

Lydia_Pintscher moved this task from incoming to in progress on the Wikidata board.

Change 357779 merged by jenkins-bot:
[mediawiki/extensions/WikibaseQualityConstraints@master] Add semantic tags to values rendered into messages

Currently, the following roles are defined:

  • subject, the subject (item or property) of a statement
  • predicate, the predicate (property) of a statement
  • object, the object (value) of a statement
  • constraint-property, the property that introduced a constraint
  • qualifier-predicate, the predicate (property) of a qualifier
  • constraint-parameter-property, the property for a constraint parameter
  • constraint-parameter-value, the value for a constraint parameter
  • constraint-type-item, the constraint type item

They each correspond to a CSS class wbqc-role-$role on a span surrounding the element. That span also has a class wbqc-role, so common styles (e. g. border radius, padding) can go there and the individual pill styles only need to define colors.

Jan_Dittrich claimed this task.

@Lucas_Werkmeister_WMDE Is that done (I mean in general, we could still file subtickets for further improvements)? I close it for now.

It’s not done in my opinion, we’ve been adding these CSS classes for half a year now and still don’t have any CSS to actually do anything with them… I was waiting for you to look into this :)

Sorry – that got quite stuck. Let's sync on this in person in the next days and get it going again.

Some example messages following a subject-predicate object pattern can be found on (and my hacky border CSS is in P5557).

I created some inital designs

image.png (439×445 px, 39 KB)

It is tricky to get the contrast right: enough to see it, but not too much to make reading hard. I can spec it more and try more, but I wonder: If the suggestions below could build upon the same code, we do two iterations:

  1. I provide the designs (see above), dev builds the CSS
  2. I adjust the CSS in colors and fine spacing and can evaluate the design directly in browser context, when done, spec is implemented.

I’m not sure if this is possible in pure CSS… this is how far I got:

1.wbqc-role {
2 /* variables */
3 --cos30: 0.866; /* cos(30°) = √3/2 ≈ 0.886, the height of an equilateral triangle with base 1 */
4 --border-width: 2px;
5 --border-style: solid;
10.wbqc-role-object {
11 border-width: var(--border-width);
12 border-top-style: var(--border-style);
13 border-bottom-style: var(--border-style);
19.wbqc-role-object::before {
20 content: "";
21 display: inline-block;
22 width: calc(var(--cos30) * 1em);
23 height: calc(var(--cos30) * 1em);
24 transform: rotate(45deg);
25 vertical-align: middle;
26 border-width: var(--border-width);
27 border-top-style: var(--border-style);
28 border-right-style: var(--border-style);
31.wbqc-role-subject {
32 border-left-style: var(--border-style);
35.wbqc-role-object {
36 border-right-style: var(--border-style);

Screenshot-2018-5-28 Douglas Adams.png (86×366 px, 7 KB)

But we’d need to somehow erase the left half of each “caret”, so that it doesn’t add spacing between the elements and also doesn’t cause the top and bottom borders to extend too far…

Is this online somewhere? Just I case I or some other dev might have an awesome idea :-) (Not a must, just in case it seems to be a good idea-exchange-thing)

You can see some example violations here (I’m not sure if you need to be logged in or not) and play with the CSS in dev tools.

@Jan_Dittrich what should it look like if there’s a line break in one of the labels?

@Jan_Dittrich what should it look like if there’s a line break in one of the labels?

Hmm, good point. I would suggest to have it end bluntly and keep it display:inline (or a behavior like that. )

image.png (88×272 px, 6 KB)

↑rough example