opensearch-project · kavilla · Feb 8, 2024 · Feb 7, 2024
@@ -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"
     ]
   }
 }
@@ -52,4 +52,3 @@
     "webpack": "npm:@amoo-miki/webpack@4.46.0-rc.2"
   }
 }
-
@@ -802,7 +802,7 @@
   width: 100%;
   max-width: 100%;
   margin-bottom: 20px;
-  font-size: 14px;
+  font-size: 12px;
 }
 .table thead {
   font-size: 12px;

@@ -802,7 +802,7 @@
   width: 100%;
   max-width: 100%;
   margin-bottom: 20px;
-  font-size: 14px;
+  font-size: 12px;
 }
 .table thead {
   font-size: 12px;

@@ -103,6 +103,7 @@ export const DataSourceSelectable = ({
   setDataSourceOptionList,
   onGetDataSetError, //   onGetDataSetError, Callback for handling get data set errors. Ensure it's memoized.
   singleSelection = { asPlainText: true },
+  ...comboBoxProps
 }: DataSourceSelectableProps) => {
   // This effect gets data sets and prepares the datasource list for UI rendering.
   useEffect(() => {
@@ -131,6 +132,7 @@ export const DataSourceSelectable = ({
 
   return (
     <EuiComboBox
+      {...comboBoxProps}
       data-test-subj="dataExplorerDSSelect"
       placeholder={i18n.translate('data.datasource.selectADatasource', {
         defaultMessage: 'Select a datasource',

@@ -7,7 +7,7 @@
  * @experimental These interfaces are experimental and might change in future releases.
  */
 
-import { EuiComboBoxSingleSelectionShape } from '@elastic/eui';
+import { EuiComboBoxProps, EuiComboBoxSingleSelectionShape } from '@elastic/eui';
 import { GenericDataSource } from '../datasource_services';
 
 export interface DataSourceGroup {
@@ -22,7 +22,7 @@ export interface DataSourceOption {
   ds: GenericDataSource;
 }
 
-export interface DataSourceSelectableProps {
+export interface DataSourceSelectableProps extends Pick<EuiComboBoxProps<unknown>, 'fullWidth'> {
   dataSources: GenericDataSource[];
   onDataSourceSelect: (dataSourceOption: DataSourceOption[]) => void;
   singleSelection?: boolean | EuiComboBoxSingleSelectionShape;

@@ -33,9 +33,8 @@
 
   // Unlike most inputs within layout control groups, the text area still needs a border.
   // These adjusts help it sit above the control groups shadow to line up correctly.
-  padding: $euiSizeS;
-  padding-top: $euiSizeS + 3px;
-  transform: translateY(-1px) translateX(-1px);
+  padding: ($euiSizeS + 2px) $euiSizeS $euiSizeS;
+  transform: translateY(-2px) translateX(-1px);
 
   &:not(:focus):not(:invalid) {
     @include euiYScrollWithShadows;

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

@@ -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 './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', { position: 'top' }]}
+                  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>

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

@@ -0,0 +1,9 @@
+.deSidebar {
+  &_panel {
+    border-top: 0;
+  }
+
+  &_dataSource {
+    border-bottom: $euiBorderThin !important;
+  }
+}
@@ -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,18 +92,29 @@ 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}
             setDataSourceOptionList={setDataSourceOptionList}
             onDataSourceSelect={handleSourceSelection}
             selectedSources={selectedSources}
             onGetDataSetError={handleGetDataSetError}
+            fullWidth
           />
         </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>

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

@@ -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