Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add warning message in cohort editor for invalid input value; Update 'Shift cohort' to 'Switch cohort' #1339

Merged
merged 5 commits into from
Apr 12, 2022
Merged

Add warning message in cohort editor for invalid input value; Update 'Shift cohort' to 'Switch cohort' #1339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ef3c886
add error message for invalid value
tongyu-microsoft Apr 12, 2022
2cff753
update shift cohort to switch cohort
tongyu-microsoft Apr 12, 2022
cc96e44
Merge branch 'main' into tongy/cohortInput
tongyu-microsoft Apr 12, 2022
b6972ca
merge main
tongyu-microsoft Apr 12, 2022
3eacfa9
Merge branch 'tongy/cohortInput' of https://github.com/microsoft/resp…
tongyu-microsoft Apr 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortEditor.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export interface ICohortEditorStyles {
cohortEditor: IStyle;
saveAndDeleteDiv: IStyle;
clearFilter: IStyle;
invalidValueError: IStyle;
}

export const cohortEditorStyles: () => IProcessedStyleSet<ICohortEditorStyles> =
Expand Down Expand Up @@ -198,6 +199,11 @@ export const cohortEditorStyles: () => IProcessedStyleSet<ICohortEditorStyles> =
textOverflow: "ellipsis",
whiteSpace: "nowrap"
},
invalidValueError: {
color: theme.semanticColors.severeWarningIcon,
fontSize: "12px",
marginTop: "4px"
},
leftHalf: {
height: "344px",
marginLeft: "40px",
Expand Down
26 changes: 25 additions & 1 deletion libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,8 @@ export interface ICohortEditorState {
selectedFilterCategory?: string;
showConfirmation: boolean;
showEmptyCohortError: boolean;
showInvalidMinMaxValueError: boolean;
showInvalidValueError: boolean;
}

export class CohortEditor extends React.PureComponent<
Expand Down Expand Up @@ -97,7 +99,9 @@ export class CohortEditor extends React.PureComponent<
openedFilter: undefined,
selectedFilterCategory: undefined,
showConfirmation: false,
showEmptyCohortError: false
showEmptyCohortError: false,
showInvalidMinMaxValueError: false,
showInvalidValueError: false
};
this._isInitialized = true;
}
Expand Down Expand Up @@ -156,6 +160,10 @@ export class CohortEditor extends React.PureComponent<
setComparison={this.setComparison}
setNumericValue={this.setNumericValue}
setSelectedProperty={this.setSelectedProperty}
showInvalidValueError={this.state.showInvalidValueError}
showInvalidMinMaxValueError={
this.state.showInvalidMinMaxValueError
}
filterIndex={this.state.filterIndex}
/>
)}
Expand Down Expand Up @@ -450,21 +458,37 @@ export class CohortEditor extends React.PureComponent<
numberVal > max ||
numberVal < min
) {
this.setState({
showInvalidMinMaxValueError: false,
showInvalidValueError: true
});
return this.state.openedFilter.arg[index].toString();
}
this.setState({ showInvalidValueError: false });
openArg[index] = numberVal;
} else {
const prevVal = openArg[index];
const newVal = prevVal + delta;
if (newVal > max || newVal < min) {
this.setState({
showInvalidMinMaxValueError: false,
showInvalidValueError: true
});
return prevVal.toString();
}
this.setState({ showInvalidValueError: false });
openArg[index] = newVal;
}

// in the range validation
if (openArg[1] <= openArg[0]) {
openArg[1] = max;
this.setState({
showInvalidMinMaxValueError: true,
showInvalidValueError: false
});
} else {
this.setState({ showInvalidMinMaxValueError: false });
}

this.setState({
Expand Down
26 changes: 25 additions & 1 deletion libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortEditorFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,15 @@ import { FilterMethods, IFilter } from "../../Interfaces/IFilter";
import { FabricStyles } from "../../util/FabricStyles";
import { IJointMeta, JointDataset } from "../../util/JointDataset";

import { cohortEditorStyles } from "./CohortEditor.styles";

export interface ICohortEditorFilterProps {
openedFilter: IFilter;
jointDataset: JointDataset;
filterIndex?: number;
filters: IFilter[];
showInvalidMinMaxValueError: boolean;
showInvalidValueError: boolean;
setSelectedProperty(
ev: React.FormEvent<IComboBox>,
item?: IComboBoxOption
Expand Down Expand Up @@ -99,7 +103,7 @@ export class CohortEditorFilter extends React.Component<ICohortEditorFilterProps
// filterIndex is set when the filter is editing openedFilter and reset to filters.length otherwise
const isEditingFilter =
this.props.filterIndex !== this.props.filters.length;

const styles = cohortEditorStyles();
let minVal, maxVal;
if (selectedMeta.treatAsCategorical || !selectedMeta.featureRange) {
// Numerical values treated as categorical are stored with the values in the column,
Expand Down Expand Up @@ -228,6 +232,17 @@ export class CohortEditorFilter extends React.Component<ICohortEditorFilterProps
this.props.setNumericValue(0, selectedMeta, 1, value);
}}
/>
{this.props.showInvalidMinMaxValueError &&
selectedMeta.featureRange && (
<p className={styles.invalidValueError}>
{localization.formatString(
localization.Interpret.CohortEditor
tongyu-microsoft marked this conversation as resolved.
Show resolved Hide resolved
.minimumGreaterThanMaximum,
selectedMeta.featureRange.min,
selectedMeta.featureRange.max
)}
</p>
)}
</>
) : (
<SpinButton
Expand Down Expand Up @@ -257,6 +272,15 @@ export class CohortEditorFilter extends React.Component<ICohortEditorFilterProps
}}
/>
))}
{this.props.showInvalidValueError && selectedMeta.featureRange && (
<p className={styles.invalidValueError}>
{localization.formatString(
localization.Interpret.CohortEditor.invalidValueError,
selectedMeta.featureRange.min,
selectedMeta.featureRange.max
)}
</p>
)}
</>
)}
<Stack horizontal tokens={{ childrenGap: "l1" }}>
Expand Down
12 changes: 7 additions & 5 deletions libs/localization/src/lib/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@
"Unknown": "unknown"
},
"ShiftCohort": {
tongyu-microsoft marked this conversation as resolved.
Show resolved Hide resolved
"title": "Shift Cohort",
"title": "Switch Cohort",
"subText": "Select a cohort from the cohort list. Apply the cohort to the dashboard."
},
"PreBuiltCohort": {
Expand Down Expand Up @@ -215,7 +215,7 @@
"fullscreen": "Fullscreen",
"heatMap": "Heat map",
"newCohort": "New cohort",
"shiftCohort": "Shift cohort",
"shiftCohort": "Switch cohort",
tongyu-microsoft marked this conversation as resolved.
Show resolved Hide resolved
"treeMap": "Tree map",
"whatIf": "What-If"
},
Expand Down Expand Up @@ -815,6 +815,8 @@
"clearAllFilters": "Clear all filters",
"defaultFilterState": "Select a filter to add parameters to your dataset cohort. Filters from your current viewing cohort are pre-populated.",
"delete": "Delete",
"invalidValueError": "Value should be between {0} and {1}",
"minimumGreaterThanMaximum": "Minimum value inputs must be less than maximum value inputs.",
"noAddedFilters": "No filters",
"placeholderName": "Cohort {0}",
"save": "Save",
Expand Down Expand Up @@ -1267,11 +1269,11 @@
"deleteCohort": "Deleting {0}?",
"deleteConfirm": "Are you sure you want to delete this cohort?",
"selectCohort": "Select a cohort",
"shiftCohort": "Shift cohort",
"shiftCohort": "Switch cohort",
"shiftCohortDescription": "Select a cohort from the cohort list. Apply the cohort to the dashboard."
},
"CohortInformation": {
"ShiftCohort": "Shift cohort",
"ShiftCohort": "Switch cohort",
"NewCohort": "New cohort",
"DataPoints": "Number of datapoints",
"DefaultCohort": " (default)",
Expand Down Expand Up @@ -1318,7 +1320,7 @@
"cohortList": "Cohort list",
"cohortSettings": "Cohort settings",
"createCohort": "Create cohort",
"shiftCohort": "Shift cohort"
"shiftCohort": "Switch cohort"
},
"Navigation": {
"modelStatistics": "Model statistics"
Expand Down