From 07958e28efb9a6e4d23838e68e12d86f885f3890 Mon Sep 17 00:00:00 2001 From: kartik-gupta-ij Date: Sat, 26 Oct 2024 17:19:45 +0530 Subject: [PATCH] chore(search-quality): layout changes --- .../Collections/SearchQuality/ExplainLog.mdx | 44 +++++ .../SearchQuality/SearchQuality.jsx | 151 ++++++++++-------- .../SearchQuality/SearchQualityPanel.jsx | 81 +++++----- .../SearchQuality/check-index-precision.js | 4 +- src/components/EditorCommon/index.jsx | 5 +- 5 files changed, 178 insertions(+), 107 deletions(-) create mode 100644 src/components/Collections/SearchQuality/ExplainLog.mdx diff --git a/src/components/Collections/SearchQuality/ExplainLog.mdx b/src/components/Collections/SearchQuality/ExplainLog.mdx new file mode 100644 index 00000000..2d827d60 --- /dev/null +++ b/src/components/Collections/SearchQuality/ExplainLog.mdx @@ -0,0 +1,44 @@ +### Example Output: +```json +[18/10/2024, 01:51:38] Point ID 1(1/100) precision@10: 0.8 +(search time exact: 30ms, regular: 5ms) +``` + +### Explanation + +This output provides a comparison between: +- **Exact Search** (full kNN) +- **Approximate Search** (using ANN - Approximate Nearest Neighbor) + +**precision@10: 0.8** +- Out of the top 10 results returned by the exact search, 8 were also found in the ANN search. + +**Search Time Comparison** +- Exact search: 30ms +- ANN search: 5ms (faster but with minor accuracy loss) + +--- + +### Tuning the HNSW Algorithm (Advanced Mode) + +- **"hnsw_ef" parameter**: Controls how many neighbors to consider during a search. + - Increasing **hnsw_ef** improves precision but may slow down the search. + +--- + +### Practical Use + +The ANN search (with HNSW) is significantly faster (5ms vs. 30ms) but may have slight accuracy trade-offs. +**Tip**: Adjust **hnsw_ef** in advanced mode to balance speed and accuracy. + +--- + +### Additional Tuning Parameters (set in collection configuration) + +1. **"m" Parameter** + - Defines the number of edges per node in the graph. + - A higher **m** value improves accuracy but increases memory usage. + +2. **"ef_construct" Parameter** + - Sets the number of neighbors considered during index creation. + - Higher values increase precision but lengthen indexing time. \ No newline at end of file diff --git a/src/components/Collections/SearchQuality/SearchQuality.jsx b/src/components/Collections/SearchQuality/SearchQuality.jsx index 6efe38b2..ba9d7c34 100644 --- a/src/components/Collections/SearchQuality/SearchQuality.jsx +++ b/src/components/Collections/SearchQuality/SearchQuality.jsx @@ -4,29 +4,13 @@ import { getSnackbarOptions } from '../../Common/utils/snackbarOptions'; import { useClient } from '../../../context/client-context'; import SearchQualityPanel from './SearchQualityPanel'; import { useSnackbar } from 'notistack'; -import { Box, Card, CardHeader } from '@mui/material'; +import { Box, Card, CardContent, CardHeader, Grid } from '@mui/material'; import { CopyButton } from '../../Common/CopyButton'; import { bigIntJSON } from '../../../common/bigIntJSON'; import EditorCommon from '../../EditorCommon'; import _ from 'lodash'; - -const explainLog = `Example Output: [18/10/2024, 01:51:38] Point ID 1(1/100) precision@10: 0.8 (search time exact: 30ms, regular: 5ms) - -Explanation: -This output compares the performance of an exact search (full kNN) versus an approximate search using ANN (Approximate Nearest Neighbor). - -- precision@10: 0.8: Out of the top 10 results returned by the exact search, 8 were also found in the ANN search. -- Search Time: The exact search took 30ms, whereas the ANN search was much faster, taking only 5ms, but with a small loss in accuracy. - -Tuning the HNSW Algorithm (Advanced mode): -- "hnsw_ef" parameter: Controls how many neighbors to consider during a search. Increasing "hnsw_ef" improves precision but slows down the search. - -Practical Use: -- The ANN search (with HNSW) is significantly faster (5ms compared to 30ms) but slightly less accurate (precision@10: 0.8). You can adjust parameters like "hnsw_ef" in advanced mode to find the right balance between speed and accuracy. - -Additional Tuning Parameters (need to be set in collection configuration): -1. "m" Parameter : Defines the number of edges per node in the graph. A higher "m" value improves accuracy but uses more memory. -2. "ef_construct" Parameter: Sets the number of neighbors to consider during index creation. A higher value increases precision but requires more time during indexing.`; +import * as ExplainLog from './ExplainLog.mdx'; +import { mdxComponents } from '../../InteractiveTutorial/MdxComponents/MdxComponents'; const SearchQuality = ({ collectionName }) => { const { enqueueSnackbar, closeSnackbar } = useSnackbar(); @@ -37,9 +21,7 @@ const SearchQuality = ({ collectionName }) => { const handleLogUpdate = (newLog) => { const date = new Date().toLocaleString(); newLog = `[${date}] ${newLog}`; - setLog((prevLog) => { - return newLog + '\n' + prevLog; - }); + setLog((prevLog) => newLog + '\n' + prevLog); }; const clearLogs = () => { @@ -49,17 +31,12 @@ const SearchQuality = ({ collectionName }) => { useEffect(() => { client .getCollection(collectionName) - .then((res) => { - setCollection(() => { - return { ...res }; - }); - }) + .then((res) => setCollection({ ...res })) .catch((err) => { enqueueSnackbar(err.message, getSnackbarOptions('error', closeSnackbar)); }); }, []); - // Check that collection.config.params.vectors?.size exists and integer const isNamedVectors = !collection?.config?.params.vectors?.size && _.isObject(collection?.config?.params?.vectors); let vectors = {}; if (collection) { @@ -67,46 +44,92 @@ const SearchQuality = ({ collectionName }) => { } return ( - <> - {collection?.config?.params?.vectors && ( - - )} + + + {collection?.config?.params?.vectors && ( + + )} + + + + + + + - - + } - /> - - + } /> + - - - + > + + + + + ); }; diff --git a/src/components/Collections/SearchQuality/SearchQualityPanel.jsx b/src/components/Collections/SearchQuality/SearchQualityPanel.jsx index acbac903..a842c56c 100644 --- a/src/components/Collections/SearchQuality/SearchQualityPanel.jsx +++ b/src/components/Collections/SearchQuality/SearchQualityPanel.jsx @@ -229,7 +229,7 @@ const SearchQualityPanel = ({ collectionName, vectors, loggingFoo, clearLogsFoo, Math.sqrt(precisions.reduce((x, val) => x + (val - avgPrecision) ** 2, 0) / precisions.length) ); - loggingFoo('Mean precision@' + limit + ' for collection: ' + avgPrecision + ' ± ' + stdDev); + loggingFoo('Mean precision@' + limit + ' for collection: ' + avgPrecision + ' ± ' + stdDev + '\n'); setPrecision((prev) => { return { @@ -275,46 +275,49 @@ const SearchQualityPanel = ({ collectionName, vectors, loggingFoo, clearLogsFoo, }} action={} /> + {!advancedMod && ( - - - - - - Vector Name - - - - - Size - - - - - Distance - - - - - Precision - - - - + +
+ + + + + Vector Name + + + + + Size + + + + + Distance + + + + + Precision + + + + - - {Object.keys(vectors).map((vectorName) => ( - onCheckIndexQuality({ using: vectorName })} - precision={precision ? precision[vectorName] : null} - key={vectorName} - isInProgress={inProgress} - /> - ))} - -
+ + {Object.keys(vectors).map((vectorName) => ( + onCheckIndexQuality({ using: vectorName })} + precision={precision ? precision[vectorName] : null} + key={vectorName} + isInProgress={inProgress} + /> + ))} + + + )} {advancedMod && ( diff --git a/src/components/Collections/SearchQuality/check-index-precision.js b/src/components/Collections/SearchQuality/check-index-precision.js index 2208269d..86d60cf5 100644 --- a/src/components/Collections/SearchQuality/check-index-precision.js +++ b/src/components/Collections/SearchQuality/check-index-precision.js @@ -61,11 +61,11 @@ export const checkIndexPrecision = async ( limit + ': ' + precision + - ' (search time exact: ' + + '\n (search time exact: ' + exactSearchElapsed + 'ms, regular: ' + searchElapsed + - 'ms)' + 'ms)\n' ); return precision; diff --git a/src/components/EditorCommon/index.jsx b/src/components/EditorCommon/index.jsx index 4df8d1eb..7445a79b 100644 --- a/src/components/EditorCommon/index.jsx +++ b/src/components/EditorCommon/index.jsx @@ -22,7 +22,7 @@ window.MonacoEnvironment = { loader.config({ monaco }); -const EditorCommon = ({ beforeMount, customHeight, ...props }) => { +const EditorCommon = ({ beforeMount, customHeight, paddingBottom = 0, ...props }) => { const monacoRef = useRef(null); const editorWrapper = useRef(null); const theme = useTheme(); @@ -55,7 +55,7 @@ const EditorCommon = ({ beforeMount, customHeight, ...props }) => { if (customHeight) { return; } - setEditorHeight(height - editorWrapper.current?.offsetTop); + setEditorHeight(height - editorWrapper.current?.offsetTop - paddingBottom); }, [height, editorWrapper]); return ( @@ -74,6 +74,7 @@ EditorCommon.propTypes = { height: PropTypes.string, beforeMount: PropTypes.func, customHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + paddingBottom: PropTypes.number, ...Editor.propTypes, };