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

src/components/Collections/SearchQuality/Instruction.mdx

@@ -0,0 +1,44 @@
+### 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 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.

src/components/Collections/SearchQuality/SearchQuality.jsx

@@ -4,89 +4,184 @@ 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, 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();
     newLog = `[${date}] ${newLog}`;
-    setLog((prevLog) => {
-      return newLog + '\n' + prevLog;
-    });
+    setLog((prevLog) => newLog + '\n' + prevLog);
   };
 
   const clearLogs = () => {
-    setLog('');
+    setLog(' ');
   };
 
   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) {
     vectors = isNamedVectors ? collection?.config?.params?.vectors : { '': collection?.config?.params?.vectors };
   }
 
   return (
-    <>
-      {collection?.config?.params?.vectors && (
-        <SearchQualityPanel
-          collectionName={collectionName}
-          vectors={vectors}
-          loggingFoo={handleLogUpdate}
-          clearLogsFoo={clearLogs}
-          sx={{ mt: 5 }}
-        />
-      )}
+    <Grid
+      container
+      spacing={2}
+      sx={{
+        height: 'calc(100vh - 283px)',
+      }}
+    >
+      <Grid
+        item
+        xs={12}
+        md={7}
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%',
+        }}
+      >
+        {collection?.config?.params?.vectors && (
+          <SearchQualityPanel
+            collectionName={collectionName}
+            vectors={vectors}
+            loggingFoo={handleLogUpdate}
+            clearLogsFoo={clearLogs}
+            sx={{
+              flexShrink: 0,
+            }}
+          />
+        )}
+        <Card
+          variant="dual"
+          sx={{
+            mt: 2,
+            flex: '1 1 auto',
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+          }}
+        >
+          <CardHeader
+            title="What is search quality?"
+            variant="heading"
+            action={
+              <Tooltip title={'Expand'} placement={'left'}>
+                <IconButton
+                  aria-label={'Expand'}
+                  onClick={() => {
+                    setOpen(true);
+                  }}
+                >
+                  <OpenInFull />
+                </IconButton>
+              </Tooltip>
+            }
+          />
+          <CardContent
+            sx={{
+              pl: 2,
+              flex: '1 1 auto',
+              overflowY: 'auto',
+            }}
+          >
+            <Instruction.default components={mdxComponents} />
+          </CardContent>
+        </Card>
+      </Grid>
 
-      <Card varian="dual" sx={{ mt: 5 }}>
-        <CardHeader
-          title={'Report'}
-          variant="heading"
+      <Grid item xs={12} md={5} sx={{ height: '100%' }}>
+        <Card
           sx={{
-            flexGrow: 1,
+            height: '100%',
           }}
-          action={<CopyButton text={bigIntJSON.stringify(log)} />}
-        />
-        <Box sx={{ pt: 2, pb: 1, pr: 1 }}>
-          <EditorCommon
-            theme={'custom-language-theme'}
-            value={log}
-            options={{
-              scrollBeyondLastLine: false,
-              fontSize: 12,
-              wordWrap: 'on',
-              minimap: { enabled: false },
-              automaticLayout: true,
-              readOnly: true,
-              mouseWheelZoom: true,
-              lineNumbers: 'off',
+        >
+          <CardHeader title="Report" action={<CopyButton text={bigIntJSON.stringify(log)} />} />
+          <Box
+            sx={{
+              pt: 2,
+              pb: 1,
+              pr: 1,
+              height: 'calc(100% - 60px)',
             }}
+          >
+            <EditorCommon
+              language="custom-language"
+              paddingBottom={48}
+              theme="custom-language-theme"
+              value={log}
+              options={{
+                scrollBeyondLastLine: false,
+                fontSize: 12,
+                wordWrap: 'on',
+                minimap: { enabled: false },
+                automaticLayout: true,
+                readOnly: true,
+                mouseWheelZoom: true,
+                lineNumbers: 'off',
+              }}
+            />
+          </Box>
+        </Card>
+      </Grid>
+      <Dialog open={open} onClose={() => setOpen(false)} maxWidth="md">
+        <Card
+          variant="dual"
+          sx={{
+            flex: '1 1 auto',
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+          }}
+        >
+          <CardHeader
+            title="What is search quality?"
+            variant="heading"
+            action={
+              <IconButton
+                aria-label={'Close'}
+                onClick={() => {
+                  setOpen(false);
+                }}
+              >
+                <Close />
+              </IconButton>
+            }
           />
-        </Box>
-      </Card>
-    </>
+          <CardContent
+            sx={{
+              pl: 2,
+              flex: '1 1 auto',
+              overflowY: 'auto',
+            }}
+          >
+            <Instruction.default components={mdxComponents} />
+          </CardContent>
+        </Card>
+      </Dialog>
+    </Grid>
   );
 };