microsoft
/
responsible-ai-toolbox
зеркало из https://github.com/microsoft/responsible-ai-toolbox.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

add few react lint rule (#529) 

"react/no-multi-comp": only one component is allow in one file.
"react/no-this-in-sfc": no "this" keyword is allowed in function component
"react/no-unsafe": no unsafe react lifecycle function.
"react/no-unused-prop-types": no unused props
"react/no-unused-state": no unused stated
"react/self-closing-comp": use self closing tag if no children exist.
"react/sort-prop-types": sort props
"react/state-in-constructor": state can only defined in constructor not private property.
"react/jsx-boolean-value": omit "true" when pass boolean value to react element
This commit is contained in:
xuke444 2021-05-11 18:26:04 -07:00 коммит произвёл GitHub
Родитель 44690a9bc4
Коммит 3efa319845
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
80 изменённых файлов: 530 добавлений и 590 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

322
.eslintrc.json
Просмотреть файл

@ -5,305 +5,25 @@
"globals": {
"JSX": "readonly"
},
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"extends": [
"plugin:@nrwl/nx/typescript",
"plugin:@nrwl/nx/javascript",
"./.eslintrc.comments.eslintrc",
"./.eslintrc.filenames.eslintrc",
"./.eslintrc.react.eslintrc",
"./.eslintrc.import.eslintrc",
"./.eslintrc.typescript.eslintrc",
"./.eslintrc.unicorn.eslintrc"
],
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"jest": true,
"node": true
},
"parserOptions": {
"project": "./tsconfig.*?.json"
},
"plugins": ["header", "sort-keys-fix"],
"rules": {
"sort-keys-fix/sort-keys-fix": [
"error",
"asc",
{
"caseSensitive": false,
"natural": true
}
],
"header/header": [
"error",
"line",
[
" Copyright (c) Microsoft Corporation.",
" Licensed under the MIT License."
],
2
],
"camelcase": [
"error",
{
"allow": [
"accuracy_score",
"accuracy_score_difference",
"accuracy_score_min",
"accuracy_score_ratio",
"balanced_accuracy_score",
"balanced_accuracy_score_min",
"balanced_root_mean_squared_error",
"demographic_parity_difference",
"demographic_parity_ratio",
"equalized_odds_difference",
"equalized_odds_ratio",
"error_rate_difference",
"error_rate_ratio",
"error_y",
"f1_score",
"f1_score_min",
"fallout_rate",
"false_negative_rate",
"false_negative_rate_difference",
"false_negative_rate_ratio",
"false_positive_rate",
"false_positive_rate_difference",
"false_positive_rate_ratio",
"feature_list",
"log_loss",
"lower_bounds",
"max_error",
"mean_absolute_error",
"mean_absolute_error_min",
"mean_squared_error",
"mean_squared_error_min",
"mean_squared_log_error",
"median_absolute_error",
"miss_rate",
"plot_bgcolor",
"precision_score",
"r2_score",
"r2_score_min",
"recall_score",
"recall_score_min",
"rms_error",
"roc_auc_score_min",
"root_mean_squared_error",
"scores_range",
"selection_rate",
"shap_deep",
"shap_kernel",
"shap_tree",
"specificity_score",
"true_negative_rate_difference",
"true_negative_rate_ratio",
"true_positive_rate_difference",
"true_positive_rate_ratio",
"upper_bounds",
"zero_one_loss"
]
}
],
"complexity": "warn",
"curly": ["error", "all"],
"max-lines": "warn",
"no-else-return": "error",
"no-useless-call": "error",
"object-shorthand": "error",
"no-lonely-if": "error",
"no-extra-semi": "error",
"quotes": [
"error",
"double",
{
"avoidEscape": true
}
],
"no-duplicate-imports": "error",
"array-callback-return": "error",
"dot-location": ["error", "property"],
"eqeqeq": ["error", "smart"],
"new-parens": "error",
"no-caller": "error",
"no-cond-assign": ["error", "except-parens"],
"no-const-assign": "error",
"no-control-regex": "error",
"no-delete-var": "error",
"no-dupe-args": "error",
"no-dupe-keys": "error",
"no-duplicate-case": "error",
"no-empty-character-class": "error",
"no-empty-pattern": "error",
"no-eval": "error",
"no-ex-assign": "error",
"no-extend-native": "error",
"no-extra-bind": "error",
"no-extra-label": "error",
"no-fallthrough": "error",
"no-func-assign": "error",
"no-implied-eval": "error",
"no-invalid-regexp": "error",
"no-iterator": "error",
"no-label-var": "error",
"no-labels": [
"error",
{
"allowLoop": true,
"allowSwitch": false
}
],
"no-lone-blocks": "error",
"no-loop-func": "error",
"no-mixed-operators": [
"error",
{
"groups": [
["&", "|", "^", "~", "<<", ">>", ">>>"],
["==", "!=", "===", "!==", ">", ">=", "<", "<="],
["&&", "||"],
["in", "instanceof"]
],
"allowSamePrecedence": false
}
],
"no-multi-str": "error",
"no-native-reassign": "error",
"no-negated-in-lhs": "error",
"no-new-func": "error",
"no-new-object": "error",
"no-new-symbol": "error",
"no-new-wrappers": "error",
"no-obj-calls": "error",
"no-octal": "error",
"no-octal-escape": "error",
"no-redeclare": "error",
"no-regex-spaces": "error",
"no-restricted-syntax": ["error", "WithStatement"],
"no-script-url": "error",
"no-self-assign": "error",
"no-self-compare": "error",
"no-sequences": "error",
"no-shadow-restricted-names": "error",
"no-sparse-arrays": "error",
"no-template-curly-in-string": "error",
"no-this-before-super": "error",
"no-throw-literal": "error",
"no-restricted-globals": [
"error",
"addEventListener",
"blur",
"close",
"closed",
"confirm",
"defaultStatus",
"defaultstatus",
"event",
"external",
"find",
"focus",
"frameElement",
"frames",
"history",
"innerHeight",
"innerWidth",
"length",
"location",
"locationbar",
"menubar",
"moveBy",
"moveTo",
"name",
"onblur",
"onerror",
"onfocus",
"onload",
"onresize",
"onunload",
"open",
"opener",
"opera",
"outerHeight",
"outerWidth",
"pageXOffset",
"pageYOffset",
"parent",
"print",
"removeEventListener",
"resizeBy",
"resizeTo",
"screen",
"screenLeft",
"screenTop",
"screenX",
"screenY",
"scroll",
"scrollbars",
"scrollBy",
"scrollTo",
"scrollX",
"scrollY",
"self",
"status",
"statusbar",
"stop",
"toolbar",
"top"
],
"no-unexpected-multiline": "error",
"no-unreachable": "error",
"no-unused-expressions": [
"error",
{
"allowShortCircuit": true,
"allowTernary": true,
"allowTaggedTemplates": true
}
],
"no-unused-labels": "error",
"no-useless-computed-key": "error",
"no-useless-concat": "error",
"no-useless-escape": "error",
"no-useless-rename": [
"error",
{
"ignoreDestructuring": false,
"ignoreImport": false,
"ignoreExport": false
}
],
"no-with": "error",
"no-whitespace-before-property": "error",
"require-yield": "error",
"rest-spread-spacing": ["error", "never"],
"strict": ["error", "never"],
"unicode-bom": ["error", "never"],
"use-isnan": "error",
"valid-typeof": "error",
"no-restricted-properties": [
"error",
{
"object": "require",
"property": "ensure",
"message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting"
},
{
"object": "System",
"property": "import",
"message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting"
}
],
"getter-return": "error",
"default-case": "error",
"no-undef": "error",
"no-array-constructor": "error",
"no-unused-vars": "error",
"no-useless-constructor": "error"
}
}
]
"extends": [
"plugin:@nrwl/nx/typescript",
"plugin:@nrwl/nx/javascript",
"./.eslintrc/.eslintrc.comments.eslintrc",
"./.eslintrc/.eslintrc.filenames.eslintrc",
"./.eslintrc/.eslintrc.react.eslintrc",
"./.eslintrc/.eslintrc.import.eslintrc",
"./.eslintrc/.eslintrc.typescript.eslintrc",
"./.eslintrc/.eslintrc.unicorn.eslintrc",
"./.eslintrc/.eslintrc.custom.eslintrc"
],
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"jest": true,
"node": true
},
"parserOptions": {
"project": "./tsconfig.*?.json"
}
}

0
.eslintrc.comments.eslintrc → .eslintrc/.eslintrc.comments.eslintrc
Просмотреть файл

288
.eslintrc/.eslintrc.custom.eslintrc Normal file
Просмотреть файл

@ -0,0 +1,288 @@
{
"extends": [
"plugin:@nrwl/nx/typescript",
"plugin:@nrwl/nx/javascript",
"./.eslintrc.comments.eslintrc",
"./.eslintrc.filenames.eslintrc",
"./.eslintrc.react.eslintrc",
"./.eslintrc.import.eslintrc",
"./.eslintrc.typescript.eslintrc",
"./.eslintrc.unicorn.eslintrc"
],
"plugins": ["header", "sort-keys-fix"],
"rules": {
"sort-keys-fix/sort-keys-fix": [
"error",
"asc",
{
"caseSensitive": false,
"natural": true
}
],
"header/header": [
"error",
"line",
[
" Copyright (c) Microsoft Corporation.",
" Licensed under the MIT License."
],
2
],
"camelcase": [
"error",
{
"allow": [
"accuracy_score",
"accuracy_score_difference",
"accuracy_score_min",
"accuracy_score_ratio",
"balanced_accuracy_score",
"balanced_accuracy_score_min",
"balanced_root_mean_squared_error",
"demographic_parity_difference",
"demographic_parity_ratio",
"equalized_odds_difference",
"equalized_odds_ratio",
"error_rate_difference",
"error_rate_ratio",
"error_y",
"f1_score",
"f1_score_min",
"fallout_rate",
"false_negative_rate",
"false_negative_rate_difference",
"false_negative_rate_ratio",
"false_positive_rate",
"false_positive_rate_difference",
"false_positive_rate_ratio",
"feature_list",
"log_loss",
"lower_bounds",
"max_error",
"mean_absolute_error",
"mean_absolute_error_min",
"mean_squared_error",
"mean_squared_error_min",
"mean_squared_log_error",
"median_absolute_error",
"miss_rate",
"plot_bgcolor",
"precision_score",
"r2_score",
"r2_score_min",
"recall_score",
"recall_score_min",
"rms_error",
"roc_auc_score_min",
"root_mean_squared_error",
"scores_range",
"selection_rate",
"shap_deep",
"shap_kernel",
"shap_tree",
"specificity_score",
"true_negative_rate_difference",
"true_negative_rate_ratio",
"true_positive_rate_difference",
"true_positive_rate_ratio",
"upper_bounds",
"zero_one_loss"
]
}
],
"complexity": "warn",
"curly": ["error", "all"],
"max-lines": "warn",
"no-else-return": "error",
"no-useless-call": "error",
"object-shorthand": "error",
"no-lonely-if": "error",
"no-extra-semi": "error",
"quotes": [
"error",
"double",
{
"avoidEscape": true
}
],
"no-duplicate-imports": "error",
"array-callback-return": "error",
"dot-location": ["error", "property"],
"eqeqeq": ["error", "smart"],
"new-parens": "error",
"no-caller": "error",
"no-cond-assign": ["error", "except-parens"],
"no-const-assign": "error",
"no-control-regex": "error",
"no-delete-var": "error",
"no-dupe-args": "error",
"no-dupe-keys": "error",
"no-duplicate-case": "error",
"no-empty-character-class": "error",
"no-empty-pattern": "error",
"no-eval": "error",
"no-ex-assign": "error",
"no-extend-native": "error",
"no-extra-bind": "error",
"no-extra-label": "error",
"no-fallthrough": "error",
"no-func-assign": "error",
"no-implied-eval": "error",
"no-invalid-regexp": "error",
"no-iterator": "error",
"no-label-var": "error",
"no-labels": [
"error",
{
"allowLoop": true,
"allowSwitch": false
}
],
"no-lone-blocks": "error",
"no-loop-func": "error",
"no-mixed-operators": [
"error",
{
"groups": [
["&", "|", "^", "~", "<<", ">>", ">>>"],
["==", "!=", "===", "!==", ">", ">=", "<", "<="],
["&&", "||"],
["in", "instanceof"]
],
"allowSamePrecedence": false
}
],
"no-multi-str": "error",
"no-native-reassign": "error",
"no-negated-in-lhs": "error",
"no-new-func": "error",
"no-new-object": "error",
"no-new-symbol": "error",
"no-new-wrappers": "error",
"no-obj-calls": "error",
"no-octal": "error",
"no-octal-escape": "error",
"no-redeclare": "error",
"no-regex-spaces": "error",
"no-restricted-syntax": ["error", "WithStatement"],
"no-script-url": "error",
"no-self-assign": "error",
"no-self-compare": "error",
"no-sequences": "error",
"no-shadow-restricted-names": "error",
"no-sparse-arrays": "error",
"no-template-curly-in-string": "error",
"no-this-before-super": "error",
"no-throw-literal": "error",
"no-restricted-globals": [
"error",
"addEventListener",
"blur",
"close",
"closed",
"confirm",
"defaultStatus",
"defaultstatus",
"event",
"external",
"find",
"focus",
"frameElement",
"frames",
"history",
"innerHeight",
"innerWidth",
"length",
"location",
"locationbar",
"menubar",
"moveBy",
"moveTo",
"name",
"onblur",
"onerror",
"onfocus",
"onload",
"onresize",
"onunload",
"open",
"opener",
"opera",
"outerHeight",
"outerWidth",
"pageXOffset",
"pageYOffset",
"parent",
"print",
"removeEventListener",
"resizeBy",
"resizeTo",
"screen",
"screenLeft",
"screenTop",
"screenX",
"screenY",
"scroll",
"scrollbars",
"scrollBy",
"scrollTo",
"scrollX",
"scrollY",
"self",
"status",
"statusbar",
"stop",
"toolbar",
"top"
],
"no-unexpected-multiline": "error",
"no-unreachable": "error",
"no-unused-expressions": [
"error",
{
"allowShortCircuit": true,
"allowTernary": true,
"allowTaggedTemplates": true
}
],
"no-unused-labels": "error",
"no-useless-computed-key": "error",
"no-useless-concat": "error",
"no-useless-escape": "error",
"no-useless-rename": [
"error",
{
"ignoreDestructuring": false,
"ignoreImport": false,
"ignoreExport": false
}
],
"no-with": "error",
"no-whitespace-before-property": "error",
"require-yield": "error",
"rest-spread-spacing": ["error", "never"],
"strict": ["error", "never"],
"unicode-bom": ["error", "never"],
"use-isnan": "error",
"valid-typeof": "error",
"no-restricted-properties": [
"error",
{
"object": "require",
"property": "ensure",
"message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting"
},
{
"object": "System",
"property": "import",
"message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting"
}
],
"getter-return": "error",
"default-case": "error",
"no-undef": "error",
"no-array-constructor": "error",
"no-unused-vars": "error",
"no-useless-constructor": "error"
}
}

0
.eslintrc.filenames.eslintrc → .eslintrc/.eslintrc.filenames.eslintrc
Просмотреть файл

0
.eslintrc.import.eslintrc → .eslintrc/.eslintrc.import.eslintrc
Просмотреть файл

9
.eslintrc.react.eslintrc → .eslintrc/.eslintrc.react.eslintrc
Просмотреть файл

@ -11,6 +11,15 @@
"plugin:react-hooks/recommended"
],
"rules": {
"react/no-multi-comp": "error",
"react/no-this-in-sfc": "error",
"react/no-unsafe": "error",
"react/no-unused-prop-types": "error",
"react/no-unused-state": "error",
"react/self-closing-comp": "error",
"react/sort-prop-types": "error",
"react/state-in-constructor": "error",
"react/jsx-boolean-value": "error",
"react/forbid-foreign-prop-types": [
"error",
{

0
.eslintrc.typescript.eslintrc → .eslintrc/.eslintrc.typescript.eslintrc
Просмотреть файл

0
.eslintrc.unicorn.eslintrc → .eslintrc/.eslintrc.unicorn.eslintrc
Просмотреть файл

2
apps/dashboard/src/app/App.tsx
Просмотреть файл

@ -140,7 +140,7 @@ export class App extends React.Component<IAppSetting, IAppState> {
/>
)}
</div>
<Redirect to={generatePath(App.route, this.state)} push={true} />
<Redirect to={generatePath(App.route, this.state)} push />
</>
);
}

4
libs/causality/src/lib/CasualAnalysisDashboard/CausalInsightsTab.tsx
Просмотреть файл

@ -36,13 +36,13 @@ export class CausalInsightsTab extends React.PureComponent<
public render(): React.ReactNode {
return (
<Stack grow={true} tokens={{ padding: "16px 24px" }}>
<Stack grow tokens={{ padding: "16px 24px" }}>
<Stack horizontal={false} tokens={{ childrenGap: "15px" }}>
<Text variant={"xLarge"}>
{localization.CasualAnalysis.MainMenu.header}
</Text>
</Stack>
<Stack horizontal={true} tokens={{ childrenGap: "10px" }}>
<Stack horizontal tokens={{ childrenGap: "10px" }}>
<Pivot onLinkClick={this.onViewTypeChange}>
<PivotItem
itemKey={CasualAnalysisOptions.Aggregate}

6
libs/causality/src/lib/CasualAnalysisDashboard/Controls/CasualAnalysisView/CasualAggregateView/CasualAggregateChart.tsx
Просмотреть файл

@ -31,14 +31,14 @@ export class CasualAggregateChart extends React.PureComponent<
public render(): React.ReactNode {
const styles = CasualAggregateStyles();
return (
<Stack horizontal={true} verticalFill={true} className={styles.container}>
<Stack.Item grow={true} className={styles.leftPane}>
<Stack horizontal verticalFill className={styles.container}>
<Stack.Item grow className={styles.leftPane}>
<AccessibleChart
plotlyProps={this.generateCasualAggregatePlotlyProps()}
theme={getTheme()}
/>
</Stack.Item>
<Stack.Item grow={true} className={styles.rightPane}>
<Stack.Item grow className={styles.rightPane}>
<Stack horizontal={false}>
<Stack.Item className={styles.label}>
<b>{localization.CasualAnalysis.AggregateView.continuous}</b>

2
libs/causality/src/lib/CasualAnalysisDashboard/Controls/CasualAnalysisView/CasualAggregateView/CasualAggregateView.tsx
Просмотреть файл

@ -31,7 +31,7 @@ export class CasualAggregateView extends React.PureComponent<
public render(): React.ReactNode {
const styles = CasualAggregateStyles();
return (
<Stack grow={true} tokens={{ padding: "16px 24px" }}>
<Stack grow tokens={{ padding: "16px 24px" }}>
<Stack horizontal={false} tokens={{ childrenGap: "15px" }}>
<Text variant={"medium"} className={styles.label}>
{localization.CasualAnalysis.AggregateView.description}

39
libs/causality/src/lib/CasualAnalysisDashboard/Controls/CasualAnalysisView/CasualIndividualView/CasualIndividualChart.tsx
Просмотреть файл

@ -28,7 +28,6 @@ import {
getTheme,
Text,
DefaultButton,
IDropdownOption,
ComboBox,
Stack
} from "office-ui-fabric-react";
@ -46,13 +45,10 @@ export interface ICasualIndividualChartState {
chartProps?: IGenericChartProps;
xDialogOpen: boolean;
yDialogOpen: boolean;
selectedWhatIfRootIndex: number;
selectedCohortIndex: number;
featuresOption: IDropdownOption[];
selectedPointsIndexes: number[];
pointIsActive: boolean[];
customPointIsActive: boolean[];
selectedFeatureKey: string;
}
export class CasualIndividualChart extends React.PureComponent<
@ -76,43 +72,17 @@ export class CasualIndividualChart extends React.PureComponent<
this.state = {
customPointIsActive: [],
featuresOption: [],
pointIsActive: [],
selectedCohortIndex: 0,
selectedFeatureKey: JointDataset.DataLabelRoot + "0",
selectedPointsIndexes: [],
selectedWhatIfRootIndex: 0,
xDialogOpen: false,
yDialogOpen: false
};
}
public componentDidMount(): void {
const featuresOption = new Array(
this.context.jointDataset.datasetFeatureCount
)
.fill(0)
.map((_, index) => {
const key = JointDataset.DataLabelRoot + index.toString();
const meta = this.context.jointDataset.metaDict[key];
const options = meta.isCategorical
? meta.sortedCategoricalValues?.map((optionText, index) => {
return { key: index, text: optionText };
})
: undefined;
return {
data: {
categoricalOptions: options,
fullLabel: meta.label.toLowerCase()
},
key,
text: meta.abbridgedLabel
};
});
this.setState({
chartProps: this.generateDefaultChartAxes(),
featuresOption
chartProps: this.generateDefaultChartAxes()
});
}
@ -264,7 +234,7 @@ export class CasualIndividualChart extends React.PureComponent<
)}
</div>
<div className={classNames.horizontalAxisWithPadding}>
<div className={classNames.paddingDiv}></div>
<div className={classNames.paddingDiv} />
<div className={classNames.horizontalAxis}>
<DefaultButton
onClick={this.setXOpen.bind(this, true)}
@ -324,7 +294,7 @@ export class CasualIndividualChart extends React.PureComponent<
}
]}
ariaLabel={"chart type picker"}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
styles={FabricStyles.smallDropdownStyle}
/>
</div>
@ -347,9 +317,6 @@ export class CasualIndividualChart extends React.PureComponent<
this.stringifiedValues[key] = this.temporaryPoint?.[key].toString();
this.validationErrors[key] = undefined;
});
this.setState({
selectedWhatIfRootIndex: index
});
}
private onXSet = (value: ISelectorConfig): void => {

2
libs/causality/src/lib/CasualAnalysisDashboard/Controls/CasualAnalysisView/CasualIndividualView/CasualIndividualView.tsx
Просмотреть файл

@ -44,7 +44,7 @@ export class CasualIndividualView extends React.PureComponent<
public render(): React.ReactNode {
const styles = CasualIndividualStyles();
return (
<Stack grow={true} tokens={{ padding: "16px 24px" }}>
<Stack grow tokens={{ padding: "16px 24px" }}>
<Stack.Item>
<Text variant={"medium"} className={styles.label}>
{localization.CasualAnalysis.IndividualView.description}

6
libs/causality/src/lib/CasualAnalysisDashboard/Controls/CasualAnalysisView/TreatmentView/TreatmentView.tsx
Просмотреть файл

@ -31,6 +31,10 @@ export class TreatmentView extends React.PureComponent<
}
public render(): React.ReactNode {
return <div>Treatment View</div>;
return this.state.showModalHelp ? (
<div>Treatment View</div>
) : (
<div>Treatment View</div>
);
}
}

2
libs/core-ui/src/lib/Cohort/CohortBaseAndFilters/CohortBaseAndFilters.tsx
Просмотреть файл

@ -32,7 +32,7 @@ export class CohortBaseAndFilters extends React.Component<
const filters = this.props.cohort.filtersToString().join(", ");
return (
<div>
<div className={classNames.section}></div>
<div className={classNames.section} />
<div className={classNames.subsection}>
<div className={classNames.header}>Base cohort and filters</div>
<Stack horizontal>

5
libs/core-ui/src/lib/Cohort/CohortBasedComponent.ts
Просмотреть файл

@ -26,7 +26,10 @@ export abstract class CohortBasedComponent<
TProps extends ICohortBasedComponentProps,
TState extends ICohortBasedComponentState
> extends React.PureComponent<TProps, TState> {
public updateSelectedCohort = (
protected getSelectedCohort = (): ErrorCohort => {
return this.state.selectedCohort;
};
protected updateSelectedCohort = (
filters: IFilter[],
compositeFilters: ICompositeFilter[],
source: CohortSource = CohortSource.None,

2
libs/core-ui/src/lib/Cohort/CohortFilters/CohortFilters.tsx
Просмотреть файл

@ -29,7 +29,7 @@ export class CohortFilters extends React.Component<ICohortFiltersProps> {
const filters = this.props.cohort.filtersToString().join(", ");
return (
<div>
<div className={classNames.section}></div>
<div className={classNames.section} />
<div className={classNames.subsection}>
<div className={classNames.header}>Filters</div>
<Stack>

8
libs/core-ui/src/lib/Cohort/CohortInfo/CohortInfo.tsx
Просмотреть файл

@ -57,7 +57,7 @@ export class CohortInfo extends React.PureComponent<ICohortInfoProps> {
onDismiss={this.props.onDismiss}
styles={panelStyles}
>
<div className={classNames.divider}></div>
<div className={classNames.divider} />
<div className={classNames.section}>
<div className={classNames.subsection}>
<DefaultButton
@ -65,7 +65,7 @@ export class CohortInfo extends React.PureComponent<ICohortInfoProps> {
onClick={(): any => this.props.onSaveCohortClick()}
/>
</div>
<div className={classNames.section}></div>
<div className={classNames.section} />
<div className={classNames.subsection}>
<div className={classNames.header}>Basic Information</div>
{this.props.currentCohort.cohort.name !== "All data" && (
@ -77,7 +77,7 @@ export class CohortInfo extends React.PureComponent<ICohortInfoProps> {
</div>
</div>
</div>
<div className={classNames.divider}></div>
<div className={classNames.divider} />
<div className={classNames.section}>
<div className={classNames.subsection}>
<div>Instances in base cohort</div>
@ -128,7 +128,7 @@ export class CohortInfo extends React.PureComponent<ICohortInfoProps> {
</Stack>
</div>
</div>
<div className={classNames.divider}></div>
<div className={classNames.divider} />
<div className={classNames.section}>
<div className={classNames.subsection}>
<div className={classNames.header}>Prediction path (filters)</div>

4
libs/core-ui/src/lib/Cohort/CohortList/CohortList.tsx
Просмотреть файл

@ -108,7 +108,7 @@ export class CohortList extends React.Component<
onDismiss={this.props.onDismiss}
styles={panelStyles}
>
<div className={classNames.divider}></div>
<div className={classNames.divider} />
<div className={classNames.section}>
<div className={classNames.subsection}>
<div className={classNames.header}>Cohort List</div>
@ -117,7 +117,7 @@ export class CohortList extends React.Component<
columns={this.columns}
setKey="set"
layoutMode={DetailsListLayoutMode.justified}
selectionPreservedOnEmptyClick={true}
selectionPreservedOnEmptyClick
checkboxVisibility={CheckboxVisibility.hidden}
onRenderItemColumn={this.renderItemColumn.bind(this)}
/>

2
libs/core-ui/src/lib/Cohort/CohortStats/CohortStats.tsx
Просмотреть файл

@ -23,7 +23,7 @@ export class CohortStats extends React.Component<ISaveCohortProps> {
const classNames = cohortStatsStyles();
return (
<div>
<div className={classNames.section}></div>
<div className={classNames.section} />
<div className={classNames.subsection}>
<div className={classNames.header}>
{localization.ErrorAnalysis.cohortInfo}

4
libs/core-ui/src/lib/Cohort/EditCohort/EditCohort.tsx
Просмотреть файл

@ -95,8 +95,8 @@ export class EditCohort extends React.Component<
defaultValue={this.state.cohortName}
styles={textFieldStyles}
/>
<CohortStats temporaryCohort={this.props.errorCohort}></CohortStats>
<CohortFilters cohort={this.props.errorCohort}></CohortFilters>
<CohortStats temporaryCohort={this.props.errorCohort} />
<CohortFilters cohort={this.props.errorCohort} />
<DialogFooter>
<Stack
horizontal

4
libs/core-ui/src/lib/Cohort/PredictionPath/PredictionPath.tsx
Просмотреть файл

@ -28,14 +28,14 @@ export class PredictionPath extends React.Component<IPredictionPathProps> {
<div key={index}>
<Stack horizontal tokens={alignmentStackTokens}>
<Stack verticalAlign="center">
<i className={classNames.filterCircle}></i>
<i className={classNames.filterCircle} />
</Stack>
<Stack verticalAlign="center">
<div>{filter}</div>
</Stack>
</Stack>
{index !== filters.length - 1 && (
<div className={classNames.stepBar}></div>
<div className={classNames.stepBar} />
)}
</div>
))}

4
libs/core-ui/src/lib/Cohort/SaveCohort/SaveCohort.tsx
Просмотреть файл

@ -90,11 +90,11 @@ export class SaveCohort extends React.Component<
defaultValue={allDataCopy}
styles={textFieldStyles}
/>
<CohortStats temporaryCohort={this.props.temporaryCohort}></CohortStats>
<CohortStats temporaryCohort={this.props.temporaryCohort} />
<CohortBaseAndFilters
cohort={this.props.temporaryCohort}
baseCohort={this.props.baseCohort}
></CohortBaseAndFilters>
/>
<DialogFooter>
<PrimaryButton
onClick={(): void => {

2
libs/core-ui/src/lib/Cohort/ShiftCohort/ShiftCohort.tsx
Просмотреть файл

@ -108,7 +108,7 @@ export class ShiftCohort extends React.Component<
/>
<CohortStats
temporaryCohort={this.state.savedCohorts[this.state.selectedCohort]}
></CohortStats>
/>
<DialogFooter>
<PrimaryButton onClick={this.onApplyClick.bind(this)} text="Apply" />
<DefaultButton onClick={this.props.onDismiss} text="Cancel" />

2
libs/core-ui/src/lib/components/AxisConfigDialog.tsx
Просмотреть файл

@ -150,7 +150,7 @@ export class AxisConfigDialog extends React.PureComponent<
<Panel
id="AxisConfigPanel"
onDismiss={this.props.onCancel}
isOpen={true}
isOpen
onRenderFooter={this.renderFooter}
isFooterAtBottom={false}
isLightDismiss

2
libs/core-ui/src/lib/components/SVGToolTip.tsx
Просмотреть файл

@ -55,7 +55,7 @@ export class SVGToolTip extends React.Component<
width="80"
y="0"
x="0"
></rect>
/>
{this.props.children}
</g>,
this.state.svgElement

6
libs/dataset-explorer/src/lib/DatasetExplorerTab.tsx
Просмотреть файл

@ -41,7 +41,6 @@ export interface IDatasetExplorerTabState {
yDialogOpen: boolean;
colorDialogOpen: boolean;
selectedCohortIndex: number;
calloutVisible: boolean;
chartProps?: IGenericChartProps;
}
@ -60,7 +59,6 @@ export class DatasetExplorerTab extends React.PureComponent<
super(props);
this.state = {
calloutVisible: false,
colorDialogOpen: false,
selectedCohortIndex: 0,
xDialogOpen: false,
@ -206,7 +204,7 @@ export class DatasetExplorerTab extends React.PureComponent<
ColumnCategories.Outcome
]}
selectedColumn={this.state.chartProps.colorAxis}
canBin={true}
canBin
mustBin={false}
canDither={false}
onAccept={this.onColorSet}
@ -242,7 +240,7 @@ export class DatasetExplorerTab extends React.PureComponent<
)}
</div>
<div className={classNames.horizontalAxisWithPadding}>
<div className={classNames.paddingDiv}></div>
<div className={classNames.paddingDiv} />
<div className={classNames.horizontalAxis}>
<div>
<DefaultButton

6
libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/ErrorAnalysisView/ErrorAnalysisViewTab.tsx
Просмотреть файл

@ -66,11 +66,11 @@ export class ErrorAnalysisViewTab extends React.PureComponent<
public render(): React.ReactNode {
return (
<Stack grow={true} tokens={{ padding: "16px 24px" }}>
<Stack grow tokens={{ padding: "16px 24px" }}>
<Text variant={"xLarge"}>
{localization.ErrorAnalysis.MainMenu.errorAnalysisLabel}
</Text>
<Stack horizontal={true} tokens={{ childrenGap: "10px" }}>
<Stack horizontal tokens={{ childrenGap: "10px" }}>
<Pivot onLinkClick={this.props.handleErrorDetectorChanged}>
<PivotItem
itemKey={ErrorAnalysisOptions.TreeMap}
@ -98,7 +98,7 @@ export class ErrorAnalysisViewTab extends React.PureComponent<
saveFeatures={this.saveFeatures.bind(this)}
features={this.props.features}
importances={this.props.importances}
isEnabled={true}
isEnabled
selectedFeatures={this.props.features}
/>
</Stack>

20
libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/FeatureList/FeatureList.tsx
Просмотреть файл

@ -69,8 +69,6 @@ const checkboxStackTokens: IStackTokens = {
export interface IFeatureListState {
searchedFeatures: string[];
selectedFeatures: string[];
percents: number[];
sortedFeatures: string[];
enableApplyButton: boolean;
lastAppliedFeatures: Set<string>;
tableState: ITableState;
@ -103,10 +101,8 @@ export class FeatureList extends React.Component<
this.state = {
enableApplyButton: false,
lastAppliedFeatures: new Set<string>(this.props.features),
percents: sortedPercents,
searchedFeatures,
selectedFeatures: this.props.selectedFeatures,
sortedFeatures,
tableState
};
this.layerHostId = getId("featuresListHost");
@ -145,9 +141,7 @@ export class FeatureList extends React.Component<
this.props.isEnabled
);
this.setState({
percents: sortedPercents,
searchedFeatures,
sortedFeatures,
tableState
});
this.updateSelection();
@ -211,7 +205,7 @@ export class FeatureList extends React.Component<
this,
theme
)}
selectionPreservedOnEmptyClick={true}
selectionPreservedOnEmptyClick
ariaLabelForSelectionColumn="Toggle selection"
ariaLabelForSelectAllCheckbox="Toggle selection for all items"
checkButtonAriaLabel="Row checkbox"
@ -254,7 +248,7 @@ export class FeatureList extends React.Component<
props?: IDetailsRowProps
): JSX.Element | null => {
if (!props) {
return <div></div>;
return <div />;
}
return (
<DetailsRow rowFieldsAs={this.renderRowFields.bind(this)} {...props} />
@ -266,7 +260,7 @@ export class FeatureList extends React.Component<
return <DetailsRowFields {...props} />;
}
return (
<span data-selection-disabled={true}>
<span data-selection-disabled>
<DetailsRowFields {...props} />
</span>
);
@ -284,7 +278,7 @@ export class FeatureList extends React.Component<
switch (column.key) {
case "checkbox":
if (this.state.selectedFeatures.includes(fieldContent)) {
return <Checkbox checked={true} disabled />;
return <Checkbox checked disabled />;
}
return <Checkbox checked={false} disabled />;
case "importances":
@ -296,13 +290,13 @@ export class FeatureList extends React.Component<
width="100%"
height="4"
rx="5"
></rect>
/>
<rect
fill={theme.palette.neutralSecondary}
width={`${fieldContent}%`}
height="4"
rx="5"
></rect>
/>
</g>
</svg>
);
@ -311,7 +305,7 @@ export class FeatureList extends React.Component<
return <span>{fieldContent}</span>;
}
}
return <span></span>;
return <span />;
}
private updateSelection(): void {

4
libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/FilterTooltip/FilterTooltip.tsx
Просмотреть файл

@ -39,7 +39,7 @@ export class FilterTooltip extends React.Component<IFilterTooltipProps> {
</g>
<g>
<g className={classNames.errorCoverageCell}>
<rect className={classNames.metricBarBlack}></rect>
<rect className={classNames.metricBarBlack} />
<g>
<text className={classNames.smallHeader}>
{localization.ErrorAnalysis.errorCoverage}
@ -50,7 +50,7 @@ export class FilterTooltip extends React.Component<IFilterTooltipProps> {
</g>
</g>
<g className={classNames.errorRateCell}>
<rect className={classNames.metricBarRed}></rect>
<rect className={classNames.metricBarRed} />
<g>
<text className={classNames.smallHeader}>
{localization.ErrorAnalysis.errorRate}

2
libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/InfoCallout/InfoCallout.tsx
Просмотреть файл

@ -47,7 +47,7 @@ export class InfoCallout extends React.Component<
{this.state.isCalloutVisible && (
<Callout
target={"#" + this.props.iconId}
setInitialFocus={true}
setInitialFocus
onDismiss={this.onDismiss}
role="alertdialog"
>

6
libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/InspectionView/InspectionView.tsx
Просмотреть файл

@ -186,7 +186,7 @@ export class InspectionView extends React.PureComponent<
setKey="set"
layoutMode={DetailsListLayoutMode.justified}
onRenderItemColumn={this.renderItemColumn.bind(this)}
selectionPreservedOnEmptyClick={true}
selectionPreservedOnEmptyClick
ariaLabelForSelectionColumn="Toggle selection"
ariaLabelForSelectAllCheckbox="Toggle selection for all items"
checkButtonAriaLabel="Row checkbox"
@ -245,14 +245,14 @@ export class InspectionView extends React.PureComponent<
height: "100%",
width: "20px"
})}
></div>
/>
);
default:
return <span>{fieldContent}</span>;
}
}
return <span></span>;
return <span />;
}
private updateViewedFeatureImportances(

6
libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/MatrixArea/MatrixArea.tsx
Просмотреть файл

@ -99,7 +99,7 @@ export class MatrixArea extends React.PureComponent<
this.state.matrixFeature1 !== this.props.selectedFeature1 ||
this.state.matrixFeature2 !== this.props.selectedFeature2
) {
return <div></div>;
return <div />;
}
const sameFeatureSelected =
this.props.selectedFeature1 === this.props.selectedFeature2;
@ -143,13 +143,13 @@ export class MatrixArea extends React.PureComponent<
<div>
{this.props.selectedFeature2 !== noFeature && !sameFeatureSelected && (
<div className={classNames.matrixLabelBottom}>
<div className={classNames.matrixLabelTab}></div>
<div className={classNames.matrixLabelTab} />
<div>{this.props.selectedFeature2}</div>
</div>
)}
{(this.props.selectedFeature2 === noFeature ||
sameFeatureSelected) && (
<div className={classNames.emptyLabelPadding}></div>
<div className={classNames.emptyLabelPadding} />
)}
<MatrixCells
jsonMatrix={this.state.jsonMatrix}

2
libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/MatrixCells/MatrixCells.tsx
Просмотреть файл

@ -153,7 +153,7 @@ export class MatrixCells extends React.PureComponent<IMatrixCellsProps> {
<div
key={`${i}_${j}category1`}
className={classNames.matrixCellPivot1Categories}
></div>,
/>,
cellData
];
}

4
libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/MatrixFooter/MatrixFooter.tsx
Просмотреть файл

@ -33,7 +33,7 @@ export class MatrixFooter extends React.PureComponent<IMatrixFooterProps> {
<div
key={`${this.props.matrixLength}_${0}category1`}
className={classNames.matrixCellPivot1Categories}
></div>
/>
{this.props.category1Values.map((category: any, i: number) => {
return (
<div
@ -57,7 +57,7 @@ export class MatrixFooter extends React.PureComponent<IMatrixFooterProps> {
<div
key={`${this.props.matrixLength}_${0}category1`}
className={classNames.matrixCellPivot1Categories}
></div>
/>
{this.props.category2Values.map((category: any, i: number) => {
return (
<div

12
libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/MatrixLegend/MatrixLegend.tsx
Просмотреть файл

@ -54,7 +54,7 @@ export class MatrixLegend extends React.Component<IMatrixLegendProps> {
</Text>
<Stack horizontal>
<Stack horizontal>
<div className={classNames.metricBarBlack}></div>
<div className={classNames.metricBarBlack} />
<Stack tokens={cellTokens}>
<div className={classNames.smallHeader}>
{localization.ErrorAnalysis.cells}
@ -62,7 +62,7 @@ export class MatrixLegend extends React.Component<IMatrixLegendProps> {
iconId={this._cellsIconId}
infoText={localization.ErrorAnalysis.cellsInfo}
title={localization.ErrorAnalysis.cellsTitle}
></InfoCallout>
/>
</div>
<div className={classNames.valueBlack}>
{this.props.selectedCohort.cells === 0
@ -72,7 +72,7 @@ export class MatrixLegend extends React.Component<IMatrixLegendProps> {
</Stack>
</Stack>
<Stack horizontal>
<div className={classNames.metricBarBlack}></div>
<div className={classNames.metricBarBlack} />
<Stack tokens={cellTokens}>
<div className={classNames.smallHeader}>
{localization.ErrorAnalysis.errorCoverage}
@ -80,7 +80,7 @@ export class MatrixLegend extends React.Component<IMatrixLegendProps> {
iconId={this._errorCoverageIconId}
infoText={localization.ErrorAnalysis.errorCoverageInfo}
title={localization.ErrorAnalysis.errorCoverageTitle}
></InfoCallout>
/>
</div>
<div className={classNames.valueBlack}>
{this.props.selectedCohort.errorCoverage.toFixed(2)}%
@ -89,7 +89,7 @@ export class MatrixLegend extends React.Component<IMatrixLegendProps> {
</Stack>
<Stack>
<Stack horizontal>
<div className={classNames.metricBarRed}></div>
<div className={classNames.metricBarRed} />
<Stack tokens={cellTokens}>
<div className={classNames.smallHeader}>
{localization.ErrorAnalysis.errorRate}
@ -97,7 +97,7 @@ export class MatrixLegend extends React.Component<IMatrixLegendProps> {
iconId={this._errorRateIconId}
infoText={localization.ErrorAnalysis.errorRateInfo}
title={localization.ErrorAnalysis.errorRateTitle}
></InfoCallout>
/>
</div>
<div className={classNames.valueBlack}>
{this.props.selectedCohort.errorRate.toFixed(2)}%

2
libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/Navigation/Navigation.tsx
Просмотреть файл

@ -122,7 +122,7 @@ export class Navigation extends React.Component<INavigationProps> {
item?: IBreadcrumbItem
): JSX.Element | null => {
if (!item) {
return <div></div>;
return <div />;
}
if (item.onClick) {
return (

4
libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/TabularDataView/TabularDataView.tsx
Просмотреть файл

@ -60,7 +60,7 @@ const onRenderDetailsHeader: IRenderFunction<IDetailsHeaderProps> = (
defaultRender
) => {
if (!props) {
return <div></div>;
return <div />;
}
const onRenderColumnHeaderTooltip: IRenderFunction<IDetailsColumnRenderTooltipProps> = (
tooltipHostProps
@ -122,7 +122,7 @@ export class TabularDataView extends React.Component<
layoutMode={DetailsListLayoutMode.fixedColumns}
constrainMode={ConstrainMode.unconstrained}
onRenderDetailsHeader={onRenderDetailsHeader}
selectionPreservedOnEmptyClick={true}
selectionPreservedOnEmptyClick
ariaLabelForSelectionColumn="Toggle selection"
ariaLabelForSelectAllCheckbox="Toggle selection for all items"
checkButtonAriaLabel="Row checkbox"

8
libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/TreeLegend/TreeLegend.tsx
Просмотреть файл

@ -37,7 +37,7 @@ export class TreeLegend extends React.Component<ITreeLegendProps> {
</Text>
<Stack>
<Stack horizontal>
<div className={classNames.metricBarBlack}></div>
<div className={classNames.metricBarBlack} />
<Stack tokens={cellTokens}>
<div className={classNames.smallHeader}>
{localization.ErrorAnalysis.errorCoverage}
@ -45,7 +45,7 @@ export class TreeLegend extends React.Component<ITreeLegendProps> {
iconId={this._errorCoverageIconId}
infoText={localization.ErrorAnalysis.errorCoverageInfo}
title={localization.ErrorAnalysis.errorCoverageTitle}
></InfoCallout>
/>
</div>
<div className={classNames.valueBlack}>
{this.props.selectedCohort.errorCoverage.toFixed(2)}%
@ -84,7 +84,7 @@ export class TreeLegend extends React.Component<ITreeLegendProps> {
</Stack>
<Stack>
<Stack horizontal>
<div className={classNames.metricBarRed}></div>
<div className={classNames.metricBarRed} />
<Stack tokens={cellTokens}>
<div className={classNames.smallHeader}>
{localization.ErrorAnalysis.errorRate}
@ -92,7 +92,7 @@ export class TreeLegend extends React.Component<ITreeLegendProps> {
iconId={this._errorRateIconId}
infoText={localization.ErrorAnalysis.errorRateInfo}
title={localization.ErrorAnalysis.errorRateTitle}
></InfoCallout>
/>
</div>
<div className={classNames.valueBlack}>
{this.props.selectedCohort.errorRate.toFixed(2)}%

3
libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/TreeViewRenderer/TreeViewNode.tsx
Просмотреть файл

@ -24,9 +24,6 @@ export class TreeViewNode extends React.Component<ITreeViewNodeProps> {
private ref: React.RefObject<SVGGElement>;
public constructor(props: ITreeViewNodeProps) {
super(props);
this.state = {
isMouseOver: false
};
this.ref = React.createRef<SVGGElement>();
}
public render(): React.ReactNode {

4
libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/WhatIf/WhatIf.tsx
Просмотреть файл

@ -117,7 +117,7 @@ export class WhatIf extends React.Component<IWhatIfProps, IWhatIfState> {
isBlocking={false}
onDismiss={this.props.onDismiss}
>
<div className={classNames.divider}></div>
<div className={classNames.divider} />
<div className={classNames.section}>
<div className={classNames.subsection}>
<WhatIfPanel
@ -125,7 +125,7 @@ export class WhatIf extends React.Component<IWhatIfProps, IWhatIfState> {
filterFeatures={this.filterFeatures}
filteredFeatureList={this.state.filteredFeatureList}
isPanelOpen={this.props.isOpen}
isInPanel={true}
isInPanel
jointDataset={this.context.jointDataset}
metadata={this.context.modelMetadata}
openPanel={(): void => {

13
libs/error-analysis/src/lib/ErrorAnalysisDashboard/ErrorAnalysisDashboard.tsx
Просмотреть файл

@ -70,7 +70,6 @@ import {
IMatrixAreaState,
IMatrixFilterState
} from "./MatrixFilterState";
import { ModelExplanationUtils } from "./ModelExplanationUtils";
import {
ITreeViewRendererState,
createInitialTreeViewState
@ -91,7 +90,6 @@ export class ErrorAnalysisDashboard extends React.PureComponent<
public constructor(props: IErrorAnalysisDashboardProps) {
super(props);
this.setSortVector = this.setSortVector.bind(this);
if (this.props.locale) {
localization.setLanguage(this.props.locale);
}
@ -301,7 +299,6 @@ export class ErrorAnalysisDashboard extends React.PureComponent<
? WeightVectors.AbsAvg
: 0,
selectedWhatIfIndex: undefined,
sortVector: undefined,
treeViewState: createInitialTreeViewState(),
viewType: ViewTypeKeys.ErrorAnalysisView,
weightVectorLabels,
@ -516,7 +513,7 @@ export class ErrorAnalysisDashboard extends React.PureComponent<
selectedKey={this.state.activeGlobalTab}
onLinkClick={this.handleGlobalTabClick}
linkSize={PivotLinkSize.normal}
headersOnly={true}
headersOnly
styles={{ root: classNames.pivotLabelWrapper }}
>
{this.pivotItems.map((props) => (
@ -725,14 +722,6 @@ export class ErrorAnalysisDashboard extends React.PureComponent<
}
};
private setSortVector(): void {
this.setState({
sortVector: ModelExplanationUtils.getSortIndices(
this.state.cohorts[0].cohort.calculateAverageImportance()
).reverse()
});
}
private viewExplanation(): void {
this.setState({
openFeatureList: false,

2
libs/fairness/src/lib/Controls/EmptyHeader.tsx
Просмотреть файл

@ -12,7 +12,7 @@ export class EmptyHeader extends React.Component {
horizontalAlign="space-between"
verticalAlign="center"
style={{ height: "36px" }}
></Stack>
/>
);
}
}

4
libs/fairness/src/lib/Controls/FairnessPicker.tsx
Просмотреть файл

@ -57,13 +57,13 @@ export class FairnessPicker extends React.PureComponent<
onChange={this.onFairnessChange}
options={options}
ariaLabel={"Fairness selector"}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
/>
</div>
{this.state.showCallout && (
<Callout
target={"#" + this._fairnessDropdownHelpId}
setInitialFocus={true}
setInitialFocus
onDismiss={this.onDismiss}
role="alertdialog"
>

2
libs/fairness/src/lib/Controls/FairnessTab.tsx
Просмотреть файл

@ -43,7 +43,7 @@ export class FairnessTab extends React.PureComponent<IFairnessTabProps> {
/>
</Stack>
<SelectionList
grouped={true}
grouped
defaultSelectedKey={
this.props.fairnessPickerProps.selectedFairnessKey
}

6
libs/fairness/src/lib/Controls/FeatureTab.tsx
Просмотреть файл

@ -35,7 +35,6 @@ export interface IFeatureTabProps extends IWizardTabProps {
}
interface IState {
expandedBins: Set<number>;
editingFeatureIndex: number | undefined;
}
@ -56,8 +55,7 @@ export class FeatureTab extends React.PureComponent<IFeatureTabProps, IState> {
}
});
this.state = {
editingFeatureIndex: undefined,
expandedBins: new Set<number>()
editingFeatureIndex: undefined
};
this.columns = [
{
@ -136,7 +134,7 @@ export class FeatureTab extends React.PureComponent<IFeatureTabProps, IState> {
columns={this.columns}
selectionMode={SelectionMode.single}
selection={this.selection}
selectionPreservedOnEmptyClick={true}
selectionPreservedOnEmptyClick
getKey={this.getKey}
setKey="set"
layoutMode={DetailsListLayoutMode.justified}

2
libs/fairness/src/lib/Controls/ModalHelp.tsx
Просмотреть файл

@ -52,7 +52,7 @@ export class ModalHelp extends React.PureComponent<IModalHelpProps, IState> {
titleAriaId="intro modal"
isOpen={this.state?.showModalHelp}
onDismiss={this.handleCloseModalHelp}
isModeless={true}
isModeless
containerClassName={sharedStyles.modalContentHelp}
>
<div style={{ display: "flex" }}>

6
libs/fairness/src/lib/Controls/ModelComparisonChart.tsx
Просмотреть файл

@ -53,7 +53,6 @@ export interface IModelComparisonProps {
}
export interface IState {
showModalIntro?: boolean;
showModalHelp?: boolean;
featureKey?: string;
performanceKey?: string;
@ -140,8 +139,7 @@ export class ModelComparisonChart extends React.Component<
super(props);
this.state = {
fairnessKey: this.props.fairnessPickerProps.selectedFairnessKey,
performanceKey: this.props.performancePickerProps.selectedPerformanceKey,
showModalIntro: this.props.showIntro
performanceKey: this.props.performancePickerProps.selectedPerformanceKey
};
}
@ -249,7 +247,7 @@ export class ModelComparisonChart extends React.Component<
titleAriaId="help modal"
isOpen={this.state.showModalHelp}
onDismiss={this.handleCloseModalHelp}
isModeless={true}
isModeless
containerClassName={styles.modalContentHelp}
>
<IconButton

2
libs/fairness/src/lib/Controls/OutcomePlot.tsx
Просмотреть файл

@ -141,7 +141,7 @@ export class OutcomePlot extends React.PureComponent<IOutcomePlotProps> {
>
<div className={sharedStyles.chartWrapper}>
<Stack horizontal horizontalAlign={"space-between"}>
<div className={sharedStyles.chartSubHeader}></div>
<div className={sharedStyles.chartSubHeader} />
<ModalHelp theme={theme} strings={outcomeChartModalHelpStrings} />
</Stack>
<div className={sharedStyles.chartBody}>

4
libs/fairness/src/lib/Controls/PerformancePicker.tsx
Просмотреть файл

@ -56,13 +56,13 @@ export class PerformancePicker extends React.PureComponent<
onChange={this.onPerformanceChange}
options={options}
ariaLabel={"Performance selector"}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
/>
</div>
{this.state.showCallout && (
<Callout
target={"#" + this._performanceDropdownHelpId}
setInitialFocus={true}
setInitialFocus
onDismiss={this.onDismiss}
role="alertdialog"
>

56
libs/fairness/src/lib/Controls/PerformancePlot.tsx
Просмотреть файл

@ -18,7 +18,7 @@ import { SharedStyles } from "../Shared.styles";
import { FormatMetrics } from "./../util/FormatMetrics";
import { IFairnessContext } from "./../util/IFairnessContext";
import { ModalHelp } from "./ModalHelp";
import { PerformancePlotStyles } from "./PerformancePlot.styles";
import { PerformancePlotLegend } from "./PerformancePlotLegend";
interface IPerformancePlotProps {
dashboardContext: IFairnessContext;
@ -231,7 +231,7 @@ export class PerformancePlot extends React.PureComponent<
>
<div className={sharedStyles.chartWrapper}>
<Stack horizontal horizontalAlign={"space-between"}>
<div className={sharedStyles.chartSubHeader}></div>
<div className={sharedStyles.chartSubHeader} />
<ModalHelp
theme={theme}
strings={performanceChartModalHelpStrings}
@ -266,57 +266,7 @@ export class PerformancePlot extends React.PureComponent<
}
}
interface IPerformancePlotLegendProps {
export interface IPerformancePlotLegendProps {
showSubtitle: boolean;
useOverUnderPrediction: boolean;
}
export class PerformancePlotLegend extends React.PureComponent<
IPerformancePlotLegendProps
> {
public render(): React.ReactNode {
const styles = PerformancePlotStyles();
const sharedStyles = SharedStyles();
return (
<Stack horizontal tokens={{ childrenGap: "l1", padding: "0 0 0 0" }}>
<div className={sharedStyles.textRow}>
<div
className={sharedStyles.colorBlock}
style={{ backgroundColor: chartColors[1] }}
/>
<div>
<div className={styles.legendTitle}>
{this.props.useOverUnderPrediction
? localization.Fairness.Report.underestimationError
: localization.Fairness.Report.falseNegativeRate}
</div>
{this.props.showSubtitle && (
<div className={styles.legendSubtitle}>
{localization.Fairness.Report.underpredictionExplanation}
</div>
)}
</div>
</div>
<div className={sharedStyles.textRow}>
<div
className={sharedStyles.colorBlock}
style={{ backgroundColor: chartColors[0] }}
/>
<div>
<div className={styles.legendTitle}>
{this.props.useOverUnderPrediction
? localization.Fairness.Report.overestimationError
: localization.Fairness.Report.falsePositiveRate}
</div>
{this.props.showSubtitle && (
<div className={styles.legendSubtitle}>
{localization.Fairness.Report.overpredictionExplanation}
</div>
)}
</div>
</div>
</Stack>
);
}
}

62
libs/fairness/src/lib/Controls/PerformancePlotLegend.tsx Normal file
Просмотреть файл

@ -0,0 +1,62 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { localization } from "@responsible-ai/localization";
import { chartColors } from "@responsible-ai/mlchartlib";
import { Stack } from "office-ui-fabric-react";
import React from "react";
import { SharedStyles } from "../Shared.styles";
import { IPerformancePlotLegendProps } from "./PerformancePlot";
import { PerformancePlotStyles } from "./PerformancePlot.styles";
export class PerformancePlotLegend extends React.PureComponent<
IPerformancePlotLegendProps
> {
public render(): React.ReactNode {
const styles = PerformancePlotStyles();
const sharedStyles = SharedStyles();
return (
<Stack horizontal tokens={{ childrenGap: "l1", padding: "0 0 0 0" }}>
<div className={sharedStyles.textRow}>
<div
className={sharedStyles.colorBlock}
style={{ backgroundColor: chartColors[1] }}
/>
<div>
<div className={styles.legendTitle}>
{this.props.useOverUnderPrediction
? localization.Fairness.Report.underestimationError
: localization.Fairness.Report.falseNegativeRate}
</div>
{this.props.showSubtitle && (
<div className={styles.legendSubtitle}>
{localization.Fairness.Report.underpredictionExplanation}
</div>
)}
</div>
</div>
<div className={sharedStyles.textRow}>
<div
className={sharedStyles.colorBlock}
style={{ backgroundColor: chartColors[0] }}
/>
<div>
<div className={styles.legendTitle}>
{this.props.useOverUnderPrediction
? localization.Fairness.Report.overestimationError
: localization.Fairness.Report.falsePositiveRate}
</div>
{this.props.showSubtitle && (
<div className={styles.legendSubtitle}>
{localization.Fairness.Report.overpredictionExplanation}
</div>
)}
</div>
</div>
</Stack>
);
}
}

4
libs/interpret/src/lib/MLIDashboard/Controls/Callout/LabelWithCallout.tsx
Просмотреть файл

@ -61,9 +61,9 @@ export class LabelWithCallout extends React.Component<
)}
{this.state.showCallout && (
<FabricCallout
doNotLayer={true}
doNotLayer
target={`#${id}`}
setInitialFocus={true}
setInitialFocus
onDismiss={this.toggleCallout}
role="alertdialog"
styles={{ container: FabricStyles.calloutContainer }}

4
libs/interpret/src/lib/MLIDashboard/Controls/Cohort/CohortBar.tsx
Просмотреть файл

@ -104,7 +104,7 @@ export class CohortBar extends React.Component<
deleteIsDisabled={this.props.cohorts.length === 1}
/>
) : (
<Panel isOpen={true} onDismiss={this.hideEditList} isLightDismiss>
<Panel isOpen onDismiss={this.hideEditList} isLightDismiss>
<DetailsList
items={this.props.cohorts}
selectionMode={SelectionMode.none}
@ -189,7 +189,7 @@ export class CohortBar extends React.Component<
return (
<Stack>
<Text>{cohort.name}</Text>
<Stack horizontal={true} tokens={{ childrenGap: "s1" }}>
<Stack horizontal tokens={{ childrenGap: "s1" }}>
{index && (
<Link onClick={this.editCohort.bind(this, index)}>
{localization.Interpret.CohortBanner.editCohort}

2
libs/interpret/src/lib/MLIDashboard/Controls/Cohort/CohortEditor.tsx
Просмотреть файл

@ -102,7 +102,7 @@ export class CohortEditor extends React.PureComponent<
return 0;
}} // https://github.com/microsoft/fluentui/issues/6476
id="cohortEditPanel"
isOpen={true}
isOpen
onDismiss={this.props.closeCohortEditorPanel}
onRenderFooter={this.renderFooter}
isFooterAtBottom

4
libs/interpret/src/lib/MLIDashboard/Controls/Cohort/CohortEditorFilter.tsx
Просмотреть файл

@ -155,7 +155,7 @@ export class CohortEditorFilter extends React.Component<
selectedKey={this.props.openedFilter.arg}
onChange={this.props.setCategoricalValues}
options={categoricalOptions}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
calloutProps={FabricStyles.calloutProps}
styles={FabricStyles.limitedSizeMenuDropdown}
/>
@ -176,7 +176,7 @@ export class CohortEditorFilter extends React.Component<
selectedKey={this.props.openedFilter.method}
onChange={this.props.setComparison}
options={this.comparisonOptions}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
calloutProps={FabricStyles.calloutProps}
/>
{selectedMeta.featureRange &&

2
libs/interpret/src/lib/MLIDashboard/Controls/DependencePlot/DependencePlot.tsx
Просмотреть файл

@ -115,7 +115,7 @@ export class DependencePlot extends React.PureComponent<IDependecePlotProps> {
</div>
</div>
<div className={classNames.horizontalAxisWithPadding}>
<div className={classNames.paddingDiv}></div>
<div className={classNames.paddingDiv} />
<div className={classNames.horizontalAxis}>
<Text variant={"medium"}>
{

2
libs/interpret/src/lib/MLIDashboard/Controls/EbmExplanation.tsx
Просмотреть файл

@ -228,7 +228,7 @@ export class EbmExplanation extends React.PureComponent<IEbmProps, IEbmState> {
onChange={this.onFeatureSelect}
options={this.featureOptions}
ariaLabel={"feature picker"}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
styles={FabricStyles.smallDropdownStyle}
/>
</div>

10
libs/interpret/src/lib/MLIDashboard/Controls/FeatureImportance/Beehive.tsx
Просмотреть файл

@ -474,7 +474,7 @@ export class Beehive extends React.PureComponent<
onChange={this.setChart}
options={this.props.chartTypeOptions}
ariaLabel={"chart type picker"}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
styles={FabricStyles.smallDropdownStyle}
/>
{this.colorOptions.length > 1 && (
@ -485,7 +485,7 @@ export class Beehive extends React.PureComponent<
onChange={this.setColor}
options={this.colorOptions}
ariaLabel={"color picker"}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
styles={FabricStyles.smallDropdownStyle}
/>
)}
@ -521,7 +521,7 @@ export class Beehive extends React.PureComponent<
step={1}
value={this.props.config.topK}
onChange={(value: number): void => this.setK(value)}
showValue={true}
showValue
/>
</div>
{this.props.dashboardContext.explanationContext.modelMetadata
@ -545,7 +545,7 @@ export class Beehive extends React.PureComponent<
onChange={weightContext.onSelection}
options={weightContext.options}
ariaLabel={"Cross-class weighting selector"}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
styles={FabricStyles.smallDropdownStyle}
/>
</div>
@ -554,7 +554,7 @@ export class Beehive extends React.PureComponent<
{this.state.calloutContent && (
<Callout
target={"#" + this.state.calloutId}
setInitialFocus={true}
setInitialFocus
onDismiss={this.onDismiss}
role="alertdialog"
>

8
libs/interpret/src/lib/MLIDashboard/Controls/FeatureImportance/FeatureImportanceBar.tsx
Просмотреть файл

@ -80,7 +80,7 @@ export class FeatureImportanceBar extends React.PureComponent<
onChange={this.setChart}
options={this.props.chartTypeOptions}
ariaLabel={"chart type picker"}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
styles={FabricStyles.smallDropdownStyle}
/>
)}
@ -106,7 +106,7 @@ export class FeatureImportanceBar extends React.PureComponent<
step={1}
value={this.props.config.topK}
onChange={this.setTopK}
showValue={true}
showValue
ariaLabel={
localization.Interpret.AggregateImportance.topKFeatures
}
@ -119,7 +119,7 @@ export class FeatureImportanceBar extends React.PureComponent<
onChange={this.onSortSelect}
options={this.sortOptions}
ariaLabel={"sort selector"}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
styles={FabricStyles.smallDropdownStyle}
/>
)}
@ -127,7 +127,7 @@ export class FeatureImportanceBar extends React.PureComponent<
{this.state.isCalloutVisible && (
<Callout
target={"#" + this._iconId}
setInitialFocus={true}
setInitialFocus
onDismiss={this.onDismiss}
role="alertdialog"
>

10
libs/interpret/src/lib/MLIDashboard/Controls/FeatureImportance/Violin.tsx
Просмотреть файл

@ -346,7 +346,7 @@ export class Violin extends React.PureComponent<
onChange={this.setChart}
options={this.props.chartTypeOptions}
ariaLabel={"chart type picker"}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
styles={FabricStyles.smallDropdownStyle}
/>
{this.props.dashboardContext.explanationContext.modelMetadata
@ -359,7 +359,7 @@ export class Violin extends React.PureComponent<
onChange={this.onGroupSelect}
options={this.groupByOptions}
ariaLabel={"chart type picker"}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
styles={FabricStyles.smallDropdownStyle}
/>
)}
@ -390,7 +390,7 @@ export class Violin extends React.PureComponent<
step={1}
value={this.props.config.topK}
onChange={this.setTopK}
showValue={true}
showValue
/>
</div>
{this.props.dashboardContext.explanationContext.modelMetadata
@ -417,7 +417,7 @@ export class Violin extends React.PureComponent<
onChange={weightContext.onSelection}
options={weightContext.options}
ariaLabel={"Cross-class weighting selector"}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
styles={FabricStyles.smallDropdownStyle}
/>
</div>
@ -426,7 +426,7 @@ export class Violin extends React.PureComponent<
{this.state.calloutContent && (
<Callout
target={"#" + this.state.calloutId}
setInitialFocus={true}
setInitialFocus
onDismiss={this.onDismiss}
role="alertdialog"
>

19
libs/interpret/src/lib/MLIDashboard/Controls/GlobalExplanationTab/GlobalExplanationTab.tsx
Просмотреть файл

@ -57,14 +57,11 @@ export interface IGlobalExplanationTabProps {
interface IGlobalExplanationTabState {
topK: number;
minK: number;
maxK: number;
sortingSeriesIndex: number;
sortArray: number[];
seriesIsActive: boolean[];
selectedCohortIndex: number;
selectedFeatureIndex?: number;
crossClassInfoVisible: boolean;
chartType: ChartTypes;
globalBarSettings?: IGlobalBarSettings;
dependenceProps?: IGenericChartProps;
@ -86,7 +83,6 @@ export class GlobalExplanationTab extends React.PureComponent<
: undefined;
private defaultMinK = 4;
private defaultMaxK = 30;
public constructor(props: IGlobalExplanationTabProps) {
super(props);
@ -99,9 +95,6 @@ export class GlobalExplanationTab extends React.PureComponent<
activeSeries: [],
chartType: ChartTypes.Bar,
cohortSeries: [],
crossClassInfoVisible: false,
maxK: this.defaultMaxK,
minK: this.defaultMinK,
selectedCohortIndex: initialCohortIndex,
seriesIsActive: this.props.cohorts.map(() => true),
sortArray: [],
@ -115,16 +108,6 @@ export class GlobalExplanationTab extends React.PureComponent<
return;
}
const minK = Math.min(
4,
this.context.jointDataset.localExplanationFeatureCount
);
const maxK = Math.min(
this.defaultMaxK,
this.context.jointDataset.localExplanationFeatureCount
);
const sortArray = ModelExplanationUtils.getSortIndices(
this.props.cohorts[
this.state.selectedCohortIndex
@ -139,8 +122,6 @@ export class GlobalExplanationTab extends React.PureComponent<
),
cohortSeries,
globalBarSettings: this.getDefaultSettings(),
maxK,
minK,
sortArray
});
}

2
libs/interpret/src/lib/MLIDashboard/Controls/GlobalExplanationTab/SidePanel.tsx
Просмотреть файл

@ -44,7 +44,6 @@ export interface ISidePanelProps {
onChartTypeChange(chartType: ChartTypes): void;
}
interface ISidePanelState {
crossClassInfoVisible: boolean;
weightOptions: IDropdownOption[] | undefined;
}
export class SidePanel extends React.Component<
@ -64,7 +63,6 @@ export class SidePanel extends React.Component<
public constructor(props: ISidePanelProps) {
super(props);
this.state = {
crossClassInfoVisible: false,
weightOptions: this.getWeightOptions()
};
}

3
libs/interpret/src/lib/MLIDashboard/Controls/GlobalOnlyChart/GlobalOnlyChart.tsx
Просмотреть файл

@ -14,14 +14,12 @@ import { localization } from "@responsible-ai/localization";
import { Icon, Slider, Text } from "office-ui-fabric-react";
import React from "react";
import { FeatureKeys } from "../../SharedComponents/IBarChartConfig";
import { FeatureImportanceBar } from "../FeatureImportanceBar/FeatureImportanceBar";
import { globalTabStyles } from "../GlobalExplanationTab/GlobalExplanationTab.styles";
import { IGlobalSeries } from "../GlobalExplanationTab/IGlobalSeries";
export interface IGlobalOnlyChartState {
topK: number;
sortingSeriesKey: number | string;
sortArray: number[];
globalSeries: IGlobalSeries[];
featureNames: string[];
@ -72,7 +70,6 @@ export class GlobalOnlyChart extends React.PureComponent<
sortArray: ModelExplanationUtils.buildSortedVector(
globalImportance
).reverse(),
sortingSeriesKey: FeatureKeys.AbsoluteGlobal,
topK: Math.min(
4,
this.context.precomputedExplanations?.globalFeatureImportance?.scores

4
libs/interpret/src/lib/MLIDashboard/Controls/ICEPlot.tsx
Просмотреть файл

@ -299,7 +299,7 @@ export class ICEPlot extends React.Component<IIcePlotProps, IIcePlotState> {
? this.state.rangeView.featureIndex
: undefined
}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
styles={FabricStyles.defaultDropdownStyle}
/>
</div>
@ -311,7 +311,7 @@ export class ICEPlot extends React.Component<IIcePlotProps, IIcePlotState> {
selectedKey={
this.state.rangeView.selectedOptionKeys as string[]
}
allowFreeform={true}
allowFreeform
autoComplete="on"
options={this.state.rangeView.categoricalOptions}
onChange={this.onCategoricalRangeChanged}

2
libs/interpret/src/lib/MLIDashboard/Controls/ModelPerformanceTab/ModelPerformanceTab.tsx
Просмотреть файл

@ -212,7 +212,7 @@ export class ModelPerformanceTab extends React.PureComponent<
</div>
</div>
<div className={classNames.horizontalAxisWithPadding}>
<div className={classNames.paddingDiv}></div>
<div className={classNames.paddingDiv} />
<div className={classNames.horizontalAxis}>
<div>
<DefaultButton

2
libs/interpret/src/lib/MLIDashboard/Controls/MultiICEPlot/MultiICEPlot.tsx
Просмотреть файл

@ -226,7 +226,7 @@ export class MultiICEPlot extends React.PureComponent<
selectedKey={
this.state.rangeView.selectedOptionKeys as string[]
}
allowFreeform={true}
allowFreeform
autoComplete="on"
options={this.state.rangeView.categoricalOptions}
onChange={this.onCategoricalRangeChanged}

7
libs/interpret/src/lib/MLIDashboard/Controls/Scatter/DataExploration.tsx
Просмотреть файл

@ -19,7 +19,6 @@ export class DataExploration extends React.PureComponent<IScatterProps> {
private plotlyProps: IPlotlyProperty;
public constructor(props: IScatterProps) {
super(props);
this.state = { isCalloutVisible: false };
this.plotlyProps =
this.props.plotlyProps !== undefined
? _.cloneDeep(this.props.plotlyProps)
@ -73,7 +72,7 @@ export class DataExploration extends React.PureComponent<IScatterProps> {
label={localization.Interpret.ExplanationScatter.xValue}
ariaLabel="x picker"
selectedKey={this.plotlyProps.data[0].xAccessor}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
styles={FabricStyles.defaultDropdownStyle}
/>
</div>
@ -84,7 +83,7 @@ export class DataExploration extends React.PureComponent<IScatterProps> {
label={localization.Interpret.ExplanationScatter.colorValue}
ariaLabel="color picker"
selectedKey={initialColorOption}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
styles={FabricStyles.defaultDropdownStyle}
/>
</div>
@ -97,7 +96,7 @@ export class DataExploration extends React.PureComponent<IScatterProps> {
label={localization.Interpret.ExplanationScatter.yValue}
ariaLabel="y picker"
selectedKey={this.plotlyProps.data[0].yAccessor}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
styles={FabricStyles.defaultDropdownStyle}
/>
</div>

10
libs/interpret/src/lib/MLIDashboard/Controls/Scatter/ExplanationExploration.tsx
Просмотреть файл

@ -96,7 +96,7 @@ export class ExplanationExploration extends React.PureComponent<
label={localization.Interpret.ExplanationScatter.xValue}
ariaLabel="x picker"
selectedKey={this.plotlyProps.data[0].xAccessor}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
styles={FabricStyles.defaultDropdownStyle}
/>
</div>
@ -107,7 +107,7 @@ export class ExplanationExploration extends React.PureComponent<
label={localization.Interpret.ExplanationScatter.colorValue}
ariaLabel="color picker"
selectedKey={initialColorOption}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
styles={FabricStyles.defaultDropdownStyle}
/>
</div>
@ -120,7 +120,7 @@ export class ExplanationExploration extends React.PureComponent<
label={localization.Interpret.ExplanationScatter.yValue}
ariaLabel="y picker"
selectedKey={this.plotlyProps.data[0].yAccessor}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
styles={FabricStyles.defaultDropdownStyle}
/>
</div>
@ -146,7 +146,7 @@ export class ExplanationExploration extends React.PureComponent<
onChange={weightContext.onSelection}
options={weightContext.options}
ariaLabel={"Cross-class weighting selector"}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
styles={FabricStyles.defaultDropdownStyle}
/>
</div>
@ -155,7 +155,7 @@ export class ExplanationExploration extends React.PureComponent<
{this.state.isCalloutVisible && (
<Callout
target={"#" + this.iconId}
setInitialFocus={true}
setInitialFocus
onDismiss={this.onDismiss}
role="alertdialog"
>

4
libs/interpret/src/lib/MLIDashboard/Controls/SinglePointFeatureImportance.tsx
Просмотреть файл

@ -119,7 +119,7 @@ export class SinglePointFeatureImportance extends React.PureComponent<
step={1}
value={this.props.config.topK}
onChange={this.setTopK}
showValue={true}
showValue
/>
{this.sortOptions.length > 1 && (
<ComboBox
@ -128,7 +128,7 @@ export class SinglePointFeatureImportance extends React.PureComponent<
onChange={this.onSortSelect}
options={this.sortOptions}
ariaLabel={"sort selector"}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
styles={FabricStyles.smallDropdownStyle}
/>
)}

6
libs/interpret/src/lib/MLIDashboard/Controls/WhatIfTab/CustomPredictionLabels.tsx
Просмотреть файл

@ -154,7 +154,7 @@ export class CustomPredictionLabels extends React.Component<
<IconButton
className={classNames.tooltipHost}
iconProps={{ iconName: "More" }}
></IconButton>
/>
</TooltipHost>
<div>
<div>
@ -184,8 +184,8 @@ export class CustomPredictionLabels extends React.Component<
<IconButton
className={classNames.tooltipHost}
iconProps={{ iconName: "More" }}
disabled={true}
></IconButton>
disabled
/>
</div>
<div>
<div>

2
libs/interpret/src/lib/MLIDashboard/Controls/WhatIfTab/ExistingPredictionLabels.tsx
Просмотреть файл

@ -134,7 +134,7 @@ export class ExistingPredictionLabels extends React.Component<
<IconButton
className={classNames.tooltipHost}
iconProps={{ iconName: "More" }}
></IconButton>
/>
</TooltipHost>
<div>
{trueClass !== undefined && (

12
libs/interpret/src/lib/MLIDashboard/Controls/WhatIfTab/LocalImportancePlots.tsx
Просмотреть файл

@ -222,9 +222,9 @@ export class LocalImportancePlots extends React.Component<
)}
{this.state.crossClassInfoVisible && (
<Callout
doNotLayer={true}
doNotLayer
target={"#cross-class-weight-info"}
setInitialFocus={true}
setInitialFocus
onDismiss={this.toggleCrossClassInfo}
directionalHint={DirectionalHint.leftCenter}
role="alertdialog"
@ -297,9 +297,9 @@ export class LocalImportancePlots extends React.Component<
/>
{this.state.iceTooltipVisible && (
<Callout
doNotLayer={true}
doNotLayer
target={"#explanation-info"}
setInitialFocus={true}
setInitialFocus
onDismiss={this.toggleICETooltip}
role="alertdialog"
styles={{ container: FabricStyles.calloutContainer }}
@ -350,7 +350,7 @@ export class LocalImportancePlots extends React.Component<
label={localization.Interpret.IcePlot.featurePickerLabel}
ariaLabel="feature picker"
selectedKey={this.state.selectedFeatureKey}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
calloutProps={FabricStyles.calloutProps}
styles={FabricStyles.limitedSizeMenuDropdown}
/>
@ -363,7 +363,7 @@ export class LocalImportancePlots extends React.Component<
label={localization.Interpret.WhatIfTab.classPickerLabel}
ariaLabel="class picker"
selectedKey={this.state.selectedICEClass}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
calloutProps={FabricStyles.calloutProps}
styles={FabricStyles.limitedSizeMenuDropdown}
/>

2
libs/interpret/src/lib/MLIDashboard/Controls/WhatIfTab/WhatIfPanel.tsx
Просмотреть файл

@ -170,7 +170,7 @@ export class WhatIfPanel extends React.Component<IWhatIfPanelProps> {
key={item.key}
label={metaInfo.abbridgedLabel}
autoComplete={"on"}
allowFreeform={true}
allowFreeform
selectedKey={this.props.temporaryPoint?.[item.key]}
options={item.data.categoricalOptions}
onChange={this.setCustomRowPropertyDropdown.bind(

14
libs/interpret/src/lib/MLIDashboard/Controls/WhatIfTab/WhatIfTab.tsx
Просмотреть файл

@ -68,14 +68,8 @@ export interface IWhatIfTabState {
selectedPointsIndexes: number[];
pointIsActive: boolean[];
customPointIsActive: boolean[];
topK: number;
sortArray: number[];
sortingSeriesIndex: number | undefined;
secondaryChartChoice: string;
selectedFeatureKey: string;
selectedICEClass: number;
crossClassInfoVisible: boolean;
iceTooltipVisible: boolean;
}
export class WhatIfTab extends React.PureComponent<
@ -105,26 +99,20 @@ export class WhatIfTab extends React.PureComponent<
super(props);
this.state = {
crossClassInfoVisible: false,
customPointIsActive: [],
customPoints: [],
editingDataCustomIndex: undefined,
featuresOption: [],
filteredFeatureList: [],
iceTooltipVisible: false,
isPanelOpen: this.props.invokeModel !== undefined,
pointIsActive: [],
request: undefined,
secondaryChartChoice: WhatIfConstants.featureImportanceKey,
selectedCohortIndex: 0,
selectedFeatureKey: JointDataset.DataLabelRoot + "0",
selectedICEClass: 0,
selectedPointsIndexes: [],
selectedWhatIfRootIndex: 0,
showSelectionWarning: false,
sortArray: [],
sortingSeriesIndex: undefined,
topK: 4,
xDialogOpen: false,
yDialogOpen: false
};
@ -457,7 +445,7 @@ export class WhatIfTab extends React.PureComponent<
)}
</div>
<div className={classNames.horizontalAxisWithPadding}>
<div className={classNames.paddingDiv}></div>
<div className={classNames.paddingDiv} />
<div className={classNames.horizontalAxis}>
<div>
<DefaultButton

4
libs/interpret/src/lib/MLIDashboard/ExplanationDashboard.tsx
Просмотреть файл

@ -748,7 +748,7 @@ export class ExplanationDashboard extends React.Component<
onLinkClick={this.handleGlobalTabClick}
linkFormat={PivotLinkFormat.tabs}
linkSize={PivotLinkSize.normal}
headersOnly={true}
headersOnly
styles={FabricStyles.verticalTabsStyle}
>
{this.pivotItems.map((props) => (
@ -860,7 +860,7 @@ export class ExplanationDashboard extends React.Component<
onLinkClick={this.handleLocalTabClick}
linkFormat={PivotLinkFormat.tabs}
linkSize={PivotLinkSize.normal}
headersOnly={true}
headersOnly
styles={FabricStyles.verticalTabsStyle}
>
<PivotItem

6
libs/interpret/src/lib/MLIDashboard/NewExplanationDashboard.tsx
Просмотреть файл

@ -144,7 +144,7 @@ export class NewExplanationDashboard extends React.PureComponent<
{this.props.dashboardType === "ModelPerformance" ? (
<ModelPerformanceTab />
) : (
<Stack horizontal={true}>
<Stack horizontal>
<Stack.Item>
<CohortBar
cohorts={this.state.cohorts}
@ -159,7 +159,7 @@ export class NewExplanationDashboard extends React.PureComponent<
selectedKey={this.state.activeGlobalTab}
onLinkClick={this.handleGlobalTabClick}
linkSize={PivotLinkSize.normal}
headersOnly={true}
headersOnly
id="DashboardPivot"
>
{this.pivotItems.map((props) => (
@ -170,7 +170,7 @@ export class NewExplanationDashboard extends React.PureComponent<
GlobalTabKeys.ModelPerformance && <ModelPerformanceTab />}
{this.state.activeGlobalTab ===
GlobalTabKeys.DataExploration && (
<DatasetExplorerTab showCohortSelection={true} />
<DatasetExplorerTab showCohortSelection />
)}
{this.state.activeGlobalTab ===
GlobalTabKeys.ExplanationTab && (

4
libs/interpret/src/lib/MLIDashboard/SharedComponents/BinningControl.tsx
Просмотреть файл

@ -75,7 +75,7 @@ export class BinningControl extends React.PureComponent<
label={localization.Interpret.IcePlot.featurePickerLabel}
ariaLabel="feature picker"
selectedKey={this.state ? this.state.featureIndex : undefined}
useComboBoxAsMenuWidth={true}
useComboBoxAsMenuWidth
styles={FabricStyles.defaultDropdownStyle}
/>
</div>
@ -85,7 +85,7 @@ export class BinningControl extends React.PureComponent<
<ComboBox
multiSelect
selectedKey={this.state.selectedOptionKeys}
allowFreeform={true}
allowFreeform
autoComplete="on"
options={this.state.categoricalOptions}
onChange={this.onCategoricalRangeChanged}

2
libs/interpret/src/lib/MLIDashboard/SharedComponents/FeatureEditingTile.tsx
Просмотреть файл

@ -85,7 +85,7 @@ export class FeatureEditingTile extends React.Component<
{this.props.enumeratedValues !== undefined && (
<ComboBox
text={this.state.value}
allowFreeform={true}
allowFreeform
ariaLabel={this.props.featureName}
autoComplete="on"
options={this.options}