Merge pull request #36 from zilliztech/optimize_ivf_voronoi

Optimize ivf voronoi; get the node of feder (dom element)
zilliztech · Jun 6, 2022 · 12afe2c · 12afe2c
2 parents eeab02c + a219c49
commit 12afe2c
Show file tree

Hide file tree

Showing 15 changed files with 468 additions and 426 deletions.
diff --git a/federjs/Feder.js b/federjs/Feder.js
@@ -5,7 +5,7 @@ export default class Feder {
     core = null,
     filePath = '',
     source = '',
-    domSelector,
+    domSelector = null,
     viewParams = {},
   }) {
     this.federView = new FederView({ domSelector, viewParams });
@@ -31,6 +31,9 @@ export default class Feder {
     }
   }
 
+  get node() {
+    return this.federView.dom;
+  }
   async overview() {
     this.initCorePromise && (await this.initCorePromise);
     this.federView.overview();

diff --git a/federjs/FederView/BaseView.js b/federjs/FederView/BaseView.js
@@ -3,8 +3,8 @@ import { renderLoading, finishLoading } from './loading';
 import { VIEW_TYPE } from 'Types';
 
 export default class BaseView {
-  constructor({ domSelector, viewParams, getVectorById }) {
-    this.domSelector = domSelector;
+  constructor({ dom, viewParams, getVectorById }) {
+    this.dom = dom;
     this.viewParams = viewParams;
 
     const { width, height, canvasScale, mediaType, mediaCallback } = viewParams;
@@ -18,8 +18,8 @@ export default class BaseView {
     this.mediaCallback = mediaCallback;
   }
   initCanvas() {
-    renderLoading(this.domSelector);
-    const dom = d3.select(this.domSelector);
+    renderLoading(this.dom, this.viewParams.width, this.viewParams.height);
+    const dom = d3.select(this.dom);
     dom.selectAll('canvas').remove();
     const canvas = dom
       .append('canvas')
@@ -43,7 +43,7 @@ export default class BaseView {
     this.clickedNode = null;
     this.hoveredNode = null;
     this.overviewInitPromise && (await this.overviewInitPromise);
-    finishLoading(this.domSelector);
+    finishLoading(this.dom);
     this.renderOverview();
     this.addMouseListener();
     this.setOverviewListenerHandlers();
@@ -55,7 +55,7 @@ export default class BaseView {
     this.clickedNode = null;
     this.hoveredNode = null;
     await this.searchViewHandler({ searchRes });
-    finishLoading(this.domSelector);
+    finishLoading(this.dom);
     this.renderSearchView();
     this.addMouseListener();
     this.setSearchViewListenerHandlers();

diff --git a/federjs/FederView/HnswView/InfoPanel/index.js b/federjs/FederView/HnswView/InfoPanel/index.js
@@ -19,11 +19,10 @@ export const hoveredPanelId = 'feder-info-hovered-panel';
 const panelBackgroundColor = hexWithOpacity(blackColor, 0.6);
 
 export default class InfoPanel {
-  constructor({ domSelector, width, height }) {
-    this.domSelector = domSelector;
+  constructor({ dom, width, height }) {
+    this.dom = dom;
     this.width = width;
     this.height = height;
-    const dom = document.querySelector(domSelector);
 
     const overviewPanel = document.createElement('div');
     overviewPanel.setAttribute('id', overviewPanelId);
@@ -131,7 +130,7 @@ export default class InfoPanel {
   }
 
   renderSelectedPanel(itemList = [], color = '#000') {
-    const panel = d3.select(this.domSelector).select(`#${selectedPanelId}`);
+    const panel = d3.select(this.dom).select(`#${selectedPanelId}`);
     panel.style('color', color);
     if (itemList.length === 0) panel.classed('hide', true);
     else {
@@ -146,7 +145,7 @@ export default class InfoPanel {
     y = 0,
     isLeft = false,
   } = {}) {
-    const panel = d3.select(this.domSelector).select(`#${hoveredPanelId}`);
+    const panel = d3.select(this.dom).select(`#${hoveredPanelId}`);
     if (itemList.length === 0) panel.classed('hide', true);
     else {
       panel.style('color', color);
@@ -168,7 +167,7 @@ export default class InfoPanel {
     }
   }
   renderOverviewPanel(itemList = [], color) {
-    const panel = d3.select(this.domSelector).select(`#${overviewPanelId}`);
+    const panel = d3.select(this.dom).select(`#${overviewPanelId}`);
     panel.style('color', color);
     if (itemList.length === 0) panel.classed('hide', true);
     else {

diff --git a/federjs/FederView/HnswView/index.js b/federjs/FederView/HnswView/index.js
@@ -32,10 +32,10 @@ const defaultHnswViewParams = {
   hoveredPanelLineWidth: 2,
 };
 export default class HnswView extends BaseView {
-  constructor({ indexMeta, domSelector, viewParams, getVectorById }) {
+  constructor({ indexMeta, dom, viewParams, getVectorById }) {
     super({
       indexMeta,
-      domSelector,
+      dom,
       viewParams,
       getVectorById,
     });
@@ -45,7 +45,7 @@ export default class HnswView extends BaseView {
     }
     this.padding = this.padding.map((num) => num * this.canvasScale);
     const infoPanel = new InfoPanel({
-      domSelector,
+      dom,
       width: this.width,
       height: this.height,
     });
@@ -106,7 +106,7 @@ export default class HnswView extends BaseView {
     this.updateSearchViewOverviewInfo({});
   }
   renderSearchView() {
-    const timeControllerView = new TimeControllerView(this.domSelector);
+    const timeControllerView = new TimeControllerView(this.dom);
 
     const callback = ({ t, p }) => {
       renderSearchViewTransition.call(this, { t, p });

diff --git a/federjs/FederView/IvfflatView/InfoPanel/index.js b/federjs/FederView/IvfflatView/InfoPanel/index.js
@@ -17,8 +17,8 @@ export const hoveredPanelId = 'feder-info-hovered-panel';
 const panelBackgroundColor = hexWithOpacity(blackColor, 0.6);
 
 export default class InfoPanel {
-  constructor({ domSelector, width, height }) {
-    this.domSelector = domSelector;
+  constructor({ dom, width, height }) {
+    this.dom = dom;
     this.width = width;
     this.height = height;
 
@@ -27,7 +27,7 @@ export default class InfoPanel {
     this.initStyle();
   }
   initOverviewPanel() {
-    const dom = document.querySelector(this.domSelector);
+    const dom = this.dom;
     const overviewPanel = document.createElement('div');
     overviewPanel.setAttribute('id', overviewPanelId);
     overviewPanel.className =
@@ -222,7 +222,7 @@ export default class InfoPanel {
   }
 
   initHoveredPanel() {
-    const dom = document.querySelector(this.domSelector);
+    const dom = this.dom;
     const hoveredPanel = document.createElement('div');
     hoveredPanel.setAttribute('id', hoveredPanelId);
     hoveredPanel.className = hoveredPanel.className + 'panel-border panel hide';
@@ -416,7 +416,7 @@ export default class InfoPanel {
     document.getElementsByTagName('head').item(0).appendChild(style);
   }
   renderHoveredPanel(itemList = [], color = '#000', x = 0, y = 0) {
-    const panel = d3.select(this.domSelector).select(`#${hoveredPanelId}`);
+    const panel = d3.select(this.dom).select(`#${hoveredPanelId}`);
     if (itemList.length === 0) panel.classed('hide', true);
     else {
       panel.style('color', color);
@@ -444,7 +444,7 @@ export default class InfoPanel {
     }
   }
   renderOverviewPanel(itemList = [], color) {
-    const panel = d3.select(this.domSelector).select(`#${overviewPanelId}`);
+    const panel = d3.select(this.dom).select(`#${overviewPanelId}`);
     panel.style('color', color);
     if (itemList.length === 0) panel.classed('hide', true);
     else {

diff --git a/federjs/FederView/IvfflatView/index.js b/federjs/FederView/IvfflatView/index.js
@@ -14,8 +14,8 @@ import InfoPanel from './InfoPanel';
 
 const defaultIvfflatViewParams = {
   minVoronoiRadius: 4,
-  voronoiForceTime: 3000,
-  nodeCollisionForceTime: 1000,
+  // voronoiForceTime: 3000,
+  // nodeCollisionForceTime: 1000,
   backgroundColor: 'red',
   voronoiStrokeWidth: 2,
   targetNodeStrokeWidth: 5,
@@ -37,13 +37,14 @@ const defaultIvfflatViewParams = {
   animateExitTime: 1500,
   animateEnterTime: 1000,
   fineSearchNodeTransTime: 1200,
+  forceIterations: 100,
 };
 
 export default class IvfflatView extends BaseView {
-  constructor({ indexMeta, domSelector, viewParams }) {
+  constructor({ indexMeta, dom, viewParams }) {
     super({
       indexMeta,
-      domSelector,
+      dom,
       viewParams,
     });
     for (let key in defaultIvfflatViewParams) {
@@ -58,7 +59,7 @@ export default class IvfflatView extends BaseView {
     this.overviewHandler({ indexMeta });
 
     this.infoPanel = new InfoPanel({
-      domSelector,
+      dom,
       width: viewParams.width,
       height: viewParams.height,
     });
@@ -87,6 +88,7 @@ export default class IvfflatView extends BaseView {
     renderVoronoiView.call(this);
   }
   async searchViewHandler({ searchRes }) {
+    this.overviewInitPromise && (await this.overviewInitPromise);
     this.nprobe = searchRes.csResIds.length;
     this.k = searchRes.fsResIds.length;
     this.colorScheme = d3
@@ -98,7 +100,7 @@ export default class IvfflatView extends BaseView {
       })
       .then(() => {});
     await this.searchViewInitPromise;
-    console.log('searchViewHandler finished');
+    console.log('searchView Layout finished');
   }
   renderSearchView() {
     this.renderCoarseSearch();