Merge pull request #598 from BloomBooks/BL15372_BookStatsOOM

Add paging to book stats report for avoid memory issues (BL-15372)

Author: hatton

src/components/statistics/BookStatsReport.tsx

@@ -6,10 +6,16 @@ import {
     Grid,
     TableHeaderRow,
     Table,
+    PagingPanel,
 } from "@devexpress/dx-react-grid-material-ui";
-import { SortingState, IntegratedSorting } from "@devexpress/dx-react-grid";
+import {
+    SortingState,
+    IntegratedSorting,
+    PagingState,
+    IntegratedPaging,
+} from "@devexpress/dx-react-grid";
 import { IGridColumn } from "../Grid/GridColumns";
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useMemo } from "react";
 import { IStatsPageProps } from "./StatsInterfaces";
 import { useGetBookStats } from "./useGetBookStats";
 import { useProvideDataForExport } from "../../export/exportData";
@@ -22,21 +28,27 @@ export const BookStatsReport: React.FunctionComponent<IStatsPageProps> = (
     props
 ) => {
     const l10n = useIntl();
-    const stats = useGetBookStats(props);
-    useProvideDataForExport(stats, props);
+    const rawStats = useGetBookStats(props);
     const { languagesByBookCount: languages } = useContext(CachedTablesContext);
 
-    if (stats) {
-        for (const stat of stats) {
+    const stats = useMemo(() => {
+        if (!rawStats) return undefined;
+
+        // Create a new array to avoid mutating the original
+        return rawStats.map((stat) => {
             const languageDisplayName = getDisplayNamesFromLanguageCode(
                 stat.language,
                 languages
             )?.combined;
+
             if (languageDisplayName) {
-                stat.languageName = languageDisplayName;
+                return { ...stat, languageName: languageDisplayName };
             }
-        }
-    }
+            return stat;
+        });
+    }, [rawStats, languages]);
+
+    useProvideDataForExport(stats, props);
 
     const columns: IGridColumn[] = [
         { name: "title", title: "Book Title", l10nId: "bookTitle" },
@@ -132,6 +144,11 @@ export const BookStatsReport: React.FunctionComponent<IStatsPageProps> = (
         { columnName: "startedCount" },
     ]);
 
+    // Configure paging with 1000 records per page
+    const [currentPage, setCurrentPage] = useState(0);
+    const [pageSize, setPageSize] = useState(1000);
+    const pageSizes = [100, 500, 1000, 2000];
+
     return (
         <StatsGridWrapper stats={stats}>
             <Grid rows={stats!} columns={columns}>
@@ -141,6 +158,13 @@ export const BookStatsReport: React.FunctionComponent<IStatsPageProps> = (
                 <IntegratedSorting
                     columnExtensions={integratedSortingColumnExtensions}
                 />
+                <PagingState
+                    currentPage={currentPage}
+                    onCurrentPageChange={setCurrentPage}
+                    pageSize={pageSize}
+                    onPageSizeChange={setPageSize}
+                />
+                <IntegratedPaging />
                 <Table
                     columnExtensions={tableColumnExtensions}
                     //cellComponent={CustomTableCell}
@@ -149,6 +173,7 @@ export const BookStatsReport: React.FunctionComponent<IStatsPageProps> = (
                     cellComponent={CustomTableHeaderCell}
                     showSortingControls
                 />
+                <PagingPanel pageSizes={pageSizes} />
             </Grid>
         </StatsGridWrapper>
     );

src/components/statistics/useGetBookStats.ts

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { IStatsPageProps, IBookStat } from "./StatsInterfaces";
 import {
     useCollectionStats,
@@ -9,21 +10,27 @@ export function useGetBookStats(
 ): IBookStat[] | undefined {
     const { response } = useCollectionStats(props, "reading/per-book");
 
-    if (response && response["data"] && response["data"]["stats"])
-        return response["data"]["stats"].map((s: any) => {
-            return extractBookStatFromRawData(s);
-        });
-    return undefined;
+    return useMemo(() => {
+        if (response && response["data"] && response["data"]["stats"]) {
+            return response["data"]["stats"].map((s: any) => {
+                return extractBookStatFromRawData(s);
+            });
+        }
+        return undefined;
+    }, [response]);
 }
 
 export function useGetBookComprehensionEventStats(
     props: IStatsPageProps
 ): IBookStat[] | undefined {
     const { response } = useCollectionStats(props, "reading/per-book");
 
-    if (response && response["data"] && response["data"]["stats"])
-        return response["data"]["stats"].map((s: any) => {
-            return extractBookStatFromRawData(s);
-        });
-    return undefined;
+    return useMemo(() => {
+        if (response && response["data"] && response["data"]["stats"]) {
+            return response["data"]["stats"].map((s: any) => {
+                return extractBookStatFromRawData(s);
+            });
+        }
+        return undefined;
+    }, [response]);
 }

src/components/statistics/useGetDailyBookEventStats.ts

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import {
     IStatsPageProps,
     IDailyBookStat as IDailyBookEventStat,
@@ -9,17 +10,20 @@ export function useGetDailyBookEventStats(
 ): IDailyBookEventStat[] | undefined {
     const { response } = useCollectionStats(props, "reading/per-day");
 
-    if (response && response["data"] && response["data"]["stats"])
-        return response["data"]["stats"].map((s: any) => {
-            return {
-                dateEventLocal: s.datelocal,
-                branding: s.bookbranding,
-                country: s.country,
-                // parseInt is important.
-                // Without it, js will treat the values like a strings even though typescript knows they are numbers.
-                // Then the + operator will concatenate instead of add.
-                bloomReaderSessions: parseInt(s.bloomreadersessions, 10),
-            };
-        });
-    return undefined;
+    return useMemo(() => {
+        if (response && response["data"] && response["data"]["stats"]) {
+            return response["data"]["stats"].map((s: any) => {
+                return {
+                    dateEventLocal: s.datelocal,
+                    branding: s.bookbranding,
+                    country: s.country,
+                    // parseInt is important.
+                    // Without it, js will treat the values like a strings even though typescript knows they are numbers.
+                    // Then the + operator will concatenate instead of add.
+                    bloomReaderSessions: parseInt(s.bloomreadersessions, 10),
+                };
+            });
+        }
+        return undefined;
+    }, [response]);
 }

src/components/statistics/useGetOverviewStats.ts

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { IStatsPageProps, IOverviewStats } from "./StatsInterfaces";
 import { useCollectionStats } from "../../connection/LibraryQueryHooks";
 
@@ -6,7 +7,11 @@ export function useGetOverviewStats(
 ): IOverviewStats | undefined {
     const { response } = useCollectionStats(props, "reading/overview");
 
-    if (response && response["data"] && response["data"]["stats"]) {
+    return useMemo(() => {
+        if (!(response && response["data"] && response["data"]["stats"])) {
+            return undefined;
+        }
+
         const stats = response["data"]["stats"][0];
 
         if (!stats) {
@@ -59,6 +64,5 @@ export function useGetOverviewStats(
             countries: parseInt(stats.countrycount, 10),
         };
         return result;
-    }
-    return undefined;
+    }, [response]);
 }