Add count label

Signed-off-by: Jay Wang <[email protected]>
poloclub · Feb 4, 2024 · 94362b6 · 94362b6
1 parent c0d925a
commit 94362b6
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 18 deletions.
diff --git a/examples/rag-playground/package.json b/examples/rag-playground/package.json
@@ -17,6 +17,14 @@
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@xenova/transformers": "^2.14.2",
     "@xiaohk/utils": "^0.0.6",
+    "@types/d3-array": "^3.2.1",
+    "@types/d3-format": "^3.0.4",
+    "@types/d3-random": "^3.0.3",
+    "@types/d3-time-format": "^4.0.3",
+    "d3-format": "^3.1.0",
+    "d3-array": "^3.2.4",
+    "d3-random": "^3.0.1",
+    "d3-time-format": "^4.1.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-lit": "^1.11.0",
@@ -31,5 +39,8 @@
     "vite": "^5.0.12",
     "vite-plugin-dts": "^3.7.2",
     "vite-plugin-web-components-hmr": "^0.1.3"
+  },
+  "dependencies": {
+    "d3-time-format": "^4.1.0"
   }
 }
diff --git a/examples/rag-playground/src/components/playground/playground.ts b/examples/rag-playground/src/components/playground/playground.ts
@@ -10,7 +10,7 @@ import componentCSS from './playground.css?inline';
 interface DatasetInfo {
   dataURL: string;
   datasetName: string;
-  documentName: string;
+  datasetNameDisplay: string;
 }
 
 enum Dataset {
@@ -21,7 +21,7 @@ const datasets: Record<Dataset, DatasetInfo> = {
   [Dataset.Arxiv]: {
     dataURL: '/data/ml-arxiv-papers-1000.ndjson.gzip',
     datasetName: 'ml-arxiv-papers',
-    documentName: 'arXiv abstracts'
+    datasetNameDisplay: 'ML arXiv Abstracts (1k)'
   }
 };
 
@@ -79,7 +79,7 @@ export class MememoPlayground extends LitElement {
           <mememo-text-viewer
             dataURL=${datasets['arxiv'].dataURL}
             datasetName=${datasets['arxiv'].datasetName}
-            documentName=${datasets['arxiv'].documentName}
+            datasetNameDisplay=${datasets['arxiv'].datasetNameDisplay}
           ></mememo-text-viewer>
         </div>
 

diff --git a/examples/rag-playground/src/components/text-viewer/text-viewer.css b/examples/rag-playground/src/components/text-viewer/text-viewer.css
@@ -146,15 +146,43 @@
   }
 }
 
-.content-list {
+.list-container {
   overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  flex-grow: 1;
+  box-sizing: border-box;
+}
+
+.header-gap {
+  margin-top: 3px;
+  height: 1px;
+  width: 100%;
+  flex-shrink: 0;
+
+  background: var(--gray-300);
+  opacity: 1;
+  box-shadow:
+    0 1px 1px hsla(0, 0%, 0%, 0.05),
+    0 1px 2px hsla(0, 0%, 0%, 0.05);
+  transition:
+    opacity 300ms ease-in-out,
+    box-shadow 300ms ease-in-out;
+
+  &[is-hidden] {
+    opacity: 0;
+    box-shadow: none;
+  }
+}
+
+.content-list {
   font-size: var(--font-d2);
 
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  width: 100%;
-  flex-grow: 1;
 
   overflow-y: auto;
   overflow-x: hidden;
@@ -181,7 +209,7 @@
     }
 
     &:hover {
-      background-color: color-mix(in lab, var(--blue-100), white 80%);
+      background-color: color-mix(in lab, var(--blue-100), white 70%);
     }
 
     :global(em) {

diff --git a/examples/rag-playground/src/components/text-viewer/text-viewer.ts b/examples/rag-playground/src/components/text-viewer/text-viewer.ts
@@ -1,6 +1,7 @@
 import { LitElement, css, unsafeCSS, html, PropertyValues } from 'lit';
 import { customElement, property, state, query } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import d3 from '../../utils/d3-import';
 
 import type { MememoWorkerMessage } from '../../workers/mememo-worker';
 
@@ -13,6 +14,7 @@ import crossSmallIcon from '../../images/icon-cross.svg?raw';
 
 const MAX_DOCUMENTS_IN_MEMORY = 1000;
 const DOCUMENT_INCREMENT = 100;
+const numberFormatter = d3.format(',');
 
 /**
  * Text viewer element.
@@ -29,7 +31,7 @@ export class MememoTextViewer extends LitElement {
   datasetName = 'my-dataset';
 
   @property({ type: String })
-  documentName = '';
+  datasetNameDisplay = '';
 
   @state()
   clickedItemIndexes: number[] = [];
@@ -46,6 +48,9 @@ export class MememoTextViewer extends LitElement {
   @state()
   isFiltered = false;
 
+  @state()
+  isSearchScrolled = false;
+
   @state()
   showSearchBarCancelButton = false;
 
@@ -211,11 +216,22 @@ export class MememoTextViewer extends LitElement {
       </div>`;
     }
 
+    // Compile the count label
+    let countLabel = html` <div class="count-label">
+      ${numberFormatter(this.documentCount)} documents
+    </div>`;
+
+    if (this.isFiltered) {
+      countLabel = html` <div class="count-label">
+        ${numberFormatter(this.shownDocuments.length)} search results
+      </div>`;
+    }
+
     return html`
       <div class="text-viewer">
         <div class="header-bar">
           <div class="header">MeMemo Database</div>
-          <div class="description">${this.documentCount} arXiv abstracts</div>
+          <div class="description">${this.datasetNameDisplay}</div>
         </div>
 
         <div class="search-bar-container">
@@ -243,13 +259,22 @@ export class MememoTextViewer extends LitElement {
           </div>
         </div>
 
-        <div class="content-list">
-          ${items}
+        <div class="list-container">
+          <div class="header-gap" ?is-hidden=${!this.isSearchScrolled}></div>
+
           <div
-            class="item add-more-button"
-            ?is-hidden=${this.documents.length === this.shownDocuments.length}
+            class="content-list"
+            @scroll=${(e: Event) => {
+              this.isSearchScrolled = (e.target as HTMLElement).scrollTop > 0;
+            }}
           >
-            Show More
+            ${countLabel} ${items}
+            <div
+              class="item add-more-button"
+              ?is-hidden=${this.documents.length === this.shownDocuments.length}
+            >
+              Show More
+            </div>
           </div>
         </div>
       </div>

diff --git a/examples/rag-playground/src/utils/d3-import.ts b/examples/rag-playground/src/utils/d3-import.ts
@@ -0,0 +1,15 @@
+import { format } from 'd3-format';
+import { timeFormat, utcFormat, isoParse } from 'd3-time-format';
+import { randomLcg, randomInt, randomExponential } from 'd3-random';
+import { shuffler } from 'd3-array';
+
+export default {
+  format,
+  timeFormat,
+  utcFormat,
+  isoParse,
+  randomLcg,
+  randomInt,
+  randomExponential,
+  shuffler
+};
diff --git a/examples/rag-playground/vite.config.ts b/examples/rag-playground/vite.config.ts
@@ -8,10 +8,10 @@ export default defineConfig(({ command, mode }) => {
     // Development
     return {
       plugins: [
-        // hmrPlugin({
-        //   include: ['./src/**/*.ts'],
-        //   presets: [presets.lit]
-        // })
+        hmrPlugin({
+          include: ['./src/**/*.ts'],
+          presets: [presets.lit]
+        })
       ]
     };
   } else if (command === 'build') {