From 2b3ebdd94ffd4599b9ca75676819d7a58d70a39e Mon Sep 17 00:00:00 2001
From: Robert Konigsberg <konigsberg@google.com>
Date: Sat, 7 Jan 2012 09:45:35 -0500
Subject: [PATCH] Properly handle multiple data selections.

---
 experimental/palette/index.html |  6 +---
 experimental/palette/index.js   | 27 +++++++++++++++-
 experimental/palette/samples.js | 68 +++++++++++++++++++++++++++++++----------
 3 files changed, 79 insertions(+), 22 deletions(-)

diff --git a/experimental/palette/index.html b/experimental/palette/index.html
index 4b4539b..e2f76d3 100644
--- a/experimental/palette/index.html
+++ b/experimental/palette/index.html
@@ -23,11 +23,7 @@
       <tr>
         <td valign="top">
           <div id="selector">
-            <select id="dataSelector">
-              <option value="interestingShapes">Interesting Shapes</option>
-              <option value="manyPoints">Many Points</option>
-              <option value="sparse">Sparse</option>
-            </select>
+            <select></select>
           </div>
           <div id="graph"></div>
           <div id="status" style="width:200px; font-size:0.8em; padding-top:5px;"></div>
diff --git a/experimental/palette/index.js b/experimental/palette/index.js
index 74359c9..64f5316 100644
--- a/experimental/palette/index.js
+++ b/experimental/palette/index.js
@@ -65,12 +65,37 @@ Index.start = function() {
   if (!(sampleName)) {
     sampleName = "interestingShapes";
   }
-  var sample = Samples[sampleName];
+  var sampleIndex = Samples.indexOf(sampleName);
+  var sample = Samples.data[sampleIndex];
   var data = sample.data;
   var redraw = function() {
     Index.draw(document.getElementById("graph"), data, palette.read());
   }
 
+  var selector = document.getElementById("selector").getElementsByTagName("select")[0];
+  for (var idx in Samples.data) {
+    var entry = Samples.data[idx];
+    var option = document.createElement("option");
+    option.value = entry.id;
+    option.innerText = entry.title;
+    selector.appendChild(option);
+  }
+  selector.onchange = function() {
+    var id = selector.options[selector.selectedIndex].value;
+    var url = document.URL;
+    var qmIndex = url.indexOf("?");
+    if (qmIndex >= 0) {
+      url = url.substring(0, qmIndex);
+    }
+    url = url + "?sample=" + id;
+    for (var idx in variables) {
+      if (idx != "sample") {
+        url = url + "&" + idx + "=" + variables[idx];
+      }
+    }
+    window.location = url;
+  }
+  selector.selectedIndex = sampleIndex;
   var palette = new Palette();
   palette.create(document, document.getElementById("optionsPalette"));
   palette.write(sample.options);
diff --git a/experimental/palette/samples.js b/experimental/palette/samples.js
index 2761b78..55da365 100644
--- a/experimental/palette/samples.js
+++ b/experimental/palette/samples.js
@@ -26,8 +26,11 @@
 
 "use strict";
 
-var Samples = {
-  interestingShapes: {
+var Samples = {};
+Samples.data = [
+  {
+    id: "interestingShapes",
+    title: "Interesting Shapes",
     data: function() {
       var zp = function(x) { if (x < 10) return "0"+x; else return x; };
       var r = "date,parabola,line,another line,sine wave\n";
@@ -62,22 +65,26 @@ var Samples = {
     }
   },
   
-  sparse: {
-   data: [
-     [ new Date("2009/12/01"), 10, 10, 10],
-     [ new Date("2009/12/02"), 15, 11, 12],
-     [ new Date("2009/12/03"), null, null, 12],
-     [ new Date("2009/12/04"), 20, 14, null],
-     [ new Date("2009/12/05"), 15, null, 17],
-     [ new Date("2009/12/06"), 18, null, null],
-     [ new Date("2009/12/07"), 12, 14, null]
-   ],
-   options: {
-     labels: ["Date", "Series1", "Series2", "Series3"]
-   }
+  {
+    id: "sparse",
+    title: "Sparse Data",
+    data: [
+      [ new Date("2009/12/01"), 10, 10, 10],
+      [ new Date("2009/12/02"), 15, 11, 12],
+      [ new Date("2009/12/03"), null, null, 12],
+      [ new Date("2009/12/04"), 20, 14, null],
+      [ new Date("2009/12/05"), 15, null, 17],
+      [ new Date("2009/12/06"), 18, null, null],
+      [ new Date("2009/12/07"), 12, 14, null]
+    ],
+    options: {
+      labels: ["Date", "Series1", "Series2", "Series3"]
+    }
   },
   
-  manyPoints: {
+  {
+    id: "manyPoints",
+    title: "Dense Data",
     data: function() {
       var numPoints = 1000;
       var numSeries = 100;
@@ -106,5 +113,34 @@ var Samples = {
       title: 'Many Points',
       axisLineColor: 'white',
     }
+  },
+
+  {
+    id: "errorBars",
+    title: "Error Bars",
+    data: [
+      [1, [10,  10, 100]],
+      [2, [15,  20, 110]],
+      [3, [10,  30, 100]],
+      [4, [15,  40, 110]],
+      [5, [10, 120, 100]],
+      [6, [15,  50, 110]],
+      [7, [10,  70, 100]],
+      [8, [15,  90, 110]],
+      [9, [10,  50, 100]]
+    ],
+    options: {
+      customBars: true,
+      errorBars: true
+    }
+  }
+];
+
+Samples.indexOf = function(id) {
+  for (var idx in Samples.data) {
+    if (Samples.data[idx].id == id) {
+      return idx;
+    }
   }
+  return null;
 }
-- 
2.7.4