[Vis Builder] Add field summary popovers

CHANGELOG.md

@@ -41,6 +41,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Save Object Aggregation View] Add extension point in saved object management to register namespaces and show filter ([#2656](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2656))
 - [Save Object Aggregation View] Fix for export all after scroll count response changed in PR#2656 ([#2696](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2696))
 - [Vis Builder] Add an experimental table visualization in vis builder ([#2705](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2705))
+- [Vis Builder] Add field summary popovers ([#2682](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2682))
 
 ### 🐛 Bug Fixes
 

src/plugins/vis_builder/public/application/components/data_tab/field_selector_field.scss → src/plugins/vis_builder/public/application/components/data_tab/field.scss

@@ -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;
+}

src/plugins/vis_builder/public/application/components/data_tab/field.test.tsx

@@ -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 () { });
+});

src/plugins/vis_builder/public/application/components/data_tab/field.tsx

@@ -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} />;
+};

src/plugins/vis_builder/public/application/components/data_tab/field_bucket.scss

@@ -0,0 +1,4 @@
+.vbFieldDetails__barContainer {
+  // Constrains value to the flex item, and allows for truncation when necessary
+  min-width: 0;
+}

src/plugins/vis_builder/public/application/components/data_tab/field_bucket.tsx

@@ -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" />
+    </>
+  );
+}