diff --git a/src/components/Trends/TrendDepthToggle.jsx b/src/components/Trends/TrendDepthToggle.jsx index af1e46394..0c6ea07e9 100644 --- a/src/components/Trends/TrendDepthToggle.jsx +++ b/src/components/Trends/TrendDepthToggle.jsx @@ -7,6 +7,11 @@ import React from 'react' import { SLUG_SEPARATOR } from '../../constants' const maxRows = 5 +const lensMap = { + Overview: 'product', + Product: 'product', + Company: 'company' +} export class TrendDepthToggle extends React.Component { @@ -51,6 +56,22 @@ export class TrendDepthToggle extends React.Component { } } +/** + * helper containing logic to determine when to show the toggle + * @param {string} lens selected value + * @param {string} focus which focus we are on + * @param {number} resultCount count coming from trends results + * @param {number} queryCount count froming from aggs + * @returns {boolean} whether to display the toggle + */ +export const showToggle = ( lens, focus, resultCount, queryCount ) => { + // hide on Overview and Focus pages + if ( lens === 'Overview' || focus ) { + return false + } + + return resultCount > 5 || queryCount > 5 +} export const mapDispatchToProps = dispatch => ( { increaseDepth: diff => { @@ -64,7 +85,7 @@ export const mapDispatchToProps = dispatch => ( { export const mapStateToProps = state => { const { aggs, query, trends } = state const { focus, lens } = query - const lensKey = lens.toLowerCase() + const lensKey = lensMap[lens] const resultCount = coalesce( trends.results, lensKey, [] ) .filter( o => o.visible && o.isParent ).length @@ -85,7 +106,7 @@ export const mapStateToProps = state => { diff: totalResultsLength - resultCount, resultCount, queryCount, - showToggle: !focus && ( resultCount > 5 || queryCount > 5 ) + showToggle: showToggle( lens, focus, resultCount, queryCount ) } } diff --git a/src/reducers/__tests__/query.spec.jsx b/src/reducers/__tests__/query.spec.jsx index 742cab841..0f1f9815a 100644 --- a/src/reducers/__tests__/query.spec.jsx +++ b/src/reducers/__tests__/query.spec.jsx @@ -931,7 +931,6 @@ describe( 'reducer:query', () => { expect( res ).toEqual( { queryString: '?tab=List', - state: [ ], tab: types.MODE_LIST } ) } ) @@ -1005,7 +1004,6 @@ describe( 'reducer:query', () => { enablePer1000: true, mapWarningEnabled: true, queryString: '?tab=Map', - state: [], tab: types.MODE_MAP } ) } ) @@ -1021,7 +1019,6 @@ describe( 'reducer:query', () => { enablePer1000: true, mapWarningEnabled: true, queryString: '?tab=Map', - state: [], tab: types.MODE_MAP } ) } ) @@ -1052,7 +1049,6 @@ describe( 'reducer:query', () => { enablePer1000: true, mapWarningEnabled: true, queryString: '?tab=Map', - state: [], tab: types.MODE_MAP } ) } ) @@ -1173,9 +1169,10 @@ describe( 'reducer:query', () => { focus: 'A', lens: 'Product', product: [ 'A', 'A' + SLUG_SEPARATOR + 'B'], - queryString: '?focus=A&lens=product&product=A&product=A%E2%80%A2B&sub_lens=sub_product&tab=Trends', + queryString: '?focus=A&lens=product&product=A&product=A%E2%80%A2B&sub_lens=sub_product&tab=Trends&trend_depth=25', subLens: 'sub_product', tab: 'Trends', + trendDepth: 25, trendsDateWarningEnabled: false } ) } ) @@ -1192,9 +1189,10 @@ describe( 'reducer:query', () => { focus: 'A', lens: 'Company', company: [ 'A' ], - queryString: '?company=A&focus=A&lens=company&sub_lens=product&tab=Trends', + queryString: '?company=A&focus=A&lens=company&sub_lens=product&tab=Trends&trend_depth=25', subLens: 'product', tab: 'Trends', + trendDepth: 25, trendsDateWarningEnabled: false } ) } ) @@ -1209,9 +1207,9 @@ describe( 'reducer:query', () => { expect( result ).toEqual( { focus: '', lens: 'Product', - product: [], - queryString: '?lens=product&tab=Trends', + queryString: '?lens=product&tab=Trends&trend_depth=5', tab: 'Trends', + trendDepth: 5, trendsDateWarningEnabled: false } ) } ) diff --git a/src/reducers/__tests__/trends.spec.jsx b/src/reducers/__tests__/trends.spec.jsx index ee6a2b4b2..32240bf0b 100644 --- a/src/reducers/__tests__/trends.spec.jsx +++ b/src/reducers/__tests__/trends.spec.jsx @@ -148,9 +148,17 @@ describe( 'reducer:trends', () => { focus: 'gg', tooltip: { wut: 'isthis' } }, action ) ).toEqual( { + expandableRows: [], expandedTrends: [], focus: '', + results: { + company: [], + issue: [], + product: [], + 'sub-issue': [], + 'sub-product': [] + }, tooltip: false } ) } ) diff --git a/src/reducers/query.jsx b/src/reducers/query.jsx index 39d33c997..90dd05622 100644 --- a/src/reducers/query.jsx +++ b/src/reducers/query.jsx @@ -789,7 +789,8 @@ function changeFocus( state, action ) { focus, lens, subLens: state.subLens || getSubLens( lens ), - tab: types.MODE_TRENDS + tab: types.MODE_TRENDS, + trendDepth: 25 } } @@ -806,7 +807,8 @@ function removeFocus( state ) { ...state, [filterKey]: [], focus: '', - tab: types.MODE_TRENDS + tab: types.MODE_TRENDS, + trendDepth: 5 } } @@ -855,6 +857,19 @@ export function updateChartType( state, action ) { } } +/** + * helper function to remove any empty arrays from known filter sets + * @param {object} state we need to clean up + */ +export function pruneEmptyFilters( state ) { + // go through the object and delete any filter keys that have no values in it + types.knownFilters.forEach( o => { + if ( Array.isArray( state[o] ) && state[o].length === 0 ) { + delete state[o] + } + } ) +} + // ---------------------------------------------------------------------------- // Query String Builder @@ -998,6 +1013,8 @@ export default ( state = defaultQuery, action ) => { validateDateInterval( newState ) } + // remove any filter keys with empty array + pruneEmptyFilters( newState ) const qs = stateToQS( newState ) newState.queryString = qs === '?' ? '' : qs diff --git a/src/reducers/trends.jsx b/src/reducers/trends.jsx index 726a852c4..49c05a779 100644 --- a/src/reducers/trends.jsx +++ b/src/reducers/trends.jsx @@ -565,6 +565,17 @@ function removeFocus( state ) { expandableRows: [], expandedTrends: [], focus: '', + results: { + ...state.results, + /* eslint-disable quote-props */ + company: [], + product: [], + issue: [], + 'sub-product': [], + 'sub-issue': [] + /* eslint-enable quote-props */ + + }, tooltip: false } }