Change how timestamp column is default selected & fix record table test

src/state/slices/tableSlice.test.tsx

@@ -17,9 +17,9 @@ describe('tableSlice', () => {
 
     it('selectColumn adds new columns in the correct order', () => {
       state = ColumnsReducer(state, selectColumn('shotnum'));
-      expect(state.selectedColumnIds).toEqual(['shotnum']);
+      expect(state.selectedColumnIds).toEqual(['timestamp', 'shotnum']);
 
-      state = ColumnsReducer(state, selectColumn('timestamp'));
+      state = ColumnsReducer(state, selectColumn('shotnum'));
       expect(state.selectedColumnIds).toEqual(['timestamp', 'shotnum']);
 
       state = ColumnsReducer(state, selectColumn('activeArea'));
@@ -46,6 +46,14 @@ describe('tableSlice', () => {
         'shotnum',
         'activeExperiment',
       ]);
+
+      // shouldn't be able to deselect timestamp
+      state = ColumnsReducer(state, deselectColumn('timestamp'));
+      expect(state.selectedColumnIds).toEqual([
+        'timestamp',
+        'shotnum',
+        'activeExperiment',
+      ]);
     });
 
     it('should reorder columns correctly when reorderColumns action is sent', () => {

src/state/slices/tableSlice.tsx

@@ -31,7 +31,8 @@ interface TableState {
 // Define the initial state using that type
 export const initialState: TableState = {
   columnStates: {},
-  selectedColumnIds: [],
+  // Ensure the timestamp column is opened automatically on table load
+  selectedColumnIds: [timeChannelName],
   page: 0,
   resultsPerPage: resultsPerPage,
   sort: {},
@@ -48,20 +49,23 @@ export const tableSlice = createSlice({
     },
     // Use the PayloadAction type to declare the contents of `action.payload`
     selectColumn: (state, action: PayloadAction<string>) => {
-      // if it's the timestamp column, add to the beginning of the array
-      if (action.payload === timeChannelName) {
-        state.selectedColumnIds.unshift(action.payload);
-      } else {
+      if (!state.selectedColumnIds.includes(action.payload)) {
         state.selectedColumnIds.push(action.payload);
       }
     },
     deselectColumn: (state, action: PayloadAction<string>) => {
-      delete state.sort[action.payload];
+      if (action.payload === timeChannelName) {
+        // don't allow time column to be deselected (should be prevented by other
+        // code as well - just might as well do it here too)
+        return;
+      } else {
+        delete state.sort[action.payload];
 
-      const newSelectedColumnsIds = state.selectedColumnIds.filter(
-        (colId) => colId !== action.payload
-      );
-      state.selectedColumnIds = newSelectedColumnsIds;
+        const newSelectedColumnsIds = state.selectedColumnIds.filter(
+          (colId) => colId !== action.payload
+        );
+        state.selectedColumnIds = newSelectedColumnsIds;
+      }
     },
     reorderColumn: (state, action: PayloadAction<DropResult>) => {
       const result = action.payload;

src/views/recordTable.component.test.tsx

@@ -172,7 +172,11 @@ describe('Record Table', () => {
     });
 
     let columns = screen.getAllByRole('columnheader');
-    expect(columns.length).toEqual(4);
+
+    await waitFor(() => {
+      columns = screen.getAllByRole('columnheader');
+      expect(columns.length).toEqual(4);
+    });
     expect(columns[0]).toHaveTextContent('Time');
     expect(columns[1]).toHaveTextContent('Shot Number');
     expect(columns[2]).toHaveTextContent('Active Area');
@@ -183,8 +187,10 @@ describe('Record Table', () => {
       store.dispatch(deselectColumn('activeArea'));
     });
 
-    columns = screen.getAllByRole('columnheader');
-    expect(columns.length).toEqual(3);
+    await waitFor(() => {
+      columns = screen.getAllByRole('columnheader');
+      expect(columns.length).toEqual(3);
+    });
     expect(columns[0]).toHaveTextContent('Time');
     expect(columns[1]).toHaveTextContent('Shot Number');
     expect(columns[2]).toHaveTextContent('Active Experiment');
@@ -194,8 +200,10 @@ describe('Record Table', () => {
     });
 
     // Should expect the column previously in the middle to now be on the end
-    columns = screen.getAllByRole('columnheader');
-    expect(columns.length).toEqual(4);
+    await waitFor(() => {
+      columns = screen.getAllByRole('columnheader');
+      expect(columns.length).toEqual(4);
+    });
     expect(columns[0]).toHaveTextContent('Time');
     expect(columns[1]).toHaveTextContent('Shot Number');
     expect(columns[2]).toHaveTextContent('Active Experiment');
@@ -270,9 +278,11 @@ describe('Record Table', () => {
     });
 
     await user.click(
-      screen.getAllByAltText('Channel_CDEFG waveform', {
-        exact: false,
-      })[0]
+      (
+        await screen.findAllByAltText('Channel_CDEFG waveform', {
+          exact: false,
+        })
+      )[0]
     );
 
     expect(store.getState().windows).toEqual({

src/views/recordTable.component.tsx

@@ -11,14 +11,13 @@ import {
   selectSelectedIds,
   deselectColumn,
   reorderColumn,
-  selectColumn,
   toggleWordWrap,
 } from '../state/slices/tableSlice';
 import { selectQueryParams } from '../state/slices/searchSlice';
 import { selectAppliedFilters } from '../state/slices/filterSlice';
 import { useAvailableColumns } from '../api/channels';
 import { DropResult } from 'react-beautiful-dnd';
-import { Order, timeChannelName } from '../app.types';
+import { Order } from '../app.types';
 import type { Token } from '../filtering/filterParser';
 
 export const extractChannelsFromTokens = (
@@ -118,13 +117,6 @@ const RecordTable = React.memo(
       return extractChannelsFromTokens(appliedFilters);
     }, [appliedFilters]);
 
-    // Ensure the timestamp column is opened automatically on table load
-    React.useEffect(() => {
-      if (!dataLoading && !columnOrder.includes(timeChannelName)) {
-        dispatch(selectColumn(timeChannelName));
-      }
-    }, [dataLoading, columnOrder, dispatch]);
-
     return (
       <Table
         tableHeight={tableHeight}