Skip to content

Commit

Permalink
Merge branch 'main' into gaugup/AddDataValidationsCohorts
Browse files Browse the repository at this point in the history
  • Loading branch information
@gaugup
gaugup authored Feb 16, 2022
2 parents 7975f08 + 11ee5ca commit 7df90a2
Show file tree
Hide file tree
Showing 14 changed files with 153 additions and 111 deletions.
84 changes: 39 additions & 45 deletions apps/dashboard-e2e/src/util/ScatterHighchart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,19 @@

import { Chart, IChartElement } from "./Chart";

// const dReg = /^M([\d.]+),0A(\1),(\1) 0 1,1 0,-(\1)A(\1),(\1) 0 0,1 (\1),0Z$/;
// const transformReg = /^translate\(([\d.]+),([\d.]+)\)$/;
const dReg = /^M ([\d.]+) ([\d.]+) A 3 3 0 1 1 ([\d.]+) ([\d.]+) Z$/;

export interface IHighScatter extends IChartElement {
readonly radius: number;
readonly x?: number;
readonly y1?: number;
readonly y2?: number;
readonly y3?: number;
}
export class ScatterHighchart extends Chart<IHighScatter> {
public get Elements(): any[] {
return this.getHighChartHtmlElements("path");
public get Elements(): IHighScatter[] {
return this.getHighChartHtmlElements("path").map((b, i) =>
this.getCoordinate(b, i)
);
}

public sortByH(): IHighScatter[] {
Expand Down Expand Up @@ -42,44 +46,34 @@ export class ScatterHighchart extends Chart<IHighScatter> {
return cy.$$(`.trace.scatter:eq(0) .points path:eq(${idx})`).offset();
}

// private readonly getCoordinate = (
// element: HTMLElement,
// idx: number
// ): IHighScatter => {
// const d = element.getAttribute("d");
// if (!d) {
// throw new Error(
// `${idx}th path element in svg does not have "d" attribute`
// );
// }
// const exec = dReg.exec(d);
// if (!exec) {
// throw new Error(
// `${idx}th path element in svg have invalid "d" attribute`
// );
// }
// const [, ...strCords] = exec;
// const [radius] = strCords.map((s) => Number(s));
// const transform = element.getAttribute("transform");
// if (!transform) {
// throw new Error(
// `${idx}th path element in svg does not have "transform" attribute`
// );
// }
// const transformExec = transformReg.exec(transform);
// if (!transformExec) {
// throw new Error(
// `${idx}th path element in svg have invalid "transform" attribute ${transform}`
// );
// }
// const [, ...strTransforms] = transformExec;
// const [x, y] = strTransforms.map((s) => Number(s));
// return {
// bottom: y + radius,
// left: x - radius,
// radius,
// right: x + radius,
// top: y - radius
// };
// };
private readonly getCoordinate = (
element: HTMLElement,
idx: number
): IHighScatter => {
const d = element.getAttribute("d");
if (!d) {
throw new Error(
`${idx}th path element in svg does not have "d" attribute`
);
}
const exec = dReg.exec(d);
if (!exec) {
throw new Error(
`${idx}th path element in svg have invalid "d" attribute`
);
}
const [, ...strCords] = exec;
const [x, y1, horTip, vertTip, yChange, height] = strCords.map((s) =>
Number(s)
);
if (horTip === vertTip) {
throw new Error(`Horizontal tip is equal to vertical length`);
}
return {
bottom: x, // x
left: y1, // y1
right: yChange, // y2
top: height // y3
};
};
}
4 changes: 2 additions & 2 deletions apps/dashboard/src/model-assessment/__mock_data__/adultCensus.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9908,7 +9908,7 @@ export const adultCounterfactualData: ICounterfactualData = {
"occupation",
"relationship",
"race",
"sex",
"gender",
"capital-gain",
"capital-loss",
"hours-per-week",
Expand All @@ -9924,7 +9924,7 @@ export const adultCounterfactualData: ICounterfactualData = {
"occupation",
"relationship",
"race",
"sex",
"gender",
"capital-gain",
"capital-loss",
"hours-per-week",
Expand Down
2 changes: 1 addition & 1 deletion apps/widget-e2e/src/describer/modelAssessment/modelAssessmentDatasets.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const modelAssessmentDatasets = {
},
featureImportanceData: {
datapoint: 500,
dropdownRowName: "Row 4",
dropdownRowName: "Row 34",
hasCorrectIncorrectDatapoints: true,
hasFeatureImportanceComponent: true,
newFeatureDropdownValue: "workclass",
Expand Down
84 changes: 39 additions & 45 deletions apps/widget-e2e/src/util/ScatterHighchart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,19 @@

import { Chart, IChartElement } from "./Chart";

// const dReg = /^M([\d.]+),0A(\1),(\1) 0 1,1 0,-(\1)A(\1),(\1) 0 0,1 (\1),0Z$/;
// const transformReg = /^translate\(([\d.]+),([\d.]+)\)$/;
const dReg = /^M ([\d.]+) ([\d.]+) A 3 3 0 1 1 ([\d.]+) ([\d.]+) Z$/;

export interface IHighScatter extends IChartElement {
readonly radius: number;
readonly x?: number;
readonly y1?: number;
readonly y2?: number;
readonly y3?: number;
}
export class ScatterHighchart extends Chart<IHighScatter> {
public get Elements(): any[] {
return this.getHighChartHtmlElements("path");
public get Elements(): IHighScatter[] {
return this.getHighChartHtmlElements("path").map((b, i) =>
this.getCoordinate(b, i)
);
}

public sortByH(): IHighScatter[] {
Expand Down Expand Up @@ -42,44 +46,34 @@ export class ScatterHighchart extends Chart<IHighScatter> {
return cy.$$(`.trace.scatter:eq(0) .points path:eq(${idx})`).offset();
}

// private readonly getCoordinate = (
// element: HTMLElement,
// idx: number
// ): IHighScatter => {
// const d = element.getAttribute("d");
// if (!d) {
// throw new Error(
// `${idx}th path element in svg does not have "d" attribute`
// );
// }
// const exec = dReg.exec(d);
// if (!exec) {
// throw new Error(
// `${idx}th path element in svg have invalid "d" attribute`
// );
// }
// const [, ...strCords] = exec;
// const [radius] = strCords.map((s) => Number(s));
// const transform = element.getAttribute("transform");
// if (!transform) {
// throw new Error(
// `${idx}th path element in svg does not have "transform" attribute`
// );
// }
// const transformExec = transformReg.exec(transform);
// if (!transformExec) {
// throw new Error(
// `${idx}th path element in svg have invalid "transform" attribute ${transform}`
// );
// }
// const [, ...strTransforms] = transformExec;
// const [x, y] = strTransforms.map((s) => Number(s));
// return {
// bottom: y + radius,
// left: x - radius,
// radius,
// right: x + radius,
// top: y - radius
// };
// };
private readonly getCoordinate = (
element: HTMLElement,
idx: number
): IHighScatter => {
const d = element.getAttribute("d");
if (!d) {
throw new Error(
`${idx}th path element in svg does not have "d" attribute`
);
}
const exec = dReg.exec(d);
if (!exec) {
throw new Error(
`${idx}th path element in svg have invalid "d" attribute`
);
}
const [, ...strCords] = exec;
const [x, y1, horTip, vertTip, yChange, height] = strCords.map((s) =>
Number(s)
);
if (horTip === vertTip) {
throw new Error(`Horizontal tip is equal to vertical length`);
}
return {
bottom: x, // x
left: y1, // y1
right: yChange, // y2
top: height // y3
};
};
}
19 changes: 19 additions & 0 deletions libs/counterfactuals/src/lib/CounterfactualChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,7 @@ export class CounterfactualChart extends React.PureComponent<
closePanel={this.togglePanel}
saveAsPoint={this.saveAsPoint}
setCustomRowProperty={this.setCustomRowProperty}
setCustomRowPropertyComboBox={this.setCustomRowPropertyComboBox}
temporaryPoint={this.temporaryPoint}
isPanelOpen={this.state.isPanelOpen}
data={this.context.counterfactualData}
Expand Down Expand Up @@ -845,6 +846,24 @@ export class CounterfactualChart extends React.PureComponent<
}
};

private setCustomRowPropertyComboBox = (
key: string | number,
index?: number,
value?: string
): void => {
if (!this.temporaryPoint || (!value && !index)) {
return;
}
const editingData = this.temporaryPoint;
if (index !== undefined) {
// User selected/de-selected an existing option
editingData[key] = index;
}

this.forceUpdate();
this.fetchData(editingData);
};

private disableCounterfactualPanel = (): boolean => {
return (
this.state.selectedPointsIndexes[0] === undefined ||
Expand Down
33 changes: 28 additions & 5 deletions libs/counterfactuals/src/lib/CounterfactualList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,11 @@ export interface ICounterfactualListProps {
isString: boolean,
newValue?: string | number
): void;
setCustomRowPropertyComboBox(
key: string | number,
index?: number,
value?: string
): void;
}

interface ICounterfactualListState {
Expand Down Expand Up @@ -270,19 +275,27 @@ export class CounterfactualList extends React.Component<
return columns;
}

private updateDropdownColValue = (
private updateComboBoxColValue = (
key: string | number,
options: IComboBoxOption[],
_event: React.FormEvent<IComboBox>,
option?: IComboBoxOption
): void => {
const id = key.toString();
const keyIndex =
this.props.data?.feature_names_including_target.indexOf(id);
if (option?.text) {
this.props.setCustomRowProperty(`Data${keyIndex}`, false, option.text);
const optionIndex = options.findIndex(
(feature) => feature.key === option.text
);
this.props.setCustomRowPropertyComboBox(
`Data${keyIndex}`,
optionIndex,
option.text
);
this.setState((prevState) => {
prevState.data[id] = option.text;
return { data: prevState.data };
return { data: { ...prevState.data } };
});
}
};
Expand All @@ -298,7 +311,7 @@ export class CounterfactualList extends React.Component<
this.props.setCustomRowProperty(`Data${keyIndex}`, false, newValue);
this.setState((prevState) => {
prevState.data[id] = toNumber(newValue);
return { data: prevState.data };
return { data: { ...prevState.data } };
});
};

Expand Down Expand Up @@ -343,7 +356,17 @@ export class CounterfactualList extends React.Component<
allowFreeform
selectedKey={`${this.state.data[column.key]}`}
options={dropdownOption.data.categoricalOptions}
onChange={this.updateDropdownColValue.bind(this, column.key)}
onChange={(
_event: React.FormEvent<IComboBox>,
option?: IComboBoxOption
) =>
this.updateComboBoxColValue(
column.key,
dropdownOption.data.categoricalOptions,
_event,
option
)
}
/>
</Stack.Item>
</Stack>
Expand Down
8 changes: 8 additions & 0 deletions libs/counterfactuals/src/lib/CounterfactualPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,11 @@ export interface ICounterfactualPanelProps {
isString: boolean,
newValue?: string
): void;
setCustomRowPropertyComboBox(
key: string | number,
index?: number,
value?: string
): void;
}
interface ICounterfactualState {
filterText?: string;
Expand Down Expand Up @@ -84,6 +89,9 @@ export class CounterfactualPanel extends React.Component<
data={this.props.data}
temporaryPoint={this.props.temporaryPoint}
setCustomRowProperty={this.props.setCustomRowProperty}
setCustomRowPropertyComboBox={
this.props.setCustomRowPropertyComboBox
}
sortFeatures={this.state.sortFeatures}
/>
</Stack.Item>
Expand Down
10 changes: 7 additions & 3 deletions ...or-analysis/src/lib/ErrorAnalysisDashboard/Controls/TreeViewRenderer/TreeViewRenderer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ import {
MetricCohortStats,
ModelAssessmentContext,
defaultModelAssessmentContext,
IErrorAnalysisTreeNode
IErrorAnalysisTreeNode,
IModelAssessmentContext
} from "@responsible-ai/core-ui";
import { localization } from "@responsible-ai/localization";
import { Property } from "csstype";
Expand Down Expand Up @@ -80,15 +81,18 @@ export class TreeViewRenderer extends React.PureComponent<
private static saveStateOnUnmount = true;
public context: React.ContextType<typeof ModelAssessmentContext> =
defaultModelAssessmentContext;
public constructor(props: ITreeViewRendererProps) {
public constructor(
props: ITreeViewRendererProps,
context: IModelAssessmentContext
) {
super(props);
if (
this.props.selectedCohort !== this.props.baseCohort &&
TreeViewRenderer.savedState
) {
this.state = TreeViewRenderer.savedState;
} else {
this.state = createInitialTreeViewState(this.context.errorAnalysisData);
this.state = createInitialTreeViewState(context.errorAnalysisData);
}
TreeViewRenderer.saveStateOnUnmount = true;
}
Expand Down
2 changes: 1 addition & 1 deletion libs/fairness/src/lib/util/calculateFairnessMetric.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ describe("calculateFairnessMetric", () => {
};
expect(result).toEqual(expectedResult);
});
it("should return only overall result if binBounds falsey", () => {
it("should return only overall result if binBounds falsely", () => {
const mockValue = {
binBounds: [],
bins: [0.3, 0.7],
Expand Down
Loading

0 comments on commit 7df90a2

Please sign in to comment.