Skip to content

Commit

Permalink
fix cohort info styling (#1277)
Browse files Browse the repository at this point in the history
  • Loading branch information
@romanlutz
romanlutz committed Mar 18, 2022
1 parent c762cbd commit dda3c6d
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 146 deletions.
29 changes: 2 additions & 27 deletions libs/core-ui/src/lib/Cohort/CohortInfo/CohortInfo.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,47 +4,22 @@
import {
IStyle,
mergeStyleSets,
IProcessedStyleSet,
getTheme
IProcessedStyleSet
} from "office-ui-fabric-react";

export interface ICohortInfoStyles {
button: IStyle;
container: IStyle;
divider: IStyle;
section: IStyle;
header: IStyle;
tableData: IStyle;
}

export const cohortInfoStyles: () => IProcessedStyleSet<ICohortInfoStyles> =
() => {
const theme = getTheme();
return mergeStyleSets<ICohortInfoStyles>({
button: {
minWidth: "120px"
},
container: {
color: theme.semanticColors.bodyText
},
divider: {
borderTop: "1px solid",
left: "50%",
margin: "0",
marginRight: "-50%",
position: "absolute",
transform: "translate(-50%, 0%)",
width: "100%"
},
header: {
fontSize: "14px",
fontWeight: "600"
},
section: {
padding: "10px 0 10px 20px"
},
tableData: {
fontSize: "16px"
padding: "0 0 0 20px"
}
});
};
187 changes: 70 additions & 117 deletions libs/core-ui/src/lib/Cohort/CohortInfo/CohortInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// Licensed under the MIT License.

import { localization } from "@responsible-ai/localization";
import { DefaultButton, IStackTokens, Stack } from "office-ui-fabric-react";
import { DefaultButton, Stack, Label, Text } from "office-ui-fabric-react";
import React from "react";

import { getCohortFilterCount } from "../../util/getCohortFilterCount";
Expand All @@ -15,131 +15,84 @@ import { cohortInfoStyles } from "./CohortInfo.styles";
export interface ICohortInfoProps {
currentCohort: ErrorCohort;
onSaveCohortClick: () => void;
includeDividers: boolean;
disabledView: boolean;
}

const alignmentStackTokens: IStackTokens = {
childrenGap: 5,
padding: 2
};

export class CohortInfo extends React.PureComponent<ICohortInfoProps> {
public render(): React.ReactNode {
const classNames = cohortInfoStyles();

return (
<Stack className={classNames.container}>
{this.props.includeDividers && <div className={classNames.divider} />}
<div className={classNames.section}>
<DefaultButton
className={classNames.button}
text={localization.ErrorAnalysis.CohortInfo.saveCohort}
onClick={(): any => this.props.onSaveCohortClick()}
disabled={this.props.disabledView}
/>
<div className={classNames.section} />
<div>
<div className={classNames.header}>
{localization.ErrorAnalysis.CohortInfo.basicInformation}
</div>
{this.props.currentCohort.cohort.name !==
localization.ErrorAnalysis.Cohort.defaultLabel && (
<div>{this.props.currentCohort.cohort.name}</div>
)}
<div>
{localization.ErrorAnalysis.Cohort.defaultLabel} (
{getCohortFilterCount(this.props.currentCohort.cohort)}{" "}
{localization.ErrorAnalysis.CohortInfo.filters})
</div>
</div>
</div>
{this.props.includeDividers && <div className={classNames.divider} />}{" "}
<div className={classNames.section}>
<div>
<div>
{localization.ErrorAnalysis.CohortInfo.baseCohortInstances}
</div>
<Stack>
<Stack horizontal tokens={alignmentStackTokens}>
<div className={classNames.tableData}>
{localization.ErrorAnalysis.CohortInfo.total}
</div>
<div className={classNames.tableData}>
{this.props.currentCohort.cohortStats.totalAll}
</div>
</Stack>
{this.props.currentCohort.cohortStats instanceof
ErrorCohortStats && (
<Stack horizontal tokens={alignmentStackTokens}>
<div className={classNames.tableData}>
{localization.ErrorAnalysis.CohortInfo.correct}
</div>
<div className={classNames.tableData}>
{this.props.currentCohort.cohortStats.totalCorrect}
</div>
</Stack>
)}
{this.props.currentCohort.cohortStats instanceof
ErrorCohortStats && (
<Stack horizontal tokens={alignmentStackTokens}>
<div className={classNames.tableData}>
{localization.ErrorAnalysis.CohortInfo.incorrect}
</div>
<div className={classNames.tableData}>
{this.props.currentCohort.cohortStats.totalIncorrect}
</div>
</Stack>
)}
</Stack>
</div>
</div>
<div className={classNames.section}>
<div>
<div>
{localization.ErrorAnalysis.CohortInfo.selectedCohortInstances}
</div>
<Stack>
<Stack horizontal tokens={alignmentStackTokens}>
<div className={classNames.tableData}>
{localization.ErrorAnalysis.CohortInfo.total}
</div>
<div className={classNames.tableData}>
{this.props.currentCohort.cohortStats.totalCohort}
</div>
</Stack>
{this.props.currentCohort.cohortStats instanceof
ErrorCohortStats && (
<Stack horizontal tokens={alignmentStackTokens}>
<div className={classNames.tableData}>
{localization.ErrorAnalysis.CohortInfo.correct}
</div>
<div className={classNames.tableData}>
{this.props.currentCohort.cohortStats.totalCohortCorrect}
</div>
</Stack>
)}
{this.props.currentCohort.cohortStats instanceof
ErrorCohortStats && (
<Stack horizontal tokens={alignmentStackTokens}>
<div className={classNames.tableData}>
{localization.ErrorAnalysis.CohortInfo.incorrect}
</div>
<div className={classNames.tableData}>
{this.props.currentCohort.cohortStats.totalCohortIncorrect}
</div>
</Stack>
)}
</Stack>
</div>
</div>
{this.props.includeDividers && <div className={classNames.divider} />}{" "}
<div className={classNames.section}>
<div className={classNames.header}>
{localization.ErrorAnalysis.CohortInfo.predictionPath}
</div>
<Stack className={classNames.container} tokens={{ childrenGap: "20px" }}>
<DefaultButton
className={classNames.button}
text={localization.ErrorAnalysis.CohortInfo.saveCohort}
onClick={(): any => this.props.onSaveCohortClick()}
disabled={this.props.disabledView}
/>
<Stack>
<Label>
{localization.ErrorAnalysis.CohortInfo.basicInformation}
</Label>
{this.props.currentCohort.cohort.name !==
localization.ErrorAnalysis.Cohort.defaultLabel && (
<Text>{this.props.currentCohort.cohort.name}</Text>
)}
<Text>
{localization.ErrorAnalysis.Cohort.defaultLabel} (
{getCohortFilterCount(this.props.currentCohort.cohort)}{" "}
{localization.ErrorAnalysis.CohortInfo.filters})
</Text>
</Stack>

<Stack>
<Label>
{localization.ErrorAnalysis.CohortInfo.baseCohortInstances}
</Label>
<Text>
{localization.ErrorAnalysis.CohortInfo.total}{" "}
{this.props.currentCohort.cohortStats.totalAll}
</Text>
{this.props.currentCohort.cohortStats instanceof ErrorCohortStats && (
<Text>
{localization.ErrorAnalysis.CohortInfo.correct}{" "}
{this.props.currentCohort.cohortStats.totalCorrect}
</Text>
)}
{this.props.currentCohort.cohortStats instanceof ErrorCohortStats && (
<Text>
{localization.ErrorAnalysis.CohortInfo.incorrect}{" "}
{this.props.currentCohort.cohortStats.totalIncorrect}
</Text>
)}
</Stack>

<Stack>
<Label>
{localization.ErrorAnalysis.CohortInfo.selectedCohortInstances}
</Label>
<Text>
{localization.ErrorAnalysis.CohortInfo.total}{" "}
{this.props.currentCohort.cohortStats.totalCohort}
</Text>
{this.props.currentCohort.cohortStats instanceof ErrorCohortStats && (
<Text>
{localization.ErrorAnalysis.CohortInfo.correct}{" "}
{this.props.currentCohort.cohortStats.totalCohortCorrect}
</Text>
)}
{this.props.currentCohort.cohortStats instanceof ErrorCohortStats && (
<Text>
{localization.ErrorAnalysis.CohortInfo.incorrect}{" "}
{this.props.currentCohort.cohortStats.totalCohortIncorrect}
</Text>
)}
</Stack>

<Stack>
<Label>{localization.ErrorAnalysis.CohortInfo.predictionPath}</Label>
<PredictionPath temporaryCohort={this.props.currentCohort} />
</div>
</Stack>
</Stack>
);
}
Expand Down
1 change: 0 additions & 1 deletion libs/core-ui/src/lib/Cohort/CohortInfo/CohortInfoPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ export class CohortInfoPanel extends React.PureComponent<ICohortInfoPanelProps>
<CohortInfo
onSaveCohortClick={this.props.onSaveCohortClick}
currentCohort={this.props.currentCohort}
includeDividers
disabledView={false}
/>
</Panel>
Expand Down
1 change: 0 additions & 1 deletion ...alysis/src/lib/ErrorAnalysisDashboard/Controls/ErrorAnalysisView/ErrorAnalysisViewTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,6 @@ export class ErrorAnalysisViewTab extends React.Component<
<CohortInfo
currentCohort={this.context.selectedErrorCohort}
onSaveCohortClick={this.props.onSaveCohortClick}
includeDividers={false}
disabledView={this.props.disabledView}
/>
</Stack>
Expand Down

0 comments on commit dda3c6d

Please sign in to comment.