From 94362b69cd26737a9a4749493c1d3f0a613d65e8 Mon Sep 17 00:00:00 2001 From: Jay Wang Date: Sun, 4 Feb 2024 01:34:18 -0500 Subject: [PATCH] Add count label Signed-off-by: Jay Wang --- examples/rag-playground/package.json | 11 ++++++ .../src/components/playground/playground.ts | 6 +-- .../components/text-viewer/text-viewer.css | 36 +++++++++++++++-- .../src/components/text-viewer/text-viewer.ts | 39 +++++++++++++++---- .../rag-playground/src/utils/d3-import.ts | 15 +++++++ examples/rag-playground/vite.config.ts | 8 ++-- 6 files changed, 97 insertions(+), 18 deletions(-) create mode 100644 examples/rag-playground/src/utils/d3-import.ts diff --git a/examples/rag-playground/package.json b/examples/rag-playground/package.json index 4893503..1a85b1d 100644 --- 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 index 20c9351..774bda1 100644 --- 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.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 { diff --git a/examples/rag-playground/src/components/text-viewer/text-viewer.css b/examples/rag-playground/src/components/text-viewer/text-viewer.css index f7cfd88..d5ab089 100644 --- 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 index 512cf09..8979459 100644 --- 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 { `; } + // Compile the count label + let countLabel = html`
+ ${numberFormatter(this.documentCount)} documents +
`; + + if (this.isFiltered) { + countLabel = html`
+ ${numberFormatter(this.shownDocuments.length)} search results +
`; + } + return html`
MeMemo Database
-
${this.documentCount} arXiv abstracts
+
${this.datasetNameDisplay}
@@ -243,13 +259,22 @@ export class MememoTextViewer extends LitElement {
-
- ${items} +
+
+
{ + this.isSearchScrolled = (e.target as HTMLElement).scrollTop > 0; + }} > - Show More + ${countLabel} ${items} +
+ Show More +
diff --git a/examples/rag-playground/src/utils/d3-import.ts b/examples/rag-playground/src/utils/d3-import.ts new file mode 100644 index 0000000..8cd4546 --- /dev/null +++ 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 index 227f3a7..88df2fe 100644 --- 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') {