Visualize discovery scores

[coszio]

Improves upon the existing visualizer to add the option of also seeing how discovery/context search looks when the score is colored

Internal hackathon submission

Play around with it, this demo is mostly useful for trying out context search (no target)

1. Checkout this branch
2. docker run -d -p 6333:6333 qdrant/qdrant && npm start
3. Browse to http://localhost:5173
4. Upload the food discovery dataset as food
5. Go to the visualizer
6. Play around with it, specially with only specifying only context (no target). Try to think of a certain category of food and see how many tries it takes to get the variety you want. Combine examples differently.

Example

I'm someone who likes italian food. Let's think of a few examples:

"context": [
        {
          "positive": 39,  // pizza with vegetables
          "negative": 7224 // kebab
        },
        {
          "positive": 2964, // pesto pasta
          "negative": 6072  // salad
        },
        {
          "positive": 104,  // salami pizza
          "negative": 5688  // rice plate
        },
        {
          "positive": 1879, // canelloni
          "negative": 285   // croissant
        },
        {
          "positive": 9218, // lasagna
          "negative": 388   // fries
        }
      ]

For this context, check out how it looks:

Internals

• Makes 20/80 split.
  • 20% of limit is selected from discovery
  • 80% is selected randomly (then scored using discovery). The points selected from discovery are shown a little bigger than the randomly selected.
  • It's not true random, since qdrant does not have an easy way to sample, I just scrolled excluding previous results
• Coloring of points is done by normalizing the scores from the returned points and assigning a color from a red-yellow-green gradient
• New tooltip for showing image with score and id

Qdrant pain points

I encountered these issues that could improve in qdrant to make it a little nicer to work with

• There is no sampling endpoint, so 80% split is likely to use the same points every time (lower ids)
• Inconsistency: /scroll endpoint returns its points in { "points": ... } while searches have { "result": ...}. This is not easy to fix since changes interface.

[fabribet]

I checked the PR, there is some magic at the end I don't entirely understand due to the lack of types context, my comments are just symbolic as this is just a draft :)

[Rendez]

It's better not to modify the original object and instead do:
const result = queryResponse.data.result.map(...)

[Rendez]

Let's move the creation and styling to a separate function?

[coszio]

I don't think it is trivial to separate these two things, since we are already styling within the jsx part

[Rendez]

Could you please check once that it works on Safari and Firefox before merging?

[coszio]

Good check, it works fine in Chrome, Firefox and Safari