diff --git a/perf/modules/domain-picker-sk/domain-picker-sk.ts b/perf/modules/domain-picker-sk/domain-picker-sk.ts
index e3d1f42..d2fa9a8 100644
--- a/perf/modules/domain-picker-sk/domain-picker-sk.ts
+++ b/perf/modules/domain-picker-sk/domain-picker-sk.ts
@@ -46,10 +46,9 @@
       <label>
         <span class="prefix">End:</span>
         <calendar-input-sk
-          @changed=${ele.endChange}
+          @change=${ele.endChange}
           .displayDate=${toDate(ele._state.end)}
-        >
-        </calendar-input-sk>
+        ></calendar-input-sk>
       </label>
     </div>
   `;
@@ -62,15 +61,13 @@
           ?checked=${ele._state.request_type === RANGE}
           label="Date Range"
           name="daterange"
-        >
-        </radio-sk>
+        ></radio-sk>
         <radio-sk
           @change=${ele.typeDense}
           ?checked=${ele._state.request_type === DENSE}
           label="Dense"
           name="daterange"
-        >
-        </radio-sk>
+        ></radio-sk>
       `;
     }
     return html``;
@@ -83,10 +80,9 @@
         <label>
           <span class="prefix">Begin:</span>
           <calendar-input-sk
-            @changed=${ele.beginChange}
+            @change=${ele.beginChange}
             .displayDate=${toDate(ele._state.begin)}
-          >
-          </calendar-input-sk>
+          ></calendar-input-sk>
         </label>
       `;
     }
@@ -105,10 +101,10 @@
         />
       </label>
       <datalist id="defaultNumbers">
-        <option value="50"> </option>
-        <option value="100"> </option>
-        <option value="250"> </option>
-        <option value="500"> </option>
+        <option value="50"></option>
+        <option value="100"></option>
+        <option value="250"></option>
+        <option value="500"></option>
       </datalist>
     `;
   };
diff --git a/perf/modules/explore-sk/explore-sk.ts b/perf/modules/explore-sk/explore-sk.ts
index c9e840e..638b689 100644
--- a/perf/modules/explore-sk/explore-sk.ts
+++ b/perf/modules/explore-sk/explore-sk.ts
@@ -246,7 +246,7 @@
     </div>
     <details>
       <summary><h2>Time Range</h2></summary>
-      <domain-picker-sk id=range .state=${ele.state}>
+      <domain-picker-sk id=range>
       </domain-picker-sk>
     </details>
 
@@ -881,7 +881,14 @@
 
     this.plot!.addLines(dataframe.traceset, labels);
 
-    this.plot!.bands = json.skps!;
+    // Normalize bands to be just offsets.
+    const bands: number[] = [];
+    dataframe.header?.forEach((h, i) => {
+      if (json.skps?.indexOf(h.offset) !== -1) {
+        bands.push(i);
+      }
+    });
+    this.plot!.bands = bands;
 
     // Populate the xbar if present.
     if (this.state.xbaroffset !== -1) {
@@ -922,7 +929,10 @@
       errorMessage('The query must not be empty.');
       return;
     }
-    this.state = Object.assign({}, this.state, this.range!.state);
+    this.state.begin = this.range!.state.begin;
+    this.state.end = this.range!.state.end;
+    this.state.numCommits = this.range!.state.num_commits;
+    this.state.requestType = this.range!.state.request_type;
     if (replace) {
       this.removeAll(true);
     }
@@ -1122,7 +1132,12 @@
       errorMessage('The formula must not be empty.');
       return;
     }
-    this.state = Object.assign({}, this.state, this.range!.state);
+
+    this.state.begin = this.range!.state.begin;
+    this.state.end = this.range!.state.end;
+    this.state.numCommits = this.range!.state.num_commits;
+    this.state.requestType = this.range!.state.request_type;
+
     if (replace) {
       this.removeAll(true);
     }