Skip to content

Commit

Permalink
[ML] Fix IE11 layout issues.
Browse files Browse the repository at this point in the history
  • Loading branch information
@walterra
walterra committed May 8, 2020
1 parent b5ebbd9 commit de5e1c0
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 140 deletions.
24 changes: 20 additions & 4 deletions ...lytics_exploration/components/classification_exploration/_classification_exploration.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
/* Workaround for EuiDataGrid within a Flex Layout */
/*
Workaround for EuiDataGrid within a Flex Layout,
this tricks browsers treating the width as a px value instead of %
*/
.mlDataFrameAnalyticsClassification {
width: calc(100% - 0px);
}
Expand All @@ -7,13 +10,26 @@
padding: 0 5%;
}

/*
The following two classes are a workaround to avoid having EuiDataGrid in a flex layout
and just uses a legacy approach for a two column layout so we don't break IE11.
*/
.mlDataFrameAnalyticsClassification__confusionMatrix:after {
content: "";
display: table;
clear: both;
}

.mlDataFrameAnalyticsClassification__actualLabel {
min-width: 70px;
float: left;
width: 70px;
padding-top: $euiSize * 4.2;
}

/* EuiDataGrid needs a minWidth of 480px, otherwise the columns options will disappear if you hide all columns. */
/*
Gives EuiDataGrid a min-width of 480px, otherwise the columns options will disappear if you hide all columns.
*/
.mlDataFrameAnalyticsClassification__dataGridMinWidth {
min-width: 480px;
width: 90%;
width: calc(100% - 0px);
}
252 changes: 116 additions & 136 deletions ...tics/pages/analytics_exploration/components/classification_exploration/evaluate_panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -292,153 +292,133 @@ export const EvaluatePanel: FC<Props> = ({ jobConfig, jobStatus, searchQuery })
data-test-subj="mlDFAnalyticsClassificationExplorationEvaluatePanel"
className="mlDataFrameAnalyticsClassification"
>
<EuiFlexGroup direction="column" gutterSize="s">
<EuiFlexItem>
<EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiTitle size="xs">
<span>
{i18n.translate(
'xpack.ml.dataframe.analytics.classificationExploration.evaluateJobIdTitle',
{
defaultMessage: 'Evaluation of classification job ID {jobId}',
values: { jobId: jobConfig.id },
}
)}
</span>
</EuiTitle>
</EuiFlexItem>
{jobStatus !== undefined && (
<EuiFlexItem grow={false}>
<span>{getTaskStateBadge(jobStatus)}</span>
</EuiFlexItem>
)}
<EuiFlexItem>
<EuiSpacer />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
target="_blank"
iconType="help"
iconSide="left"
color="primary"
href={`${ELASTIC_WEBSITE_URL}guide/en/machine-learning/${DOC_LINK_VERSION}/ml-dfanalytics-evaluate.html#ml-dfanalytics-classification`}
>
<div>
<EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiTitle size="xs">
<span>
{i18n.translate(
'xpack.ml.dataframe.analytics.classificationExploration.classificationDocsLink',
'xpack.ml.dataframe.analytics.classificationExploration.evaluateJobIdTitle',
{
defaultMessage: 'Classification evaluation docs ',
defaultMessage: 'Evaluation of classification job ID {jobId}',
values: { jobId: jobConfig.id },
}
)}
</EuiButtonEmpty>
</span>
</EuiTitle>
</EuiFlexItem>
{jobStatus !== undefined && (
<EuiFlexItem grow={false}>
<span>{getTaskStateBadge(jobStatus)}</span>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
{error !== null && (
)}
<EuiFlexItem />
<EuiFlexItem grow={false}>
<ErrorCallout error={error} />
<EuiButtonEmpty
target="_blank"
iconType="help"
iconSide="left"
color="primary"
href={`${ELASTIC_WEBSITE_URL}guide/en/machine-learning/${DOC_LINK_VERSION}/ml-dfanalytics-evaluate.html#ml-dfanalytics-classification`}
>
{i18n.translate(
'xpack.ml.dataframe.analytics.classificationExploration.classificationDocsLink',
{
defaultMessage: 'Classification evaluation docs ',
}
)}
</EuiButtonEmpty>
</EuiFlexItem>
)}
{error === null && (
<Fragment>
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="xs">
<EuiTitle size="xxs">
<span>{getHelpText(dataSubsetTitle)}</span>
</EuiTitle>
<EuiFlexItem grow={false}>
<EuiIconTip
anchorClassName="mlDataFrameAnalyticsClassificationInfoTooltip"
content={i18n.translate(
'xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixTooltip',
</EuiFlexGroup>
</div>
{error !== null && <ErrorCallout error={error} />}
{error === null && (
<Fragment>
<div>
<EuiFlexGroup gutterSize="xs">
<EuiTitle size="xxs">
<span>{getHelpText(dataSubsetTitle)}</span>
</EuiTitle>
<EuiFlexItem grow={false}>
<EuiIconTip
anchorClassName="mlDataFrameAnalyticsClassificationInfoTooltip"
content={i18n.translate(
'xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixTooltip',
{
defaultMessage:
'The multi-class confusion matrix contains the number of occurrences where the analysis classified data points correctly with their actual class as well as the number of occurrences where it misclassified them with another class',
}
)}
/>
</EuiFlexItem>
</EuiFlexGroup>
</div>
{docsCount !== null && (
<EuiText size="xs" color="subdued">
<FormattedMessage
id="xpack.ml.dataframe.analytics.classificationExploration.generalizationDocsCount"
defaultMessage="{docsCount, plural, one {# doc} other {# docs}} evaluated"
values={{ docsCount }}
/>
</EuiText>
)}
{/* BEGIN TABLE ELEMENTS */}
<EuiSpacer size="m" />
<div className="mlDataFrameAnalyticsClassification__confusionMatrix">
<div className="mlDataFrameAnalyticsClassification__actualLabel">
<EuiText size="xs" color="subdued">
<FormattedMessage
id="xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixActualLabel"
defaultMessage="Actual label"
/>
</EuiText>
</div>
<div className="mlDataFrameAnalyticsClassification__dataGridMinWidth">
{columns.length > 0 && columnsData.length > 0 && (
<>
<div>
<EuiText size="xs" color="subdued">
<FormattedMessage
id="xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixPredictedLabel"
defaultMessage="Predicted label"
/>
</EuiText>
</div>
<EuiSpacer size="s" />
<EuiDataGrid
data-test-subj="mlDFAnalyticsClassificationExplorationConfusionMatrix"
aria-label={i18n.translate(
'xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixLabel',
{
defaultMessage:
'The multi-class confusion matrix contains the number of occurrences where the analysis classified data points correctly with their actual class as well as the number of occurrences where it misclassified them with another class',
defaultMessage: 'Classification confusion matrix',
}
)}
columns={shownColumns}
columnVisibility={{ visibleColumns, setVisibleColumns }}
rowCount={rowCount}
renderCellValue={renderCellValue}
inMemory={{ level: 'sorting' }}
toolbarVisibility={{
showColumnSelector: true,
showStyleSelector: false,
showFullScreenSelector: false,
showSortSelector: false,
}}
popoverContents={popoverContents}
gridStyle={{ rowHover: 'none' }}
trailingControlColumns={
showTrailingColumns === true && showFullColumns === false
? getTrailingControlColumns(extraColumns, setShowFullColumns)
: undefined
}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
{docsCount !== null && (
<EuiFlexItem grow={false}>
<EuiText size="xs" color="subdued">
<FormattedMessage
id="xpack.ml.dataframe.analytics.classificationExploration.generalizationDocsCount"
defaultMessage="{docsCount, plural, one {# doc} other {# docs}} evaluated"
values={{ docsCount }}
/>
</EuiText>
</EuiFlexItem>
)}
{/* BEGIN TABLE ELEMENTS */}
<EuiFlexItem grow={false}>
<EuiFlexGroup
gutterSize="s"
className="mlDataFrameAnalyticsClassification__confusionMatrix"
>
<EuiFlexItem
grow={false}
className="mlDataFrameAnalyticsClassification__actualLabel"
>
<EuiText size="xs" color="subdued">
<FormattedMessage
id="xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixActualLabel"
defaultMessage="Actual label"
/>
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
{columns.length > 0 && columnsData.length > 0 && (
<Fragment>
<EuiFlexGroup direction="column" justifyContent="center" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiText size="xs" color="subdued">
<FormattedMessage
id="xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixPredictedLabel"
defaultMessage="Predicted label"
/>
</EuiText>
</EuiFlexItem>
<EuiFlexItem className="mlDataFrameAnalyticsClassification__dataGridMinWidth">
<EuiDataGrid
data-test-subj="mlDFAnalyticsClassificationExplorationConfusionMatrix"
aria-label={i18n.translate(
'xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixLabel',
{
defaultMessage: 'Classification confusion matrix',
}
)}
columns={shownColumns}
columnVisibility={{ visibleColumns, setVisibleColumns }}
rowCount={rowCount}
renderCellValue={renderCellValue}
inMemory={{ level: 'sorting' }}
toolbarVisibility={{
showColumnSelector: true,
showStyleSelector: false,
showFullScreenSelector: false,
showSortSelector: false,
}}
popoverContents={popoverContents}
gridStyle={{ rowHover: 'none' }}
trailingControlColumns={
showTrailingColumns === true && showFullColumns === false
? getTrailingControlColumns(extraColumns, setShowFullColumns)
: undefined
}
/>
</EuiFlexItem>
</EuiFlexGroup>
</Fragment>
)}
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</Fragment>
)}
{/* END TABLE ELEMENTS */}
</EuiFlexGroup>
</>
)}
</div>
</div>
</Fragment>
)}
{/* END TABLE ELEMENTS */}
</EuiPanel>
);
};

0 comments on commit de5e1c0

Please sign in to comment.