[ML] Fix inconsistent padding for long top_values in Data Visualizer & hover color of expanded row (#87937)
This commit is contained in:
parent
d321950b93
commit
a1c2422261
|
@ -6,7 +6,7 @@
|
||||||
|
|
||||||
import React, { FC } from 'react';
|
import React, { FC } from 'react';
|
||||||
|
|
||||||
import { EuiListGroup, EuiListGroupItem, EuiSpacer } from '@elastic/eui';
|
import { EuiListGroup, EuiListGroupItem } from '@elastic/eui';
|
||||||
|
|
||||||
import { FormattedMessage } from '@kbn/i18n/react';
|
import { FormattedMessage } from '@kbn/i18n/react';
|
||||||
import { ExpandedRowFieldHeader } from '../../../../stats_datagrid/components/expanded_row_field_header';
|
import { ExpandedRowFieldHeader } from '../../../../stats_datagrid/components/expanded_row_field_header';
|
||||||
|
@ -46,7 +46,6 @@ export const ExamplesList: FC<Props> = ({ examples }) => {
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</ExpandedRowFieldHeader>
|
</ExpandedRowFieldHeader>
|
||||||
<EuiSpacer size="s" />
|
|
||||||
<EuiListGroup showToolTips={true} maxWidth={'s'} gutterSize={'none'} flush={true}>
|
<EuiListGroup showToolTips={true} maxWidth={'s'} gutterSize={'none'} flush={true}>
|
||||||
{examplesContent}
|
{examplesContent}
|
||||||
</EuiListGroup>
|
</EuiListGroup>
|
||||||
|
|
|
@ -1,6 +1,9 @@
|
||||||
|
.mlFieldDataTopValuesContainer {
|
||||||
|
padding-top: $euiSizeXS;
|
||||||
|
}
|
||||||
|
|
||||||
.mlTopValuesValueLabelContainer {
|
.mlTopValuesValueLabelContainer {
|
||||||
padding-right: $euiSizeM;
|
margin-right: $euiSizeM;
|
||||||
&.mlTopValuesValueLabelContainer--small {
|
&.mlTopValuesValueLabelContainer--small {
|
||||||
width:70px;
|
width:70px;
|
||||||
}
|
}
|
||||||
|
@ -11,6 +14,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mlTopValuesPercentLabelContainer {
|
.mlTopValuesPercentLabelContainer {
|
||||||
padding-left: $euiSizeM;
|
margin-left: $euiSizeM;
|
||||||
width:70px;
|
width:70px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -46,7 +46,7 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor, compressed
|
||||||
} = stats;
|
} = stats;
|
||||||
const progressBarMax = isTopValuesSampled === true ? topValuesSampleSize : count;
|
const progressBarMax = isTopValuesSampled === true ? topValuesSampleSize : count;
|
||||||
return (
|
return (
|
||||||
<div data-test-subj="mlFieldDataTopValues">
|
<div data-test-subj="mlFieldDataTopValues" className={'mlFieldDataTopValuesContainer'}>
|
||||||
{Array.isArray(topValues) &&
|
{Array.isArray(topValues) &&
|
||||||
topValues.map((value: any) => (
|
topValues.map((value: any) => (
|
||||||
<EuiFlexGroup gutterSize="xs" alignItems="center" key={value.key}>
|
<EuiFlexGroup gutterSize="xs" alignItems="center" key={value.key}>
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
@import "components/field_data_expanded_row/number_content";
|
||||||
|
|
||||||
.mlDataVisualizerFieldExpandedRow {
|
.mlDataVisualizerFieldExpandedRow {
|
||||||
padding-left: $euiSize * 4;
|
padding-left: $euiSize * 4;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -7,7 +9,9 @@
|
||||||
text-align: left;
|
text-align: left;
|
||||||
color: $euiColorDarkShade;
|
color: $euiColorDarkShade;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
padding-bottom: $euiSizeS;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mlFieldDataCard__codeContent {
|
.mlFieldDataCard__codeContent {
|
||||||
@include euiCodeFont;
|
@include euiCodeFont;
|
||||||
}
|
}
|
||||||
|
@ -16,22 +20,27 @@
|
||||||
.mlDataVisualizer {
|
.mlDataVisualizer {
|
||||||
.euiTableRow > .euiTableRowCell {
|
.euiTableRow > .euiTableRowCell {
|
||||||
border-bottom: 0px;
|
border-bottom: 0px;
|
||||||
border-top: 1px solid $euiColorLightShade;
|
border-top: $euiBorderThin;
|
||||||
|
|
||||||
}
|
}
|
||||||
.euiTableRow-isExpandedRow {
|
.euiTableRow-isExpandedRow {
|
||||||
|
|
||||||
.euiTableRowCell{
|
.euiTableRowCell{
|
||||||
background-color: transparent !important;
|
background-color: $euiColorEmptyShade !important;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-bottom: 1px solid $euiColorLightShade;
|
border-bottom: $euiBorderThin;
|
||||||
|
&:hover {
|
||||||
|
background-color: $euiColorEmptyShade !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mlDataVisualizerSummaryTable {
|
.mlDataVisualizerSummaryTable {
|
||||||
.euiTableRow > .euiTableRowCell{
|
.euiTableRow > .euiTableRowCell{
|
||||||
border-bottom: 0px;
|
border-bottom: 0px;
|
||||||
}
|
}
|
||||||
|
.euiTableHeaderCell {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
@import "number_content";
|
|
@ -0,0 +1,5 @@
|
||||||
|
.mlMetricDistributionChartContainer {
|
||||||
|
padding-top: $euiSizeXS;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
|
@ -129,7 +129,7 @@ export const NumberContent: FC<FieldDataCardProps> = ({ config }) => {
|
||||||
)}
|
)}
|
||||||
{distribution && (
|
{distribution && (
|
||||||
<EuiFlexItem data-test-subj={'mlMetricDistribution'}>
|
<EuiFlexItem data-test-subj={'mlMetricDistribution'}>
|
||||||
<EuiFlexItem>
|
<EuiFlexItem grow={false}>
|
||||||
<ExpandedRowFieldHeader>
|
<ExpandedRowFieldHeader>
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
id="xpack.ml.fieldDataCardExpandedRow.numberContent.distributionTitle"
|
id="xpack.ml.fieldDataCardExpandedRow.numberContent.distributionTitle"
|
||||||
|
@ -138,7 +138,7 @@ export const NumberContent: FC<FieldDataCardProps> = ({ config }) => {
|
||||||
</ExpandedRowFieldHeader>
|
</ExpandedRowFieldHeader>
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
|
|
||||||
<EuiFlexItem style={{ width: '100%' }}>
|
<EuiFlexItem className={'mlMetricDistributionChartContainer'}>
|
||||||
<MetricDistributionChart
|
<MetricDistributionChart
|
||||||
width={METRIC_DISTRIBUTION_CHART_WIDTH}
|
width={METRIC_DISTRIBUTION_CHART_WIDTH}
|
||||||
height={METRIC_DISTRIBUTION_CHART_HEIGHT}
|
height={METRIC_DISTRIBUTION_CHART_HEIGHT}
|
||||||
|
|
Loading…
Reference in a new issue