Page MenuHomePhabricator

Default component: function calls
Closed, ResolvedPublic

Assigned To
Authored By
AAlhazwani-WMF
Nov 23 2022, 11:47 AM
Referenced Files
F36245289: function.svg
Jan 16 2023, 11:36 AM
F36245273: image.png
Jan 16 2023, 11:36 AM
F36245269: image.png
Jan 16 2023, 11:36 AM
F36245262: image.png
Jan 16 2023, 11:36 AM
F35821900: image.png
Nov 28 2022, 10:28 AM
F35821898: image.png
Nov 28 2022, 10:28 AM
F35815538: image.png
Nov 23 2022, 11:47 AM
F35815578: image.png
Nov 23 2022, 11:47 AM

Description

Preamble

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 and expanded 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

TBD


Previous design proposal

Figma file https://www.figma.com/file/91gKZAkb0NYYPYg9XXCHRW/T323693?node-id=52%3A10139&t=8aMqsloaPOq5P7Ns-1

After an internal consultation, we opted for displaying the function name, and the function arguments in the collapsed view as:

  • function icon +
  • function name +
  • function arguments

image.png (826×1 px, 114 KB)

Additional scenarios

If multiple arguments are available, we will display all arguments (for now!)

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

Additional notes

In terms of styles, semantic colors are selected as the following:

  • Labels and icon fill set to color-subtle / #54595d
  • Punctuation as parenthesis, commas, etc. set to color-subtle / #54595d
  • Strings, and literals set to color-base / #202122
  • References, and links set to color-progressive / #36c

image.png (562×1 px, 91 KB)

While we wait to submit a 'function' icon to codex we can use cdxIconCode or cdxIconMathematics in the meantime.

Event Timeline

AAlhazwani-WMF changed the task status from Open to In Progress.EditedNov 28 2022, 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.

Can we drop the ... CTA from the design for now, and display the whole function call?

If not, alternatively, make it at least 3 arguments before we start collapsing them.

Regarding the literal objects, I'd suggest instead of the syntax <Language> to use Language<en> similar to function calls, using the key values as arguments.

In that case, instead of

add(<Positive Integer>, <Positive Integer>)

we'd get

add(Positive Integer<7>, Positive Integer<2>)

Here's a review followings Denny's comments!

In the following example we have a call to a function that calculates an interest rate

image.png (826×1 px, 114 KB)

In this example we have a call to a function with several nested layers

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

In terms of styles, semantic colors are selected as the following:

  • Labels and icon fill set to color-subtle / #54595d
  • Punctuation as parenthesis, commas, etc. set to color-subtle / #54595d
  • Strings, and literals set to color-base / #202122
  • References, and links set to color-progressive / #36c

image.png (562×1 px, 91 KB)

In the meantime, this is the function icon as SVG. I will also file a task to Codex in order to add this icon to the set too!

p.s I will update the task description in a bit!

AAlhazwani-WMF edited projects, added WikiLambda Front-end; removed Design.
AAlhazwani-WMF updated the task description. (Show Details)

While we wait to submit a 'function' icon to codex we can use an already existing codex icon, task description updated.

AAlhazwani-WMF renamed this task from Default component: collapsed view for function calls to Default component: function calls.Feb 20 2023, 10:55 AM
AAlhazwani-WMF updated the task description. (Show Details)

Change 892371 had a related patch set uploaded (by Genoveva Galarza; author: Genoveva Galarza):

[mediawiki/extensions/WikiLambda@master] [WIP] Create FunctionCall component for DefaultView

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

Change 892371 merged by jenkins-bot:

[mediawiki/extensions/WikiLambda@master] Create FunctionCall component for DefaultView

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

@AAlhazwani-WMF The component has been created and merged according to the first proposal, but I know you wanted to continue doing intented-like explorations. Should we close this and add a new task or should we put this back into G5?

Function calls work in the default view. Confirmed on Beta.