tagshow: Put tag picker in its own "page"

clients/tagshow/root.js

@@ -46,9 +46,7 @@ var Root = React.createClass({
     return Immutable.Set(tags);
   },
 
-  handleTagChoose: function(tag) {
-    var tags = this.getSelectedTags();
-    tags = tags.has(tag) ? tags.delete(tag) : tags.add(tag);
+  handleTagChoose: function(tags) {
     this.props.updateQuery(this.props.qs.set('tags', tags.toArray().join(',')));
   },
 
@@ -60,14 +58,20 @@ var Root = React.createClass({
     var dataset = noms.getDataset(this.props.pRoot, this.props.qs.get('ds'))
       .then(ref => ref.deref());
 
+    var selectedTags = this.getSelectedTags();
+    if (selectedTags.size === 0) {
+      return (
+        <TagCloud
+          ds={dataset}
+          selected={this.getSelectedTags()}
+          onChoose={this.handleTagChoose}/>
+      );
+    }
+
     return (
       <div style={containerStyle}>
-        <div>
-          <TagCloud ds={dataset} selected={this.getSelectedTags()}
-            onChoose={this.handleTagChoose}/>
-        </div>
         <div style={slideShowStyle}>
-          <SlideShow ds={dataset} tags={this.getSelectedTags()}/>
+          <SlideShow ds={dataset} tags={selectedTags}/>
         </div>
       </div>
     );

clients/tagshow/tagcloud.js

@@ -4,8 +4,9 @@ var Immutable = require('immutable');
 var ImmutableRenderMixin = require('react-immutable-render-mixin');
 var React = require('react');
 
-var buttonStyle = {
-  display: 'block',
+var tagStyle = {
+  display: 'inline',
+  marginRight: '1ex',
 };
 
 var TagCloud = React.createClass({
@@ -19,29 +20,46 @@ var TagCloud = React.createClass({
 
   getInitialState: function() {
     return {
+      selected: this.props.selected,
       tags: Immutable.Map(),
     };
   },
 
+  handleChange: function(tag) {
+    var selected = this.state.selected;
+    selected = selected.has(tag) ? selected.delete(tag) : selected.add(tag);
+    this.setState({selected: selected});
+  },
+
+  handleSubmit: function(e) {
+    this.props.onChoose(this.state.selected);
+    e.preventDefault();
+  },
+
   render: function() {
     this.props.ds
       .then(head => head.get('value').deref())
       .then(tags => this.setState({tags: tags}));
 
-    return <div>{
+    return <form onSubmit={this.handleSubmit}>{
       this.state.tags.keySeq().sort().map(
         tag => {
           var ref = this.state.tags.get(tag);
-          return <div style={buttonStyle}>
-            <label>
-              <input type="checkbox" name="tc"
-                checked={this.props.selected.has(tag)}
-                onChange={() => this.props.onChoose(tag) }/>
-              {tag}
-            </label>
-          </div>
+          return (
+            <div style={tagStyle}>
+              <label>
+                <input type="checkbox" name="tc"
+                  checked={this.state.selected.has(tag)}
+                  onChange={() => this.handleChange(tag) }/>
+                {tag}
+              </label>
+            </div>
+          );
         }).toArray()
-    }</div>
+      }
+      <br/>
+      <input type="submit" value="OK!"/>
+    </form>
   },
 });