Show cosine similarity on search results, and add psql console button

electric-sql · Jan 25, 2024 · 1f0297e · 1f0297e
1 parent 714f0f2
commit 1f0297e
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 5 deletions.
diff --git a/examples/tauri-postgres/src/components/ProfileMenu.tsx b/examples/tauri-postgres/src/components/ProfileMenu.tsx
@@ -1,6 +1,8 @@
 import { Transition } from '@headlessui/react'
 import { useConnectivityState } from 'electric-sql/react'
 import classnames from 'classnames'
+import { BsTerminal } from "react-icons/bs";
+import { invoke } from "@tauri-apps/api/tauri";
 import { useClickOutside } from '../hooks/useClickOutside'
 import Toggle from './Toggle'
 import { useRef } from 'react'
@@ -73,7 +75,16 @@ export default function ProfileMenu({
         >
           GitHub
         </a>
-        <div className="border-t flex items-center h-8 px-3">
+        <button
+          className="flex items-center h-8 px-3 hover:bg-gray-100 border-t"
+          onClick={() => invoke('open_postgres')}
+        >
+          <span className="me-auto">
+            Postgres Console
+          </span>
+          <BsTerminal size={16} />
+        </button>
+        <div className="flex items-center h-8 px-3">
           <span className="text-gray-500 me-auto">
             {connectivityStateDisplay}
           </span>

diff --git a/examples/tauri-postgres/src/electric.tsx b/examples/tauri-postgres/src/electric.tsx
@@ -23,8 +23,9 @@ const DEBUG_ENV = import.meta.env.DEBUG
 const searchParams = new URLSearchParams(window.location.search)
 const debugParam = searchParams.get('debug')
 
-// DEBUG defaults to true in dev mode, false in prod mode
-export const DEBUG = debugParam ? debugParam === 'true' : DEV_MODE || DEBUG_ENV
+export const DEBUG = debugParam ? debugParam === 'true' : DEBUG_ENV === 'true'
+
+console.log('DEBUG', DEBUG)
 
 // We export dbName so that we can delete the database if the schema changes
 export let dbName: string

diff --git a/examples/tauri-postgres/src/pages/List/IssueRow.tsx b/examples/tauri-postgres/src/pages/List/IssueRow.tsx
@@ -66,6 +66,12 @@ function IssueRow({ issue, style }: Props) {
       </div>
       <div className="flex-wrap flex-shrink ml-3 overflow-hidden font-medium line-clamp-1 overflow-ellipsis">
         {issue.title.slice(0, 3000) || ''}
+        {issue.cosine_similarity && (
+          <span className="text-gray-300">
+            {' '}
+            {issue.cosine_similarity.toFixed(2)}
+          </span>
+        )}
       </div>
       <div className="flex-shrink-0 hidden w-15 ml-auto font-normal text-gray-500 sm:block whitespace-nowrap">
         {formatDate(issue.created)}

diff --git a/examples/tauri-postgres/src/pages/List/index.tsx b/examples/tauri-postgres/src/pages/List/index.tsx
@@ -53,14 +53,19 @@ function List({ showSearch = false }) {
         sql = sql.replace(" id,", " issue.id AS id,");
         sql = sql.replace(
           " FROM issue",
-          ` FROM issue INNER JOIN document ON document.issue_id = issue.id `
+          `, (1 - (document.embeddings <=> '${embedding}'))::text AS cosine_similarity FROM issue INNER JOIN document ON document.issue_id = issue.id `
         );
         sql += ` ORDER BY document.embeddings <=> '${embedding}'`;
         sql += ` LIMIT 100;`;
 
-        const results = await db.raw({ sql, args: values });
+        let results = await db.raw({ sql, args: values });
         if (ignore) return;
 
+        results = results.map((result: any) => ({
+          ...result,
+          cosine_similarity: result.cosine_similarity ? parseFloat(result.cosine_similarity) : null,
+        }));
+
         setVectorResult(results as Issue[]);
       }
     };