Style semantic search results

Signed-off-by: Jay Wang <jay@zijie.wang>
poloclub · Feb 6, 2024 · d12c444 · d12c444
1 parent 190fbd7
commit d12c444
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 4 deletions.
diff --git a/examples/rag-playground/src/components/text-viewer/text-viewer.css b/examples/rag-playground/src/components/text-viewer/text-viewer.css
@@ -70,6 +70,7 @@
   flex-flow: row;
   background-color: white;
   align-items: center;
+  position: relative;
 
   &:has(input:focus) {
     outline: 2px solid var(--focus-border-color);
@@ -143,6 +144,21 @@
       }
     }
   }
+
+  .semantic-search-info {
+    position: absolute;
+    font-size: var(--font-d1);
+    left: 32px;
+    background: var(--blue-50);
+    color: var(--blue-600);
+    padding: 0 8px;
+    border-radius: 5px;
+
+    &[is-hidden] {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
 }
 
 .list-container {
@@ -197,6 +213,11 @@
     padding-bottom: 3px;
     padding-top: 3px;
     box-sizing: border-box;
+    position: relative;
+
+    &:has(.distance-overlay:not([is-hidden])) {
+      padding-right: 56px;
+    }
 
     &[clamp-line] {
       display: -webkit-box;
@@ -216,6 +237,28 @@
       font-style: normal;
       font-weight: 700;
     }
+
+    .distance-overlay {
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      /* transform: translate(0, -50%); */
+
+      font-size: var(--font-d3);
+      font-variant-numeric: tabular-nums;
+      padding: 2px 5px;
+      border-bottom-left-radius: 4px;
+      /* border-top-left-radius: 5px; */
+      text-align: right;
+
+      background-color: color-mix(in lab, var(--blue-100) 70%, transparent 30%);
+      color: var(--blue-800);
+
+      &[is-hidden] {
+        opacity: 0;
+        pointer-events: none;
+      }
+    }
   }
 
   .count-label {

diff --git a/examples/rag-playground/src/components/text-viewer/text-viewer.ts b/examples/rag-playground/src/components/text-viewer/text-viewer.ts
@@ -2,7 +2,7 @@ import { LitElement, css, unsafeCSS, html, PropertyValues } from 'lit';
 import { customElement, property, state, query } from 'lit/decorators.js';
 import { unsafeHTML, UnsafeHTMLDirective } from 'lit/directives/unsafe-html.js';
 import { DirectiveResult } from 'lit/directive.js';
-import { downloadJSON } from '@xiaohk/utils';
+import { downloadJSON, round } from '@xiaohk/utils';
 import d3 from '../../utils/d3-import';
 
 import type { MememoWorkerMessage } from '../../workers/mememo-worker';
@@ -54,6 +54,9 @@ export class MememoTextViewer extends LitElement {
   @state()
   shownDocuments: string[] = [];
 
+  @state()
+  shownDocumentDistances: number[] = [];
+
   @state()
   isFiltered = false;
 
@@ -65,6 +68,8 @@ export class MememoTextViewer extends LitElement {
 
   isSearching = false;
   pendingQuery: string | null = null;
+
+  @state()
   curQuery: string | null = null;
 
   mememoWorker: Worker;
@@ -280,7 +285,12 @@ export class MememoTextViewer extends LitElement {
         this.curQuery = null;
         this.isFiltered = true;
         this.curDocuments = documents;
+        this.showSearchBarCancelButton = true;
         this.shownDocuments = this.curDocuments.slice(0, this.shownDocumentCap);
+        this.shownDocumentDistances = documentDistances.slice(
+          0,
+          this.shownDocumentCap
+        );
         break;
       }
 
@@ -361,6 +371,13 @@ export class MememoTextViewer extends LitElement {
           }}
         >
           ${itemText}
+          <span
+            class="distance-overlay"
+            ?is-hidden=${!this.isFiltered || this.curQuery !== null}
+            >${i < this.shownDocumentDistances.length
+              ? round(this.shownDocumentDistances[i], 4)
+              : ''}</span
+          >
         </div> `;
     }
 
@@ -383,13 +400,18 @@ export class MememoTextViewer extends LitElement {
     </div>`;
 
     if (this.isFiltered) {
+      const name =
+        this.curQuery === null
+          ? 'semantic search results'
+          : 'lexical search results';
+
       if (this.curDocuments.length < LEXICAL_SEARCH_LIMIT) {
         countLabel = html` <div class="count-label">
-          ${numberFormatter(this.curDocuments.length)} search results
+          ${numberFormatter(this.curDocuments.length)} ${name}
         </div>`;
       } else {
         countLabel = html` <div class="count-label">
-          ${numberFormatter(this.curDocuments.length)}+ search results
+          ${numberFormatter(this.curDocuments.length)}+ ${name}
         </div>`;
       }
     }
@@ -409,7 +431,8 @@ export class MememoTextViewer extends LitElement {
               id="search-bar-input"
               type="text"
               name="search-bar-input"
-              ?disabled=${!this.isMememoFinishedLoading}
+              ?disabled=${!this.isMememoFinishedLoading ||
+              (this.isFiltered && this.curQuery === null)}
               @input=${(e: InputEvent) => this.searchBarEntered(e)}
               placeholder=${this.isMememoFinishedLoading
                 ? 'Search local documents'
@@ -423,6 +446,13 @@ export class MememoTextViewer extends LitElement {
             >
               <span class="svg-icon cross">${unsafeHTML(crossIcon)}</span>
             </span>
+
+            <div
+              class="semantic-search-info"
+              ?is-hidden=${!this.isFiltered || this.curQuery !== null}
+            >
+              Documents similar to user query
+            </div>
           </div>
         </div>