Skip to content

Commit bc8a46b

Browse files
siddharthlatestsiddharthlatest
committed
add (example): vector-search example for reactivesearch-vue
- updates other examples for formatting and warning fixes
1 parent bcfaa68 commit bc8a46b

File tree

13 files changed

+386
-20
lines changed

13 files changed

+386
-20
lines changed

‎packages/vue/examples/ai-answer/src/App.vue‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"
3434
class-name="ai-answer"
3535
component-id="AIComponent"
36-
title="AI Chat Box"
36+
title="Use AI Answer for additional search context"
3737
>
3838
<!-- <template v-slot:render="{ loading, data, error }">
3939
<div v-if="loading">loading...</div>
@@ -70,13 +70,13 @@
7070
class-name="result-list-container"
7171
>
7272
<template #renderItem="{ item }">
73-
<div
74-
:id="item._id"
75-
:key="item._id"
73+
<div
74+
:id="item._id"
75+
:key="item._id"
7676
class="flex book-content">
77-
<img
78-
:src="item.image"
79-
alt="Book Cover"
77+
<img
78+
:src="item.image"
79+
alt="Book Cover"
8080
class="book-image" >
8181
<div class="flex column justify-center ml20">
8282
<div class="book-header">{{ item.original_title }}</div>
@@ -95,13 +95,13 @@
9595
class="fas fa-star"
9696
/>
9797
</span>
98-
<span
98+
<span
9999
class="avg-rating"
100100
>({{ item.average_rating }} avg)</span
101101
>
102102
</div>
103103
</div>
104-
<span
104+
<span
105105
class="pub-year"
106106
>Pub {{ item.original_publication_year }}</span
107107
>

‎packages/vue/examples/multi-Range/tsconfig.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"compilerOptions": {
3+
"target": "esnext",
4+
"module": "esnext",
5+
"moduleResolution": "node",
6+
"strict": true,
7+
"jsx": "preserve",
8+
"sourceMap": true,
9+
"resolveJsonModule": true,
10+
"esModuleInterop": true,
11+
"lib": ["esnext", "dom"],
12+
"skipLibCheck": true,
13+
"noEmit": true
14+
},
15+
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
16+
"exclude": ["node_modules"]
17+
}

‎packages/vue/examples/search-box/src/App.vue‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,17 @@
2626
:size="5"
2727
:react="{ and: ['BookSensor'] }"
2828
component-id="SearchResult"
29-
data-field="original_title.keyword"
29+
data-field="_score"
3030
class-name="result-list-container"
3131
>
3232
<template #renderItem="{ item }">
33-
<div
34-
:id="item._id"
35-
:key="item._id"
33+
<div
34+
:id="item._id"
35+
:key="item._id"
3636
class="flex book-content">
37-
<img
38-
:src="item.image"
39-
alt="Book Cover"
37+
<img
38+
:src="item.image"
39+
alt="Book Cover"
4040
class="book-image" >
4141
<div class="flex column justify-center ml20">
4242
<div class="book-header">{{ item.original_title }}</div>
@@ -55,13 +55,13 @@
5555
class="fas fa-star"
5656
/>
5757
</span>
58-
<span
58+
<span
5959
class="avg-rating"
6060
>({{ item.average_rating }} avg)</span
6161
>
6262
</div>
6363
</div>
64-
<span
64+
<span
6565
class="pub-year"
6666
>Pub {{ item.original_publication_year }}</span
6767
>

‎packages/vue/examples/search-box/tsconfig.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"compilerOptions": {
3+
"target": "esnext",
4+
"module": "esnext",
5+
"moduleResolution": "node",
6+
"strict": true,
7+
"jsx": "preserve",
8+
"sourceMap": true,
9+
"resolveJsonModule": true,
10+
"esModuleInterop": true,
11+
"lib": ["esnext", "dom"],
12+
"skipLibCheck": true,
13+
"noEmit": true
14+
},
15+
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
16+
"exclude": ["node_modules"]
17+
}

‎packages/vue/examples/vector-search/README.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Vector Search with ReactiveSearch Vue
2+
3+
This example demonstrates vector search in ReactiveSearch Vue using the `vectorDataField` and `candidates` props. It shows how to implement vector search on a dataset of startup companies.
4+
5+
## Features
6+
7+
- Uses the `vectorDataField` prop to specify which field contains the vector data
8+
- Uses the `candidates` prop to control how many nearest neighbors to return
9+
- Integrates standard ReactiveSearch components like SearchBox and MultiList with vector search
10+
11+
## Running the Example
12+
13+
```bash
14+
# Install dependencies
15+
npm install
16+
17+
# Start the development server
18+
npm run dev
19+
```
20+
21+
## How It Works
22+
23+
1. The SearchBox component's input value is used for the vector search
24+
2. The `vectorDataField` prop in ReactiveList points to the vector field in your index
25+
3. The `candidates` prop controls how many nearest neighbors to return
26+
27+
## Related Concepts
28+
29+
- [Vector Search Documentation](https://docs.appbase.io/docs/search/vector-search)
30+
- [kNN Search (k-Nearest Neighbors)](https://www.elastic.co/guide/en/elasticsearch/reference/current/knn-search.html)

‎packages/vue/examples/vector-search/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Vector Search with ReactiveSearch Vue</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="/src/main.js"></script>
11+
</body>
12+
</html>

‎packages/vue/examples/vector-search/package.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "vector-search-vue",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build",
8+
"preview": "vite preview"
9+
},
10+
"dependencies": {
11+
"@appbaseio/reactivesearch-vue": "3.3.5",
12+
"vue": "^3.2.37"
13+
},
14+
"devDependencies": {
15+
"@vitejs/plugin-vue": "^3.0.0",
16+
"vite": "^3.0.0"
17+
}
18+
}

‎packages/vue/examples/vector-search/src/App.vue‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
<template>
2+
<reactive-base
3+
app="yc-companies-dataset"
4+
url="https://appbase-demo-ansible-abxiydt-arc.searchbase.io"
5+
credentials="a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61"
6+
:enable-appbase="true"
7+
>
8+
<div class="container">
9+
<h2>Vector Search with ReactiveSearch</h2>
10+
<search-box
11+
component-id="search"
12+
:data-field="['name', 'one_liner']"
13+
placeholder="Vector search on a dataset of startup companies, e.g. search for 'gene editing'"
14+
:autosuggest="false"
15+
style="margin-bottom: 1rem"
16+
:URLParams="true"
17+
/>
18+
<selected-filters />
19+
20+
<div class="layout">
21+
<div class="facet-container">
22+
<multi-list
23+
component-id="industries"
24+
data-field="industries.keyword"
25+
title="Industries"
26+
placeholder="Filter by industries"
27+
:show-search="true"
28+
style="margin-bottom: 1rem"
29+
:aggregation-size="96"
30+
:inner-class="{ list: 'facet-list' }"
31+
/>
32+
</div>
33+
34+
<div class="results-container">
35+
<reactive-list
36+
component-id="results"
37+
vector-data-field="vector_data"
38+
:size="20"
39+
:candidates="20"
40+
:pagination="true"
41+
:react="{ and: ['search', 'industries'] }"
42+
:include-fields="[
43+
'name',
44+
'one_liner',
45+
'long_description',
46+
'team_size',
47+
'stage',
48+
'industries',
49+
'website',
50+
'small_logo_thumb_url',
51+
]"
52+
>
53+
<template #render="{ data }">
54+
<div v-for="item in data" :key="item._id" class="result-item">
55+
<img
56+
v-if="item.small_logo_thumb_url"
57+
:src="item.small_logo_thumb_url"
58+
:alt="`${item.name} logo`"
59+
class="company-logo"
60+
/>
61+
<div class="company-info">
62+
<h3 class="company-name">{{ item.name }}</h3>
63+
<p class="company-oneliner">
64+
{{ item.one_liner || item.long_description }}
65+
</p>
66+
<div class="company-meta">
67+
<span v-if="item.team_size" class="meta-item">
68+
Team: {{ item.team_size }}
69+
</span>
70+
<span v-if="item.stage" class="meta-item">
71+
Stage: {{ item.stage }}
72+
</span>
73+
</div>
74+
<div
75+
v-if="item.industries && item.industries.length > 0"
76+
class="company-tags"
77+
>
78+
<span
79+
v-for="ind in item.industries"
80+
:key="ind"
81+
class="tag"
82+
>
83+
{{ ind }}
84+
</span>
85+
</div>
86+
<a
87+
v-if="item.website"
88+
:href="item.website"
89+
target="_blank"
90+
rel="noopener noreferrer"
91+
class="company-link"
92+
>
93+
Visit website
94+
</a>
95+
</div>
96+
</div>
97+
</template>
98+
<template #renderNoResults>
99+
<div>No results found</div>
100+
</template>
101+
</reactive-list>
102+
103+
<!-- Debug Panel - Shows the queries and responses -->
104+
<div class="debug-panel">
105+
<h3>Debug Information</h3>
106+
<p>
107+
This example demonstrates vector search using the
108+
<code>vectorDataField</code> and <code>candidates</code> props.
109+
</p>
110+
<ul>
111+
<li>
112+
When you search in the search box, the value is used for the
113+
vector search
114+
</li>
115+
<li>
116+
The <code>vectorDataField</code> prop points to the vector field
117+
in your index
118+
</li>
119+
<li>
120+
The <code>candidates</code> prop controls how many nearest
121+
neighbors to return
122+
</li>
123+
</ul>
124+
</div>
125+
</div>
126+
</div>
127+
</div>
128+
</reactive-base>
129+
</template>
130+
131+
<script>
132+
import {
133+
ReactiveBase,
134+
SearchBox,
135+
MultiList,
136+
ReactiveList,
137+
SelectedFilters,
138+
} from '@appbaseio/reactivesearch-vue'
139+
140+
export default {
141+
name: 'App',
142+
components: {
143+
ReactiveBase,
144+
SearchBox,
145+
MultiList,
146+
ReactiveList,
147+
SelectedFilters,
148+
}
149+
}
150+
</script>

‎packages/vue/examples/vector-search/src/main.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createApp } from 'vue'
2+
import App from './App.vue'
3+
import './styles.css'
4+
5+
createApp(App).mount('#app')

0 commit comments

Comments
 (0)