Added comma-separated URL params

client/app/scripts/components/topology-options.js

@@ -14,7 +14,20 @@ class TopologyOptions extends React.Component {
   }
 
   handleOptionClick(optionId, value, topologyId) {
-    this.props.changeTopologyOption(optionId, value, topologyId);
+    const { activeOptions, options } = this.props;
+    const selectedOption = options.find(o => o.get('id') === optionId);
+
+    if (selectedOption.get('selectType') === 'union') {
+      if (activeOptions.get(selectedOption.get('id')).includes(value)) {
+        // Option already exists; user is de-selecting
+        console.log('TODO! removeOption action');
+      } else {
+        // Option does not exist; user is enabling.
+        console.log('TODO! addOption action');
+      }
+    } else {
+      this.props.changeTopologyOption(optionId, value, topologyId);
+    }
   }
 
   renderOption(option) {

client/app/scripts/utils/web-api-utils.js

@@ -1,7 +1,7 @@
 import debug from 'debug';
 import reqwest from 'reqwest';
 import defaults from 'lodash/defaults';
-import { Map as makeMap } from 'immutable';
+import { Map as makeMap, List } from 'immutable';
 
 import { blurSearch, clearControlError, closeWebsocket, openWebsocket, receiveError,
   receiveApiDetails, receiveNodesDelta, receiveNodeDetails, receiveControlError,
@@ -45,7 +45,12 @@ let continuePolling = true;
 
 export function buildOptionsQuery(options) {
   if (options) {
-    return options.map((value, param) => `${param}=${value}`).join('&');
+    return options.map((value, param) => {
+      if (List.isList(value)) {
+        value = value.join(',');
+      }
+      return `${param}=${value}`;
+    }).join('&');
   }
   return '';
 }