From 55e36412e9c7db502199efc3d87134d1711d2b21 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Wed, 17 Jan 2024 17:16:25 +0100 Subject: [PATCH] [Discover] Don't reset the vis on save --- .../components/layout/use_discover_histogram.ts | 10 ++++++++-- .../unified_histogram/public/chart/chart.tsx | 8 ++++++++ .../public/chart/hooks/use_lens_props.ts | 8 ++++---- .../public/chart/utils/get_lens_attributes.ts | 10 ++++------ .../public/container/container.tsx | 16 ++++++++++++++-- .../public/layout/hooks/use_lens_suggestions.ts | 14 +++++++++++++- .../public/utils/external_vis_context.ts | 7 ++++++- 7 files changed, 57 insertions(+), 16 deletions(-) diff --git a/src/plugins/discover/public/application/main/components/layout/use_discover_histogram.ts b/src/plugins/discover/public/application/main/components/layout/use_discover_histogram.ts index 371737c3578e7..74c32ab46e2b0 100644 --- a/src/plugins/discover/public/application/main/components/layout/use_discover_histogram.ts +++ b/src/plugins/discover/public/application/main/components/layout/use_discover_histogram.ts @@ -425,8 +425,14 @@ const createAppStateObservable = (state$: Observable) => { changes.chartHidden = curr.hideChart; } - if (!isEqual(prev?.visContext, curr.visContext)) { - console.log('noticed changes in discover vis context', curr.visContext); + if (!isEqual(prev?.visContext?.attributes, curr.visContext?.attributes)) { + console.log( + 'noticed changes in discover vis context', + 'prev:', + prev?.visContext?.attributes, + 'next:', + curr.visContext?.attributes + ); changes.externalVisContext = curr.visContext; } diff --git a/src/plugins/unified_histogram/public/chart/chart.tsx b/src/plugins/unified_histogram/public/chart/chart.tsx index 6868ec6029efe..7c00be3a9c3b5 100644 --- a/src/plugins/unified_histogram/public/chart/chart.tsx +++ b/src/plugins/unified_histogram/public/chart/chart.tsx @@ -212,6 +212,7 @@ export function Chart({ const onSuggestionSelectorChange = useCallback( (s: Suggestion | undefined) => { + console.log('suggestion change detected, generating a new vis context'); onSuggestionChange?.(s); onVisContextChanged?.(s ? getLensAttributesCallback(s, undefined) : undefined); }, @@ -280,6 +281,13 @@ export function Chart({ }); } + console.log( + 'active suggestion', + currentSuggestion, + 'active vis context', + externalVisContext?.attributes + ); + return ( setLensPropsContext(buildLensProps())); // TODO: find a better solution - // // Reverting saved search changes would change only attributesContext without a refetch - // useEffect(() => { - // updateLensPropsContext(); - // }, [attributesContext, updateLensPropsContext]); + // Reverting saved search changes would change only attributesContext without a refetch + useEffect(() => { + updateLensPropsContext(); + }, [attributesContext, updateLensPropsContext]); useEffect(() => { const subscription = refetch$.subscribe(updateLensPropsContext); diff --git a/src/plugins/unified_histogram/public/chart/utils/get_lens_attributes.ts b/src/plugins/unified_histogram/public/chart/utils/get_lens_attributes.ts index 6179657839390..3159d5555c723 100644 --- a/src/plugins/unified_histogram/public/chart/utils/get_lens_attributes.ts +++ b/src/plugins/unified_histogram/public/chart/utils/get_lens_attributes.ts @@ -54,17 +54,15 @@ export const getLensAttributes = ({ let shouldUpdateVisContextDueToIncompatibleSuggestion = false; - if (externalVisContext) { + if (externalVisContext && suggestion) { if ( - isEqual( - externalVisContext.attributes?.state?.query, - query - // TODO: check that's compatible based on suggestion deps - ) /* && isEqual(externalVisContext.requestData, requestData) */ && + isEqual(externalVisContext.attributes?.state?.query, query) && isSuggestionAndVisContextCompatible(suggestion, externalVisContext) ) { + console.log('using the external lens attributes'); return externalVisContext; } else { + console.log('external vis is not compatible with the current suggestion'); shouldUpdateVisContextDueToIncompatibleSuggestion = true; } } diff --git a/src/plugins/unified_histogram/public/container/container.tsx b/src/plugins/unified_histogram/public/container/container.tsx index d67c14182d3e0..49b3106408899 100644 --- a/src/plugins/unified_histogram/public/container/container.tsx +++ b/src/plugins/unified_histogram/public/container/container.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react'; +import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react'; import { Subject } from 'rxjs'; import { pick } from 'lodash'; import useMount from 'react-use/lib/useMount'; @@ -25,6 +25,7 @@ import { currentSuggestionSelector, externalVisContextSelector, } from './utils/state_selectors'; +import { getStableVisContext } from '../utils/external_vis_context'; type LayoutProps = Pick< UnifiedHistogramLayoutProps, @@ -89,7 +90,7 @@ export type UnifiedHistogramApi = { export const UnifiedHistogramContainer = forwardRef< UnifiedHistogramApi, UnifiedHistogramContainerProps ->((containerProps, ref) => { +>(({ onVisContextChanged, ...containerProps }, ref) => { const [layoutProps, setLayoutProps] = useState(); const [stateService, setStateService] = useState(); const [lensSuggestionsApi, setLensSuggestionsApi] = useState(); @@ -144,6 +145,16 @@ export const UnifiedHistogramContainer = forwardRef< requestAdapter, }); + const handleVisContextChange: typeof onVisContextChanged | undefined = useMemo(() => { + if (!onVisContextChanged) { + return undefined; + } + + return (visContext) => { + onVisContextChanged(getStableVisContext(visContext)); + }; + }, [onVisContextChanged]); + // Don't render anything until the container is initialized if (!layoutProps || !lensSuggestionsApi || !api) { return null; @@ -156,6 +167,7 @@ export const UnifiedHistogramContainer = forwardRef< {...stateProps} currentSuggestion={currentSuggestion} externalVisContext={externalVisContext} + onVisContextChanged={handleVisContextChange} isChartLoading={Boolean(isChartLoading)} topPanelHeight={topPanelHeight} input$={input$} diff --git a/src/plugins/unified_histogram/public/layout/hooks/use_lens_suggestions.ts b/src/plugins/unified_histogram/public/layout/hooks/use_lens_suggestions.ts index 330ae075bb9ae..39d071f76cf9e 100644 --- a/src/plugins/unified_histogram/public/layout/hooks/use_lens_suggestions.ts +++ b/src/plugins/unified_histogram/public/layout/hooks/use_lens_suggestions.ts @@ -68,13 +68,21 @@ export const useLensSuggestions = ({ let currentSuggestion = originalSuggestion ?? suggestions.firstSuggestion; if (externalVisContext) { - const matchingSuggestion = allSuggestions.find((suggestion) => + const matchingSuggestion = suggestions.allSuggestions.find((suggestion) => isSuggestionAndVisContextCompatible(suggestion, externalVisContext) ); currentSuggestion = matchingSuggestion || currentSuggestion; } + console.log( + 'use_lens_suggestion', + 'selected suggestion', + currentSuggestion, + 'current vis context', + externalVisContext?.attributes + ); + const suggestionDeps = useRef(getSuggestionDeps({ dataView, query, columns })); const histogramQuery = useRef(); @@ -155,6 +163,10 @@ export const useLensSuggestions = ({ suggestions.allSuggestions, ]); + if (histogramSuggestion) { + console.log('using histogram suggestion'); + } + return { allSuggestions, currentSuggestion: histogramSuggestion ?? currentSuggestion, diff --git a/src/plugins/unified_histogram/public/utils/external_vis_context.ts b/src/plugins/unified_histogram/public/utils/external_vis_context.ts index ff590f5e8b3aa..d17832ba4a287 100644 --- a/src/plugins/unified_histogram/public/utils/external_vis_context.ts +++ b/src/plugins/unified_histogram/public/utils/external_vis_context.ts @@ -7,7 +7,7 @@ */ import type { Suggestion } from '@kbn/lens-plugin/public'; -import type { ExternalVisContext } from '../types'; +import type { ExternalVisContext, LensAttributesContext } from '../types'; export const toExternalVisContextJSONString = ( visContext: ExternalVisContext | undefined @@ -57,3 +57,8 @@ export const isSuggestionAndVisContextCompatible = ( externalVisContext?.attributes?.state?.visualization?.shape ); }; + +export const getStableVisContext = (visContext: LensAttributesContext | undefined) => { + // clearing out undefined values from the object + return visContext ? JSON.parse(JSON.stringify(visContext)) : undefined; +};