From 4851c9de8917d35e2e1cc66d8d33d52f78418acf Mon Sep 17 00:00:00 2001
From: Ryan Mullins <ryanmullins@google.com>
Date: Thu, 20 Oct 2022 10:22:15 -0700
Subject: [PATCH] Adds show only generated toggle to DataTable

PiperOrigin-RevId: 482528050
---
 lit_nlp/client/modules/data_table_module.css |  6 +++++
 lit_nlp/client/modules/data_table_module.ts  | 26 +++++++++++---------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/lit_nlp/client/modules/data_table_module.css b/lit_nlp/client/modules/data_table_module.css
index 1c4724e2..3d9a5cc7 100644
--- a/lit_nlp/client/modules/data_table_module.css
+++ b/lit_nlp/client/modules/data_table_module.css
@@ -23,3 +23,9 @@
   max-height: calc(100% - 48px);
   overflow: auto;
 }
+
+.toggles-row {
+  display: flex;
+  flex-direction: row;
+  column-gap: 16px;
+}
diff --git a/lit_nlp/client/modules/data_table_module.ts b/lit_nlp/client/modules/data_table_module.ts
index fb96fce5..ee41df38 100644
--- a/lit_nlp/client/modules/data_table_module.ts
+++ b/lit_nlp/client/modules/data_table_module.ts
@@ -66,6 +66,7 @@ export class DataTableModule extends LitModule {
   @observable searchText = '';
 
   // Module options / configuration state
+  @observable private onlyShowGenerated: boolean = false;
   @observable private onlyShowSelected: boolean = false;
   @observable private columnDropdownVisible: boolean = false;
 
@@ -125,9 +126,10 @@ export class DataTableModule extends LitModule {
 
   @computed
   get filteredData(): IndexedInput[] {
-    return this.onlyShowSelected ?
+    const data: IndexedInput[] = this.onlyShowSelected ?
         this.selectionService.selectedInputData.concat(this.pinnedInputData) :
         this.appState.currentInputData;
+    return this.onlyShowGenerated ? data.filter((d) => d.meta.added) : data;
   }
 
   @computed
@@ -352,9 +354,7 @@ export class DataTableModule extends LitModule {
   }
 
   renderControls() {
-    const onClickResetView = () => {
-      this.table!.resetView();
-    };
+    const onClickResetView = () => {this.table?.resetView();};
 
     const onClickSelectFiltered = () => {
       this.onSelect(this.table!.getVisibleDataIdxs());
@@ -364,10 +364,6 @@ export class DataTableModule extends LitModule {
       this.columnDropdownVisible = !this.columnDropdownVisible;
     };
 
-    const onClickSwitch = () => {
-      this.onlyShowSelected = !this.onlyShowSelected;
-    };
-
     // clang-format off
     return html`
       <button class='hairline-button' @click=${onToggleShowColumn}>
@@ -377,9 +373,17 @@ export class DataTableModule extends LitModule {
           ${this.columnDropdownVisible ? "expand_less" : "expand_more"}
         </span>
       </button>
-      <div class='switch-container' @click=${onClickSwitch}>
-        <div>Show only selected</div>
-        <mwc-switch .checked=${this.onlyShowSelected}></mwc-switch>
+      <div class="toggles-row">
+        <div class='switch-container'
+            @click=${() => {this.onlyShowSelected = !this.onlyShowSelected;}}>
+          <div>Show only selected</div>
+          <mwc-switch .checked=${this.onlyShowSelected}></mwc-switch>
+        </div>
+        <div class='switch-container'
+            @click=${() => {this.onlyShowGenerated = !this.onlyShowGenerated;}}>
+          <div>Show only generated</div>
+          <mwc-switch .checked=${this.onlyShowGenerated}></mwc-switch>
+        </div>
       </div>
       <div id="toolbar-buttons">
         <button class='hairline-button' @click=${onClickResetView}