diff --git a/packages/jaeger-ui/package.json b/packages/jaeger-ui/package.json
index eec832bb28..7a77eb9f5e 100644
--- a/packages/jaeger-ui/package.json
+++ b/packages/jaeger-ui/package.json
@@ -27,7 +27,8 @@
     "react-app-rewired": "^1.4.0",
     "react-scripts": "^1.0.11",
     "react-test-renderer": "^15.6.1",
-    "sinon": "^3.2.1"
+    "sinon": "^3.2.1",
+    "source-map-explorer": "^1.6.0"
   },
   "dependencies": {
     "@jaegertracing/plexus": "0.0.1-dev.3",
@@ -59,7 +60,7 @@
     "react-dom": "^16.3.2",
     "react-ga": "^2.4.1",
     "react-helmet": "^5.1.3",
-    "react-icons": "^2.2.7",
+    "react-icons": "2.2.7",
     "react-metrics": "^2.3.2",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.1.2",
@@ -79,6 +80,7 @@
     "u-basscss": "2.0.0"
   },
   "scripts": {
+    "analyze": "source-map-explorer build/static/js/main.*",
     "build": "REACT_APP_VSN_STATE=$(../../scripts/get-tracking-version.js) react-app-rewired build",
     "coverage": "yarn run test -- --coverage",
     "start:ga-debug":
diff --git a/packages/jaeger-ui/src/components/App/Page.js b/packages/jaeger-ui/src/components/App/Page.js
index fe18c06f6a..001bc00bc3 100644
--- a/packages/jaeger-ui/src/components/App/Page.js
+++ b/packages/jaeger-ui/src/components/App/Page.js
@@ -16,20 +16,24 @@
 
 import * as React from 'react';
 import { Layout } from 'antd';
+import cx from 'classnames';
 import Helmet from 'react-helmet';
 import { connect } from 'react-redux';
-import type { Location } from 'react-router-dom';
 import { withRouter } from 'react-router-dom';
-import { isEmbed } from '../../utils/embedded';
+
 import TopNav from './TopNav';
 import { trackPageView } from '../../utils/tracking';
 
+import type { ReduxState } from '../../types';
+import type { EmbeddedState } from '../../types/embedded';
+
 import './Page.css';
 
 type Props = {
+  children: React.Node,
+  embedded: EmbeddedState,
   pathname: string,
   search: string,
-  children: React.Node,
 };
 
 const { Header, Content } = Layout;
@@ -52,16 +56,18 @@ export class PageImpl extends React.Component<Props> {
   }
 
   render() {
+    const { embedded } = this.props;
+    const contentCls = cx({ 'Page--content': !embedded });
     return (
       <div>
         <Helmet title="Jaeger UI" />
         <Layout>
-          {!isEmbed(this.props.search) && (
+          {!embedded && (
             <Header className="Page--topNav">
               <TopNav />
             </Header>
           )}
-          <Content className={!isEmbed(this.props.search) && 'Page--content'}>{this.props.children}</Content>
+          <Content className={contentCls}>{this.props.children}</Content>
         </Layout>
       </div>
     );
@@ -69,9 +75,10 @@ export class PageImpl extends React.Component<Props> {
 }
 
 // export for tests
-export function mapStateToProps(state: { router: { location: Location } }) {
+export function mapStateToProps(state: ReduxState) {
+  const { embedded } = state;
   const { pathname, search } = state.router.location;
-  return { pathname, search };
+  return { embedded, pathname, search };
 }
 
 export default withRouter(connect(mapStateToProps)(PageImpl));
diff --git a/packages/jaeger-ui/src/components/App/TraceIDSearchInput.js b/packages/jaeger-ui/src/components/App/TraceIDSearchInput.js
index 1fd546578d..f880c04f88 100644
--- a/packages/jaeger-ui/src/components/App/TraceIDSearchInput.js
+++ b/packages/jaeger-ui/src/components/App/TraceIDSearchInput.js
@@ -20,7 +20,7 @@ import { withRouter } from 'react-router-dom';
 
 import type { RouterHistory } from 'react-router-dom';
 
-import prefixUrl from '../../utils/prefix-url';
+import { getUrl } from '../../components/TracePage/url';
 
 import './TraceIDSearchInput.css';
 
@@ -35,7 +35,7 @@ class TraceIDSearchInput extends React.PureComponent<Props> {
     event.preventDefault();
     const value = event.target.elements.idInput.value;
     if (value) {
-      this.props.history.push(prefixUrl(`/trace/${value}`));
+      this.props.history.push(getUrl(value));
     }
   };
 
diff --git a/packages/jaeger-ui/src/components/App/index.js b/packages/jaeger-ui/src/components/App/index.js
index 1a5ac67ea5..9415322475 100644
--- a/packages/jaeger-ui/src/components/App/index.js
+++ b/packages/jaeger-ui/src/components/App/index.js
@@ -32,8 +32,9 @@ import JaegerAPI, { DEFAULT_API_ROOT } from '../../api/jaeger';
 import configureStore from '../../utils/configure-store';
 import prefixUrl from '../../utils/prefix-url';
 
-import './index.css';
+import '../common/vars.css';
 import '../common/utils.css';
+import './index.css';
 
 const history = createHistory();
 
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItemTitle.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItemTitle.js
index 0839c98bc9..b3588b4af4 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItemTitle.js
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItemTitle.js
@@ -67,6 +67,7 @@ export default class ResultItemTitle extends React.PureComponent<Props> {
       traceName,
       disableComparision,
     } = this.props;
+    // Use a div when the ResultItemTitle doesn't link to anything
     let WrapperComponent = 'div';
     const wrapperProps: { [string]: string } = { className: 'ResultItemTitle--item ub-flex-auto' };
     if (linkTo) {
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.css b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.css
index 65579b78ac..ed61fc1911 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.css
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.css
@@ -16,13 +16,15 @@ limitations under the License.
 
 .SearchResults--header {
   border: 1px solid #e6e6e6;
-  color: rgba(0, 0, 0, 0.85);
+  color: var(--tx-color-title);
   margin-bottom: 1.25rem;
 }
 
 .SearchResults--headerOverview {
+  align-items: center;
   background-color: #f5f5f5;
   border-top: 1px solid #e6e6e6;
+  display: flex;
   padding: 1rem;
 }
 
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.js
index 4f5f533e2a..cbdb34aef2 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.js
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.js
@@ -15,21 +15,25 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { Select, Button } from 'antd';
+import { Select } from 'antd';
+import { Link } from 'react-router-dom';
 import { Field, reduxForm, formValueSelector } from 'redux-form';
 
 import DiffSelection from './DiffSelection';
 import * as markers from './index.markers';
 import ResultItem from './ResultItem';
 import ScatterPlot from './ScatterPlot';
+import { getUrl } from '../url';
 import LoadingIndicator from '../../common/LoadingIndicator';
+import NewWindowIcon from '../../common/NewWindowIcon';
+import { getLocation } from '../../TracePage/url';
 import * as orderBy from '../../../model/order-by';
 import { getPercentageOfDuration } from '../../../utils/date';
-import prefixUrl from '../../../utils/prefix-url';
+import { stripEmbeddedState } from '../../../utils/embedded-url';
 import reduxFormFieldAdapter from '../../../utils/redux-form-field-adapter';
-import { VERSION_API } from '../../../utils/embedded';
 
 import type { FetchedTrace } from '../../../types';
+import type { SearchQuery } from '../../../types/search';
 
 import './index.css';
 
@@ -37,12 +41,13 @@ type SearchResultsProps = {
   cohortAddTrace: string => void,
   cohortRemoveTrace: string => void,
   diffCohort: FetchedTrace[],
+  disableComparisons: boolean,
   goToTrace: string => void,
-  embed?: boolean,
-  hideGraph?: boolean,
+  hideGraph: boolean,
   loading: boolean,
-  getSearchURL: () => string,
   maxTraceDuration: number,
+  queryOfResults: SearchQuery,
+  showStandaloneLink: boolean,
   skipMessage?: boolean,
   traces: TraceSummary[],
 };
@@ -54,7 +59,7 @@ const Option = Select.Option;
  */
 function SelectSortImpl() {
   return (
-    <label className="ub-right">
+    <label>
       Sort:{' '}
       <Field name="sortBy" component={reduxFormFieldAdapter(Select)}>
         <Option value={orderBy.MOST_RECENT}>Most Recent</Option>
@@ -90,17 +95,18 @@ export default class SearchResults extends React.PureComponent<SearchResultsProp
 
   render() {
     const {
-      loading,
       diffCohort,
-      skipMessage,
-      traces,
+      disableComparisons,
       goToTrace,
-      embed,
       hideGraph,
-      getSearchURL,
+      loading,
       maxTraceDuration,
+      queryOfResults,
+      showStandaloneLink,
+      skipMessage,
+      traces,
     } = this.props;
-    const diffSelection = !embed && (
+    const diffSelection = !disableComparisons && (
       <DiffSelection toggleComparison={this.toggleComparison} traces={diffCohort} />
     );
     if (loading) {
@@ -124,11 +130,12 @@ export default class SearchResults extends React.PureComponent<SearchResultsProp
       );
     }
     const cohortIds = new Set(diffCohort.map(datum => datum.id));
+    const searchUrl = getUrl(stripEmbeddedState(queryOfResults));
     return (
       <div>
         <div>
           <div className="SearchResults--header">
-            {(!embed || !hideGraph) && (
+            {!hideGraph && (
               <div className="ub-p3">
                 <ScatterPlot
                   data={traces.map(t => ({
@@ -145,22 +152,20 @@ export default class SearchResults extends React.PureComponent<SearchResultsProp
               </div>
             )}
             <div className="SearchResults--headerOverview">
-              <SelectSort />
-              {embed && (
-                <label className="ub-right">
-                  <Button
-                    className="ub-mr2 ub-items-center"
-                    icon="export"
-                    target="_blank"
-                    href={getSearchURL()}
-                  >
-                    View Results
-                  </Button>
-                </label>
-              )}
-              <h2 className="ub-m0">
+              <h2 className="ub-m0 u-flex-1">
                 {traces.length} Trace{traces.length > 1 && 's'}
               </h2>
+              <SelectSort />
+              {showStandaloneLink && (
+                <Link
+                  className="u-tx-inherit ub-nowrap ub-ml3"
+                  to={searchUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <NewWindowIcon />
+                </Link>
+              )}
             </div>
           </div>
         </div>
@@ -172,16 +177,10 @@ export default class SearchResults extends React.PureComponent<SearchResultsProp
                 <ResultItem
                   durationPercent={getPercentageOfDuration(trace.duration, maxTraceDuration)}
                   isInDiffCohort={cohortIds.has(trace.traceID)}
-                  linkTo={prefixUrl(
-                    embed
-                      ? `/trace/${trace.traceID}?embed=${VERSION_API}&fromSearch=${encodeURIComponent(
-                          getSearchURL()
-                        )}`
-                      : `/trace/${trace.traceID}`
-                  )}
+                  linkTo={getLocation(trace.traceID, { fromSearch: searchUrl })}
                   toggleComparison={this.toggleComparison}
                   trace={trace}
-                  disableComparision={embed}
+                  disableComparision={disableComparisons}
                 />
               </li>
             ))}
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js
index 4642818d52..1ca213e1ee 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js
@@ -54,8 +54,8 @@ describe('<SearchResults>', () => {
     expect(wrapper.find(ScatterPlot).length).toBe(0);
   });
 
-  it('hide DiffSelection if is an embedded component', () => {
-    wrapper.setProps({ embed: true, getSearchURL: () => 'SEARCH_URL' });
+  it('hide DiffSelection when disableComparisons = true', () => {
+    wrapper.setProps({ disableComparisons: true });
     expect(wrapper.find(DiffSelection).length).toBe(0);
   });
 
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/index.js b/packages/jaeger-ui/src/components/SearchTracePage/index.js
index 2875723a6f..184a0289c9 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/index.js
+++ b/packages/jaeger-ui/src/components/SearchTracePage/index.js
@@ -20,17 +20,17 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import store from 'store';
 
-import * as jaegerApiActions from '../../actions/jaeger-api';
-import { actions as traceDiffActions } from '../TraceDiff/duck';
 import SearchForm from './SearchForm';
 import SearchResults, { sortFormSelector } from './SearchResults';
+import { isSameQuery } from './url';
+import * as jaegerApiActions from '../../actions/jaeger-api';
 import ErrorMessage from '../common/ErrorMessage';
 import LoadingIndicator from '../common/LoadingIndicator';
+import { getLocation as getTraceLocation } from '../TracePage/url';
+import { actions as traceDiffActions } from '../TraceDiff/duck';
 import { fetchedState } from '../../constants';
 import { sortTraces } from '../../model/search';
 import getLastXformCacher from '../../utils/get-last-xform-cacher';
-import prefixUrl from '../../utils/prefix-url';
-import { isEmbed, VERSION_API } from '../../utils/embedded';
 
 import './index.css';
 import JaegerLogo from '../../img/jaeger-logo.svg';
@@ -41,12 +41,14 @@ export class SearchTracePageImpl extends Component {
     const {
       diffCohort,
       fetchMultipleTraces,
+      fetchServiceOperations,
+      fetchServices,
+      isHomepage,
+      queryOfResults,
       searchTraces,
       urlQueryParams,
-      fetchServices,
-      fetchServiceOperations,
     } = this.props;
-    if (urlQueryParams.service || urlQueryParams.traceID) {
+    if (!isHomepage && urlQueryParams && !isSameQuery(urlQueryParams, queryOfResults)) {
       searchTraces(urlQueryParams);
     }
     const needForDiffs = diffCohort.filter(ft => ft.state == null).map(ft => ft.id);
@@ -61,15 +63,8 @@ export class SearchTracePageImpl extends Component {
   }
 
   goToTrace = traceID => {
-    const url = this.props.embed
-      ? `/trace/${traceID}?embed=${VERSION_API}&fromSearch=${encodeURIComponent(this.getSearchURL())}`
-      : `/trace/${traceID}`;
-    this.props.history.push(prefixUrl(url));
-  };
-
-  getSearchURL = () => {
-    const { embed: _, ...urlQuery } = this.props.query;
-    return `/search?${queryString.stringify(urlQuery)}`;
+    const { queryOfResults } = this.props;
+    this.props.history.push(getTraceLocation(traceID, { fromSearch: queryOfResults }));
   };
 
   render() {
@@ -77,6 +72,7 @@ export class SearchTracePageImpl extends Component {
       cohortAddTrace,
       cohortRemoveTrace,
       diffCohort,
+      embedded,
       errors,
       isHomepage,
       loadingServices,
@@ -84,8 +80,7 @@ export class SearchTracePageImpl extends Component {
       maxTraceDuration,
       services,
       traceResults,
-      embed,
-      hideGraph,
+      queryOfResults,
     } = this.props;
     const hasTraceResults = traceResults && traceResults.length > 0;
     const showErrors = errors && !loadingTraces;
@@ -93,7 +88,7 @@ export class SearchTracePageImpl extends Component {
     return (
       <div>
         <Row>
-          {!embed && (
+          {!embedded && (
             <Col span={6} className="SearchTracePage--column">
               <div className="SearchTracePage--find">
                 <h2>Find Traces</h2>
@@ -101,7 +96,7 @@ export class SearchTracePageImpl extends Component {
               </div>
             </Col>
           )}
-          <Col span={!embed ? 18 : 24} className="SearchTracePage--column">
+          <Col span={!embedded ? 18 : 24} className="SearchTracePage--column">
             {showErrors && (
               <div className="js-test-error-message">
                 <h2>There was an error querying for traces:</h2>
@@ -111,44 +106,43 @@ export class SearchTracePageImpl extends Component {
             {!showErrors && (
               <SearchResults
                 cohortAddTrace={cohortAddTrace}
+                cohortRemoveTrace={cohortRemoveTrace}
+                diffCohort={diffCohort}
+                disableComparisons={embedded}
                 goToTrace={this.goToTrace}
+                hideGraph={embedded && embedded.searchHideGraph}
                 loading={loadingTraces}
                 maxTraceDuration={maxTraceDuration}
-                cohortRemoveTrace={cohortRemoveTrace}
-                diffCohort={diffCohort}
+                queryOfResults={queryOfResults}
+                showStandaloneLink={Boolean(embedded)}
                 skipMessage={isHomepage}
-                getSearchURL={this.getSearchURL}
                 traces={traceResults}
-                embed={embed}
-                hideGraph={hideGraph}
               />
             )}
-            {showLogo &&
-              !embed && (
-                <img
-                  className="SearchTracePage--logo js-test-logo"
-                  alt="presentation"
-                  src={JaegerLogo}
-                  width="400"
-                />
-              )}
+            {showLogo && (
+              <img
+                className="SearchTracePage--logo js-test-logo"
+                alt="presentation"
+                src={JaegerLogo}
+                width="400"
+              />
+            )}
           </Col>
         </Row>
       </div>
     );
   }
 }
-
 SearchTracePageImpl.propTypes = {
-  query: PropTypes.object,
   isHomepage: PropTypes.bool,
-  embed: PropTypes.bool,
-  hideGraph: PropTypes.bool,
   // eslint-disable-next-line react/forbid-prop-types
   traceResults: PropTypes.array,
   diffCohort: PropTypes.array,
   cohortAddTrace: PropTypes.func,
   cohortRemoveTrace: PropTypes.func,
+  embedded: PropTypes.shape({
+    searchHideGraph: PropTypes.bool,
+  }),
   maxTraceDuration: PropTypes.number,
   loadingServices: PropTypes.bool,
   loadingTraces: PropTypes.bool,
@@ -156,6 +150,10 @@ SearchTracePageImpl.propTypes = {
     service: PropTypes.string,
     limit: PropTypes.string,
   }),
+  queryOfResults: PropTypes.shape({
+    service: PropTypes.string,
+    limit: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  }),
   services: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string,
@@ -178,11 +176,12 @@ SearchTracePageImpl.propTypes = {
 
 const stateTraceXformer = getLastXformCacher(stateTrace => {
   const { traces: traceMap, search } = stateTrace;
-  const { results, state, error: traceError } = search;
+  const { query, results, state, error: traceError } = search;
+
   const loadingTraces = state === fetchedState.LOADING;
   const traces = results.map(id => traceMap[id].data);
   const maxDuration = Math.max.apply(null, traces.map(tr => tr.duration));
-  return { traces, maxDuration, traceError, loadingTraces };
+  return { traces, maxDuration, traceError, loadingTraces, query };
 });
 
 const stateTraceDiffXformer = getLastXformCacher((stateTrace, stateTraceDiff) => {
@@ -215,12 +214,14 @@ const stateServicesXformer = getLastXformCacher(stateServices => {
 
 // export to test
 export function mapStateToProps(state) {
-  const query = queryString.parse(state.router.location.search);
-  const { hideGraph } = queryString.parse(state.router.location.search);
+  const { embedded, router, services: stServices, traceDiff } = state;
+  const query = queryString.parse(router.location.search);
   const isHomepage = !Object.keys(query).length;
-  const { traces, maxDuration, traceError, loadingTraces } = stateTraceXformer(state.trace);
-  const diffCohort = stateTraceDiffXformer(state.trace, state.traceDiff);
-  const { loadingServices, services, serviceError } = stateServicesXformer(state.services);
+  const { query: queryOfResults, traces, maxDuration, traceError, loadingTraces } = stateTraceXformer(
+    state.trace
+  );
+  const diffCohort = stateTraceDiffXformer(state.trace, traceDiff);
+  const { loadingServices, services, serviceError } = stateServicesXformer(stServices);
   const errors = [];
   if (traceError) {
     errors.push(traceError);
@@ -231,10 +232,9 @@ export function mapStateToProps(state) {
   const sortBy = sortFormSelector(state, 'sortBy');
   const traceResults = sortedTracesXformer(traces, sortBy);
   return {
-    query,
+    queryOfResults,
     diffCohort,
-    embed: isEmbed(state.router.location.search),
-    hideGraph: hideGraph !== undefined,
+    embedded,
     isHomepage,
     loadingServices,
     loadingTraces,
@@ -243,7 +243,7 @@ export function mapStateToProps(state) {
     errors: errors.length ? errors : null,
     maxTraceDuration: maxDuration,
     sortTracesBy: sortBy,
-    urlQueryParams: query,
+    urlQueryParams: Object.keys(query).length > 0 ? query : null,
   };
 }
 
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/index.test.js b/packages/jaeger-ui/src/components/SearchTracePage/index.test.js
index ae55e8f774..07a541705b 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/index.test.js
+++ b/packages/jaeger-ui/src/components/SearchTracePage/index.test.js
@@ -28,7 +28,6 @@ jest.mock('store');
 
 /* eslint-disable import/first */
 import React from 'react';
-import queryString from 'query-string';
 import { shallow, mount } from 'enzyme';
 import store from 'store';
 
@@ -39,9 +38,9 @@ import { fetchedState } from '../../constants';
 import traceGenerator from '../../demo/trace-generators';
 import { MOST_RECENT } from '../../model/order-by';
 import transformTraceData from '../../model/transform-trace-data';
-import { VERSION_API } from '../../utils/embedded';
 
 describe('<SearchTracePage>', () => {
+  const queryOfResults = {};
   let wrapper;
   let traceResults;
   let props;
@@ -49,13 +48,13 @@ describe('<SearchTracePage>', () => {
   beforeEach(() => {
     traceResults = [{ traceID: 'a', spans: [], processes: {} }, { traceID: 'b', spans: [], processes: {} }];
     props = {
+      queryOfResults,
       traceResults,
-      embed: false,
+      diffCohort: [],
       isHomepage: false,
       loadingServices: false,
       loadingTraces: false,
       maxTraceDuration: 100,
-      diffCohort: [],
       numberOfTraceResults: traceResults.length,
       services: null,
       sortTracesBy: MOST_RECENT,
@@ -83,31 +82,18 @@ describe('<SearchTracePage>', () => {
     store.get = oldFn;
   });
 
-  it('return the searchpath if call getSearchURL', () => {
-    const query =
-      'end=1542906238737000&limit=20&lookback=1h&maxDuration&minDuration&service=productpage&start=1542902638737000';
-    wrapper = mount(<SearchTracePage {...props} query={query} />);
-    expect(wrapper.instance().getSearchURL()).toBe(`/search?${queryString.stringify(query)}`);
-  });
-
-  it('Push to history the correct url when goToTrace', () => {
-    const query =
-      'end=1542906238737000&limit=20&lookback=1h&maxDuration&minDuration&service=productpage&start=1542902638737000';
-    const historyMock = { push: jest.fn() };
+  it('goToTrace pushes the trace URL with {fromSearch: true} to history', () => {
     const traceID = '15810714d6a27450';
+    const query = 'some-query';
+    const historyPush = jest.fn();
+    const historyMock = { push: historyPush };
     wrapper = mount(<SearchTracePage {...props} history={historyMock} query={query} />);
     wrapper.instance().goToTrace(traceID);
-    expect(historyMock.push.mock.calls.length).toBe(1);
-    expect(historyMock.push.mock.calls[0][0]).toBe(`/trace/${traceID}`);
-
-    // Embed Mode
-    wrapper.setProps({ embed: true });
-    wrapper.instance().goToTrace(traceID);
-    expect(historyMock.push.mock.calls[1][0]).toBe(
-      `/trace/${traceID}?embed=${VERSION_API}&fromSearch=${encodeURIComponent(
-        wrapper.instance().getSearchURL()
-      )}`
-    );
+    expect(historyPush.mock.calls.length).toBe(1);
+    expect(historyPush.mock.calls[0][0]).toEqual({
+      pathname: `/trace/${traceID}`,
+      state: { fromSearch: queryOfResults },
+    });
   });
 
   it('shows a loading indicator if loading services', () => {
@@ -180,13 +166,12 @@ describe('mapStateToProps()', () => {
     expect(diffCohort[0].data.traceID).toBe(trace.traceID);
 
     expect(rest).toEqual({
-      embed: false,
-      hideGraph: false,
-      query: {},
+      embedded: undefined,
+      queryOfResults: undefined,
       isHomepage: true,
       // the redux-form `formValueSelector` mock returns `null` for "sortBy"
       sortTracesBy: null,
-      urlQueryParams: {},
+      urlQueryParams: null,
       services: [
         {
           name: stateServices.services[0],
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/url.js b/packages/jaeger-ui/src/components/SearchTracePage/url.js
index 130485c8e6..44b2193778 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/url.js
+++ b/packages/jaeger-ui/src/components/SearchTracePage/url.js
@@ -19,6 +19,12 @@ import { matchPath } from 'react-router-dom';
 
 import prefixUrl from '../../utils/prefix-url';
 
+import type { SearchQuery } from '../../types/search';
+
+function eqEq(a: ?(string | number), b: ?(string | number)) {
+  return (a == null && b == null) || String(a) === String(b);
+}
+
 export const ROUTE_PATH = prefixUrl('/search');
 
 const ROUTE_MATCHER = { path: ROUTE_PATH, strict: true, exact: true };
@@ -28,6 +34,23 @@ export function matches(path: string) {
 }
 
 export function getUrl(query?: ?Object) {
-  const search = query ? queryString.stringify(query) : '';
-  return prefixUrl(`/search?${search}`);
+  const search = query ? `?${queryString.stringify(query)}` : '';
+  return prefixUrl(`/search${search}`);
+}
+
+export function isSameQuery(a: SearchQuery, b: SearchQuery) {
+  if (Boolean(a) !== Boolean(b)) {
+    return false;
+  }
+  return (
+    eqEq(a.end, b.end) &&
+    eqEq(a.limit, b.limit) &&
+    eqEq(a.lookback, b.lookback) &&
+    eqEq(a.maxDuration, b.maxDuration) &&
+    eqEq(a.minDuration, b.minDuration) &&
+    eqEq(a.operation, b.operation) &&
+    eqEq(a.service, b.service) &&
+    eqEq(a.start, b.start) &&
+    eqEq(a.tags, b.tags)
+  );
 }
diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/drawNode.css b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/drawNode.css
index f09ba89814..13c1c79fd9 100644
--- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/drawNode.css
+++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/drawNode.css
@@ -27,7 +27,7 @@ limitations under the License.
 }
 
 .DiffNode.is-changed {
-  color: rgba(0, 0, 0, 0.85);
+  color: var(--tx-color-title);
 }
 
 .DiffNode.is-more {
diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/CohortTable.css b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/CohortTable.css
index 2e6348c6c1..3ba96767e2 100644
--- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/CohortTable.css
+++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/CohortTable.css
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .CohortTable--traceName {
-  color: rgba(0, 0, 0, 0.85);
+  color: var(--tx-color-title);
 }
 
 .CohortTable--needMoreMsg {
diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.css b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.css
index 8e4b005cce..d7fd1aa430 100644
--- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.css
+++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.css
@@ -40,7 +40,7 @@ limitations under the License.
 }
 
 .TraecDiffHeader--traceTitleChevron {
-  color: rgba(0, 0, 0, 0.85);
+  color: var(--tx-color-title);
   font-size: 0.75em;
   margin-right: 0.75em;
   position: absolute;
diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.js b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.js
index 35a313c2ef..089f079356 100644
--- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.js
+++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.js
@@ -80,7 +80,7 @@ export default function TraceHeader(props: Props) {
         <span>
           {traceID ? (
             <React.Fragment>
-              <TraceName key="name" traceName={traceName} error={error} state={state} breakable />{' '}
+              <TraceName key="name" traceName={traceName} error={error} state={state} />{' '}
               <small key="id" className="u-tx-muted">
                 {(traceID || '').slice(0, 7)}
               </small>
diff --git a/packages/jaeger-ui/src/components/TracePage/KeyboardShortcutsHelp.js b/packages/jaeger-ui/src/components/TracePage/KeyboardShortcutsHelp.js
deleted file mode 100644
index 98a282d2ca..0000000000
--- a/packages/jaeger-ui/src/components/TracePage/KeyboardShortcutsHelp.js
+++ /dev/null
@@ -1,107 +0,0 @@
-// @flow
-
-// Copyright (c) 2017 Uber Technologies, Inc.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import React from 'react';
-import { Button, Modal, Table } from 'antd';
-
-import { kbdMappings } from './keyboard-shortcuts';
-import track from './KeyboardShortcutsHelp.track';
-
-import './KeyboardShortcutsHelp.css';
-
-type KeyboardShortcutsHelpProps = {
-  className: ?string,
-};
-
-const { Column } = Table;
-
-const symbolConv = {
-  up: '↑',
-  right: '→',
-  down: '↓',
-  left: '←',
-  shift: '⇧',
-};
-
-const descriptions = {
-  scrollPageDown: 'Scroll down',
-  scrollPageUp: 'Scroll up',
-  scrollToNextVisibleSpan: 'Scroll to the next visible span',
-  scrollToPrevVisibleSpan: 'Scroll to the previous visible span',
-  panLeft: 'Pan left',
-  panLeftFast: 'Pan left — Large',
-  panRight: 'Pan right',
-  panRightFast: 'Pan right — Large',
-  zoomIn: 'Zoom in',
-  zoomInFast: 'Zoom in — Large',
-  zoomOut: 'Zoom out',
-  zoomOutFast: 'Zoom out — Large',
-  collapseAll: 'Collapse All',
-  expandAll: 'Expand All',
-  collapseOne: 'Collapse One Level',
-  expandOne: 'Expand One Level',
-  searchSpans: 'Search Spans',
-  clearSearch: 'Clear Search',
-};
-
-function convertKeys(keyConfig: string | string[]): string[][] {
-  const config = Array.isArray(keyConfig) ? keyConfig : [keyConfig];
-  return config.map(str => str.split('+').map(part => symbolConv[part] || part.toUpperCase()));
-}
-
-function helpModal() {
-  track();
-  const data = [];
-  Object.keys(kbdMappings).forEach(title => {
-    const keyConfigs = convertKeys(kbdMappings[title]);
-    data.push(
-      ...keyConfigs.map(config => ({
-        key: String(config),
-        kbds: <kbd>{config.join(' ')}</kbd>,
-        description: descriptions[title],
-      }))
-    );
-  });
-
-  const content = (
-    <Table
-      className="KeyboardShortcutsHelp--table"
-      dataSource={data}
-      bordered
-      size="middle"
-      pagination={false}
-    >
-      <Column title="Key(s)" dataIndex="kbds" key="kbds" />
-      <Column title="Description" dataIndex="description" key="description" />
-    </Table>
-  );
-
-  Modal.info({
-    content,
-    maskClosable: true,
-    title: 'Keyboard Shortcuts',
-    width: '50%',
-  });
-}
-
-export default function KeyboardShortcutsHelp(props: KeyboardShortcutsHelpProps) {
-  const { className } = props;
-  return (
-    <Button className={className} onClick={helpModal}>
-      <span className="KeyboardShortcutsHelp--cta">⌘</span>
-    </Button>
-  );
-}
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.css b/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.css
index ef16455ae1..3a11034d1f 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.css
+++ b/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.css
@@ -18,7 +18,6 @@ limitations under the License.
   background-color: #a00;
   color: #fff;
   position: absolute;
-  top: 122px;
   padding: 1px 15px;
 }
 
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader.css b/packages/jaeger-ui/src/components/TracePage/TracePageHeader.css
deleted file mode 100644
index c247d775b5..0000000000
--- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader.css
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
-Copyright (c) 2017 Uber Technologies, Inc.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.TracePageHeader--titleRow {
-  align-items: center;
-  display: flex;
-  padding-right: 0.5rem;
-}
-
-.TracePageHeader--titleRowEmbed {
-  align-items: center;
-  background-color: #ececec;
-  border-bottom: 1px solid #d8d8d8;
-  display: flex;
-}
-
-.TracePageHeader--title,
-.TracePageHeader--titleEmbed {
-  margin: 0;
-  padding: 0.25rem 0.5rem;
-}
-
-.TracePageHeader--title:hover {
-  background: #f5f5f5;
-}
-
-.TracePageHeader--overviewItems {
-  padding: 0 0.5rem 0.25rem 0.5rem;
-}
-
-.TracePageHeader--archiveIcon {
-  font-size: 1.78em;
-  margin-right: 0.15em;
-}
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader.js
deleted file mode 100644
index 5b0c120d4e..0000000000
--- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader.js
+++ /dev/null
@@ -1,219 +0,0 @@
-// @flow
-
-// Copyright (c) 2017 Uber Technologies, Inc.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import * as React from 'react';
-import { Button, Dropdown, Input, Menu, Icon } from 'antd';
-import IoChevronDown from 'react-icons/lib/io/chevron-down';
-import IoChevronRight from 'react-icons/lib/io/chevron-right';
-import IoIosFilingOutline from 'react-icons/lib/io/ios-filing-outline';
-import { Link } from 'react-router-dom';
-
-import KeyboardShortcutsHelp from './KeyboardShortcutsHelp';
-import { trackAltViewOpen } from './TracePageHeader.track';
-import TracePageSearchBar from './TracePageSearchBar';
-import LabeledList from '../common/LabeledList';
-import { FALLBACK_TRACE_NAME } from '../../constants';
-import { formatDatetime, formatDuration } from '../../utils/date';
-import prefixUrl from '../../utils/prefix-url';
-
-import './TracePageHeader.css';
-
-type TracePageHeaderProps = {
-  traceID: string,
-  name: String,
-  slimView: boolean,
-  traceGraphView: boolean,
-  onSlimViewClicked: () => void,
-  onTraceGraphViewClicked: () => void,
-  updateTextFilter: string => void,
-  textFilter: string,
-  prevResult: () => void,
-  nextResult: () => void,
-  clearSearch: () => void,
-  forwardedRef: { current: Input | null },
-  resultCount: number,
-  archiveButtonVisible: boolean,
-  onArchiveClicked: () => void,
-  // these props are used by the `HEADER_ITEMS`
-  // eslint-disable-next-line react/no-unused-prop-types
-  timestamp: number,
-  // eslint-disable-next-line react/no-unused-prop-types
-  duration: number,
-  // eslint-disable-next-line react/no-unused-prop-types
-  numServices: number,
-  // eslint-disable-next-line react/no-unused-prop-types
-  maxDepth: number,
-  // eslint-disable-next-line react/no-unused-prop-types
-  numSpans: number,
-};
-
-export const HEADER_ITEMS = [
-  {
-    key: 'timestamp',
-    title: 'Trace Start',
-    propName: null,
-    renderer: (props: TracePageHeaderProps) => formatDatetime(props.timestamp),
-  },
-  {
-    key: 'duration',
-    title: 'Duration',
-    propName: null,
-    renderer: (props: TracePageHeaderProps) => formatDuration(props.duration),
-  },
-  {
-    key: 'service-count',
-    title: 'Services',
-    propName: 'numServices',
-    renderer: null,
-  },
-  {
-    key: 'depth',
-    title: 'Depth',
-    propName: 'maxDepth',
-    renderer: null,
-  },
-  {
-    key: 'span-count',
-    title: 'Total Spans',
-    propName: 'numSpans',
-    renderer: null,
-  },
-];
-
-export function TracePageHeaderFn(props: TracePageHeaderProps) {
-  const {
-    archiveButtonVisible,
-    onArchiveClicked,
-    duration,
-    maxDepth,
-    numSpans,
-    timestamp,
-    numServices,
-    traceID,
-    name,
-    slimView,
-    traceGraphView,
-    onSlimViewClicked,
-    onTraceGraphViewClicked,
-    updateTextFilter,
-    textFilter,
-    prevResult,
-    nextResult,
-    clearSearch,
-    resultCount,
-    forwardedRef,
-  } = props;
-
-  if (!traceID) {
-    return null;
-  }
-
-  const viewMenu = (
-    <Menu>
-      <Menu.Item>
-        <a onClick={onTraceGraphViewClicked}>{traceGraphView ? 'Trace Timeline' : 'Trace Graph'}</a>
-      </Menu.Item>
-      <Menu.Item>
-        <Link
-          to={prefixUrl(`/api/traces/${traceID}?prettyPrint=true`)}
-          rel="noopener noreferrer"
-          target="_blank"
-          onClick={trackAltViewOpen}
-        >
-          Trace JSON
-        </Link>
-      </Menu.Item>
-      <Menu.Item>
-        <Link
-          to={prefixUrl(`/api/traces/${traceID}?raw=true&prettyPrint=true`)}
-          rel="noopener noreferrer"
-          target="_blank"
-          onClick={trackAltViewOpen}
-        >
-          Trace JSON (unadjusted)
-        </Link>
-      </Menu.Item>
-    </Menu>
-  );
-
-  const overviewItems = [
-    {
-      key: 'start',
-      label: 'Trace Start:',
-      value: formatDatetime(timestamp),
-    },
-    {
-      key: 'duration',
-      label: 'Duration:',
-      value: formatDuration(duration),
-    },
-    {
-      key: 'svc-count',
-      label: 'Services:',
-      value: numServices,
-    },
-    {
-      key: 'depth',
-      label: 'Depth:',
-      value: maxDepth,
-    },
-    {
-      key: 'span-count',
-      label: 'Total Spans:',
-      value: numSpans,
-    },
-  ];
-
-  return (
-    <header>
-      <div className="TracePageHeader--titleRow">
-        <a className="ub-flex-auto ub-mr2" onClick={onSlimViewClicked} role="switch" aria-checked={!slimView}>
-          <h1 className="TracePageHeader--title ub-flex ub-items-center">
-            {slimView ? <IoChevronRight className="ub-mr2" /> : <IoChevronDown className="ub-mr2" />}
-            {name || FALLBACK_TRACE_NAME}
-          </h1>
-        </a>
-        <KeyboardShortcutsHelp className="ub-mr2" />
-        <TracePageSearchBar
-          updateTextFilter={updateTextFilter}
-          textFilter={textFilter}
-          prevResult={prevResult}
-          nextResult={nextResult}
-          clearSearch={clearSearch}
-          resultCount={resultCount}
-          ref={forwardedRef}
-        />
-
-        <Dropdown overlay={viewMenu}>
-          <Button className="ub-mr2" onClick={onTraceGraphViewClicked}>
-            {traceGraphView ? 'Trace Graph' : 'Trace Timeline'} <Icon type="down" />
-          </Button>
-        </Dropdown>
-        {archiveButtonVisible && (
-          <Button className="ub-mr2 ub-flex ub-items-center" onClick={onArchiveClicked}>
-            <IoIosFilingOutline className="TracePageHeader--archiveIcon" />
-            Archive Trace
-          </Button>
-        )}
-      </div>
-      {!slimView && <LabeledList className="TracePageHeader--overviewItems" items={overviewItems} />}
-    </header>
-  );
-}
-
-// ghetto fabulous cast because the 16.3 API is not in flow yet
-// https://github.com/facebook/flow/issues/6103
-export default (React: any).forwardRef((props, ref) => <TracePageHeaderFn {...props} forwardedRef={ref} />);
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader.test.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader.test.js
deleted file mode 100644
index 237b3b3906..0000000000
--- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader.test.js
+++ /dev/null
@@ -1,54 +0,0 @@
-// Copyright (c) 2017 Uber Technologies, Inc.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
-import { TracePageHeaderFn as TracePageHeader, HEADER_ITEMS } from './TracePageHeader';
-
-describe('<TracePageHeader>', () => {
-  const defaultProps = {
-    traceID: 'some-trace-id',
-    name: 'some-trace-name',
-    textFilter: '',
-    updateTextFilter: () => {},
-  };
-
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = shallow(<TracePageHeader {...defaultProps} />);
-  });
-
-  it('renders a <header />', () => {
-    expect(wrapper.find('header').length).toBe(1);
-  });
-
-  it('renders an empty <div> if no traceID is present', () => {
-    wrapper = mount(<TracePageHeader {...defaultProps} traceID={null} />);
-    expect(wrapper.children().length).toBe(0);
-  });
-
-  it('renders the trace title', () => {
-    const h1 = wrapper.find('h1').first();
-    expect(h1.contains(defaultProps.name)).toBeTruthy();
-  });
-
-  it('renders the header items', () => {
-    wrapper.find('.horizontal .item').forEach((item, i) => {
-      expect(item.contains(HEADER_ITEMS[i].title)).toBeTruthy();
-      expect(item.contains(HEADER_ITEMS[i].renderer(defaultProps.trace))).toBeTruthy();
-    });
-  });
-});
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.js
new file mode 100644
index 0000000000..de488cbf19
--- /dev/null
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.js
@@ -0,0 +1,66 @@
+// @flow
+
+// Copyright (c) 2018 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import * as React from 'react';
+import { Button, Dropdown, Icon, Menu } from 'antd';
+import { Link } from 'react-router-dom';
+
+import { trackAltViewOpen } from './TracePageHeader.track';
+import prefixUrl from '../../../utils/prefix-url';
+
+type Props = {
+  onTraceGraphViewClicked: () => void,
+  traceGraphView: boolean,
+  traceID: string,
+};
+
+export default function AltViewOptions(props: Props) {
+  const { onTraceGraphViewClicked, traceGraphView, traceID } = props;
+  const menu = (
+    <Menu>
+      <Menu.Item>
+        <a onClick={onTraceGraphViewClicked}>{traceGraphView ? 'Trace Timeline' : 'Trace Graph'}</a>
+      </Menu.Item>
+      <Menu.Item>
+        <Link
+          to={prefixUrl(`/api/traces/${traceID}?prettyPrint=true`)}
+          rel="noopener noreferrer"
+          target="_blank"
+          onClick={trackAltViewOpen}
+        >
+          Trace JSON
+        </Link>
+      </Menu.Item>
+      <Menu.Item>
+        <Link
+          to={prefixUrl(`/api/traces/${traceID}?raw=true&prettyPrint=true`)}
+          rel="noopener noreferrer"
+          target="_blank"
+          onClick={trackAltViewOpen}
+        >
+          Trace JSON (unadjusted)
+        </Link>
+      </Menu.Item>
+    </Menu>
+  );
+  return (
+    <Dropdown overlay={menu}>
+      <Button className="ub-mr2" onClick={onTraceGraphViewClicked}>
+        {traceGraphView ? 'Trace Graph' : 'Trace Timeline'} <Icon type="down" />
+      </Button>
+    </Dropdown>
+  );
+}
diff --git a/packages/jaeger-ui/src/components/TracePage/KeyboardShortcutsHelp.css b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/KeyboardShortcutsHelp.css
similarity index 73%
rename from packages/jaeger-ui/src/components/TracePage/KeyboardShortcutsHelp.css
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/KeyboardShortcutsHelp.css
index 1cafbe6a76..688f0c4cb0 100644
--- a/packages/jaeger-ui/src/components/TracePage/KeyboardShortcutsHelp.css
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/KeyboardShortcutsHelp.css
@@ -19,10 +19,21 @@ limitations under the License.
   margin: 0 -7px;
 }
 
+.KeyboardShortcutsHelp--table {
+  background-color: #fafafa;
+  max-height: 500px;
+  overflow: auto;
+}
+
+.KeyboardShortcutsHelp--oddRow {
+  background-color: #f6f6f6;
+}
+
 .KeyboardShortcutsHelp--table kbd {
-  background: #f5f5f5;
-  border: 1px solid #e8e8e8;
-  border-bottom: 1px solid #ddd;
+  background: #f0f0f0;
+  border-bottom: 1px solid #bbb;
+  border-radius: 3px;
+  border: 1px solid #d4d4d4;
   color: #000;
   font-family: monospace;
   padding: 0.25em 0.3em;
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/KeyboardShortcutsHelp.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/KeyboardShortcutsHelp.js
new file mode 100644
index 0000000000..e6cf9299c0
--- /dev/null
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/KeyboardShortcutsHelp.js
@@ -0,0 +1,121 @@
+// @flow
+
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import * as React from 'react';
+import { Button, Modal, Table } from 'antd';
+
+import keyboardMappings from '../keyboard-mappings';
+import track from './KeyboardShortcutsHelp.track';
+
+import './KeyboardShortcutsHelp.css';
+
+type Props = {
+  className: ?string,
+};
+
+type State = {
+  visible: boolean,
+};
+
+const { Column } = Table;
+
+const SYMBOL_CONV = {
+  up: '↑',
+  right: '→',
+  down: '↓',
+  left: '←',
+  shift: '⇧',
+};
+
+const ODD_ROW_CLASS = 'KeyboardShortcutsHelp--oddRow';
+
+function convertKeys(keyConfig: string | string[]): string[][] {
+  const config = Array.isArray(keyConfig) ? keyConfig : [keyConfig];
+  return config.map(str => str.split('+').map(part => SYMBOL_CONV[part] || part.toUpperCase()));
+}
+
+const padLeft = (text: string) => <span className="ub-pl4">{text}</span>;
+const padRight = (text: string) => <span className="ub-pr4">{text}</span>;
+const getRowClass = (_: any, index: number) => (index % 2 > 0 ? ODD_ROW_CLASS : '');
+
+let kbdTable: React.Node | null = null;
+
+function getHelpModal() {
+  track();
+  if (kbdTable) {
+    return kbdTable;
+  }
+  const data = [];
+  Object.keys(keyboardMappings).forEach(handle => {
+    const { binding, label } = keyboardMappings[handle];
+    const keyConfigs = convertKeys(binding);
+    data.push(
+      ...keyConfigs.map(config => ({
+        key: String(config),
+        kbds: <kbd>{config.join(' ')}</kbd>,
+        description: label,
+      }))
+    );
+  });
+
+  kbdTable = (
+    <Table
+      className="KeyboardShortcutsHelp--table u-simple-scrollbars"
+      dataSource={data}
+      size="middle"
+      pagination={false}
+      showHeader={false}
+      rowClassName={getRowClass}
+    >
+      <Column title="Description" dataIndex="description" key="description" render={padLeft} />
+      <Column title="Key(s)" dataIndex="kbds" key="kbds" align="right" render={padRight} />
+    </Table>
+  );
+  return kbdTable;
+}
+
+export default class KeyboardShortcutsHelp extends React.PureComponent<Props, State> {
+  props: Props;
+
+  state = {
+    visible: false,
+  };
+
+  onCtaClicked = () => this.setState({ visible: true });
+
+  onCloserClicked = () => this.setState({ visible: false });
+
+  render() {
+    const { className } = this.props;
+    return (
+      <React.Fragment>
+        <Button className={className} onClick={this.onCtaClicked}>
+          <span className="KeyboardShortcutsHelp--cta">⌘</span>
+        </Button>
+        <Modal
+          title="Keyboard Shortcuts"
+          visible={this.state.visible}
+          onOk={this.onCloserClicked}
+          onCancel={this.onCloserClicked}
+          cancelButtonProps={{ style: { display: 'none' } }}
+          bodyStyle={{ padding: 0 }}
+        >
+          {getHelpModal()}
+        </Modal>
+      </React.Fragment>
+    );
+  }
+}
diff --git a/packages/jaeger-ui/src/components/TracePage/KeyboardShortcutsHelp.track.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/KeyboardShortcutsHelp.track.js
similarity index 86%
rename from packages/jaeger-ui/src/components/TracePage/KeyboardShortcutsHelp.track.js
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/KeyboardShortcutsHelp.track.js
index 4655d0c9df..63f17b3318 100644
--- a/packages/jaeger-ui/src/components/TracePage/KeyboardShortcutsHelp.track.js
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/KeyboardShortcutsHelp.track.js
@@ -14,8 +14,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { OPEN } from '../../utils/tracking/common';
-import { trackEvent } from '../../utils/tracking';
+import { OPEN } from '../../../utils/tracking/common';
+import { trackEvent } from '../../../utils/tracking';
 
 const CATEGORY = 'jaeger/ux/trace/kbd-modal';
 
diff --git a/packages/jaeger-ui/src/components/TracePage/SpanGraph/CanvasSpanGraph.css b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/CanvasSpanGraph.css
similarity index 100%
rename from packages/jaeger-ui/src/components/TracePage/SpanGraph/CanvasSpanGraph.css
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/CanvasSpanGraph.css
diff --git a/packages/jaeger-ui/src/components/TracePage/SpanGraph/CanvasSpanGraph.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/CanvasSpanGraph.js
similarity index 96%
rename from packages/jaeger-ui/src/components/TracePage/SpanGraph/CanvasSpanGraph.js
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/CanvasSpanGraph.js
index b6479e59b7..a37e13498b 100644
--- a/packages/jaeger-ui/src/components/TracePage/SpanGraph/CanvasSpanGraph.js
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/CanvasSpanGraph.js
@@ -17,7 +17,7 @@
 import * as React from 'react';
 
 import renderIntoCanvas from './render-into-canvas';
-import colorGenerator from '../../../utils/color-generator';
+import colorGenerator from '../../../../utils/color-generator';
 
 import './CanvasSpanGraph.css';
 
diff --git a/packages/jaeger-ui/src/components/TracePage/SpanGraph/CanvasSpanGraph.test.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/CanvasSpanGraph.test.js
similarity index 100%
rename from packages/jaeger-ui/src/components/TracePage/SpanGraph/CanvasSpanGraph.test.js
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/CanvasSpanGraph.test.js
diff --git a/packages/jaeger-ui/src/components/TracePage/SpanGraph/GraphTicks.css b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/GraphTicks.css
similarity index 100%
rename from packages/jaeger-ui/src/components/TracePage/SpanGraph/GraphTicks.css
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/GraphTicks.css
diff --git a/packages/jaeger-ui/src/components/TracePage/SpanGraph/GraphTicks.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/GraphTicks.js
similarity index 100%
rename from packages/jaeger-ui/src/components/TracePage/SpanGraph/GraphTicks.js
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/GraphTicks.js
diff --git a/packages/jaeger-ui/src/components/TracePage/SpanGraph/GraphTicks.test.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/GraphTicks.test.js
similarity index 100%
rename from packages/jaeger-ui/src/components/TracePage/SpanGraph/GraphTicks.test.js
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/GraphTicks.test.js
diff --git a/packages/jaeger-ui/src/components/TracePage/SpanGraph/Scrubber.css b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/Scrubber.css
similarity index 100%
rename from packages/jaeger-ui/src/components/TracePage/SpanGraph/Scrubber.css
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/Scrubber.css
diff --git a/packages/jaeger-ui/src/components/TracePage/SpanGraph/Scrubber.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/Scrubber.js
similarity index 100%
rename from packages/jaeger-ui/src/components/TracePage/SpanGraph/Scrubber.js
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/Scrubber.js
diff --git a/packages/jaeger-ui/src/components/TracePage/SpanGraph/Scrubber.test.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/Scrubber.test.js
similarity index 100%
rename from packages/jaeger-ui/src/components/TracePage/SpanGraph/Scrubber.test.js
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/Scrubber.test.js
diff --git a/packages/jaeger-ui/src/components/TracePage/SpanGraph/TickLabels.css b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/TickLabels.css
similarity index 100%
rename from packages/jaeger-ui/src/components/TracePage/SpanGraph/TickLabels.css
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/TickLabels.css
diff --git a/packages/jaeger-ui/src/components/TracePage/SpanGraph/TickLabels.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/TickLabels.js
similarity index 95%
rename from packages/jaeger-ui/src/components/TracePage/SpanGraph/TickLabels.js
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/TickLabels.js
index 51b52f5de8..9f9e364b6b 100644
--- a/packages/jaeger-ui/src/components/TracePage/SpanGraph/TickLabels.js
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/TickLabels.js
@@ -16,7 +16,7 @@
 
 import React from 'react';
 
-import { formatDuration } from '../../../utils/date';
+import { formatDuration } from '../../../../utils/date';
 
 import './TickLabels.css';
 
diff --git a/packages/jaeger-ui/src/components/TracePage/SpanGraph/TickLabels.test.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/TickLabels.test.js
similarity index 100%
rename from packages/jaeger-ui/src/components/TracePage/SpanGraph/TickLabels.test.js
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/TickLabels.test.js
diff --git a/packages/jaeger-ui/src/components/TracePage/SpanGraph/ViewingLayer.css b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/ViewingLayer.css
similarity index 98%
rename from packages/jaeger-ui/src/components/TracePage/SpanGraph/ViewingLayer.css
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/ViewingLayer.css
index 2bdc6ae022..48481be342 100644
--- a/packages/jaeger-ui/src/components/TracePage/SpanGraph/ViewingLayer.css
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/ViewingLayer.css
@@ -15,10 +15,9 @@ limitations under the License.
 */
 
 .ViewingLayer {
+  cursor: vertical-text;
   position: relative;
   z-index: 1;
-  margin-bottom: 0.5em;
-  cursor: vertical-text;
 }
 
 .ViewingLayer--graph {
diff --git a/packages/jaeger-ui/src/components/TracePage/SpanGraph/ViewingLayer.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/ViewingLayer.js
similarity index 97%
rename from packages/jaeger-ui/src/components/TracePage/SpanGraph/ViewingLayer.js
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/ViewingLayer.js
index 6c2a063b0a..c35df3e88d 100644
--- a/packages/jaeger-ui/src/components/TracePage/SpanGraph/ViewingLayer.js
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/ViewingLayer.js
@@ -19,9 +19,10 @@ import cx from 'classnames';
 
 import GraphTicks from './GraphTicks';
 import Scrubber from './Scrubber';
-import type { ViewRange, ViewRangeTimeUpdate } from '../types';
-import type { DraggableBounds, DraggingUpdate } from '../../../utils/DraggableManager';
-import DraggableManager, { updateTypes } from '../../../utils/DraggableManager';
+import DraggableManager, { updateTypes } from '../../../../utils/DraggableManager';
+
+import type { ViewRange, ViewRangeTimeUpdate } from '../../types';
+import type { DraggableBounds, DraggingUpdate } from '../../../../utils/DraggableManager';
 
 import './ViewingLayer.css';
 
diff --git a/packages/jaeger-ui/src/components/TracePage/SpanGraph/ViewingLayer.test.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/ViewingLayer.test.js
similarity index 98%
rename from packages/jaeger-ui/src/components/TracePage/SpanGraph/ViewingLayer.test.js
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/ViewingLayer.test.js
index 3e574898c8..d9a17f7af6 100644
--- a/packages/jaeger-ui/src/components/TracePage/SpanGraph/ViewingLayer.test.js
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/ViewingLayer.test.js
@@ -18,8 +18,8 @@ import { shallow } from 'enzyme';
 import GraphTicks from './GraphTicks';
 import Scrubber from './Scrubber';
 import ViewingLayer, { dragTypes } from './ViewingLayer';
-import { updateTypes } from '../../../utils/DraggableManager';
-import { polyfill as polyfillAnimationFrame } from '../../../utils/test/requestAnimationFrame';
+import { updateTypes } from '../../../../utils/DraggableManager';
+import { polyfill as polyfillAnimationFrame } from '../../../../utils/test/requestAnimationFrame';
 
 function getViewRange(viewStart, viewEnd) {
   return {
diff --git a/packages/jaeger-ui/src/components/TracePage/SpanGraph/index.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/index.js
similarity index 94%
rename from packages/jaeger-ui/src/components/TracePage/SpanGraph/index.js
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/index.js
index dfbed2cded..dfae541c7d 100644
--- a/packages/jaeger-ui/src/components/TracePage/SpanGraph/index.js
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/index.js
@@ -19,8 +19,8 @@ import * as React from 'react';
 import CanvasSpanGraph from './CanvasSpanGraph';
 import TickLabels from './TickLabels';
 import ViewingLayer from './ViewingLayer';
-import type { ViewRange, ViewRangeTimeUpdate } from '../types';
-import type { Span, Trace } from '../../../types/trace';
+import type { ViewRange, ViewRangeTimeUpdate } from '../../types';
+import type { Span, Trace } from '../../../../types/trace';
 
 const TIMELINE_TICK_INTERVAL = 4;
 
@@ -84,7 +84,7 @@ export default class SpanGraph extends React.PureComponent<SpanGraphProps, SpanG
     }
     const { items } = this.state;
     return (
-      <div className="ub-px2">
+      <div className="ub-pb2 ub-px2">
         <TickLabels numTicks={TIMELINE_TICK_INTERVAL} duration={trace.duration} />
         <div className="ub-relative">
           <CanvasSpanGraph valueWidth={trace.duration} items={items} />
diff --git a/packages/jaeger-ui/src/components/TracePage/SpanGraph/index.test.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/index.test.js
similarity index 90%
rename from packages/jaeger-ui/src/components/TracePage/SpanGraph/index.test.js
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/index.test.js
index 5b09425342..88376f8ce7 100644
--- a/packages/jaeger-ui/src/components/TracePage/SpanGraph/index.test.js
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/index.test.js
@@ -19,9 +19,9 @@ import CanvasSpanGraph from './CanvasSpanGraph';
 import SpanGraph from './index';
 import TickLabels from './TickLabels';
 import ViewingLayer from './ViewingLayer';
-import traceGenerator from '../../../../src/demo/trace-generators';
-import transformTraceData from '../../../model/transform-trace-data';
-import { polyfill as polyfillAnimationFrame } from '../../../utils/test/requestAnimationFrame';
+import traceGenerator from '../../../../demo/trace-generators';
+import transformTraceData from '../../../../model/transform-trace-data';
+import { polyfill as polyfillAnimationFrame } from '../../../../utils/test/requestAnimationFrame';
 
 describe('<SpanGraph>', () => {
   polyfillAnimationFrame(window);
diff --git a/packages/jaeger-ui/src/components/TracePage/SpanGraph/render-into-canvas.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/render-into-canvas.js
similarity index 98%
rename from packages/jaeger-ui/src/components/TracePage/SpanGraph/render-into-canvas.js
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/render-into-canvas.js
index a76a7d9d50..a1b0e5a944 100644
--- a/packages/jaeger-ui/src/components/TracePage/SpanGraph/render-into-canvas.js
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/render-into-canvas.js
@@ -15,7 +15,7 @@
 // limitations under the License.
 
 // exported for tests
-export const BG_COLOR = '#f5f5f5';
+export const BG_COLOR = '#fff';
 export const ITEM_ALPHA = 0.8;
 export const MIN_ITEM_HEIGHT = 2;
 export const MAX_TOTAL_HEIGHT = 200;
diff --git a/packages/jaeger-ui/src/components/TracePage/SpanGraph/render-into-canvas.test.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/render-into-canvas.test.js
similarity index 100%
rename from packages/jaeger-ui/src/components/TracePage/SpanGraph/render-into-canvas.test.js
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/render-into-canvas.test.js
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css
new file mode 100644
index 0000000000..1450ba471c
--- /dev/null
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css
@@ -0,0 +1,102 @@
+/*
+Copyright (c) 2017 Uber Technologies, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.TracePageHeader > :first-child {
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.TracePageHeader > :nth-child(2) {
+  background-color: #eee;
+  border-bottom: 1px solid #e4e4e4;
+}
+
+.TracePageHeader > :last-child {
+  background-color: #f8f8f8;
+  border-bottom: 1px solid #ccc;
+}
+
+/* boost the specificity for cases with only one row -- bg should be white */
+.TracePageHeader > .TracePageHeader--titleRow {
+  align-items: center;
+  background-color: #fff;
+  display: flex;
+}
+
+.TracePageHeader--back {
+  align-items: center;
+  align-self: stretch;
+  background-color: #fafafa;
+  border-bottom: 1px solid #ddd;
+  border-right: 1px solid #ddd;
+  color: inherit;
+  display: flex;
+  font-size: 1.4rem;
+  padding: 0 1rem;
+  margin-bottom: -1px;
+}
+
+.TracePageHeader--back:hover {
+  background-color: #f0f0f0;
+  border-color: #ccc;
+}
+
+.TracePageHeader--titleLink {
+  align-items: center;
+  color: var(--tx-color-title);
+  display: flex;
+  flex: 1;
+}
+
+.TracePageHeader--titleLink:hover * {
+  text-decoration: underline;
+}
+
+.TracePageHeader--titleLink:hover > *,
+.TracePageHeader--titleLink:hover small {
+  text-decoration: none;
+}
+
+.TracePageHeader--detailToggle {
+  font-size: 2.5rem;
+  transition: transform 0.07s ease-out;
+}
+
+.TracePageHeader--detailToggle.is-expanded {
+  transform: rotate(90deg);
+}
+
+.TracePageHeader--title {
+  color: inherit;
+  flex: 1;
+  font-size: 1.7em;
+  line-height: 1em;
+  margin: 0 0 0 0.5em;
+  padding: 0.5em 0;
+}
+
+.TracePageHeader--title.is-collapsible {
+  margin-left: 0;
+}
+
+.TracePageHeader--overviewItems {
+  border-bottom: 1px solid #e4e4e4;
+  padding: 0.25rem 0.5rem;
+}
+
+.TracePageHeader--archiveIcon {
+  font-size: 1.78em;
+  margin-right: 0.15em;
+}
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.js
new file mode 100644
index 0000000000..3497c604d7
--- /dev/null
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.js
@@ -0,0 +1,219 @@
+// @flow
+
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import * as React from 'react';
+import { Button, Input } from 'antd';
+import _maxBy from 'lodash/maxBy';
+import _values from 'lodash/values';
+import IoAndroidArrowBack from 'react-icons/lib/io/android-arrow-back';
+import IoIosFilingOutline from 'react-icons/lib/io/ios-filing-outline';
+import MdKeyboardArrowRight from 'react-icons/lib/md/keyboard-arrow-right';
+import { Link } from 'react-router-dom';
+
+import AltViewOptions from './AltViewOptions';
+import KeyboardShortcutsHelp from './KeyboardShortcutsHelp';
+import SpanGraph from './SpanGraph';
+import TracePageSearchBar from './TracePageSearchBar';
+import LabeledList from '../../common/LabeledList';
+import NewWindowIcon from '../../common/NewWindowIcon';
+import TraceName from '../../common/TraceName';
+import { getTraceName } from '../../../model/trace-viewer';
+import { formatDatetime, formatDuration } from '../../../utils/date';
+
+import type { ViewRange, ViewRangeTimeUpdate } from '../types';
+import type { Trace } from '../../../types/trace';
+
+import './TracePageHeader.css';
+
+type TracePageHeaderEmbedProps = {
+  canCollapse: boolean,
+  clearSearch: () => void,
+  forwardedRef: { current: Input | null },
+  hideMap: boolean,
+  hideSummary: boolean,
+  linkToStandalone: string,
+  nextResult: () => void,
+  onArchiveClicked: () => void,
+  onSlimViewClicked: () => void,
+  onTraceGraphViewClicked: () => void,
+  prevResult: () => void,
+  resultCount: number,
+  showArchiveButton: boolean,
+  showShortcutsHelp: boolean,
+  showStandaloneLink: boolean,
+  showViewOptions: boolean,
+  slimView: boolean,
+  textFilter: string,
+  toSearch: string | null,
+  trace: Trace,
+  traceGraphView: boolean,
+  updateNextViewRangeTime: ViewRangeTimeUpdate => void,
+  updateTextFilter: string => void,
+  updateViewRangeTime: (number, number) => void,
+  viewRange: ViewRange,
+};
+
+export const HEADER_ITEMS = [
+  {
+    key: 'timestamp',
+    label: 'Trace Start',
+    renderer: (trace: Trace) => formatDatetime(trace.startTime),
+  },
+  {
+    key: 'duration',
+    label: 'Duration',
+    renderer: (trace: Trace) => formatDuration(trace.duration),
+  },
+  {
+    key: 'service-count',
+    label: 'Services',
+    renderer: (trace: Trace) => new Set(_values(trace.processes).map(p => p.serviceName)).size,
+  },
+  {
+    key: 'depth',
+    label: 'Depth',
+    renderer: (trace: Trace) => _maxBy(trace.spans, 'depth').depth + 1,
+  },
+  {
+    key: 'span-count',
+    label: 'Total Spans',
+    renderer: (trace: Trace) => trace.spans.length,
+  },
+];
+
+export function TracePageHeaderFn(props: TracePageHeaderEmbedProps) {
+  const {
+    canCollapse,
+    clearSearch,
+    forwardedRef,
+    hideMap,
+    hideSummary,
+    linkToStandalone,
+    nextResult,
+    onArchiveClicked,
+    onSlimViewClicked,
+    onTraceGraphViewClicked,
+    prevResult,
+    resultCount,
+    showArchiveButton,
+    showShortcutsHelp,
+    showStandaloneLink,
+    showViewOptions,
+    slimView,
+    textFilter,
+    toSearch,
+    trace,
+    traceGraphView,
+    updateNextViewRangeTime,
+    updateTextFilter,
+    updateViewRangeTime,
+    viewRange,
+  } = props;
+
+  if (!trace) {
+    return null;
+  }
+
+  const summaryItems =
+    !hideSummary &&
+    !slimView &&
+    HEADER_ITEMS.map(item => {
+      const { renderer, ...rest } = item;
+      return { ...rest, value: renderer(trace) };
+    });
+
+  const title = (
+    <h1 className={`TracePageHeader--title ${canCollapse ? 'is-collapsible' : ''}`}>
+      <TraceName traceName={getTraceName(trace.spans)} />{' '}
+      <small className="u-tx-muted">{trace.traceID.slice(0, 7)}</small>
+    </h1>
+  );
+
+  return (
+    <header className="TracePageHeader">
+      <div className="TracePageHeader--titleRow">
+        {toSearch && (
+          <Link className="TracePageHeader--back" to={toSearch}>
+            <IoAndroidArrowBack />
+          </Link>
+        )}
+        {canCollapse ? (
+          <a
+            className="TracePageHeader--titleLink"
+            onClick={onSlimViewClicked}
+            role="switch"
+            aria-checked={!slimView}
+          >
+            <MdKeyboardArrowRight
+              className={`TracePageHeader--detailToggle ${!slimView ? 'is-expanded' : ''}`}
+            />
+            {title}
+          </a>
+        ) : (
+          title
+        )}
+        {showShortcutsHelp && <KeyboardShortcutsHelp className="ub-mr2" />}
+        <TracePageSearchBar
+          updateTextFilter={updateTextFilter}
+          textFilter={textFilter}
+          prevResult={prevResult}
+          nextResult={nextResult}
+          clearSearch={clearSearch}
+          resultCount={resultCount}
+          ref={forwardedRef}
+        />
+
+        {showViewOptions && (
+          <AltViewOptions
+            onTraceGraphViewClicked={onTraceGraphViewClicked}
+            traceGraphView={traceGraphView}
+            traceID={trace.traceID}
+          />
+        )}
+        {showArchiveButton && (
+          <Button className="ub-mr2 ub-flex ub-items-center" onClick={onArchiveClicked}>
+            <IoIosFilingOutline className="TracePageHeader--archiveIcon" />
+            Archive Trace
+          </Button>
+        )}
+        {showStandaloneLink && (
+          <Link
+            className="u-tx-inherit ub-nowrap ub-mx2"
+            to={linkToStandalone}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <NewWindowIcon />
+          </Link>
+        )}
+      </div>
+      {summaryItems && <LabeledList className="TracePageHeader--overviewItems" items={summaryItems} />}
+      {!hideMap &&
+        !slimView && (
+          <SpanGraph
+            trace={trace}
+            viewRange={viewRange}
+            updateNextViewRangeTime={updateNextViewRangeTime}
+            updateViewRangeTime={updateViewRangeTime}
+          />
+        )}
+    </header>
+  );
+}
+
+// ghetto fabulous cast because the 16.3 API is not in flow yet
+// https://github.com/facebook/flow/issues/6103
+export default (React: any).forwardRef((props, ref) => <TracePageHeaderFn {...props} forwardedRef={ref} />);
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.test.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.test.js
new file mode 100644
index 0000000000..eeaa7d988e
--- /dev/null
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.test.js
@@ -0,0 +1,126 @@
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+
+import AltViewOptions from './AltViewOptions';
+import KeyboardShortcutsHelp from './KeyboardShortcutsHelp';
+import SpanGraph from './SpanGraph';
+import { TracePageHeaderFn as TracePageHeader, HEADER_ITEMS } from './TracePageHeader';
+import LabeledList from '../../common/LabeledList';
+import traceGenerator from '../../../demo/trace-generators';
+import { getTraceName } from '../../../model/trace-viewer';
+import transformTraceData from '../../../model/transform-trace-data';
+
+describe('<TracePageHeader>', () => {
+  const trace = transformTraceData(traceGenerator.trace({}));
+  const defaultProps = {
+    trace,
+    showArchiveButton: false,
+    showShortcutsHelp: false,
+    showStandaloneLink: false,
+    showViewOptions: false,
+    textFilter: '',
+    updateTextFilter: () => {},
+  };
+
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<TracePageHeader {...defaultProps} />);
+  });
+
+  it('renders a <header />', () => {
+    expect(wrapper.find('header').length).toBe(1);
+  });
+
+  it('renders an empty <div> if a trace is not present', () => {
+    wrapper = mount(<TracePageHeader {...defaultProps} trace={null} />);
+    expect(wrapper.children().length).toBe(0);
+  });
+
+  it('renders the trace title', () => {
+    expect(wrapper.find({ traceName: getTraceName(trace.spans) })).toBeTruthy();
+  });
+
+  it('renders the header items', () => {
+    wrapper.find('.horizontal .item').forEach((item, i) => {
+      expect(item.contains(HEADER_ITEMS[i].title)).toBeTruthy();
+      expect(item.contains(HEADER_ITEMS[i].renderer(defaultProps.trace))).toBeTruthy();
+    });
+  });
+
+  it('renders a <SpanGraph>', () => {
+    expect(wrapper.find(SpanGraph).length).toBe(1);
+  });
+
+  describe('observes the visibility toggles for various UX elements', () => {
+    it('hides the minimap when hideMap === true', () => {
+      expect(wrapper.find(SpanGraph).length).toBe(1);
+      wrapper.setProps({ hideMap: true });
+      expect(wrapper.find(SpanGraph).length).toBe(0);
+    });
+
+    fit('hides the summary when hideSummary === true', () => {
+      expect(wrapper.find(LabeledList).length).toBe(1);
+      wrapper.setProps({ hideSummary: true });
+      expect(wrapper.find(LabeledList).length).toBe(0);
+    });
+
+    it('toggles the archive button', () => {
+      const onArchiveClicked = () => {};
+      const props = {
+        onArchiveClicked,
+        showArchiveButton: true,
+      };
+      wrapper.setProps(props);
+      expect(wrapper.find({ onClick: onArchiveClicked }).length).toBe(1);
+      props.showArchiveButton = false;
+      wrapper.setProps(props);
+      expect(wrapper.find({ onClick: onArchiveClicked }).length).toBe(0);
+    });
+
+    it('toggles <KeyboardShortcutsHelp />', () => {
+      const props = { showShortcutsHelp: true };
+      wrapper.setProps(props);
+      expect(wrapper.find(KeyboardShortcutsHelp).length).toBe(1);
+      props.showShortcutsHelp = false;
+      wrapper.setProps(props);
+      expect(wrapper.find(KeyboardShortcutsHelp).length).toBe(0);
+    });
+
+    it('toggles <AltViewOptions />', () => {
+      const props = { showViewOptions: true };
+      wrapper.setProps(props);
+      expect(wrapper.find(AltViewOptions).length).toBe(1);
+      props.showViewOptions = false;
+      wrapper.setProps(props);
+      expect(wrapper.find(AltViewOptions).length).toBe(0);
+    });
+
+    it('toggles the standalone link', () => {
+      const linkToStandalone = 'some-link';
+      const props = {
+        linkToStandalone,
+        showStandaloneLink: true,
+      };
+      wrapper.setProps(props);
+      expect(wrapper.find({ to: linkToStandalone }).length).toBe(1);
+      props.showStandaloneLink = false;
+      wrapper.setProps(props);
+      expect(wrapper.find({ to: linkToStandalone }).length).toBe(0);
+    });
+  });
+});
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader.track.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.track.js
similarity index 88%
rename from packages/jaeger-ui/src/components/TracePage/TracePageHeader.track.js
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.track.js
index 023b18f749..ff707ab3ea 100644
--- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader.track.js
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.track.js
@@ -14,8 +14,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { getToggleValue, OPEN } from '../../utils/tracking/common';
-import { trackEvent } from '../../utils/tracking';
+import { getToggleValue, OPEN } from '../../../utils/tracking/common';
+import { trackEvent } from '../../../utils/tracking';
 
 const CATEGORY_ALT_VIEW = 'jaeger/ux/trace/alt-view';
 const CATEGORY_SLIM_HEADER = 'jaeger/ux/trace/slim-header';
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageSearchBar.css b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.css
similarity index 100%
rename from packages/jaeger-ui/src/components/TracePage/TracePageSearchBar.css
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.css
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageSearchBar.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.js
similarity index 97%
rename from packages/jaeger-ui/src/components/TracePage/TracePageSearchBar.js
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.js
index 3eb31997e2..742d0bf862 100644
--- a/packages/jaeger-ui/src/components/TracePage/TracePageSearchBar.js
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.js
@@ -52,7 +52,7 @@ export function TracePageSearchBarFn(props: TracePageSearchBarProps) {
   const btnClass = `TracePageSearchBar--btn${textFilter ? '' : ' is-disabled'}`;
 
   return (
-    <div className="ub-flex-auto ub-mr2 TracePageSearchBar">
+    <div className="ub-flex-auto ub-mx2 TracePageSearchBar">
       {/* style inline because compact overwrites the display */}
       <Input.Group compact style={{ display: 'flex' }}>
         <Input
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageSearchBar.markers.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.markers.js
similarity index 100%
rename from packages/jaeger-ui/src/components/TracePage/TracePageSearchBar.markers.js
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.markers.js
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageSearchBar.test.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.test.js
similarity index 100%
rename from packages/jaeger-ui/src/components/TracePage/TracePageSearchBar.test.js
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.test.js
diff --git a/packages/jaeger-ui/src/utils/embedded/index.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/index.js
similarity index 72%
rename from packages/jaeger-ui/src/utils/embedded/index.js
rename to packages/jaeger-ui/src/components/TracePage/TracePageHeader/index.js
index 8c7b185ef1..5740ab9e7b 100644
--- a/packages/jaeger-ui/src/utils/embedded/index.js
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/index.js
@@ -1,3 +1,5 @@
+// @flow
+
 // Copyright (c) 2017 Uber Technologies, Inc.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
@@ -12,14 +14,4 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import queryString from 'query-string';
-
-export const VERSION_API = 'v0';
-
-export function isEmbed(query: string) {
-  const { embed } = queryString.parse(query);
-  if (embed === VERSION_API) {
-    return true;
-  }
-  return false;
-}
+export { default } from './TracePageHeader';
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeaderEmbed.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeaderEmbed.js
deleted file mode 100644
index fb0490f452..0000000000
--- a/packages/jaeger-ui/src/components/TracePage/TracePageHeaderEmbed.js
+++ /dev/null
@@ -1,178 +0,0 @@
-// @flow
-
-// Copyright (c) 2017 Uber Technologies, Inc.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import * as React from 'react';
-import { Input, Button } from 'antd';
-import IoChevronLeft from 'react-icons/lib/io/chevron-left';
-
-import TracePageSearchBar from './TracePageSearchBar';
-import LabeledList from '../common/LabeledList';
-import { FALLBACK_TRACE_NAME } from '../../constants';
-import { formatDatetime, formatDuration } from '../../utils/date';
-import { VERSION_API } from '../../utils/embedded';
-
-import './TracePageHeader.css';
-
-type TracePageHeaderEmbedProps = {
-  traceID: string,
-  name: String,
-  slimView: boolean,
-  updateTextFilter: string => void,
-  textFilter: string,
-  prevResult: () => void,
-  nextResult: () => void,
-  clearSearch: () => void,
-  forwardedRef: { current: Input | null },
-  resultCount: number,
-  fromSearch: string,
-  onGoFullViewClicked: () => void,
-  enableDetails: boolean,
-  // these props are used by the `HEADER_ITEMS`
-  // eslint-disable-next-line react/no-unused-prop-types
-  timestamp: number,
-  // eslint-disable-next-line react/no-unused-prop-types
-  duration: number,
-  // eslint-disable-next-line react/no-unused-prop-types
-  numServices: number,
-  // eslint-disable-next-line react/no-unused-prop-types
-  maxDepth: number,
-  // eslint-disable-next-line react/no-unused-prop-types
-  numSpans: number,
-};
-
-export const HEADER_ITEMS = [
-  {
-    key: 'timestamp',
-    title: 'Trace Start',
-    propName: null,
-    renderer: (props: TracePageHeaderEmbedProps) => formatDatetime(props.timestamp),
-  },
-  {
-    key: 'duration',
-    title: 'Duration',
-    propName: null,
-    renderer: (props: TracePageHeaderEmbedProps) => formatDuration(props.duration),
-  },
-  {
-    key: 'service-count',
-    title: 'Services',
-    propName: 'numServices',
-    renderer: null,
-  },
-  {
-    key: 'depth',
-    title: 'Depth',
-    propName: 'maxDepth',
-    renderer: null,
-  },
-  {
-    key: 'span-count',
-    title: 'Total Spans',
-    propName: 'numSpans',
-    renderer: null,
-  },
-];
-
-export function TracePageHeaderEmbedFn(props: TracePageHeaderEmbedProps) {
-  const {
-    duration,
-    maxDepth,
-    numSpans,
-    timestamp,
-    numServices,
-    traceID,
-    name,
-    slimView,
-    onGoFullViewClicked,
-    updateTextFilter,
-    textFilter,
-    prevResult,
-    nextResult,
-    clearSearch,
-    resultCount,
-    forwardedRef,
-    enableDetails,
-    fromSearch,
-  } = props;
-
-  if (!traceID) {
-    return null;
-  }
-
-  const overviewItems = [
-    {
-      key: 'start',
-      label: 'Trace Start:',
-      value: formatDatetime(timestamp),
-    },
-    {
-      key: 'duration',
-      label: 'Duration:',
-      value: formatDuration(duration),
-    },
-    {
-      key: 'svc-count',
-      label: 'Services:',
-      value: numServices,
-    },
-    {
-      key: 'depth',
-      label: 'Depth:',
-      value: maxDepth,
-    },
-    {
-      key: 'span-count',
-      label: 'Total Spans:',
-      value: numSpans,
-    },
-  ];
-
-  return (
-    <header>
-      <div className="TracePageHeader--titleRowEmbed">
-        {fromSearch !== undefined &&
-          fromSearch !== '' && (
-            <Button className="ub-mr2 ub-items-center" href={`${fromSearch}&embed=${VERSION_API}`}>
-              <IoChevronLeft className="ub-mr2" />Go back
-            </Button>
-          )}
-        <h1 className="TracePageHeader--titleEmbed ub-flex-auto ub-mr2 ub-items-center">
-          {name || FALLBACK_TRACE_NAME}
-        </h1>
-        <TracePageSearchBar
-          updateTextFilter={updateTextFilter}
-          textFilter={textFilter}
-          prevResult={prevResult}
-          nextResult={nextResult}
-          clearSearch={clearSearch}
-          resultCount={resultCount}
-          ref={forwardedRef}
-        />
-        <Button className="ub-mr2 ub-items-center" icon="export" onClick={onGoFullViewClicked}>
-          View Trace
-        </Button>
-      </div>
-      {enableDetails &&
-        !slimView && <LabeledList className="TracePageHeader--overviewItems" items={overviewItems} />}
-    </header>
-  );
-}
-
-// ghetto fabulous cast because the 16.3 API is not in flow yet
-// https://github.com/facebook/flow/issues/6103
-export default (React: any).forwardRef((props, ref) => (
-  <TracePageHeaderEmbedFn {...props} forwardedRef={ref} />
-));
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeaderEmbed.test.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeaderEmbed.test.js
deleted file mode 100644
index e67cc23e55..0000000000
--- a/packages/jaeger-ui/src/components/TracePage/TracePageHeaderEmbed.test.js
+++ /dev/null
@@ -1,61 +0,0 @@
-// Copyright (c) 2017 Uber Technologies, Inc.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
-import { TracePageHeaderEmbedFn as TracePageHeaderEmbed, HEADER_ITEMS } from './TracePageHeaderEmbed';
-import LabeledList from '../common/LabeledList';
-
-describe('<TracePageHeaderEmbed>', () => {
-  const defaultProps = {
-    traceID: 'some-trace-id',
-    name: 'some-trace-name',
-    textFilter: '',
-    updateTextFilter: () => {},
-  };
-
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = shallow(<TracePageHeaderEmbed {...defaultProps} />);
-  });
-
-  it('renders a <header />', () => {
-    expect(wrapper.find('header').length).toBe(1);
-  });
-
-  it('renders an empty <div> if no traceID is present', () => {
-    wrapper = mount(<TracePageHeaderEmbed {...defaultProps} traceID={null} />);
-    expect(wrapper.children().length).toBe(0);
-  });
-
-  it('renders the trace title', () => {
-    const h1 = wrapper.find('h1').first();
-    expect(h1.contains(defaultProps.name)).toBeTruthy();
-  });
-
-  it('renders the header items', () => {
-    wrapper.find('.horizontal .item').forEach((item, i) => {
-      expect(item.contains(HEADER_ITEMS[i].title)).toBeTruthy();
-      expect(item.contains(HEADER_ITEMS[i].renderer(defaultProps.trace))).toBeTruthy();
-    });
-  });
-
-  it('show details if queryparam enableDetails', () => {
-    wrapper.setProps({ enableDetails: true });
-    expect(wrapper.find(LabeledList).length).toBe(1);
-  });
-
-});
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.css b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.css
index da1281ac0c..a5ddfada21 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.css
+++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.css
@@ -16,7 +16,7 @@ limitations under the License.
 
 .TimelineHeaderRow {
   background: #ececec;
-  border-bottom: 1px solid #d8d8d8;
+  border-bottom: 1px solid #ccc;
   height: 38px;
   line-height: 38px;
   position: fixed;
diff --git a/packages/jaeger-ui/src/components/TracePage/index.css b/packages/jaeger-ui/src/components/TracePage/index.css
index 17a16eba7b..defafd71e2 100644
--- a/packages/jaeger-ui/src/components/TracePage/index.css
+++ b/packages/jaeger-ui/src/components/TracePage/index.css
@@ -16,7 +16,6 @@ limitations under the License.
 
 .Tracepage--headerSection {
   background: #fff;
-  border-bottom: 1px solid #d8d8d8;
   position: fixed;
   width: 100%;
   z-index: 3;
diff --git a/packages/jaeger-ui/src/components/TracePage/index.js b/packages/jaeger-ui/src/components/TracePage/index.js
index 6e478e3abc..948f9ffe8e 100644
--- a/packages/jaeger-ui/src/components/TracePage/index.js
+++ b/packages/jaeger-ui/src/components/TracePage/index.js
@@ -15,15 +15,13 @@
 // limitations under the License.
 
 import * as React from 'react';
+import { Input } from 'antd';
 import _clamp from 'lodash/clamp';
 import _mapValues from 'lodash/mapValues';
-import _maxBy from 'lodash/maxBy';
-import _values from 'lodash/values';
 import { connect } from 'react-redux';
-import queryString from 'query-string';
-import type { RouterHistory, Match } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
-import { Input } from 'antd';
+
+import type { Location, Match, RouterHistory } from 'react-router-dom';
 
 import ArchiveNotifier from './ArchiveNotifier';
 import { actions as archiveActions } from './ArchiveNotifier/duck';
@@ -31,51 +29,45 @@ import { trackFilter, trackRange } from './index.track';
 import { merge as mergeShortcuts, reset as resetShortcuts } from './keyboard-shortcuts';
 import { cancel as cancelScroll, scrollBy, scrollTo } from './scroll-page';
 import ScrollManager from './ScrollManager';
-import SpanGraph from './SpanGraph';
+import TraceGraph from './TraceGraph/TraceGraph';
+import { trackSlimHeaderToggle } from './TracePageHeader/TracePageHeader.track';
 import TracePageHeader from './TracePageHeader';
-import TracePageHeaderEmbed from './TracePageHeaderEmbed';
-import { trackSlimHeaderToggle } from './TracePageHeader.track';
 import TraceTimelineViewer from './TraceTimelineViewer';
+import { getLocation, getUrl } from './url';
 import ErrorMessage from '../common/ErrorMessage';
 import LoadingIndicator from '../common/LoadingIndicator';
 import * as jaegerApiActions from '../../actions/jaeger-api';
 import { fetchedState } from '../../constants';
-import { getTraceName } from '../../model/trace-viewer';
-import prefixUrl from '../../utils/prefix-url';
-import { isEmbed } from '../../utils/embedded';
 
 import type { CombokeysHandler, ShortcutCallbacks } from './keyboard-shortcuts';
 import type { ViewRange, ViewRangeTimeUpdate } from './types';
 import type { FetchedTrace, ReduxState } from '../../types';
-import type { KeyValuePair, Span } from '../../types/trace';
 import type { TraceArchive } from '../../types/archive';
-
-import TraceGraph from './TraceGraph/TraceGraph';
+import type { EmbeddedState } from '../../types/embedded';
+import type { KeyValuePair, Span } from '../../types/trace';
 
 import './index.css';
 
 type TracePageProps = {
+  acknowledgeArchive: string => void,
   archiveEnabled: boolean,
-  archiveTraceState: ?TraceArchive,
   archiveTrace: string => void,
-  acknowledgeArchive: string => void,
+  archiveTraceState: ?TraceArchive,
+  embedded: null | EmbeddedState,
   fetchTrace: string => void,
   history: RouterHistory,
-  searchParams: string,
   id: string,
+  location: Location,
+  searchUrl: null | string,
   trace: ?FetchedTrace,
-  embed?: boolean,
-  enableDetails?: boolean,
-  mapCollapsed?: boolean,
-  fromSearch?: string,
 };
 
 type TracePageState = {
+  findMatchesIDs: ?Set<string>,
   headerHeight: ?number,
   slimView: boolean,
   traceGraphView: boolean,
   textFilter: string,
-  findMatchesIDs: ?Set<string>,
   viewRange: ViewRange,
 };
 
@@ -118,12 +110,13 @@ export class TracePageImpl extends React.PureComponent<TracePageProps, TracePage
 
   constructor(props: TracePageProps) {
     super(props);
+    const { embedded, trace } = props;
     this.state = {
+      findMatchesIDs: null,
       headerHeight: null,
-      slimView: false,
-      traceGraphView: false,
+      slimView: Boolean(embedded && embedded.timeline.collapseTitle),
       textFilter: '',
-      findMatchesIDs: null,
+      traceGraphView: false,
       viewRange: {
         time: {
           current: [0, 1],
@@ -131,7 +124,6 @@ export class TracePageImpl extends React.PureComponent<TracePageProps, TracePage
       },
     };
     this._headerElm = null;
-    const { trace } = props;
     this._scrollManager = new ScrollManager(trace && trace.data, {
       scrollBy,
       scrollTo,
@@ -332,32 +324,19 @@ export class TracePageImpl extends React.PureComponent<TracePageProps, TracePage
   };
 
   ensureTraceFetched() {
-    const { fetchTrace, trace, id } = this.props;
+    const { fetchTrace, location, trace, id } = this.props;
     if (!trace) {
       fetchTrace(id);
       return;
     }
     const { history } = this.props;
     if (id && id !== id.toLowerCase()) {
-      history.push(prefixUrl(`/trace/${id.toLowerCase()}`));
+      history.replace(getLocation(id.toLowerCase(), location.state));
     }
   }
 
-  goFullView = () => {
-    window.open(prefixUrl(`/trace/${this.props.id.toLowerCase()}`), '_blank');
-  };
-
   render() {
-    const {
-      archiveEnabled,
-      archiveTraceState,
-      trace,
-      embed,
-      mapCollapsed,
-      enableDetails,
-      searchParams,
-      fromSearch,
-    } = this.props;
+    const { archiveEnabled, archiveTraceState, embedded, id, searchUrl, trace } = this.props;
     const { slimView, traceGraphView, headerHeight, textFilter, viewRange, findMatchesIDs } = this.state;
     if (!trace || trace.state === fetchedState.LOADING) {
       return <LoadingIndicator className="u-mt-vast" centered />;
@@ -366,37 +345,34 @@ export class TracePageImpl extends React.PureComponent<TracePageProps, TracePage
     if (trace.state === fetchedState.ERROR || !data) {
       return <ErrorMessage className="ub-m3" error={trace.error || 'Unknown error'} />;
     }
-    const { duration, processes, spans, startTime, traceID } = data;
-    const maxSpanDepth = _maxBy(spans, 'depth').depth + 1;
-    const numberOfServices = new Set(_values(processes).map(p => p.serviceName)).size;
-    const tracePageProps = {
-      duration,
-      maxDepth: maxSpanDepth,
-      name: getTraceName(spans),
-      numServices: numberOfServices,
-      numSpans: spans.length,
+
+    const isEmbedded = Boolean(embedded);
+    const headerProps = {
       slimView,
+      textFilter,
       traceGraphView,
-      timestamp: startTime,
-      traceID,
+      viewRange,
+      canCollapse: !embedded || !embedded.timeline.hideSummary || !embedded.timeline.hideMinimap,
+      clearSearch: this.clearSearch,
+      hideMap: Boolean(traceGraphView || (embedded && embedded.timeline.hideMinimap)),
+      hideSummary: Boolean(embedded && embedded.timeline.hideSummary),
+      linkToStandalone: getUrl(id),
+      nextResult: this._scrollManager.scrollToNextVisibleSpan,
+      onArchiveClicked: this.archiveTrace,
       onSlimViewClicked: this.toggleSlimView,
       onTraceGraphViewClicked: this.toggleTraceGraphView,
-      textFilter,
       prevResult: this._scrollManager.scrollToPrevVisibleSpan,
-      nextResult: this._scrollManager.scrollToNextVisibleSpan,
-      clearSearch: this.clearSearch,
+      ref: this._searchBar,
       resultCount: findMatchesIDs ? findMatchesIDs.size : 0,
+      showArchiveButton: !isEmbedded && archiveEnabled,
+      showShortcutsHelp: !isEmbedded,
+      showStandaloneLink: isEmbedded,
+      showViewOptions: !isEmbedded,
+      toSearch: searchUrl,
+      trace: data,
+      updateNextViewRangeTime: this.updateNextViewRangeTime,
       updateTextFilter: this.updateTextFilter,
-      archiveButtonVisible: archiveEnabled,
-      onArchiveClicked: this.archiveTrace,
-      ref: this._searchBar,
-    };
-
-    const tracePageEmbedProps = {
-      searchParams,
-      fromSearch,
-      enableDetails,
-      onGoFullViewClicked: this.goFullView,
+      updateViewRangeTime: this.updateViewRangeTime,
     };
 
     return (
@@ -405,19 +381,7 @@ export class TracePageImpl extends React.PureComponent<TracePageProps, TracePage
           <ArchiveNotifier acknowledge={this.acknowledgeArchive} archivedState={archiveTraceState} />
         )}
         <div className="Tracepage--headerSection" ref={this.setHeaderHeight}>
-          {embed ? (
-            <TracePageHeaderEmbed {...tracePageProps} {...tracePageEmbedProps} />
-          ) : (
-            <TracePageHeader {...tracePageProps} />
-          )}
-          {((!slimView && !embed && !traceGraphView) || (embed && !mapCollapsed)) && (
-            <SpanGraph
-              trace={data}
-              viewRange={viewRange}
-              updateNextViewRangeTime={this.updateNextViewRangeTime}
-              updateViewRangeTime={this.updateViewRangeTime}
-            />
-          )}
+          <TracePageHeader {...headerProps} />
         </div>
         {headerHeight &&
           (traceGraphView ? (
@@ -444,19 +408,20 @@ export class TracePageImpl extends React.PureComponent<TracePageProps, TracePage
 // export for tests
 export function mapStateToProps(state: ReduxState, ownProps: { match: Match }) {
   const { id } = ownProps.match.params;
-  const trace = id ? state.trace.traces[id] : null;
-  const archiveTraceState = id ? state.archive[id] : null;
-  const archiveEnabled = Boolean(state.config.archiveEnabled);
-  const { enableDetails, fromSearch, mapCollapsed } = queryString.parse(state.router.location.search);
+  const { archive, config, embedded, router } = state;
+  const { traces } = state.trace;
+  const trace = id ? traces[id] : null;
+  const archiveTraceState = id ? archive[id] : null;
+  const archiveEnabled = Boolean(config.archiveEnabled);
+  const { state: locationState } = router.location;
+  const searchUrl = (locationState && locationState.fromSearch) || null;
   return {
     archiveEnabled,
     archiveTraceState,
+    embedded,
     id,
+    searchUrl,
     trace,
-    embed: isEmbed(state.router.location.search),
-    enableDetails: enableDetails !== undefined,
-    mapCollapsed: mapCollapsed !== undefined,
-    fromSearch,
   };
 }
 
diff --git a/packages/jaeger-ui/src/components/TracePage/index.test.js b/packages/jaeger-ui/src/components/TracePage/index.test.js
index 99d3a844e3..ff23165a8d 100644
--- a/packages/jaeger-ui/src/components/TracePage/index.test.js
+++ b/packages/jaeger-ui/src/components/TracePage/index.test.js
@@ -13,14 +13,13 @@
 // limitations under the License.
 
 /* eslint-disable import/first */
-import prefixUrl from '../../utils/prefix-url';
 
 jest.mock('./index.track');
 jest.mock('./keyboard-shortcuts');
 jest.mock('./scroll-page');
 // mock these to enable mount()
-jest.mock('./SpanGraph');
-jest.mock('./TracePageHeader.track');
+jest.mock('./TracePageHeader/SpanGraph');
+jest.mock('./TracePageHeader/TracePageHeader.track');
 jest.mock('./TraceTimelineViewer');
 
 import React from 'react';
@@ -38,9 +37,9 @@ import {
 import * as track from './index.track';
 import { reset as resetShortcuts } from './keyboard-shortcuts';
 import { cancel as cancelScroll } from './scroll-page';
-import SpanGraph from './SpanGraph';
+import SpanGraph from './TracePageHeader/SpanGraph';
 import TracePageHeader from './TracePageHeader';
-import { trackSlimHeaderToggle } from './TracePageHeader.track';
+import { trackSlimHeaderToggle } from './TracePageHeader/TracePageHeader.track';
 import TraceTimelineViewer from './TraceTimelineViewer';
 import ErrorMessage from '../common/ErrorMessage';
 import LoadingIndicator from '../common/LoadingIndicator';
@@ -91,10 +90,6 @@ describe('<TracePage>', () => {
     expect(wrapper.find(TracePageHeader).get(0)).toBeTruthy();
   });
 
-  it('renders a <SpanGraph>', () => {
-    expect(wrapper.find(SpanGraph).length).toBe(1);
-  });
-
   it('renders a a loading indicator when not provided a fetched trace', () => {
     wrapper.setProps({ trace: null });
     const loading = wrapper.find(LoadingIndicator);
@@ -153,23 +148,6 @@ describe('<TracePage>', () => {
     expect(cancelScroll.mock.calls).toEqual([[]]);
   });
 
-  it('no render TracePageHeader if queryparam embed', () => {
-    wrapper.setProps({ embed: true });
-    expect(wrapper.find(TracePageHeader).length).toBe(0);
-  });
-
-  it('collapse map if queryparam mapCollapsed', () => {
-    wrapper.setProps({ mapCollapsed: true, embed: true });
-    expect(wrapper.find(SpanGraph).length).toBe(0);
-  });
-
-  it('open a window when goFullView is called', () => {
-    wrapper.setProps({ id: '12345' });
-    global.open = jest.fn();
-    wrapper.instance().goFullView();
-    expect(global.open).toBeCalledWith(prefixUrl('/trace/12345'), '_blank');
-  });
-
   describe('_adjustViewRange()', () => {
     let instance;
     let time;
@@ -369,13 +347,21 @@ describe('mapDispatchToProps()', () => {
 });
 
 describe('mapStateToProps()', () => {
-  it('maps state to props correctly', () => {
-    const id = 'abc';
-    const trace = {};
-    const state = {
+  const traceID = 'trace-id';
+  const trace = {};
+  const embedded = 'a-faux-embedded-config';
+  const ownProps = {
+    match: {
+      params: { id: traceID },
+    },
+  };
+  let state;
+  beforeEach(() => {
+    state = {
+      embedded,
       trace: {
         traces: {
-          [id]: { data: trace, state: fetchedState.DONE },
+          [traceID]: { data: trace, state: fetchedState.DONE },
         },
       },
       router: {
@@ -388,57 +374,29 @@ describe('mapStateToProps()', () => {
       },
       archive: {},
     };
-    const ownProps = {
-      match: {
-        params: { id },
-      },
-    };
+  });
+  it('maps state to props correctly', () => {
     const props = mapStateToProps(state, ownProps);
     expect(props).toEqual({
-      id,
+      id: traceID,
+      embedded,
       archiveEnabled: false,
-      embed: false,
-      enableDetails: false,
-      fromSearch: undefined,
-      mapCollapsed: false,
       archiveTraceState: undefined,
+      searchUrl: null,
       trace: { data: {}, state: fetchedState.DONE },
     });
   });
 
-  it('maps state to props correctly with query embed', () => {
-    const id = 'abc';
-    const trace = {};
-    const state = {
-      trace: {
-        traces: {
-          [id]: { data: trace, state: fetchedState.DONE },
-        },
-      },
-      router: {
-        location: {
-          search: 'embed=v0&enableDetails&mapCollapsed&fromSearch=%2Fsearch%3Fend%3D1542902040794000%26limit%3D20%26lookback%3D1h%26maxDuration%26minDuration%26service%3Dproductpage%26start%3D1542898440794000',
-        },
-      },
-      config: {
-        archiveEnabled: false,
-      },
-      archive: {},
-    };
-    const ownProps = {
-      match: {
-        params: { id },
-      },
-    };
+  it('propagates fromSearch correctly', () => {
+    const fakeUrl = 'fake-url';
+    state.router.location.state = { fromSearch: fakeUrl };
     const props = mapStateToProps(state, ownProps);
     expect(props).toEqual({
-      id,
+      id: traceID,
+      embedded,
       archiveEnabled: false,
-      embed: true,
-      enableDetails: true,
-      fromSearch: '/search?end=1542902040794000&limit=20&lookback=1h&maxDuration&minDuration&service=productpage&start=1542898440794000',
-      mapCollapsed: true,
       archiveTraceState: undefined,
+      searchUrl: fakeUrl,
       trace: { data: {}, state: fetchedState.DONE },
     });
   });
diff --git a/packages/jaeger-ui/src/components/TracePage/keyboard-mappings.js b/packages/jaeger-ui/src/components/TracePage/keyboard-mappings.js
new file mode 100644
index 0000000000..664e691bca
--- /dev/null
+++ b/packages/jaeger-ui/src/components/TracePage/keyboard-mappings.js
@@ -0,0 +1,36 @@
+// @flow
+
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+export default {
+  scrollPageDown: { binding: 's', label: 'Scroll down' },
+  scrollPageUp: { binding: 'w', label: 'Scroll up' },
+  scrollToNextVisibleSpan: { binding: 'f', label: 'Scroll to the next visible span' },
+  scrollToPrevVisibleSpan: { binding: 'b', label: 'Scroll to the previous visible span' },
+  panLeft: { binding: ['a', 'left'], label: 'Pan left' },
+  panLeftFast: { binding: ['shift+a', 'shift+left'], label: 'Pan left — Large' },
+  panRight: { binding: ['d', 'right'], label: 'Pan right' },
+  panRightFast: { binding: ['shift+d', 'shift+right'], label: 'Pan right — Large' },
+  zoomIn: { binding: 'up', label: 'Zoom in' },
+  zoomInFast: { binding: 'shift+up', label: 'Zoom in — Large' },
+  zoomOut: { binding: 'down', label: 'Zoom out' },
+  zoomOutFast: { binding: 'shift+down', label: 'Zoom out — Large' },
+  collapseAll: { binding: ']', label: 'Collapse All' },
+  expandAll: { binding: '[', label: 'Expand All' },
+  collapseOne: { binding: 'p', label: 'Collapse One Level' },
+  expandOne: { binding: 'o', label: 'Expand One Level' },
+  searchSpans: { binding: 'ctrl+b', label: 'Search Spans' },
+  clearSearch: { binding: 'escape', label: 'Clear Search' },
+};
diff --git a/packages/jaeger-ui/src/components/TracePage/keyboard-shortcuts.js b/packages/jaeger-ui/src/components/TracePage/keyboard-shortcuts.js
index 3ab3738936..05237b9e8f 100644
--- a/packages/jaeger-ui/src/components/TracePage/keyboard-shortcuts.js
+++ b/packages/jaeger-ui/src/components/TracePage/keyboard-shortcuts.js
@@ -16,6 +16,8 @@
 
 import Combokeys from 'combokeys';
 
+import keyboardMappings from './keyboard-mappings';
+
 export type CombokeysHandler =
   | (() => void)
   | ((SyntheticKeyboardEvent<any>) => void)
@@ -50,27 +52,6 @@ export type ShortcutCallbacks = {
   clearSearch?: CombokeysHandler,
 };
 
-export const kbdMappings = {
-  scrollPageDown: 's',
-  scrollPageUp: 'w',
-  scrollToNextVisibleSpan: 'f',
-  scrollToPrevVisibleSpan: 'b',
-  panLeft: ['a', 'left'],
-  panLeftFast: ['shift+a', 'shift+left'],
-  panRight: ['d', 'right'],
-  panRightFast: ['shift+d', 'shift+right'],
-  zoomIn: 'up',
-  zoomInFast: 'shift+up',
-  zoomOut: 'down',
-  zoomOutFast: 'shift+down',
-  collapseAll: ']',
-  expandAll: '[',
-  collapseOne: 'p',
-  expandOne: 'o',
-  searchSpans: 'ctrl+b',
-  clearSearch: 'escape',
-};
-
 let instance: ?CombokeysType;
 
 function getInstance(): CombokeysType {
@@ -85,7 +66,7 @@ export function merge(callbacks: ShortcutCallbacks) {
   Object.keys(callbacks).forEach(name => {
     const keysHandler = callbacks[name];
     if (keysHandler) {
-      inst.bind(kbdMappings[name], keysHandler);
+      inst.bind(keyboardMappings[name].binding, keysHandler);
     }
   });
 }
diff --git a/packages/jaeger-ui/src/components/TracePage/url.js b/packages/jaeger-ui/src/components/TracePage/url.js
index 885b0c4182..2b782f80a4 100644
--- a/packages/jaeger-ui/src/components/TracePage/url.js
+++ b/packages/jaeger-ui/src/components/TracePage/url.js
@@ -21,3 +21,10 @@ export const ROUTE_PATH = prefixUrl('/trace/:id');
 export function getUrl(id: string) {
   return prefixUrl(`/trace/${id}`);
 }
+
+export function getLocation(id: string, state: ?Object) {
+  return {
+    state,
+    pathname: prefixUrl(`/trace/${id}`),
+  };
+}
diff --git a/packages/jaeger-ui/src/components/common/NewWindowIcon.css b/packages/jaeger-ui/src/components/common/NewWindowIcon.css
new file mode 100644
index 0000000000..e6bd881cb2
--- /dev/null
+++ b/packages/jaeger-ui/src/components/common/NewWindowIcon.css
@@ -0,0 +1,19 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.NewWindowIcon {
+  font-size: 1.5em;
+}
diff --git a/packages/jaeger-ui/src/components/common/NewWindowIcon.js b/packages/jaeger-ui/src/components/common/NewWindowIcon.js
new file mode 100644
index 0000000000..3d7bbc16e1
--- /dev/null
+++ b/packages/jaeger-ui/src/components/common/NewWindowIcon.js
@@ -0,0 +1,34 @@
+// @flow
+
+// Copyright (c) 2018 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+import IoAndroidOpen from 'react-icons/lib/io/android-open';
+
+import './NewWindowIcon.css';
+
+type Props = {
+  className?: string,
+};
+
+export default function NewWindowIcon(props: Props) {
+  const { className, ...rest } = props;
+  const cls = `NewWindowIcon ${className || ''}`;
+  return <IoAndroidOpen className={cls} {...rest} />;
+}
+
+NewWindowIcon.defaultProps = {
+  className: undefined,
+};
diff --git a/packages/jaeger-ui/src/components/common/TraceName.js b/packages/jaeger-ui/src/components/common/TraceName.js
index cdc4b7bb0b..431c26eaf4 100644
--- a/packages/jaeger-ui/src/components/common/TraceName.js
+++ b/packages/jaeger-ui/src/components/common/TraceName.js
@@ -26,15 +26,14 @@ import type { ApiError } from '../../types/api-error';
 import './TraceName.css';
 
 type Props = {
-  breakable?: boolean,
   className?: string,
-  error: ?ApiError,
-  state: ?FetchedState,
-  traceName: ?string,
+  error?: ?ApiError,
+  state?: ?FetchedState,
+  traceName?: ?string,
 };
 
 export default function TraceName(props: Props) {
-  const { breakable, className, error, state, traceName } = props;
+  const { className, error, state, traceName } = props;
   const isErred = state === fetchedState.ERROR;
   let title = traceName || FALLBACK_TRACE_NAME;
   let errorCssClass = '';
@@ -52,12 +51,14 @@ export default function TraceName(props: Props) {
     title = <LoadingIndicator small />;
   } else {
     const text = traceName || FALLBACK_TRACE_NAME;
-    title = breakable ? <BreakableText text={text} /> : text;
+    title = <BreakableText text={text} />;
   }
   return <span className={`TraceName ${errorCssClass} ${className || ''}`}>{title}</span>;
 }
 
 TraceName.defaultProps = {
-  breakable: false,
   className: '',
+  error: null,
+  state: null,
+  traceName: null,
 };
diff --git a/packages/jaeger-ui/src/components/common/utils.css b/packages/jaeger-ui/src/components/common/utils.css
index 9f5992ba65..68291391a2 100644
--- a/packages/jaeger-ui/src/components/common/utils.css
+++ b/packages/jaeger-ui/src/components/common/utils.css
@@ -34,6 +34,10 @@ limitations under the License.
   color: #aaa;
 }
 
+.u-tx-inherit {
+  color: inherit;
+}
+
 .u-tx-ellipsis {
   text-overflow: ellipsis;
 }
diff --git a/packages/jaeger-ui/src/components/common/vars.css b/packages/jaeger-ui/src/components/common/vars.css
new file mode 100644
index 0000000000..f22464950a
--- /dev/null
+++ b/packages/jaeger-ui/src/components/common/vars.css
@@ -0,0 +1,19 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+:root {
+  --tx-color-title: rgba(0, 0, 0, 0.85);
+}
diff --git a/packages/jaeger-ui/src/reducers/embedded.js b/packages/jaeger-ui/src/reducers/embedded.js
new file mode 100644
index 0000000000..8c9f6f1673
--- /dev/null
+++ b/packages/jaeger-ui/src/reducers/embedded.js
@@ -0,0 +1,29 @@
+// @flow
+
+// Copyright (c) 2018 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import _get from 'lodash/get';
+
+import { getEmbeddedState } from '../utils/embedded-url';
+
+import type { EmbeddedState } from '../types/embedded';
+
+export default function embeddedConfig(state: ?EmbeddedState) {
+  if (state === undefined) {
+    const search = _get(window, 'location.search');
+    return search ? getEmbeddedState(search) : null;
+  }
+  return state;
+}
diff --git a/packages/jaeger-ui/src/reducers/index.js b/packages/jaeger-ui/src/reducers/index.js
index 442c4fd4bb..c53afa4ad7 100644
--- a/packages/jaeger-ui/src/reducers/index.js
+++ b/packages/jaeger-ui/src/reducers/index.js
@@ -16,12 +16,14 @@ import { reducer as formReducer } from 'redux-form';
 
 import config from './config';
 import dependencies from './dependencies';
+import embedded from './embedded';
 import services from './services';
 import trace from './trace';
 
 export default {
   config,
   dependencies,
+  embedded,
   services,
   trace,
   form: formReducer,
diff --git a/packages/jaeger-ui/src/reducers/trace.js b/packages/jaeger-ui/src/reducers/trace.js
index 42f167dff2..d8f5199f7b 100644
--- a/packages/jaeger-ui/src/reducers/trace.js
+++ b/packages/jaeger-ui/src/reducers/trace.js
@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import _isEqual from 'lodash/isEqual';
 import { handleActions } from 'redux-actions';
 
 import { fetchTrace, fetchMultipleTraces, searchTraces } from '../actions/jaeger-api';
@@ -21,6 +22,7 @@ import transformTraceData from '../model/transform-trace-data';
 const initialState = {
   traces: {},
   search: {
+    query: null,
     results: [],
   },
 };
@@ -86,15 +88,20 @@ function fetchMultipleTracesErred(state, { meta, payload }) {
   return { ...state, traces };
 }
 
-function fetchSearchStarted(state) {
+function fetchSearchStarted(state, { meta }) {
+  const { query } = meta;
   const search = {
+    query,
     results: [],
     state: fetchedState.LOADING,
   };
   return { ...state, search };
 }
 
-function searchDone(state, { payload }) {
+function searchDone(state, { meta, payload }) {
+  if (!_isEqual(state.search.query, meta.query)) {
+    return state;
+  }
   const processed = payload.data.map(transformTraceData);
   const resultTraces = {};
   const results = [];
@@ -105,12 +112,15 @@ function searchDone(state, { payload }) {
     results.push(id);
   }
   const traces = { ...state.traces, ...resultTraces };
-  const search = { results, state: fetchedState.DONE };
+  const search = { ...state.search, results, state: fetchedState.DONE };
   return { ...state, search, traces };
 }
 
-function searchErred(state, { payload }) {
-  const search = { error: payload, results: [], state: fetchedState.ERROR };
+function searchErred(state, { meta, payload }) {
+  if (!_isEqual(state.search.query, meta.query)) {
+    return state;
+  }
+  const search = { ...state.search, error: payload, results: [], state: fetchedState.ERROR };
   return { ...state, search };
 }
 
diff --git a/packages/jaeger-ui/src/reducers/trace.test.js b/packages/jaeger-ui/src/reducers/trace.test.js
index 95fab6d28b..7ed64647f1 100644
--- a/packages/jaeger-ui/src/reducers/trace.test.js
+++ b/packages/jaeger-ui/src/reducers/trace.test.js
@@ -18,56 +18,194 @@ import traceGenerator from '../demo/trace-generators';
 import transformTraceData from '../model/transform-trace-data';
 import traceReducer from '../reducers/trace';
 
+const ACTION_POSTFIX_FULFILLED = '_FULFILLED';
+const ACTION_POSTFIX_PENDING = '_PENDING';
+const ACTION_POSTFIX_REJECTED = '_REJECTED';
+
 const trace = traceGenerator.trace({ numberOfSpans: 1 });
 const { traceID: id } = trace;
 
-it('trace reducer should set loading true on a fetch', () => {
-  const state = traceReducer(undefined, {
-    type: `${jaegerApiActions.fetchTrace}_PENDING`,
-    meta: { id },
+describe('fetch a trace', () => {
+  it('sets loading true on a fetch', () => {
+    const state = traceReducer(undefined, {
+      type: `${jaegerApiActions.fetchTrace}${ACTION_POSTFIX_PENDING}`,
+      meta: { id },
+    });
+    const outcome = { [id]: { id, state: fetchedState.LOADING } };
+    expect(state.traces).toEqual(outcome);
   });
-  const outcome = { [id]: { id, state: fetchedState.LOADING } };
-  expect(state.traces).toEqual(outcome);
-});
 
-it('trace reducer should handle a successful FETCH_TRACE', () => {
-  const state = traceReducer(undefined, {
-    type: `${jaegerApiActions.fetchTrace}_FULFILLED`,
-    payload: { data: [trace] },
-    meta: { id },
+  it('handles a successful FETCH_TRACE', () => {
+    const state = traceReducer(undefined, {
+      type: `${jaegerApiActions.fetchTrace}${ACTION_POSTFIX_FULFILLED}`,
+      payload: { data: [trace] },
+      meta: { id },
+    });
+    expect(state.traces).toEqual({ [id]: { id, data: transformTraceData(trace), state: fetchedState.DONE } });
+  });
+
+  it('handles a failed FETCH_TRACE', () => {
+    const error = new Error();
+    const state = traceReducer(undefined, {
+      type: `${jaegerApiActions.fetchTrace}${ACTION_POSTFIX_REJECTED}`,
+      payload: error,
+      meta: { id },
+    });
+    expect(state.traces).toEqual({ [id]: { error, id, state: fetchedState.ERROR } });
+    expect(state.traces[id].error).toBe(error);
   });
-  expect(state.traces).toEqual({ [id]: { id, data: transformTraceData(trace), state: fetchedState.DONE } });
 });
 
-it('trace reducer should handle a failed FETCH_TRACE', () => {
-  const error = new Error();
-  const state = traceReducer(undefined, {
-    type: `${jaegerApiActions.fetchTrace}_REJECTED`,
-    payload: error,
-    meta: { id },
+describe('fetch multiple traces', () => {
+  const traceB = traceGenerator.trace({ numberOfSpans: 1 });
+  const { traceID: idB } = traceB;
+
+  it('sets loading to true for all pending IDs', () => {
+    const traces = { preExisting: 'this-trace-is-pre-existing' };
+    const state = traceReducer(
+      { traces },
+      {
+        type: `${jaegerApiActions.fetchMultipleTraces}${ACTION_POSTFIX_PENDING}`,
+        meta: { ids: [id, idB] },
+      }
+    );
+    const outcome = {
+      ...traces,
+      [id]: { id, state: fetchedState.LOADING },
+      [idB]: { id: idB, state: fetchedState.LOADING },
+    };
+    expect(state.traces).toEqual(outcome);
+  });
+
+  describe('handles a successful request', () => {
+    it('transforms and saves all trace data', () => {
+      const traces = { preExisting: 'this-trace-is-pre-existing' };
+      const state = traceReducer(
+        { traces },
+        {
+          type: `${jaegerApiActions.fetchMultipleTraces}${ACTION_POSTFIX_FULFILLED}`,
+          payload: { data: [trace, traceB] },
+        }
+      );
+      const outcome = {
+        ...traces,
+        [id]: { id, data: transformTraceData(trace), state: fetchedState.DONE },
+        [idB]: { id: idB, data: transformTraceData(traceB), state: fetchedState.DONE },
+      };
+      expect(state.traces).toEqual(outcome);
+    });
+
+    it('saves all error data', () => {
+      const msg = 'a-message';
+      const traceID = 'a-trace-id';
+      const traces = { preExisting: 'this-trace-is-pre-existing' };
+      const state = traceReducer(
+        { traces },
+        {
+          type: `${jaegerApiActions.fetchMultipleTraces}${ACTION_POSTFIX_FULFILLED}`,
+          payload: { data: [], errors: [{ msg, traceID }] },
+        }
+      );
+      const outcome = {
+        ...traces,
+        [traceID]: { id: traceID, error: expect.any(Error), state: fetchedState.ERROR },
+      };
+      expect(state.traces).toEqual(outcome);
+    });
+  });
+
+  it('handles a failed request', () => {
+    const error = 'error-info';
+    const traces = { preExisting: 'this-trace-is-pre-existing' };
+    const state = traceReducer(
+      { traces },
+      {
+        type: `${jaegerApiActions.fetchMultipleTraces}${ACTION_POSTFIX_REJECTED}`,
+        payload: error,
+        meta: { ids: [id, idB] },
+      }
+    );
+    const outcome = {
+      ...traces,
+      [id]: { id, error, state: fetchedState.ERROR },
+      [idB]: { id: idB, error, state: fetchedState.ERROR },
+    };
+    expect(state.traces).toEqual(outcome);
   });
-  expect(state.traces).toEqual({ [id]: { error, id, state: fetchedState.ERROR } });
-  expect(state.traces[id].error).toBe(error);
 });
 
-it('trace reducer should handle a successful SEARCH_TRACES', () => {
-  const state = traceReducer(undefined, {
-    type: `${jaegerApiActions.searchTraces}_FULFILLED`,
-    payload: { data: [trace] },
-    meta: { query: 'whatever' },
+describe('search traces', () => {
+  const query = 'some-query';
+
+  it('handles a pending request', () => {
+    const state = traceReducer(undefined, {
+      type: `${jaegerApiActions.searchTraces}${ACTION_POSTFIX_PENDING}`,
+      meta: { query },
+    });
+    const outcome = {
+      query,
+      results: [],
+      state: fetchedState.LOADING,
+    };
+    expect(state.search).toEqual(outcome);
   });
-  const outcome = {
-    traces: {
-      [id]: {
-        id,
-        data: transformTraceData(trace),
+
+  it('handles a successful request', () => {
+    const state = traceReducer(
+      { search: { query } },
+      {
+        type: `${jaegerApiActions.searchTraces}${ACTION_POSTFIX_FULFILLED}`,
+        payload: { data: [trace] },
+        meta: { query },
+      }
+    );
+    const outcome = {
+      traces: {
+        [id]: {
+          id,
+          data: transformTraceData(trace),
+          state: fetchedState.DONE,
+        },
+      },
+      search: {
+        query,
         state: fetchedState.DONE,
+        results: [id],
       },
-    },
-    search: {
-      state: fetchedState.DONE,
-      results: [id],
-    },
-  };
-  expect(state).toEqual(outcome);
+    };
+    expect(state).toEqual(outcome);
+  });
+
+  it('handles a failed request', () => {
+    const error = 'some-error';
+    const state = traceReducer(
+      { search: { query } },
+      {
+        type: `${jaegerApiActions.searchTraces}${ACTION_POSTFIX_REJECTED}`,
+        payload: error,
+        meta: { query },
+      }
+    );
+    const outcome = {
+      error,
+      query,
+      results: [],
+      state: fetchedState.ERROR,
+    };
+    expect(state.search).toEqual(outcome);
+  });
+
+  it('ignores the results with the wrong query', () => {
+    const otherQuery = 'some-other-query';
+    [ACTION_POSTFIX_FULFILLED, ACTION_POSTFIX_REJECTED].forEach(postfix => {
+      const state = traceReducer(
+        { search: { query } },
+        {
+          type: `${jaegerApiActions.searchTraces}${postfix}`,
+          meta: { query: otherQuery },
+        }
+      );
+      expect(state.search).toEqual({ query });
+    });
+  });
 });
diff --git a/packages/jaeger-ui/src/types/embedded.js b/packages/jaeger-ui/src/types/embedded.js
new file mode 100644
index 0000000000..dda27aa331
--- /dev/null
+++ b/packages/jaeger-ui/src/types/embedded.js
@@ -0,0 +1,27 @@
+// @flow
+
+// Copyright (c) 2018 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+type EmbeddedStateV0 = {
+  version: 'v0',
+  searchHideGraph: boolean,
+  timeline: {
+    collapseTitle: boolean,
+    hideMinimap: boolean,
+    hideSummary: boolean,
+  },
+};
+
+export type EmbeddedState = EmbeddedStateV0;
diff --git a/packages/jaeger-ui/src/types/index.js b/packages/jaeger-ui/src/types/index.js
index a08112c927..c6e255714d 100644
--- a/packages/jaeger-ui/src/types/index.js
+++ b/packages/jaeger-ui/src/types/index.js
@@ -19,6 +19,8 @@ import type { ContextRouter } from 'react-router-dom';
 import type { ApiError } from './api-error';
 import type { TracesArchive } from './archive';
 import type { Config } from './config';
+import type { EmbeddedState } from './embedded';
+import type { SearchQuery } from './search';
 import type { Trace } from './trace';
 import type { TraceDiffState } from './trace-diff';
 import type { TraceTimeline } from './trace-timeline';
@@ -40,19 +42,21 @@ export type ReduxState = {
     loading: boolean,
     error: ?ApiError,
   },
+  embedded: EmbeddedState,
+  router: ContextRouter,
   services: {
     services: ?(string[]),
     operationsForService: { [string]: string[] },
     loading: boolean,
     error: ?ApiError,
   },
-  router: ContextRouter,
   trace: {
     traces: { [string]: FetchedTrace },
     search: {
       error?: ApiError,
       results: string[],
       state?: FetchedState,
+      query?: SearchQuery,
     },
   },
   traceDiff: TraceDiffState,
diff --git a/packages/jaeger-ui/src/types/search.js b/packages/jaeger-ui/src/types/search.js
index 0cf2100d12..cd1a625024 100644
--- a/packages/jaeger-ui/src/types/search.js
+++ b/packages/jaeger-ui/src/types/search.js
@@ -14,6 +14,18 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+export type SearchQuery = {
+  end: number | string,
+  limit: number | string,
+  lookback: string,
+  maxDuration: null | string,
+  minDuration: null | string,
+  operation: ?string,
+  service: string,
+  start: number | string,
+  tags: ?string,
+};
+
 /**
  * Type used to summarize traces for the search page.
  */
diff --git a/packages/jaeger-ui/src/utils/configure-store.js b/packages/jaeger-ui/src/utils/configure-store.js
index c6593d60c1..bcfadec691 100644
--- a/packages/jaeger-ui/src/utils/configure-store.js
+++ b/packages/jaeger-ui/src/utils/configure-store.js
@@ -38,8 +38,8 @@ export default function configureStore(history) {
           .filter(Boolean),
         routerMiddleware(history)
       ),
-      process.env.NODE_ENV !== 'production' && window && window.devToolsExtension
-        ? window.devToolsExtension()
+      process.env.NODE_ENV !== 'production' && window && window.__REDUX_DEVTOOLS_EXTENSION__
+        ? window.__REDUX_DEVTOOLS_EXTENSION__()
         : noop => noop
     )
   );
diff --git a/packages/jaeger-ui/src/utils/embedded-url.js b/packages/jaeger-ui/src/utils/embedded-url.js
new file mode 100644
index 0000000000..33d820b6bd
--- /dev/null
+++ b/packages/jaeger-ui/src/utils/embedded-url.js
@@ -0,0 +1,65 @@
+// @flow
+
+// Copyright (c) 2018 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import _flatMap from 'lodash/flatMap';
+import queryString from 'query-string';
+
+import type { EmbeddedState } from '../types/embedded';
+
+const getStrings = value => (typeof value === 'string' ? value : _flatMap(value, getStrings));
+
+const VALUE_ENABLED = '1';
+export const VERSION_0 = 'v0';
+
+// uiEmbed=v0
+// uiSearchHideGraph=1
+// uiTimelineCollapseTitle=1
+// uiTimelineHideMinimap=1
+// uiTimelineHideSummary=1
+const STATE_PARAMS_V0 = {
+  searchHideGraph: 'uiSearchHideGraph',
+  timeline: {
+    collapseTitle: 'uiTimelineCollapseTitle',
+    hideMinimap: 'uiTimelineHideMinimap',
+    hideSummary: 'uiTimelineHideSummary',
+  },
+};
+
+const PARAM_KEYS_V0 = getStrings(STATE_PARAMS_V0);
+
+export function getEmbeddedState(search: string): null | EmbeddedState {
+  const { uiEmbed, ...rest } = queryString.parse(search);
+  if (uiEmbed !== VERSION_0) {
+    return null;
+  }
+  return {
+    version: VERSION_0,
+    searchHideGraph: rest[STATE_PARAMS_V0.searchHideGraph] === VALUE_ENABLED,
+    timeline: {
+      collapseTitle: rest[STATE_PARAMS_V0.timeline.collapseTitle] === VALUE_ENABLED,
+      hideMinimap: rest[STATE_PARAMS_V0.timeline.hideMinimap] === VALUE_ENABLED,
+      hideSummary: rest[STATE_PARAMS_V0.timeline.hideSummary] === VALUE_ENABLED,
+    },
+  };
+}
+
+export function stripEmbeddedState(state: Object): Object {
+  const { uiEmbed, ...rv } = state || {};
+  if (uiEmbed === VERSION_0) {
+    PARAM_KEYS_V0.forEach(Reflect.deleteProperty.bind(null, rv));
+  }
+  return rv;
+}
diff --git a/packages/jaeger-ui/src/utils/embedded/index.test.js b/packages/jaeger-ui/src/utils/embedded/index.test.js
deleted file mode 100644
index f996d9504d..0000000000
--- a/packages/jaeger-ui/src/utils/embedded/index.test.js
+++ /dev/null
@@ -1,32 +0,0 @@
-// Copyright (c) 2017 Uber Technologies, Inc.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import * as embedded from './index';
-
-describe('isEmbed', () => {
-  it('query request a embed component', () => {
-    const query = 'embed=v0&hideGraph&mapCollapsed';
-    expect(embedded.isEmbed(query)).toBeTruthy();
-  });
-
-  it('query request a embed component with an icorrect version', () => {
-    const query = 'embed=v1&hideGraph&mapCollapsed';
-    expect(embedded.isEmbed(query)).toBeFalsy();
-  });
-
-  it('query not request a embed component', () => {
-    const query = 'hideGraph&mapCollapsed';
-    expect(embedded.isEmbed(query)).toBeFalsy();
-  });
-});
diff --git a/yarn.lock b/yarn.lock
index c443d09a17..90e800ed26 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1843,6 +1843,10 @@ bser@^2.0.0:
   dependencies:
     node-int64 "^0.4.0"
 
+btoa@^1.1.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/btoa/-/btoa-1.2.1.tgz#01a9909f8b2c93f6bf680ba26131eb30f7fa3d73"
+
 buffer-from@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.0.0.tgz#4cb8832d23612589b0406e9e2956c17f06fdf531"
@@ -2657,6 +2661,12 @@ conventional-recommended-bump@^1.2.1:
     meow "^3.3.0"
     object-assign "^4.0.1"
 
+convert-source-map@^1.1.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
+  dependencies:
+    safe-buffer "~5.1.1"
+
 convert-source-map@^1.4.0, convert-source-map@^1.5.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
@@ -3485,6 +3495,10 @@ dns-txt@^2.0.2:
   dependencies:
     buffer-indexof "^1.0.0"
 
+docopt@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/docopt/-/docopt-0.6.2.tgz#b28e9e2220da5ec49f7ea5bb24a47787405eeb11"
+
 doctrine@1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
@@ -8756,6 +8770,12 @@ opn@5.2.0, opn@^5.1.0:
   dependencies:
     is-wsl "^1.1.0"
 
+opn@^5.3.0:
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-5.4.0.tgz#cb545e7aab78562beb11aa3bfabc7042e1761035"
+  dependencies:
+    is-wsl "^1.1.0"
+
 optimist@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
@@ -10287,7 +10307,7 @@ react-icon-base@2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/react-icon-base/-/react-icon-base-2.1.0.tgz#a196e33fdf1e7aaa1fda3aefbb68bdad9e82a79d"
 
-react-icons@^2.2.7:
+react-icons@2.2.7:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-2.2.7.tgz#d7860826b258557510dac10680abea5ca23cf650"
   dependencies:
@@ -11145,6 +11165,10 @@ rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.5.4, rimraf@^2.6.0, rimraf@^2.
   dependencies:
     glob "^7.0.5"
 
+rimraf@~2.2.6:
+  version "2.2.8"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.2.8.tgz#e439be2aaee327321952730f99a8929e4fc50582"
+
 ripemd160@^2.0.0, ripemd160@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.1.tgz#0f4584295c53a3628af7e6d79aca21ce57d1c6e7"
@@ -11648,6 +11672,19 @@ source-list-map@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
 
+source-map-explorer@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/source-map-explorer/-/source-map-explorer-1.6.0.tgz#46d6de167b7aff1c4f14d0ee3b6c8beca186f075"
+  dependencies:
+    btoa "^1.1.2"
+    convert-source-map "^1.1.1"
+    docopt "^0.6.2"
+    glob "^7.1.2"
+    opn "^5.3.0"
+    source-map "^0.5.1"
+    temp "^0.8.3"
+    underscore "^1.8.3"
+
 source-map-resolve@^0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.1.tgz#7ad0f593f2281598e854df80f19aae4b92d7a11a"
@@ -12181,6 +12218,13 @@ temp-write@^3.3.0:
     temp-dir "^1.0.0"
     uuid "^3.0.1"
 
+temp@^0.8.3:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/temp/-/temp-0.8.3.tgz#e0c6bc4d26b903124410e4fed81103014dfc1f59"
+  dependencies:
+    os-tmpdir "^1.0.0"
+    rimraf "~2.2.6"
+
 tempfile@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/tempfile/-/tempfile-1.1.1.tgz#5bcc4eaecc4ab2c707d8bc11d99ccc9a2cb287f2"
@@ -12501,6 +12545,10 @@ umd@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/umd/-/umd-3.0.3.tgz#aa9fe653c42b9097678489c01000acb69f0b26cf"
 
+underscore@^1.8.3:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.9.1.tgz#06dce34a0e68a7babc29b365b8e74b8925203961"
+
 underscore@~1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.4.4.tgz#61a6a32010622afa07963bf325203cf12239d604"