New "Show charting options" button

Also switched to using a ref= for the vega element.

Ready for 0.3 release.

setup.py

@@ -4,7 +4,7 @@ from subprocess import check_output
 from wheel.bdist_wheel import bdist_wheel
 import os
 
-VERSION = '0.2'
+VERSION = '0.3'
 ROOT = os.path.dirname(os.path.abspath(__file__))
 
 

src/DatasetteVega.css

@@ -82,7 +82,8 @@
   text-align: center;
   margin-bottom: 0.6em;
 }
-.datasette-vega .swap-x-y button {
+.datasette-vega button,
+.datasette-vega-inactive button {
   background-color: #fafafa;
   border: 1px solid #ccc;
   font-weight: 400;
@@ -95,6 +96,9 @@
   -webkit-appearance: button;
   font-size: 0.7em;
 }
+.datasette-vega-inactive {
+  margin-bottom: 1em;
+}
 
 form.datasette-vega label {
   font-weight: bold;

src/DatasetteVega.js

@@ -23,8 +23,9 @@ const unserialize = (s, prefix) => {
 
 class DatasetteVega extends Component {
   state = {
-    columns: this.props.columns || [],
-    mark: "bar",
+    show: false,
+    columns: [],
+    mark: null,
     x_column: null,
     x_type: "ordinal",
     y_column: null,
@@ -66,9 +67,6 @@ class DatasetteVega extends Component {
     window.onpopstate = this.onPopStateChange.bind(this);
     // Load the columns
     let url = this.jsonUrl();
-    if (this.props.columns) {
-      return;
-    }
     fetch(url).then(r => r.json()).then(data => {
       if (data.length > 1) {
         // Set columns to first item's keys
@@ -80,12 +78,21 @@ class DatasetteVega extends Component {
             return key;
           }
         });
-        this.setState({
+        let initialState = {
           columns: columns,
           x_column: columns[0],
           y_column: columns[1],
-        }, () => {
+        };
+        // Is there state in the URL? If so use that too
+        let urlState = unserialize(document.location.hash, 'g');
+        if (Object.keys(urlState).length) {
+          initialState = Object.assign(initialState, urlState);
+          // And show the widget
+          initialState.show = true;
+        }
+        this.setState(initialState, () => {
           this.onPopStateChange();
+          this.renderGraph();
         });
       }
     });
@@ -112,7 +119,7 @@ class DatasetteVega extends Component {
   onPopStateChange(ev) {
     window.lastPopEv = ev;
     const expected = '#' + this.serializeState();
-    if (expected !== document.location.hash) {
+    if (expected !== document.location.hash && this.state.mark) {
       this.setState(
         unserialize(document.location.hash, 'g'), this.renderGraph.bind(this)
       );
@@ -141,10 +148,10 @@ class DatasetteVega extends Component {
       encoding: encoding
     }
     if (spec.mark && spec.encoding.x.field && spec.encoding.y.field) {
-      vegaEmbed("#vis", spec, {theme: 'quartz', tooltip: true});
+      vegaEmbed(this.chart, spec, {theme: 'quartz', tooltip: true});
       document.location.hash = '#' + this.serializeState();
       // Add to state so react debug tools can see it (for debugging):
-      this.setState({spec: spec});
+      this.setState({spec: spec, show: true});
     }
   }
   toggleAxis(ev) {
@@ -156,11 +163,19 @@ class DatasetteVega extends Component {
       y_type: prevState.x_type,
     }), this.renderGraph);
   }
+  showChart() {
+    this.setState({
+      show: true
+    }, this.renderGraph.bind(this));
+  }
   render() {
     const onChangeSelect = this.onChangeSelect.bind(this);
     const columns = this.state.columns;
+    if (!this.state.show) {
+      return <div className="datasette-vega-inactive"><button onClick={this.showChart.bind(this)}>Show charting options</button></div>;
+    }
     return (
-      (columns.length > 1) ? <form action="" method="GET" id="graphForm" className="datasette-vega">
+      (columns.length > 1) ? <div><form action="" method="GET" id="graphForm" className="datasette-vega">
         <h3>Charting options</h3>
         <div className="filter-row radio-buttons">
           {this.markOptions.map(option => (
@@ -202,7 +217,11 @@ class DatasetteVega extends Component {
             {columns.map(column => <option key={column} value={column}>{column}</option>)}
           </select></div></label>
         </div>
-      </form> : null
+      </form>
+      <div style={{overflow:'auto'}}>
+        <div ref={(c) => { this.chart = c; }}></div>
+      </div>
+      </div> : null
     );
   }
 }

src/index.js

@@ -4,15 +4,13 @@ import './index.css';
 import DatasetteVega from './DatasetteVega';
 
 document.addEventListener('DOMContentLoaded', () => {
-  let visWrapper, vis, visTool, jsonUrl;
+  let visTool, jsonUrl;
   if (process.env.REACT_APP_STAGE === 'dev') {
     // Dev mode - use graph elements already on the index.html page
     let m = /\?url=(.*)/.exec(window.location.search)
     if (m) {
       jsonUrl = decodeURIComponent(m[1]);
       document.getElementById('jsonUrl').value = jsonUrl;
-      visWrapper = document.getElementById('vis-wrapper');
-      vis = document.getElementById('vis');
       visTool = document.getElementById('vis-tool');
     }
   } else {
@@ -20,15 +18,9 @@ document.addEventListener('DOMContentLoaded', () => {
     if (jsonEl) {
       jsonUrl = jsonEl.getAttribute('href');
       // Create elements for adding graph tool to page
-      visWrapper = document.createElement('div');
-      visWrapper.style.overflow = 'hidden';
-      vis = document.createElement('div');
       visTool = document.createElement('div');
-      vis.setAttribute('id', 'vis');
-      visWrapper.appendChild(vis);
       let table = document.querySelector('table.rows-and-columns');
-      table.parentNode.insertBefore(visWrapper, table);
-      table.parentNode.insertBefore(visTool, visWrapper);
+      table.parentNode.insertBefore(visTool, table);
     }
   }
   if (jsonUrl) {