fix[visualize-tab] : disable visalize tab for sparse and multi vector on collections and view-point page

Author: kartik-gupta-ij

src/components/Collections/CollectionsList.jsx

@@ -20,6 +20,15 @@ const StyledLink = styled(Link)`
 const CollectionTableRow = ({ collection, getCollectionsCall }) => {
   const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
   const theme = useTheme();
+  const isDenseView = (vectors) => {
+    if (vectors && vectors.size && vectors.distance && !vectors.multivector_config) {
+      return true;
+    }
+    const vectorNames = Object.keys(vectors);
+    return vectorNames.some((vectorName) => {
+      return vectors[vectorName].size && vectors[vectorName].distance && !vectors[vectorName].multivector_config;
+    });
+  };
 
   return (
     <TableRow>
@@ -57,9 +66,11 @@ const CollectionTableRow = ({ collection, getCollectionsCall }) => {
           <MenuItem component={Link} to={`/collections/${collection.name}#snapshots`}>
             Take Snapshot
           </MenuItem>
-          <MenuItem component={Link} to={`/collections/${collection.name}/visualize`}>
-            Visualize
-          </MenuItem>
+          {isDenseView(collection.config.params.vectors) ? (
+            <MenuItem component={Link} to={`/collections/${collection.name}/visualize`}>
+              Visualize
+            </MenuItem>
+          ) : null}
           <MenuItem component={Link} to={`/collections/${collection.name}/graph`}>
             Graph
           </MenuItem>

src/pages/Collection.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { Typography, Grid, Tabs, Tab } from '@mui/material';
 import { CenteredFrame } from '../components/Common/CenteredFrame';
@@ -7,12 +7,32 @@ import { SnapshotsTab } from '../components/Snapshots/SnapshotsTab';
 import CollectionInfo from '../components/Collections/CollectionInfo';
 import PointsTabs from '../components/Points/PointsTabs';
 import SearchQuality from '../components/Collections/SearchQuality/SearchQuality';
+import { useClient } from '../context/client-context';
 
 function Collection() {
   const { collectionName } = useParams();
+  const { client: qdrantClient } = useClient();
   const navigate = useNavigate();
   const location = useLocation();
   const [currentTab, setCurrentTab] = useState(location.hash.slice(1) || 'points');
+  const [isDense, setIsDense] = useState(false);
+
+  useEffect(() => {
+    const checkDenseView = async () => {
+      const collectionData = await qdrantClient.getCollection(collectionName);
+      const vectors = collectionData.config.params.vectors;
+      if (vectors && vectors.size && vectors.distance && !vectors.multivector_config) {
+        setIsDense(true);
+        return;
+      }
+      const vectorNames = Object.keys(vectors);
+      const dense = vectorNames.some((vectorName) => {
+        return vectors[vectorName].size && vectors[vectorName].distance && !vectors[vectorName].multivector_config;
+      });
+      setIsDense(dense);
+    };
+    checkDenseView();
+  }, [collectionName, qdrantClient]);
 
   const handleTabChange = (event, newValue) => {
     if (typeof newValue !== 'string') {
@@ -36,7 +56,12 @@ function Collection() {
                 <Tab label="Info" value={'info'} />
                 <Tab label="Search Quality" value={'quality'} />
                 <Tab label="Snapshots" value={'snapshots'} />
-                <Tab label="Visualize" component={Link} to={`${location.pathname}/visualize`} />
+                <Tab
+                  label="Visualize"
+                  component={Link}
+                  to={`${location.pathname}/visualize`}
+                  disabled={!isDense}
+                />
                 <Tab label="Graph" component={Link} to={`${location.pathname}/graph`} />
               </Tabs>
             </Box>