Initial UI fixes for discover

packages/osd-stylelint-config/config/global_selectors.json

@@ -24,7 +24,8 @@
  "src/plugins/vis_builder/public/application/components/side_nav.scss",
  "packages/osd-ui-framework/src/components/button/button_group/_button_group.scss",
  "src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.scss",
- "src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss"
+ "src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss",
+ "src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss"
  ]
  }
 }

src/plugins/data_explorer/public/components/app_container.scss

@@ -1,8 +1,7 @@
 $osdHeaderOffset: $euiHeaderHeightCompensation;
 
 .deSidebar {
- max-width: 462px;
- min-width: 400px;
+ height: 100%;
 
  @include ouiBreakpoint("xs", "s", "m") {
  max-width: initial;

src/plugins/data_explorer/public/components/app_container.tsx

@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
-import { EuiPage, EuiPageBody } from '@elastic/eui';
+import React, { memo } from 'react';
+import { EuiPage, EuiPageBody, EuiResizableContainer, useIsWithinBreakpoints } from '@elastic/eui';
 import { Suspense } from 'react';
 import { AppMountParameters } from '../../../../core/public';
 import { Sidebar } from './sidebar';
@@ -13,25 +13,46 @@ import { View } from '../services/view_service/view';
 import './app_container.scss';
 
 export const AppContainer = ({ view, params }: { view?: View; params: AppMountParameters }) => {
+ const isMobile = useIsWithinBreakpoints(['xs', 's', 'm']);
  // TODO: Make this more robust.
  if (!view) {
  return <NoView />;
  }
 
  const { Canvas, Panel, Context } = view;
 
+ const MemoizedPanel = memo(Panel);
+ const MemoizedCanvas = memo(Canvas);
+
  // Render the application DOM.
  return (
  <EuiPage className="deLayout" paddingSize="none">
  {/* TODO: improve fallback state */}
  <Suspense fallback={<div>Loading...</div>}>
  <Context {...params}>
- <Sidebar>
- <Panel {...params} />
- </Sidebar>
- <EuiPageBody className="deLayout__canvas">
- <Canvas {...params} />
- </EuiPageBody>
+ <EuiResizableContainer direction={isMobile ? 'vertical' : 'horizontal'}>
+ {(EuiResizablePanel, EuiResizableButton) => (
+ <>
+ <EuiResizablePanel
+ initialSize={20}
+ minSize="260px"
+ mode="collapsible"
+ paddingSize="none"
+ >
+ <Sidebar>
+ <MemoizedPanel {...params} />
+ </Sidebar>
+ </EuiResizablePanel>
+ <EuiResizableButton />
+
+ <EuiResizablePanel initialSize={80} minSize="65%" mode="main" paddingSize="none">
+ <EuiPageBody className="deLayout__canvas">
+ <MemoizedCanvas {...params} />
+ </EuiPageBody>
+ </EuiResizablePanel>
+ </>
+ )}
+ </EuiResizableContainer>
  </Context>
  </Suspense>
  </EuiPage>

src/plugins/data_explorer/public/components/no_view.tsx

@@ -11,7 +11,7 @@ export const NoView = () => {
  return (
  <EuiPageTemplate
  template="centeredContent"
- className="dePageTemplate"
+ className="deLayout"
  pageContentProps={{
  role: 'alertdialog',
  color: 'plain',

src/plugins/data_explorer/public/components/sidebar/index.scss

@@ -0,0 +1,9 @@
+.deSidebar {
+ &_panel {
+ border-top: 0;
+ }
+
+ &_dataSource {
+ border-bottom: $euiBorderThin !important;
+ }
+}

src/plugins/data_explorer/public/components/sidebar/index.tsx

@@ -11,6 +11,7 @@ import { DataSourceOption } from '../../../../data/public/';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { DataExplorerServices } from '../../types';
 import { setIndexPattern, useTypedDispatch, useTypedSelector } from '../../utils/state_management';
+import './index.scss';
 
 export const Sidebar: FC = ({ children }) => {
  const { indexPattern: indexPatternId } = useTypedSelector((state) => state.metadata);
@@ -91,8 +92,18 @@ export const Sidebar: FC = ({ children }) => {
 
  return (
  <EuiPageSideBar className="deSidebar" sticky>
- <EuiSplitPanel.Outer className="eui-yScroll" hasBorder={true} borderRadius="none">
- <EuiSplitPanel.Inner paddingSize="s" color="subdued" grow={false}>
+ <EuiSplitPanel.Outer
+ className="eui-yScroll deSidebar_panel"
+ hasBorder={true}
+ borderRadius="none"
+ color="transparent"
+ >
+ <EuiSplitPanel.Inner
+ paddingSize="s"
+ grow={false}
+ color="transparent"
+ className="deSidebar_dataSource"
+ >
  <DataSourceSelectable
  dataSources={activeDataSources}
  dataSourceOptionList={dataSourceOptionList}
@@ -102,7 +113,7 @@ export const Sidebar: FC = ({ children }) => {
  onGetDataSetError={handleGetDataSetError}
  />
  </EuiSplitPanel.Inner>
- <EuiSplitPanel.Inner paddingSize="none" color="subdued" className="eui-yScroll">
+ <EuiSplitPanel.Inner paddingSize="none" color="transparent" className="eui-yScroll">
  {children}
  </EuiSplitPanel.Inner>
  </EuiSplitPanel.Outer>

src/plugins/data_explorer/public/index.ts

@@ -3,8 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.scss';
-
 import { DataExplorerPlugin } from './plugin';
 
 // This exports static code and TypeScript types,

src/plugins/discover/public/application/components/chart/histogram/histogram.tsx

@@ -306,6 +306,14 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
  type: TooltipType.VerticalCursor,
  };
 
+ // These styles override the chartsTheme so that the correct base chart colors are used
+ delete chartsTheme.axes?.gridLine?.horizontal?.stroke;
+ delete chartsTheme.axes?.gridLine?.vertical?.stroke;
+ delete chartsTheme.axes?.axisLine;
+ chartsTheme.axes!.axisTitle = {
+ fill: euiThemeVars.euiTextColor,
+ };
+
  return (
  <Chart size="100%">
  <Settings

src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx

@@ -21,6 +21,7 @@ import { SAMPLE_SIZE_SETTING } from '../../../../common';
 import { LegacyDiscoverTable } from '../default_discover_table/default_discover_table';
 import { toolbarVisibility } from './constants';
 import { getDataGridTableSetting } from '../utils/local_storage';
+import { Storage } from '../../../../../opensearch_dashboards_utils/public';
 
 export interface DataGridTableProps {
  columns: string[];
@@ -39,7 +40,7 @@ export interface DataGridTableProps {
  isToolbarVisible?: boolean;
  isContextView?: boolean;
  isLoading?: boolean;
- storage: any;
+ storage: Storage;
 }
 
 export const DataGridTable = ({
@@ -143,6 +144,8 @@ export const DataGridTable = ({
  ];
  }, []);
 
+ const datagridActive = getDataGridTableSetting(storage);
+
  const legacyDiscoverTable = useMemo(
  () => (
  <LegacyDiscoverTable
@@ -202,6 +205,23 @@ export const DataGridTable = ({
  ]
  );
 
+ const tablePanelProps = datagridActive
+ ? {
+ paddingSize: 'none' as const,
+ style: {
+ margin: '8px',
+ },
+ color: 'transparent' as const,
+ }
+ : {
+ paddingSize: 'none' as const,
+ style: {
+ margin: '0px',
+ marginLeft: '8px',
+ },
+ color: 'transparent' as const,
+ };
+
  return (
  <DiscoverGridContextProvider
  value={{
@@ -218,11 +238,12 @@ export const DataGridTable = ({
  data-title={title}
  data-description={description}
  data-test-subj="discoverTable"
+ className="eui-xScrollWithShadows"
  >
- <EuiPanel hasBorder={false} hasShadow={true} paddingSize="s" style={{ margin: '8px' }}>
- {getDataGridTableSetting(storage) ? dataGridTable : legacyDiscoverTable}
+ <EuiPanel hasBorder={false} hasShadow={false} {...tablePanelProps}>
+ {datagridActive ? dataGridTable : legacyDiscoverTable}
  </EuiPanel>
- {getDataGridTableSetting(storage) && inspectedHit && (
+ {datagridActive && inspectedHit && (
  <DataGridFlyout
  indexPattern={indexPattern}
  hit={inspectedHit}