Page MenuHomePhabricator

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

Description

Problem:
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.

Mockups:
(We go with the first option.)


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

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 6 2017, 12:27 PM

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

EDIT: Or closer to Wikidata’s Statement template:

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

https://gerrit.wikimedia.org/r/357779

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 https://wikidata-constraints.wmflabs.org, so you don’t need a local installation to play with it.

Lydia_Pintscher triaged this task as Low priority.Jun 11 2017, 4:56 PM
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

https://gerrit.wikimedia.org/r/357779

@Jan_Dittrich did you get a chance to play with the CSS?

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.

Restricted Application added a subscriber: PokestarFan. · View Herald TranscriptAug 2 2017, 1:30 PM
Restricted Application added a project: Design. · View Herald TranscriptJan 10 2018, 6:24 PM
Jan_Dittrich closed this task as Resolved.Mar 12 2018, 2:13 PM
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.

Lucas_Werkmeister_WMDE reopened this task as Open.Mar 12 2018, 2:17 PM

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 https://wikidata-constraints.wmflabs.org/index.php/Item:Q35#P20 (and my hacky border CSS is in P5557).

I created some inital designs

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;
6}
7
8.wbqc-role-subject,
9.wbqc-role-predicate,
10.wbqc-role-object {
11 border-width: var(--border-width);
12 border-top-style: var(--border-style);
13 border-bottom-style: var(--border-style);
14}
15
16.wbqc-role-subject::after,
17.wbqc-role-predicate::before,
18.wbqc-role-predicate::after,
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);
29}
30
31.wbqc-role-subject {
32 border-left-style: var(--border-style);
33}
34
35.wbqc-role-object {
36 border-right-style: var(--border-style);
37}

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. )


↑rough example

Greta_Doci_WMDE moved this task from hold to consider for next sprint on the Wikidata board.
Lydia_Pintscher removed Jan_Dittrich as the assignee of this task.Jul 3 2018, 12:57 PM