From 88a6455d9ecb580da79aece98d38cc302fa2f2b1 Mon Sep 17 00:00:00 2001
From: Aaron Boodman <aaron@aaronboodman.com>
Date: Tue, 25 Aug 2015 14:02:34 -0700
Subject: [PATCH] tagshow: Use URLs for state to ease development.

---
 clients/tagshow/datasetpicker.js | 23 ++++++-------
 clients/tagshow/main.js          | 29 ++++++++++++----
 clients/tagshow/package.json     |  1 +
 clients/tagshow/root.js          | 59 +++++++++++++++-----------------
 clients/tagshow/slideshow.js     | 21 ++++++++++--
 clients/tagshow/tagcloud.js      | 29 +++++++++++-----
 6 files changed, 100 insertions(+), 62 deletions(-)

diff --git a/clients/tagshow/datasetpicker.js b/clients/tagshow/datasetpicker.js
index 7a9be82e87..1eb23b0777 100644
--- a/clients/tagshow/datasetpicker.js
+++ b/clients/tagshow/datasetpicker.js
@@ -9,9 +9,9 @@ var DatasetPicker = React.createClass({
   mixins: [ImmutableRenderMixin],
 
   propTypes: {
-    root: React.PropTypes.instanceOf(noms.Ref).isRequired,
+    datasets: React.PropTypes.instanceOf(Promise).isRequired,
     onChange: React.PropTypes.func.isRequired,
-    selected: React.PropTypes.instanceOf(Immutable.Map),
+    selected: React.PropTypes.string,
   },
 
   getInitialState: function() {
@@ -21,24 +21,21 @@ var DatasetPicker = React.createClass({
   },
 
   handleSelectChange: function(e) {
-    this.props.onChange(
-      this.state.datasets.find(
-        ds => ds.get('id') == e.target.value));
+    this.props.onChange(e.target.value);
   },
 
   render: function() {
-    // Get the datasets
-    this.props.root.deref().then(
-      heads => heads.first().deref()).then(
-      commit => commit.get('value').deref()).then(
-      dsRefs => Promise.all(dsRefs.map(ref => ref.deref()))).then(
+    this.props.datasets.then(
       datasets => {
-        this.setState({datasets: Immutable.Set.of(...datasets)});
-      });
+        this.setState({
+          datasets: Immutable.Set.of(...datasets)
+        });
+      }
+    );
 
     return <form>
       Dataset:
-      <select value={this.props.selected.get('id')}
+      <select value={this.props.selected}
           onChange={this.handleSelectChange}>
         <option/>
         { 
diff --git a/clients/tagshow/main.js b/clients/tagshow/main.js
index f14ea2474c..5f00e841eb 100644
--- a/clients/tagshow/main.js
+++ b/clients/tagshow/main.js
@@ -1,14 +1,31 @@
 'use strict';
 
+var Immutable = require('immutable');
 var noms = require('noms');
+var queryString = require('query-string');
 var React = require('react');
 var Root = require('./root.js');
 
-noms.getRoot().then((rootRef) => {
-  noms.readValue(rootRef, noms.getChunk).then(render);
-});
+window.onload =
+    window.onhashchange = render;
 
-function render(rootValue) {
-  var target = document.getElementById('root');
-  React.render(<Root rootValue={rootValue}/>, target);
+function updateQuery(qs) {
+  location.hash = queryString.stringify(qs.toObject());
+}
+
+function render() {
+  var qs = queryString.parse(location.hash);
+  var target = document.getElementById('root');
+
+  // NOTE: This actually does a fetch, so if render() starts getting called
+  // more frequently (e.g., in response to window resize), then this should
+  // get moved someplace else.
+  var rootValue = noms.getRoot().then(
+    rootRef => noms.readValue(rootRef, noms.getChunk))
+
+  React.render(
+    <Root
+      qs={Immutable.Map(qs)}
+      rootValue={rootValue}
+      updateQuery={updateQuery}/>, target);
 }
diff --git a/clients/tagshow/package.json b/clients/tagshow/package.json
index 35a6443e58..2e9b4825d2 100644
--- a/clients/tagshow/package.json
+++ b/clients/tagshow/package.json
@@ -1,6 +1,7 @@
 {
   "name": "noms-tagshow",
   "dependencies": {
+    "query-string": "^2.4.0",
     "react": "^0.12.0",
     "react-immutable-render-mixin": "^0.8.1",
     "immutable": "^3.7.4"
diff --git a/clients/tagshow/root.js b/clients/tagshow/root.js
index e455568a4c..3dc3d6db06 100644
--- a/clients/tagshow/root.js
+++ b/clients/tagshow/root.js
@@ -20,33 +20,36 @@ var Root = React.createClass({
   mixins: [ImmutableRenderMixin],
 
   propTypes: {
-    rootValue: React.PropTypes.instanceOf(noms.Ref),
+    rootValue: React.PropTypes.instanceOf(Promise),
+    qs: React.PropTypes.instanceOf(Immutable.Map),
+    updateQuery: React.PropTypes.func.isRequired,
   },
 
   getInitialState: function() {
     return {
-      selectedDs: Immutable.Map(),
-      tags: Immutable.Map(),
       selected: Immutable.Set(),
       selectedPhotos: Immutable.Set(),
     };
   },
 
   handleDataSetPicked: function(ds) {
-    this.setState({selectedDs: ds});
+    this.props.updateQuery(this.props.qs.set('ds', ds));
+  },
 
-    ds.get('heads').deref().then(
-      heads => heads.first().deref()).then(
-      commit => commit.get('value').deref()).then(
-      tags => this.setState({tags:tags}));
+  getSelectedTags: function() {
+    var tags = this.props.qs.get('tags');
+    if (tags) {
+      tags = tags.split(',');
+    } else {
+      tags = [];
+    }
+    return Immutable.Set(tags);
   },
 
   handleTagChoose: function(tag) {
-    this.setState({
-      selected: this.state.selected.has(tag) ?
-        this.state.selected.remove(tag) :
-        this.state.selected.add(tag),
-    });
+    var tags = this.getSelectedTags();
+    tags = tags.has(tag) ? tags.delete(tag) : tags.add(tag);
+    this.props.updateQuery(this.props.qs.set('tags', tags.toArray().join(',')));
   },
 
   render: function() {
@@ -55,32 +58,26 @@ var Root = React.createClass({
     // transformations, or async functions, or something, everything has to be
     // defensively deref'd.
 
-    // Get the selected photos
-    var selectedSetRefs = this.state.tags.filter(
-      (v, k) => this.state.selected.has(k)).valueSeq();
-    Promise.all(selectedSetRefs.map(r => r.deref())).then(
-      sets => {
-        this.setState({
-          selectedPhotos: Immutable.Set().union(...sets)
-        });
-      });
+    if (!this.props.qs.get('ds')) {
+      return <div>
+        <b>Error: </b> 'ds' hash parameter not found
+      </div>
+    }
 
-    return <div>
-      <DataSetPicker
-        root={this.props.rootValue}
-        selected={this.state.selectedDs}
-        onChange={this.handleDataSetPicked}/>
-      <br/>
+    var dataset = noms.getDataset(this.props.qs.get('ds'))
+      .then(ref => ref.deref());
+
+    return (
       <div style={containerStyle}>
         <div>
-          <TagCloud tags={this.state.tags} selected={this.state.selected}
+          <TagCloud ds={dataset} selected={this.getSelectedTags()}
             onChoose={this.handleTagChoose}/>
         </div>
         <div style={slideShowStyle}>
-          <SlideShow photos={this.state.selectedPhotos}/>
+          <SlideShow ds={dataset} tags={this.getSelectedTags()}/>
         </div>
       </div>
-    </div>
+    );
   },
 });
 
diff --git a/clients/tagshow/slideshow.js b/clients/tagshow/slideshow.js
index 8cc93c3cc1..804d6f218b 100644
--- a/clients/tagshow/slideshow.js
+++ b/clients/tagshow/slideshow.js
@@ -17,12 +17,27 @@ var SlideShow = React.createClass({
   mixins: [ImmutableRenderMixin],
 
   propTypes: {
-    photos: React.PropTypes.instanceOf(Immutable.Set),
+    ds: React.PropTypes.instanceOf(Immutable.Map),
+    tags: React.PropTypes.instanceOf(Immutable.Set),
+  },
+
+  getInitialState: function() {
+    return {
+      photos: Immutable.Set(),
+    }
   },
 
   render: function() {
+    this.props.ds
+      .then(head => head.get('value').deref())
+      .then(tags => Promise.all(
+          tags.filter((v, t) => this.props.tags.has(t))
+            .valueSeq()
+            .map(ref => ref.deref())))
+      .then(sets => this.setState({photos: Immutable.Set(...sets)}));
+
     return <div style={containerStyle}>{
-      this.props.photos
+      this.state.photos
         .sort(
           // This sorts the photos deterministically, by the ref of their image
           // blob.
@@ -55,7 +70,7 @@ var Item = React.createClass({
       b => this.setState({blob: b}));
 
     if (this.state.blob == null) {
-      return null;
+      return <span>loading...</span>;
     }
 
     return <img style={imageStyle} src={URL.createObjectURL(this.state.blob)}/>
diff --git a/clients/tagshow/tagcloud.js b/clients/tagshow/tagcloud.js
index 045a0f7123..d84be2118c 100644
--- a/clients/tagshow/tagcloud.js
+++ b/clients/tagshow/tagcloud.js
@@ -12,22 +12,33 @@ var TagCloud = React.createClass({
   mixins: [ImmutableRenderMixin],
 
   propTypes: {
-    tags: React.PropTypes.instanceOf(Immutable.Map),
+    ds: React.PropTypes.instanceOf(Immutable.Map),
     selected: React.PropTypes.instanceOf(Immutable.Set),
     onChoose: React.PropTypes.func.isRequired,
   },
 
+  getInitialState: function() {
+    return {
+      tags: Immutable.Map(),
+    };
+  },
+
   render: function() {
+    this.props.ds
+      .then(head => head.get('value').deref())
+      .then(tags => this.setState({tags: tags}));
+
     return <div>{
-      this.props.tags.keySeq().sort().map(
-        (tag) => {
-          var ref = this.props.tags.get(tag);
-          var id = "tc-" + tag;
+      this.state.tags.keySeq().sort().map(
+        tag => {
+          var ref = this.state.tags.get(tag);
           return <div style={buttonStyle}>
-            <input type="checkbox" name="tc" id={id}
-              checked={this.props.selected.has(tag)}
-              onChange={() => this.props.onChoose(tag) }/>
-            <label htmlFor={id}>{tag}</label>
+            <label>
+              <input type="checkbox" name="tc"
+                checked={this.props.selected.has(tag)}
+                onChange={() => this.props.onChoose(tag) }/>
+              {tag}
+            </label>
           </div>
         }).toArray()
     }</div>