zilliztech · alwayslove2013 · Sep 14, 2022 · Sep 14, 2022
diff --git a/federjs/Feder.ts b/federjs/Feder.ts
@@ -2,6 +2,7 @@ import * as d3 from 'd3';
 import {
   EActionType,
   EIndexType,
+  EMediaType,
   ESourceType,
   EViewType,
   TId,
@@ -37,8 +38,15 @@ export class Feder {
     const { viewType = EViewType.default } = viewParams;
     this.viewType = viewType;
 
+    // Compatible with feder_v0.x
     if (!viewParams.mediaContent && !!viewParams.mediaCallback)
       viewParams.mediaContent = viewParams.mediaCallback;
+    if (viewParams.mediaType === 'img') viewParams.mediaType = EMediaType.image;
+    if (!!viewParams.projectSeed && !viewParams?.projectParams?.projectSeed)
+      viewParams.projectParams = Object.assign({}, viewParams.projectParams, {
+        projectSeed: viewParams.projectSeed,
+      });
+
     this.viewParams = viewParams;
 
     this.searchParams = {};

diff --git a/federjs/FederIndex/id2VectorHandler/index.ts b/federjs/FederIndex/id2VectorHandler/index.ts
@@ -26,7 +26,6 @@ const getId2VectorMap = {
 
 export default function id2VectorHandler(index: TIndexStructure) {
   const indexType = index.indexType;
-
   const getId2Vector = getId2VectorMap[indexType];
   const id2Vector = getId2Vector(index);
   return id2Vector;

diff --git a/federjs/FederLayout/visDataHandler/ivfflat/index.ts b/federjs/FederLayout/visDataHandler/ivfflat/index.ts
@@ -33,6 +33,7 @@ const layoutParamsIvfflatDefault = {
   nonTopkNodeR: 3,
   minVoronoiRadius: 5,
   projectPadding: [20, 30, 20, 30],
+  staticPanelWidth: 240,
 };
 export default class FederLayoutIvfflat implements TFederLayoutHandler {
   overviewLayoutParams: TLayoutParamsIvfflat = {};

diff --git a/federjs/FederLayout/visDataHandler/ivfflat/search/finePolar.ts b/federjs/FederLayout/visDataHandler/ivfflat/search/finePolar.ts
@@ -22,7 +22,12 @@ export const ivfflatSearchViewLayoutFinePolar = ({
   polarMaxR: number;
 }) =>
   new Promise<TVisDataIvfflatSearchViewNode[]>((resolve) => {
-    const { numForceIterations, nonTopkNodeR, canvasScale, polarRadiusUpperBound } = layoutParams;
+    const {
+      numForceIterations,
+      nonTopkNodeR,
+      canvasScale,
+      polarRadiusUpperBound,
+    } = layoutParams;
     const clusterId2cluster = {} as {
       [clusterId: TId]: TVisDataIvfflatSearchViewCluster;
     };
@@ -41,8 +46,13 @@ export const ivfflatSearchViewLayoutFinePolar = ({
     searchViewNodes.sort((a, b) => a.distance - b.distance);
 
     // distance scale
-    const minDis = getPercentile(searchViewNodes, 'distance', 0);
-    const maxDis = getPercentile(searchViewNodes, 'distance', polarRadiusUpperBound);
+    const minDis =
+      searchViewNodes[Math.min(searchViewNodes.length - 1, 1)].distance;
+    const maxDis = getPercentile(
+      searchViewNodes,
+      'distance',
+      polarRadiusUpperBound
+    );
     const r = d3
       .scaleLinear()
       .domain([minDis, maxDis])

diff --git a/federjs/FederLayout/visDataHandler/ivfflat/search/fineProject.ts b/federjs/FederLayout/visDataHandler/ivfflat/search/fineProject.ts
@@ -22,6 +22,7 @@ export const ivfflatSearchViewLayoutFineProject = ({
   new Promise<void>((resolve) => {
     const {
       projectPadding,
+      staticPanelWidth,
       width,
       height,
       canvasScale,
@@ -44,13 +45,20 @@ export const ivfflatSearchViewLayoutFineProject = ({
       node.projection = searchviewNodesProjection[i];
     });
 
+    const xRange = targetNode.isLeft_coarseLevel
+      ? [
+          projectPadding[3] * canvasScale,
+          (width - projectPadding[1]) * canvasScale -
+            staticPanelWidth * canvasScale,
+        ]
+      : [
+          projectPadding[3] * canvasScale + staticPanelWidth * canvasScale,
+          (width - projectPadding[1]) * canvasScale,
+        ];
     const x = d3
       .scaleLinear()
       .domain(d3.extent(searchViewNodes, (node) => node.projection[0]))
-      .range([
-        projectPadding[3] * canvasScale,
-        (width - projectPadding[1]) * canvasScale,
-      ]);
+      .range(xRange);
     const y = d3
       .scaleLinear()
       .domain(d3.extent(searchViewNodes, (node) => node.projection[1]))

diff --git a/federjs/FederView/hnswView/defaultViewParamsHnsw.ts b/federjs/FederView/hnswView/defaultViewParamsHnsw.ts
@@ -62,5 +62,11 @@ export const defaultViewParamsHnsw = {
   tipLineWidth: 2,
 
   mediaContentCount: 9,
+
+  staticPanelWidth: 240,
+  hoveredPanelWidth: 250,
+  clickedPanelWidth: 210,
+
+  getVectorById: async () => [],
 } as TViewParamsHnsw;
 export default defaultViewParamsHnsw;
diff --git a/federjs/FederView/hnswView/infoPanelStyles.ts b/federjs/FederView/hnswView/infoPanelStyles.ts
@@ -1,31 +1,48 @@
 import { hexWithOpacity } from 'FederView/renderUtils2D';
 
-export const staticPanelStyles = ({ width, height, padding }) => ({
+export const staticPanelStyles = ({
+  height,
+  staticPanelWidth,
+}: {
+  height: number;
+  staticPanelWidth?: number;
+}) => ({
   position: 'absolute',
   left: '16px',
   top: '16px',
-  width: padding ? `${padding[3] + 10}px` : `${width * 0.3}px`,
+
+  width: `${staticPanelWidth}px`,
   'max-height': `${height - 110}px`,
   overflow: 'auto',
   borderColor: '#FFFFFF',
   backgroundColor: hexWithOpacity('#000000', 0.6),
   // pointerEvents: 'none',
 });
 
-export const clickedPanelStyles = ({ width, height, padding }) => ({
+export const clickedPanelStyles = ({
+  height,
+  clickedPanelWidth,
+}: {
+  height: number;
+  clickedPanelWidth?: number;
+}) => ({
   position: 'absolute',
   right: '16px',
   top: '16px',
-  width: padding ? `${padding[1] - 10}px` : `${width * 0.3}px`,
+  width: `${clickedPanelWidth}px`,
   'max-height': `${height - 60}px`,
   overflow: 'auto',
   borderColor: '#FFFFFF',
   backgroundColor: hexWithOpacity('#000000', 0.6),
 });
 
-export const hoveredPanelStyles = ({ width }) => ({
+export const hoveredPanelStyles = ({
+  hoveredPanelWidth,
+}: {
+  hoveredPanelWidth: number;
+}) => ({
   position: 'absolute',
-  width: `${width * 0.3}px`,
+  width: `${hoveredPanelWidth}px`,
   paddingLeft: '6px',
   left: 0,
   top: 0,

diff --git a/federjs/FederView/ivfflatView/IvfflatSearchView/updateHoveredPanelNodeView.ts b/federjs/FederView/ivfflatView/IvfflatSearchView/updateHoveredPanelNodeView.ts
@@ -21,6 +21,7 @@ export default async function updateHoveredPanelNodeView(
     hasBorder: false,
     content: [
       { title: `Row No. ${node.id}` },
+      { text: `distance: ${node.distance.toFixed(3)}` },
       {
         text: `belong to cluster-${node.clusterId}`,
       },

diff --git a/federjs/FederView/ivfflatView/defaultViewParamsIvfflat.ts b/federjs/FederView/ivfflatView/defaultViewParamsIvfflat.ts
@@ -42,6 +42,11 @@ export const defaltViewParamsIvfflat = {
   transitionNodesMoveTime: 800,
 
   mediaContentCount: 9,
+  staticPanelWidth: 240,
+  hoveredPanelWidth: 250,
+  clickedPanelWidth: 210,
+
+  getVectorById: async () => []
 } as TViewParamsIvfflat;
 
 export default defaltViewParamsIvfflat;
diff --git a/federjs/FederView/ivfflatView/infoPanelStyles.ts b/federjs/FederView/ivfflatView/infoPanelStyles.ts
@@ -1,18 +1,16 @@
 import { hexWithOpacity } from 'FederView/renderUtils2D';
 
 export const staticPanelStyles = ({
-  width,
   height,
-  padding,
+  staticPanelWidth,
 }: {
-  width: number;
   height: number;
-  padding?: number[];
+  staticPanelWidth?: number;
 }) => ({
   position: 'absolute',
   left: '16px',
   top: '16px',
-  width: padding ? `${padding[3] + 10}px` : `${width * 0.3}px`,
+  width: `${staticPanelWidth}px`,
   'max-height': `${height - 110}px`,
   overflow: 'auto',
   borderColor: '#FFFFFF',
@@ -21,27 +19,25 @@ export const staticPanelStyles = ({
 });
 
 export const clickedPanelStyles = ({
-  width,
   height,
-  padding,
+  clickedPanelWidth,
 }: {
-  width: number;
   height: number;
-  padding?: number[];
+  clickedPanelWidth?: number;
 }) => ({
   position: 'absolute',
   right: '16px',
   top: '16px',
-  width: padding ? `${padding[1] - 10}px` : `${width * 0.3}px`,
+  width: `${clickedPanelWidth}px`,
   'max-height': `${height - 60}px`,
   overflow: 'auto',
   borderColor: '#FFFFFF',
   backgroundColor: hexWithOpacity('#000000', 0.6),
 });
 
-export const hoveredPanelStyles = ({ width }) => ({
+export const hoveredPanelStyles = ({ hoveredPanelWidth }: {hoveredPanelWidth: number}) => ({
   position: 'absolute',
-  width: `${width * 0.3}px`,
+  width: `${hoveredPanelWidth}px`,
   paddingLeft: '6px',
   left: 0,
   top: 0,

diff --git a/federjs/Types/visData/visDataHnswDefault.ts b/federjs/Types/visData/visDataHnswDefault.ts
@@ -142,6 +142,10 @@ export interface TViewParamsHnsw extends TViewParams {
   tipLineAngle?: number;
   tipLineColor?: string;
   tipLineWidth?: number;
+
+  staticPanelWidth?: number;
+  hoveredPanelWidth: number;
+  clickedPanelWidth: number;
 }
 
 export interface TLayoutParamsHnsw {

diff --git a/federjs/Types/visData/visDataIvfflat.ts b/federjs/Types/visData/visDataIvfflat.ts
@@ -85,6 +85,7 @@ export interface TLayoutParamsIvfflat {
   polarRadiusUpperBound?: number;
 
   projectPadding?: [number, number, number, number];
+  staticPanelWidth?: number;
 }
 
 export interface TViewParamsIvfflat extends TViewParams {
@@ -127,4 +128,8 @@ export interface TViewParamsIvfflat extends TViewParams {
   transitionReplaceTime: number;
   transitionNodesEnterTime: number;
   transitionNodesMoveTime: number;
+
+  staticPanelWidth?: number;
+  hoveredPanelWidth: number;
+  clickedPanelWidth: number;
 }