From d741716dc8373f9c52dfd577516c6e5119b5ac84 Mon Sep 17 00:00:00 2001
From: Simon Willison <simonw@eventbrite.com>
Date: Mon, 25 Jun 2018 18:40:17 -0700
Subject: [PATCH] Fixed # serializing/deserializing and back button support

---
 src/DatasetteVega.js | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/DatasetteVega.js b/src/DatasetteVega.js
index 9fb3946..3f13ba9 100644
--- a/src/DatasetteVega.js
+++ b/src/DatasetteVega.js
@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import vegaEmbed from 'vega-embed';
 import './DatasetteVega.css';
 
-const serialize = obj => Object.keys(obj).map(
-  key => obj[key] ? `g.${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}` : ''
+const serialize = (obj, prefix) => Object.keys(obj).filter(key => obj[key]).map(
+  key => `${prefix}.${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`
 ).join('&');
 
 const unserialize = (s, prefix) => {
@@ -14,9 +14,9 @@ const unserialize = (s, prefix) => {
     return {};
   }
   var obj = {};
-  s.split('&').filter(bit => bit.slice(0, prefix.length + 1) === `{prefix).`).forEach(bit => {
+  s.split('&').filter(bit => bit.slice(0, prefix.length + 1) === `${prefix}.`).forEach(bit => {
     let pair = bit.split('=');
-    obj[decodeURIComponent(pair[0]).replace(/^g\./, '')] = decodeURIComponent(pair[1]);
+    obj[decodeURIComponent(pair[0]).replace(new RegExp(`^${prefix}\\.`), '')] = decodeURIComponent(pair[1]);
   });
   return obj;
 };
@@ -75,7 +75,6 @@ class DatasetteVega extends Component {
       if (data.length > 1) {
         // Set columns to first item's keys
         const columns = Object.keys(data[0]);
-        console.log(columns);
         this.setState({
           columns: columns,
           x_column: columns[0],
@@ -101,7 +100,7 @@ class DatasetteVega extends Component {
       y_type,
       color_column,
       size_column
-    }))(this.state));
+    }))(this.state), 'g');
   }
   onPopStateChange(ev) {
     window.lastPopEv = ev;
@@ -134,10 +133,10 @@ class DatasetteVega extends Component {
       mark: this.state.mark,
       encoding: encoding
     }
-    console.log('spec= ', spec);
     if (spec.mark && spec.encoding.x.field && spec.encoding.y.field) {
       vegaEmbed("#vis", spec, {theme: 'quartz', tooltip: true});
-      document.location.hash = '#' + this.serializeState()
+      document.location.hash = '#' + this.serializeState();
+      // Add to state so react debug tools can see it (for debugging):
       this.setState({spec: spec});
     }
   }
@@ -153,7 +152,6 @@ class DatasetteVega extends Component {
   render() {
     const onChangeSelect = this.onChangeSelect.bind(this);
     const columns = this.state.columns;
-    console.log(columns);
     return (
       (columns.length > 1) ? <form action="" method="GET" id="graphForm">
         <div>