Page MenuHomePhabricator

Default component: collapsed view for function calls
Open, In Progress, Needs TriagePublic

Assigned To
Authored By
Wed, Nov 23, 11:47 AM
Referenced Files
F35821900: image.png
Mon, Nov 28, 10:28 AM
F35821898: image.png
Mon, Nov 28, 10:28 AM
F35815538: image.png
Wed, Nov 23, 11:47 AM
F35815578: image.png
Wed, Nov 23, 11:47 AM
F35815546: image.png
Wed, Nov 23, 11:47 AM
F35815533: image.png
Wed, Nov 23, 11:47 AM
F35815489: image.png
Wed, Nov 23, 11:47 AM
F35815487: image.png
Wed, Nov 23, 11:47 AM



The design paradigm that we've been following for the development of the default component is to let editors consume content through the progressive disclosure of information. That means that for every node of information, they can be expanded it into what we call "expert mode". This let editors go deeper in the inspection (and understanding) of Wikifunctions content. We currently have designed atomic elements for string, reference, and monolingual text properties.

image.png (1×750 px, 54 KB)

The purpose of this task is to define a collapsed (non-expert) view for function call in objects. In the screenshot below, an expanded (expert) view of a function call example.

image.png (1×750 px, 67 KB)

Design proposal

After an internal consultation, we opted for displaying the function name, and the function arguments in the collapsed view. In the screenshots below a couple of explorations.

  • Option A relies only on parenthesis to convey the function call meaning
  • Option B uses a combination of parenthesis and f(x) icon
  • Option C uses a more visually rich solution to convey the relationship between the function and the arguments

image.png (1×2 px, 222 KB)

Additional scenarios

If multiple arguments are available, we could display the first argument by default, and all the other behind a "...". When editors click on "..." we would open expert mode.

image.png (1×2 px, 188 KB)

If the function name (or the argument name) is a longer string of text, we could wrap text on a new line. Example content totally random.

image.png (1×2 px, 201 KB)


For posterity, these are some of the other ideas that have been explored.

image.png (1×1 px, 201 KB)

Event Timeline

AAlhazwani-WMF changed the task status from Open to In Progress.EditedMon, Nov 28, 10:28 AM
AAlhazwani-WMF added a subscriber: gengh.

After a second round of internal consultation we settled on option B, where we display a f(x) icon before the function name, and the function argument between parenthesis.

image.png (1×1 px, 138 KB)

If the function has more than one argument, we'll display only the first (or first two? or first three?) argument/s of the list in preview mode, with a "..." call to action that if tapped/clicked would open expert mode.

image.png (1×1 px, 149 KB)

Additionally, these are some recommendation to keep in mind while implementing/testing this from @gengh

Every object should have a toString representation, and this is something that we can solve case by case with a generalized fallback for complex objects.
For example:

  • string( ZString ) is just the string representation of the value: "pangolin"
  • string( ZReference ) is a link to that object "Mushroom"
  • string( List ) is the sequence of comma separated values inside brackets, where the values are the string of each item. "[pangolin, Mushroom]"
  • literal object...
    • Maybe we can stringify it using it's type, so a literal monolingual string can just say "<Monolingual string>" or a literal language can just say "<Language>"
    • So imagine a list of languages, some of them are literals and some of them are references to persisted languages, can be something like this:
    • "[Spanish, <Language>, English, Sanskrit, <Language>, <Language>]"
    • And just by expanding it you'd be able to see the values.