Sorting contents in the UI according to a given score

[ghost]

Hi,

I would like to add the ability to view the content sorted by a custom feature that I created. I succeeded in creating a custom feature and I can retrieve content from the database using the RangeBooleanRetriever.
How can I rearrange how the content is presented in the UI? If I want to add additional UI elements, what is a good place to start, i.e. which files should I modify?

Best,

Ribin

[ghost]

Do you have any updates, on how to get started with sorting the content?

Best,

Ribin

[ppanopticon]

Hi

Sorting in vitrivr NG is always based on the score returned by Cineast and facilitated by a Pipe directly in the view (late fusion). See, for example, the MiniGalleryView:

https://github.com/vitrivr/vitrivr-ng/blob/6bc9460c526374ac486e384ccb30e3b7e43a3c83/src/app/results/gallery/mini-gallery.component.html#L12

Of course you can create your own pipe implementation. But these are the ones we're using:

• https://github.com/vitrivr/vitrivr-ng/blob/master/src/app/shared/pipes/containers/order-by-score.pipe.ts
• https://github.com/vitrivr/vitrivr-ng/blob/master/src/app/shared/pipes/containers/order-by-segment.pipe.ts

However, I don't think that this will address your issue. If I understand your use-case correctly, you have an aesthetic score in a DB table, you want to filter by that aesthetic score and all matches should then be ordered by that aesthetic score. This is nothing, any existing feature module in Cineast currently supports. The BooleanRetrieval functionality you're using does only facilitate filtering by some attribute (i.e. your aesthetics score). But since boolean retrieval, by nature, is either hit or miss, all objects returned by the query will have the same (Cineast-)score of 1.0.

For your use-case, you must create your own feature module by extending the BooleanRetriever class in Cineast. In that custom feature module, you implement the filtering and using the aesthetic score as the score used by Cineast. In principle, your feature module works similarly to RangeBooleanRetriever but instead of returning a list of BooleanSegmentScoreElements your generate a SegmentScoreElement containing your aesthetic score.

See: https://github.com/vitrivr/cineast/blob/0246e62723520f2c55f15ca6b5458646685a834b/cineast-core/src/main/java/org/vitrivr/cineast/core/features/abstracts/BooleanRetriever.java#L89

[ghost]

Thanks for the detailed answer. I created a new class SortedRangeBooleanRetriever extending the BooleanRetriever class and created my own getMatching method which returns a SegmentScoreElement with the aesthetic score as input. How do I tell vitrivr-ng to use the new class instead of the RangeBooleanRetriever? Previously I simply defined RANGE in the config file of vitrivr-ng.

[lucaro]

You don't need to tell the UI anything about the features, they are completely handled by cineast. Just use your new feature instead of the previous one in the configuration.

[ghost]

Thanks sorting the images worked. How would go about, if want to have an additional option to sort the scores ascending or descending? Maybe a ui element, which allows me to select the sort option?

[lucaro]

The UI is not designed to support this, since there was never the need to show the 'worst' results at the top. If you wanted to implement such a functionality, you would need to extend the OrderByScorePipe as @ppanopticon pointed out in an earlier comment.

[ghost]

I want to create a UI element(like a dropdown box) that allows the user to select the sorting option directly above the slider of the Range Query. Then I want to pass the selected sorting option as an input to the OrderByScorePipe. Since I'm not too familiar with Angular, could you provide some starting points(which files to modify) on how to achieve this?

Best,

Ribin

[lucaro]

You will need to create some Observables, which you can pass as an additional parameter to the sorting mechanism. For details on how to do any of this, it's probably best to consult the official Angular documentation.