make it work somehow

elastic · Nov 16, 2021 · 273fa23 · 273fa23
1 parent 88624ee
commit 273fa23
Show file tree

Hide file tree

Showing 45 changed files with 7,871 additions and 70 deletions.
diff --git a/x-pack/plugins/lens/common/expressions/rename_columns/rename_columns.ts b/x-pack/plugins/lens/common/expressions/rename_columns/rename_columns.ts
@@ -22,6 +22,10 @@ export const renameColumns: RenameColumnsExpressionFunction = {
           'A JSON encoded object in which keys are the old column ids and values are the corresponding new ones. All other columns ids are kept.',
       }),
     },
+    overwriteTypes: {
+      types: ['string'],
+      help: '',
+    },
   },
   inputTypes: ['datatable'],
   async fn(...args) {

diff --git a/x-pack/plugins/lens/common/expressions/rename_columns/rename_columns_fn.ts b/x-pack/plugins/lens/common/expressions/rename_columns/rename_columns_fn.ts
@@ -23,9 +23,10 @@ function getColumnName(originalColumn: OriginalColumn, newColumn: DatatableColum
 
 export const renameColumnFn: RenameColumnsExpressionFunction['fn'] = (
   data,
-  { idMap: encodedIdMap }
+  { idMap: encodedIdMap, overwriteTypes: encodedOverwriteTypes }
 ) => {
   const idMap = JSON.parse(encodedIdMap) as Record<string, OriginalColumn>;
+  const overwrittenFieldTypes = encodedOverwriteTypes ? JSON.parse(encodedOverwriteTypes) : {};
 
   return {
     type: 'datatable',
@@ -56,6 +57,9 @@ export const renameColumnFn: RenameColumnsExpressionFunction['fn'] = (
         ...column,
         id: mappedItem.id,
         name: getColumnName(mappedItem, column),
+        type: overwrittenFieldTypes[column.id] || column.type,
+        serializedParams:
+          overwrittenFieldTypes[column.id] === 'date' ? { id: 'date' } : column.serializedParams,
       };
     }),
   };

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/data_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/data_panel_wrapper.tsx
@@ -33,6 +33,7 @@ interface DataPanelWrapperProps {
   dropOntoWorkspace: (field: DragDropIdentifier) => void;
   hasSuggestionForField: (field: DragDropIdentifier) => boolean;
   plugins: { uiActions: UiActionsStart };
+  horizontal: boolean;
 }
 
 export const DataPanelWrapper = memo((props: DataPanelWrapperProps) => {
@@ -93,7 +94,7 @@ export const DataPanelWrapper = memo((props: DataPanelWrapperProps) => {
 
   return (
     <>
-      {Object.keys(props.datasourceMap).length > 1 && (
+      {!props.horizontal && Object.keys(props.datasourceMap).length > 1 && (
         <EuiPopover
           id="datasource-switch"
           className="lnsDataPanelWrapper__switchSource"
@@ -138,7 +139,11 @@ export const DataPanelWrapper = memo((props: DataPanelWrapperProps) => {
       {activeDatasourceId && !datasourceIsLoading && (
         <NativeRenderer
           className="lnsDataPanelWrapper"
-          render={props.datasourceMap[activeDatasourceId].renderDataPanel}
+          render={
+            props.horizontal
+              ? props.datasourceMap[activeDatasourceId].renderHorizontalDataPanel!
+              : props.datasourceMap[activeDatasourceId].renderDataPanel
+          }
           nativeProps={datasourceProps}
         />
       )}

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx
@@ -93,8 +93,23 @@ export function EditorFrame(props: EditorFrameProps) {
             showNoDataPopover={props.showNoDataPopover}
             dropOntoWorkspace={dropOntoWorkspace}
             hasSuggestionForField={hasSuggestionForField}
+            horizontal={false}
           />
         }
+        horizontalDataPanel={
+          activeDatasourceId &&
+          datasourceMap[activeDatasourceId].renderHorizontalDataPanel && (
+            <DataPanelWrapper
+              core={props.core}
+              plugins={props.plugins}
+              datasourceMap={datasourceMap}
+              showNoDataPopover={props.showNoDataPopover}
+              dropOntoWorkspace={dropOntoWorkspace}
+              hasSuggestionForField={hasSuggestionForField}
+              horizontal
+            />
+          )
+        }
         configPanel={
           areDatasourcesLoaded && (
             <ConfigPanelWrapper

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.tsx
@@ -8,13 +8,14 @@
 import './frame_layout.scss';
 
 import React from 'react';
-import { EuiPage, EuiPageBody, EuiScreenReaderOnly } from '@elastic/eui';
+import { EuiPage, EuiPageBody, EuiScreenReaderOnly, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import classNames from 'classnames';
 import { useLensSelector, selectIsFullscreenDatasource } from '../../state_management';
 
 export interface FrameLayoutProps {
   dataPanel: React.ReactNode;
+  horizontalDataPanel?: React.ReactNode;
   configPanel?: React.ReactNode;
   suggestionsPanel?: React.ReactNode;
   workspacePanel?: React.ReactNode;
@@ -29,58 +30,65 @@ export function FrameLayout(props: FrameLayoutProps) {
         'lnsFrameLayout-isFullscreen': isFullscreen,
       })}
     >
-      <EuiPageBody
-        restrictWidth={false}
-        className="lnsFrameLayout__pageContent"
-        aria-labelledby="lns_ChartTitle"
-      >
-        <section
-          className={classNames('lnsFrameLayout__sidebar lnsFrameLayout__sidebar--left', {})}
-          aria-labelledby="dataPanelId"
-        >
-          <EuiScreenReaderOnly>
-            <h2 id="dataPanelId">
-              {i18n.translate('xpack.lens.section.dataPanelLabel', {
-                defaultMessage: 'Data panel',
+      <EuiFlexGroup direction="column">
+        {props.horizontalDataPanel && (
+          <EuiFlexItem grow={false}>{props.horizontalDataPanel}</EuiFlexItem>
+        )}
+        <EuiFlexItem>
+          <EuiPageBody
+            restrictWidth={false}
+            className="lnsFrameLayout__pageContent"
+            aria-labelledby="lns_ChartTitle"
+          >
+            <section
+              className={classNames('lnsFrameLayout__sidebar lnsFrameLayout__sidebar--left', {})}
+              aria-labelledby="dataPanelId"
+            >
+              <EuiScreenReaderOnly>
+                <h2 id="dataPanelId">
+                  {i18n.translate('xpack.lens.section.dataPanelLabel', {
+                    defaultMessage: 'Data panel',
+                  })}
+                </h2>
+              </EuiScreenReaderOnly>
+              {props.dataPanel}
+            </section>
+            <section
+              className={classNames('lnsFrameLayout__pageBody', {
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                'lnsFrameLayout__pageBody-isFullscreen': isFullscreen,
               })}
-            </h2>
-          </EuiScreenReaderOnly>
-          {props.dataPanel}
-        </section>
-        <section
-          className={classNames('lnsFrameLayout__pageBody', {
-            // eslint-disable-next-line @typescript-eslint/naming-convention
-            'lnsFrameLayout__pageBody-isFullscreen': isFullscreen,
-          })}
-          aria-labelledby="workspaceId"
-        >
-          <EuiScreenReaderOnly>
-            <h2 id="workspaceId">
-              {i18n.translate('xpack.lens.section.workspaceLabel', {
-                defaultMessage: 'Visualization workspace',
+              aria-labelledby="workspaceId"
+            >
+              <EuiScreenReaderOnly>
+                <h2 id="workspaceId">
+                  {i18n.translate('xpack.lens.section.workspaceLabel', {
+                    defaultMessage: 'Visualization workspace',
+                  })}
+                </h2>
+              </EuiScreenReaderOnly>
+              {props.workspacePanel}
+              <div className="lnsFrameLayout__suggestionPanel">{props.suggestionsPanel}</div>
+            </section>
+            <section
+              className={classNames('lnsFrameLayout__sidebar lnsFrameLayout__sidebar--right', {
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                'lnsFrameLayout__sidebar-isFullscreen': isFullscreen,
               })}
-            </h2>
-          </EuiScreenReaderOnly>
-          {props.workspacePanel}
-          <div className="lnsFrameLayout__suggestionPanel">{props.suggestionsPanel}</div>
-        </section>
-        <section
-          className={classNames('lnsFrameLayout__sidebar lnsFrameLayout__sidebar--right', {
-            // eslint-disable-next-line @typescript-eslint/naming-convention
-            'lnsFrameLayout__sidebar-isFullscreen': isFullscreen,
-          })}
-          aria-labelledby="configPanel"
-        >
-          <EuiScreenReaderOnly>
-            <h2 id="configPanel">
-              {i18n.translate('xpack.lens.section.configPanelLabel', {
-                defaultMessage: 'Config panel',
-              })}
-            </h2>
-          </EuiScreenReaderOnly>
-          {props.configPanel}
-        </section>
-      </EuiPageBody>
+              aria-labelledby="configPanel"
+            >
+              <EuiScreenReaderOnly>
+                <h2 id="configPanel">
+                  {i18n.translate('xpack.lens.section.configPanelLabel', {
+                    defaultMessage: 'Config panel',
+                  })}
+                </h2>
+              </EuiScreenReaderOnly>
+              {props.configPanel}
+            </section>
+          </EuiPageBody>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiPage>
   );
 }
diff --git a/...ck/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx b/...ck/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx
@@ -125,15 +125,6 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
 
     trackUiEvent(`chart_switch`);
 
-    switchToSuggestion(
-      dispatchLens,
-      {
-        ...selection,
-        visualizationState: selection.getVisualizationState(),
-      },
-      true
-    );
-
     if (
       (!selection.datasourceId && !selection.sameDatasources) ||
       selection.dataLoss === 'everything'
@@ -145,6 +136,15 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
         })
       );
     }
+
+    switchToSuggestion(
+      dispatchLens,
+      {
+        ...selection,
+        visualizationState: selection.getVisualizationState(),
+      },
+      true
+    );
   };
 
   function getSelection(

diff --git a/x-pack/plugins/lens/public/esdsl_datasource/_datapanel.scss b/x-pack/plugins/lens/public/esdsl_datasource/_datapanel.scss
@@ -0,0 +1,67 @@
+.lnsInnerIndexPatternDataPanel {
+  width: 100%;
+  height: 100%;
+  padding: $euiSize $euiSize 0;
+}
+
+.lnsInnerIndexPatternDataPanel__header {
+  display: flex;
+  align-items: center;
+  height: $euiSize * 3;
+  margin-top: -$euiSizeS;
+}
+
+.lnsInnerIndexPatternDataPanel__triggerButton {
+  @include euiTitle('xs');
+  line-height: $euiSizeXXL;
+}
+
+.lnsInnerIndexPatternDataPanel__filterWrapper {
+  flex-grow: 0;
+}
+
+/**
+ * 1. Don't cut off the shadow of the field items
+ */
+
+.lnsInnerIndexPatternDataPanel__listWrapper {
+  @include euiOverflowShadow;
+  @include euiScrollBar;
+  margin-left: -$euiSize; /* 1 */
+  position: relative;
+  flex-grow: 1;
+  overflow: auto;
+}
+
+.lnsInnerIndexPatternDataPanel__list {
+  padding-top: $euiSizeS;
+  position: absolute;
+  top: 0;
+  left: $euiSize; /* 1 */
+  right: $euiSizeXS; /* 1 */
+}
+
+.lnsInnerIndexPatternDataPanel__filterButton {
+  width: 100%;
+  color: $euiColorPrimary;
+  padding-left: $euiSizeS;
+  padding-right: $euiSizeS;
+}
+
+.lnsInnerIndexPatternDataPanel__textField {
+  @include euiFormControlLayoutPadding(1, 'right');
+  @include euiFormControlLayoutPadding(1, 'left');
+}
+
+.lnsInnerIndexPatternDataPanel__filterType {
+  padding: $euiSizeS;
+}
+
+.lnsInnerIndexPatternDataPanel__filterTypeInner {
+  display: flex;
+  align-items: center;
+
+  .lnsFieldListPanel__fieldIcon {
+    margin-right: $euiSizeS;
+  }
+}