Simplify search parameters JavaScript

visualizer/static/script.js

@@ -51,48 +51,33 @@ function appendYears(years, n) {
 }
 
 function indexVisualize() {
-  const params = {
-    station: selectVal('station'),
-    year: selectVal('year'),
-    measurement: selectVal('measurement'),
-  };
-  setSources(sourceLink(params.station, params.year));
-  visualize(`${SCRIPT_ROOT}/plot`, params);
+  const params = getControlsParams();
+  setSources(sourceLink(params.get('station'), params.get('year')));
+  visualize(`${SCRIPT_ROOT}/plot?${params}`);
 }
 
 function overlayVisualize() {
-  const params = {
-    station1: selectVal('station-1'),
-    year1: selectVal('year-1'),
-    station2: selectVal('station-2'),
-    year2: selectVal('year-2'),
-    measurement: selectVal('measurement'),
-  };
-  setSources(sourceLink(params.station1, params.year1, 1),
-             sourceLink(params.station2, params.year2, 2));
-  visualize(`${SCRIPT_ROOT}/plot/overlay`, params);
+  const params = getControlsParams();
+  setSources(sourceLink(params.get('station1'), params.get('year1'), 1),
+             sourceLink(params.get('station2'), params.get('year2'), 2));
+  visualize(`${SCRIPT_ROOT}/plot/overlay?${params}`);
 }
 
 function boxplotVisualize() {
-  const params = {
-    station: selectVal('station'),
-    year1: selectVal('year-1'),
-    year2: selectVal('year-2'),
-    measurement: selectVal('measurement'),
-  };
-  setSources(sourceLink(params.station, params.year1));
+  const params = getControlsParams();
+  setSources(sourceLink(params.get('station'), params.get('year1')));
   // XXX No year 2?
-  visualize(`${SCRIPT_ROOT}/plot/boxplot`, params);
+  visualize(`${SCRIPT_ROOT}/plot/boxplot?${params}`);
 }
 
 /**
  * Fetch the given plot and show it.
  */
-function visualize(path, params) {
+function visualize(imgSrc) {
   const plotDiv = document.getElementById('plot');
   const visualization = document.getElementById('visualization');
   const img = document.createElement('img');
-  img.src = path + paramString(params);
+  img.src = imgSrc;
   plotDiv.replaceChildren(img);
   visualization.hidden = false;
 }
@@ -109,7 +94,8 @@ function sourceLink(station, year, n) {
     a.target = '_blank';
   }
   div.appendChild(a);
-  fetch(`${SCRIPT_ROOT}/record/link${paramString({station, year})}`)
+  const params = new URLSearchParams({station, year});
+  fetch(`${SCRIPT_ROOT}/record/link?${params}`)
     .then(response => response.json())
     .then(response => {
       a.href = response;
@@ -126,14 +112,11 @@ function setSources(...sources) {
 }
 
 /**
- * Generate a query string from parameters.
+ * Get the search parameters from the "controls" form's inputs.
  */
-function paramString(params) {
-  const strings = [];
-  for (const key in params) {
-    strings.push(`${key}=${params[key]}`);
-  }
-  return `?${strings.join('&')}`;
+function getControlsParams() {
+  const controls = document.getElementById('controls');
+  return new URLSearchParams(new FormData(controls));
 }
 
 /**