Restore Minutely Time Granularity

Adds a Minutely time granularity option so that users can view minute by minute events.

Added AccountEventsTable tests.

Fixed typos and updated component data-testid's.

Uncheck and Disable `Show Zero Activity` on Hourly and Minutely granularity due to unneccessarily large break points.

Author: evansmj

apps/frontend/src/components/bookkeeper/AccountEvents/AccountEventsTable/AccountEventsTable.scss

@@ -1,6 +1,6 @@
 @import '../../../../styles/constants.scss';
 
-.table-container {
+.account-events-table-container {
   padding: 0 !important;
   border-radius: 1rem;
   overflow: hidden;
@@ -94,7 +94,7 @@
 }
 
 @include color-mode(dark) {
-  .table-container {
+  .account-events-table-container {
     border: 1px solid $border-color-dark;
     & .expandable-table {
       & tr.expandable-header-row {

apps/frontend/src/components/bookkeeper/AccountEvents/AccountEventsTable/AccountEventsTable.test.tsx

@@ -1,11 +1,101 @@
-import { screen } from '@testing-library/react';
+import { fireEvent, screen, waitFor, within } from '@testing-library/react';
 import { renderWithProviders } from '../../../../utilities/test-utilities/mockStore';
 import { mockBKPRAccountEvents, mockAppStore } from '../../../../utilities/test-utilities/mockData';
 import AccountEventsTable from './AccountEventsTable';
 
-describe.skip('Account Events Table component ', () => {
-  it('should be in the document', async () => {
-    await renderWithProviders(<AccountEventsTable periods={mockBKPRAccountEvents.periods} />, { preloadedState: mockAppStore, initialRoute: ['/bookkeeper/accountevents'] });
-    expect(screen.getByTestId('account-events-table-container')).not.toBeEmptyDOMElement();
+jest.mock('react-perfect-scrollbar', () => ({ children }) => <div>{children}</div>);
+
+describe('Account Events Table component ', () => {
+  beforeEach(() => {
+    global.ResizeObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    }));
+  });
+
+  it('should render the dashboard container', async () => {
+    await renderWithProviders(<AccountEventsTable periods={mockBKPRAccountEvents.periods} />, {
+      preloadedState: mockAppStore,
+      initialRoute: ['/bookkeeper/accountevents'],
+    });
+    expect(await screen.findByTestId('account-events-table-container')).toBeInTheDocument();
+  });
+
+  it('renders AccountEventsTable with correct data', async () => {
+    await renderWithProviders(<AccountEventsTable periods={mockBKPRAccountEvents.periods} />, {
+      preloadedState: mockAppStore,
+      initialRoute: ['/bookkeeper/accountevents'],
+      useRouter: false,
+    });
+
+    expect(screen.getByText('2025-04-20')).toBeInTheDocument();
+    expect(screen.getAllByText('wallet')).toHaveLength(2); //short_channel_id and account
+    expect(screen.getByText('n/a')).toBeInTheDocument();
+  });
+
+  it('should render all periods as expanded by default', async () => {
+    await renderWithProviders(<AccountEventsTable periods={mockBKPRAccountEvents.periods} />, {
+      preloadedState: mockAppStore,
+      initialRoute: ['/bookkeeper/accountevents'],
+      useRouter: false,
+    });
+
+    mockBKPRAccountEvents.periods.forEach(period => {
+      expect(screen.getByText(period.period_key)).toBeInTheDocument();
+      period.accounts.forEach(account => {
+        expect(screen.getByText("Short Channel ID")).toBeInTheDocument();
+        expect(screen.getByText(account.remote_alias)).toBeInTheDocument();
+      });
+    });
+  });
+
+  it('should collapse and expand a row on toggle click', async () => {
+    await renderWithProviders(<AccountEventsTable periods={mockBKPRAccountEvents.periods} />, {
+      preloadedState: mockAppStore,
+      initialRoute: ['/bookkeeper/accountevents'],
+      useRouter: false,
+    });
+
+    const periodKey = mockBKPRAccountEvents.periods[0].period_key;
+
+    const periodRow = screen.getByText(periodKey).closest('tr');
+    expect(periodRow).not.toBeNull();
+    const toggleButton = within(periodRow!).getByRole('button');
+
+    //check that the row is expanded
+    await waitFor(() => {
+      expect(screen.getByText('Short Channel ID')).toBeVisible();
+    });
+
+    //collapse
+    fireEvent.click(toggleButton);
+
+    await waitFor(() => {
+      const content = screen.queryByText('Short Channel ID');
+      expect(content).not.toBeVisible();
+    });
+
+    //expand
+    fireEvent.click(toggleButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('Short Channel ID')).toBeVisible();
+    });
+  });  
+
+  it('should correctly render balance percentage values', async () => {
+    await renderWithProviders(<AccountEventsTable periods={mockBKPRAccountEvents.periods} />, {
+      preloadedState: mockAppStore,
+      initialRoute: ['/bookkeeper/accountevents'],
+      useRouter: false,
+    });
+
+    const { balance_msat } = mockBKPRAccountEvents.periods[0].accounts[0];
+    const { total_balance_across_accounts } = mockBKPRAccountEvents.periods[0];
+    const expectedPercentage =
+      ((balance_msat / total_balance_across_accounts) * 100).toFixed(2) + '%';
+
+    expect(screen.getByText(expectedPercentage)).toBeInTheDocument();
   });
 });

apps/frontend/src/components/bookkeeper/AccountEvents/AccountEventsTable/AccountEventsTable.tsx

@@ -28,7 +28,7 @@ function AccountEventsTable({periods}: {periods: AccountEventsPeriod[]}) {
   };
 
   return (
-    <div className='table-container'>
+    <div className='account-events-table-container' data-testid="account-events-table-container">
       <PerfectScrollbar>
         <Table className='expandable-table'>
           <thead className='expandable-head'>

apps/frontend/src/components/bookkeeper/BkprHome/BkprHome.test.tsx

@@ -30,14 +30,16 @@ describe('Bookkeeper Component', () => {
       preloadedState: mockAppStore,
     });
     expect(screen.getByTestId('account-event-info-container')).toBeInTheDocument();
-    expect(screen.getByTestId('satsflow-volume-container')).toBeInTheDocument();
+    expect(screen.getByTestId('satsflow-info-container')).toBeInTheDocument();
+    expect(screen.getByTestId('volume-info-container')).toBeInTheDocument();
   });
 
   it('should not render overview/cards if path is not /bookkeeper', async () => {
     setMockedLocation({ pathname: '/bookkeeper/satsflow' });
     await renderWithProviders(<Bookkeeper />, { preloadedState: mockAppStore, initialRoute: ['/bookkeeper/satsflow'] });
     expect(screen.queryByTestId('account-event-info-container')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('satsflow-volume-container')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('satsflow-info-container')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('volume-info-container')).not.toBeInTheDocument();
   });
 
   it('should display error message if nodeInfo has error', async () => {

apps/frontend/src/components/bookkeeper/BkprHome/BkprHome.tsx

@@ -39,10 +39,10 @@ const Bookkeeper = () => {
           </Col>
         </Row>
         <Row className='px-3'>
-          <Col xs={12} lg={6} className='cards-container' data-testid='account-event-info-container'>
+          <Col xs={12} lg={6} className='cards-container'>
             <AccountEventsInfo />
           </Col>
-          <Col xs={12} lg={6} className='cards-container d-flex flex-column justify-content-between' data-testid='satsflow-volume-container'>
+          <Col xs={12} lg={6} className='cards-container d-flex flex-column justify-content-between'>
             <SatsFlowInfo />
             <VolumeInfo />
           </Col>

apps/frontend/src/components/bookkeeper/Volume/VolumeRoot.test.tsx

@@ -3,7 +3,7 @@ import { mockAppStore } from '../../../utilities/test-utilities/mockData';
 import { renderWithProviders } from '../../../utilities/test-utilities/mockStore';
 import VolumeRoot from './VolumeRoot';
 
-describe('Sats Flow component ', () => {
+describe('Volume component ', () => {
   beforeEach(() => {
     global.ResizeObserver = jest.fn().mockImplementation(() => ({
       observe: jest.fn(),

apps/frontend/src/components/shared/DataFilterOptions/DataFilterOptions.tsx

@@ -56,6 +56,10 @@ const DataFilterOptions = (props: {filter: string, onShowZeroActivityChange: (sh
   const onTimeGranularityChanged = (eventKey: string | null) => {
     if (eventKey !== null) {
       setTimeGranularity(eventKey as TimeGranularity);
+      if (eventKey === TimeGranularity.MINUTELY || eventKey === TimeGranularity.HOURLY) {
+        setShowZeroActivityPeriods(false);
+        props.onShowZeroActivityChange(false);
+      }
     }
   };
 
@@ -116,6 +120,7 @@ const DataFilterOptions = (props: {filter: string, onShowZeroActivityChange: (sh
           tabIndex={4}
           onChange={showZeroActivityPeriodsChangeHandler}
           checked={showZeroActivityPeriods}
+          disabled={timeGranularity === TimeGranularity.MINUTELY || timeGranularity === TimeGranularity.HOURLY}
           inline
           className="mt-2 fs-base fw-light"
           label="Show Zero Activity"

apps/frontend/src/store/bkprSelectors.tsx

@@ -44,6 +44,16 @@ export const selectAccountEventPeriods = createSelector(
   (events) => events.periods || []
 );
 
+export const selectAccountEventsLoading = createSelector(
+  selectAccountEvents,
+  (accountEvents) => accountEvents.isLoading
+);
+
+export const selectAccountEventsError = createSelector(
+  selectAccountEvents,
+  (accountEvents) => accountEvents.error
+)
+
 export const selectSatsFlow = createSelector(
   selectBKPRState,
   (bkpr) => bkpr.satsFlow

apps/frontend/src/utilities/constants.ts

@@ -135,6 +135,7 @@ export enum PaymentType {
 }
 
 export enum TimeGranularity {
+  MINUTELY = 'Minutely',
   HOURLY = 'Hourly',
   DAILY = 'Daily',
   WEEKLY = 'Weekly',
@@ -147,6 +148,7 @@ const SECONDS_IN_DAY = 86400;
 
 // Pre-calculated durations in seconds
 const GRANULARITY_DURATIONS = {
+  [TimeGranularity.MINUTELY]: 60,
   [TimeGranularity.HOURLY]: 3600,
   [TimeGranularity.DAILY]: SECONDS_IN_DAY,
   [TimeGranularity.WEEKLY]: SECONDS_IN_DAY * 7,
@@ -170,6 +172,8 @@ export function getPeriodKey(timeGranularity: TimeGranularity, timestamp: number
   const date = moment.unix(timestamp);
 
   switch (timeGranularity) {
+    case TimeGranularity.MINUTELY:
+      return date.format('YYYY-MM-DD HH:mm')
     case TimeGranularity.HOURLY:
       return date.format('YYYY-MM-DD HH:00');
     case TimeGranularity.DAILY:
@@ -190,6 +194,10 @@ export function getTimestampFromPeriodKey(timeGranularity: TimeGranularity, peri
   let startOfUnit: moment.unitOfTime.StartOf;
 
   switch (timeGranularity) {
+    case TimeGranularity.MINUTELY:
+      format = 'YYYY-MM-DD HH:mm'
+      startOfUnit = 'minute';
+      break;
     case TimeGranularity.HOURLY:
       format = 'YYYY-MM-DD HH';
       startOfUnit = 'hour';
@@ -239,6 +247,7 @@ export const getTimestampWithGranularity = (
 
 export function getFormatForGranularity(granularity: TimeGranularity): string {
   switch (granularity) {
+    case TimeGranularity.MINUTELY: return 'YYYY-MM-DD HH:mm'
     case TimeGranularity.HOURLY: return 'YYYY-MM-DD HH';
     case TimeGranularity.DAILY: return 'YYYY-MM-DD';
     case TimeGranularity.WEEKLY: return 'YYYY-MM-DD';
@@ -250,6 +259,7 @@ export function getFormatForGranularity(granularity: TimeGranularity): string {
 
 export function getMomentUnit(granularity: TimeGranularity): moment.unitOfTime.DurationConstructor {
   switch (granularity) {
+    case TimeGranularity.MINUTELY: return 'minute'
     case TimeGranularity.HOURLY: return 'hour';
     case TimeGranularity.DAILY: return 'day';
     case TimeGranularity.WEEKLY: return 'week';

apps/frontend/src/utilities/test-utilities/mockStore.tsx

@@ -13,6 +13,7 @@ import { mockAppStore } from './mockData';
 interface ExtendedRenderOptions extends Omit<RenderOptions, 'queries'> {
   preloadedState?: AppState;
   initialRoute?: string[];
+  useRouter?: Boolean
 }
 
 export function createMockStore(route: string, preloadedState?: AppState) {
@@ -68,6 +69,7 @@ export async function renderWithProviders(
   {
     preloadedState,
     initialRoute = ['/'],
+    useRouter = true,
     ...renderOptions
   }: ExtendedRenderOptions = {}
 ) {
@@ -79,14 +81,19 @@ export async function renderWithProviders(
       v7_relativeSplatPath: true,
       v7_normalizeFormMethod: true,
       v7_startTransition: true,
-    } as any
+    } as any,
   });
+
   const Wrapper = ({ children }: PropsWithChildren<{}>) => {
-    return (
-      <Provider store={store}>
-        <RouterProvider router={router} />
-      </Provider>
-    );
+    if (useRouter) {
+      return (
+        <Provider store={store}>
+          <RouterProvider router={router} />
+        </Provider>
+      );
+    }
+
+    return <Provider store={store}>{children}</Provider>;
   };
 
   let result;