From 83bcf97312662732c8ba1e8ff2d4ea270a60753b Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Thu, 10 Mar 2022 17:20:37 +0100 Subject: [PATCH] fix(ui) - funnels issues, and saved search with metadata --- .../Funnels/FunnelGraph/FunnelGraph.js | 6 +++--- .../FilterAutoComplete/FilterAutoComplete.tsx | 2 +- frontend/app/types/filter/newFilter.js | 4 ++-- frontend/app/types/funnel.js | 16 ++++++++++------ 4 files changed, 16 insertions(+), 12 deletions(-) diff --git a/frontend/app/components/Funnels/FunnelGraph/FunnelGraph.js b/frontend/app/components/Funnels/FunnelGraph/FunnelGraph.js index ec94451d7..906843394 100644 --- a/frontend/app/components/Funnels/FunnelGraph/FunnelGraph.js +++ b/frontend/app/components/Funnels/FunnelGraph/FunnelGraph.js @@ -211,9 +211,9 @@ function FunnelGraph(props) { strokeWidth={0} interval={0} tick ={{ fill: '#666', fontSize: 12 }} - xAxisId={0} + xAxisId={0} /> - '"' + val + '"'} - /> + /> */} Styles.tickFormatter(val)} /> diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx index 92baa3d51..62ec51c9d 100644 --- a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx +++ b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx @@ -60,7 +60,7 @@ function FilterAutoComplete(props: Props) { .finally(() => setLoading(false)); } - const debouncedRequestValues = React.useCallback(debounce(requestValues, 300), []); + const debouncedRequestValues = React.useCallback(debounce(requestValues, 1000), []); const onInputChange = ({ target: { value } }) => { setQuery(value); diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js index 29cb324b1..ced303078 100644 --- a/frontend/app/types/filter/newFilter.js +++ b/frontend/app/types/filter/newFilter.js @@ -6,6 +6,7 @@ import { capitalize } from 'App/utils'; const countryOptions = Object.keys(countries).map(i => ({ text: countries[i], value: i })); const containsFilters = [{ key: 'contains', text: 'contains', value: 'contains' }] +export const metaFilter = { key: FilterKey.METADATA, type: FilterType.MULTIPLE, category: FilterCategory.METADATA, label: 'Metadata', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/metadata', isEvent: true }; export const filtersMap = { // EVENTS [FilterKey.CLICK]: { key: FilterKey.CLICK, type: FilterType.MULTIPLE, category: FilterCategory.INTERACTIONS, label: 'Click', operator: 'on', operatorOptions: filterOptions.targetOperators, icon: 'filters/click', isEvent: true }, @@ -31,7 +32,6 @@ export const filtersMap = { [FilterKey.ERROR]: { key: FilterKey.ERROR, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'Error', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/error', isEvent: true }, // [FilterKey.METADATA]: { key: FilterKey.METADATA, type: FilterType.MULTIPLE, category: FilterCategory.METADATA, label: 'Metadata', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/metadata', isEvent: true }, - // FILTERS [FilterKey.USER_OS]: { key: FilterKey.USER_OS, type: FilterType.MULTIPLE, category: FilterCategory.GEAR, label: 'User OS', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/os' }, [FilterKey.USER_BROWSER]: { key: FilterKey.USER_BROWSER, type: FilterType.MULTIPLE, category: FilterCategory.GEAR, label: 'User Browser', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/browser' }, @@ -133,7 +133,7 @@ export default Record({ }) _filter = subFilterMap[type] } else { - _filter = filtersMap[type]; + _filter = (type === FilterKey.METADATA) ? metaFilter : filtersMap[type]; } return { ...filter, diff --git a/frontend/app/types/funnel.js b/frontend/app/types/funnel.js index 0a97cf944..d9a27e44d 100644 --- a/frontend/app/types/funnel.js +++ b/frontend/app/types/funnel.js @@ -51,8 +51,9 @@ export default Record({ } }, fromJS: ({ stages = [], filter, activeStages = null, ...rest }) => { - let _stages = stages.map(stage => { - stage.label = getRedableName(stage.type, stage.value); + let _stages = stages.map((stage, index) => { + // stage.label = getRedableName(stage.type, stage.value); + stage.label = `Step ${index + 1}`; return stage; }); @@ -70,16 +71,19 @@ export default Record({ return { ...rest, - stages: _stages.length > 0 ? _stages.map(stage => { + stages: _stages.length > 0 ? _stages.map((stage, index) => { if (!stage) return; - stage.label = getRedableName(stage); + // stage.label = getRedableName(stage); + stage.label = `Step ${index + 1}`; return stage; }) : [], affectedUsers, lostConversions, conversionImpact, - firstStage: firstStage && firstStage.label + ' ' + truncate(firstStage.value || '', 10) || '', - lastStage: lastStage && lastStage.label + ' ' + truncate(lastStage.value || '', 10) || '', + // firstStage: firstStage && firstStage.label + ' ' + truncate(firstStage.value || '', 10) || '', + // lastStage: lastStage && lastStage.label + ' ' + truncate(lastStage.value || '', 10) || '', + firstStage: firstStage && firstStage.label || '', + lastStage: lastStage && lastStage.label || '', filter: Filter(filter), sessionsCount: lastStage && lastStage.sessionsCount, stepsCount: stages ? stages.length : 0,