Page MenuHomePhabricator

Proof of concept for adding new statements
Open, Needs TriagePublicFeature

Assigned To
None
Authored By
Pepe_piton
Oct 10 2025, 2:09 PM
Referenced Files
F66774460: image.png
Tue, Oct 21, 4:05 PM
F66741503: image.png
Oct 10 2025, 5:41 PM
Restricted File
Oct 10 2025, 4:29 PM
Restricted File
Oct 10 2025, 4:29 PM
Restricted File
Oct 10 2025, 4:26 PM
Restricted File
Oct 10 2025, 4:23 PM
Restricted File
Oct 10 2025, 4:22 PM
F66741393: Screen Shot 2025-10-10 at 4.43.01 PM.png
Oct 10 2025, 4:05 PM

Description

Feature summary: This is a proof of concept for adding new statements in Paulina. In this initial test task, the idea is to place a button called "Add information" below the biography table on the author page. When the user clicks on the button, the interface shows a dropdown including all the missing fields. The user can then select a field, and when they do that, a text box appears.

Here's a sketch of what the "Add information" button should look like:

add-information-button.png (840×1 px, 75 KB)

A sketch of what the dropdown may look like (remember to include just the missing fields in the dropdown):

add-information-drop-down.png (960×1 px, 86 KB)

And a sketch of what the text input may look like:

add-information-value.png (960×1 px, 79 KB)

That's all for this proof of concept. For now, there's no need to call the Wikidata API, nor for the user's input to be placed in the corresponding field. Instead, the task is just focused on creating a user-friendly editing interface using JavaScript.

Benefits: This proof of concept will be useful to test a user interface for adding data. Later, it will incorporate the ability to connect to Wikidata, add statements to Wikidata items, and show them in Paulina.

Event Timeline

Pepe_piton renamed this task from Proof of concept for adding new statements in Paulina to Proof of concept for adding new statements.Oct 10 2025, 2:09 PM

Just for clarification: In a case where all the fields have corresponding values, should there still be an "Add information" button? @Pepe_piton

Hi @Pepe_piton @Nat_WDU
I have fixed this issue.
Here is the link to my MR: https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/35

What I did:
I added an “Add information” button positioned outside and below the biography table.
{F66741425}
I implemented a dropdown showing only the missing fields.
{F66741430}
In a case where all the fields have corresponding values, button gets hidden.

When a field is selected, it displays the selected field label and input box just below the table, following the provided design sketch.
{F66741427}
{F66741440}

{F66741439}

Hi @Pepe_piton, Can a field be selected to Add information even if it is not missing or should the dropdown only contain missing fields?

Hi @Pepe_piton
I have worked on this issue, kindly find the link to my merge request: https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/39

As the task description stated
-I placed an 'add information' card below the biography which takes as input the missing fields

*Also you mentioned in the task description that we do not need to save the new field entries, hence my code does not support adding the missing field entries.

Find attached below a screenshot of what it looks like, it outputs only missing field ethnicity as seen

image.png (808×1 px, 74 KB)

Hi @Pepe_piton
I've submitted a merge request implementing the UI proof-of-concept for the "Add information" feature: https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/41

The implementation includes:

  • "Add information" button on author pages
  • Dynamic dropdown showing only missing biography fields
  • Text input field for data entry
  • Styling consistent with the existing design system

This is a UI-only implementation with no backend integration yet. Ready for review!

Hi @Pepe_piton

Here's link to my merge request https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/42

Implementation features include:

  • the “Add Information” button feature on author pages.
  • a dynamic dropdown for missing fields that dynamically reflects language changes

Hello @Pepe_piton
This is the link to my merge request for this task: https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/44

The task features include:

  • Shows an "Add Information" button that reveals a form when clicked
  • Displays only missing biography fields in a dropdown
  • Dynamically switches between text and date inputs(birth/death dates) based on the field type for handling different input requirements, validation and reducing user input errors.
  • Validates input and enables/disables the publish button accordingly

Hello @Pepe_piton

Here is the link to my Merge Request https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/49

Briefly what I have done is:

  • Added a dynamic dropdown and text input allowing users to suggest missing author details such as Nationality, Gender, Occupation, Date/Place/Country of Birth, and Date of Death.
  • Implemented a simple JavaScript toggle to reveal the form when the “Add information” button is clicked.
  • The text input and submit button only appear after a field is selected.
  • Styled the “Add information” button to match the existing “Search works” button for a consistent user interface.

hello, @Pepe_piton
i made a merge request related this issue:-https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/50
Changes made:

  • Added a button and dropdown to show empty biography fields.
  • Added JavaScript to display a text input when a dropdown option is selected.
  • Only shows input for selected empty fields; existing rows are reused.
  • Button only appears when there are empty fields; if all fields have values, it remains hidden.

Tested locally — users can now add missing information without creating new rows.
I'd appreciate it if you could take a look at my work and provide feedback. I want to make sure I'm meeting expectations and understand any areas for improvemen.

Hello @Pepe_piton @Nat_WDU
I have implemented the required changes as described below and here is the link to my Merge Request: https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/60:

  • Dynamic Visibility: The "Add information" button is only displayed if the author is missing one or more biographical fields (e.g., 'Date of death', 'Nationality').
  • Dropdown Population: Upon clicking the button, it is replaced by a dropdown menu that only lists the fields currently missing from the biography table.
  • Dynamic Input Type: When a user selects a field from the dropdown, a text input box is displayed next to it.
  • For fields requiring structured data (like 'Date of birth' or 'Date of death'), the input type is dynamically set to type="date".
  • For all other fields, the input remains a standard type="text".
  • (No Missing Fields): When there are no missing fields, the "Add information" button is completely hidden.

Hello! @Pepe_piton @Nat_WDU
Completed the task: https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/83

Kindly review!

Changes:

  1. Added an “Add Information” button on the Author page, visible only if one or more biography fields are missing.
  2. When clicked, a dropdown menu appears containing all missing fields for the author.

Input type is context-sensitive:

a. Date of Birth / Date of Death: Text input with date type.
b. Nationality / Country of Origin: Dropdown populated with all countries.
c. Gender: Dropdown with genders.
d. Other fields: Standard text input.

Preview of changes attached in the MR. thanks!

Hello @Nat_WDU, trust you are well.

Here's my contribtui https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/102

Awaiting your feedback, thanks!

Regards,

cc: @Pepe_piton

Hi!

@Oluwatumininu.m Great work, I really like your solution! It works just as expected. I like that you also included code to hide the button when all fields are complete. Congrats!

@NinaTakang You also did a very good job. May be the only minor detail is that when an author has all the fields complete, the "add information button" is hidden but the surrounding card borders are shown. Look for example what happens with Louis Armstrong: /author/Q1779

@System625 Thanks for your contribution! The only problem I see, at least on my local environment, is that the "Choose a field" box is already shown before the user clicks on the "Add information" button, so the button has no real use.

@Sopzy I'm sorry I didn't see your question before. It's a good question. Ideally, the "Add information" button should not appear when all fields are filled out. You solved the problem very well by adding the text "All available fields are already complete" in cases where all the information is there. One detail is that the author page has a field that is hidden if not explicitly stated: "ethnicity." It would be nice to add this field to the logic for the "Add information" button.
Finally, I found the code added to app.py interesting, and I understand its use, but I think that, since all the necessary variables were already passed to the template, the missing fields could be directly inferred with JavaScript.

@Nurah_Wakili Good work! And sorry I didn't answer your question before. A field should not be present in the select box if it is not missing in the page. That's because we are thinking about a different approach to edit existing values (see T405412). This feature is planned with the "Add information" button and not with the pencil icon because in the future, all the fields with empty values will be hidden (see T406909).
The feature works very well, except that, at least in my local environment, the dates feature didn't work: when I selected "date of birth" or "date of death", the input box didn't change to <input type="date">, and it didn't recognize any value as a date, so the Publish button never activated. Anyway, the idea of recognizing dates is super useful, thanks for thinking about that!

I'll continue commenting on the rest of the MRs in the coming days. Thanks for your contributions!

@Oluwatumininu.m Great work, I really like your solution! It works just as expected. I like that you also included code to hide the button when all fields are complete. Congrats!

Thank you for the feedback! @Pepe_piton

@System625 Thanks for your contribution! The only problem I see, at least on my local environment, is that the "Choose a field" box is already shown before the user clicks on the "Add information" button, so the button has no real use.

Hi @Pepe_piton I've fixed the issue where the dropdown was visible before clicking the button. The problem was that I was applying display: none to the wrong element. I've now applied it directly to the dropdown container.

I've pushed the fix to the MR. Thank you for the feedback!

@Joyakinyi Thanks for your contribution! I like your minimalist, clear and simple approach to solve the task. The code is super easy to read. Just a couple of details: the field "Ethnicity" is missing in the dropdown; and it's a bit strange that when all values are complete, the dropdown is shown (although without options).

@Dipanshu1223 Good work! It works well. Two details: 1) it would be nice to add some style to the dropdown, to make it look similar to other dropdowns in the site. 2) I think your javascript logic doesn't take into account the possibility of hidden fields. For example, the field "Ethnicity" is not shown in the table if there's no value. But, since the js code loops among the table rows, it doesn't populate the dropdown with this hidden field.

@Kimondorose Your solution also works very well. Congrats! As for the "ethnicity" field, it happens the same as with Dipanshu's solution. But don't worry: I should have been more explicit abount the possible existence of hidden fields in the biography table. Another little detail is that I saw some code that is a bit redundant. For instance, in lines 223-226 you hide the "Add information" button if there are no missing fields. And in lines 245-248 you also generate a "no missing fields" text instead of the dropdown if there are no missing fields. If I am not wrong, I think the "no missing fields" text will never be shown.

@Aradhya05 Good contribution! The interface flows very well. You managed to apply the styles and the flow in a way that fits perfectly in the desktop view, although it is not responsive on mobile. The implementation of the date inputs is perfect. May be it could be added a listener for the "Enter" key to send the input text. As for how to identify the missing fields, please read my previous comment to Sopzy in this task.

@shreya-bhagat Great work! I like very much the that you gave special treatment to each type of input. You also used very well the CSS styles, and the flow is perfect on desktop devices. The only detail I would pay attention is that the responsive behavior could be improved a little (at least on my mobile, the Add information button grows downwards in a strange way).

@Afanyulionel You did a very good job. It works really well, both desktop and mobile, and it is very elegant. Perhaps the only thing that could be improved is that the form buttons could follow the site button styles, and a listener to the "Enter" key could be added. But these are minor details. Congrats!

@System625 Now it works!

Hi @Pepe_piton , Thank you for your feedback and for answering my question. I now understand the flow better. I have the issue with the date input fields being rendered. I have pushed the fix to the MR: https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/44.

Thanks!

Hi @Pepe_piton,

Thank you so much for your feedback!
I have fixed these issues and added to the same merge request: https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/80

changes:

  • Made the UI responsive.
  • Added an event listener for the Enter key so the input gets saved on press.
  • Implemented the missing field logic on the frontend using js and html.

Currently, the “Ethnicity”, “Add Information”, and “Save” texts are not i18n friendly, as they require updating the .pot file.

Kindly review the changes.

Thank you!

UI after changes :

image.png (903×687 px, 35 KB)

hi @Pepe_piton
i made some changes:https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/50
changes made:

  • add style dropdown
  • add Ethnicity in selection

Please check my work and share feedback so I can improve.

Hi!

@Oluwatumininu.m Great work, I really like your solution! It works just as expected. I like that you also included code to hide the button when all fields are complete. Congrats!

@NinaTakang You also did a very good job. May be the only minor detail is that when an author has all the fields complete, the "add information button" is hidden but the surrounding card borders are shown. Look for example what happens with Louis Armstrong: /author/Q1779

@System625 Thanks for your contribution! The only problem I see, at least on my local environment, is that the "Choose a field" box is already shown before the user clicks on the "Add information" button, so the button has no real use.

@Sopzy I'm sorry I didn't see your question before. It's a good question. Ideally, the "Add information" button should not appear when all fields are filled out. You solved the problem very well by adding the text "All available fields are already complete" in cases where all the information is there. One detail is that the author page has a field that is hidden if not explicitly stated: "ethnicity." It would be nice to add this field to the logic for the "Add information" button.
Finally, I found the code added to app.py interesting, and I understand its use, but I think that, since all the necessary variables were already passed to the template, the missing fields could be directly inferred with JavaScript.

@Nurah_Wakili Good work! And sorry I didn't answer your question before. A field should not be present in the select box if it is not missing in the page. That's because we are thinking about a different approach to edit existing values (see T405412). This feature is planned with the "Add information" button and not with the pencil icon because in the future, all the fields with empty values will be hidden (see T406909).
The feature works very well, except that, at least in my local environment, the dates feature didn't work: when I selected "date of birth" or "date of death", the input box didn't change to <input type="date">, and it didn't recognize any value as a date, so the Publish button never activated. Anyway, the idea of recognizing dates is super useful, thanks for thinking about that!

I'll continue commenting on the rest of the MRs in the coming days. Thanks for your contributions!

Hi @Pepe_piton thank you so much for this feedback.

I have reworked this task by moving the logic for detecting missing fields to the frontend and updating the docs to reflect the new changes

Here's a link to view the new changes: https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/42/diffs?commit_id=2ccbde2c08e31ef33bf2f8af8db96303002321e0

I'll be expecting your feedback. Thanks!

Hi everyone!

Please find attached the Merge Request for this task.

Best regards,
Farmata.

@shreya-bhagat Great work! I like very much the that you gave special treatment to each type of input. You also used very well the CSS styles, and the flow is perfect on desktop devices. The only detail I would pay attention is that the responsive behavior could be improved a little (at least on my mobile, the Add information button grows downwards in a strange way).

Thanks for the feedback!
@Pepe_piton Fixed responsiveness: https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/83

Thanks for the feedback @Pepe_piton . Well noted, will update that as well.

Regards,
Lionel

@Miiswom I liked very much your solution. It works super well in all the different cases. I also liked that you used existing styles for the elements like buttons. Congrats!