Skip to content

Commit 2c12278

Browse files
Classic298Classic298
authored
perf: Debounce various Database Endpoints for less Database Queries and better Backend performance (open-webui#20982)
* Update KnowledgeSelector.svelte * Update KnowledgeSelector.svelte * Update Users.svelte * Update MemberSelector.svelte * Update MemberSelector.svelte * Update Knowledge.svelte * Update Knowledge.svelte * Update Notes.svelte * Update Knowledge.svelte * Update Prompts.svelte * Update Tools.svelte * Update Tools.svelte * Update Prompts.svelte * Update Prompts.svelte * Update Prompts.svelte * Update Functions.svelte * Update UserList.svelte * Update Functions.svelte * Update Prompts.svelte * Update UserList.svelte
1 parent 57a2024 commit 2c12278

11 files changed

Lines changed: 139 additions & 31 deletions

File tree

‎src/lib/components/admin/Functions.svelte‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
const { saveAs } = fileSaver;
55
66
import { WEBUI_NAME, config, functions as _functions, models, settings, user } from '$lib/stores';
7-
import { onMount, getContext, tick } from 'svelte';
7+
import { onMount, getContext, tick, onDestroy } from 'svelte';
88
99
import { goto } from '$app/navigation';
1010
import {
@@ -53,6 +53,7 @@
5353
let viewOption = '';
5454
5555
let query = '';
56+
let searchDebounceTimer: ReturnType<typeof setTimeout>;
5657
let selectedTag = '';
5758
let selectedType = '';
5859
@@ -70,12 +71,14 @@
7071
let functions = null;
7172
let filteredItems = [];
7273
73-
$: if (
74-
functions &&
75-
query !== undefined &&
76-
selectedType !== undefined &&
77-
viewOption !== undefined
78-
) {
74+
$: if (query !== undefined) {
75+
clearTimeout(searchDebounceTimer);
76+
searchDebounceTimer = setTimeout(() => {
77+
setFilteredItems();
78+
}, 300);
79+
}
80+
81+
$: if (functions && selectedType !== undefined && viewOption !== undefined) {
7982
setFilteredItems();
8083
}
8184
@@ -239,6 +242,10 @@
239242
window.removeEventListener('blur-sm', onBlur);
240243
};
241244
});
245+
246+
onDestroy(() => {
247+
clearTimeout(searchDebounceTimer);
248+
});
242249
</script>
243250

244251
<svelte:head>

‎src/lib/components/admin/Users/Groups/Users.svelte‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { getContext } from 'svelte';
2+
import { getContext, onDestroy } from 'svelte';
33
const i18n = getContext('i18n');
44
55
import dayjs from 'dayjs';
@@ -30,6 +30,7 @@
3030
let total = null;
3131
3232
let query = '';
33+
let searchDebounceTimer: ReturnType<typeof setTimeout>;
3334
let orderBy = 'created_at'; // default sort key
3435
let direction = 'desc'; // default sort order
3536
@@ -79,13 +80,21 @@
7980
getUserList();
8081
};
8182
82-
$: if (page !== null && query !== null && orderBy !== null && direction !== null) {
83+
$: if (page !== null && orderBy !== null && direction !== null) {
8384
getUserList();
8485
}
8586
86-
$: if (query) {
87-
page = 1;
87+
$: if (query !== undefined) {
88+
clearTimeout(searchDebounceTimer);
89+
searchDebounceTimer = setTimeout(() => {
90+
page = 1;
91+
getUserList();
92+
}, 300);
8893
}
94+
95+
onDestroy(() => {
96+
clearTimeout(searchDebounceTimer);
97+
});
8998
</script>
9099

91100
<div class=" max-h-full h-full w-full flex flex-col overflow-y-hidden">

‎src/lib/components/admin/Users/UserList.svelte‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
33
import { WEBUI_NAME, config, user, showSidebar } from '$lib/stores';
44
import { goto } from '$app/navigation';
5-
import { onMount, getContext } from 'svelte';
5+
import { onMount, getContext, onDestroy } from 'svelte';
66
77
import dayjs from 'dayjs';
88
import relativeTime from 'dayjs/plugin/relativeTime';
@@ -43,6 +43,7 @@
4343
let total = null;
4444
4545
let query = '';
46+
let searchDebounceTimer: ReturnType<typeof setTimeout>;
4647
let orderBy = 'created_at'; // default sort key
4748
let direction = 'asc'; // default sort order
4849
@@ -97,13 +98,21 @@
9798
}
9899
};
99100
100-
$: if (query) {
101-
page = 1;
101+
$: if (query !== undefined) {
102+
clearTimeout(searchDebounceTimer);
103+
searchDebounceTimer = setTimeout(() => {
104+
page = 1;
105+
getUserList();
106+
}, 300);
102107
}
103108
104-
$: if (query !== null && page !== null && orderBy !== null && direction !== null) {
109+
$: if (page !== null && orderBy !== null && direction !== null) {
105110
getUserList();
106111
}
112+
113+
onDestroy(() => {
114+
clearTimeout(searchDebounceTimer);
115+
});
107116
</script>
108117

109118
<ConfirmDialog

‎src/lib/components/chat/MessageInput/Commands/Knowledge.svelte‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
2626
let selectedIdx = 0;
2727
let items = [];
28+
let searchDebounceTimer: ReturnType<typeof setTimeout>;
2829
2930
export let filteredItems = [];
3031
$: filteredItems = [
@@ -69,10 +70,17 @@
6970
7071
$: items = [...folderItems, ...knowledgeItems, ...fileItems];
7172
72-
$: if (query !== null) {
73-
getItems();
73+
$: if (query !== undefined) {
74+
clearTimeout(searchDebounceTimer);
75+
searchDebounceTimer = setTimeout(() => {
76+
getItems();
77+
}, 200);
7478
}
7579
80+
onDestroy(() => {
81+
clearTimeout(searchDebounceTimer);
82+
});
83+
7684
const getItems = () => {
7785
getFolderItems();
7886
getKnowledgeItems();

‎src/lib/components/chat/MessageInput/Commands/Prompts.svelte‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,22 @@
1111
1212
let selectedPromptIdx = 0;
1313
export let filteredItems = [];
14+
let searchDebounceTimer: ReturnType<typeof setTimeout>;
15+
let debouncedQuery = '';
16+
17+
$: if (query !== undefined) {
18+
clearTimeout(searchDebounceTimer);
19+
searchDebounceTimer = setTimeout(() => {
20+
debouncedQuery = query;
21+
}, 200);
22+
}
23+
24+
onDestroy(() => {
25+
clearTimeout(searchDebounceTimer);
26+
});
1427
1528
$: filteredItems = prompts
16-
.filter((p) => p.command.toLowerCase().includes(query.toLowerCase()))
29+
.filter((p) => p.command.toLowerCase().includes(debouncedQuery.toLowerCase()))
1730
.sort((a, b) => a.name.localeCompare(b.name));
1831
1932
$: if (query) {

‎src/lib/components/notes/Notes.svelte‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
let total = null;
6161
6262
let query = '';
63+
let searchDebounceTimer: ReturnType<typeof setTimeout>;
6364
6465
let sortKey = null;
6566
let displayOption = null;
@@ -163,9 +164,17 @@
163164
await getItemsPage();
164165
};
165166
167+
$: if (query !== undefined) {
168+
clearTimeout(searchDebounceTimer);
169+
searchDebounceTimer = setTimeout(() => {
170+
if (loaded) {
171+
init();
172+
}
173+
}, 300);
174+
}
175+
166176
$: if (
167177
loaded &&
168-
query !== undefined &&
169178
sortKey !== undefined &&
170179
permission !== undefined &&
171180
viewOption !== undefined
@@ -283,6 +292,7 @@
283292
});
284293
285294
onDestroy(() => {
295+
clearTimeout(searchDebounceTimer);
286296
console.log('destroy');
287297
const dropzoneElement = document.getElementById('notes-container');
288298

‎src/lib/components/workspace/Knowledge.svelte‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
dayjs.extend(relativeTime);
55
66
import { toast } from 'svelte-sonner';
7-
import { onMount, getContext, tick } from 'svelte';
7+
import { onMount, getContext, tick, onDestroy } from 'svelte';
88
const i18n = getContext('i18n');
99
1010
import { WEBUI_NAME, knowledge, user } from '$lib/stores';
@@ -36,6 +36,7 @@
3636
3737
let page = 1;
3838
let query = '';
39+
let searchDebounceTimer: ReturnType<typeof setTimeout>;
3940
let viewOption = '';
4041
4142
let items = null;
@@ -44,7 +45,20 @@
4445
let allItemsLoaded = false;
4546
let itemsLoading = false;
4647
47-
$: if (loaded && query !== undefined && viewOption !== undefined) {
48+
$: if (query !== undefined) {
49+
clearTimeout(searchDebounceTimer);
50+
searchDebounceTimer = setTimeout(() => {
51+
if (loaded) {
52+
init();
53+
}
54+
}, 300);
55+
}
56+
57+
onDestroy(() => {
58+
clearTimeout(searchDebounceTimer);
59+
});
60+
61+
$: if (loaded && viewOption !== undefined) {
4862
init();
4963
}
5064

‎src/lib/components/workspace/Models/Knowledge/KnowledgeSelector.svelte‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<script lang="ts">
22
import dayjs from 'dayjs';
33
import { DropdownMenu } from 'bits-ui';
4-
import { onMount, getContext, createEventDispatcher } from 'svelte';
5-
4+
import { onMount, onDestroy, getContext, createEventDispatcher } from 'svelte';
65
import { searchNotes } from '$lib/apis/notes';
76
import { searchKnowledgeBases, searchKnowledgeFiles } from '$lib/apis/knowledge';
87
@@ -26,6 +25,7 @@
2625
let show = false;
2726
2827
let query = '';
28+
let searchDebounceTimer: ReturnType<typeof setTimeout>;
2929
3030
let noteItems = [];
3131
let knowledgeItems = [];
@@ -35,10 +35,17 @@
3535
3636
$: items = [...noteItems, ...knowledgeItems, ...fileItems];
3737
38-
$: if (query !== null) {
39-
getItems();
38+
$: if (query !== undefined) {
39+
clearTimeout(searchDebounceTimer);
40+
searchDebounceTimer = setTimeout(() => {
41+
getItems();
42+
}, 300);
4043
}
4144
45+
onDestroy(() => {
46+
clearTimeout(searchDebounceTimer);
47+
});
48+
4249
const getItems = () => {
4350
getNoteItems();
4451
getKnowledgeItems();

‎src/lib/components/workspace/Prompts.svelte‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
const { saveAs } = fileSaver;
55
66
import { goto } from '$app/navigation';
7-
import { onMount, getContext, tick } from 'svelte';
7+
import { onMount, getContext, tick, onDestroy } from 'svelte';
88
import { WEBUI_NAME, config, prompts as _prompts, user } from '$lib/stores';
99
1010
import {
@@ -32,6 +32,7 @@
3232
import TagSelector from './common/TagSelector.svelte';
3333
import Badge from '$lib/components/common/Badge.svelte';
3434
import Pagination from '../common/Pagination.svelte';
35+
3536
let shiftKey = false;
3637
3738
const i18n = getContext('i18n');
@@ -40,6 +41,7 @@
4041
4142
let importFiles = null;
4243
let query = '';
44+
let searchDebounceTimer: ReturnType<typeof setTimeout>;
4345
4446
let prompts = null;
4547
let tags = [];
@@ -55,7 +57,6 @@
5557
let copiedId: string | null = null;
5658
5759
let page = 1;
58-
let searchDebounceTimer;
5960
6061
// Debounce only query changes
6162
$: if (query !== undefined) {
@@ -195,11 +196,16 @@
195196
window.addEventListener('blur', onBlur);
196197
197198
return () => {
199+
clearTimeout(searchDebounceTimer);
198200
window.removeEventListener('keydown', onKeyDown);
199201
window.removeEventListener('keyup', onKeyUp);
200202
window.removeEventListener('blur', onBlur);
201203
};
202204
});
205+
206+
onDestroy(() => {
207+
clearTimeout(searchDebounceTimer);
208+
});
203209
</script>
204210

205211
<svelte:head>

‎src/lib/components/workspace/Tools.svelte‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import fileSaver from 'file-saver';
44
const { saveAs } = fileSaver;
55
6-
import { onMount, getContext, tick } from 'svelte';
6+
import { onMount, getContext, tick, onDestroy } from 'svelte';
77
const i18n = getContext('i18n');
88
99
import { WEBUI_NAME, config, prompts, tools as _tools, user } from '$lib/stores';
@@ -47,6 +47,7 @@
4747
4848
let showConfirm = false;
4949
let query = '';
50+
let searchDebounceTimer: ReturnType<typeof setTimeout>;
5051
5152
let showManifestModal = false;
5253
let showValvesModal = false;
@@ -62,7 +63,14 @@
6263
6364
let showImportModal = false;
6465
65-
$: if (tools && query !== undefined && viewOption !== undefined) {
66+
$: if (query !== undefined) {
67+
clearTimeout(searchDebounceTimer);
68+
searchDebounceTimer = setTimeout(() => {
69+
setFilteredItems();
70+
}, 300);
71+
}
72+
73+
$: if (tools && viewOption !== undefined) {
6674
setFilteredItems();
6775
}
6876
@@ -179,11 +187,16 @@
179187
window.addEventListener('blur-sm', onBlur);
180188
181189
return () => {
190+
clearTimeout(searchDebounceTimer);
182191
window.removeEventListener('keydown', onKeyDown);
183192
window.removeEventListener('keyup', onKeyUp);
184193
window.removeEventListener('blur-sm', onBlur);
185194
};
186195
});
196+
197+
onDestroy(() => {
198+
clearTimeout(searchDebounceTimer);
199+
});
187200
</script>
188201

189202
<svelte:head>

0 commit comments

Comments
 (0)