Allow updating of input images with file upload box

Also ensures scalar plots aren't rendered when hidden by collapsed expansion panels, bringing back logic from before the common expansion-panel element was created.

PiperOrigin-RevId: 438367501

lit_nlp/client/modules/datapoint_editor_module.css

@@ -213,3 +213,12 @@ mwc-icon.google-icon {
   margin-bottom: 1px;
   margin-left: 4px;
 }
+
+.hidden {
+  display: none;
+}
+
+.image-button {
+  margin-left: 0;
+}
+

lit_nlp/client/modules/datapoint_editor_module.ts

@@ -253,6 +253,7 @@ export class DatapointEditorModule extends LitModule {
     };
     const onClickReset = () => {
       this.resetEditedData(
+          this.selectionService.primarySelectedInputData == null ?  null :
           this.selectionService.primarySelectedInputData!.data);
     };
     const onClickClear = () => {
@@ -346,18 +347,55 @@ export class DatapointEditorModule extends LitModule {
           this.maximizedImageFields.add(key);
         }
       };
+      const uploadClicked = () => {
+        (this.shadowRoot!.querySelector(
+            '#uploadimage') as HTMLInputElement).click();
+      };
+      const handleUpload = (e: Event) => {
+        const inputElem = e.target as HTMLInputElement;
+        const file = inputElem.files == null || inputElem.files.length === 0 ?
+            null :
+            inputElem.files[0];
+        if (file == null) {
+          return;
+        }
+        const reader = new FileReader();
+        reader.addEventListener('load', () => {
+          const result = reader.result as string;
+          this.datapointEdited = true;
+          this.editedData[key] = result;
+        });
+        reader.readAsDataURL(file);
+        inputElem.value = '';
+      };
       const maximizeImage = this.maximizedImageFields.has(key);
+      const imageSource = (value == null) ? '' : value.toString() as string;
+      const noImage = imageSource === '';
       const imageClasses = classMap({
         'image-min': !maximizeImage,
+        'hidden': noImage
       });
-      const imageSource = (value == null) ? '' : value.toString() as string;
+      const toggleClasses = classMap({
+        'image-toggle': true,
+        'hidden': noImage
+      });
+      const uploadLabel = noImage ? 'Upload image' : 'Replace image';
       return html`
         <div class="image-holder">
           <img class=${imageClasses} src=${imageSource}>
-          <mwc-icon class="image-toggle" @click=${toggleImageSize}
+          <mwc-icon class="${toggleClasses}" @click=${toggleImageSize}
                     title="Toggle full size">
-            ${maximizeImage ? 'close_fullscreen' : 'open_in_full'}
+            ${maximizeImage ?
+             'photo_size_select_small' : 'photo_size_select_large'}
           </mwc-icon>
+          <div>
+            <input type='file' id='uploadimage' accept="image/*"
+                   @change=${handleUpload} class="hidden">
+            <button class="hairline-button image-button" @click=${uploadClicked}>
+              <span class="material-icon">publish</span>
+              ${uploadLabel}
+            </button>
+          </div>
         </div>
       `;
     };

lit_nlp/client/modules/scalar_module.ts

@@ -98,6 +98,7 @@ export class ScalarModule extends LitModule {
   // there are multiple pred keys).
   private readonly brushObjects: BrushObject[] = [];
 
+  @observable private readonly isPlotHidden = new Map();
   @observable private preds: Preds[] = [];
   @observable private plotWidth = ScalarModule.maxPlotWidth;
   @observable private plotHeight = ScalarModule.minPlotHeight;
@@ -859,16 +860,29 @@ export class ScalarModule extends LitModule {
     const plotLabel =
         `${axisTitle}${selectedValue ? ` - ${selectedValue}` : ''}`;
 
+    const toggleCollapse = () => {
+      const isHidden = (this.isPlotHidden.get(axisTitle) == null) ?
+          collapseByDefault : this.isPlotHidden.get(axisTitle);
+      this.isPlotHidden.set(axisTitle, !isHidden);
+    };
+    // This plot's value in isPlotHidden gets set in toggleCollapse and is null
+    // before the user opens/closes it for the first time. This uses the
+    // collapseByDefault setting if isPlotHidden hasn't been set yet.
+    const isHidden = (this.isPlotHidden.get(axisTitle) == null) ?
+        collapseByDefault : this.isPlotHidden.get(axisTitle);
+
     // clang-format off
     return html`
         <div class='plot-holder'>
-          <expansion-panel .label=${plotLabel} ?expanded=${!collapseByDefault}
-                            padLeft padRight>
+          <expansion-panel .label=${plotLabel} ?expanded=${!isHidden}
+                            padLeft padRight
+                            @expansion-toggle=${toggleCollapse}>
+            ${isHidden ? null : html`
             <div class='scatterplot-background'>
               ${svg`<svg class='scatterplot' data-key='${key}'
                       data-label='${label}'>
                     </svg>`}
-            </div>
+            </div>`}
           </expansion-panel>
         </div>`;
     // clang-format on