chore[visualize-tab]: fix inconsistency in Visualize tab and add documentation

src/components/VisualizeChart/renderBy.js

@@ -66,19 +66,23 @@ export function generateColorBy(points, colorBy = null) {
     colorBy = { payload: colorBy };
   }
 
+  function getNestedValue(obj, path) {
+    return path.split('.').reduce((acc, part) => acc && acc[part], obj);
+  }
+
   if (colorBy.payload) {
     const valuesToColor = {};
 
     return points.map((point) => {
-      const payloadValue = point.payload[colorBy.payload];
-      if (!payloadValue) {
+      const payloadValue = getNestedValue(point.payload, colorBy.payload);
+      if (payloadValue === undefined || payloadValue === null) {
         return BACKGROUND_COLOR;
       }
       return colorByPayload(payloadValue, valuesToColor);
     });
   }
 
-  if (colorBy.discover_score || colorBy.query) {
+  if (colorBy.query) {
     const scores = points.map((point) => point.score);
     const minScore = Math.min(...scores);
     const maxScore = Math.max(...scores);

src/components/VisualizeChart/requestData.js

@@ -1,9 +1,5 @@
 /* eslint-disable camelcase */
-export function requestData(
-  qdrantClient,
-  collectionName,
-  { limit, filter = null, vector_name = null, color_by = null }
-) {
+export function requestData(qdrantClient, collectionName, { limit, filter = null, using = null, color_by = null }) {
   // Based on the input parameters, we need to decide what kind of request we need to send
   // By default we should do scroll request
   // But if we have color_by field which uses query, it should be used instead
@@ -13,8 +9,9 @@ export function requestData(
       query: color_by.query,
       limit: limit,
       filter: filter,
-      with_vector: vector_name ? [vector_name] : true,
+      with_vector: using ? [using] : true,
       with_payload: true,
+      using: using ?? null,
     };
 
     return qdrantClient.query(collectionName, query);
@@ -25,7 +22,7 @@ export function requestData(
   const scrollQuery = {
     limit: limit,
     filter: filter,
-    with_vector: vector_name ? [vector_name] : true,
+    with_vector: using ? [using] : true,
     with_payload: true,
   };
 

src/components/VisualizeChart/worker.js

@@ -30,7 +30,7 @@ self.onmessage = function (e) {
   const data = [];
 
   const points = e.data?.result?.points;
-  const vectorName = params.vector_name;
+  const vectorName = params.using;
 
   if (!points || points.length === 0) {
     self.postMessage({
@@ -71,7 +71,7 @@ self.onmessage = function (e) {
     if (vectorType === 'named') {
       self.postMessage({
         data: [],
-        error: 'Please select a valid vector name, default vector is not defined',
+        error: 'Please select a valid vector name (by `using`), default vector is not defined',
       });
       return;
     }

src/pages/Visualize.jsx

@@ -37,7 +37,13 @@ const query = `
 //                  "payload": "field_name"
 //                }
 //
-// - 'vector_name': specify which vector to use for visualization
+//                or
+//                "color_by": {
+//                  "query": 17
+//                }
+//                see https://qdrant.tech/documentation/concepts/search/#query-api
+//
+// - 'using': specify which vector to use for visualization
 //                  if there are multiple.
 //
 // - 'algorithm': specify algorithm to use for visualization. Available options: 'TSNE', 'UMAP'.
@@ -100,8 +106,8 @@ function Visualize() {
           },
         ],
       },
-      vector_name: {
-        description: 'Vector field name',
+      using: {
+        description: 'Specify which vector to use for visualization',
         type: 'string',
         enum: vectorNames,
       },