Option to download or copy Data Table contents and generator output.

PiperOrigin-RevId: 486805465

documentation/faq.md

@@ -1,6 +1,6 @@
 # Frequently Asked Questions
 
-<!--* freshness: { owner: 'lit-dev' reviewed: '2022-08-13' } *-->
+<!--* freshness: { owner: 'lit-dev' reviewed: '2022-11-07' } *-->
 
 <!-- [TOC] placeholder - DO NOT REMOVE -->
 
@@ -107,13 +107,17 @@ but using `data0`, `data1`, `data2`, e.g. `data0_<fieldname>=<value>`.
 
 ### Downloading or exporting data
 
-There is currently limited support for this via the settings (⚙️) menu. Click
-the "Dataset" tab and enter a path to save to. This is done server-side, so be
-sure the path is accessible to the server process.
+Currently, there are three ways to export data from the LIT UI:
 
-In the future, we hope to make this workflow more robust, including more control
-over data format, as well as browser-based uploads and downloads of the examples
-(such as from csv files or Google Sheets).
+-   In the Data Table, you can copy or download the current view in CSV format -
+    see [the UI guide](./ui_guide.md#data-table) for more details.
+-   In the "Dataset" tab of the settings (⚙️) menu, you can enter a path to save
+    data to. Data is pushed to the server and written by the server backend, so
+    be sure the path is writable.
+
+-   If using LIT in a Colab or other notebook environment, you can access the
+    current selection from another cell using `widget.ui_state.primary`,
+    `widget.ui_state.selection`, and `widget.ui_state.pinned`.
 
 ### Loading data from the UI
 

documentation/ui_guide.md

@@ -1,6 +1,6 @@
 # UI Guide
 
-<!--* freshness: { owner: 'lit-dev' reviewed: '2021-12-16' } *-->
+<!--* freshness: { owner: 'lit-dev' reviewed: '2022-11-07' } *-->
 
 This is a user guide for the Language Interpretability Tool (LIT) UI.
 
@@ -248,7 +248,7 @@ header row. All columns that have filters set on them have their search button
 outlined. Clicking the **"x"** button in the search box for a column will clear
 that column's filter.
 
-The **"only show selected"** checkbox toggles the data table to only show the
+The **"show only selected"** checkbox toggles the data table to only show the
 datapoints that are currently selected.
 
 The **"reset view"** button returns the data table to its standard, default
@@ -269,6 +269,15 @@ selected. A pinned datapoint can be unpinned by clicking on its pin icon again.
 
 ![LIT data table](./images/lit-datatable.png "LIT data table")<!-- DO NOT REMOVE {width="500"} -->
 
+You can also export data to CSV using the copy or download buttons in the bottom
+right:
+
+![LIT data table](./images/lit-datatable-export.png "LIT data table export controls")<!-- DO NOT REMOVE {width="400"} -->
+
+This will export all data in the current table view. To export only the
+selection, use the "Show only selected" toggle. To include additional
+columns such as model predictions, enable them from the "Columns" dropdown.
+
 ### Datapoint Editor
 
 The datapoint editor shows the details of the primary selected datapoint, if one

lit_nlp/app.py

@@ -19,6 +19,7 @@
 import math
 import os
 import random
+import threading
 import time
 from typing import Optional, Mapping, Sequence, Union, Callable, Iterable
 

lit_nlp/client/core/app_statusbar.css

@@ -117,6 +117,7 @@
 .close-button-holder {
   display: flex;
   justify-content: flex-end;
+  column-gap: 8px;
   margin: 10px;
 }
 

lit_nlp/client/core/app_statusbar.ts

@@ -25,13 +25,13 @@ import './global_settings';
 import '../elements/spinner';
 
 import {MobxLitElement} from '@adobe/lit-mobx';
+import {html} from 'lit';
 import {customElement} from 'lit/decorators';
-import { html} from 'lit';
 import {classMap} from 'lit/directives/class-map';
 import {observable} from 'mobx';
 
 import {styles as sharedStyles} from '../lib/shared_styles.css';
-import {StatusService} from '../services/services';
+import {AppState, StatusService} from '../services/services';
 
 import {app} from './app';
 import {styles} from './app_statusbar.css';
@@ -45,6 +45,7 @@ export class StatusbarComponent extends MobxLitElement {
     return [sharedStyles, styles];
   }
 
+  private readonly appState = app.getService(AppState);
   private readonly statusService = app.getService(StatusService);
   @observable private renderFullMessages = false;
 
@@ -87,10 +88,21 @@ export class StatusbarComponent extends MobxLitElement {
     `;
   }
 
-  renderPopup() {
+  renderPopupControls() {
     const close = () => {
       this.renderFullMessages = false;
     };
+
+    // clang-format off
+    return html`
+      <button class='hairline-button' @click=${() => {close();}}>
+        Close
+      </button>
+    `;
+    // clang-format on
+  }
+
+  renderPopup() {
     // clang-format off
     return html`
       <div class='modal-container'>
@@ -102,9 +114,7 @@ export class StatusbarComponent extends MobxLitElement {
                 message => html`<div class="error-message">${message}</div>`)}
           </div>
           <div class='close-button-holder'>
-            <button class='hairline-button' @click=${() => {close();}}>
-              Close
-            </button>
+            ${this.renderPopupControls()}
           </div>
         </div>
       </div>`;

lit_nlp/client/core/app_toolbar.ts

@@ -33,7 +33,6 @@ import {classMap} from 'lit/directives/class-map';
 
 import {styles as sharedStyles} from '../lib/shared_styles.css';
 import {datasetDisplayName} from '../lib/types';
-import {copyToClipboard} from '../lib/utils';
 import {AppState, ModulesService, SettingsService, StatusService} from '../services/services';
 
 import {app} from './app';
@@ -274,9 +273,7 @@ export class ToolbarComponent extends MobxLitElement {
   }
 
   onClickCopyLink() {
-    const urlBase =
-        (this.appState.metadata.canonicalURL || window.location.host);
-    copyToClipboard(urlBase + window.location.search);
+    navigator.clipboard.writeText(this.appState.getBestURL());
   }
 
   renderRightCorner() {

lit_nlp/client/elements/table.css

@@ -18,7 +18,7 @@
   z-index: 0;
 }
 
-.holder table.paginated {
+.holder table.has-footer {
   height: 100%;
   min-height: 100%;
 }
@@ -231,6 +231,21 @@ tbody td {
   flex-direction: row;
 }
 
+.footer-spacer {
+  flex: 1;
+}
+
+popup-container.download-popup {
+  --popup-bottom: 28px;
+  --popup-right: 0;
+}
+
+.download-popup-controls {
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+}
+
 .current-page-num {
   display: inline-block;
   text-align: center;