Disassociate @observable and @Property decorators in ExportControls/F…

…acetingControl

PiperOrigin-RevId: 555216786

lit_nlp/client/core/faceting_control.ts

@@ -63,10 +63,10 @@ export class FacetingControl extends ReactiveElement {
   @observable private features: string[] = [];
   @observable private bins: NumericFeatureBins = {};
 
-  @observable @property({type: Boolean}) disabled = false;
-  @observable @property({type: String}) contextName?: string;
-  @observable @property({type: Number}) binLimit = DEFAULT_BIN_LIMIT;
-  @observable @property({type: Number}) choiceLimit?: number;
+  @property({type: Boolean, reflect: true}) disabled = false;
+  @property({type: String}) contextName?: string;
+  @property({type: Number}) binLimit = DEFAULT_BIN_LIMIT;
+  @property({type: Number}) choiceLimit?: number;
 
   static override get styles() {
     return [sharedStyles, styles];

lit_nlp/client/elements/export_controls.ts

@@ -22,7 +22,6 @@ import './popup_container';
 import {html} from 'lit';
 import {classMap} from 'lit/directives/class-map.js';
 import {customElement, property} from 'lit/decorators.js';
-import {observable} from 'mobx';
 import * as papa from 'papaparse';
 
 import {ReactiveElement} from '../lib/elements';
@@ -42,7 +41,7 @@ export class ExportControls extends ReactiveElement {
   }
 
   /** The default file download name. */
-  @observable @property({type: String}) downloadFilename = 'data.csv';
+  @property({type: String}) downloadFilename = 'data.csv';
   /** A list of rows of data to download. */
   @property({type: Object}) data: SortableTableEntry[][] = [];
   /** Column names. */
@@ -91,8 +90,7 @@ export class ExportControls extends ReactiveElement {
     };
 
     const updateFilename = (e: Event) => {
-      // tslint:disable-next-line:no-any
-      this.downloadFilename = (e as any).target.value as string;
+      this.downloadFilename = (e.target as HTMLInputElement).value;
     };
 
     function onEnter(e: KeyboardEvent) {