return (dispatch, getState) => {
   // Clone left state to become the right state
   const leftState = getState().explore[ExploreId.left];
   const queryState = getState().location.query[ExploreId.left] as string;
   const urlState = parseUrlState(queryState);
   const queryTransactions: QueryTransaction[] = [];
   const itemState = {
     ...leftState,
     queryTransactions,
     queries: leftState.queries.slice(),
     exploreId: ExploreId.right,
     urlState,
   };
   dispatch(splitOpenAction({ itemState }));
   dispatch(stateSave());
 };

export const updateChildRefreshState = (
  state: Readonly<ExploreItemState>,
  payload: LocationUpdate,
  exploreId: ExploreId
): ExploreItemState => {
  const path = payload.path || '';
  const queryState = payload.query[exploreId] as string;
  if (!queryState) {
    return state;
  }

  const urlState = parseUrlState(queryState);
  if (!state.urlState || path !== '/explore') {
    // we only want to refresh when browser back/forward
    return {
      ...state,
      urlState,
      update: { datasource: false, queries: false, range: false, ui: false },
    };
  }

  const datasource = _.isEqual(urlState ? urlState.datasource : '', state.urlState.datasource) === false;
  const queries = _.isEqual(urlState ? urlState.queries : [], state.urlState.queries) === false;
  const range = _.isEqual(urlState ? urlState.range : DEFAULT_RANGE, state.urlState.range) === false;
  const ui = _.isEqual(urlState ? urlState.ui : DEFAULT_UI_STATE, state.urlState.ui) === false;

  return {
    ...state,
    urlState,
    update: {
      ...state.update,
      datasource,
      queries,
      range,
      ui,
    },
  };
};