remove non-functional page size selector from RAI Vision dashboard table view (#2370)

libs/e2e/src/lib/describer/modelAssessment/visionDataExplorer/describeVisionDataExplorer.ts

@@ -52,6 +52,7 @@ export function describeVisionDataExplorer(
         ensureAllVisionDataExplorerTableViewElementsAfterSelectionArePresent();
         ensureAllVisionDataExplorerImageExplorerViewElementsBeforeSelectionAreNotPresent();
         ensureAllVisionDataExplorerClassViewElementsBeforeSelectionAreNotPresent();
+        cy.get(Locators.VisionDataExplorerPageSizeSelector).should("not.exist");
       });
 
       it("should show Class view components when selected", () => {

libs/e2e/src/lib/describer/modelAssessment/visionDataExplorer/ensureAllVisionDataExplorerTableViewElementsAfterSelectionArePresent.ts

@@ -12,6 +12,4 @@ export function ensureAllVisionDataExplorerTableViewElementsAfterSelectionArePre
     "exist"
   );
   cy.get(Locators.VisionDataExplorerTabsViewSaveCohortButton).should("exist");
-
-  cy.get(Locators.VisionDataExplorerPageSizeSelector).should("exist");
 }

libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/PageSizeSelectors.tsx

@@ -5,27 +5,14 @@ import { Stack, Dropdown, IDropdownOption, Text } from "@fluentui/react";
 import { localization } from "@responsible-ai/localization";
 import React from "react";
 
-import { VisionDatasetExplorerTabOptions } from "../VisionExplanationDashboardHelper";
-
 export interface IPageSizeSelectorsProps {
   selectedKey: string;
   onNumRowsSelect?: (
     _event: React.FormEvent<HTMLDivElement>,
     item: IDropdownOption | undefined
   ) => void;
-  onPageSizeSelect: (
-    _event: React.FormEvent<HTMLDivElement>,
-    item: IDropdownOption | undefined
-  ) => void;
 }
 
-const PageSizeOptions: IDropdownOption[] = [
-  { key: "s", text: "10" },
-  { key: "m", text: "25" },
-  { key: "l", text: "50" },
-  { key: "xl", text: "100" }
-];
-
 const NumRowsOptions: IDropdownOption[] = [
   { key: "1", text: "1" },
   { key: "2", text: "2" },
@@ -48,28 +35,14 @@ export class PageSizeSelectors extends React.Component<IPageSizeSelectorsProps>
         id="pageSizeSelector"
       >
         <Stack.Item>
-          <Text>
-            {this.props.selectedKey ===
-            VisionDatasetExplorerTabOptions.TableView
-              ? localization.InterpretVision.Dashboard.pageSize
-              : localization.InterpretVision.Dashboard.rows}
-          </Text>
+          <Text>{localization.InterpretVision.Dashboard.rows}</Text>
         </Stack.Item>
         <Stack.Item>
-          {this.props.selectedKey ===
-          VisionDatasetExplorerTabOptions.TableView ? (
-            <Dropdown
-              defaultSelectedKey="s"
-              options={PageSizeOptions}
-              onChange={this.props.onPageSizeSelect}
-            />
-          ) : (
-            <Dropdown
-              defaultSelectedKey="3"
-              options={NumRowsOptions}
-              onChange={this.props.onNumRowsSelect}
-            />
-          )}
+          <Dropdown
+            defaultSelectedKey="3"
+            options={NumRowsOptions}
+            onChange={this.props.onNumRowsSelect}
+          />
         </Stack.Item>
       </Stack>
     );

libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/TableListHelper.ts

@@ -12,7 +12,6 @@ export interface ITableListProps extends ISearchable {
   successInstances: IVisionListItem[];
   imageDim: number;
   otherMetadataFieldNames: string[];
-  pageSize: number;
   selectItem: (item: IVisionListItem) => void;
   updateSelectedIndices: (indices: number[]) => void;
   taskType: string;

libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/TabsView.tsx

@@ -27,7 +27,6 @@ export interface ITabsViewProps {
   imageDim: number;
   numRows: number;
   otherMetadataFieldNames: string[];
-  pageSize: number;
   searchValue: string;
   selectedItem: IVisionListItem | undefined;
   selectedKey: string;
@@ -96,7 +95,6 @@ export class TabsView extends React.Component<ITabsViewProps, ITabViewState> {
               otherMetadataFieldNames={this.props.otherMetadataFieldNames}
               searchValue={this.props.searchValue}
               selectItem={this.props.onItemSelect}
-              pageSize={this.props.pageSize}
               updateSelectedIndices={this.props.updateSelectedIndices}
               taskType={this.props.taskType}
             />

libs/interpret-vision/src/lib/VisionExplanationDashboard/Interfaces/IVisionExplanationDashboardState.ts

@@ -11,7 +11,6 @@ export interface IVisionExplanationDashboardState {
   loadingExplanation: boolean[][];
   otherMetadataFieldNames: string[];
   numRows: number;
-  pageSize: number;
   panelOpen: boolean;
   searchValue: string;
   selectedIndices: number[];

libs/interpret-vision/src/lib/VisionExplanationDashboard/VisionExplanationDashboard.tsx

@@ -83,7 +83,6 @@ export class VisionExplanationDashboard extends React.Component<
             imageDim={this.state.imageDim}
             numRows={this.state.numRows}
             otherMetadataFieldNames={this.state.otherMetadataFieldNames}
-            pageSize={this.state.pageSize}
             searchValue={this.state.searchValue}
             selectedItem={this.state.selectedItem}
             selectedKey={this.state.selectedKey}
@@ -221,12 +220,6 @@ export class VisionExplanationDashboard extends React.Component<
   ): void => {
     this.setState({ numRows: Number(item?.text) });
   };
-  public onPageSizeSelect = (
-    _event: React.FormEvent<HTMLDivElement>,
-    item: IDropdownOption | undefined
-  ): void => {
-    this.setState({ pageSize: Number(item?.text) });
-  };
   public handleLinkClick = (item?: PivotItem): void => {
     if (item && item.props.itemKey !== undefined) {
       this.setState({ selectedKey: item.props.itemKey });

libs/interpret-vision/src/lib/VisionExplanationDashboard/VisionExplanationDashboardCommon.tsx

@@ -81,13 +81,12 @@ export class VisionExplanationDashboardCommon extends React.Component<
                 }
               />
             </Stack.Item>
-            {this.props.thisdashboard.state.selectedKey !==
-              VisionDatasetExplorerTabOptions.ImageExplorerView && (
+            {this.props.thisdashboard.state.selectedKey ===
+              VisionDatasetExplorerTabOptions.ClassView && (
               <Stack.Item>
                 <PageSizeSelectors
                   selectedKey={this.props.thisdashboard.state.selectedKey}
                   onNumRowsSelect={this.props.thisdashboard.onNumRowsSelect}
-                  onPageSizeSelect={this.props.thisdashboard.onPageSizeSelect}
                 />
               </Stack.Item>
             )}

libs/interpret-vision/src/lib/VisionExplanationDashboard/VisionExplanationDashboardHelper.ts

@@ -201,7 +201,6 @@ export const defaultState: IVisionExplanationDashboardState = {
   loadingExplanation: [[]],
   numRows: 3,
   otherMetadataFieldNames: ["mean_pixel_value"],
-  pageSize: 10,
   panelOpen: false,
   searchValue: "",
   selectedIndices: [],