The process of frontend retrieving backend response during a query

[yua5]

Hello! I am currently reading the code for the frontend-backend interaction part of the corpus-frontend project. Now, I am confused about how the frontend captures the values returned by the backend. I have already understood that when the frontend sends a query command to the backend, it is done in the apiCall function in search/results/ResultView.vue, and then the search begins. So, where does the frontend receive the backend's response and process it? This confuses me a lot. Thank you!

[KCMertens]

Hiya!

There is a hierarchy of components that does the displaying of results. As you discovered, at the top is ResultsView. That's basically the master component in the hits and docs tabs: The data from BlackLab (the results) is retrieved there. Depending on what we're displaying we show either HitResults, DocResults or GroupResults.

• ResultsView
  • HitResults
  • HitsTable
    • Hit
    • HitRow
    • HitRowDetails
    • DocRow
  • DocResults
  • DocsTable
    • DocRow
    • HitsTable
    • ... (see above)
  • GroupResults
  • GroupTable
    • GroupRow
    • GroupRowDetails

ResultsView

Getting data

First we check if we're searching for hits or documents. Then we use the api to request results from BlackLab: https://github.com/INL/corpus-frontend/blob/83fc33e3ec49a9c3bfc693a999fd70e969d72d79/src/frontend/src/pages/search/results/ResultsView.vue#L213 https://github.com/INL/corpus-frontend/blob/83fc33e3ec49a9c3bfc693a999fd70e969d72d79/src/frontend/src/api/index.ts#L235-L251

This returns a Promise, the .then() function waits for the results to come in. When results come in, we store them in ResultsView.results: https://github.com/INL/corpus-frontend/blob/83fc33e3ec49a9c3bfc693a999fd70e969d72d79/src/frontend/src/pages/search/results/ResultsView.vue#L222-L224 https://github.com/INL/corpus-frontend/blob/83fc33e3ec49a9c3bfc693a999fd70e969d72d79/src/frontend/src/pages/search/results/ResultsView.vue#L244-L246

Using data

What is rendered: Component name chosen here (HitResults, DocResults, GroupResults): https://github.com/INL/corpus-frontend/blob/83fc33e3ec49a9c3bfc693a999fd70e969d72d79/src/frontend/src/pages/search/results/ResultsView.vue#L445-L453 Component data (props) made here: https://github.com/INL/corpus-frontend/blob/83fc33e3ec49a9c3bfc693a999fd70e969d72d79/src/frontend/src/pages/search/results/ResultsView.vue#L454-L460 Finally rendered: https://github.com/INL/corpus-frontend/blob/83fc33e3ec49a9c3bfc693a999fd70e969d72d79/src/frontend/src/pages/search/results/ResultsView.vue#L7-L9

HitResults

Then the results are processed for rendering in the *Results.vue components. Here is the code for HitResults: https://github.com/INL/corpus-frontend/blob/83fc33e3ec49a9c3bfc693a999fd70e969d72d79/src/frontend/src/pages/search/results/table/HitResults.vue#L106-L155

Basically we just create small objects to render the table rows. One for every hit, one for every document.

The data is then passed on the HitsTable component, etc. The same happens for Docs and Groups.