block empty cohort creation in RAI Dashboard (#1335)

microsoft · Apr 12, 2022 · f7d75d3 · f7d75d3
1 parent aa18d00
commit f7d75d3
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 4 deletions.
diff --git a/apps/dashboard-e2e/src/describer/interpret/cohort/describeCreateCohort.ts b/apps/dashboard-e2e/src/describer/interpret/cohort/describeCreateCohort.ts
@@ -10,6 +10,10 @@ export function describeCreateCohort(dataShape: IInterpretData): void {
       .get('#cohortEditPanel span:contains("No filters")')
       .should("exist");
   });
+  it("should have save and save and switch buttons disabled by default", () => {
+    cy.get('button:contains("Save")').should("be.disabled");
+    cy.get('button:contains("Save and switch")').should("be.disabled");
+  });
   it("should able to add filter", () => {
     cy.get("#cohortEditPanel input:eq(0)").clear().type("CohortCreateE2E");
     cy.get('#cohortEditPanel [type="radio"]').first().check();
@@ -55,6 +59,17 @@ export function describeCreateCohort(dataShape: IInterpretData): void {
     cy.get('button:contains("Save and switch")').click();
     cy.get("#cohortEditPanel").should("exist");
   });
+  it("should not allow creating empty cohort", () => {
+    cy.get("#cohortEditPanel input:eq(0)").clear().type("CohortCreateE2E");
+    cy.get('#cohortEditPanel [type="radio"]').first().check();
+    cy.get("#cohortEditPanel input[class^='ms-spinButton-input']")
+      .clear()
+      .type("0");
+    cy.get('button:contains("Add filter")').click();
+    cy.get('button:contains("Save and switch")').click();
+    cy.get(".emptyCohortDialog button").click();
+    cy.get("#removeFilterBtn-2").click();
+  });
   it("should create New cohort", () => {
     cy.get("#cohortEditPanel input:eq(0)").clear().type("CohortCreateE2E");
     cy.get('#cohortEditPanel [type="radio"]').first().check();

diff --git a/apps/widget-e2e/src/describer/modelAssessment/Constants.ts b/apps/widget-e2e/src/describer/modelAssessment/Constants.ts
@@ -4,6 +4,7 @@
 export enum Locators {
   SelectButton = "button:contains('Select')",
   CancelButton = "button:contains('Cancel')",
+  YesButton = "button:contains('Yes')",
   SaveAsNewCohortButton = "button:contains('Save as a new cohort')",
   ClearSelectionButton = "button:contains('Clear selection')",
   IFIPredictionSpan = "span[class^='headerCount']", // IFI - Individual feature importance
@@ -33,7 +34,9 @@ export enum Locators {
   CohortDatasetValueInput = "#cohortEditPanel input[class^='ms-spinButton-input']",
   CohortFilterSelection = "#cohortEditPanel [type='radio']",
   CohortAddFilterButton = "button:contains('Add filter')",
+  CohortSaveButton = "button:contains('Save')",
   CohortSaveAndSwitchButton = "button:contains('Save and switch')",
+  CohortEmptyDialogCloseButton = ".emptyCohortDialog button",
   NewCohortSpan = "span:contains('CohortCreateE2E')",
   WICDatapointDropbox = "#IndividualFeatureContainer div[class^='ms-Stack legendAndText'] div[class^='ms-ComboBox-container']",
   WICLocalImportanceDescription = "#LocalImportanceDescription",

diff --git a/apps/widget-e2e/src/describer/modelAssessment/dataExplorer/describeCohortFunctionality.ts b/apps/widget-e2e/src/describer/modelAssessment/dataExplorer/describeCohortFunctionality.ts
@@ -15,6 +15,23 @@ export function describeCohortFunctionality(
         dataShape.cohortDefaultName
       );
     });
+    it("should have save and save and switch buttons disabled by default", () => {
+      cy.get(Locators.CreateNewCohortButton).click();
+      cy.get(Locators.CohortSaveButton).should("be.disabled");
+      cy.get(Locators.CohortSaveAndSwitchButton).should("be.disabled");
+      cy.get(Locators.CancelButton).click();
+      cy.get(Locators.YesButton).click();
+    });
+    it("should not allow creating empty cohort", () => {
+      cy.get(Locators.CreateNewCohortButton).click();
+      cy.get(Locators.CohortFilterSelection).first().check();
+      cy.get(Locators.CohortDatasetValueInput).clear().type("0");
+      cy.get(Locators.CohortAddFilterButton).click();
+      cy.get(Locators.CohortSaveAndSwitchButton).click();
+      cy.get(Locators.CohortEmptyDialogCloseButton).click();
+      cy.get(Locators.CancelButton).click();
+      cy.get(Locators.YesButton).click();
+    });
     it("Should update dataset selection with new cohort when a new cohort is created", () => {
       cy.get(Locators.CreateNewCohortButton).click();
       cy.get("#cohortEditPanel").should("exist");

diff --git a/libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortEditor.tsx b/libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortEditor.tsx
@@ -31,6 +31,7 @@ import { Cohort } from "../Cohort";
 import { cohortEditorStyles } from "./CohortEditor.styles";
 import { CohortEditorFilter } from "./CohortEditorFilter";
 import { CohortEditorFilterList } from "./CohortEditorFilterList";
+import { EmptyCohortDialog } from "./EmptyCohortDialog";
 
 export interface ICohortEditorProps {
   jointDataset: JointDataset;
@@ -55,6 +56,7 @@ export interface ICohortEditorState {
   cohortName?: string;
   selectedFilterCategory?: string;
   showConfirmation: boolean;
+  showEmptyCohortError: boolean;
 }
 
 export class CohortEditor extends React.PureComponent<
@@ -94,7 +96,8 @@ export class CohortEditor extends React.PureComponent<
       filters: this.props.filterList || [],
       openedFilter: undefined,
       selectedFilterCategory: undefined,
-      showConfirmation: false
+      showConfirmation: false,
+      showEmptyCohortError: false
     };
     this._isInitialized = true;
   }
@@ -178,6 +181,7 @@ export class CohortEditor extends React.PureComponent<
           </Stack>
         </Panel>
         {this.renderCancelDialog()}
+        {this.renderEmptyCohortDialog()}
       </>
     );
   }
@@ -196,13 +200,13 @@ export class CohortEditor extends React.PureComponent<
         )}
         <PrimaryButton
           onClick={() => this.saveCohort()}
-          disabled={this.isDuplicate()}
+          disabled={this.isSaveDisabled()}
         >
           {localization.Interpret.CohortEditor.save}
         </PrimaryButton>
         <DefaultButton
           onClick={() => this.saveCohort(true)}
-          disabled={this.isDuplicate()}
+          disabled={this.isSaveDisabled()}
         >
           {localization.Interpret.CohortEditor.saveAndSwitch}
         </DefaultButton>
@@ -233,6 +237,20 @@ export class CohortEditor extends React.PureComponent<
     );
   };
 
+  private readonly renderEmptyCohortDialog = (): React.ReactNode => {
+    if (!this.state.showEmptyCohortError) {
+      return undefined;
+    }
+    return <EmptyCohortDialog onClose={this.onEmptyCohortClose} />;
+  };
+
+  private isSaveDisabled = (): boolean => {
+    return (
+      this.isDuplicate() ||
+      (!this.state.compositeFilters?.length && !this.state.filters?.length)
+    );
+  };
+
   private isDuplicate = (): boolean => {
     return !!(
       this.props.isNewCohort &&
@@ -267,6 +285,10 @@ export class CohortEditor extends React.PureComponent<
     this.setState({ showConfirmation: false });
   };
 
+  private readonly onEmptyCohortClose = (): void => {
+    this.setState({ showEmptyCohortError: false });
+  };
+
   private readonly setAsCategorical = (
     _ev?: React.FormEvent,
     checked?: boolean
@@ -513,7 +535,11 @@ export class CohortEditor extends React.PureComponent<
         this.state.filters,
         this.state.compositeFilters
       );
-      this.props.onSave(newCohort, switchNew);
+      if (newCohort.filteredData.length === 0) {
+        this.setState({ showEmptyCohortError: true });
+      } else {
+        this.props.onSave(newCohort, switchNew);
+      }
     }
   };
 

diff --git a/libs/core-ui/src/lib/Cohort/ManualCohortManagement/EmptyCohortDialog.tsx b/libs/core-ui/src/lib/Cohort/ManualCohortManagement/EmptyCohortDialog.tsx
@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { localization } from "@responsible-ai/localization";
+import { Dialog, DialogType } from "office-ui-fabric-react";
+import React from "react";
+
+export interface IEmptyCohortDialogProps {
+  onClose(): void;
+}
+
+export class EmptyCohortDialog extends React.Component<IEmptyCohortDialogProps> {
+  public render(): React.ReactNode {
+    const dialogContentProps = {
+      className: "emptyCohortDialog",
+      subText: localization.Core.EmptyCohortDialog.subText,
+      title: localization.Core.EmptyCohortDialog.title,
+      type: DialogType.normal
+    };
+    const modalProps = {
+      isBlocking: true
+    };
+    return (
+      <Dialog
+        maxWidth={"480px"}
+        minWidth={"480px"}
+        hidden={false}
+        dialogContentProps={dialogContentProps}
+        modalProps={modalProps}
+        onDismiss={() => this.props.onClose()}
+      />
+    );
+  }
+}
diff --git a/libs/localization/src/lib/en.json b/libs/localization/src/lib/en.json
@@ -88,6 +88,10 @@
     "PreBuiltCohort": {
       "featureNameNotFound": "Feature name not found in the dataset",
       "notACategoricalFeature": "Feature is not categorical"
+    },
+    "EmptyCohortDialog": {
+      "title": "Dataset cohort contains no datapoints",
+      "subText": "It seems your dataset cohort contains no datapoints, adjust your filters to include at least one datapoint in your dataset cohort before saving."
     }
   },
   "Counterfactuals": {