[ML] Add responsive layout to Index data visualizer, fix doc count chart margin

x-pack/plugins/data_visualizer/public/application/common/components/date_picker_wrapper/date_picker_wrapper.tsx

@@ -25,6 +25,7 @@ import { TimeHistoryContract, UI_SETTINGS } from '@kbn/data-plugin/public';
 import { i18n } from '@kbn/i18n';
 import { wrapWithTheme } from '@kbn/kibana-react-plugin/public';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { css } from '@emotion/react';
 import {
   useRefreshIntervalUpdates,
   useTimeRangeUpdates,
@@ -69,10 +70,11 @@ function updateLastRefresh(timeRange?: OnRefreshProps) {
 }
 
 // FIXME: Consolidate this component with ML and AIOps's component
-export const DatePickerWrapper: FC<{ isAutoRefreshOnly?: boolean; showRefresh?: boolean }> = ({
-  isAutoRefreshOnly,
-  showRefresh,
-}) => {
+export const DatePickerWrapper: FC<{
+  isAutoRefreshOnly?: boolean;
+  showRefresh?: boolean;
+  compact?: boolean;
+}> = ({ isAutoRefreshOnly, showRefresh, compact = false }) => {
   const {
     services,
     notifications: { toasts },
@@ -242,9 +244,17 @@ export const DatePickerWrapper: FC<{ isAutoRefreshOnly?: boolean; showRefresh?:
     <EuiFlexGroup
       gutterSize="s"
       alignItems="center"
-      className="mlNavigationMenu__datePickerWrapper"
+      data-test-subj="mlNavigationMenuDatePickerWrapper"
     >
-      <EuiFlexItem grow={false}>
+      <EuiFlexItem
+        grow={false}
+        css={
+          compact &&
+          css`
+            max-width: 540px;
+          `
+        }
+      >
         <EuiSuperDatePicker
           start={time.from}
           end={time.to}
@@ -257,6 +267,7 @@ export const DatePickerWrapper: FC<{ isAutoRefreshOnly?: boolean; showRefresh?:
           recentlyUsedRanges={recentlyUsedRanges}
           dateFormat={dateFormat}
           commonlyUsedRanges={commonlyUsedRanges}
+          updateButtonProps={{ iconOnly: compact }}
         />
       </EuiFlexItem>
 

x-pack/plugins/data_visualizer/public/application/common/components/document_count_content/document_count_chart/document_count_chart.tsx

@@ -9,7 +9,7 @@ import React, { FC, useCallback, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import {
   Axis,
-  BarSeries,
+  HistogramBarSeries,
   BrushEndListener,
   Chart,
   ElementClickListener,
@@ -138,7 +138,7 @@ export const DocumentCountChart: FC<Props> = ({
 
   return (
     <div
-      style={{ width: width ?? '100%', height: 120, display: 'flex', alignItems: 'center' }}
+      style={{ width: width ?? '100%', display: 'flex', alignItems: 'center' }}
       data-test-subj="dataVisualizerDocumentCountChart"
     >
       {loading ? (
@@ -147,6 +147,7 @@ export const DocumentCountChart: FC<Props> = ({
         <Chart
           size={{
             width: '100%',
+            height: 120,
           }}
         >
           <Settings
@@ -161,11 +162,13 @@ export const DocumentCountChart: FC<Props> = ({
             position={Position.Bottom}
             showOverlappingTicks={true}
             tickFormat={(value) => xAxisFormatter.convert(value)}
+            // temporary fix to reduce horizontal chart margin until fixed in Elastic Charts itself
+            labelFormat={useLegacyTimeAxis ? undefined : () => ''}
             timeAxisLayerCount={useLegacyTimeAxis ? 0 : 2}
             style={useLegacyTimeAxis ? {} : MULTILAYER_TIME_AXIS_STYLE}
           />
           <Axis id="left" position={Position.Left} />
-          <BarSeries
+          <HistogramBarSeries
             id={SPEC_ID}
             name={seriesName}
             xScaleType={ScaleType.Time}
@@ -174,6 +177,7 @@ export const DocumentCountChart: FC<Props> = ({
             yAccessors={['value']}
             data={adjustedChartPoints}
             timeZone={timeZone}
+            yNice
           />
         </Chart>
       )}

x-pack/plugins/data_visualizer/public/application/common/components/field_count_panel/field_count_panel.tsx

@@ -31,6 +31,7 @@ export const FieldCountPanel: FC<Props> = ({
       data-test-subj="dataVisualizerFieldCountPanel"
       responsive={false}
       className="dvFieldCount__panel"
+      wrap={true}
     >
       <TotalFieldsCount fieldsCountStats={fieldsCountStats} />
       <MetricFieldsCount metricsStats={metricsStats} />

x-pack/plugins/data_visualizer/public/application/common/components/fields_stats_grid/fields_stats_grid.tsx

@@ -85,6 +85,7 @@ export const FieldsStatsGrid: FC<Props> = ({ results }) => {
         gutterSize="xs"
         style={{ marginLeft: 4 }}
         data-test-subj="dataVisualizerFieldCountPanel"
+        responsive={true}
       >
         <TotalFieldsCount fieldsCountStats={fieldsCountStats} />
         <MetricFieldsCount metricsStats={metricsStats} />

x-pack/plugins/data_visualizer/public/application/common/components/link_card/link_card.tsx

@@ -62,10 +62,10 @@ export const LinkCard: FC<LinkCardProps> = ({
         color="subdued"
         {...linkHrefAndOnClickProps}
       >
-        <EuiFlexGroup gutterSize="l" responsive={true}>
-          <EuiFlexItem grow={false} style={{ paddingTop: '8px' }}>
+        <EuiFlexGroup gutterSize="s" responsive={true}>
+          <EuiFlexItem grow={false} style={{ paddingTop: '4px' }}>
             {typeof icon === 'string' ? (
-              <EuiIcon size="xl" type={icon} aria-label={iconAreaLabel} />
+              <EuiIcon size="m" type={icon} aria-label={iconAreaLabel} />
             ) : (
               icon
             )}

x-pack/plugins/data_visualizer/public/application/common/components/multi_select_picker/multi_select_picker.tsx

@@ -18,6 +18,8 @@ import {
 import React, { FC, ReactNode, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { euiDarkVars as euiThemeDark, euiLightVars as euiThemeLight } from '@kbn/ui-theme';
+import type { SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
 import { useDataVisualizerKibana } from '../../../kibana_context';
 
 export interface Option {
@@ -53,14 +55,19 @@ export function useCurrentEuiTheme() {
   );
 }
 
+interface MultiSelectPickerStyles {
+  filterGroup?: SerializedStyles;
+  filterItemContainer?: SerializedStyles;
+}
 export const MultiSelectPicker: FC<{
   options: Option[];
   onChange?: (items: string[]) => void;
   title?: string;
   checkedOptions: string[];
   dataTestSubj: string;
   postfix?: React.ReactElement;
-}> = ({ options, onChange, title, checkedOptions, dataTestSubj, postfix }) => {
+  cssStyles?: MultiSelectPickerStyles;
+}> = ({ options, onChange, title, checkedOptions, dataTestSubj, postfix, cssStyles }) => {
   const euiTheme = useCurrentEuiTheme();
 
   const [items, setItems] = useState<Option[]>(options);
@@ -114,7 +121,7 @@ export const MultiSelectPicker: FC<{
   );
 
   return (
-    <EuiFilterGroup data-test-subj={dataTestSubj} style={{ marginLeft: 8 }}>
+    <EuiFilterGroup data-test-subj={dataTestSubj} css={cssStyles?.filterGroup}>
       <EuiPopover
         ownFocus
         data-test-subj={`${dataTestSubj}-popover`}
@@ -130,7 +137,15 @@ export const MultiSelectPicker: FC<{
             data-test-subj={`${dataTestSubj}-searchInput`}
           />
         </EuiPopoverTitle>
-        <div style={{ maxHeight: 250, overflow: 'auto' }}>
+        <div
+          css={
+            cssStyles?.filterItemContainer ??
+            css`
+              max-height: 250px;
+              overflow: auto;
+            `
+          }
+        >
           {Array.isArray(items) && items.length > 0 ? (
             items.map((item, index) => {
               const checked =

x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_count_stats/_index.scss

@@ -8,5 +8,5 @@
 
 .dvFieldCount__item {
   max-width: 300px;
-  min-width: 300px;
+  min-width: 200px;
 }

x-pack/plugins/data_visualizer/public/application/common/components/stats_table/data_visualizer_stats_table.tsx

@@ -88,7 +88,6 @@ export const DataVisualizerTable = <T extends DataVisualizerTableItem>({
   );
   const [showDistributions, setShowDistributions] = useState<boolean>(showPreviewByDefault ?? true);
   const [dimensions, setDimensions] = useState(calculateTableColumnsDimensions());
-  const [tableWidth, setTableWidth] = useState<number>(1400);
 
   const toggleExpandAll = useCallback(
     (shouldExpandAll: boolean) => {
@@ -109,10 +108,9 @@ export const DataVisualizerTable = <T extends DataVisualizerTableItem>({
     throttle((e: { width: number; height: number }) => {
       // When window or table is resized,
       // update the column widths and other settings accordingly
-      setTableWidth(e.width);
       setDimensions(calculateTableColumnsDimensions(e.width));
     }, 500),
-    [tableWidth]
+    []
   );
 
   const toggleShowDistribution = useCallback(() => {
@@ -138,6 +136,8 @@ export const DataVisualizerTable = <T extends DataVisualizerTableItem>({
   const columns = useMemo(() => {
     const expanderColumn: EuiTableComputedColumnType<DataVisualizerTableItem> = {
       name:
+        // EUI will automatically show an expander button when table is mobile view (where width <700)
+        // so we need to not render any addition button
         dimensions.breakPoint !== 'small' ? (
           <EuiButtonIcon
             data-test-subj={`dataVisualizerToggleDetailsForAllRowsButton ${

x-pack/plugins/data_visualizer/public/application/common/components/stats_table/utils.ts

@@ -40,7 +40,7 @@ export const getTFPercentage = (config: FileBasedFieldVisConfig) => {
 // Map of DataVisualizerTable breakpoints specific to the table component
 // Note that the table width is not always the full width of the browser window
 const TABLE_BREAKPOINTS = {
-  small: 600,
+  small: 700,
   medium: 1000,
   large: Infinity, // default
 };

x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/actions_panel/actions_panel.tsx

@@ -11,6 +11,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import { EuiSpacer, EuiTitle } from '@elastic/eui';
 import { DataView } from '@kbn/data-views-plugin/public';
+import { css } from '@emotion/react';
 import { flatten } from 'lodash';
 import { LinkCardProps } from '../../../common/components/link_card/link_card';
 import { useDataVisualizerKibana } from '../../../kibana_context';
@@ -24,13 +25,17 @@ interface Props {
   searchString?: string | { [key: string]: any };
   searchQueryLanguage?: string;
   getAdditionalLinks?: GetAdditionalLinks;
+  compact?: boolean;
 }
 
+const ACTIONS_PANEL_WIDTH = '240px';
+
 export const ActionsPanel: FC<Props> = ({
   dataView,
   searchString,
   searchQueryLanguage,
   getAdditionalLinks,
+  compact,
 }) => {
   const [globalState] = useUrlState('_g');
 
@@ -112,23 +117,33 @@ export const ActionsPanel: FC<Props> = ({
     data.query,
     getAdditionalLinks,
   ]);
+  const showActionsPanel =
+    discoverLink || (Array.isArray(asyncHrefCards) && asyncHrefCards.length > 0);
 
   // Note we use display:none for the DataRecognizer section as it needs to be
   // passed the recognizerResults object, and then run the recognizer check which
   // controls whether the recognizer section is ultimately displayed.
-  return (
-    <div data-test-subj="dataVisualizerActionsPanel">
+  return showActionsPanel ? (
+    <div
+      data-test-subj="dataVisualizerActionsPanel"
+      css={
+        !compact &&
+        css`
+          width: ${ACTIONS_PANEL_WIDTH};
+        `
+      }
+    >
+      <EuiTitle size="s">
+        <h2>
+          <FormattedMessage
+            id="xpack.dataVisualizer.index.actionsPanel.exploreTitle"
+            defaultMessage="Explore your data"
+          />
+        </h2>
+      </EuiTitle>
+      <EuiSpacer size="m" />
       {discoverLink && (
         <>
-          <EuiTitle size="s">
-            <h2>
-              <FormattedMessage
-                id="xpack.dataVisualizer.index.actionsPanel.exploreTitle"
-                defaultMessage="Explore your data"
-              />
-            </h2>
-          </EuiTitle>
-          <EuiSpacer size="m" />
           <LinkCard
             href={discoverLink}
             icon="discoverApp"
@@ -164,5 +179,5 @@ export const ActionsPanel: FC<Props> = ({
           </>
         ))}
     </div>
-  );
+  ) : null;
 };