Upgrade LIT to MobX v6.

PiperOrigin-RevId: 597622082

lit_nlp/client/core/app_statusbar.ts

@@ -28,7 +28,7 @@ import {MobxLitElement} from '@adobe/lit-mobx';
 import {html} from 'lit';
 import {customElement} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
-import {observable} from 'mobx';
+import {makeObservable, observable} from 'mobx';
 
 import {styles as sharedStyles} from '../lib/shared_styles.css';
 import {AppState, StatusService} from '../services/services';
@@ -49,6 +49,11 @@ export class StatusbarComponent extends MobxLitElement {
   private readonly statusService = app.getService(StatusService);
   @observable private renderFullMessages = false;
 
+  constructor() {
+    super();
+    makeObservable(this);
+  }
+
   override render() {
     const progressClass = classMap({
       'progress-line': this.statusService.isLoading,

lit_nlp/client/core/documentation.ts

@@ -25,7 +25,7 @@ import '../elements/checkbox';
 import {html} from 'lit';
 import {customElement, query} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
-import {computed, observable} from 'mobx';
+import {computed, makeObservable, observable} from 'mobx';
 
 import {ReactiveElement} from '../lib/elements';
 import {styles as sharedStyles} from '../lib/shared_styles.css';
@@ -48,7 +48,6 @@ export class DocumentationComponent extends ReactiveElement {
   }
 
   // Markdown of splash screen text to render.
-  @observable
   private readonly markdownPages = [
     `![](static/onboarding_1_welcome.gif)\n# Welcome to LIT!\nLIT is a ` +
         `visual, interactive tool to help ML researchers, engineers, product ` +
@@ -96,6 +95,7 @@ export class DocumentationComponent extends ReactiveElement {
 
   constructor(private readonly appState = app.getService(AppState)) {
     super();
+    makeObservable(this);
   }
 
   override firstUpdated() {
@@ -162,7 +162,7 @@ export class DocumentationComponent extends ReactiveElement {
   }
 
   override render() {
-    const hiddenClassMap = classMap({hide: !this.isOpen});
+    const hiddenClassMap = classMap({'hide': !this.isOpen});
     const docToDisplay = this.pagesToRender[this.currentPage];
     const onCloseClick = () => {
       this.isOpen = false;

lit_nlp/client/core/faceting_control.ts

@@ -23,7 +23,7 @@ import {html, TemplateResult} from 'lit';
 // tslint:disable:no-new-decorators
 import {customElement, property} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
-import {observable} from 'mobx';
+import {makeObservable, observable} from 'mobx';
 
 import {app} from '../core/app';
 import {ReactiveElement} from '../lib/elements';
@@ -60,8 +60,8 @@ export class FacetingControl extends ReactiveElement {
   private readonly discreteCount = new Map<string, number>();
 
   @observable private hasExcessBins = false;
-  @observable private features: string[] = [];
-  @observable private bins: NumericFeatureBins = {};
+  @observable.ref private features: string[] = [];
+  @observable.ref private bins: NumericFeatureBins = {};
 
   @property({type: Boolean, reflect: true}) disabled = false;
   @property({type: String}) contextName?: string;
@@ -74,6 +74,7 @@ export class FacetingControl extends ReactiveElement {
 
   constructor(private readonly groupService = app.getService(GroupService)) {
     super();
+    makeObservable(this);
     this.initFeatureConfigs();
   }
 

lit_nlp/client/core/global_settings.ts

@@ -32,11 +32,11 @@ import {MobxLitElement} from '@adobe/lit-mobx';
 import {html, TemplateResult} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
-import {action, computed, observable} from 'mobx';
+import {action, computed, makeObservable, observable} from 'mobx';
 
 import {styles as sharedStyles} from '../lib/shared_styles.css';
 import {StringLitType} from '../lib/lit_types';
-import {CallConfig, datasetDisplayName, LitTabGroupLayout, NONE_DS_DICT_KEY, Spec} from '../lib/types';
+import {CallConfig, datasetDisplayName, LitTabGroupLayout, NONE_DS_DICT_KEY, type Spec} from '../lib/types';
 import {getTemplateStringFromMarkdown, validateCallConfig} from '../lib/utils';
 import {LitInputField} from '../elements/lit_input_field';
 import {resolveModuleConfig} from '../services/modules_service';
@@ -61,6 +61,7 @@ const COMPATIBLE_TXT = 'Compatible';
 const INCOMPATIBLE_TXT = 'Incompatible';
 
 const NEW_NAME_FIELD = 'new_name';
+const NEW_NAME_SPEC: Spec = {[NEW_NAME_FIELD]: new StringLitType()};
 const LOAD_DISABLED_TXT = 'Provide a value for "new_name" to load';
 
 function initializeCallConfig(spec: Spec): CallConfig {
@@ -89,7 +90,7 @@ export class GlobalSettingsComponent extends MobxLitElement {
   @observable private selectedLayout = '';
   @observable private readonly modelCheckboxValues = new Map<string, boolean>();
   @observable selectedTab: TabName = 'Models';
-  @observable private status?: string;
+  @observable private status?: string = undefined;
 
   // TODO(b/207137261): Determine if datapointsStatus, modelStatus,
   // pathForDatapoints, and pathForModel are still necessary/how to use convey
@@ -104,24 +105,24 @@ export class GlobalSettingsComponent extends MobxLitElement {
   @observable private readonly openDatasetKeys: Set<string> = new Set();
   @observable private readonly openLayoutKeys: Set<string> = new Set();
 
-  @observable private datasetToLoad?: string;
-  @observable private modelToLoad?: string;
+  @observable private datasetToLoad?: string = undefined;
+  @observable private modelToLoad?: string = undefined;
   @observable private loadingCallConfig: CallConfig = {};
   @observable private missingCallConfigFields: string[] = [];
 
   @computed get loadableDatasets(): string[] {
     const {datasets} = this.appState.metadata.initSpecs;
     const loadable = Object.entries(datasets)
-        .filter(([unused, spec]) => spec != null)
-        .map(([name, unused]) => name);
+        .filter(([, spec]) => spec != null)
+        .map(([name, ]) => name);
     return loadable;
   }
 
   @computed get loadableModels(): string[] {
     const {models} = this.appState.metadata.initSpecs;
     const loadable = Object.entries(models)
-        .filter(([unused, spec]) => spec != null)
-        .map(([name, unused]) => name);
+        .filter(([, spec]) => spec != null)
+        .map(([name, ]) => name);
     return loadable;
   }
 
@@ -131,6 +132,11 @@ export class GlobalSettingsComponent extends MobxLitElement {
         .map(([modelName,]) => modelName);
   }
 
+  constructor() {
+    super();
+    makeObservable(this);
+  }
+
   // TODO(b/207137261): Determine where and how dataset saving happens after the
   // load from init_spec() refactor.
   // @computed get saveDatapointButtonDisabled() {
@@ -684,23 +690,27 @@ export class GlobalSettingsComponent extends MobxLitElement {
    * @param load A callback function for telling the LIT server to load a new
    *    instance of the selected component given the configured parameters.
    */
-  private renderLoader(panel: string, options: string[], selectedOption: string,
-                       spec: Spec, select: EventHandler, load: EventHandler) {
+  private renderLoader(
+      panel: string,
+      options: string[],
+      selectedOption: string,
+      spec: Spec,
+      select: EventHandler,
+      load: EventHandler
+  ) {
     const disableReset =
         Object.entries(this.loadingCallConfig)
           .map(([name, value]) =>
               name === NEW_NAME_FIELD ? !value : spec[name]?.default === value)
           .reduce((a, b) => a && b, true);
     const disableSubmit = !this.loadingCallConfig[NEW_NAME_FIELD];
-    const specEntries = Object.entries(spec);
+    const aggregateSpec: Spec = {...NEW_NAME_SPEC, ...spec};
+    const specEntries = Object.entries(aggregateSpec);
     const reset = () => {this.resetLoadingCallConfig();};
     const selectionChanged = (e: Event) => {select(e);};
 
     const configInputs = specEntries.length ?
-      Object.entries({
-        [NEW_NAME_FIELD]: new StringLitType(),
-        ...spec
-      }).map(([fieldName, fieldType]) => {
+      Object.entries(aggregateSpec).map(([fieldName, fieldType]) => {
         const value = this.loadingCallConfig[fieldName];
         const updateConfig = (e: Event) => {
           const {value} = e.target as LitInputField;
@@ -859,10 +869,16 @@ export class GlobalSettingsComponent extends MobxLitElement {
   }
 
   private renderLine(
-      name: string, selectorHtml: TemplateResult, selected: boolean,
-      disabled: boolean, expanderOpen: boolean, onExpanderClick: () => void,
-      renderStatus: boolean, expandedInfoHtml: TemplateResult,
-      description = '') {
+      name: string,
+      selectorHtml: TemplateResult,
+      selected: boolean,
+      disabled: boolean,
+      expanderOpen: boolean,
+      onExpanderClick: () => void,
+      renderStatus: boolean,
+      expandedInfoHtml: TemplateResult,
+      description = ''
+  ) {
     const expanderIcon =
         expanderOpen ? 'expand_less' : 'expand_more';  // Icons for arrows.
 
@@ -882,7 +898,7 @@ export class GlobalSettingsComponent extends MobxLitElement {
         classMap({'expanded-info': true, 'open': expanderOpen});
     const status = renderStatus ? this.renderStatus(selected, disabled) : '';
     return html`
-      <div class=${classes}>
+      <div id=${`config-line-for-${name}`} class=${classes}>
         <div class='fixed-third-col'>
           ${selectorHtml}
         </div>

lit_nlp/client/core/lit_module.ts

@@ -18,7 +18,7 @@
 // tslint:disable:no-new-decorators
 import {html, TemplateResult} from 'lit';
 import {property} from 'lit/decorators.js';
-import {computed, observable} from 'mobx';
+import {computed, makeObservable, observable} from 'mobx';
 
 import {ReactiveElement} from '../lib/elements';
 import {LitModuleClass, ModelInfoMap, SCROLL_SYNC_CSS_CLASS, Spec} from '../lib/types';
@@ -57,27 +57,27 @@ export abstract class LitModule extends ReactiveElement {
   @property({type: Object}) onSyncScroll: OnScrollFn|null = null;
 
   // Name of this module, to show in the UI.
-  static title: string = '';
+  static title = '';
 
   /**
    * Information about this module that displays on hover.
    */
   static infoMarkdown = '';
 
   // Number of columns of the 12 column horizontal layout.
-  static numCols: number = 4;
+  static numCols = 4;
 
   // Whether to collapse this module by default.
-  static collapseByDefault: boolean = false;
+  static collapseByDefault = false;
 
   // If true, duplicate this module in example comparison mode.
-  static duplicateForExampleComparison: boolean = false;
+  static duplicateForExampleComparison = false;
 
   // If true, duplicate this module when running with more than one model.
-  static duplicateForModelComparison: boolean = true;
+  static duplicateForModelComparison = true;
 
   // If true, duplicate this module as rows, instead of columns.
-  static duplicateAsRow: boolean = false;
+  static duplicateAsRow = false;
 
   // Template function. Should return HTML to create this element in the DOM.
   static template:
@@ -98,6 +98,11 @@ export abstract class LitModule extends ReactiveElement {
     return app.getServiceArray(SelectionService)[this.selectionServiceIndex];
   }
 
+  constructor () {
+    super();
+    makeObservable(this);
+  }
+
   override updated() {
     // If the class defined by SCROLL_SYNC_CSS_CLASS is used in the module then
     // set its onscroll callback to propagate to the parent widget.

lit_nlp/client/core/main_toolbar.ts

@@ -28,7 +28,7 @@ import {html} from 'lit';
 import {customElement} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {styleMap} from 'lit/directives/style-map.js';
-import {computed} from 'mobx';
+import {makeObservable, computed} from 'mobx';
 
 import {MenuItem} from '../elements/menu';
 import {styles as sharedStyles} from '../lib/shared_styles.css';
@@ -233,6 +233,11 @@ export class LitMainToolbar extends MobxLitElement {
         .map(d => [d.id, d.meta['parentId']!]);
   }
 
+  constructor() {
+    super();
+    makeObservable(this);
+  }
+
   /**
    * Button to select a random example.
    */

lit_nlp/client/core/modules.ts

@@ -25,7 +25,7 @@ import {html} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {styleMap} from 'lit/directives/style-map.js';
-import {observable} from 'mobx';
+import {makeObservable, observable} from 'mobx';
 
 import {ReactiveElement} from '../lib/elements';
 import {styles as sharedStyles} from '../lib/shared_styles.css';
@@ -137,6 +137,11 @@ export class LitModules extends ReactiveElement {
     return [sharedStyles, styles];
   }
 
+  constructor() {
+    super();
+    makeObservable(this);
+  }
+
   override connectedCallback() {
     super.connectedCallback();
     // We set up a callback in the modulesService to allow it to explicitly

lit_nlp/client/core/slice_module.ts

@@ -20,7 +20,7 @@ import '../elements/export_controls';
 import {customElement} from 'lit/decorators.js';
 import {html} from 'lit';
 import {classMap} from 'lit/directives/class-map.js';
-import {computed, observable} from 'mobx';
+import {computed, makeObservable, observable} from 'mobx';
 
 import {app} from './app';
 import {LitModule} from './lit_module';
@@ -74,6 +74,7 @@ export class SliceModule extends LitModule {
 
   constructor() {
     super();
+    makeObservable(this);
 
     const facetsChange = (event: CustomEvent<FacetsChange>) => {
       this.sliceByFeatures = event.detail.features;

lit_nlp/client/core/widget_group.ts

@@ -211,7 +211,7 @@ export class WidgetGroup extends ReactiveElement {
     });
 
     // Set sub-component dimensions based on the container.
-    const widgetStyle = {width: '100%', height: '100%'};
+    const widgetStyle = {'width': '100%', 'height': '100%'};
     if (this.duplicateAsRow) {
       widgetStyle.width = `${100 / configGroup.length}%`;
     } else {
@@ -237,7 +237,9 @@ export class WidgetGroup extends ReactiveElement {
         <div class='wrapper' @click=${onWrapperClick} >
           ${this.renderHeader(configGroup)}
           <div class=${holderClasses}>
-            ${configGroup.map(config => this.renderModule(config, widgetStyle, showSubtitle))}
+            ${configGroup.map(
+                (config) => this.renderModule(config, widgetStyle, showSubtitle)
+            )}
           </div>
         </div>
        </div>
@@ -247,9 +249,16 @@ export class WidgetGroup extends ReactiveElement {
 
 
   renderModule(
-      config: RenderConfig, styles: {[key: string]: string},
-      showSubtitle: boolean) {
+      config: RenderConfig,
+      styles: {[key: string]: string},
+      showSubtitle: boolean
+  ) {
     const moduleType = config.moduleType;
+    if (typeof moduleType.template !== 'function') {
+      console.log(typeof config, typeof moduleType, typeof moduleType.template);
+      return;
+    }
+
     const modelName = config.modelName || '';
     const selectionServiceIndex = config.selectionServiceIndex || 0;
     const shouldReact = this.visible && !this.minimized;
@@ -320,6 +329,7 @@ export class WidgetGroup extends ReactiveElement {
  * A wrapper for a LIT module that renders the contents in a box with
  * expand/contract capabilities.
  */
+// TODO(b/319249148): Determine if this inherit from LitElement instead.
 @customElement('lit-widget')
 export class LitWidget extends MobxLitElement {
   @property({type: String}) displayTitle = '';