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 a top-level pivot to model overview #1375

Merged
merged 7 commits into from
Apr 28, 2022
Merged

Add a top-level pivot to model overview #1375

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cf3995f
show only disaggregated analysis OR only dataset cohorts
romanlutz Apr 26, 2022
6e85861
lintfix
romanlutz Apr 27, 2022
8218041
Merge branch 'main' into romanlutz/top_level_tabs_model_overview
romanlutz Apr 27, 2022
13f9c75
Merge branch 'main' of https://github.com/microsoft/responsible-ai-to…
romanlutz Apr 27, 2022
620bcf5
basec -> basic typo
romanlutz Apr 27, 2022
bc22458
Merge branch 'romanlutz/top_level_tabs_model_overview' of https://git…
romanlutz Apr 27, 2022
196ae9b
Merge branch 'main' of https://github.com/microsoft/responsible-ai-to…
romanlutz Apr 27, 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
116 changes: 100 additions & 16 deletions ...ment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ChartConfigurationFlyout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,13 @@ import {
import { localization } from "@responsible-ai/localization";
import {
Dropdown,
ChoiceGroup,
Stack,
IDropdownOption,
Panel,
PrimaryButton,
DefaultButton
DefaultButton,
IChoiceGroupOption
} from "office-ui-fabric-react";
import React from "react";

Expand All @@ -28,13 +30,16 @@ interface IChartConfigurationFlyoutProps {
selectedFeatureBasedCohorts?: number[];
updateCohortSelection: (
selectedDatasetCohorts: number[],
selectedFeatureBasedCohorts: number[]
selectedFeatureBasedCohorts: number[],
datasetCohortChartIsSelected: boolean
) => void;
datasetCohortViewIsSelected: boolean;
}

interface IChartConfigurationFlyoutState {
newlySelectedDatasetCohorts: number[];
newlySelectedFeatureBasedCohorts: number[];
datasetCohortViewIsNewlySelected: boolean;
}

const selectAllOptionKey = "selectAll";
Expand All @@ -46,10 +51,13 @@ export class ChartConfigurationFlyout extends React.Component<
public static contextType = ModelAssessmentContext;
public context: React.ContextType<typeof ModelAssessmentContext> =
defaultModelAssessmentContext;
private datasetCohortsChoiceGroupOption = "datasetCohorts";
private featureBasecCohortsChoiceGroupOption = "featureBasedCohorts";

constructor(props: IChartConfigurationFlyoutProps) {
super(props);
this.state = {
datasetCohortViewIsNewlySelected: this.props.datasetCohortViewIsSelected,
newlySelectedDatasetCohorts:
this.props.selectedDatasetCohorts ??
this.props.datasetCohorts.map((_, index) => index),
Expand All @@ -61,17 +69,57 @@ export class ChartConfigurationFlyout extends React.Component<

public componentDidUpdate(prevProps: IChartConfigurationFlyoutProps) {
// reset feature-based cohort selection if the underlying feature-based cohorts changed
if (
let newlySelectedFeatureBasedCohorts =
this.state.newlySelectedFeatureBasedCohorts;
const featureBasedCohortsChanged =
prevProps.featureBasedCohorts.length !==
this.props.featureBasedCohorts.length ||
prevProps.featureBasedCohorts.some(
(errorCohort, index) =>
errorCohort.cohort.name !==
this.props.featureBasedCohorts[index].cohort.name
)
);
const selectedFeatureBasedCohortsChanged =
(prevProps.selectedFeatureBasedCohorts === undefined &&
this.props.selectedFeatureBasedCohorts !== undefined) ||
(prevProps.selectedFeatureBasedCohorts &&
this.props.selectedFeatureBasedCohorts &&
(this.props.selectedFeatureBasedCohorts.length !==
prevProps.selectedFeatureBasedCohorts.length ||
prevProps.selectedFeatureBasedCohorts.some(
(num, index) =>
num !== this.props.selectedFeatureBasedCohorts?.[index]
)));
if (featureBasedCohortsChanged || selectedFeatureBasedCohortsChanged) {
newlySelectedFeatureBasedCohorts = this.props.featureBasedCohorts.map(
(_, index) => index
);
}

let datasetCohortViewIsSelected =
this.state.datasetCohortViewIsNewlySelected;
if (
prevProps.datasetCohortViewIsSelected !==
this.props.datasetCohortViewIsSelected
) {
this.setState({ newlySelectedFeatureBasedCohorts: [] });
datasetCohortViewIsSelected = this.props.datasetCohortViewIsSelected;
}

// update state only if there are changes
if (
this.state.datasetCohortViewIsNewlySelected !==
datasetCohortViewIsSelected ||
this.state.newlySelectedFeatureBasedCohorts.length !==
newlySelectedFeatureBasedCohorts.length ||
this.state.newlySelectedFeatureBasedCohorts.some(
(num, index) => num !== newlySelectedFeatureBasedCohorts[index]
)
)
this.setState({
...this.state,
datasetCohortViewIsNewlySelected: datasetCohortViewIsSelected,
newlySelectedFeatureBasedCohorts
});
}

public render(): React.ReactNode {
Expand All @@ -89,9 +137,10 @@ export class ChartConfigurationFlyout extends React.Component<
);

const noCohortSelected =
(this.props.selectedDatasetCohorts?.length ?? 0) +
(this.props.selectedFeatureBasedCohorts?.length ?? 0) ===
0;
(this.state.datasetCohortViewIsNewlySelected &&
this.state.newlySelectedDatasetCohorts.length === 0) ||
(!this.state.datasetCohortViewIsNewlySelected &&
this.state.newlySelectedFeatureBasedCohorts.length === 0);

const datasetCohortDropdownSelectedKeys: string[] =
this.state.newlySelectedDatasetCohorts.map((n) => n.toString());
Expand All @@ -113,13 +162,36 @@ export class ChartConfigurationFlyout extends React.Component<
featureBasedCohortDropdownSelectedKeys.push(selectAllOptionKey);
}

const choiceGroupOptions = [
{
key: this.datasetCohortsChoiceGroupOption,
text: localization.ModelAssessment.ModelOverview
.dataCohortsChartSelectionHeader
},
{
disabled: this.props.featureBasedCohorts.length === 0,
key: this.featureBasecCohortsChoiceGroupOption,
text: localization.ModelAssessment.ModelOverview
.featureBasedCohortsChartSelectionHeader
}
];

return (
<Panel
isOpen={this.props.isOpen}
closeButtonAriaLabel="Close"
onDismiss={this.props.onDismissFlyout}
>
<Stack tokens={{ childrenGap: "10px" }}>
<ChoiceGroup
options={choiceGroupOptions}
onChange={this.onChoiceGroupChange}
selectedKey={
this.state.datasetCohortViewIsNewlySelected
? this.datasetCohortsChoiceGroupOption
: this.featureBasecCohortsChoiceGroupOption
romanlutz marked this conversation as resolved.
Show resolved Hide resolved
}
/>
<Dropdown
className={classNames.chartConfigDropdown}
label={
Expand All @@ -131,7 +203,7 @@ export class ChartConfigurationFlyout extends React.Component<
onChange={this.onChartDatasetCohortOptionSelectionChange}
selectedKeys={datasetCohortDropdownSelectedKeys}
errorMessage={
noCohortSelected
noCohortSelected && this.state.datasetCohortViewIsNewlySelected
? localization.ModelAssessment.ModelOverview
.chartCohortSelectionPlaceholder
: undefined
Expand All @@ -140,6 +212,7 @@ export class ChartConfigurationFlyout extends React.Component<
localization.ModelAssessment.ModelOverview
.chartConfigDatasetCohortSelectionPlaceholder
}
disabled={!this.state.datasetCohortViewIsNewlySelected}
/>
{this.props.featureBasedCohorts.length > 0 && (
<Dropdown
Expand All @@ -153,7 +226,7 @@ export class ChartConfigurationFlyout extends React.Component<
onChange={this.onChartFeatureBasedCohortOptionSelectionChange}
selectedKeys={featureBasedCohortDropdownSelectedKeys}
errorMessage={
noCohortSelected
noCohortSelected && !this.state.datasetCohortViewIsNewlySelected
? localization.ModelAssessment.ModelOverview
.chartCohortSelectionPlaceholder
: undefined
Expand All @@ -162,6 +235,7 @@ export class ChartConfigurationFlyout extends React.Component<
localization.ModelAssessment.ModelOverview
.chartConfigFeatureBasedCohortSelectionPlaceholder
}
disabled={this.state.datasetCohortViewIsNewlySelected}
/>
)}
<Stack horizontal tokens={{ childrenGap: "10px" }}>
Expand All @@ -170,6 +244,7 @@ export class ChartConfigurationFlyout extends React.Component<
text={
localization.ModelAssessment.ModelOverview.chartConfigConfirm
}
disabled={noCohortSelected}
/>
<DefaultButton
onClick={this.props.onDismissFlyout}
Expand All @@ -183,16 +258,25 @@ export class ChartConfigurationFlyout extends React.Component<
);
}

// private getAllFeatureBasedCohorts() {
// return this.props.featureBasedCohorts.map((_cohort, index) => {
// return index;
// });
// }
private onChoiceGroupChange = (
_ev?: React.FormEvent<HTMLElement | HTMLInputElement> | undefined,
option?: IChoiceGroupOption | undefined
): void => {
if (option) {
if (option.key === this.datasetCohortsChoiceGroupOption) {
this.setState({ datasetCohortViewIsNewlySelected: true });
romanlutz marked this conversation as resolved.
Show resolved Hide resolved
}
if (option.key === this.featureBasecCohortsChoiceGroupOption) {
this.setState({ datasetCohortViewIsNewlySelected: false });
}
}
};

private onConfirm = () => {
this.props.updateCohortSelection(
this.state.newlySelectedDatasetCohorts,
this.state.newlySelectedFeatureBasedCohorts
this.state.newlySelectedFeatureBasedCohorts,
this.state.datasetCohortViewIsNewlySelected
);
};

Expand Down
2 changes: 1 addition & 1 deletion ...ent/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/DisaggregatedAnalysisUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export function generateCohortsCartesianProduct(
filters: ICompositeFilter[][],
jointDataset: JointDataset,
globalCohort: ErrorCohort
) {
): ErrorCohort[] {
return generateFiltersCartesianProduct(filters).map((compositeFilter) => {
const cohortName = getCompositeFilterString(
[compositeFilter],
Expand Down
Loading