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

Jump to bottom

Individual causal style responsive #1268

Merged
merged 15 commits into from
Mar 16, 2022
Merged

Individual causal style responsive #1268

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
1161278
add whatIf scatter chart
Mar 8, 2022
4488d0f
Merge branch 'main' of https://github.com/microsoft/responsible-ai-to…
Mar 9, 2022
11215ae
widget test
Mar 9, 2022
d711879
what if local importance bar chart
Mar 9, 2022
71126e8
fix
Mar 9, 2022
c2104f4
widget
Mar 9, 2022
5f75316
fix tooltip
Mar 10, 2022
e5a3208
refactor
Mar 10, 2022
2198579
test
Mar 10, 2022
a739d5b
test
Mar 11, 2022
0443fe4
Merge branch 'main' of https://github.com/microsoft/responsible-ai-to…
Mar 11, 2022
97feb12
Causal Style
Mar 12, 2022
7c85d97
Merge branch 'main' of https://github.com/microsoft/responsible-ai-to…
Mar 12, 2022
1ed5d09
Merge branch 'main' into zhb/StyleFix
zhb000 Mar 15, 2022
e81fe3a
Merge branch 'main' into zhb/StyleFix
zhb000 Mar 15, 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
108 changes: 56 additions & 52 deletions ...lysisDashboard/Controls/CausalAnalysisView/CausalIndividualView/CausalIndividualChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,19 +83,27 @@ export class CausalIndividualChart extends React.PureComponent<
if (this.state.chartProps === undefined) {
return <div />;
}
const plotlyProps = this.generatePlotlyProps(
this.context.jointDataset,
this.state.chartProps,
this.context.selectedErrorCohort.cohort
);
const cohortLength =
this.context.selectedErrorCohort.cohort.filteredData.length;
const canRenderChart =
cohortLength < rowErrorSize ||
this.state.chartProps.chartType !== ChartTypes.Scatter;
if (!canRenderChart) {
return (
<MissingParametersPlaceholder>
{localization.Interpret.ValidationErrors.datasizeError}
</MissingParametersPlaceholder>
);
}

const plotlyProps = this.generatePlotlyProps(
this.context.jointDataset,
this.state.chartProps,
this.context.selectedErrorCohort.cohort
);
return (
<div className={classNames.topArea} id={"CausalIndividualContainer"}>
<div className={classNames.chartWithAxes} id={this.chartAndConfigsId}>
<Stack horizontal id={this.chartAndConfigsId}>
<Stack.Item className={classNames.chartWithAxes}>
{this.state.yDialogOpen && (
<AxisConfigDialog
jointDataset={this.context.jointDataset}
Expand Down Expand Up @@ -134,62 +142,58 @@ export class CausalIndividualChart extends React.PureComponent<
onCancel={this.setXOpen.bind(this, false)}
/>
)}
<Stack className={classNames.chartWithVertical}>
<div className={classNames.verticalAxis}>
<div className={classNames.rotatedVerticalBox}>
<Stack horizontal={false}>
<Stack.Item className={classNames.chartWithVertical}>
<Stack horizontal>
<Stack.Item className={classNames.verticalAxis}>
<div className={classNames.rotatedVerticalBox}>
<DefaultButton
onClick={this.setYOpen.bind(this, true)}
text={
this.context.jointDataset.metaDict[
this.state.chartProps.yAxis.property
].abbridgedLabel
}
title={
this.context.jointDataset.metaDict[
this.state.chartProps.yAxis.property
].label
}
/>
</div>
</Stack.Item>
<Stack.Item className={classNames.individualChartContainer}>
<BasicHighChart
configOverride={getIndividualChartOptions(
plotlyProps,
this.selectPointFromChart
)}
theme={getTheme()}
id="CausalAggregateChart"
/>
</Stack.Item>
</Stack>
</Stack.Item>
<Stack className={classNames.horizontalAxisWithPadding}>
<div className={classNames.horizontalAxis}>
<DefaultButton
onClick={this.setYOpen.bind(this, true)}
onClick={this.setXOpen.bind(this, true)}
text={
this.context.jointDataset.metaDict[
this.state.chartProps.yAxis.property
this.state.chartProps.xAxis.property
].abbridgedLabel
}
title={
this.context.jointDataset.metaDict[
this.state.chartProps.yAxis.property
this.state.chartProps.xAxis.property
].label
}
/>
</div>
</div>
{!canRenderChart && (
<MissingParametersPlaceholder>
{localization.Interpret.ValidationErrors.datasizeError}
</MissingParametersPlaceholder>
)}
{canRenderChart && (
<div className={classNames.highchartContainer}>
<BasicHighChart
configOverride={getIndividualChartOptions(
plotlyProps,
this.selectPointFromChart
)}
theme={getTheme()}
id="CausalAggregateChart"
/>
</div>
)}
</Stack>
<Stack className={classNames.horizontalAxisWithPadding}>
<div className={classNames.paddingDiv} />
<div className={classNames.horizontalAxis}>
<DefaultButton
onClick={this.setXOpen.bind(this, true)}
text={
this.context.jointDataset.metaDict[
this.state.chartProps.xAxis.property
].abbridgedLabel
}
title={
this.context.jointDataset.metaDict[
this.state.chartProps.xAxis.property
].label
}
/>
</div>
</Stack>
</Stack>
</div>
<Stack horizontal={false} gap={15} className={classNames.legendAndText}>
</Stack.Item>
<Stack className={classNames.legendAndText}>
<ComboBox
label={localization.CausalAnalysis.IndividualView.datapointIndex}
onChange={this.selectPointFromDropdown}
Expand All @@ -201,7 +205,7 @@ export class CausalIndividualChart extends React.PureComponent<
/>
<CausalWhatIf selectedIndex={this.state.selectedIndex} />
</Stack>
</div>
</Stack>
);
}

Expand Down
Loading