Data Table: Add delete column button on data table (#6410)

Add ability to remove column directly from data table rather than navigating to settings panel to remove.

Author: bhuang1323

tensorboard/webapp/metrics/actions/index.ts

@@ -240,7 +240,7 @@ export const dataTableColumnEdited = createAction(
 );
 
 export const dataTableColumnToggled = createAction(
-  '[Metrics] Data table column toggled in edit menu',
+  '[Metrics] Data table column toggled in edit menu or delete button clicked',
   props<HeaderToggleInfo>()
 );
 

tensorboard/webapp/metrics/internal_types.ts

@@ -100,8 +100,9 @@ export interface HeaderEditInfo {
 }
 
 export interface HeaderToggleInfo {
-  dataTableMode: DataTableMode;
   headerType: ColumnHeaderType;
+  cardId?: CardId;
+  dataTableMode?: DataTableMode;
 }
 
 export const SCALARS_SMOOTHING_MIN = 0;

tensorboard/webapp/metrics/store/metrics_reducers.ts

@@ -55,6 +55,7 @@ import {
   buildOrReturnStateWithPinnedCopy,
   buildOrReturnStateWithUnresolvedImportedPins,
   canCreateNewPins,
+  cardRangeSelectionEnabled,
   createPluginDataWithLoadable,
   createRunToLoadState,
   generateNextCardStepIndex,
@@ -1372,46 +1373,58 @@ const reducer = createReducer(
       singleSelectionHeaders: enabledNewHeaders.concat(disabledNewHeaders),
     };
   }),
-  on(actions.dataTableColumnToggled, (state, {dataTableMode, headerType}) => {
-    const targetedHeaders =
-      dataTableMode === DataTableMode.RANGE
+  on(
+    actions.dataTableColumnToggled,
+    (state, {dataTableMode, headerType, cardId}) => {
+      const {cardStateMap, rangeSelectionEnabled, linkedTimeEnabled} = state;
+      const rangeEnabled = cardId
+        ? cardRangeSelectionEnabled(
+            cardStateMap,
+            rangeSelectionEnabled,
+            linkedTimeEnabled,
+            cardId
+          )
+        : dataTableMode === DataTableMode.RANGE;
+
+      const targetedHeaders = rangeEnabled
         ? state.rangeSelectionHeaders
         : state.singleSelectionHeaders;
 
-    const currentToggledHeaderIndex = targetedHeaders.findIndex(
-      (element) => element.type === headerType
-    );
+      const currentToggledHeaderIndex = targetedHeaders.findIndex(
+        (element) => element.type === headerType
+      );
 
-    // If the header is being enabled it goes at the bottom of the currently
-    // enabled headers. If it is being disabled it goes to the top of the
-    // currently disabled headers.
-    let newToggledHeaderIndex = getEnabledCount(targetedHeaders);
-    if (targetedHeaders[currentToggledHeaderIndex].enabled) {
-      newToggledHeaderIndex--;
-    }
-    const newHeaders = moveHeader(
-      currentToggledHeaderIndex,
-      newToggledHeaderIndex,
-      targetedHeaders
-    );
+      // If the header is being enabled it goes at the bottom of the currently
+      // enabled headers. If it is being disabled it goes to the top of the
+      // currently disabled headers.
+      let newToggledHeaderIndex = getEnabledCount(targetedHeaders);
+      if (targetedHeaders[currentToggledHeaderIndex].enabled) {
+        newToggledHeaderIndex--;
+      }
+      const newHeaders = moveHeader(
+        currentToggledHeaderIndex,
+        newToggledHeaderIndex,
+        targetedHeaders
+      );
 
-    newHeaders[newToggledHeaderIndex] = {
-      ...newHeaders[newToggledHeaderIndex],
-      enabled: !newHeaders[newToggledHeaderIndex].enabled,
-    };
+      newHeaders[newToggledHeaderIndex] = {
+        ...newHeaders[newToggledHeaderIndex],
+        enabled: !newHeaders[newToggledHeaderIndex].enabled,
+      };
+
+      if (rangeEnabled) {
+        return {
+          ...state,
+          rangeSelectionHeaders: newHeaders,
+        };
+      }
 
-    if (dataTableMode === DataTableMode.RANGE) {
       return {
         ...state,
-        rangeSelectionHeaders: newHeaders,
+        singleSelectionHeaders: newHeaders,
       };
     }
-
-    return {
-      ...state,
-      singleSelectionHeaders: newHeaders,
-    };
-  }),
+  ),
   on(actions.metricsToggleVisiblePlugin, (state, {plugin}) => {
     let nextFilteredPluginTypes = new Set(state.filteredPluginTypes);
     if (nextFilteredPluginTypes.has(plugin)) {