From 604ba5b1c2f82e5a176e65035e0db07fab493c37 Mon Sep 17 00:00:00 2001 From: kartik-gupta-ij Date: Thu, 17 Oct 2024 22:47:27 +0530 Subject: [PATCH 1/7] Make button component more prominent in Search Quality tab --- .../SearchQuality/SearchQualityPanel.jsx | 54 +++++++++++-------- 1 file changed, 33 insertions(+), 21 deletions(-) diff --git a/src/components/Collections/SearchQuality/SearchQualityPanel.jsx b/src/components/Collections/SearchQuality/SearchQualityPanel.jsx index c643afbc6..6f9f36f2b 100644 --- a/src/components/Collections/SearchQuality/SearchQualityPanel.jsx +++ b/src/components/Collections/SearchQuality/SearchQualityPanel.jsx @@ -9,11 +9,13 @@ import { TableHead, TableRow, Tooltip, - IconButton, + Button, FormControlLabel, Switch, CardContent, LinearProgress, + Box, + IconButton, } from '@mui/material'; import { CopyButton } from '../../Common/CopyButton'; import { bigIntJSON } from '../../../common/bigIntJSON'; @@ -44,21 +46,33 @@ const VectorTableRow = ({ vectorObj, name, onCheckIndexQuality, precision, isInP {isInProgress && } {!isInProgress && ( - <> - - {precision ? `${precision * 100}%` : '—'} + + + {precision ? `${precision * 100}%` : null} - - - + {precision ? ( + + + + ) : ( + + )} - + )} @@ -240,8 +254,10 @@ const SearchQualityPanel = ({ collectionName, vectors, loggingFoo, clearLogsFoo, - Search Quality + + + Search Quality + setAdvancedMod(!advancedMod)} size="small" />} @@ -251,17 +267,13 @@ const SearchQualityPanel = ({ collectionName, vectors, loggingFoo, clearLogsFoo, } /> - + } variant="heading" sx={{ flexGrow: 1, }} - action={ - <> - - - } + action={} /> {!advancedMod && ( From 7ad629d405c4a0df88c64722522ab88604f245b8 Mon Sep 17 00:00:00 2001 From: kartik-gupta-ij Date: Fri, 18 Oct 2024 02:13:30 +0530 Subject: [PATCH 2/7] docs(search-quality): add explanation for the Search Quality tab --- .../SearchQuality/SearchQuality.jsx | 26 ++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/src/components/Collections/SearchQuality/SearchQuality.jsx b/src/components/Collections/SearchQuality/SearchQuality.jsx index 2ba44ca69..3f98686ff 100644 --- a/src/components/Collections/SearchQuality/SearchQuality.jsx +++ b/src/components/Collections/SearchQuality/SearchQuality.jsx @@ -10,6 +10,24 @@ 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 during 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.`; + const SearchQuality = ({ collectionName }) => { const { enqueueSnackbar, closeSnackbar } = useSnackbar(); const { client } = useClient(); @@ -25,7 +43,7 @@ const SearchQuality = ({ collectionName }) => { }; const clearLogs = () => { - setLog(''); + setLog(' '); }; useEffect(() => { @@ -62,7 +80,7 @@ const SearchQuality = ({ collectionName }) => { { /> Date: Fri, 18 Oct 2024 02:23:23 +0530 Subject: [PATCH 3/7] fmt --- src/components/Collections/SearchQuality/SearchQuality.jsx | 2 +- src/components/Collections/SearchQuality/SearchQualityPanel.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Collections/SearchQuality/SearchQuality.jsx b/src/components/Collections/SearchQuality/SearchQuality.jsx index 3f98686ff..6efe38b28 100644 --- a/src/components/Collections/SearchQuality/SearchQuality.jsx +++ b/src/components/Collections/SearchQuality/SearchQuality.jsx @@ -24,7 +24,7 @@ Tuning the HNSW Algorithm (Advanced mode): 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 during collection configuration): +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.`; diff --git a/src/components/Collections/SearchQuality/SearchQualityPanel.jsx b/src/components/Collections/SearchQuality/SearchQualityPanel.jsx index 6f9f36f2b..acbac903b 100644 --- a/src/components/Collections/SearchQuality/SearchQualityPanel.jsx +++ b/src/components/Collections/SearchQuality/SearchQualityPanel.jsx @@ -47,7 +47,7 @@ const VectorTableRow = ({ vectorObj, name, onCheckIndexQuality, precision, isInP {isInProgress && } {!isInProgress && ( - + {precision ? `${precision * 100}%` : null} From 07958e28efb9a6e4d23838e68e12d86f885f3890 Mon Sep 17 00:00:00 2001 From: kartik-gupta-ij Date: Sat, 26 Oct 2024 17:19:45 +0530 Subject: [PATCH 4/7] 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 000000000..2d827d60c --- /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 6efe38b28..ba9d7c349 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 acbac903b..a842c56c4 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 2208269d0..86d60cf54 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 4df8d1eb9..7445a79b1 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, }; From aefe7653ee5a3fa3e5b5dc7a969b2e2ae6c0ff4e Mon Sep 17 00:00:00 2001 From: kartik-gupta-ij Date: Sun, 27 Oct 2024 03:54:10 +0530 Subject: [PATCH 5/7] chore(serach-quality): filename change to Instruction.mdx and codeblock change to inline code --- .../SearchQuality/{ExplainLog.mdx => Instruction.mdx} | 4 ++-- src/components/Collections/SearchQuality/SearchQuality.jsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) rename src/components/Collections/SearchQuality/{ExplainLog.mdx => Instruction.mdx} (99%) diff --git a/src/components/Collections/SearchQuality/ExplainLog.mdx b/src/components/Collections/SearchQuality/Instruction.mdx similarity index 99% rename from src/components/Collections/SearchQuality/ExplainLog.mdx rename to src/components/Collections/SearchQuality/Instruction.mdx index 2d827d60c..a284503ac 100644 --- a/src/components/Collections/SearchQuality/ExplainLog.mdx +++ b/src/components/Collections/SearchQuality/Instruction.mdx @@ -1,8 +1,8 @@ ### 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 diff --git a/src/components/Collections/SearchQuality/SearchQuality.jsx b/src/components/Collections/SearchQuality/SearchQuality.jsx index ba9d7c349..797f01d1e 100644 --- a/src/components/Collections/SearchQuality/SearchQuality.jsx +++ b/src/components/Collections/SearchQuality/SearchQuality.jsx @@ -9,7 +9,7 @@ import { CopyButton } from '../../Common/CopyButton'; import { bigIntJSON } from '../../../common/bigIntJSON'; import EditorCommon from '../../EditorCommon'; import _ from 'lodash'; -import * as ExplainLog from './ExplainLog.mdx'; +import * as Instruction from './Instruction.mdx'; import { mdxComponents } from '../../InteractiveTutorial/MdxComponents/MdxComponents'; const SearchQuality = ({ collectionName }) => { @@ -90,7 +90,7 @@ const SearchQuality = ({ collectionName }) => { overflowY: 'auto', }} > - + From d087868bac34d54541b49dae9604c0ac15a97020 Mon Sep 17 00:00:00 2001 From: kartik-gupta-ij Date: Wed, 20 Nov 2024 17:55:08 +0530 Subject: [PATCH 6/7] fix(serach-quality): fix loading and aborting of onCheckIndexQuality func --- .../SearchQuality/SearchQualityPanel.jsx | 43 ++++++++++++++----- 1 file changed, 32 insertions(+), 11 deletions(-) diff --git a/src/components/Collections/SearchQuality/SearchQualityPanel.jsx b/src/components/Collections/SearchQuality/SearchQualityPanel.jsx index a842c56c4..7e88ffcd8 100644 --- a/src/components/Collections/SearchQuality/SearchQualityPanel.jsx +++ b/src/components/Collections/SearchQuality/SearchQualityPanel.jsx @@ -44,8 +44,8 @@ const VectorTableRow = ({ vectorObj, name, onCheckIndexQuality, precision, isInP - {isInProgress && } - {!isInProgress && ( + {isInProgress === name && } + {isInProgress !== name && ( {precision ? `${precision * 100}%` : null} @@ -84,7 +84,7 @@ VectorTableRow.propTypes = { name: PropTypes.string, onCheckIndexQuality: PropTypes.func, precision: PropTypes.number, - isInProgress: PropTypes.bool, + isInProgress: PropTypes.string, }; const SearchQualityPanel = ({ collectionName, vectors, loggingFoo, clearLogsFoo, ...other }) => { @@ -101,7 +101,7 @@ const SearchQualityPanel = ({ collectionName, vectors, loggingFoo, clearLogsFoo, }); const [advancedMod, setAdvancedMod] = useState(false); - const [inProgress, setInProgress] = useState(false); + const [inProgress, setInProgress] = useState(null); const [code, setCode] = useState(` // Run this code to estimate search quality versus exact search @@ -182,10 +182,14 @@ const SearchQualityPanel = ({ collectionName, vectors, loggingFoo, clearLogsFoo, return <>No vectors; } - const onCheckIndexQuality = async ({ using = '', limit = 10, params = null, filter = null, timeout }) => { - setInProgress(true); - + const onCheckIndexQuality = async ({ using = '', limit = 10, params = null, filter = null, timeout }, controller) => { + setInProgress(using); clearLogsFoo && clearLogsFoo(); + if (vectorsNames && !vectorsNames.includes(using)) { + loggingFoo && loggingFoo('Vector field name not found\n'); + setInProgress(null); + return; + } const precisions = []; try { const scrollResult = await client.scroll(collectionName, { @@ -202,6 +206,10 @@ const SearchQualityPanel = ({ collectionName, vectors, loggingFoo, clearLogsFoo, loggingFoo && loggingFoo('Starting measuring quality on ' + total + ' requests for ' + using || '---'); for (let idx = 0; idx < total; idx++) { + if (controller.signal.aborted) { + loggingFoo && loggingFoo('Previous operation cancelled \n'); + break; + } const pointId = pointIds[idx]; const precision = await checkIndexPrecision( client, @@ -238,16 +246,22 @@ const SearchQualityPanel = ({ collectionName, vectors, loggingFoo, clearLogsFoo, }; }); - setInProgress(false); + setInProgress(null); } catch (e) { - setInProgress(false); + setInProgress(null); console.error(e); loggingFoo && loggingFoo(JSON.stringify(e)); } }; const handleRunCode = async (qulityCheckParams) => { - onCheckIndexQuality(qulityCheckParams); + if (window.currentController) { + window.currentController.abort(); + } + const controller = new AbortController(); + window.currentController = controller; + + onCheckIndexQuality(qulityCheckParams, controller); }; return ( @@ -309,7 +323,14 @@ const SearchQualityPanel = ({ collectionName, vectors, loggingFoo, clearLogsFoo, onCheckIndexQuality({ using: vectorName })} + onCheckIndexQuality={() => { + if (window.currentController) { + window.currentController.abort(); + } + const controller = new AbortController(); + window.currentController = controller; + onCheckIndexQuality({ using: vectorName }, controller); + }} precision={precision ? precision[vectorName] : null} key={vectorName} isInProgress={inProgress} From 270ee5afa8d598557597c07d998a01452d264786 Mon Sep 17 00:00:00 2001 From: kartik-gupta-ij Date: Wed, 20 Nov 2024 18:21:52 +0530 Subject: [PATCH 7/7] chore(serach-quality): add expandable secton for Instruction component --- package-lock.json | 6 +- .../SearchQuality/SearchQuality.jsx | 56 ++++++++++++++++++- 2 files changed, 57 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index f4d31f6e7..aeb6dedea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3598,9 +3598,9 @@ } }, "node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "dev": true, "dependencies": { "path-key": "^3.1.0", diff --git a/src/components/Collections/SearchQuality/SearchQuality.jsx b/src/components/Collections/SearchQuality/SearchQuality.jsx index 797f01d1e..e512e6820 100644 --- a/src/components/Collections/SearchQuality/SearchQuality.jsx +++ b/src/components/Collections/SearchQuality/SearchQuality.jsx @@ -4,19 +4,21 @@ import { getSnackbarOptions } from '../../Common/utils/snackbarOptions'; import { useClient } from '../../../context/client-context'; import SearchQualityPanel from './SearchQualityPanel'; import { useSnackbar } from 'notistack'; -import { Box, Card, CardContent, CardHeader, Grid } from '@mui/material'; +import { Box, Card, CardContent, CardHeader, Dialog, Grid, IconButton, Tooltip } from '@mui/material'; import { CopyButton } from '../../Common/CopyButton'; import { bigIntJSON } from '../../../common/bigIntJSON'; import EditorCommon from '../../EditorCommon'; import _ from 'lodash'; import * as Instruction from './Instruction.mdx'; import { mdxComponents } from '../../InteractiveTutorial/MdxComponents/MdxComponents'; +import { Close, OpenInFull } from '@mui/icons-material'; const SearchQuality = ({ collectionName }) => { const { enqueueSnackbar, closeSnackbar } = useSnackbar(); const { client } = useClient(); const [collection, setCollection] = React.useState(null); const [log, setLog] = React.useState(''); + const [open, setOpen] = React.useState(false); const handleLogUpdate = (newLog) => { const date = new Date().toLocaleString(); @@ -82,7 +84,22 @@ const SearchQuality = ({ collectionName }) => { overflow: 'hidden', }} > - + + { + setOpen(true); + }} + > + + + + } + /> { + setOpen(false)} maxWidth="md"> + + { + setOpen(false); + }} + > + + + } + /> + + + + + ); };