Linking custom sentences to vocabulary items

[trang]

Parent issue: #1148

Problem

As a user, I can create a list of vocabulary items for words that interest me. From my vocabulary list, I am provided a link that shows the search result for sentences that contain the exact match for the vocabulary.

There are 2 limitations to this:

1. In most languages, words can have several variations: plural vs. singular, masculine vs. feminine, declension, conjugation, etc. If I add the word "country", I may be interested in sentences that contain "countries", but these sentences won't be linked to my "country" item because the search only takes sentences with an exact match.

2. Some words have a large amount of sentences (over a thousand), and I usually don't need so many sentences linked to my vocabulary. I only need a handful of them, but there's no way for me to pick a particular sentence.

Suggested solution

(1) In the vocabulary list, we need 2 different links to sentences:

• link that displays the sentences with exact match
• link that displays the sentences that were chosen by the user

I don't have a great solution for this. The best I can think of is to have the following links:

• exact match: {n}
• mine: {n}

(2) In the sentences component, we need a button for users to link a sentence to a vocabulary. I don't have a great solution for this either.

• For the icon, we could use library_add from the Material icons: https://design.google.com/icons/#ic_library_add
• When the user clicks on this icon, we display a form with a text input. The user can type in the vocabulary they wish to link the sentence to.
• The text input would be pre-filled with the last vocabulary entered.
• If the user enters something that is not part of their vocabulary list, a new vocabulary item is created on the fly.

(3) On the page that lists the custom sentences for a vocabulary item, we can add a button "Sentences suggestions".

• When the user clicks on this button, Tatoeba will suggest some sentences that the user can link to the vocabulary.
• At first we can simply apply a regular search (e.g. country instead of the exact search ="country") and display the 10 first results. Later on we can tune this and add more criteria.
• Each sentence will have a + button next to them. The user can click this button if they want to link that sentence to the current vocabulary item.

[dispyfree]

I have a suggestion for (2):
When the user clicks on the "add" button, the words of the sentence appear in boxes which can be selected with a simple click (the selection status is illustrated by a saturated/translucent color). As an optional feature, a simple click links the clicked word directly, whereas a double click opens up the text box. The text box is prefilled with the clicked word, so that the word can easily be reduced to its stem, a generic form etc.

Furthermore, I would like to add an auto suggest (dropdown) to the text input if that's ok.

[trang]

@dispyfree, I'd suggest to keep these improvements as part of another issue, which you would implement after the scope of this issue has been covered and released.
They're definitely good ideas, but they don't need to be implemented right way.

[trang]

I've updated the description with mockups for (2) and (3).

[trang]

@dispyfree regarding this issue, I'm not sure what you have started already, but if you haven't done anything yet, you should focus on points (1) and (3).

For point (2), since I will be doing a lot of changes in the sentences, better wait until I'm done.

[dispyfree]

@trang I'm currently working on (2), I'm almost done. Do you change the database structures entirely, or is it just the code? I'm using AngularJS, so it will be easy to merge if you are currently switching towards that.

[dispyfree]

@trang: I'm finished with this issue. Shall I port the code to the directive
https://github.com/Tatoeba/tatoeba2/blob/issue-1180-sentences/app/webroot/js/directives/sentence-and-translations.dir.js
or rather tackle the other two related issues first? (If the former, is there anything I should know if I fork an experimental branch?). The code is built upon AngularJS, but does currently not use any directive.

[trang]

@dispyfree I've posted several comments on your commit. There are some important things to review on the model level.

I will check tomorrow for the AngularJS part and will add my comments here in this issue about porting the code.

[trang]

@dispyfree I pushed a branch that illustrates briefly how you would begin to port your code into the new sentence UI code: trang@ea9073a

In short:

• I created an element link_to_vocabulary_form.ctp which contains the HTML for the form to link a sentence to a vocabulary item. It's more or less a copy-paste of your code. I adjusted a few things, but there are more things to adjust.
• I changed to sentence_and_translations.ctp element to include the button to link to vocabulary, and the form.
• I added the functions to show/hide the form, and an alert when clicking on "Link", in the sentenceAndTranslations directive. Your code that fetches suggestions of vocabulary would also go in that directive.

You can pull and test this locally by doing the following:

// making sure your fork is sync'ed
$ git fetch upstream
$ git checkout dev
$ git merge upstream/dev

// pull my branch
$ git checkout -b trang-link-to-vocabulary-ui dev
$ git pull https://github.com/trang/tatoeba2.git link-to-vocabulary-ui

Obviously you don't have to reuse exactly this code. This is just a very rough example so that you can see more clearly how things are (or can be) connected to each other. If there's something you don't understand in there, don't hesitate to ask.

[dispyfree]

@trang: OK, when I'm done with incorporating your comments I'll work on porting the code.

I just thought of something else; my branch introduces a flag "automatically_associated" for the link between vocabulary and sentences.
Currently, when you use the plus sign to add a sentence to the vocabulary here (http://tatoeba.org/eng/vocabulary/add_sentences/), the sentence will not show up for the vocabulary if it is not an exact match (as you pointed out in the very first post). Now, I'm considering changing that into an enum (manually_associated, automatically_associated, associated_by_contributor). Now, whenever somebody uses that plus sign to add a sentence to a vocabulary entry, an association with the flag set to the last state could be added.
Thus, a user can always be shown sentences which have been added specifically for his vocabulary, without mixing that up with his own, intentional choices.