[ML] Anomaly swim lane: Fix disappearing rows per page button (#194531)

## Summary

Fix for: [#194027](#194027).
Fixed issue with disappearing `rows per page` button.
Enhanced the logic to display only relevant pagination options, showing
the first larger option, which works like 'show all'.
* For example, if there are 23 results, the available `rows per page`
options will be: `5,10,20,50`.


https://github.com/user-attachments/assets/29c3f0db-84b8-4a0c-b4b5-a722cfc490c4

x-pack/plugins/ml/public/application/explorer/calculate_row_options.test.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { calculateRowOptions } from './calculate_row_options';
+
+describe('calculateRowOptions', () => {
+  it('should return all options when cardinality is greater than all row options', () => {
+    const rowOptions = [5, 10, 20, 50, 100];
+    const cardinality = 150;
+    expect(calculateRowOptions(rowOptions, cardinality)).toEqual([5, 10, 20, 50, 100]);
+  });
+
+  it('should return options up to and including cardinality', () => {
+    const rowOptions = [5, 10, 20, 50, 100];
+    const cardinality = 30;
+    expect(calculateRowOptions(rowOptions, cardinality)).toEqual([5, 10, 20, 50]);
+  });
+
+  it('should return at least one option even if cardinality is less than all options', () => {
+    const rowOptions = [5, 10, 20, 50, 100];
+    const cardinality = 3;
+    expect(calculateRowOptions(rowOptions, cardinality)).toEqual([5]);
+  });
+
+  it('should handle cardinality of zero', () => {
+    const rowOptions = [5, 10, 20, 50, 100];
+    const cardinality = 0;
+    expect(calculateRowOptions(rowOptions, cardinality)).toEqual([5]);
+  });
+});

x-pack/plugins/ml/public/application/explorer/calculate_row_options.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export const calculateRowOptions = (rowOptions: number[], cardinality: number): number[] => {
+  return rowOptions.reduce((acc, v) => {
+    if (v <= cardinality) {
+      acc.push(v);
+    } else if (acc.length === 0 || acc[acc.length - 1] < cardinality) {
+      acc.push(v);
+    }
+    return acc;
+  }, [] as number[]);
+};

x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx

@@ -254,10 +254,10 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
   const isPaginationVisible =
     (showSwimlane || isLoading) &&
     swimlaneLimit !== undefined &&
-    swimlaneLimit > (perPage ?? 5) &&
-    onPaginationChange &&
-    fromPage &&
-    perPage;
+    swimlaneLimit > 5 &&
+    !!onPaginationChange &&
+    !!fromPage &&
+    !!perPage;
 
   const rowsCount = swimlaneData?.laneLabels?.length ?? 0;
 

x-pack/plugins/ml/public/application/explorer/swimlane_pagination.tsx

@@ -18,6 +18,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
+import { calculateRowOptions } from './calculate_row_options';
 
 interface SwimLanePaginationProps {
   fromPage: number;
@@ -51,25 +52,26 @@ export const SwimLanePagination: FC<SwimLanePaginationProps> = ({
 
   const pageCount = Math.ceil(cardinality / perPage);
 
-  const items = [5, 10, 20, 50, 100].map((v) => {
-    return (
-      <EuiContextMenuItem
-        key={`${v}_rows`}
-        icon={v === perPage ? 'check' : 'empty'}
-        onClick={() => {
-          closePopover();
-          setPerPage(v);
-        }}
-        data-test-subj={`${v} rows`}
-      >
-        <FormattedMessage
-          id="xpack.ml.explorer.swimLaneSelectRowsPerPage"
-          defaultMessage="{rowsCount} rows"
-          values={{ rowsCount: v }}
-        />
-      </EuiContextMenuItem>
-    );
-  });
+  const rowOptions = [5, 10, 20, 50, 100];
+  const items = calculateRowOptions(rowOptions, cardinality);
+
+  const menuItems = items.map((v) => (
+    <EuiContextMenuItem
+      key={`${v}_rows`}
+      icon={v === perPage ? 'check' : 'empty'}
+      onClick={() => {
+        closePopover();
+        setPerPage(v);
+      }}
+      data-test-subj={`${v} rows`}
+    >
+      <FormattedMessage
+        id="xpack.ml.explorer.swimLaneSelectRowsPerPage"
+        defaultMessage="{rowsCount} rows"
+        values={{ rowsCount: v }}
+      />
+    </EuiContextMenuItem>
+  ));
 
   return (
     <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
@@ -97,7 +99,7 @@ export const SwimLanePagination: FC<SwimLanePaginationProps> = ({
           closePopover={closePopover}
           panelPaddingSize="none"
         >
-          <EuiContextMenuPanel items={items} data-test-subj="mlSwimLanePageSizePanel" />
+          <EuiContextMenuPanel items={menuItems} data-test-subj="mlSwimLanePageSizePanel" />
         </EuiPopover>
       </EuiFlexItem>