Make the lit UI reinitialize its layout after loading model and datas…

…et into the blank demo page.

The problem happens when starting from a blank demo page, loading model and dataset, hitting "submit", the page would not show anything until refreshing.

PiperOrigin-RevId: 551259603

lit_nlp/client/lib/testing_utils.ts

@@ -195,7 +195,14 @@ export const mockMetadata: LitMetadata = {
       'sst_1_micro': {},
     },
   },
-  'layouts': {},
+  'layouts': {
+    'default': {
+      'upper': {},
+      'lower': {},
+      'layoutSettings': {},
+      'description': '',
+    }
+  },
   'demoMode': false,
   'defaultLayout': 'default',
   'canonicalURL': 'http://lit_nlp_test.com',
@@ -498,7 +505,14 @@ export const mockSerializedMetadata = Object.freeze({
       'sst_1_micro': {},
     },
   },
-  'layouts': {},
+  'layouts': {
+    'default': {
+      'upper': {},
+      'lower': {},
+      'layoutSettings': {},
+      'description': '',
+    }
+  },
   'demoMode': false,
   'defaultLayout': 'default',
   'canonicalURL': 'http://lit_nlp_test.com',

lit_nlp/client/services/settings_service.ts

@@ -104,8 +104,13 @@ export class SettingsService extends LitService {
           true);
     }
 
-    // If the entire layout has changed, reinitialize the layout.
-    if (this.appState.layoutName !== nextLayout) {
+    // TOOD(b/265218467): update both `initializeLayout()` and
+    // `quickUpdateLayout()` when implementing three-panel layouts.
+    // Reinitialize the layout if the entire layout has changed or if either the
+    // upper or lower part of the layout is empty.
+    if (this.appState.layoutName !== nextLayout ||
+        Object.keys(this.modulesService.declaredLayout.upper).length === 0 ||
+        Object.keys(this.modulesService.declaredLayout.lower).length === 0) {
       this.appState.layoutName = nextLayout;
       this.modulesService.initializeLayout(
         this.appState.layout, this.appState.currentModelSpecs,

lit_nlp/client/services/settings_service_test.ts

@@ -52,6 +52,8 @@ describe('updateSettings test', () => {
     const appState = app.getService(AppState);
     // Use mock data.
     appState.metadata = mockMetadata;
+    appState.addLayouts(appState.metadata.layouts);
+    appState.layoutName = appState.metadata.defaultLayout;
     // Stop appState from trying to make the call to the back end
     // to load the data (causes test flakiness.)
     spyOn(appState, 'loadData').and.returnValue(Promise.resolve());