fix readme; mouse handler

Signed-off-by: min.tian <[email protected]>

README.md

@@ -4,12 +4,18 @@
 
 Feder is built for visualizing anns index files, so that we can have a better understanding of anns and high dimensional vectors. so far, we are focusing on the index from Faiss (only ivf_flat) and HNSWlib (hnsw), we will cover more index types later.
 
-- HNSW - Overview
-  ![image](./fig/hnsw_overview.png)
-
 - HNSW - Search View
   ![image](./fig/hnsw_search.png)
 
+- IVF_Flat
+  - Coarse Search
+    ![image](./fig/ivfflat_coarse.png)
+
+- IVF_Flat
+  - Fine Search
+    ![image](./fig/ivfflat_fine_polar.png)
+    ![image](./fig/ivfflat_fine_project.png)
+
 ## Quick start
 
 Feder is implemented in **javascript**, and we also provide a python library **federpy**, which is based on federjs.
@@ -222,19 +228,19 @@ Visualize the overview
 feder.overview();
 ```
 
-or
+or visualize the search process.
 
 ```js
-feder.search(target_vector);
+feder.search(target_vector[, targetMediaUrl]);
 ```
 
-or
+or randomly select an vector as the target to visualize the search process.
 
 ```js
 feder.searchRandTestVec();
 ```
 
-![image](./fig/hnsw_search.png)
+More cases refer to the **test/test.js** 
 
 ## Join us
 

federjs/FederView/IvfflatView/index.js

@@ -184,8 +184,8 @@ export default class IvfflatView extends BaseView {
             images: this.listIds[hoveredClusterId].map((listId) =>
               this.mediaCallback(listId)
             ),
-            x: x / this.canvasScale,
-            y: y / this.canvasScale,
+            x: this.hoveredCluster.OVPolyCentroid[0] / this.canvasScale,
+            y: this.hoveredCluster.OVPolyCentroid[1] / this.canvasScale,
           });
         }
       }
@@ -225,8 +225,8 @@ export default class IvfflatView extends BaseView {
               images: this.listIds[hoveredClusterId].map((listId) =>
                 this.mediaCallback(listId)
               ),
-              x: x / this.canvasScale,
-              y: y / this.canvasScale,
+              x: this.hoveredCluster.SVPolyCentroid[0] / this.canvasScale,
+              y: this.hoveredCluster.SVPolyCentroid[1] / this.canvasScale,
             });
           }
         }

test/bundle.js

@@ -17026,8 +17026,8 @@ ${indentData}`);
               hoveredCluster: this.hoveredCluster,
               listIds: this.listIds[hoveredClusterId],
               images: this.listIds[hoveredClusterId].map((listId) => this.mediaCallback(listId)),
-              x: x3 / this.canvasScale,
-              y: y4 / this.canvasScale
+              x: this.hoveredCluster.OVPolyCentroid[0] / this.canvasScale,
+              y: this.hoveredCluster.OVPolyCentroid[1] / this.canvasScale
             });
           }
         }
@@ -17057,8 +17057,8 @@ ${indentData}`);
                 hoveredCluster: this.hoveredCluster,
                 listIds: this.listIds[hoveredClusterId],
                 images: this.listIds[hoveredClusterId].map((listId) => this.mediaCallback(listId)),
-                x: x3 / this.canvasScale,
-                y: y4 / this.canvasScale
+                x: this.hoveredCluster.SVPolyCentroid[0] / this.canvasScale,
+                y: this.hoveredCluster.SVPolyCentroid[1] / this.canvasScale
               });
             }
           }

test/test.js

@@ -87,17 +87,21 @@ const testIVFFlatWithImages = async (filePath) => {
 };
 
 window.addEventListener('DOMContentLoaded', async () => {
-  // const feder = await testIVFFlat('data/faiss_ivf_flat.index');
-  const feder = await testIVFFlatWithImages(
-    'https://assets.zilliz.com/faiss_ivf_flat_voc_17k_ab112eec72.index'
-  );
+  // random data without images
   // const feder = await testHNSW('data/hnswlib_hnsw_random_1M.index');
+
+  // voc data without images
   // const feder = await testHNSW(
   //   'https://assets.zilliz.com/hnswlib_hnsw_voc_17k_1f1dfd63a9.index'
   // );
+
+  // voc data with images
   // const feder = await testHNSWWithImages(
   //   'https://assets.zilliz.com/hnswlib_hnsw_voc_17k_1f1dfd63a9.index'
   // );
+  const feder = await testIVFFlatWithImages(
+    'https://assets.zilliz.com/faiss_ivf_flat_voc_17k_ab112eec72.index'
+  );
   console.log(feder);
   // feder.overview();
   feder.setSearchParams({