[Lens] Enhance visualization modifier popup with layer palette

src/plugins/chart_expressions/expression_gauge/public/components/utils/accessors.ts

@@ -70,7 +70,7 @@ export const getMaxValue = (
   if (isRespectRanges && paletteParams?.rangeMax) {
     const metricValue = accessors?.metric ? getValueFromAccessor(accessors.metric, row) : undefined;
     return !metricValue || metricValue < paletteParams?.rangeMax
-      ? paletteParams?.rangeMax
+      ? paletteParams.rangeMax
       : metricValue;
   }
 
@@ -93,16 +93,16 @@ export const getMinValue = (
   accessors?: Accessors,
   paletteParams?: CustomPaletteParams,
   isRespectRanges?: boolean
-) => {
+): number => {
   const currentValue = accessors?.min ? getValueFromAccessor(accessors.min, row) : undefined;
-  if (currentValue !== undefined && currentValue !== null) {
+  if (currentValue != null) {
     return currentValue;
   }
 
   if (isRespectRanges && paletteParams?.rangeMin) {
     const metricValue = accessors?.metric ? getValueFromAccessor(accessors.metric, row) : undefined;
     return !metricValue || metricValue > paletteParams?.rangeMin
-      ? paletteParams?.rangeMin
+      ? paletteParams.rangeMin
       : metricValue;
   }
 
@@ -121,7 +121,7 @@ export const getMinValue = (
 
 export const getGoalValue = (row?: DatatableRow, accessors?: Accessors) => {
   const currentValue = accessors?.goal ? getValueFromAccessor(accessors.goal, row) : undefined;
-  if (currentValue !== undefined && currentValue !== null) {
+  if (currentValue != null) {
     return currentValue;
   }
 

x-pack/plugins/lens/public/datasources/form_based/info_badges.tsx

@@ -5,11 +5,11 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiText, useEuiTheme } from '@elastic/eui';
-import { css } from '@emotion/react';
+import { EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { FormBasedLayer } from '../..';
+import { InfoBadge } from '../../shared_components/info_badges/info_badge';
 import { FramePublicAPI, VisualizationInfo } from '../../types';
 import { getSamplingValue } from './utils';
 
@@ -22,38 +22,27 @@ export function ReducedSamplingSectionEntries({
   visualizationInfo: VisualizationInfo;
   dataViews: FramePublicAPI['dataViews'];
 }) {
-  const { euiTheme } = useEuiTheme();
   return (
     <>
       {layers.map(([id, layer], layerIndex) => {
         const dataView = dataViews.indexPatterns[layer.indexPatternId];
+        const layerInfo = visualizationInfo.layers.find(({ layerId, label }) => layerId === id);
         const layerTitle =
-          visualizationInfo.layers.find(({ layerId }) => layerId === id)?.label ||
+          layerInfo?.label ||
           i18n.translate('xpack.lens.indexPattern.samplingPerLayer.fallbackLayerName', {
             defaultMessage: 'Data layer',
           });
+        const layerPalette = layerInfo?.palette;
         return (
-          <li
-            key={`${layerTitle}-${dataView}-${layerIndex}`}
-            data-test-subj={`lns-feature-badges-reducedSampling-${layerIndex}`}
-            css={css`
-              margin: ${euiTheme.size.base} 0 0;
-            `}
+          <InfoBadge
+            title={layerTitle}
+            index={layerIndex}
+            dataView={dataView.id}
+            palette={layerPalette}
+            data-test-subj-prefix="lns-feature-badges-reducedSampling"
           >
-            <EuiFlexGroup justifyContent="spaceBetween">
-              <EuiFlexItem grow={false}>
-                <EuiText size="s">{layerTitle}</EuiText>
-              </EuiFlexItem>
-              <EuiFlexItem
-                grow={false}
-                css={css`
-                  padding-right: 0;
-                `}
-              >
-                <EuiText size="s">{`${Number(getSamplingValue(layer)) * 100}%`}</EuiText>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </li>
+            <EuiText size="s">{`${Number(getSamplingValue(layer)) * 100}%`}</EuiText>
+          </InfoBadge>
         );
       })}
     </>

x-pack/plugins/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_editor.tsx

@@ -53,9 +53,10 @@ import { LANGUAGE_ID } from './math_tokenization';
 import './formula.scss';
 import { FormulaIndexPatternColumn } from '../formula';
 import { insertOrReplaceFormulaColumn } from '../parse';
-import { filterByVisibleOperation, nonNullable } from '../util';
+import { filterByVisibleOperation } from '../util';
 import { getColumnTimeShiftWarnings, getDateHistogramInterval } from '../../../../time_shift_utils';
 import { getDocumentationSections } from './formula_help';
+import { nonNullable } from '../../../../../../utils';
 
 function tableHasData(
   activeData: ParamEditorProps<FormulaIndexPatternColumn>['activeData'],

x-pack/plugins/lens/public/datasources/form_based/operations/definitions/formula/editor/math_completion.ts

@@ -23,10 +23,11 @@ import type {
 import type { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
 import { parseTimeShift } from '@kbn/data-plugin/common';
 import moment from 'moment';
+import { nonNullable } from '../../../../../../utils';
 import { DateRange } from '../../../../../../../common/types';
 import type { IndexPattern } from '../../../../../../types';
 import { memoizedGetAvailableOperationsByMetadata } from '../../../operations';
-import { tinymathFunctions, groupArgsByType, unquotedStringRegex, nonNullable } from '../util';
+import { tinymathFunctions, groupArgsByType, unquotedStringRegex } from '../util';
 import type { GenericOperationDefinition } from '../..';
 import { getFunctionSignatureLabel, getHelpTextContent } from './formula_help';
 import { hasFunctionFieldArgument } from '../validation';

x-pack/plugins/lens/public/datasources/form_based/operations/definitions/formula/formula.tsx

@@ -7,6 +7,7 @@
 
 import { i18n } from '@kbn/i18n';
 import { uniqBy } from 'lodash';
+import { nonNullable } from '../../../../../utils';
 import type {
   BaseIndexPatternColumn,
   FieldBasedOperationErrorMessage,
@@ -18,7 +19,7 @@ import { runASTValidation, tryToParse } from './validation';
 import { WrappedFormulaEditor } from './editor';
 import { insertOrReplaceFormulaColumn } from './parse';
 import { generateFormula } from './generate';
-import { filterByVisibleOperation, nonNullable } from './util';
+import { filterByVisibleOperation } from './util';
 import { getManagedColumnsFrom } from '../../layer_helpers';
 import { generateMissingFieldMessage, getFilter, isColumnFormatted } from '../helpers';
 

x-pack/plugins/lens/public/datasources/form_based/operations/definitions/formula/parse.ts

@@ -8,6 +8,7 @@
 import { i18n } from '@kbn/i18n';
 import { isObject } from 'lodash';
 import type { TinymathAST, TinymathVariable, TinymathLocation } from '@kbn/tinymath';
+import { nonNullable } from '../../../../../utils';
 import type { DateRange } from '../../../../../../common/types';
 import type { IndexPattern } from '../../../../../types';
 import {
@@ -26,7 +27,6 @@ import {
   getOperationParams,
   groupArgsByType,
   mergeWithGlobalFilters,
-  nonNullable,
 } from './util';
 import { FormulaIndexPatternColumn, isFormulaIndexPatternColumn } from './formula';
 import { getColumnOrder } from '../../layer_helpers';

x-pack/plugins/lens/public/datasources/form_based/operations/definitions/formula/util.ts

@@ -14,6 +14,7 @@ import type {
   TinymathVariable,
 } from '@kbn/tinymath';
 import type { Query } from '@kbn/es-query';
+import { nonNullable } from '../../../../../utils';
 import type {
   OperationDefinition,
   GenericIndexPatternColumn,
@@ -736,10 +737,6 @@ Example: Average revenue per customer but in some cases customer id is not provi
   },
 };
 
-export function nonNullable<T>(v: T): v is NonNullable<T> {
-  return v != null;
-}
-
 export function isMathNode(node: TinymathAST | string) {
   return isObject(node) && node.type === 'function' && tinymathFunctions[node.name];
 }

x-pack/plugins/lens/public/datasources/form_based/operations/definitions/formula/validation.ts

@@ -18,6 +18,7 @@ import {
   REASON_ID_TYPES,
   validateAbsoluteTimeShift,
 } from '@kbn/data-plugin/common';
+import { nonNullable } from '../../../../../utils';
 import { DateRange } from '../../../../../../common/types';
 import {
   findMathNodes,
@@ -27,7 +28,6 @@ import {
   getValueOrName,
   groupArgsByType,
   isMathNode,
-  nonNullable,
   tinymathFunctions,
 } from './util';
 

x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts

@@ -7,16 +7,14 @@
 
 import { IUiSettingsClient, SavedObjectReference } from '@kbn/core/public';
 import { Ast } from '@kbn/interpreter';
-import memoizeOne from 'memoize-one';
 import { VisualizeFieldContext } from '@kbn/ui-actions-plugin/public';
 import { difference } from 'lodash';
 import type { DataViewsContract, DataViewSpec } from '@kbn/data-views-plugin/public';
 import { IStorageWrapper } from '@kbn/kibana-utils-plugin/public';
 import { DataViewPersistableStateService } from '@kbn/data-views-plugin/common';
 import type { TimefilterContract } from '@kbn/data-plugin/public';
-import {
+import type {
   Datasource,
-  DatasourceLayers,
   DatasourceMap,
   IndexPattern,
   IndexPatternMap,
@@ -28,9 +26,10 @@ import {
 import { buildExpression } from './expression_helpers';
 import { Document } from '../../persistence/saved_object_store';
 import { getActiveDatasourceIdFromDoc, sortDataViewRefs } from '../../utils';
-import type { DatasourceStates, DataViewsState, VisualizationState } from '../../state_management';
+import type { DatasourceStates, VisualizationState } from '../../state_management';
 import { readFromStorage } from '../../settings_storage';
 import { loadIndexPatternRefs, loadIndexPatterns } from '../../data_views_service/loader';
+import { getDatasourceLayers } from '../../state_management/utils';
 
 function getIndexPatterns(
   references?: SavedObjectReference[],
@@ -283,30 +282,6 @@ export function initializeDatasources({
   return states;
 }
 
-export const getDatasourceLayers = memoizeOne(function getDatasourceLayers(
-  datasourceStates: DatasourceStates,
-  datasourceMap: DatasourceMap,
-  indexPatterns: DataViewsState['indexPatterns']
-) {
-  const datasourceLayers: DatasourceLayers = {};
-  Object.keys(datasourceMap)
-    .filter((id) => datasourceStates[id] && !datasourceStates[id].isLoading)
-    .forEach((id) => {
-      const datasourceState = datasourceStates[id].state;
-      const datasource = datasourceMap[id];
-
-      const layers = datasource.getLayers(datasourceState);
-      layers.forEach((layer) => {
-        datasourceLayers[layer] = datasourceMap[id].getPublicAPI({
-          state: datasourceState,
-          layerId: layer,
-          indexPatterns,
-        });
-      });
-    });
-  return datasourceLayers;
-});
-
 export async function persistedStateToExpression(
   datasourceMap: DatasourceMap,
   visualizations: VisualizationMap,

x-pack/plugins/lens/public/embeddable/embeddable.tsx

@@ -126,6 +126,7 @@ import {
 } from '../app_plugin/get_application_user_messages';
 import { MessageList } from '../editor_frame_service/editor_frame/workspace_panel/message_list';
 import { EmbeddableFeatureBadge } from './embeddable_info_badges';
+import { getDatasourceLayers } from '../state_management/utils';
 
 export type LensSavedObjectAttributes = Omit<Document, 'savedObjectId' | 'type'>;
 
@@ -610,7 +611,7 @@ export class Embeddable
         visualizationMap: this.deps.visualizationMap,
         activeDatasource: this.activeDatasource,
         activeDatasourceState: {
-          isLoading: Boolean(this.activeDatasourceState),
+          isLoading: !this.activeDatasourceState,
           state: this.activeDatasourceState,
         },
         dataViews: {
@@ -631,7 +632,16 @@ export class Embeddable
         indexPatterns: this.indexPatterns,
         indexPatternRefs: this.indexPatternRefs,
       },
-      datasourceLayers: {}, // TODO
+      datasourceLayers: getDatasourceLayers(
+        {
+          [this.activeDatasourceId!]: {
+            isLoading: !this.activeDatasourceState,
+            state: this.activeDatasourceState,
+          },
+        },
+        this.deps.datasourceMap,
+        this.indexPatterns
+      ),
       query: this.savedVis.state.query,
       filters: mergedSearchContext.filters ?? [],
       dateRange: {
@@ -646,7 +656,8 @@ export class Embeddable
         setState: () => {},
         frame: frameDatasourceAPI,
         visualizationInfo: this.activeVisualization?.getVisualizationInfo?.(
-          this.activeVisualizationState
+          this.activeVisualizationState,
+          frameDatasourceAPI
         ),
       }) ?? []),
       ...(this.activeVisualization?.getUserMessages?.(this.activeVisualizationState, {
@@ -802,6 +813,13 @@ export class Embeddable
     );
 
     this.activeData = newActiveData;
+
+    // Refresh messanges if info type is found as with active data
+    // these messages can be enriched
+    if (this._userMessages.some(({ severity }) => severity === 'info')) {
+      this.loadUserMessages();
+      this.renderUserMessages();
+    }
   };
 
   private onRender: ExpressionWrapperProps['onRender$'] = () => {

x-pack/plugins/lens/public/embeddable/embeddable_info_badges.tsx

@@ -49,7 +49,7 @@ export const EmbeddableFeatureBadge = ({ messages }: { messages: UserMessage[] }
             title={iconTitle}
             size="s"
             css={css`
-              color: ${euiTheme.colors.emptyShade};
+              color: transparent;
               font-size: ${xsFontSize};
               height: ${euiTheme.size.l} !important;
               .euiButtonEmpty__content {
@@ -68,22 +68,29 @@ export const EmbeddableFeatureBadge = ({ messages }: { messages: UserMessage[] }
       isOpen={isPopoverOpen}
       closePopover={closePopover}
     >
-      <div>
-        {messages.map(({ shortMessage, longMessage }, index) => (
-          <aside
-            key={`${shortMessage}-${index}`}
-            css={css`
-              padding: ${index > 0 ? 0 : euiTheme.size.base} ${euiTheme.size.base}
-                ${index > 0 ? euiTheme.size.s : 0};
-            `}
-          >
-            {index ? <EuiHorizontalRule margin="s" /> : null}
-            <EuiTitle size="xxs" css={css`color=${euiTheme.colors.title}`}>
-              <h3>{shortMessage}</h3>
-            </EuiTitle>
-            <ul className="lnsEmbeddablePanelFeatureList">{longMessage}</ul>
-          </aside>
-        ))}
+      <div
+        css={css`
+          max-width: 280px;
+        `}
+      >
+        {messages.map(({ shortMessage, longMessage }, index) => {
+          return (
+            <>
+              {index ? <EuiHorizontalRule margin="none" /> : null}
+              <aside
+                key={`${shortMessage}-${index}`}
+                css={css`
+                  padding: ${euiTheme.size.base};
+                `}
+              >
+                <EuiTitle size="xxs" css={css`color=${euiTheme.colors.title}`}>
+                  <h3>{shortMessage}</h3>
+                </EuiTitle>
+                <ul className="lnsEmbeddablePanelFeatureList">{longMessage}</ul>
+              </aside>
+            </>
+          );
+        })}
       </div>
     </EuiPopover>
   );