getting the tab set up

Author: nvs119

package-lock.json

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const VectorVisualizer = () => {
+  // Placeholder points
+  const points = [
+    { x: 30, y: 20 },
+    { x: 80, y: 90 },
+    { x: 150, y: 50 },
+    { x: 200, y: 120 },
+  ];
+
+  return (
+    <div>
+      <h2>Vector Embedding Visualization (Placeholder)</h2>
+      <svg width="300" height="200" style={{ border: '1px solid #ccc' }}>
+        {points.map((point, idx) => (
+          <circle key={idx} cx={point.x} cy={point.y} r={5} fill="teal" />
+        ))}
+      </svg>
+    </div>
+  );
+};
+
+export default VectorVisualizer;

packages/compass-vector-embedding-visualizer/components/vector-visualizer.tsx

@@ -0,0 +1 @@
+export * from './plugin';

packages/compass-vector-embedding-visualizer/index.tsx

@@ -0,0 +1,17 @@
+{
+  "name": "@mongodb-js/compass-vector-embedding-visualizer",
+  "version": "0.0.1",
+  "description": "Compass plugin for visualizing vector embeddings",
+  "main": "plugin.tsx",
+  "license": "SSPL",
+  "scripts": {
+    "lint": "eslint .",
+    "test": "mocha"
+  },
+  "dependencies": {
+    "react": "^18.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  }
+}

packages/compass-vector-embedding-visualizer/package.json

@@ -0,0 +1,38 @@
+// plugin.tsx
+import React from 'react';
+import { registerHadronPlugin } from 'hadron-app-registry';
+import { collectionModelLocator } from '@mongodb-js/compass-app-stores/provider';
+import { dataServiceLocator } from '@mongodb-js/compass-connections/provider';
+import { createLoggerLocator } from '@mongodb-js/compass-logging/provider';
+import { telemetryLocator } from '@mongodb-js/compass-telemetry/provider';
+
+import VectorVisualizer from './components/vector-visualizer';
+
+export const CompassVectorPluginProvider = registerHadronPlugin(
+  {
+    name: 'CompassVectorEmbeddingVisualizer',
+    component: function VectorVisualizerProvider({ children }) {
+      return <>{children}</>;
+    },
+    activate: () => {
+      return {
+        store: () => () => null,
+        deactivate: () => {},
+      };
+    },
+  },
+  {
+    collection: collectionModelLocator,
+    dataService: dataServiceLocator,
+    logger: createLoggerLocator('COMPASS-VECTOR-VISUALIZER'),
+    track: telemetryLocator,
+  }
+);
+
+export const CompassVectorPlugin = {
+  name: 'Vector Embeddings',
+  type: 'Collection' as const,
+  provider: CompassVectorPluginProvider,
+  content: VectorVisualizer,
+  header: () => <span>Vector Embeddings</span>,
+};

packages/compass-vector-embedding-visualizer/plugin.tsx

@@ -34,6 +34,7 @@ import { CompassIndexesPlugin } from '@mongodb-js/compass-indexes';
 import { CompassSchemaValidationPlugin } from '@mongodb-js/compass-schema-validation';
 import { CompassGlobalWritesPlugin } from '@mongodb-js/compass-global-writes';
 import { CompassGenerativeAIPlugin } from '@mongodb-js/compass-generative-ai';
+import { CompassVectorPlugin } from '@mongodb-js/compass-vector-embedding-visualizer';
 import ExplainPlanCollectionTabModal from '@mongodb-js/compass-explain-plan';
 import ExportToLanguageCollectionTabModal from '@mongodb-js/compass-export-to-language';
 import {
@@ -188,6 +189,7 @@ function CompassWorkspace({
           CompassIndexesPlugin,
           CompassSchemaValidationPlugin,
           CompassGlobalWritesPlugin,
+          CompassVectorPlugin,
         ]}
         modals={[
           ExplainPlanCollectionTabModal,

packages/compass-web/src/entrypoint.tsx

@@ -27,6 +27,7 @@ import { CompassSchemaPlugin } from '@mongodb-js/compass-schema';
 import { CompassIndexesPlugin } from '@mongodb-js/compass-indexes';
 import { CompassSchemaValidationPlugin } from '@mongodb-js/compass-schema-validation';
 import { CompassGlobalWritesPlugin } from '@mongodb-js/compass-global-writes';
+import { CompassVectorPlugin } from '@mongodb-js/compass-vector-embedding-visualizer';
 import { CreateViewPlugin } from '@mongodb-js/compass-aggregations';
 import {
   CreateNamespacePlugin,
@@ -93,6 +94,7 @@ export default function Workspace({
           CompassIndexesPlugin,
           CompassSchemaValidationPlugin,
           CompassGlobalWritesPlugin,
+          CompassVectorPlugin,
         ]}
         modals={[
           ExplainPlanCollectionTabModal,