docs(search-quality): add explanation for the Search Quality tab

Author: kartik-gupta-ij

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 }) => {
 
       <Card varian="dual" sx={{ mt: 5 }}>
         <CardHeader
-          title={'Report'}
+          title={log ? 'Report' : 'What is Search Quality?'}
           variant="heading"
           sx={{
             flexGrow: 1,
@@ -71,8 +89,10 @@ const SearchQuality = ({ collectionName }) => {
         />
         <Box sx={{ pt: 2, pb: 1, pr: 1 }}>
           <EditorCommon
+            language={'custom-language'}
             theme={'custom-language-theme'}
-            value={log}
+            value={log || explainLog}
+            customHeight={'calc(100vh - 660px)'}
             options={{
               scrollBeyondLastLine: false,
               fontSize: 12,