(#40) Autosuggest Starts With Logic Update

[seyilonge-nci]

Closes #40

• Added custom hook for autosuggest fetching
• Updated api to point to prod
• Updated unit tests
• Put back encodedURIComponent(), added 'Contains' search type to early exit
• Encoded expected test search string
• Refactored autoSuggestQuery hook, updated autosuggest input box display logic, added mock files for new call
• Applied prettier formatting

[seyilonge-nci]

@VictoriaSunNIH @lburack @blilianyu @mworrest Please review https://react-app-dev.cancer.gov/drug-dictionary-app/pr-73

The auto-suggest options displayed when a search text is entered into the input box is populated by three separate api calls that are merged into one result to display a maximum number of 10 results as suggestions, with matching text bolded in the suggestion options (case insensitive bold highlighting).

Please note that both in current production and this implementation, results returned to be displayed are not sorted. This in essence means that for the same text entered, as long as options displayed are 10 results (which is what the displayed results are limited to for the options), there could be more than 10 matching results returned but not all displayed. Since results are not sorted, displayed results could vary per hit.

For testing please consider the following:

• For "Starts with", as long as displayed options is less than 10 items. Options displayed should match prod. NOTE: Did find a peculiar scenario for "acetamido" where this is an exclusion.
• For "Starts with", if displayed options equal 10 items. Options displayed most likely wouldn't be an exact match as prod, and could actually vary between various hit instances for the same search text on react-app-dev.

@mworrest @blilianyu I did add a text "Loading results..." while the autosuggest options are being fetched before display once the search text character count exceeds 3. Please feel free to provide an alternate text here as I just tried to give a better user experience rather than nothing to let the user know results are expected.

[blilianyu]

@seyilonge-nci This looks good to us! cc: @mworrest @VictoriaSunNIH @lburack

[kate-mashkina]

Please find QA testing notes here https://lion.box.com/s/fv80k561446w4loytkt6lds1l0qw19il

[alinai]

Some of the issues noticed during testing on the react-dev:

• Starts With 3-0 returns no results. All three query return empty arrays, but prod returns one term - prettyUrl name testolactone. Now API response for that term HAS an alias that contains 3-0 (see response link below)  https://webapis-dev.cancer.gov/drugdictionary/v1/Drugs/testolactone

• When searched for Starts With 'avem' autosuggest displays duplicate items, because Api returns duplicate aliases- https://webapis-dev.cancer.gov/drugdictionary/v1/Autosuggest?searchText=avem&matchType=Begins&size=20&includeResourceTypes=DrugAlias Perhaps we can place a filter to only display distinct results ? in response you notice it is a same term , just US Brand Name and Foreign brand name got identical values  

• searching contains s-m does not display any results, but s-ma returns one

• horizontal scroll appears on typing contains 'pyr' or 'ade', starts with for '11a'

• Starts with - type lymphocyte and add a space - react shows 2 results, whereas prod shows 10 (and more probably). The third call in react(contains aliases) also returns bunch of results, but they are no displayed - is this related to https://github.com/NCIOCPL/drug-dictionary-app/issues/39 ?

• Starts with for "zum" , "IL2" , "223" react displays less results than prod and for "ascorbic acid" and "melphalan" react displays more results than prod even if number of results in the autosuggest <10  

• Contains- For Contains most of the time React displays more results than Prod even if number of results is less than 10. Example: bgb, pend, tem

• Contains- Type "I 13" and see that 8 results are displayed on react, but API for contains call returns 10 results. 

• Contains - Typing "12/eg" on Prod displays autosuggest terms but React does not. React has this term "4H11-28z/fIL-12/EGFRt-expressing autologous T lymphocytes"

• Contains - Typing "28z" returns whole different sets of results on react compared to Prod though number of results <10

• Contains- Typing "ycd/" on Prod displays autosuggest terms but React does not. React has this term "Ad5-yCD/mutTKSR39rep-hIL12" and "Ad5-yCD/mutTK(SR39)rep-ADP"

• Starts with for '11a' gives more results on react than prod

• Contains- Typing "35(27L)"  and "1:26" on Prod displays autosuggest terms but React does not. Even though you'd think it should as there is a term  "MART-1:26-35(27L) peptide vaccine" 

• Contains - "350" gives different results than Prod

• Contains - "398" gives 3 results on React but none on prod

• Contains - "3.A" gives one result in React and 2 on Prod and no common result

[seyilonge-nci]

Some of the issues noticed during testing on the react-dev:

• Starts With 3-0 returns no results. All three query return empty arrays, but prod returns one term - prettyUrl name testolactone. Now API response for that term HAS an alias that contains 3-0 (see response link below)  https://webapis-dev.cancer.gov/drugdictionary/v1/Drugs/testolactone

Opened ticket NCIOCPL/drug-dictionary-api#42 to address issue

• [x] Update: Flagged non-issue on the api as this was intended

• When searched for Starts With 'avem' autosuggest displays duplicate items, because Api returns duplicate aliases- https://webapis-dev.cancer.gov/drugdictionary/v1/Autosuggest?searchText=avem&matchType=Begins&size=20&includeResourceTypes=DrugAlias Perhaps we can place a filter to only display distinct results ? in response you notice it is a same term , just US Brand Name and Foreign brand name got identical values

• [x] Fixed: filter applied on the frontend for distinct results

• searching contains s-m does not display any results, but s-ma returns one

For this, since we are doing a "Contains" with term name and alias as against current production that does just term name alone. Without the result size limitation for the call to the api (https://webapis.cancer.gov/drugdictionary/v1/Autosuggest?searchText=s-m&matchType=Contains&includeResourceTypes=DrugTerm), it returns more than 10 results with the expected result as in prod (which is the situation we had mentioned earlier, but in this case yields a less favorable result). I can have the "Contains" just run against the term name and not alias so we can have this match prod.

• [x] Awaiting feedback from @VictoriaSunNIH and @lburack as to approach here Feedback received. Contains would do a priority search. First for term name, and then for aliases. Implemented!

• horizontal scroll appears on typing contains 'pyr' or 'ade', starts with for '11a'

• [x] Fixed

• Starts with - type lymphocyte and add a space - react shows 2 results, whereas prod shows 10 (and more probably). The third call in react(contains aliases) also returns bunch of results, but they are no displayed - is this related to #39 ?

• [x] Yes, this is related to issue #39 and should be resolved once that fix is in.

• Starts with for "zum" , "IL2" , "223" react displays less results than prod and for "ascorbic acid" and "melphalan" react displays more results than prod even if number of results in the autosuggest <10

Opened ticket NCIOCPL/drug-dictionary-api#42 to address issue

• [x] Update: Flagged non-issue on the api as this was intended

• Contains- For Contains most of the time React displays more results than Prod even if number of results is less than 10. Example: bgb, pend, tem

• Contains- Type "I 13" and see that 8 results are displayed on react, but API for contains call returns 10 results. Would be fixed once "Contains" uses just drug term

• Contains - Typing "12/eg" on Prod displays autosuggest terms but React does not. React has this term "4H11-28z/fIL-12/EGFRt-expressing autologous T lymphocytes"

Same api issue: NCIOCPL/drug-dictionary-api#42

• [x] Update: Flagged non-issue on the api as this was intended

• Contains - Typing "28z" returns whole different sets of results on react compared to Prod though number of results <10
• Contains- Typing "ycd/" on Prod displays autosuggest terms but React does not. React has this term "Ad5-yCD/mutTKSR39rep-hIL12" and "Ad5-yCD/mutTK(SR39)rep-ADP"
• Starts with for '11a' gives more results on react than prod

• [x] This is not an issue. Text matches autosuggest results

• Contains- Typing "35(27L)"  and "1:26" on Prod displays autosuggest terms but React does not. Even though you'd think it should as there is a term  "MART-1:26-35(27L) peptide vaccine"
• Contains - "350" gives different results than Prod
• Contains - "398" gives 3 results on React but none on prod
• Contains - "3.A" gives one result in React and 2 on Prod and no common result

NOTE: Contains autosuggest options would differ from prod since prod does not return results for aliases.

[seyilonge-nci]

@kate-mashkina and @alinai All issues brought up have been addressed. Please refer to updated notes above.

[alinai]

Per @seyilonge-nci , the following is actually as a result of issue https://github.com/NCIOCPL/drug-dictionary-app/issues/39

"Contains- Type "I 13" and see that 8 results are displayed on react, but API for contains call returns 10 results. Would be fixed once "Contains" uses just drug term"

[alinai]

The horizontal scroll does not appear anymore on typing "pyr" for contains type match, but the autosuggest term is appearing on the page (out of the autosuggest drop-down window).

[alinai]

For s-m contains type match, we get 10 results for drugterm and 10 results for drugalias in API calls but see one term on the autosuggest. Confirmed with @seyilonge-nci that it is related to #39.

[seyilonge-nci]

The horizontal scroll does not appear anymore on typing "pyr" for contains type match, but the autosuggest term is appearing on the page (out of the autosuggest drop-down window).

Fixed!

[alinai]

Confirmed with @seyilonge-nci that the following is partially related to the api issue (https://github.com/NCIOCPL/drug-dictionary-api/issues/42) opened and flagged as not an issue, and also the fact that we now match against aliases,

• Contains - Typing "28z" returns whole different sets of results on react compared to Prod though number of results <10
• Contains- Typing "ycd/" on Prod displays autosuggest terms but React does not. React has this term "Ad5-yCD/mutTKSR39rep-hIL12" and "Ad5-yCD/mutTK(SR39)rep-ADP"
• Starts with for '11a' gives more results on react than prod

[alinai]

Still seeing the autosuggest term appearing on the page (out of the autosuggest drop-down window) on typing "pyr" for contains type match on IE at desktop breakpoint (100% zoom).

[alinai]

For the following issue reported above:

Contains- Typing "35(27L)" and "1:26" on Prod displays autosuggest terms but React does not. Even though you'd think it should as there is a term "MART-1:26-35(27L) peptide vaccine" [x] Same api issue: NCIOCPL/drug-dictionary-api#42

Contains - "350" gives different results than Prod [x] Same api issue: NCIOCPL/drug-dictionary-api#42

Contains - "398" gives 3 results on React but none on prod [x] React returns results for Contains Alias

Contains - "3.A" gives one result in React and 2 on Prod and no common result [x] related to issue #39

Note : Noticed that sometimes at the front end we get fewer results (example text: recep) or no results (example text: 2/3) the first time we type in a text and then get more autosuggest results or results the next time we type in. This is happening for both Starts with and Contains. It happens only once in a while.

[alinai]

Horizontal scroll is back on IE

[alinai]

Entered https://github.com/NCIOCPL/drug-dictionary-app/issues/80 for the IE issue reported above.