Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Vis Builder] Add field summary popovers (#2682)
Browse files Browse the repository at this point in the history
* [Vis Builder] Add field summary popovers

Much of the functionality was ported from `Discover`, but
largely refactored.

* Add utilities to get sampled hit summaries by field
* Add popover summaries
* Slight refactor of special `Count` pseudofield
* Use observable subscription to update sampled hits

Fixes #950

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* [Vis Builder] Add additional unit tests

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* [VisBuilder] Update naming of summary field components

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* [VisBuilder] Avoid prop passing by extracting custom hooks

- refactor meta field identification

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* [VisBuilder] Add TODOs with issue links, fix test ID

Restores previous test ID for count field button

Signed-off-by: Josh Romero <rmerqg@amazon.com>

Signed-off-by: Josh Romero <rmerqg@amazon.com>
(cherry picked from commit 2e16de1)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md
github-actions[bot] committed Nov 4, 2022
1 parent 1596e4a commit 808fcd8
Showing 20 changed files with 1,275 additions and 146 deletions.
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/
.vbFieldSelectorField {
.vbFieldButton {
@include euiBottomShadowSmall;

background-color: $euiColorEmptyShade;
@@ -26,3 +26,8 @@
height: 100%;
}
}

.vbItem__fieldPopoverPanel {
min-width: 260px;
max-width: 300px;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import React from 'react';
import { render, screen } from '@testing-library/react';

import { IndexPatternField } from '../../../../../data/public';

import { DraggableFieldButton } from './field';

describe('visBuilder field', function () {
describe('DraggableFieldButton', () => {
it('should render normal fields without a dragValue specified', async () => {
const props = {
field: new IndexPatternField(
{
name: 'bytes',
type: 'number',
esTypes: ['long'],
count: 10,
scripted: false,
searchable: true,
aggregatable: true,
readFromDocValues: true,
},
'bytes'
),
};
render(<DraggableFieldButton {...props} />);

const button = screen.getByTestId('field-bytes-showDetails');

expect(button).toBeDefined();
});

// TODO: it('should allow specified dragValue to override the field name');

// TODO: it('should make dots wrappable');

// TODO: it('should use a non-scripted FieldIcon by default');
});

// TODO: describe('Field', function () { });
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
/*
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Any modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/

/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

import React, { useState } from 'react';
import { EuiPopover } from '@elastic/eui';

import { IndexPatternField } from '../../../../../data/public';
import {
FieldButton,
FieldButtonProps,
FieldIcon,
} from '../../../../../opensearch_dashboards_react/public';

import { COUNT_FIELD, useDrag } from '../../utils/drag_drop';
import { FieldDetailsView } from './field_details';
import { FieldDetails } from './types';
import './field.scss';

export interface FieldProps {
field: IndexPatternField;
getDetails: (field) => FieldDetails;
}

// TODO: Add field sections (Available fields, popular fields from src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx)
export const Field = ({ field, getDetails }: FieldProps) => {
const [infoIsOpen, setOpen] = useState(false);

function togglePopover() {
setOpen(!infoIsOpen);
}

return (
<EuiPopover
ownFocus
display="block"
button={<DraggableFieldButton isActive={infoIsOpen} onClick={togglePopover} field={field} />}
isOpen={infoIsOpen}
closePopover={() => setOpen(false)}
anchorPosition="rightUp"
panelClassName="vbItem__fieldPopoverPanel"
// TODO: make reposition on scroll actually work: https://github.com/opensearch-project/OpenSearch-Dashboards/issues/2782
repositionOnScroll
data-test-subj="field-popover"
>
{infoIsOpen && <FieldDetailsView field={field} details={getDetails(field)} />}
</EuiPopover>
);
};

export interface DraggableFieldButtonProps extends Partial<FieldButtonProps> {
dragValue?: IndexPatternField['name'] | null | typeof COUNT_FIELD;
field: Partial<IndexPatternField> & Pick<IndexPatternField, 'displayName' | 'name' | 'type'>;
}

export const DraggableFieldButton = ({ dragValue, field, ...rest }: DraggableFieldButtonProps) => {
const { name, displayName, type, scripted = false } = field;
const [dragProps] = useDrag({
namespace: 'field-data',
value: dragValue ?? name,
});

function wrapOnDot(str: string) {
// u200B is a non-width white-space character, which allows
// the browser to efficiently word-wrap right after the dot
// without us having to draw a lot of extra DOM elements, etc
return str.replace(/\./g, '.\u200B');
}

const defaultIcon = <FieldIcon type={type} scripted={scripted} size="l" />;

const defaultFieldName = (
<span data-test-subj={`field-${name}`} title={name} className="vbFieldButton__name">
{wrapOnDot(displayName)}
</span>
);

const defaultProps = {
className: 'vbFieldButton',
dataTestSubj: `field-${name}-showDetails`,
fieldIcon: defaultIcon,
fieldName: defaultFieldName,
onClick: () => {},
};

return <FieldButton {...defaultProps} {...rest} {...dragProps} />;
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.vbFieldDetails__barContainer {
// Constrains value to the flex item, and allows for truncation when necessary
min-width: 0;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import React from 'react';
import {
EuiText,
EuiButtonIcon,
EuiFlexGroup,
EuiFlexItem,
EuiSpacer,
EuiProgress,
} from '@elastic/eui';
import { i18n } from '@osd/i18n';

import { IndexPatternField } from '../../../../../data/public';

import { Bucket } from './types';
import './field_bucket.scss';
import { useOnAddFilter } from '../../utils/use';

interface FieldBucketProps {
bucket: Bucket;
field: IndexPatternField;
}

export function FieldBucket({ bucket, field }: FieldBucketProps) {
const { count, display, percent, value } = bucket;
const { filterable: isFilterableField, name: fieldName } = field;

const onAddFilter = useOnAddFilter();

const emptyText = i18n.translate('visBuilder.fieldSelector.detailsView.emptyStringText', {
// We need this to communicate to users when a top value is actually an empty string
defaultMessage: 'Empty string',
});
const addLabel = i18n.translate(
'visBuilder.fieldSelector.detailsView.filterValueButtonAriaLabel',
{
defaultMessage: 'Filter for {fieldName}: "{value}"',
values: { fieldName, value },
}
);
const removeLabel = i18n.translate(
'visBuilder.fieldSelector.detailsView.filterOutValueButtonAriaLabel',
{
defaultMessage: 'Filter out {fieldName}: "{value}"',
values: { fieldName, value },
}
);

const displayValue = display || emptyText;

return (
<>
<EuiFlexGroup justifyContent="spaceBetween" responsive={false} gutterSize="s">
<EuiFlexItem className="vbFieldDetails__barContainer" grow={1}>
<EuiFlexGroup justifyContent="spaceBetween" gutterSize="xs" responsive={false}>
<EuiFlexItem grow={1} className="eui-textTruncate">
<EuiText
title={`${displayValue}: ${count} (${percent.toFixed(1)}%)`}
size="xs"
className="eui-textTruncate"
>
{displayValue}
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false} className="eui-textTruncate">
<EuiText color="secondary" size="xs" className="eui-textTruncate">
{percent.toFixed(1)}%
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
<EuiProgress
value={percent}
max={100}
color="secondary"
aria-label={`${value}: ${count} (${percent}%)`}
size="s"
/>
</EuiFlexItem>
{/* TODO: Should we have any explanation for non-filterable fields? */}
{isFilterableField && (
<EuiFlexItem grow={false}>
<div>
<EuiButtonIcon
className="vbFieldDetails__filterButton"
iconSize="s"
iconType="plusInCircle"
onClick={() => onAddFilter(field, value, '+')}
aria-label={addLabel}
data-test-subj={`plus-${fieldName}-${value}`}
/>
<EuiButtonIcon
className="vbFieldDetails__filterButton"
iconSize="s"
iconType="minusInCircle"
onClick={() => onAddFilter(field, value, '-')}
aria-label={removeLabel}
data-test-subj={`minus-${fieldName}-${value}`}
/>
</div>
</EuiFlexItem>
)}
</EuiFlexGroup>
<EuiSpacer size="s" />
</>
);
}
Loading

0 comments on commit 808fcd8

Please sign in to comment.