Skip to content

Commit f092202

Browse files
shanghaikidshanghaikid
authored
Merge pull request #53 from zilliztech/feder_2_infoPanel
feder 1.0
2 parents 23cc16f + 6df64c0 commit f092202

File tree

20 files changed

+966
-822
lines changed

20 files changed

+966
-822
lines changed

‎federjs/Feder.ts‎

Lines changed: 86 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,26 @@
1-
import { ESourceType, TId, TSearchParams, TVec } from 'Types';
1+
import * as d3 from 'd3';
2+
import {
3+
EActionType,
4+
EIndexType,
5+
ESourceType,
6+
EViewType,
7+
TId,
8+
TSearchParams,
9+
TVec,
10+
} from 'Types';
11+
import { TAcitonData } from 'Types/visData';
12+
import { finishLoading, renderLoading, initLoadingStyle } from 'Utils/loading';
213
import { FederIndex, FederLayout, FederView } from '.';
314

4-
export default class Feder {
15+
export class Feder {
516
domSelector: string;
617
initFederPromise: Promise<void>;
718
federIndex: FederIndex;
819
viewParams: any;
920
federLayout: FederLayout;
21+
indexType: EIndexType;
22+
viewType: EViewType;
23+
searchParams: TSearchParams;
1024
constructor({
1125
source,
1226
filePath,
@@ -16,23 +30,90 @@ export default class Feder {
1630
filePath: string;
1731
source: ESourceType;
1832
domSelector?: string;
33+
viewType?: EViewType;
1934
viewParams?: any;
2035
}) {
2136
this.domSelector = domSelector;
37+
const { viewType = EViewType.default } = viewParams;
38+
this.viewType = viewType;
2239
this.viewParams = viewParams;
40+
this.searchParams = {};
2341

2442
this.initFederPromise = new Promise(async (resolve) => {
2543
const arrayBuffer = await fetch(filePath).then((res) =>
2644
res.arrayBuffer()
2745
);
2846
this.federIndex = new FederIndex(source, arrayBuffer);
47+
this.indexType = await this.federIndex.getIndexType();
2948
this.federLayout = new FederLayout(this.federIndex);
3049
resolve();
3150
});
51+
52+
initLoadingStyle();
53+
}
54+
initDom() {
55+
const { width = 800, height = 480 } = this.viewParams;
56+
const node = d3
57+
.create('div')
58+
.style('position', 'relative')
59+
.style('width', width + 'px')
60+
.style('height', height + 'px')
61+
.node();
62+
renderLoading(node, width, height);
63+
return node;
64+
}
65+
overview() {
66+
const node = this.initDom();
67+
68+
this.executeAction(node, EActionType.overview);
69+
70+
return node;
71+
}
72+
search(target: TVec = null, targetMedia: string = null) {
73+
const node = this.initDom();
74+
75+
this.executeAction(node, EActionType.search, {
76+
target,
77+
targetMedia,
78+
searchParams: this.searchParams,
79+
});
80+
81+
return node;
82+
}
83+
84+
executeAction(
85+
node: HTMLElement,
86+
actionType: EActionType,
87+
actionData: TAcitonData = null
88+
) {
89+
new Promise<void>(async (resolve) => {
90+
await this.initFederPromise;
91+
const visData = await this.federLayout.getVisData({
92+
actionType,
93+
actionData,
94+
viewType: this.viewType,
95+
layoutParams: this.viewParams,
96+
});
97+
const federView = new FederView(visData, this.viewParams);
98+
(node as any).federView = federView;
99+
finishLoading(node);
100+
node.appendChild(federView.node);
101+
federView.render();
102+
103+
resolve();
104+
});
105+
106+
if (this.domSelector) {
107+
const container = d3.select(this.domSelector);
108+
// container.selectAll('*').remove();
109+
(container.node() as HTMLElement).appendChild(node);
110+
}
32111
}
33-
overview() {}
34-
search(target: TVec = null, targetContent: string = null) {}
35112
searchById(id: TId) {}
36113
searchByRandTestVec() {}
37-
setSearchParams(params: TSearchParams) {}
114+
setSearchParams(params: TSearchParams) {
115+
this.searchParams = params;
116+
}
38117
}
118+
119+
export default Feder;

‎federjs/FederView/hnswView/HnswOverview/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ export default class HnswOverview implements TViewHandler {
4444
nodesCount: number[];
4545
linksCount: number[];
4646
constructor(visData: TVisDataHnswOverview, viewParams: TViewParamsHnsw) {
47+
if (!viewParams.mediaContent && !!viewParams.mediaCallback)
48+
viewParams.mediaContent = viewParams.mediaCallback;
4749
this.viewParams = Object.assign({}, defaultViewParamsHnsw, viewParams);
4850

4951
this.overviewNodesLevels = visData.overviewNodesLevels;

‎federjs/FederView/hnswView/HnswSearchView/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,8 @@ export default class HnswSearchView implements TViewHandler {
5858
viewParams: TViewParamsHnsw,
5959
actionData: TAcitonData
6060
) {
61+
if (!viewParams.mediaContent && !!viewParams.mediaCallback)
62+
viewParams.mediaContent = viewParams.mediaCallback;
6163
this.viewParams = Object.assign({}, defaultViewParamsHnsw, viewParams);
6264
this.actionData = actionData;
6365

‎federjs/FederView/hnswView/defaultViewParamsHnsw.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,5 +60,7 @@ export const defaultViewParamsHnsw = {
6060
tipLineAngle: Math.PI / 3,
6161
tipLineColor: '#FFFC85',
6262
tipLineWidth: 2,
63+
64+
mediaContentCount: 9,
6365
} as TViewParamsHnsw;
6466
export default defaultViewParamsHnsw;

‎federjs/FederView/ivfflatView/IvfflatOverview/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ export default class IvfflatOverview implements ViewHandler {
3434
this.overviewClusters = visData.overviewClusters;
3535
this.ntotal = visData.ntotal;
3636
this.nlist = visData.nlist;
37+
if (!viewParams.mediaContent && !!viewParams.mediaCallback)
38+
viewParams.mediaContent = viewParams.mediaCallback;
3739
this.viewParams = Object.assign({}, defaltViewParamsIvfflat, viewParams);
3840
this.init();
3941
}

‎federjs/FederView/ivfflatView/IvfflatOverview/updateHoveredPanel.ts‎

Lines changed: 20 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -9,45 +9,36 @@ export default async function updateHoveredPanel() {
99
return;
1010
}
1111

12+
let mediaContents = [] as TInfoPanelContentItem[];
13+
const representIds = randomSelect(
14+
this.hoveredCluster.ids,
15+
this.viewParams.mediaContentCount
16+
);
1217
if (this.viewParams.mediaType === EMediaType.image) {
1318
const mediaContent = {} as TInfoPanelContentItem;
14-
const representIds = randomSelect(this.hoveredCluster.ids, 9);
1519
mediaContent.images = representIds.map((id) =>
1620
this.viewParams.mediaContent(id)
1721
);
18-
this.hoveredPanel.setContent({
19-
themeColor: '#FFFC85',
20-
hasBorder: true,
21-
content: [
22-
{
23-
text: `cluster-${this.hoveredCluster.clusterId}`,
24-
},
25-
{
26-
text: `including ${this.hoveredCluster.count} vectors`,
27-
},
28-
mediaContent,
29-
],
30-
});
22+
mediaContents.push(mediaContent);
3123
} else if (this.viewParams.mediaType === EMediaType.text) {
32-
const representIds = randomSelect(this.hoveredCluster.ids, 6);
33-
const mediaContents = representIds.map(
24+
mediaContents = representIds.map(
3425
(id) =>
3526
({ text: this.viewParams.mediaContent(id) } as TInfoPanelContentItem)
3627
);
37-
this.hoveredPanel.setContent({
38-
themeColor: '#FFFC85',
39-
hasBorder: true,
40-
content: [
41-
{
42-
text: `cluster-${this.hoveredCluster.clusterId}`,
43-
},
44-
{
45-
text: `including ${this.hoveredCluster.count} vectors`,
46-
},
47-
...mediaContents,
48-
],
49-
});
5028
}
29+
this.hoveredPanel.setContent({
30+
themeColor: '#FFFC85',
31+
hasBorder: true,
32+
content: [
33+
{
34+
text: `cluster-${this.hoveredCluster.clusterId}`,
35+
},
36+
{
37+
text: `including ${this.hoveredCluster.count} vectors`,
38+
},
39+
...mediaContents,
40+
],
41+
});
5142

5243
const { width, height, canvasScale } = this.viewParams;
5344
const pos = vecMultiply(this.hoveredCluster.OVPolyCentroid, 1 / canvasScale);

‎federjs/FederView/ivfflatView/IvfflatSearchView/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,8 @@ export default class IvfflatSearchView implements ViewHandler {
7676
this.polarR = polarR;
7777
this.nlist = nlist;
7878
this.ntotal = ntotal;
79+
if (!viewParams.mediaContent && !!viewParams.mediaCallback)
80+
viewParams.mediaContent = viewParams.mediaCallback;
7981
this.viewParams = Object.assign({}, defaltViewParamsIvfflat, viewParams);
8082
this.init();
8183
}

‎federjs/FederView/ivfflatView/IvfflatSearchView/updateHoveredPanelVoronoiView.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,12 @@ export default async function updateHoveredPanelVoronoiView(
1212
return;
1313
}
1414

15+
const representIds = randomSelect(
16+
this.hoveredCluster.ids,
17+
this.viewParams.mediaContentCount
18+
);
1519
if (this.viewParams.mediaType === EMediaType.image) {
1620
const mediaContent = {} as TInfoPanelContentItem;
17-
const representIds = randomSelect(this.hoveredCluster.ids, 9);
1821
mediaContent.images = representIds.map((id) =>
1922
this.viewParams.mediaContent(id)
2023
);
@@ -32,7 +35,6 @@ export default async function updateHoveredPanelVoronoiView(
3235
],
3336
});
3437
} else if (this.viewParams.mediaType === EMediaType.text) {
35-
const representIds = randomSelect(this.hoveredCluster.ids, 6);
3638
const mediaContents = representIds.map(
3739
(id) =>
3840
({ text: this.viewParams.mediaContent(id) } as TInfoPanelContentItem)

‎federjs/FederView/ivfflatView/defaultViewParamsIvfflat.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@ export const defaltViewParamsIvfflat = {
4040
transitionReplaceTime: 600,
4141
transitionNodesEnterTime: 800,
4242
transitionNodesMoveTime: 800,
43+
44+
mediaContentCount: 9,
4345
} as TViewParamsIvfflat;
4446

4547
export default defaltViewParamsIvfflat;

‎federjs/Types/index.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,10 @@ export enum EMediaType {
7171
}
7272

7373
export type TViewParams = {
74-
mediaType: EMediaType;
75-
mediaContent: (rowId: TId) => string;
74+
mediaType?: EMediaType;
75+
mediaContent?: (rowId: TId) => string;
76+
mediaCallback?: (rowId: TId) => string;
77+
mediaContentCount?: number;
7678
getVectorById: (id: TId) => Promise<TVec>;
7779
};
7880

0 commit comments

Comments
 (0)