Merge pull request #44 from zilliztech/readmeV2

ivfflat_search_view: info panel shouled be updated before animation
zilliztech · Jun 22, 2022 · d93ba20 · d93ba20
2 parents 36d8de8 + c02abc0
commit d93ba20
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 39 deletions.
diff --git a/federjs/FederView/IvfflatView/index.js b/federjs/FederView/IvfflatView/index.js
@@ -174,17 +174,33 @@ export default class IvfflatView extends BaseView {
         ),
     };
     searchViewLayoutData.searchViewType = SEARCH_VIEW_TYPE.voronoi;
-    this.renderCoarseSearch(ctx, infoPanel, searchViewLayoutData);
+    this.updateCoarseSearchInfoPanel(infoPanel, searchViewLayoutData);
+    this.renderCoarseSearch(ctx, searchViewLayoutData);
   }
-  renderCoarseSearch(ctx, infoPanel, searchViewLayoutData) {
+  renderCoarseSearch(ctx, searchViewLayoutData) {
+    renderVoronoiView(ctx, VIEW_TYPE.search, searchViewLayoutData, this);
+  }
+  updateCoarseSearchInfoPanel(infoPanel, searchViewLayoutData) {
     infoPanel.setOverviewPanelPos(
       !searchViewLayoutData.targetNode.isLeft_coarseLevel
     );
     infoPanel.updateSearchViewCoarseOverviewInfo(searchViewLayoutData, this);
-    renderVoronoiView(ctx, VIEW_TYPE.search, searchViewLayoutData, this);
   }
   renderFineSearch(
     ctx,
+    searchViewLayoutData,
+    searchViewType = SEARCH_VIEW_TYPE.polar,
+    hoveredNode
+  ) {
+    renderNodeView(
+      ctx,
+      searchViewLayoutData,
+      this,
+      searchViewType,
+      hoveredNode
+    );
+  }
+  updateFineSearchInfoPanel(
     infoPanel,
     searchViewLayoutData,
     searchViewType = SEARCH_VIEW_TYPE.polar
@@ -199,8 +215,6 @@ export default class IvfflatView extends BaseView {
         searchViewLayoutData,
         this
       );
-
-    renderNodeView(ctx, searchViewLayoutData, this, searchViewType);
   }
   switchSearchView(searchViewType, ctx, infoPanel, searchViewLayoutData) {
     if (searchViewType == searchViewLayoutData.searchViewType) return;
@@ -211,15 +225,15 @@ export default class IvfflatView extends BaseView {
     // coarse => fine
 
     if (oldSearchViewType === SEARCH_VIEW_TYPE.voronoi) {
-      console.log('coarse => fine [start]');
+      // console.log('coarse => fine [start]');
+      this.updateFineSearchInfoPanel(
+        infoPanel,
+        searchViewLayoutData,
+        newSearchViewType
+      );
       const endCallback = () => {
         searchViewLayoutData.searchViewType = newSearchViewType;
-        this.renderFineSearch(
-          ctx,
-          infoPanel,
-          searchViewLayoutData,
-          newSearchViewType
-        );
+        this.renderFineSearch(ctx, searchViewLayoutData, newSearchViewType);
       };
       animateCoarse2Fine(
         oldSearchViewType,
@@ -233,10 +247,11 @@ export default class IvfflatView extends BaseView {
 
     // fine => coarse
     if (newSearchViewType === SEARCH_VIEW_TYPE.voronoi) {
-      console.log('fine => coarse [start]');
+      // console.log('fine => coarse [start]');
+      this.updateCoarseSearchInfoPanel(infoPanel, searchViewLayoutData);
       const endCallback = () => {
         searchViewLayoutData.searchViewType = newSearchViewType;
-        this.renderCoarseSearch(ctx, infoPanel, searchViewLayoutData);
+        this.renderCoarseSearch(ctx, searchViewLayoutData);
       };
       animateFine2Coarse(
         oldSearchViewType,
@@ -253,15 +268,15 @@ export default class IvfflatView extends BaseView {
       newSearchViewType !== SEARCH_VIEW_TYPE.voronoi &&
       oldSearchViewType !== SEARCH_VIEW_TYPE.voronoi
     ) {
-      console.log('fine - intra [start]');
+      this.updateFineSearchInfoPanel(
+        infoPanel,
+        searchViewLayoutData,
+        newSearchViewType
+      );
+      // console.log('fine - intra [start]');
       const endCallback = () => {
         searchViewLayoutData.searchViewType = newSearchViewType;
-        this.renderFineSearch(
-          ctx,
-          infoPanel,
-          searchViewLayoutData,
-          newSearchViewType
-        );
+        this.renderFineSearch(ctx, searchViewLayoutData, newSearchViewType);
       };
       animateFine2Fine(
         oldSearchViewType,
@@ -340,7 +355,6 @@ export default class IvfflatView extends BaseView {
           hoveredNode = currentHoveredNode;
           this.renderFineSearch(
             ctx,
-            infoPanel,
             searchViewLayoutData,
             searchViewType,
             hoveredNode

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@zilliz/feder",
   "author": "ued@zilliz.com",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "visualization packages for vector space",
   "main": "dist/index.js",
   "files": [

diff --git a/test/bundle.js b/test/bundle.js
@@ -17665,44 +17665,49 @@ ${indentData}`);
         switchProject: () => this.switchSearchView(SEARCH_VIEW_TYPE.project, ctx, infoPanel, searchViewLayoutData)
       };
       searchViewLayoutData.searchViewType = SEARCH_VIEW_TYPE.voronoi;
-      this.renderCoarseSearch(ctx, infoPanel, searchViewLayoutData);
+      this.updateCoarseSearchInfoPanel(infoPanel, searchViewLayoutData);
+      this.renderCoarseSearch(ctx, searchViewLayoutData);
     }
-    renderCoarseSearch(ctx, infoPanel, searchViewLayoutData) {
+    renderCoarseSearch(ctx, searchViewLayoutData) {
+      renderVoronoiView(ctx, VIEW_TYPE.search, searchViewLayoutData, this);
+    }
+    updateCoarseSearchInfoPanel(infoPanel, searchViewLayoutData) {
       infoPanel.setOverviewPanelPos(!searchViewLayoutData.targetNode.isLeft_coarseLevel);
       infoPanel.updateSearchViewCoarseOverviewInfo(searchViewLayoutData, this);
-      renderVoronoiView(ctx, VIEW_TYPE.search, searchViewLayoutData, this);
     }
-    renderFineSearch(ctx, infoPanel, searchViewLayoutData, searchViewType = SEARCH_VIEW_TYPE.polar) {
+    renderFineSearch(ctx, searchViewLayoutData, searchViewType = SEARCH_VIEW_TYPE.polar, hoveredNode) {
+      renderNodeView(ctx, searchViewLayoutData, this, searchViewType, hoveredNode);
+    }
+    updateFineSearchInfoPanel(infoPanel, searchViewLayoutData, searchViewType = SEARCH_VIEW_TYPE.polar) {
       searchViewType === SEARCH_VIEW_TYPE.polar && infoPanel.updateSearchViewFinePolarOverviewInfo(searchViewLayoutData, this);
       searchViewType === SEARCH_VIEW_TYPE.project && infoPanel.updateSearchViewFineProjectOverviewInfo(searchViewLayoutData, this);
-      renderNodeView(ctx, searchViewLayoutData, this, searchViewType);
     }
     switchSearchView(searchViewType, ctx, infoPanel, searchViewLayoutData) {
       if (searchViewType == searchViewLayoutData.searchViewType)
         return;
       const oldSearchViewType = searchViewLayoutData.searchViewType;
       const newSearchViewType = searchViewType;
       if (oldSearchViewType === SEARCH_VIEW_TYPE.voronoi) {
-        console.log("coarse => fine [start]");
+        this.updateFineSearchInfoPanel(infoPanel, searchViewLayoutData, newSearchViewType);
         const endCallback = () => {
           searchViewLayoutData.searchViewType = newSearchViewType;
-          this.renderFineSearch(ctx, infoPanel, searchViewLayoutData, newSearchViewType);
+          this.renderFineSearch(ctx, searchViewLayoutData, newSearchViewType);
         };
         animateCoarse2Fine(oldSearchViewType, newSearchViewType, ctx, searchViewLayoutData, this, endCallback);
       }
       if (newSearchViewType === SEARCH_VIEW_TYPE.voronoi) {
-        console.log("fine => coarse [start]");
+        this.updateCoarseSearchInfoPanel(infoPanel, searchViewLayoutData);
         const endCallback = () => {
           searchViewLayoutData.searchViewType = newSearchViewType;
-          this.renderCoarseSearch(ctx, infoPanel, searchViewLayoutData);
+          this.renderCoarseSearch(ctx, searchViewLayoutData);
         };
         animateFine2Coarse(oldSearchViewType, newSearchViewType, ctx, searchViewLayoutData, this, endCallback);
       }
       if (newSearchViewType !== SEARCH_VIEW_TYPE.voronoi && oldSearchViewType !== SEARCH_VIEW_TYPE.voronoi) {
-        console.log("fine - intra [start]");
+        this.updateFineSearchInfoPanel(infoPanel, searchViewLayoutData, newSearchViewType);
         const endCallback = () => {
           searchViewLayoutData.searchViewType = newSearchViewType;
-          this.renderFineSearch(ctx, infoPanel, searchViewLayoutData, newSearchViewType);
+          this.renderFineSearch(ctx, searchViewLayoutData, newSearchViewType);
         };
         animateFine2Fine(oldSearchViewType, newSearchViewType, ctx, searchViewLayoutData, this, endCallback);
       }
@@ -17756,7 +17761,7 @@ ${indentData}`);
           const currentHoveredNode = hoveredNodeIndex >= 0 ? nodes[hoveredNodeIndex] : null;
           if (hoveredNode !== currentHoveredNode) {
             hoveredNode = currentHoveredNode;
-            this.renderFineSearch(ctx, infoPanel, searchViewLayoutData, searchViewType, hoveredNode);
+            this.renderFineSearch(ctx, searchViewLayoutData, searchViewType, hoveredNode);
           }
           const img = hoveredNode && this.mediaCallback ? this.mediaCallback(hoveredNode.id) : "";
           infoPanel.updateSearchViewHoveredNodeInfo({
@@ -18005,6 +18010,6 @@ ${indentData}`);
     document.querySelector(domSelector).appendChild(hnsw_feder.setSearchParams({ k: 6, nprobe: 8, ef: 9 }).searchRandTestVec());
     const ivfflat_feder = yield getFederIvfflat();
     document.querySelector(domSelector).appendChild(ivfflat_feder.overview());
-    document.querySelector(domSelector).appendChild(ivfflat_feder.setSearchParams({ k: 4, nprobe: 6, ef: 6 }).searchById(4365));
+    document.querySelector(domSelector).appendChild(ivfflat_feder.setSearchParams({ k: 9, nprobe: 8, ef: 6 }).searchById(14383));
   }));
 })();
diff --git a/test/config.js b/test/config.js
@@ -2,20 +2,25 @@ import * as d3 from 'd3';
 export const hnswSource = 'hnswlib';
 export const hnswIndexFilePath =
   'https://assets.zilliz.com/hnswlib_hnsw_voc_17k_1f1dfd63a9.index';
+// export const hnswIndexFilePath = 'data/hnswlib_hnsw_voc_17k.index';
 
 export const ivfflatSource = 'faiss';
 export const ivfflatIndexFilePath =
   'https://assets.zilliz.com/faiss_ivf_flat_voc_17k_ab112eec72.index';
+// export const ivfflatIndexFilePath = 'data/faiss_ivf_flat_voc_17k.index';
 
 export const imgNamesFilePath =
   'https://assets.zilliz.com/voc_names_4cee9440b1.csv';
+
 export const getRowId2name = async () => {
   const data = await d3.csv(imgNamesFilePath);
   const rowId2name = (rowId) => data[rowId].name;
-  return rowId2name
+  return rowId2name;
 };
 export const name2imgUrl = (name) =>
   `https://assets.zilliz.com/voc2012/JPEGImages/${name}`;
+// export const name2imgUrl = (name) => `http://[::]:6000/${name}`;
+('');
 export const getRowId2imgUrl = async () => {
   const rowId2name = await getRowId2name();
   const rowId2imgUrl = (rowId) => name2imgUrl(rowId2name(rowId));

diff --git a/test/test.js b/test/test.js
@@ -1,5 +1,6 @@
 import { getFederHnswLite, getFederHnsw } from './testHnsw';
 import { getFederIvfflatLite, getFederIvfflat } from './testIvfflat';
+import * as d3 from 'd3';
 
 const domSelector = '#container';
 window.addEventListener('DOMContentLoaded', async () => {
@@ -19,10 +20,12 @@ window.addEventListener('DOMContentLoaded', async () => {
   const ivfflat_feder = await getFederIvfflat();
 
   document.querySelector(domSelector).appendChild(ivfflat_feder.overview());
-  // select the No.4365 vector as the target
+  // select the specified vector as the target
   document
     .querySelector(domSelector)
     .appendChild(
-      ivfflat_feder.setSearchParams({ k: 4, nprobe: 6, ef: 6 }).searchById(4365)
+      ivfflat_feder
+        .setSearchParams({ k: 9, nprobe: 8, ef: 6 })
+        .searchById(14383)
     );
 });