Add "Load More" button for Metrics table in Runs Overview tab (#110)

* Add index/count based fetching for useRunMetricsBatch

* Add quick fix for alignment config error

* Add preliminary infinite scrolling properties

* Add Load More button to Card

* Fix and clean up useRunMetricsBatch hook

* Type annotations and cleanup

* Clean up old changes

* Fix styling and add dynamic metric count to button

* Fix broken test date check

Author: jescalada

src/e2e/Dashboard/DashboardContent.spec.ts

@@ -120,9 +120,14 @@ test.describe('Dashboard', () => {
     const month = date.getUTCMonth() + 1; // getUTCMonth() is zero-based
     const day = date.getUTCDate();
 
-    const expectedText = `datetime(${year},${month},${day})<=run.created_at<datetime(${year},${month},${
-      day + 1
-    })`;
+    const nextDayDate = new Date(date);
+    nextDayDate.setUTCDate(day + 1);
+
+    const nextYear = nextDayDate.getUTCFullYear();
+    const nextMonth = nextDayDate.getUTCMonth() + 1; // getUTCMonth() is zero-based
+    const nextDay = nextDayDate.getUTCDate();
+
+    const expectedText = `datetime(${year},${month},${day})<=run.created_at<datetime(${nextYear},${nextMonth},${nextDay})`;
 
     // Locate and click the current day cell in the heatmap
     const heatmap = await page.$('.CalendarHeatmap');

src/src/components/kit/Card/Card.d.ts

@@ -16,4 +16,7 @@ export interface ICardProps {
     withSearchBar?: boolean;
     calcTableHeight?: boolean;
   };
+  loadMore?: boolean;
+  loadMoreHandler?: () => void;
+  loadMoreText?: string;
 }

src/src/components/kit/Card/Card.scss

@@ -16,6 +16,11 @@
       margin-top: $space-xxxs;
       margin-bottom: $space-xxxs;
     }
+    &__loadMoreButton {
+      margin-top: $space-md;
+      margin-bottom: $space-sm * -1;
+      margin-left: 0;
+    }
   }
   &__tableWrapper {
     height: toRem(356px);

src/src/components/kit/Card/Card.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import { Text } from 'components/kit';
+import { Button, Text } from 'components/kit';
 import DataList from 'components/kit/DataList';
 
 import { ICardProps } from './Card.d';
@@ -29,6 +29,9 @@ function Card({
   className,
   dataListProps,
   children,
+  loadMore,
+  loadMoreHandler,
+  loadMoreText,
 }: ICardProps): React.FunctionComponentElement<React.ReactNode> {
   const tableRef = React.useRef<any>(null);
 
@@ -48,6 +51,18 @@ function Card({
             {subtitle}
           </Text>
         )}
+        {loadMore && loadMoreHandler && (
+          <span>
+            <Button
+              onClick={loadMoreHandler}
+              className='Card__header__loadMoreButton'
+              color='primary'
+              variant='contained'
+            >
+              {loadMoreText || 'Load More'}
+            </Button>
+          </span>
+        )}
       </div>
       {children || (
         <div className='Card__tableWrapper'>

src/src/pages/RunDetail/RunOverviewTab/RunOverviewTab.tsx

@@ -27,10 +27,15 @@ function RunOverviewTab({ runData, runHash }: IRunOverviewTabProps) {
   const overviewSectionRef = React.useRef<HTMLElement | any>(null);
   const overviewSectionContentRef = React.useRef<HTMLElement | any>(null);
   const [containerHeight, setContainerHeight] = React.useState<number>(0);
+  const METRICS_FETCH_COUNT = 500;
+
+  const [startIndex, setStartIndex] = React.useState(0);
 
   useRunMetricsBatch({
     runTraces: runData.runTraces,
     runHash,
+    startIndex,
+    count: METRICS_FETCH_COUNT,
   });
 
   React.useEffect(() => {
@@ -75,6 +80,12 @@ function RunOverviewTab({ runData, runHash }: IRunOverviewTabProps) {
     sidebarRef?.current?.scrollTo(0, e.target.scrollTop);
   }
 
+  function fetchMoreMetrics() {
+    if (runData.runMetricsBatch.length > startIndex + 1) {
+      setStartIndex((prevIndex) => prevIndex + METRICS_FETCH_COUNT);
+    }
+  }
+
   return (
     <ErrorBoundary>
       <section
@@ -105,6 +116,8 @@ function RunOverviewTab({ runData, runHash }: IRunOverviewTabProps) {
                     isLoading={runData?.isRunBatchLoading}
                     type='metric'
                     runBatch={cardsData?.runMetricsBatch}
+                    totalMetrics={runData?.runTraces?.metric?.length}
+                    loadMoreHandler={fetchMoreMetrics}
                   />
                 </ErrorBoundary>
               )}

src/src/pages/RunDetail/RunOverviewTab/components/MetricsCard/RunOverviewTabMetricsCard.tsx

@@ -16,10 +16,14 @@ function RunOverviewTabMetricsCard({
   isLoading,
   runBatch,
   type,
+  totalMetrics = 0,
+  loadMoreHandler,
 }: {
   isLoading: boolean;
   runBatch: any;
   type: 'metric' | 'systemMetric';
+  totalMetrics?: number;
+  loadMoreHandler?: () => void;
 }) {
   const tableData = React.useMemo(() => {
     if (runBatch) {
@@ -49,7 +53,7 @@ function RunOverviewTabMetricsCard({
               tint={50}
               className='RunOverviewTab__cardBox__tableTitleCount'
             >
-              ({runBatch?.length})
+              ({totalMetrics})
             </Text>
           </Text>
         ),
@@ -92,7 +96,7 @@ function RunOverviewTabMetricsCard({
         ),
       },
     ],
-    [runBatch],
+    [totalMetrics],
   );
 
   return (
@@ -116,6 +120,9 @@ function RunOverviewTabMetricsCard({
             title: 'No Results',
           },
         }}
+        loadMore={loadMoreHandler && totalMetrics > runBatch?.length}
+        loadMoreHandler={loadMoreHandler}
+        loadMoreText={`Load More (${runBatch?.length}/${totalMetrics})`}
       />
     </ErrorBoundary>
   );

src/src/pages/RunDetail/hooks/useRunMetricsBatch.tsx

@@ -2,20 +2,35 @@ import React from 'react';
 
 import runDetailAppModel from 'services/models/runs/runDetailAppModel';
 
-function useRunMetricsBatch({ runTraces, runHash }: any) {
+function useRunMetricsBatch({
+  runTraces,
+  runHash,
+  startIndex = 0,
+  count = 500, // Error occurs if count is greater than 1000
+}: {
+  runTraces: any;
+  runHash: string;
+  startIndex?: number;
+  count?: number;
+}) {
   React.useEffect(() => {
-    const runsBatchRequestRef = runDetailAppModel.getRunMetricsBatch(
-      runTraces.metric,
-      runHash,
-    );
+    const fetchMetricsBatch = () => {
+      const runsBatchRequestRef = runDetailAppModel.getRunMetricsBatch(
+        startIndex !== undefined && count
+          ? runTraces.metric.slice(startIndex, startIndex + count)
+          : runTraces.metric,
+        runHash,
+      );
 
-    runsBatchRequestRef.call();
+      runsBatchRequestRef.call();
 
-    return () => {
-      runsBatchRequestRef.abort();
+      return () => {
+        runsBatchRequestRef.abort();
+      };
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [runTraces, runHash]);
+
+    fetchMetricsBatch();
+  }, [runTraces, runHash, startIndex, count]);
 }
 
 export default useRunMetricsBatch;