HParam UI: reset ColumnHeaders if using obsolete interface

tensorboard/webapp/persistent_settings/_data_source/persistent_settings_data_source.ts

@@ -209,15 +209,17 @@ export class OSSSettingsConverter extends SettingsConverter<
     }
 
     if (
-      backendSettings.hasOwnProperty('singleSelectionHeaders') &&
-      typeof backendSettings.singleSelectionHeaders === 'object'
+      Array.isArray(backendSettings.singleSelectionHeaders) &&
+      // If the settings stored in the backend are invalid, reset back to default.
+      backendSettings.singleSelectionHeaders[0].name !== undefined
     ) {
       settings.singleSelectionHeaders = backendSettings.singleSelectionHeaders;
     }
 
     if (
-      backendSettings.hasOwnProperty('rangeSelectionHeaders') &&
-      typeof backendSettings.rangeSelectionHeaders === 'object'
+      Array.isArray(backendSettings.rangeSelectionHeaders) &&
+      // If the settings stored in the backend are invalid, reset back to default.
+      backendSettings.rangeSelectionHeaders[0].name !== undefined
     ) {
       settings.rangeSelectionHeaders = backendSettings.rangeSelectionHeaders;
     }

tensorboard/webapp/persistent_settings/_data_source/persistent_settings_data_source_test.ts

@@ -261,6 +261,48 @@ describe('persistent_settings data_source test', () => {
           ],
         });
       });
+
+      it('resets singleSelectionEnabled if old ColumnHeader is stored', async () => {
+        getItemSpy.withArgs(TEST_ONLY.GLOBAL_LOCAL_STORAGE_KEY).and.returnValue(
+          JSON.stringify({
+            singleSelectionHeaders: [
+              {
+                type: ColumnHeaderType.RUN,
+                enabled: true,
+              },
+              {
+                type: ColumnHeaderType.VALUE,
+                enabled: false,
+              },
+            ],
+          })
+        );
+
+        const actual = await firstValueFrom(dataSource.getSettings());
+
+        expect(actual).toEqual({});
+      });
+
+      it('resets rangeSelectionEnabled if old ColumnHeader is stored', async () => {
+        getItemSpy.withArgs(TEST_ONLY.GLOBAL_LOCAL_STORAGE_KEY).and.returnValue(
+          JSON.stringify({
+            rangeSelectionHeaders: [
+              {
+                type: ColumnHeaderType.RUN,
+                enabled: true,
+              },
+              {
+                type: ColumnHeaderType.MIN_VALUE,
+                enabled: true,
+              },
+            ],
+          })
+        );
+
+        const actual = await firstValueFrom(dataSource.getSettings());
+
+        expect(actual).toEqual({});
+      });
     });
 
     describe('#setSettings', () => {