Multiple sources specs (draft)

Description

In Detective.io contributing forms, every entity field can be sourced to a single URL.

We would like to enhance this feature in order to be able to:

• add multiple sources on every field
• add non-URL sources (like book reference for instance)

User Experience

In order to keep a good user experience we want this feature to be a breeze to use by avoiding user clicks & loading.

Source editing

We can inspire ourselves from Google Keep which propose an interesting TODO list system with a silk list item adding/deletion mechanism:

• Typing in the last list item will produce creation of new item,
• Typing backspace key in an empty item will produce its deletion.
• Typing del key at the end of an item will behave like a text editor at the end of a line, it will make up the following lines. In my opinion this point in optional and should come last in our priority list.

For the first iteration of this feature we will skip the last 2 points of Keep's TODO system. Source deletion will be ensured thanks by a 'delete' button.

Source displaying

Multiple options are possible to display a source list.

Wiki-like sources

We can inspire ourself from wiki reference system and gather every source at the bottom of the sourced entity.

Popover or tooltip

One of the easiest possibility is to keep current source link on every sourced field then use a popover or a tooltip to display sources

Mockups

You can check mock-ups & behavior on these mock-ups

Intervention plan

1. Change detective.topcis.common.models.FieldSource data modeling

• delete url model attribute
• add a source generic text attribute

2. Reflect these changes on API

• detective.individual.IndividualResource.get_patch method is using previous url model attribute.

3. Reflect these changes on Front-End

• change type of source input in contributing template <input type="url"/> should become <input type="text"/>
• edit usages of url sources' attributes in order to have a single way of accessing sources' values (without url).

4. Implement new source list system (check mock-ups)

5. Reflect new system on front-end by

• changing "Add source" and "Edit source" to "Add sources" and "Edit sources"
• changing source input placeholder to "link to source" (assuming users will put plain text when they want to)

6. Add url detection on front-end when displaying (not editing) sources

   In order to display a link when necessary (i.e when a source item is an URL).

UX suggestion (NKB)

On click on "Add sources", the behavior remains as is now. On focus on the first field, a second, empty field appears right below the first one, and the form .add-source-form expands accordingly downwards. On focus on the second field, a third field appears, etc.