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

[UI refactor] Remove .bind() part 1 - Remove .bind(this, true/false) #1523

Merged
merged 7 commits into from
Jun 29, 2022
Merged

[UI refactor] Remove .bind() part 1 - Remove .bind(this, true/false) #1523

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e131a43
remove bind for casual
tongyu-microsoft Jun 27, 2022
f5bdb48
remove bind for overalll metric chart
tongyu-microsoft Jun 27, 2022
4aeabe3
remove bind for counterfactual chart
tongyu-microsoft Jun 27, 2022
0607c9a
remove bind for dataset explorer
tongyu-microsoft Jun 27, 2022
16ed4b9
remove bind for what if tab
tongyu-microsoft Jun 27, 2022
ad585e3
Merge branch 'main' into tongy/removeBind
tongyu-microsoft Jun 28, 2022
2ea3b3a
Merge branch 'main' into tongy/removeBind
tongyu-microsoft Jun 29, 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
24 changes: 16 additions & 8 deletions ...lysisDashboard/Controls/CausalAnalysisView/CausalIndividualView/CausalIndividualChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ export class CausalIndividualChart extends React.PureComponent<
mustBin={false}
canDither={this.state.chartProps.chartType === ChartTypes.Scatter}
onAccept={this.onYSet}
onCancel={this.setYOpen.bind(this, false)}
onCancel={this.setYClose}
/>
)}
{this.state.xDialogOpen && (
Expand All @@ -139,7 +139,7 @@ export class CausalIndividualChart extends React.PureComponent<
}
canDither={this.state.chartProps.chartType === ChartTypes.Scatter}
onAccept={this.onXSet}
onCancel={this.setXOpen.bind(this, false)}
onCancel={this.setXClose}
/>
)}
<Stack horizontal={false}>
Expand All @@ -148,7 +148,7 @@ export class CausalIndividualChart extends React.PureComponent<
<Stack.Item className={classNames.verticalAxis}>
<div className={classNames.rotatedVerticalBox}>
<DefaultButton
onClick={this.setYOpen.bind(this, true)}
onClick={this.setYOpen}
text={
this.context.jointDataset.metaDict[
this.state.chartProps.yAxis.property
Expand Down Expand Up @@ -177,7 +177,7 @@ export class CausalIndividualChart extends React.PureComponent<
<Stack className={classNames.horizontalAxisWithPadding}>
<div className={classNames.horizontalAxis}>
<DefaultButton
onClick={this.setXOpen.bind(this, true)}
onClick={this.setXOpen}
text={
this.context.jointDataset.metaDict[
this.state.chartProps.xAxis.property
Expand Down Expand Up @@ -238,22 +238,30 @@ export class CausalIndividualChart extends React.PureComponent<
this.setState({ chartProps: newProps, yDialogOpen: false });
};

private readonly setXOpen = (val: boolean): void => {
if (val && this.state.xDialogOpen === false) {
private readonly setXOpen = (): void => {
if (this.state.xDialogOpen === false) {
this.setState({ xDialogOpen: true });
return;
}
this.setState({ xDialogOpen: false });
};

private readonly setYOpen = (val: boolean): void => {
if (val && this.state.yDialogOpen === false) {
private readonly setXClose = (): void => {
this.setState({ xDialogOpen: false });
};

private readonly setYOpen = (): void => {
if (this.state.yDialogOpen === false) {
this.setState({ yDialogOpen: true });
return;
}
this.setState({ yDialogOpen: false });
};

private readonly setYClose = (): void => {
this.setState({ yDialogOpen: false });
};

private selectPointFromChart = (data: any): void => {
const index = data.customdata[JointDataset.IndexLabel];
this.setTemporaryPointToCopyOfDatasetPoint(index);
Expand Down
24 changes: 16 additions & 8 deletions libs/core-ui/src/lib/components/OverallMetricChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ export class OverallMetricChart extends React.PureComponent<
}
canDither={this.state.chartProps.chartType === ChartTypes.Scatter}
onAccept={this.onYSet}
onCancel={this.setYOpen.bind(this, false)}
onCancel={this.setYClose}
/>
)}
{this.state.xDialogOpen && (
Expand All @@ -141,15 +141,15 @@ export class OverallMetricChart extends React.PureComponent<
mustBin={false}
canDither={this.state.chartProps.chartType === ChartTypes.Scatter}
onAccept={this.onXSet}
onCancel={this.setXOpen.bind(this, false)}
onCancel={this.setXClose}
/>
)}
<div className={classNames.chartWithVertical}>
<div className={classNames.verticalAxis}>
<div className={classNames.rotatedVerticalBox}>
<div>
<DefaultButton
onClick={this.setYOpen.bind(this, true)}
onClick={this.setYOpen}
text={
this.context.jointDataset.metaDict[
this.state.chartProps.yAxis.property
Expand Down Expand Up @@ -209,7 +209,7 @@ export class OverallMetricChart extends React.PureComponent<
<div className={classNames.horizontalAxis}>
<div>
<DefaultButton
onClick={this.setXOpen.bind(this, true)}
onClick={this.setXOpen}
text={
this.context.jointDataset.metaDict[
this.state.chartProps.xAxis.property
Expand Down Expand Up @@ -238,22 +238,30 @@ export class OverallMetricChart extends React.PureComponent<
}
};

private readonly setXOpen = (val: boolean): void => {
if (val && this.state.xDialogOpen === false) {
private readonly setXOpen = (): void => {
if (this.state.xDialogOpen === false) {
this.setState({ xDialogOpen: true });
return;
}
this.setState({ xDialogOpen: false });
};

private readonly setYOpen = (val: boolean): void => {
if (val && this.state.yDialogOpen === false) {
private readonly setXClose = (): void => {
this.setState({ xDialogOpen: false });
};

private readonly setYOpen = (): void => {
if (this.state.yDialogOpen === false) {
this.setState({ yDialogOpen: true });
return;
}
this.setState({ yDialogOpen: false });
};

private readonly setYClose = (): void => {
this.setState({ yDialogOpen: false });
};

private onXSet = (value: ISelectorConfig): void => {
const newProps = _.cloneDeep(this.state.chartProps);
if (!newProps) {
Expand Down
24 changes: 16 additions & 8 deletions libs/counterfactuals/src/lib/CounterfactualChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,7 @@ export class CounterfactualChart extends React.PureComponent<
this.state.chartProps.chartType === ChartTypes.Scatter
}
onAccept={this.onYSet}
onCancel={this.setYOpen.bind(this, false)}
onCancel={this.setYClose}
/>
)}
{this.state.xDialogOpen && (
Expand All @@ -258,7 +258,7 @@ export class CounterfactualChart extends React.PureComponent<
this.state.chartProps.chartType === ChartTypes.Scatter
}
onAccept={this.onXSet}
onCancel={this.setXOpen.bind(this, false)}
onCancel={this.setXClose}
/>
)}
<Stack horizontal={false}>
Expand All @@ -267,7 +267,7 @@ export class CounterfactualChart extends React.PureComponent<
<Stack.Item className={classNames.verticalAxis}>
<div className={classNames.rotatedVerticalBox}>
<DefaultButton
onClick={this.setYOpen.bind(this, true)}
onClick={this.setYOpen}
text={
this.context.jointDataset.metaDict[
this.state.chartProps.yAxis.property
Expand Down Expand Up @@ -296,7 +296,7 @@ export class CounterfactualChart extends React.PureComponent<
<Stack className={classNames.horizontalAxisWithPadding}>
<div className={classNames.horizontalAxis}>
<DefaultButton
onClick={this.setXOpen.bind(this, true)}
onClick={this.setXOpen}
text={
this.context.jointDataset.metaDict[
this.state.chartProps.xAxis.property
Expand Down Expand Up @@ -470,22 +470,30 @@ export class CounterfactualChart extends React.PureComponent<
this.setState({ chartProps: newProps, yDialogOpen: false });
};

private readonly setXOpen = (val: boolean): void => {
if (val && this.state.xDialogOpen === false) {
private readonly setXOpen = (): void => {
if (this.state.xDialogOpen === false) {
this.setState({ xDialogOpen: true });
return;
}
this.setState({ xDialogOpen: false });
};

private readonly setYOpen = (val: boolean): void => {
if (val && this.state.yDialogOpen === false) {
private readonly setXClose = (): void => {
this.setState({ xDialogOpen: false });
};

private readonly setYOpen = (): void => {
if (this.state.yDialogOpen === false) {
this.setState({ yDialogOpen: true });
return;
}
this.setState({ yDialogOpen: false });
};

private readonly setYClose = (): void => {
this.setState({ yDialogOpen: false });
};

private selectPointFromChart = (data: any): void => {
const index = data.customdata[JointDataset.IndexLabel];
this.setTemporaryPointToCopyOfDatasetPoint(index);
Expand Down
24 changes: 16 additions & 8 deletions libs/dataset-explorer/src/lib/DatasetExplorerTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ export class DatasetExplorerTab extends React.Component<
mustBin={false}
canDither={this.state.chartProps.chartType === ChartTypes.Scatter}
onAccept={this.onYSet}
onCancel={this.setYOpen.bind(this, false)}
onCancel={this.setYClose}
/>
)}
{this.state.xDialogOpen && (
Expand All @@ -189,7 +189,7 @@ export class DatasetExplorerTab extends React.Component<
}
canDither={this.state.chartProps.chartType === ChartTypes.Scatter}
onAccept={this.onXSet}
onCancel={this.setXOpen.bind(this, false)}
onCancel={this.setXClose}
/>
)}
{this.state.colorDialogOpen && this.state.chartProps.colorAxis && (
Expand All @@ -216,7 +216,7 @@ export class DatasetExplorerTab extends React.Component<
<Stack.Item className={classNames.verticalAxis}>
<div className={classNames.rotatedVerticalBox}>
<DefaultButton
onClick={this.setYOpen.bind(this, true)}
onClick={this.setYOpen}
text={
this.context.jointDataset.metaDict[
this.state.chartProps.yAxis.property
Expand Down Expand Up @@ -266,7 +266,7 @@ export class DatasetExplorerTab extends React.Component<
<div className={classNames.horizontalAxis}>
<div>
<DefaultButton
onClick={this.setXOpen.bind(this, true)}
onClick={this.setXOpen}
text={
this.context.jointDataset.metaDict[
this.state.chartProps.xAxis.property
Expand Down Expand Up @@ -310,14 +310,18 @@ export class DatasetExplorerTab extends React.Component<
this.setState({ chartProps: newProps });
};

private readonly setXOpen = (val: boolean): void => {
if (val && this.state.xDialogOpen === false) {
private readonly setXOpen = (): void => {
if (this.state.xDialogOpen === false) {
this.setState({ xDialogOpen: true });
return;
}
this.setState({ xDialogOpen: false });
};

private readonly setXClose = (): void => {
this.setState({ xDialogOpen: false });
};

private readonly setColorOpen = (): void => {
this.setState({ colorDialogOpen: true });
};
Expand All @@ -326,14 +330,18 @@ export class DatasetExplorerTab extends React.Component<
this.setState({ colorDialogOpen: false });
};

private readonly setYOpen = (val: boolean): void => {
if (val && this.state.yDialogOpen === false) {
private readonly setYOpen = (): void => {
if (this.state.yDialogOpen === false) {
this.setState({ yDialogOpen: true });
return;
}
this.setState({ yDialogOpen: false });
};

private readonly setYClose = (): void => {
this.setState({ yDialogOpen: false });
};

private onXSet = (value: ISelectorConfig): void => {
if (!this.state.chartProps) {
return;
Expand Down
24 changes: 16 additions & 8 deletions libs/interpret/src/lib/MLIDashboard/Controls/WhatIfTab/WhatIfTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -379,7 +379,7 @@ export class WhatIfTab extends React.PureComponent<
this.state.chartProps.chartType === ChartTypes.Scatter
}
onAccept={this.onYSet}
onCancel={this.setYOpen.bind(this, false)}
onCancel={this.setYClose}
/>
)}
{this.state.xDialogOpen && (
Expand All @@ -405,14 +405,14 @@ export class WhatIfTab extends React.PureComponent<
this.state.chartProps.chartType === ChartTypes.Scatter
}
onAccept={this.onXSet}
onCancel={this.setXOpen.bind(this, false)}
onCancel={this.setXClose}
/>
)}
<div className={classNames.chartWithVertical}>
<div className={classNames.verticalAxis}>
<div className={classNames.rotatedVerticalBox}>
<DefaultButton
onClick={this.setYOpen.bind(this, true)}
onClick={this.setYOpen}
text={
this.context.jointDataset.metaDict[
this.state.chartProps.yAxis.property
Expand Down Expand Up @@ -444,7 +444,7 @@ export class WhatIfTab extends React.PureComponent<
<div className={classNames.horizontalAxis}>
<div>
<DefaultButton
onClick={this.setXOpen.bind(this, true)}
onClick={this.setXOpen}
text={
this.context.jointDataset.metaDict[
this.state.chartProps.xAxis.property
Expand Down Expand Up @@ -833,22 +833,30 @@ export class WhatIfTab extends React.PureComponent<
this.setState({ filteredFeatureList });
};

private readonly setXOpen = (val: boolean): void => {
if (val && this.state.xDialogOpen === false) {
private readonly setXOpen = (): void => {
if (this.state.xDialogOpen === false) {
this.setState({ xDialogOpen: true });
return;
}
this.setState({ xDialogOpen: false });
};

private readonly setYOpen = (val: boolean): void => {
if (val && this.state.yDialogOpen === false) {
private readonly setXClose = (): void => {
this.setState({ xDialogOpen: false });
};

private readonly setYOpen = (): void => {
if (this.state.yDialogOpen === false) {
this.setState({ yDialogOpen: true });
return;
}
this.setState({ yDialogOpen: false });
};

private readonly setYClose = (): void => {
this.setState({ yDialogOpen: false });
};

private selectPointFromChart = (data: any): void => {
const trace = data.points[0];
// custom point
Expand Down