feat(compass-indexes): display vector search type in search indexes table COMPASS-7509 (#5413)

Author: Anemy

…exes-table/badge-with-icon-link.spec.tsx …exes-table/badge-with-icon-link.spec.tsxpackages/compass-indexes/src/components/regular-indexes-table/badge-with-icon-link.spec.tsx renamed to packages/compass-indexes/src/components/indexes-table/badge-with-icon-link.spec.tsx packages/compass-indexes/src/components/regular-indexes-table/badge-with-icon-link.spec.tsx renamed to packages/compass-indexes/src/components/indexes-table/badge-with-icon-link.spec.tsx

@@ -11,7 +11,7 @@ import {
   useDarkMode,
 } from '@mongodb-js/compass-components';
 import type { RegularIndex } from '../../modules/regular-indexes';
-import BadgeWithIconLink from './badge-with-icon-link';
+import BadgeWithIconLink from '../indexes-table/badge-with-icon-link';
 
 const containerStyles = css({
   display: 'flex',

…r-indexes-table/badge-with-icon-link.tsx …s/indexes-table/badge-with-icon-link.tsxpackages/compass-indexes/src/components/regular-indexes-table/badge-with-icon-link.tsx renamed to packages/compass-indexes/src/components/indexes-table/badge-with-icon-link.tsx packages/compass-indexes/src/components/regular-indexes-table/badge-with-icon-link.tsx renamed to packages/compass-indexes/src/components/indexes-table/badge-with-icon-link.tsx

@@ -3,7 +3,7 @@ import getIndexHelpLink from '../../utils/index-link-helper';
 import { Tooltip, Body } from '@mongodb-js/compass-components';
 
 import type { RegularIndex } from '../../modules/regular-indexes';
-import BadgeWithIconLink from './badge-with-icon-link';
+import BadgeWithIconLink from '../indexes-table/badge-with-icon-link';
 
 export const canRenderTooltip = (type: RegularIndex['type']) => {
   return ['text', 'wildcard', 'columnstore'].indexOf(type ?? '') !== -1;

packages/compass-indexes/src/components/regular-indexes-table/property-field.tsx

@@ -14,7 +14,10 @@ import type { Document } from 'mongodb';
 
 import { POLLING_INTERVAL, SearchIndexesTable } from './search-indexes-table';
 import { SearchIndexesStatuses } from '../../modules/search-indexes';
-import { searchIndexes as indexes } from './../../../test/fixtures/search-indexes';
+import {
+  searchIndexes as indexes,
+  vectorSearchIndexes,
+} from './../../../test/fixtures/search-indexes';
 
 const renderIndexList = (
   props: Partial<React.ComponentProps<typeof SearchIndexesTable>> = {}
@@ -186,6 +189,30 @@ describe('SearchIndexesTable Component', function () {
     });
   });
 
+  context('vector search index', function () {
+    it('renders the vector search index details when expanded', function () {
+      renderIndexList({
+        indexes: vectorSearchIndexes,
+      });
+
+      const indexRow = screen.getByTestId(
+        `search-indexes-row-vectorSearching123`
+      );
+      const expandButton = within(indexRow).getByLabelText('Expand row');
+      expect(expandButton).to.exist;
+      fireEvent.click(expandButton);
+
+      const details = screen.getByTestId(
+        `search-indexes-details-vectorSearching123`
+      );
+      expect(details).to.exist;
+
+      for (const path of ['plot_embedding', 'genres']) {
+        expect(within(details).getAllByText(path)).to.exist;
+      }
+    });
+  });
+
   describe('connectivity', function () {
     it('does poll the index for changes in online mode', async function () {
       const onPollIndexesSpy = sinon.spy();

packages/compass-indexes/src/components/regular-indexes-table/type-field.tsx

@@ -4,12 +4,13 @@ import type { Document } from 'mongodb';
 import type { SearchIndex, SearchIndexStatus } from 'mongodb-data-service';
 import { withPreferences } from 'compass-preferences-model/provider';
 import { useOpenWorkspace } from '@mongodb-js/compass-workspaces/provider';
-import { BadgeVariant } from '@mongodb-js/compass-components';
+import { BadgeVariant, Disclaimer } from '@mongodb-js/compass-components';
 import {
   EmptyContent,
   Button,
   Link,
   Badge,
+  Tooltip,
   css,
   spacing,
 } from '@mongodb-js/compass-components';
@@ -18,6 +19,7 @@ import {
   SearchIndexesStatuses,
   dropSearchIndex,
   getInitialSearchIndexPipeline,
+  getInitialVectorSearchIndexPipelineText,
   pollSearchIndexes,
   showCreateModal,
   showUpdateModal,
@@ -28,6 +30,7 @@ import type { SortDirection, RootState } from '../../modules';
 import { IndexesTable } from '../indexes-table';
 import IndexActions from './search-index-actions';
 import { ZeroGraphic } from './zero-graphic';
+import BadgeWithIconLink from '../indexes-table/badge-with-icon-link';
 
 export const POLLING_INTERVAL = 5000;
 
@@ -107,6 +110,10 @@ function IndexStatus({
   );
 }
 
+function SearchIndexType({ type, link }: { type: string; link: string }) {
+  return <BadgeWithIconLink text={type} link={link} />;
+}
+
 const searchIndexDetailsStyles = css({
   display: 'inline-flex',
   gap: spacing[1],
@@ -118,14 +125,35 @@ const searchIndexFieldStyles = css({
   gap: spacing[1],
 });
 
-function SearchIndexDetails({
-  indexName,
-  definition,
-}: {
-  indexName: string;
-  definition: Document;
-}) {
+function VectorSearchIndexDetails({ definition }: { definition: Document }) {
+  return (
+    <>
+      {!definition.fields || definition.fields.length === 0 ? (
+        <Disclaimer>No fields in the index definition.</Disclaimer>
+      ) : (
+        definition.fields.map((field: { path: string }) => (
+          <Tooltip
+            align="top"
+            key={field.path}
+            justify="middle"
+            trigger={({ children, ...props }) => (
+              <Badge {...props} className={searchIndexFieldStyles}>
+                {children}
+                {field.path}
+              </Badge>
+            )}
+          >
+            {JSON.stringify(field, null, 2)}
+          </Tooltip>
+        ))
+      )}
+    </>
+  );
+}
+
+function SearchIndexDetails({ definition }: { definition: Document }) {
   const badges: { name: string; className?: string }[] = [];
+
   if (definition.mappings?.dynamic) {
     badges.push({
       name: 'Dynamic Mappings',
@@ -142,22 +170,21 @@ function SearchIndexDetails({
     );
   }
   return (
-    <div
-      className={searchIndexDetailsStyles}
-      data-testid={`search-indexes-details-${indexName}`}
-    >
-      {badges.length === 0
-        ? '[empty]'
-        : badges.map((badge) => (
-            <Badge key={badge.name} className={badge.className}>
-              {badge.name}
-            </Badge>
-          ))}
-    </div>
+    <>
+      {badges.length === 0 ? (
+        <Disclaimer>No mappings in the index definition.</Disclaimer>
+      ) : (
+        badges.map((badge) => (
+          <Badge key={badge.name} className={badge.className}>
+            {badge.name}
+          </Badge>
+        ))
+      )}
+    </>
   );
 }
 
-const COLUMNS = ['Name and Fields', 'Status'] as const;
+const COLUMNS = ['Name and Fields', 'Type', 'Status'] as const;
 
 export const SearchIndexesTable: React.FunctionComponent<
   SearchIndexesTableProps
@@ -184,6 +211,7 @@ export const SearchIndexesTable: React.FunctionComponent<
 
   const data = useMemo(() => {
     return indexes.map((index) => {
+      const isVectorSearchIndex = index.type === 'vectorSearch';
       return {
         key: index.name,
         'data-testid': `row-${index.name}`,
@@ -195,6 +223,22 @@ export const SearchIndexesTable: React.FunctionComponent<
             },
             children: index.name,
           },
+          {
+            'data-testid': 'type-field',
+            style: {
+              width: '20%',
+            },
+            children: (
+              <SearchIndexType
+                type={isVectorSearchIndex ? 'Vector Search' : 'Search'}
+                link={
+                  isVectorSearchIndex
+                    ? 'https://www.mongodb.com/docs/atlas/atlas-vector-search/create-index/'
+                    : 'https://www.mongodb.com/docs/atlas/atlas-search/create-index/'
+                }
+              />
+            ),
+          },
           {
             'data-testid': 'status-field',
             style: {
@@ -215,18 +259,30 @@ export const SearchIndexesTable: React.FunctionComponent<
             onEditIndex={onEditIndex}
             onRunAggregateIndex={(name) => {
               openCollectionWorkspace(namespace, {
-                initialPipeline: getInitialSearchIndexPipeline(name),
                 newTab: true,
+                ...(isVectorSearchIndex
+                  ? {
+                      initialPipelineText:
+                        getInitialVectorSearchIndexPipelineText(name),
+                    }
+                  : {
+                      initialPipeline: getInitialSearchIndexPipeline(name),
+                    }),
               });
             }}
           />
         ),
-        // TODO(COMPASS-7206): details for the nested row
         details: (
-          <SearchIndexDetails
-            indexName={index.name}
-            definition={index.latestDefinition}
-          />
+          <div
+            className={searchIndexDetailsStyles}
+            data-testid={`search-indexes-details-${index.name}`}
+          >
+            {isVectorSearchIndex ? (
+              <VectorSearchIndexDetails definition={index.latestDefinition} />
+            ) : (
+              <SearchIndexDetails definition={index.latestDefinition} />
+            )}
+          </div>
         ),
       };
     });

packages/compass-indexes/src/components/search-indexes-table/search-indexes-table.spec.tsx

@@ -331,3 +331,13 @@ describe('search-indexes module', function () {
     });
   });
 });
+
+describe('#getInitialVectorSearchIndexPipelineText', function () {
+  it('returns pipeline text with the index name', function () {
+    expect(
+      searchIndexesSlice.getInitialVectorSearchIndexPipelineText('pineapple')
+    ).to.include(`$vectorSearch: {
+      // Name of the Atlas Vector Search index to use.
+      index: "pineapple",`);
+  });
+});

packages/compass-indexes/src/components/search-indexes-table/search-indexes-table.tsx

@@ -21,6 +21,7 @@ export type SearchSortColumn = keyof typeof sortColumnToProps;
 
 const sortColumnToProps = {
   'Name and Fields': 'name',
+  Type: 'type',
   Status: 'status',
 } as const;
 
@@ -669,6 +670,29 @@ export function getInitialSearchIndexPipeline(name: string) {
   ];
 }
 
+export function getInitialVectorSearchIndexPipelineText(name: string) {
+  return `[
+  {
+    $vectorSearch: {
+      // Name of the Atlas Vector Search index to use.
+      index: ${JSON.stringify(name)},
+      // Indexed vectorEmbedding type field to search.
+      "path": "<field-to-search>",
+      // Array of numbers that represent the query vector.
+      // The array size must match the number of vector dimensions specified in the index definition for the field.
+      "queryVector": [],
+      // Number of nearest neighbors to use during the search.
+      // Value must be less than or equal to (<=) 10000.
+      "numCandidates": 50,
+      "limit": 10,
+      // Any MQL match expression that compares an indexed field with a boolean,
+      // number (not decimals), or string to use as a prefilter.
+      "filter": {}
+    },
+  },
+]`;
+}
+
 function _sortIndexes(
   indexes: SearchIndex[],
   column: SearchSortColumn,

packages/compass-indexes/src/modules/search-indexes.spec.ts

@@ -19,3 +19,35 @@ export const searchIndexes: SearchIndex[] = [
     latestDefinition: {},
   },
 ];
+
+export const vectorSearchIndexes: SearchIndex[] = [
+  {
+    id: '1',
+    name: 'vectorSearching123',
+    status: 'READY',
+    type: 'vectorSearch',
+    queryable: true,
+    latestDefinition: {
+      fields: [
+        {
+          type: 'vector',
+          path: 'plot_embedding',
+          numDimensions: 1536,
+          similarity: 'euclidean',
+        },
+        {
+          type: 'filter',
+          path: 'genres',
+        },
+      ],
+    },
+  },
+  {
+    id: '2',
+    name: 'pineapple',
+    status: 'FAILED',
+    type: 'vectorSearch',
+    queryable: false,
+    latestDefinition: {},
+  },
+];