Solving ranking of params in the Compare page by relevance

[evaristoc]

The list of "Other links that might interest you" should be sorted by relevance to the selected subject. For that:

• [x] The subject should be passed and data about the subject should be used in order to rank the list So far:

• A possible simple solution to this problem is just to save the correct search into sessionStorage and then call the corresponding service

• [x] A function should be added that will take data related to the subject as query in order to make the rank So far:

• The ideal solution that was tried in previous demos was elasticlunr. I should test an apparently incomplete project, ng-elasticlunr, for that. Otherwise the implementation would be hard as it is not third party library that take elasticlunr as a Angular module.

• It seems that the native implementations for searching added to Angular would be based on elasticlunr (https://github.com/angular/angular/issues/16781 !).

• Another option is elasticsearch for Angular, but requires some additional settings.

• The final option could be a simple customised implementation of the usual ranking method directly on the corresponding component. Maybe applicable to this single case as the data is not huge, but won't be appropriate for large amount of records.

[evaristoc]

For point 1, data is passed using SESSION Storage (easy).

• https://codepen.io/chrisenytc/pen/gyGcx
• https://stackoverflow.com/questions/39840457/how-to-store-token-in-local-or-session-storage-in-angular-2

[evaristoc]

For point 2, apparently there are ways to use Javascript libraries inside the Typescript code. I am currently evaluating its use with elasticlunr library. See:

• https://www.thepolyglotdeveloper.com/2016/01/include-external-javascript-libraries-in-an-angular-2-typescript-project/
• https://stackoverflow.com/questions/42478930/how-to-import-javascript-file-into-angular2
• https://blog.dmbcllc.com/adding-css-and-javascript-to-an-angular-2-cli-project/
• https://coryrylan.com/blog/angular-cli-adding-third-party-libraries
• https://weblog.west-wind.com/posts/2016/Sep/12/External-JavaScript-dependencies-in-Typescript-and-Angular-2
• https://stackoverflow.com/questions/41652742/add-js-scripts-in-angular-2-project
• https://stackoverflow.com/questions/41120754/using-external-js-libraries-in-my-angular-2-project

[evaristoc]

The current solution has a weird behaviour: the elasticlunr will rank only if is set to saving documents as FALSE when routing to the corresponding page. After that, it won't reorder. If the page is refreshed, the order will disappear NOT MATTER WHAT I DO. So it is apparently a problem of state. Turning the saving document setting into TRUE will have impact on it (REMEMBER that the functionality is set to be a global one!!!) - it won't update from the first set no matter what I do!!

EDIT:

A detailed description of the problem:

• I am using a trick to incorporate a JS library that is not written for Angular in Typescript. The library is elasticlunr
• What elasticlunr does is to search and rank documents based on a query, very much like an internal search engine, but in this case directly on browser
• The library is installed as a global but only used where declared, in the /src/app/platform/platform.component.ts
• The ranking made by the library is shown on the console for now ("THIS IS THE SEARCH OF elObj ....")
• The ranking works well when I land into the page controlled by the aforementioned component for the first time
• However as soon as I refresh that page, elasticlunr won't search / rank the documents and produce and empty result (an empty list): it is doing it only at page entrance, suggesting there is a state issue.

The desired outcome would be that elasticlunr should update the query after refreshing, even if the query is the same: otherwise if the ranking disappears I won't be able to use it to order the documents in the corresponding page (the "params").

There is also apparently a wrapper of the elasticlunr that I have installed in the project, ngx-elasticlunr, but really don't know how it works, if it works.

[evaristoc]

The code involved is this one: https://github.com/evaristoc/fCC_R3/blob/development/src/app/platform/platform.component.ts

and it consists in:

• A declaration of elasticlunr to be added and used as JS third party library
• two functions, loadELlist - collect and fill the elasticlunr 'database' with 'documents', and showELlist that search the documents and rank them

[evaristoc]

Managed to update elasticlunr ranking after changing pages (using ngOnDestroy hack) but the ranking would disappear when reloading over the same page.

Possible solution? localStorage.

[evaristoc]

The best solution so far using elasticlunr library?

The function is created at OnInit and then becomes AN OBJECT so it can be translated into a variable in the HTML DOM where is the residence of the globally defined library !!!

In fact after loading the function, the documents can be saved and survive in browser memory without having to create a localStorage (they are saved on Window anyway) if I don't run the OnDestroy function!

So I was dedicating too much time to try to re-run the search method inside the component but for this case it is easier (maybe better...) to manipulate the resulting instance of elasticlunr in the HTML of the component !! - in-te-res-ting....

I will work on this using this method then.