@meaningfully/ui 0.0.10 → 0.0.11

package/README.md

@@ -1,3 +1,10 @@
 # meaningfully-ui
 
-This is a library of UI components for [meaningfully](https://www.github.com/jeremybmerrill/meaningfully), which is an app (or collection of apps!) for semantic search over spreadsheets. See the main repo URL for more discussion.
+This is a library of UI components for [meaningfully](https://www.github.com/jeremybmerrill/meaningfully), which is an app (or collection of apps!) for semantic search over spreadsheets. See the main repo URL for more discussion.
+
+## 
+
+How to run:
+
+- `npm run build` to build
+- `npm run watch` to build continuously, rebuilding on file modification.

package/dist/components/Results.svelte

@@ -7,6 +7,9 @@
     textColumn: string;
     metadataColumns?: string[];
     loading?: boolean;
+    hasMore?: boolean;
+    loadingMore?: boolean;
+    showMore?: () => void;
     originalDocumentClick?: (sourceNodeId: string) => void;
   }
 
@@ -15,18 +18,12 @@
     textColumn,
     metadataColumns = [],
     loading = false,
+    hasMore = false,
+    loadingMore = false,
+    showMore = () => {},
     originalDocumentClick = () => {},
   }: Props = $props();
 
-  // Initial number of results to display
-  const initialDisplayCount = 10;
-  let displayCount = $state(initialDisplayCount);
-
-  // Function to load more results
-  const showMore = () => {
-    displayCount += 10;
-  };
-
   // copied from https://github.com/run-llama/LlamaIndexTS/blob/main/packages/providers/storage/weaviate/src/sanitize.ts
   // weaviate requires property names (i.e. metadata column names) to start with a lowercase letter or underscore,
   // and only contain letters, numbers, and underscores.
@@ -101,8 +98,6 @@
     }, 5000);
   };
 
-  // Computed property for visible results
-  let visibleResults = $derived(results.slice(0, displayCount));
 </script>
 
 <div class="space-y-4">
@@ -134,7 +129,7 @@
   {:else}
     <div class="bg-white rounded-lg shadow text-black">
       <Table
-        data={visibleResults}
+        data={results}
         {textColumn}
         {metadataColumns}
         showSimilarity={true}
@@ -143,13 +138,14 @@
       />
     </div>
     
-    {#if displayCount < results.length}
+    {#if hasMore}
       <div class="flex justify-center mt-4">
         <button
           onclick={showMore}
+          disabled={loadingMore}
           class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
         >
-          Show More
+          {loadingMore ? 'Loading...' : 'Show More'}
         </button>
       </div>
     {/if}

package/dist/components/Results.svelte.d.ts

@@ -3,6 +3,9 @@ interface Props {
     textColumn: string;
     metadataColumns?: string[];
     loading?: boolean;
+    hasMore?: boolean;
+    loadingMore?: boolean;
+    showMore?: () => void;
     originalDocumentClick?: (sourceNodeId: string) => void;
 }
 declare const Results: import("svelte").Component<Props, {}, "">;

package/dist/components/SearchPage.svelte

@@ -17,7 +17,9 @@
   let metadataColumns: string[] = $state([]);
   let textColumn: string = $state('');
   let loading = $state(false);
+  let loadingMore = $state(false);
   let hasResults = $state(false);
+  let hasMore = $state(false);
   let showModal = $state(false);
   let modalContent: Record<string, any> | null = $state(null);
 
@@ -28,6 +30,8 @@
   let results: Array<Record<string, any>> = $state([]);
   let error: string | null = $state(null);
 
+  const pageSize = 10;
+
   api.getDocumentSet(documentSetId).then((receivedDocumentSet: DocumentSet) => {
     documentSet = receivedDocumentSet;
     documentSet.uploadDate = new Date(documentSet.uploadDate); // convert to Date object, if necessary (SQLite returns date obj, Postgres returns string)
@@ -50,36 +54,74 @@
   ];
   const placeholderQuery = placeholderQueries[Math.floor(Math.random() * placeholderQueries.length)];
 
+  const mapSearchResults = (searchResults: Array<Record<string, any>>) => {
+    return searchResults.map(result => ({ // TODO Factor this out if preview and search use the same data structure.
+      ...result.metadata, // flatten the metadata so that this object is the same shape as a CSV row.
+      similarity: result.score,
+      [textColumn]: result.text,
+      sourceNodeId: result.sourceNodeId
+    }));
+  };
+
   async function handleSearch() {
     if (!searchQuery.trim() || !documentSet) return;
     hasResults = true;
     loading = true;
+    hasMore = false;
     try {
-      const searchResults = await api.searchDocumentSet({
+      const searchResponse = await api.searchDocumentSet({
         documentSetId: documentSet.documentSetId,
         query: searchQuery,
-        n_results: 100,
+        n_results: pageSize,
+        offset: 0,
         filters: metadataFilters.map(filter => ({
           key: filter.key,
           operator: filter.operator,
           value: filter.value
         }))
       });
-      results = searchResults.map(result => ({ // TODO Factor this out if preview and search use the same data structure.
-        ...result.metadata, // flatten the metadata so that this object is the same shape as a CSV row.
-        similarity: result.score.toFixed(2),
-        [textColumn]: result.text,
-        sourceNodeId: result.sourceNodeId
-      })); 
+      results = mapSearchResults(searchResponse.results);
+      hasMore = searchResponse.hasMore;
       error = null; 
     } catch (error_: any) {
       console.error('Search failed:', error_);
-      error = error_;
+      error = error_ instanceof Error ? error_.message : String(error_);
+      results = [];
+      hasMore = false;
     } finally {
       loading = false;
     }
   }
 
+  async function handleLoadMore() {
+    if (!documentSet || loadingMore || loading || !hasMore) return;
+
+    loadingMore = true;
+    try {
+      const searchResponse = await api.searchDocumentSet({
+        documentSetId: documentSet.documentSetId,
+        query: searchQuery,
+        n_results: pageSize,
+        offset: results.length,
+        filters: metadataFilters.map(filter => ({
+          key: filter.key,
+          operator: filter.operator,
+          value: filter.value
+        }))
+      });
+
+      const nextRows = mapSearchResults(searchResponse.results);
+      results = [...results, ...nextRows];
+      hasMore = searchResponse.hasMore;
+      error = null;
+    } catch (error_: any) {
+      console.error('Loading more failed:', error_);
+      error = error_ instanceof Error ? error_.message : String(error_);
+    } finally {
+      loadingMore = false;
+    }
+  }
+
   function addFilter() {
     metadataFilters = [...metadataFilters, { key: '', operator: '==', value: '' }];
   }
@@ -220,6 +262,9 @@
         <Results
           {results}
           {loading}
+          {loadingMore}
+          {hasMore}
+          showMore={handleLoadMore}
           {textColumn}
           {metadataColumns}
           originalDocumentClick={handleOriginalDocumentClick}

package/dist/types.d.ts

@@ -32,12 +32,16 @@ export interface MeaningfullyAPI {
         documentSetId: number;
         query: string;
         n_results: number;
+        offset?: number;
         filters?: {
             key: string;
             operator: "==" | "in" | ">" | "<" | "!=" | ">=" | "<=" | "nin" | "any" | "all" | "text_match" | "contains" | "is_empty";
             value: any;
         }[];
-    }) => Promise<SearchResult[]>;
+    }) => Promise<{
+        results: SearchResult[];
+        hasMore: boolean;
+    }>;
     getDocument: (params: {
         documentSetId: number;
         documentId: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@meaningfully/ui",
-	"version": "0.0.10",
+	"version": "0.0.11",
 	"license": "MIT",
 	"description": "Svelte components for meaningfully semantic search",
 	"repo": "https://github.com/jeremybmerrill/meaningfully-ui",