diff --git a/tensorboard/plugins/profile/pod_viewer/details_card/details-card.html b/tensorboard/plugins/profile/pod_viewer/details_card/details-card.html
index f9d8f44e382..ccc44e0a444 100644
--- a/tensorboard/plugins/profile/pod_viewer/details_card/details-card.html
+++ b/tensorboard/plugins/profile/pod_viewer/details_card/details-card.html
@@ -57,9 +57,6 @@
     <paper-card id="card" heading="[[_name]]" hidden="[[!_name]]" elevation="2">
       <template is="dom-repeat" items=[[nodes]] as="node">
         <div class="card-content info">
-          <div hidden="[[!_isChannel(node)]]">
-            <p>Replica Id: <span class="value">[[node.replicaId]]</span></p>
-          </div>
           <div hidden="[[_isStep(node)]]">
             <p>Data Transferred: <span class="value">[[_sizeMiB(node.dataSize)]] MiB</span></p>
             <p>Latency: <span class="value">[[_format(node.durationUs)]] µs</span></p>
@@ -68,8 +65,6 @@
           </div>
           <div hidden="[[!_isChannel(node)]]">
             <p>Send Delay: <span class="value">[[_format(node.sendDelayUs)]] µs</span></p>
-            <p>From: <span class="value">Chip[[_chipId(node.srcCoreId)]], Core[[_nodeId(node.srcCoreId)]]</span></p>
-            <p>To: <span class="value">Chip[[_chipId(node.dstCoreId)]], Core[[_nodeId(node.dstCoreId)]]</span></p>
             <p>Hlo Names: </p>
             <code class="code-style">
               <template is="dom-repeat" items=[[node.hloNames]]>
diff --git a/tensorboard/plugins/profile/pod_viewer/details_card/details-card.ts b/tensorboard/plugins/profile/pod_viewer/details_card/details-card.ts
index 99fe0ca3d24..06b7f56457e 100644
--- a/tensorboard/plugins/profile/pod_viewer/details_card/details-card.ts
+++ b/tensorboard/plugins/profile/pod_viewer/details_card/details-card.ts
@@ -32,7 +32,8 @@ Polymer({
         {key: 'lowFlopsComputeUs', label: 'Low flops compute'},
         {key: 'hostInfeedDurationUs', label: 'Infeed'},
         {key: 'hostOutfeedDurationUs', label: 'Outfeed'},
-        {key: 'crsDurationUs', label: 'All reduce'},
+        {key: 'allReduceComputeDurationUs', label: 'AllReduce compute'},
+        {key: 'allReduceSyncDurationUs', label: 'AllReduce sync'},
         {key: 'sendDurationUs', label: 'Send'},
         {key: 'recvDurationUs', label: 'Recv'},
       ],
@@ -114,7 +115,7 @@ Polymer({
       function(node: undefined|podviewer.proto.PodStatsRecord,
           key: undefined|string): string|undefined {
     if (!key || !node) return;
-    return this._format(node[key]);
+    return this._format(node[key] ? node[key] : 0);
   },
   /**
    * Return a the percentage of a specific breakdown.
@@ -122,7 +123,7 @@ Polymer({
   _getStepBreakdownPct:
       function(node: undefined|podviewer.proto.PodStatsRecord,
           key: undefined|string): string|undefined {
-    if (!key || !node || !node.totalDurationUs) return;
+    if (!key || !node || !node.totalDurationUs || !node[key]) return;
     return (node[key] / node.totalDurationUs * 100).toFixed(2) + '%';
   },
 });
diff --git a/tensorboard/plugins/profile/pod_viewer/pod_viewer_common/proto.ts b/tensorboard/plugins/profile/pod_viewer/pod_viewer_common/proto.ts
index 7b0149535bc..64a8bd0197b 100644
--- a/tensorboard/plugins/profile/pod_viewer/pod_viewer_common/proto.ts
+++ b/tensorboard/plugins/profile/pod_viewer/pod_viewer_common/proto.ts
@@ -98,11 +98,10 @@ module podviewer.proto {
     sendDurationUs: number;
     /** The time spent on recv operations. */
     recvDurationUs: number;
-    /**
-     * The time spent on all-reduce in micro-seconds
-     * (used to be cross-replica-sum).
-     */
-    crsDurationUs: number;
+    /** The time spent on actual all-reduce compute in micro-seconds. */
+    allReduceComputeDurationUs: number;
+    /** The time spent on all-reduce synchronization in micro-seconds. */
+    allReduceSyncDurationUs: number;
     /** bottleneck out of the above mentioned metrics. */
     bottleneck: string;
   }
@@ -135,10 +134,10 @@ module podviewer.proto {
   export interface ChannelInfo {
     /** Id of the channel. */
     channelId: number;
-    /** Core id of the send op. */
-    srcCoreId: number;
-    /** Core id of the recv op. */
-    dstCoreId: number;
+    /** Core ids of the send ops. */
+    srcCoreIds: Array<number>;
+    /** Core ids of the recv ops. */
+    dstCoreIds: Array<number>;
     /** Byte size of the data transferred. */
     dataSize: number;
     /**
@@ -158,8 +157,6 @@ module podviewer.proto {
      * op, the delay is zero.
      */
     sendDelayUs: number;
-    /** The replica_id of the program executing the send and recv ops. */
-    replicaId: number;
   }
 
   /** Data input to the pod viewer tool. */
diff --git a/tensorboard/plugins/profile/pod_viewer/pod_viewer_dashboard/pod-viewer-dashboard.html b/tensorboard/plugins/profile/pod_viewer/pod_viewer_dashboard/pod-viewer-dashboard.html
index 26d3cc1f80c..082da9a1a7b 100644
--- a/tensorboard/plugins/profile/pod_viewer/pod_viewer_dashboard/pod-viewer-dashboard.html
+++ b/tensorboard/plugins/profile/pod_viewer/pod_viewer_dashboard/pod-viewer-dashboard.html
@@ -103,7 +103,7 @@
       <div id="topo-graph">
         <topology-graph run-environment=[[_runEnvironment]]
             data=[[_podStatsMap]] metrics=[[_stepBreakdownLayers]]
-            active-bar=[[activeBar]] selected-channel={{selectedChannel}}>
+            active-bar=[[activeBar]]>
         </topology-graph>
       </div>
       <div id="channel-bars" class="bar-chart" hidden="[[!_channelDb]]">
diff --git a/tensorboard/plugins/profile/pod_viewer/pod_viewer_dashboard/pod-viewer-dashboard.ts b/tensorboard/plugins/profile/pod_viewer/pod_viewer_dashboard/pod-viewer-dashboard.ts
index 9fcbf638fe3..f4a11b6bfec 100644
--- a/tensorboard/plugins/profile/pod_viewer/pod_viewer_dashboard/pod-viewer-dashboard.ts
+++ b/tensorboard/plugins/profile/pod_viewer/pod_viewer_dashboard/pod-viewer-dashboard.ts
@@ -29,11 +29,6 @@ Polymer({
       type: Array,
       notify: true,
     },
-    selectedChannel: {
-      type: Array,
-      notify: true,
-      observer: '_selectedChannelChanged',
-    },
     activeBar: {
       type: Object,
       notify: true,
@@ -66,7 +61,8 @@ Polymer({
         {key: 'lowFlopsComputeUs', label: 'Low flops compute'},
         {key: 'hostInfeedDurationUs', label: 'Infeed'},
         {key: 'hostOutfeedDurationUs', label: 'Outfeed'},
-        {key: 'crsDurationUs', label: 'All reduce'},
+        {key: 'allReduceComputeDurationUs', label: 'AllReduce compute'},
+        {key: 'allReduceSyncDurationUs', label: 'AllReduce sync'},
         {key: 'sendDurationUs', label: 'Send'},
         {key: 'recvDurationUs', label: 'Recv'},
       ],
@@ -129,6 +125,7 @@ Polymer({
   _computeRunEnvironment(
       data: podviewer.proto.PodViewerInputData|undefined|null):
           podviewer.proto.RunEnvironment {
+    if (!data) return;
     return data.runEnvironment;
   },
   _computeMaxStepId(podStatsMaps: Array<podviewer.proto.PodStatsMap>): number {
@@ -162,6 +159,10 @@ Polymer({
         if (j == 1) {
           continue;
         }
+        // Input missing a field, set it to 0.
+        if (!val[layers[j].key]) {
+           val[layers[j].key] = 0;
+        }
         // Skip the lowFlopsComputeUs.
         val['lowFlopsComputeUs'] -= val[layers[j].key];
       }
@@ -204,14 +205,6 @@ Polymer({
     if (!newData) return;
     this.curStepId = 0;
   },
-  /**
-   * Updates the input of the details card when selected channel changed.
-   */
-  _selectedChannelChanged(newChannel: Array<podviewer.proto.ChannelInfo>) {
-    if (newChannel) {
-      this.activeDetails = newChannel;
-    }
-  },
   /**
    * The active bar could be one of the PodStatsRecord, ChannelInfo or
    * AllReduceOpInfo. Reuse the details_card component to show any of these
diff --git a/tensorboard/plugins/profile/pod_viewer/stack_bar_chart/stack-bar-chart.ts b/tensorboard/plugins/profile/pod_viewer/stack_bar_chart/stack-bar-chart.ts
index 4bf803473f4..d573c9fb81b 100644
--- a/tensorboard/plugins/profile/pod_viewer/stack_bar_chart/stack-bar-chart.ts
+++ b/tensorboard/plugins/profile/pod_viewer/stack_bar_chart/stack-bar-chart.ts
@@ -28,6 +28,7 @@ const LEGEND_TEXT_HEIGHT = 9.5;
 const LEGEND_TEXT_SIZE = '0.32em';
 
 const FONT_SIZE = 14;
+const TRANSITION_DURATION = 1000;
 
 Polymer({
   is: 'stack-bar-chart',
@@ -57,9 +58,6 @@ Polymer({
     if (!data.length || !this.isAttached || this.stackLayers.length == 0) {
       return;
     }
-    d3.select(this.$.chart).selectAll('g > *').remove();
-    d3.select(this.$.chart).select('svg').remove();
-    d3.select(this.$.chart).select('.svg-container').remove();
     const stackKey = this.stackLayers.map((d) => d.key);
     const stackLabel = this.stackLayers.map((d) => d.label);
     const height = SVG_HEIGHT - SVG_MARGIN.top - SVG_MARGIN.bottom;
@@ -68,13 +66,26 @@ Polymer({
     let yScale = d3.scaleLinear().range([height, 0]);
     let colorScale = d3.scaleOrdinal<number, string>(d3.schemeCategory10)
                        .domain([0, 19]);
-    let svg = d3.select(this.$.chart).append('svg')
-        .attr('width', Math.max(SVG_MIN_WIDTH,
-            xScaleRange + SVG_MARGIN.left + SVG_MARGIN.right))
-        .attr('height', SVG_HEIGHT)
-        .append('g')
-        .attr('transform',
-            'translate(' + SVG_MARGIN.left + ',' + SVG_MARGIN.top + ')');
+    let svg = d3.select(this.$.chart).select('svg');
+    if (svg.empty()) {
+      svg = d3.select(this.$.chart).append('svg')
+          .attr('width', Math.max(SVG_MIN_WIDTH,
+              xScaleRange + SVG_MARGIN.left + SVG_MARGIN.right))
+          .attr('height', SVG_HEIGHT)
+          .append('g')
+          .attr('transform',
+              'translate(' + SVG_MARGIN.left + ',' + SVG_MARGIN.top + ')');
+      // Draw x-axis.
+      svg.append('g')
+          .attr('class', 'x axis')
+          .style('font-size', FONT_SIZE)
+          .attr('transform', 'translate(0,' + (height + 5) + ')');
+      // Draw y-axis.
+      svg.append('g')
+          .attr('class', 'y axis')
+          .style('font-size', FONT_SIZE)
+          .attr('transform', 'translate(0,0)');
+    }
     let stack = d3.stack().keys(stackKey).order(d3.stackOrderNone)
         .offset(d3.stackOffsetNone);
     const layers = stack(data);
@@ -83,7 +94,15 @@ Polymer({
         .nice();
     this.drawLayers(svg, layers, xScale, yScale, colorScale);
     this.drawAxes(svg, xScale, yScale, height);
-    this.drawLegend(svg, stackLabel, colorScale);
+    let legend = d3.select(this.$.chart).select('.legend');
+    if (legend.empty()) {
+      legend = svg.append('g')
+          .attr('class', 'legend')
+          .attr('font-family', 'sans-serif')
+          .attr('font-size', FONT_SIZE)
+          .attr('text-anchor', 'start')
+    }
+    this.drawLegend(legend, stackLabel, colorScale);
   },
   /**
    * Draw the layers for all the bars.
@@ -91,12 +110,12 @@ Polymer({
   drawLayers: function(svg: any, layers: any, xScale: any, yScale: any,
                        colorScale: any) {
     let parent = this;
+    // Update layer for each metric across all cores, and rect for each core.
     let layer = svg.selectAll('.layer').data(layers);
-    layer.enter().append('g').merge(layer)
-        .attr('class', 'layer')
+    let rects = layer.enter().append('g').attr('class', 'layer').merge(layer)
         .style('fill', (d, i) => colorScale(i))
-        .selectAll('rect').data((d) => d)
-        .enter().append('rect')
+        .selectAll('rect').data((d) => d);
+    rects.enter().append('rect').merge(rects)
         .attr('width', xScale.bandwidth())
         .attr('y', (d) => yScale(d[1]))
         .attr('height', (d) => yScale(d[0]) - yScale(d[1]))
@@ -110,53 +129,50 @@ Polymer({
             function(d) {
               d3.select(this).style('opacity', 1.0);
               parent.activeBar = null;
-            });
+            })
+        .transition()
+        .duration(TRANSITION_DURATION);
+    layer.exit().remove();
   },
   /**
    * Draw the axes of the chart.
    */
   drawAxes: function(svg: any, xScale: any, yScale: any, height: number) {
-    svg.append('g')
-        .attr('class', 'axis axis--x')
-        .style('font-size', FONT_SIZE)
-        .attr('transform', 'translate(0,' + (height + 5) + ')')
+    svg.select('.x.axis')
+        .transition()
+        .duration(TRANSITION_DURATION)     
         .call(d3.axisBottom(xScale));
-    svg.append('g')
-        .attr('class', 'axis axis--y')
-        .style('font-size', FONT_SIZE)
-        .attr('transform', 'translate(0,0)')
+    svg.select('.y.axis')
+        .transition()
+        .duration(TRANSITION_DURATION)
         .call(d3.axisLeft(yScale));
   },
   /**
    * Draw the legends of the chart.
    */
-  drawLegend: function(svg: any, labels: Array<string>, colorScale: any) {
-    let legend = svg.append('g')
-        .attr('font-family', 'sans-serif')
-        .attr('font-size', FONT_SIZE)
-        .attr('text-anchor', 'start')
-        .selectAll('g')
-        .data(labels.slice());
-    let legendG = legend.enter().append('g').merge(legend)
-        .attr('transform',
-            (d, i) => 'translate(' +
-                (i * LEGEND_WIDTH -
-                    Math.floor(i / LABELS_PER_LANE) * LEGEND_WIDTH *
-                        LABELS_PER_LANE) + ',' +
-                            Math.floor(i / LABELS_PER_LANE) *
-                                LEGEND_HEIGHT + ')'
-        );
+  drawLegend: function(selection: any, labels: Array<string>, colorScale: any) {
+    let legend = selection.selectAll('g').data(labels.slice());
+    legend.exit().remove();
 
-    legendG.append('rect')
+    let legendEnter = legend.enter().append('g');
+    legendEnter.append('rect')
         .attr('x', YAXIS_TO_LEGEND)
         .attr('width', ICON_SIZE)
-        .attr('height', ICON_SIZE)
-        .attr('fill', (d, i) => colorScale(i));
-    legendG.append('text')
+        .attr('height', ICON_SIZE);
+    legendEnter.append('text')
         .attr('x', YAXIS_TO_LEGEND + LEGEND_MARGIN + ICON_SIZE)
         .attr('y', LEGEND_TEXT_HEIGHT)
         .attr('dy', LEGEND_TEXT_SIZE)
-        .text((d) => d);
+   
+    legend = legendEnter.merge(legend);
+    legend.attr('transform', (d, i) => {
+      const x = i * LEGEND_WIDTH - Math.floor(i / LABELS_PER_LANE) *
+                      LEGEND_WIDTH * LABELS_PER_LANE;
+      const y = Math.floor(i / LABELS_PER_LANE) * LEGEND_HEIGHT;
+      return `translate(${x}, ${y})`;
+    });
+    legend.select('rect').attr('fill', (d, i) => colorScale(i));
+    legend.select('text').text((d) => d);
   },
   /**
    * Redraw the stack bar chart.
diff --git a/tensorboard/plugins/profile/pod_viewer/topology_graph/BUILD b/tensorboard/plugins/profile/pod_viewer/topology_graph/BUILD
index 01ce82b0976..2aa31b41737 100644
--- a/tensorboard/plugins/profile/pod_viewer/topology_graph/BUILD
+++ b/tensorboard/plugins/profile/pod_viewer/topology_graph/BUILD
@@ -21,6 +21,5 @@ tf_web_library(
         "@org_polymer_paper_listbox",
         "@org_polymer_paper_menu",
         "@org_polymer_paper_menu_button",
-        "@org_polymer_paper_slider",
     ],
 )
diff --git a/tensorboard/plugins/profile/pod_viewer/topology_graph/topology-graph.html b/tensorboard/plugins/profile/pod_viewer/topology_graph/topology-graph.html
index b810433c700..4886df57bb6 100644
--- a/tensorboard/plugins/profile/pod_viewer/topology_graph/topology-graph.html
+++ b/tensorboard/plugins/profile/pod_viewer/topology_graph/topology-graph.html
@@ -24,7 +24,6 @@
 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../paper-item/paper-item.html">
 <link rel="import" href="../paper-listbox/paper-listbox.html">
-<link rel="import" href="../paper-slider/paper-slider.html">
 <link rel="import" href="pod-viewer-common.html">
 
 <dom-module id='topology-graph'>
@@ -170,13 +169,6 @@
             </template>
           </paper-listbox>
         </paper-menu-button>
-        <div hidden="[[!_maxChannelId]]">
-          <span class="control-row-left metrics-label">Please select a channel id
-            <paper-slider min=[[_minChannelId]] max=[[_maxChannelId]]
-                snaps step="1" value="{{selectedChannelId}}" editable>
-            </paper-slider>
-          </span>
-        </div>
       </div>
       <div id="tpgraph"></div>
       <div id="tooltip" class="hidden">
diff --git a/tensorboard/plugins/profile/pod_viewer/topology_graph/topology-graph.ts b/tensorboard/plugins/profile/pod_viewer/topology_graph/topology-graph.ts
index 10092bbe186..31186a8b8e0 100644
--- a/tensorboard/plugins/profile/pod_viewer/topology_graph/topology-graph.ts
+++ b/tensorboard/plugins/profile/pod_viewer/topology_graph/topology-graph.ts
@@ -16,6 +16,8 @@ const MAIN_COLORS = [
   '#ffffd9', '#edf8b1', '#c7e9b4', '#7fcdbb', '#41b6c4', '#1d91c0',
   '#225ea8', '#253494', '#081d58'
 ];
+const COLOR_SCALE =
+    d3.scaleQuantile<string>().domain([0, 1.0]).range(MAIN_COLORS);
 const SVG_WIDTH = 1620;
 const SVG_MARGIN = {top: 50, right: 0, bottom: 100, left: 30};
 
@@ -27,6 +29,8 @@ const HOST_TO_HOST_MARGIN = 10;
 const HOST_Y_STRIDE = 2;
 const NODES_PER_CHIP = 2;
 
+const TRANSITION_DURATION = 1000;
+
 interface Position {
   x: number,
   y: number,
@@ -46,8 +50,8 @@ interface TopoData {
   rid: number,
   /** Host name. */
   host: string,
-  /** Value of the selected metric. */
-  value: number,
+  /** Values of the node. */
+  values: Array<number>,
   /** Step total duration. */
   total: number,
 };
@@ -60,10 +64,8 @@ interface HostData {
   ydim: number,
 };
 
-/** Links grouped by channel id. */
-interface LinkData {
-  [key: number]: Array<podviewer.proto.ChannelInfo>
-};
+/** Src and dest ids of a link. */
+type SrcDestIds = [number, number];
 
 Polymer({
   is: 'topology-graph',
@@ -82,36 +84,14 @@ Polymer({
       type: Object,
       observer: '_activeBarChanged',
     },
-    selectedChannel: {
-      type: Array,
-      notify: true,
-    },
     selectedMetricIdx: {
       type: Number,
       value: 0,
-    },
-    selectedChannelId: {
-      type: Number,
-      value: 0,
-      observer: '_selectedChannelIdChanged',
+      observer: '_selectedMetricIdxChanged',
     },
     _topoData: {
       type: Object,
-      computed:
-          '_computeTopoData(data, runEnvironment, metrics, selectedMetricIdx)',
-    },
-    _linkData: {
-      type: Object,
-      computed: '_computeLinkData(data)',
-    },
-    _minChannelId: {
-      type: Number,
-      computed: '_computeMinChannelId(data)',
-    },
-    _maxChannelId: {
-      type: Number,
-      value: 0,
-      computed: '_computeMaxChannelId(data)',
+      computed: '_computeTopoData(data, runEnvironment, metrics)',
     },
     _xDimension: {
       type: Number,
@@ -145,7 +125,7 @@ Polymer({
     _nodeGridWidth: {
       type: Number,
     },
-    _gLink: {
+    _gSVG: {
       type: Object,
     },
   },
@@ -156,15 +136,16 @@ Polymer({
   _computeTopoData: function(
       data: podviewer.proto.PodStatsMap|undefined,
       runEnvironment: podviewer.proto.RunEnvironment|undefined,
-      metrics: Array<podviewer.proto.StackLayer>,
-      idx: number): Array<TopoData> {
-    if (!data || !runEnvironment || !runEnvironment.topology || !metrics ||
-        idx >= metrics.length || idx < 0) {
+      metrics: Array<podviewer.proto.StackLayer>): Array<TopoData> {
+    if (!data || !runEnvironment || !runEnvironment.topology || !metrics) {
       return;
     }
     const xdim = parseInt(runEnvironment.topology.xDimension, 10);
     return Object.keys(data.podStatsPerCore).map((core) => {
         const podStats = data.podStatsPerCore[core];
+        let breakdown = metrics.map((item) => {
+          return podStats[item.key] ? podStats[item.key] : 0;
+        });
         return {
             xdim: podStats.chipId % xdim,
             ydim: Math.floor(podStats.chipId / xdim),
@@ -172,45 +153,11 @@ Polymer({
             cid: podStats.chipId,
             rid: data.coreIdToReplicaIdMap[core], // replica id.
             host: podStats.hostName,
-            value: podStats[metrics[idx].key],
+            values: breakdown,
             total: podStats.totalDurationUs,
         };
     });
   },
-  /**
-   * Compute the data to be rendered as links.
-   */
-  _computeLinkData: function(
-      data: podviewer.proto.PodStatsMap): LinkData {
-    if (!data || !data.channelDb || data.channelDb.length == 0) return {};
-    let links = {};
-    data.channelDb.forEach(function(channel) {
-      if (!links[channel.channelId]) {
-        links[channel.channelId] = [channel];
-      } else {
-        links[channel.channelId].push(channel);
-      }
-    });
-    return links;
-  },
-  /** Compute the min channel id.*/
-  _computeMinChannelId: function(
-    data: podviewer.proto.PodStatsMap): number {
-    if (!data || !data.channelDb || data.channelDb.length == 0) {
-      return;
-    }
-    return data.channelDb.reduce(
-        (min, p) => Math.min(min, p.channelId), data.channelDb[0].channelId);
-  },
-  /** Compute the max channel id.*/
-  _computeMaxChannelId: function(
-    data: podviewer.proto.PodStatsMap): number {
-    if (!data || !data.channelDb || data.channelDb.length == 0) {
-      return;
-    }
-    return data.channelDb.reduce(
-        (max, p) => Math.max(max, p.channelId), data.channelDb[0].channelId);
-  },
   _computeTpuType: function(env: podviewer.proto.RunEnvironment): string {
     if (!env) return;
     return env.tpuType;
@@ -233,51 +180,51 @@ Polymer({
    * Main function to draw topology graph based on TPU topology.
    */
   topologyGraph: function(data: Array<TopoData>) {
-    d3.select(this.$.tpgraph).selectAll('g > *').remove();
-    d3.select(this.$.tpgraph).select('svg').remove();
-    d3.select(this.$.tpgraph).select('.svg-container').remove();
     this._hostGridWidth = this.getHostGridSize(this._hostXStride);
     this._hostGridHeight = this.getHostGridSize(HOST_Y_STRIDE);
     this._nodeGridWidth = CHIP_GRID_SIZE / NODES_PER_CHIP;
     this._nodeGridHeight = CHIP_GRID_SIZE;
     const hostXDim = this._xDimension / this._hostXStride;
     const hostYDim = this._yDimension / HOST_Y_STRIDE;
-    const colorScale =
-        d3.scaleQuantile<string>().domain([0, 1.0]).range(MAIN_COLORS);
     const chipXDims = Array.from(Array(this._xDimension).keys());
     const chipYDims = Array.from(Array(this._yDimension).keys());
-    let svg = d3.select(this.$.tpgraph)
-        .append('svg')
-        .attr('width', SVG_WIDTH)
-        .attr('height', hostYDim * this._hostGridHeight
-            + SVG_MARGIN.bottom + SVG_MARGIN.top)
-        .append('g')
-        .attr('transform',
-            'translate(' + SVG_MARGIN.left + ',' + SVG_MARGIN.top + ')');
+    if (!this._gSVG) {
+      this._gSVG = d3.select(this.$.tpgraph)
+          .append('svg')
+          .attr('width', SVG_WIDTH)
+          .attr('height', hostYDim * this._hostGridHeight
+              + SVG_MARGIN.bottom + SVG_MARGIN.top)
+          .append('g')
+          .attr('transform',
+              'translate(' + SVG_MARGIN.left + ',' + SVG_MARGIN.top + ')');
+
+      // Creates a group for all rects.
+      this._gSVG.append('svg:g').classed('graph', true);
+      // Creates separate group for links, so that the z-index remains in the right order.
+      this._gSVG.append('svg:g').classed('link', true);
+
+      // Add a svg:defs for the arrow head.
+      this._gSVG.append('svg:defs').append('svg:marker')
+          .attr('id', 'arrow')
+          .attr('viewBox', '0 -5 10 10')
+          .attr('markerWidth', 5)
+          .attr('markerHeight', 5)
+          .attr('orient', 'auto')
+          .append('svg:path')
+          .style('stroke', 'red')
+          .style('fill', 'red')
+          .attr('d', 'M0,-5L10,0L0,5');
+    }
+    let svg = this._gSVG.select('.graph');
     const hostData = this.createHostData(hostXDim, hostYDim);
     this.drawHostCards(
         svg, hostData, this._hostGridWidth, this._hostGridHeight);
-    this.drawNodeCards(svg, data, colorScale);
-
-    // Creates separate groups, so that the z-index remains in the right order.
-    this._gLink = svg.append('svg:g').classed('link', true);
-
-    // Add a svg:defs for the arrow head.
-    svg.append('svg:defs').append('svg:marker')
-        .attr('id', 'arrow')
-        .attr('viewBox', '0 -5 10 10')
-        .attr('markerWidth', 5)
-        .attr('markerHeight', 5)
-        .attr('orient', 'auto')
-        .append('svg:path')
-        .style('stroke', 'red')
-        .style('fill', 'red')
-        .attr('d', 'M0,-5L10,0L0,5');
+    this.drawNodeCards(svg, data, COLOR_SCALE);
     this.drawLabels(svg, chipXDims, chipYDims);
     const legendYLoc =
         this._hostGridHeight * Math.ceil(this._yDimension / HOST_Y_STRIDE) +
         HOST_TO_HOST_MARGIN;
-    this.drawLegend(svg, legendYLoc, colorScale);
+    this.drawLegend(svg, legendYLoc, COLOR_SCALE);
   },
   /**
    * Returns the size of host grid, including the host card size and the margin
@@ -326,7 +273,7 @@ Polymer({
    */
   drawLabels: function(svg: any, xdims: number[], ydims: number[]) {
     // Draw label on x axis.
-    let xLabel = svg.selectAll('.xLabel').data(xdims);
+    let xLabel = svg.selectAll('.x-label').data(xdims);
     xLabel.enter().append('text').merge(xLabel)
         .text((d) => d)
         .attr('x', (d, i) => this.getChipXLoc(
@@ -335,10 +282,13 @@ Polymer({
         .attr('y', 0)
         .style('text-anchor', 'middle')
         .attr('transform', 'translate(' + CHIP_GRID_SIZE / 2 + ', -6)')
-        .attr('class', 'axis');
+        .attr('class', 'x-label')
+        .transition()
+        .duration(TRANSITION_DURATION);
+    xLabel.exit().remove();
 
     // Draw label on y axis.
-    let yLabel = svg.selectAll('.yLabel').data(ydims);
+    let yLabel = svg.selectAll('.y-label').data(ydims);
     yLabel.enter().append('text').merge(yLabel)
         .text((d) => d)
         .attr('x', 0)
@@ -346,19 +296,22 @@ Polymer({
                        Math.floor(i / HOST_Y_STRIDE), i % HOST_Y_STRIDE))
         .style('text-anchor', 'middle')
         .attr('transform', 'translate(-12,' + CHIP_GRID_SIZE / 2 + ')')
-        .attr('class', 'axis');
+        .attr('class', 'y-label')
+        .transition()
+        .duration(TRANSITION_DURATION);
+    yLabel.exit().remove();
   },
   /**
    * Draw the UI of host cards.
    */
   drawHostCards: function(svg, data, gridWidth: number, gridHeight: number) {
-    let cards = svg.selectAll('.xdim').data(data, (d) => d.xdim);
+    let cards = svg.selectAll('.host').data(data);
     cards.enter().append('rect').merge(cards)
         .attr('x', (d) => d.xdim * gridWidth)
         .attr('y', (d) => d.ydim * gridHeight)
         .attr('rx', 4 * gridWidth / gridHeight)
         .attr('ry', 4)
-        .attr('class', 'hour bordered')
+        .attr('class', 'host bordered')
         .attr('width', gridWidth - HOST_TO_HOST_MARGIN)
         .attr('height', gridHeight - HOST_TO_HOST_MARGIN)
         .attr('border', 1)
@@ -366,15 +319,16 @@ Polymer({
         .style('stroke', 'black')
         .style('stroke-width', 1)
         .transition()
-        .duration(1000);
+        .duration(TRANSITION_DURATION);
     cards.exit().remove();
   },
   /**
    * Draw the UI of node cards.
    */
   drawNodeCards: function(svg: any, data: Array<TopoData>, colorScale: any) {
-    let cards = svg.selectAll('.xdim').data(data, (d) => d.xdim);
+    let cards = svg.selectAll('.node').data(data);
     let parent = this;
+    let metricIdx = Math.max(this.selectedMetricIdx, 0);
     cards.enter().append('rect').merge(cards)
         .attr('id', (d) => 'rid' + d.rid)
         .attr('x', (d) => {
@@ -389,13 +343,13 @@ Polymer({
         })
         .attr('rx', 4 / NODES_PER_CHIP)
         .attr('ry', 4)
-        .attr('class', 'hour bordered')
+        .attr('class', 'node bordered')
         .attr('width', this._nodeGridWidth)
         .attr('height', this._nodeGridHeight)
         .attr('border', 1)
         .style('stroke', 'black')
         .style('stroke-width', 1)
-        .style('fill', (d) => colorScale(d.value / d.total))
+        .style('fill', (d) => colorScale(d.values[metricIdx] / d.total))
         .on('mouseover', function(d) {
             // highlight text
             d3.select(this).classed('cell-hover', true).style('opacity', 0.5);
@@ -411,33 +365,31 @@ Polymer({
         .on('mouseout', function() {
             d3.select(this).classed('cell-hover', false).style('opacity', 1.0);
             d3.select(parent.$.tooltip).classed('hidden', true);
-        });
+        })
+        .transition()
+        .duration(TRANSITION_DURATION)
     cards.exit().remove();
   },
   /**
    * Draw the UI of chip to chip links.
    */
-  drawLinks: function(linkData: Array<podviewer.proto.ChannelInfo>) {
-    if (!linkData || linkData.length == 0 || !this._gLink) {
+  drawLinks: function(svg: any, linkData: Array<SrcDestIds>) {
+    if (!linkData || !linkData.length || !svg) {
       return;
     }
-
-    // Handle links;
-    let links = this._gLink.selectAll('.link').data(linkData);
-
-    // attach the arrow from defs
+    let links = svg.select('.link').selectAll('path').data(linkData);
+    
+    // Draw a link from each srcCoreId to each dstCoreId,
+    // with an arrow from defs attached.
     links.enter().append('svg:path').merge(links)
-        .attr('id', (d) => 'cid' + d.channelId)
         .attr('stroke-width', 2)
         .attr('stroke', 'red')
         .attr('fill', 'none')
         .attr('marker-end', 'url(#arrow)')
-        .style('visibility', 'hidden')
-        .attr('d', (d) => this.linkToPath(d));
+        .attr('d', (d) => this.linkToPath(d[0], d[1]));
 
     // Handle deleted links.
     links.exit().remove();
-    this._selectedChannelIdChanged(this.selectedChannelId);
   },
   /**
    * Given the global core id, returns the (x, y) coordinates in the topology
@@ -462,9 +414,10 @@ Polymer({
    * Returns the svg path given the src and dst core and node id.
    * @return Path in svg format.
    */
-  linkToPath: function(link: podviewer.proto.ChannelInfo): string {
-    const src = this.coreIdToPos(link.srcCoreId);
-    const dst = this.coreIdToPos(link.dstCoreId);
+  linkToPath: function(srcCoreId: number|undefined,
+                       dstCoreId: number|undefined): string {
+    const src = this.coreIdToPos(srcCoreId ? srcCoreId : 0);
+    const dst = this.coreIdToPos(dstCoreId ? dstCoreId : 0);
     const path = 'M ' + src.x + ' ' + src.y + 'L ' + dst.x + ' ' + dst.y;
     return path;
   },
@@ -475,6 +428,8 @@ Polymer({
   _getToolTipText: function(data: TopoData): string {
     const label = this.selectedMetricIdx >= 0 ?
         this.metrics[this.selectedMetricIdx].label : '';
+    const value = this.selectedMetricIdx >= 0 ?
+        data.values[this.selectedMetricIdx] : 0;
     const nf = new Intl.NumberFormat(navigator.language,
         {style: 'percent', minimumFractionDigits: 2});
 
@@ -483,8 +438,8 @@ Polymer({
         chip id: ${data.cid},
         core id: ${data.nid},
         replica id: ${data.rid}
-        ${label ? `${label} spends ${data.value.toFixed(2)}µs in total,
-            taking ${nf.format(data.value / data.total)} of a step.` : ''}`
+        ${label ? `${label} spends ${value.toFixed(2)}µs in total,
+            taking ${nf.format(value / data.total)} of a step.` : ''}`
     return res;
   },
   /**
@@ -494,19 +449,22 @@ Polymer({
     const legendElementWidth = CHIP_GRID_SIZE * 2;
     let legend = svg.selectAll('.legend').data(
         [0].concat(colorScale.quantiles()), (d) => d);
-    let legendG = legend.enter().append('g').merge(legend)
-                      .attr('class', 'legend');
-    legendG.append('rect')
-        .attr('x', (d, i) => legendElementWidth * i)
-        .attr('y', height)
+    legend.exit().remove();
+
+    let legendEnter = legend.enter().append('g').attr('class', 'legend');
+    legendEnter.append('rect')
         .attr('width', legendElementWidth)
         .attr('height', CHIP_GRID_SIZE)
+        .merge(legend.select('rect'))
+        .attr('x', (d, i) => legendElementWidth * i)
+        .attr('y', height)
         .style('fill', (d, i) => MAIN_COLORS[i]);
-    legendG.append('text')
+
+    legendEnter.append('text')
+        .merge(legend.select('text'))
         .text((d) => '\u2265 0.' + Math.round(d * 10))
         .attr('x', (d, i) => legendElementWidth * i)
         .attr('y', height + CHIP_GRID_SIZE * 2);
-    legend.exit().remove();
   },
   /**
    * Redraws the graph when the data to be rendered changed.
@@ -518,25 +476,17 @@ Polymer({
       return;
     }
     this.topologyGraph(topoData);
-    this.drawLinks(this.data.channelDb);
   },
   attached: function() {
     this.drawTopology(this._topoData, this.runEnvironment);
   },
   /**
-   * Updates the visible links when the selectedChannelIdChanged.
+   * Updates the color of the rectangles when selectedMetricIdxChanged.
    */
-  _selectedChannelIdChanged: function(newData: number, oldData: number) {
-    if (!this._linkData) return;
-    if (this._linkData[oldData]) {
-      d3.select(this.$.tpgraph)
-          .selectAll('#cid' + oldData).style('visibility', 'hidden');
-    }
-    if (this._linkData[newData]) {
-      d3.select(this.$.tpgraph)
-          .selectAll('#cid' + newData).style('visibility', 'visible');
-      this.selectedChannel = this._linkData[newData];
-    }
+  _selectedMetricIdxChanged: function(newIdx: number) {
+    if (newIdx < 0) return;
+    d3.select(this.$.tpgraph).selectAll('.node').style('fill',
+        (d) => COLOR_SCALE(d['values'][newIdx] / d['total']));
   },
   /**
    * Updates the topology color coding or selected channel id when the
@@ -556,8 +506,10 @@ Polymer({
         }
       }
       this.selectedMetricIdx = -1;
-    } else if (newData.channelId) {
-      this.selectedChannelId = newData.channelId;
+    } else if (newData.srcCoreIds) {
+      const links = newData.srcCoreIds.map(
+          (src, i) => [src, newData.dstCoreIds[i]]);
+      this.drawLinks(this._gSVG, links);
     }
   },
   /**