Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[POC][Discover] Adds row height settings UI to data grid #110225

Closed
wants to merge 3 commits into from
Closed

[POC][Discover] Adds row height settings UI to data grid #110225

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3de547f
POC adds row height settings UI
ryankeairns Aug 26, 2021
cc61170
Hack styles
ryankeairns Aug 31, 2021
9e85ad6
More style tweaks before external test
ryankeairns Sep 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/plugins/discover/public/application/components/discover_grid/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
export const kibanaJSON = 'kibana-json';
export const gridStyle = {
border: 'all',
fontSize: 's',
fontSize: 'm', // TODO hack to increase line height in PoC
cellPadding: 's',
rowHover: 'none',
};
Expand Down
41 changes: 37 additions & 4 deletions src/plugins/discover/public/application/components/discover_grid/discover_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,43 @@
height: 100%;
overflow: hidden;

// TODO hack to re-style Document field
.euiDataGridRowCell, .euiDataGridHeaderCell {
font-size: $euiFontSizeXS;
}

// TODO - apply this if testing feedback suggests cell content is too tight
// .euiDataGrid--fontSizeSmall .euiDataGridRowCell {
// line-height: $euiFontSizeM * 1.25;
// }

// .dscDiscoverGrid__descriptionListDescription {
// word-break: normal !important;
// }

.euiCheckbox .euiCheckbox__input + .euiCheckbox__square,
.euiButtonIcon.euiButtonIcon--empty:not(.euiDataGridRowCell__actionButtonIcon) {
margin-top: 4px; // it's 7px by default and the bottom edge is cut off
}

.euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandButton {
// in compressed mode, the row heights are not 34px and this bleeds over row below
padding: 5px 0; // it's 6px by default, we need some to keep a reasonable target size
top: -4px; // this is a pure hack to align in compressed mode
}

// TODO the margin creates a ragged left edge when type is inline
.euiDescriptionList.euiDescriptionList--inline .euiDescriptionList__title {
margin-left: 0;
background-color: lightOrDarkTheme(tint($euiColorPrimary, 90%), $euiColorLightShade);
border: none;
padding: 2px 4px;
}

.euiDescriptionList.euiDescriptionList--inline .euiDescriptionList__description {
margin-right: $euiSizeXS;
}

.euiDataGrid__controls {
border: none;
border-bottom: $euiBorderThin;
Expand Down Expand Up @@ -84,10 +121,6 @@
@include euiTextTruncate;
}

.dscDiscoverGrid__descriptionListDescription {
word-break: normal !important;
}

@include euiBreakpoint('xs', 's', 'm') {
// EUI issue to hide 'of' text https://github.com/elastic/eui/issues/4654
.dscTable__flyoutDocumentNavigation .euiPagination__compressedText {
Expand Down
106 changes: 104 additions & 2 deletions src/plugins/discover/public/application/components/discover_grid/discover_grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@ import {
htmlIdGenerator,
EuiLoadingSpinner,
EuiIcon,
EuiButtonEmpty,
EuiPopover,
EuiButtonGroup,
EuiTitle,
EuiSwitch,
} from '@elastic/eui';
import { IndexPattern } from '../../../kibana_services';
import { DocViewFilterFn, ElasticSearchHit } from '../../doc_views/doc_views_types';
Expand Down Expand Up @@ -311,6 +316,36 @@ export const DiscoverGrid = ({
[controlColumnIds]
);

const rowOptions = useMemo(
// Use of useMemo? The linter made me do it ;)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this could be a constant in constant.ts which is a file on the same level, or even better, there should be an array like rowHeightOptions = [1,3,5,10,10000] that's used to build such options

() => [
{
id: 'opt1',
label: '1',
value: 1,
},
{
id: 'opt2',
label: '3',
value: 3,
},
{
id: 'opt3',
label: '5',
value: 5,
},
{
id: 'opt4',
label: '10',
value: 10,
},
],
[]
);
const [isSelectionPopoverOpen, setIsSelectionPopoverOpen] = useState(false);
const [rowHeightValue, setRowHeightValue] = useState(1);
const [defaultColsOnly, setDefaultColsOnly] = useState(false);

const additionalControls = useMemo(
() =>
usedSelectedDocs.length ? (
Expand All @@ -321,8 +356,62 @@ export const DiscoverGrid = ({
setSelectedDocs={setSelectedDocs}
setIsFilterActive={setIsFilterActive}
/>
) : null,
[usedSelectedDocs, isFilterActive, rows, setIsFilterActive]
) : (
<EuiPopover
closePopover={() => setIsSelectionPopoverOpen(false)}
isOpen={isSelectionPopoverOpen}
panelPaddingSize="m"
button={
<EuiButtonEmpty
size="xs"
color="text"
iconType="editorDistributeVertical"
onClick={() => setIsSelectionPopoverOpen(true)}
>
Row height
</EuiButtonEmpty>
}
>
<EuiTitle size="xxxs">
<h4>Number of lines per row</h4>
</EuiTitle>
<EuiSpacer size="s" />
<EuiButtonGroup
legend="Select the number of lines to display per row"
name="somename"
options={rowOptions}
style={{ width: 240 }}
idSelected={rowOptions.find(({ value }) => value === rowHeightValue)!.id}
onChange={(optId) => {
setIsSelectionPopoverOpen(false);
const selectedValue = rowOptions.find(({ id }) => id === optId)!.value;
setRowHeightValue(selectedValue);
}}
buttonSize="compressed"
isFullWidth
/>
<EuiSpacer size="m" />
<EuiSwitch
label="Apply to default view only"
checked={defaultColsOnly}
onChange={() => setDefaultColsOnly(!defaultColsOnly)}
compressed
/>
</EuiPopover>
),
[
usedSelectedDocs,
isFilterActive,
rows,
setIsFilterActive,
isSelectionPopoverOpen,
setIsSelectionPopoverOpen,
rowHeightValue,
setRowHeightValue,
defaultColsOnly,
setDefaultColsOnly,
rowOptions,
]
);

if (!rowCount && isLoading) {
Expand Down Expand Up @@ -393,6 +482,19 @@ export const DiscoverGrid = ({
pagination={paginationObj}
renderCellValue={renderCellValue}
rowCount={rowCount}
rowHeightsOptions={
defaultColumns
? {
defaultHeight: {
lineCount: rowHeightValue,
},
}
: {
defaultHeight: {
lineCount: defaultColsOnly ? 1 : rowHeightValue,
},
}
}
schemaDetectors={schemaDetectors}
sorting={sorting as EuiDataGridSorting}
toolbarVisibility={
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/discover/public/application/components/discover_grid/get_render_cell_value.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ export const getRenderCellValueFn = (
<EuiDescriptionList type="inline" compressed className="dscDiscoverGrid__descriptionList">
{[...highlightPairs, ...sourcePairs].slice(0, maxDocFieldsDisplayed).map(([key, value]) => (
<Fragment key={key}>
<EuiDescriptionListTitle>{key}</EuiDescriptionListTitle>
<EuiDescriptionListTitle>{key}:</EuiDescriptionListTitle>
<EuiDescriptionListDescription
dangerouslySetInnerHTML={{ __html: value }}
className="dscDiscoverGrid__descriptionListDescription"
Expand Down
1 change: 1 addition & 0 deletions src/plugins/discover/public/application/components/table/table_columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export const MAIN_COLUMNS: Array<EuiBasicTableColumn<FieldRecord>> = [
field: 'field',
className: 'kbnDocViewer__tableFieldNameCell',
mobileOptions: { header: false },
width: '25%',
name: (
<EuiText size="xs">
<strong>
Expand Down