Fix for httpx.AsyncClient(app=app)

Refs https://github.com/simonw/datasette/issues/2549

.travis.yml

@@ -0,0 +1,37 @@
+language: node_js
+
+node_js:
+  - "stable"
+
+cache:
+  directories:
+  - node_modules
+
+script:
+  - CI=true npm test
+
+jobs:
+  include:
+    - stage: deploy datasette-vega-latest.datasette.io
+      on: master
+      script:
+        - npm install -g now
+        - REACT_APP_STAGE=dev npm run build
+        - echo '{"name":"datasette-vega-latest","alias":"datasette-vega-latest.datasette.io"}' > build/now.json
+        - cd build && now --name=datasette-vega-latest --token=$NOW_TOKEN
+        - now alias --token=$NOW_TOKEN
+    - stage: release tagged version
+      if: tag IS present
+      language: python
+      python: 3.6
+      script:
+        - pip install -U pip wheel
+      deploy:
+        - provider: pypi
+          user: simonw
+          distributions: bdist_wheel
+          password: ${PYPI_PASSWORD}
+          on:
+            branch: master
+            tags: true
+            repo: simonw/datasette-vega

LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -1,3 +1,22 @@
 # datasette-vega
 
-A [Datasette](https://github.com/simonw/datasette) plugin that provides tools for generating charts using [Vega](https://vega.github.io/).
+[![PyPI](https://img.shields.io/pypi/v/datasette-vega.svg)](https://pypi.org/project/datasette-vega/)
+[![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/simonw/datasette-vega/blob/master/LICENSE)
+
+A [Datasette](https://github.com/simonw/datasette) plugin that provides tools
+for generating charts using [Vega](https://vega.github.io/).
+
+![Datasette Vega interface](https://raw.githubusercontent.com/simonw/datasette-vega/master/datasette-vega.png)
+
+Try out the latest master build as a live demo at https://datasette-vega-latest.datasette.io/ or try the latest release installed as a plugin at https://fivethirtyeight.datasettes.com/
+
+To add this to your Datasette installation, install the plugin like so:
+
+    pip install datasette-vega
+
+The plugin will then add itself to every Datasette table view.
+
+If you are publishing data using the `datasette publish` command, you can
+include this plugin like so:
+
+    datasette publish now mydatabase.db --install=datasette-vega

datasette_vega/__init__.py

@@ -1,11 +1,28 @@
 from datasette import hookimpl
+import glob
+import os
+
+cache = {}
+static_dir = os.path.join(os.path.dirname(__file__), "static")
+
+
+def cached_filepaths_for_extension(extension):
+    pattern = os.path.join(static_dir, "*.{}".format(extension))
+    if pattern not in cache:
+        cache[pattern] = [
+            "/-/static-plugins/datasette_vega/{}".format(os.path.basename(g))
+            for g in glob.glob(pattern)
+        ]
+    return cache[pattern]
 
 
 @hookimpl
-def extra_css_urls():
-    return ["/-/static-plugins/datasette_vega/datasette-vega.css"]
+def extra_css_urls(view_name):
+    if view_name == "table":
+        return cached_filepaths_for_extension("css")
 
 
 @hookimpl
-def extra_js_urls():
-    return ["/-/static-plugins/datasette_vega/datasette-vega.js"]
+def extra_js_urls(view_name):
+    if view_name == "table":
+        return cached_filepaths_for_extension("js")

package.json

@@ -3,17 +3,28 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
-    "react-scripts": "1.1.4",
-    "source-map-explorer": "^1.5.0",
-    "vega-embed": "^3.15.0",
-    "vega-lib": "^4.0.0-rc.3"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "^4.0.3",
+    "vega-embed": "^6.20.5",
+    "vega-lib": "^4.4.0"
   },
   "scripts": {
     "start": "REACT_APP_STAGE=dev react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

public/index.html

@@ -4,15 +4,16 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
+    <link rel="stylesheet" href="https://latest.datasette.io/-/static/app.css">
     <title>Datasette Vega</title>
   </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <form action="." method="GET">
-      <input id="jsonUrl" type="text" name="url" value="">
-      <input type="submit" value="Go">
+  <body class="datasette-vega-demo">
+    <h1>Datasette Vega</h1>
+    <p>Enter the URL of the JSON version of any Datasette table:</p>
+    <form action="." method="GET" style="margin-bottom: 2em">
+      <input id="jsonUrl" type="text" name="url" value="https://fivethirtyeight.datasettes.com/fivethirtyeight-45d758d/nba-elo%2Fnbaallelo.json" style="width: 80%; font-size: 1.2em;">
+      <input type="submit" value="Load" style="font-size: 1.2em; border: 1px solid #ccc">
+      <p>Examples: <a href="/?url=https%3A%2F%2Ffivethirtyeight.datasettes.com%2Ffivethirtyeight-45d758d%2Fnba-elo%252Fnbaallelo.json#g.mark=bar&g.x_column=game_id&g.x_type=ordinal&g.y_column=pts&g.y_type=quantitative&g.color_column=team_id">game_id/pts/team_id</a></p>
     </form>
     <div id="vis-tool"></div>
     <div id="vis-wrapper" style="overflow: auto">

setup.py

@@ -4,20 +4,21 @@ from subprocess import check_output
 from wheel.bdist_wheel import bdist_wheel
 import os
 
-VERSION = '0.1'
+VERSION = "0.7a0"
 ROOT = os.path.dirname(os.path.abspath(__file__))
 
 
 def get_long_description():
-    with open(os.path.join(
-        os.path.dirname(os.path.abspath(__file__)), 'README.md'
-    ), encoding='utf8') as fp:
+    with open(
+        os.path.join(os.path.dirname(os.path.abspath(__file__)), "README.md"),
+        encoding="utf8",
+    ) as fp:
         return fp.read()
 
 
 class BdistWheelWithBuildStatic(bdist_wheel):
     def run(self):
-        self.run_command('build_static')
+        self.run_command("build_static")
         return bdist_wheel.run(self)
 
 
@@ -31,36 +32,41 @@ class BuildStatic(Command):
         pass
 
     def run(self):
-        check_output(['npm', 'run', 'build'], cwd=ROOT)
-        check_output(['mkdir', '-p', 'datasette_vega/static'], cwd=ROOT)
-        check_output("mv build/static/js/*.js datasette_vega/static/datasette-vega.js", shell=True, cwd=ROOT)
-        check_output("mv build/static/css/*.css datasette_vega/static/datasette-vega.css", shell=True, cwd=ROOT)
+        check_output(["npm", "install"], cwd=ROOT)
+        check_output(["npm", "run", "build"], cwd=ROOT)
+        check_output(["mkdir", "-p", "datasette_vega/static"], cwd=ROOT)
+        check_output(
+            "mv build/static/js/* datasette_vega/static/", shell=True, cwd=ROOT
+        )
+        check_output(
+            "mv build/static/css/* datasette_vega/static/", shell=True, cwd=ROOT
+        )
 
 
 setup(
-    name='datasette-vega',
-    description='A Datasette plugin that provides tools for generating charts using Vega',
+    name="datasette-vega",
+    description="A Datasette plugin that provides tools for generating charts using Vega",
     long_description=get_long_description(),
-    long_description_content_type='text/markdown',
-    author='Simon Willison',
-    url='https://github.com/simonw/datasette-vega',
-    license='Apache License, Version 2.0',
+    long_description_content_type="text/markdown",
+    author="Simon Willison",
+    url="https://github.com/simonw/datasette-vega",
+    license="Apache License, Version 2.0",
     version=VERSION,
-    packages=['datasette_vega'],
+    packages=["datasette_vega"],
     entry_points={
-        'datasette': [
-            'cluster_map = datasette_vega'
-        ],
+        "datasette": ["vega = datasette_vega"],
     },
     package_data={
-        'datasette_vega': [
-            'static/datasette-vega.js',
-            'static/datasette-vega.css',
+        "datasette_vega": [
+            "static/*.js",
+            "static/*.css",
+            "static/*.map",
         ],
     },
     cmdclass={
-        'bdist_wheel': BdistWheelWithBuildStatic,
-        'build_static': BuildStatic,
+        "bdist_wheel": BdistWheelWithBuildStatic,
+        "build_static": BuildStatic,
     },
-    install_requires=['datasette']
+    install_requires=["datasette"],
+    extras_require={"test": ["pytest", "pytest-asyncio", "httpx"]},
 )

src/DatasetteVega.css

@@ -66,3 +66,56 @@
   background-color: #f7f7f9;
   color: #1b1e23;
 }
+
+.datasette-vega {
+  margin: 1em 0;
+  padding: 1em;
+  width: auto;
+  display: inline-block;
+  font-size: 0.8em;
+  box-shadow: 1px 2px 8px 2px rgba(0,0,0,0.08);
+}
+.datasette-vega h3 {
+  margin-top: 0;
+}
+.datasette-vega .swap-x-y {
+  text-align: center;
+  margin-bottom: 0.6em;
+}
+.datasette-vega button,
+.datasette-vega-inactive button {
+  background-color: #fafafa;
+  border: 1px solid #ccc;
+  font-weight: 400;
+  cursor: pointer;
+  text-align: center;
+  vertical-align: middle;
+  padding: .5em 0.8em;
+  line-height: 1;
+  border-radius: .25rem;
+  -webkit-appearance: button;
+  font-size: 0.7em;
+}
+.datasette-vega-inactive {
+  margin-bottom: 1em;
+}
+
+form.datasette-vega label {
+  font-weight: bold;
+  display: inline;
+  width: auto;
+  padding-right: 0.3em;
+}
+
+form.datasette-vega div {
+  margin-bottom: 0.3em;
+}
+
+.datasette-vega .radio-buttons label {
+  margin-right: 2em;
+  display: inline-block;
+}
+
+.datasette-vega .radio-buttons {
+  margin-bottom: 1em;
+}

src/DatasetteVega.js

@@ -21,10 +21,13 @@ const unserialize = (s, prefix) => {
   return obj;
 };
 
+const escapeString = s => (s || '').replace(/"/g, '\\x22').replace(/'/g, '\\x27');
+
 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,
@@ -32,20 +35,22 @@ class DatasetteVega extends Component {
     color_column: "",
     size_column: ""
   }
+  constructor(props) {
+    super(props);
+    this.chartRef = React.createRef();
+  }
   markOptions = [
-    {"value": "bar", "name": "bar"},
-    {"value": "line", "name": "line"},
-    {"value": "circle", "name": "circle"},
-    {"value": "square", "name": "square"},
-    {"value": "point", "name": "point"},
+    {"value": "bar", "name": "Bar"},
+    {"value": "line", "name": "Line"},
+    {"value": "circle", "name": "Scatter"},
   ]
   typeOptions = [
-    {"value": "quantitative", "name": "Numbers (quantitative)"},
-    {"value": "quantitative-bin", "name": "Numbers (quantitative), binned"},
-    {"value": "temporal", "name": "Dates and times (temporal)"},
-    {"value": "temporal-bin", "name": "Dates and times (temporal), binned"},
-    {"value": "ordinal", "name": "Labels (ordinal)"},
-    {"value": "nominal", "name": "Categories (nominal)"},
+    {"value": "quantitative", "name": "Numeric"},
+    {"value": "quantitative-bin", "name": "Numeric, binned"},
+    {"value": "temporal", "name": "Date/time"},
+    {"value": "temporal-bin", "name": "Date/time, binned"},
+    {"value": "ordinal", "name": "Label"},
+    {"value": "nominal", "name": "Category"},
   ]
   onChangeSelect(name, ev) {
     ev.persist();
@@ -68,20 +73,33 @@ 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
-        const columns = Object.keys(data[0]).map(
-          key => (data[0][key] && data[0][key].label) ? `${key}.label` : key
-        );
-        this.setState({
+        const columns = Object.keys(data[0]).map(key => {
+          // Do ANY of these rows have a .label property?
+          if (data.filter(d => (d[key] || '').label !== undefined).length) {
+            return `${key}.label`;
+          } else {
+            return key;
+          }
+        });
+        let initialState = {
           columns: columns,
           x_column: columns[0],
           y_column: columns[1],
-        }, this.renderGraph);
+        };
+        // 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();
+        });
       }
     });
   }
@@ -107,7 +125,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)
       );
@@ -120,7 +138,8 @@ class DatasetteVega extends Component {
     const y_bin = !!/-bin$/.exec(this.state.y_type);
     let encoding = {
       x: {field: this.state.x_column, type: x_type, bin: x_bin},
-      y: {field: this.state.y_column, type: y_type, bin: y_bin}
+      y: {field: this.state.y_column, type: y_type, bin: y_bin},
+      tooltip: {field: "_tooltip_summary", type: "ordinal"},
     }
     if (this.state.color_column) {
       encoding.color = {field: this.state.color_column, type: "nominal"};
@@ -132,14 +151,24 @@ class DatasetteVega extends Component {
       data: {
         url: this.jsonUrl()
       },
+      transform: [{
+        calculate: `
+          '${escapeString(this.state.x_column)}: ' + datum['${escapeString(this.state.x_column)}'] +
+          ', ${escapeString(this.state.y_column)}: ' + datum['${escapeString(this.state.y_column)}'] +
+          (${!!this.state.color_column} ? ', ${escapeString(this.state.color_column)}: ' + datum['${escapeString(this.state.color_column)}'] : '') +
+          (${!!this.state.size_column} ? ', ${escapeString(this.state.size_column)}: ' + datum['${escapeString(this.state.size_column)}'] : '')
+        `,
+        as: "_tooltip_summary"
+      }],
       mark: this.state.mark,
       encoding: encoding
     }
     if (spec.mark && spec.encoding.x.field && spec.encoding.y.field) {
-      vegaEmbed("#vis", spec, {theme: 'quartz', tooltip: true});
+      vegaEmbed(this.chartRef.current, spec, {theme: 'quartz', tooltip: true});
       document.location.hash = '#' + this.serializeState();
+      this.props.onFragmentChange && this.props.onFragmentChange();
       // Add to state so react debug tools can see it (for debugging):
-      this.setState({spec: spec});
+      this.setState({spec: spec, show: true});
     }
   }
   toggleAxis(ev) {
@@ -151,44 +180,65 @@ 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">
-        <div>
-          <label>Type of chart: <select name="mark" value={this.state.mark} onChange={ev => onChangeSelect("mark", ev)}>
-            {this.markOptions.map(option => <option key={option.value} value={option.value}>{option.name}</option>)}
-          </select></label>
+      (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 => (
+            <label key={option.value} value={option.value}><input
+              type="radio"
+              name="mark"
+              value={option.value}
+              checked={option.value === this.state.mark}
+              onChange={ev => onChangeSelect("mark", ev)}
+            /> {option.name}</label>
+          ))}
         </div>
-        <div>
-          <label>X <select name="x_column" value={this.state.x_column || ''} onChange={ev => onChangeSelect("x_column", ev)}>
+        <div className="filter-row">
+          <label>X column <div className="select-wrapper"><select name="x_column" value={this.state.x_column || ''} onChange={ev => onChangeSelect("x_column", ev)}>
             {columns.map(column => <option key={column} value={column}>{column}</option>)}
-          </select></label>
-          <label>X type: <select name="x_type" value={this.state.x_type} onChange={ev => onChangeSelect("x_type", ev)}>
+          </select></div></label>
+          <label>Type <div className="select-wrapper"><select name="x_type" value={this.state.x_type} onChange={ev => onChangeSelect("x_type", ev)}>
             {this.typeOptions.map(option => <option key={option.value} value={option.value}>{option.name}</option>)}
-          </select></label>
+          </select></div></label>
         </div>
-        <div>
-          <label>Y <select name="y_column" value={this.state.y_column || ''} onChange={ev => onChangeSelect("y_column", ev)}>
+        <div className="filter-row">
+          <label>Y column <div className="select-wrapper"><select name="y_column" value={this.state.y_column || ''} onChange={ev => onChangeSelect("y_column", ev)}>
             {columns.map(column => <option key={column} value={column}>{column}</option>)}
-          </select></label>
-          Y type: <select name="y_type" value={this.state.y_type} onChange={ev => onChangeSelect("y_type", ev)}>
+          </select></div></label>
+          <label>Type <div className="select-wrapper"><select name="y_type" value={this.state.y_type} onChange={ev => onChangeSelect("y_type", ev)}>
             {this.typeOptions.map(option => <option key={option.value} value={option.value}>{option.name}</option>)}
-          </select>
+          </select></div></label>
         </div>
-        <div>
-          <label>Color <select name="color_column" value={this.state.color_column} onChange={ev => onChangeSelect("color_column", ev)}>
+        <div className="swap-x-y">
+          <button onClick={this.toggleAxis.bind(this)}>Swap X and Y</button>
+        </div>
+        <div className="filter-row">
+          <label>Color <div className="select-wrapper"><select name="color_column" value={this.state.color_column} onChange={ev => onChangeSelect("color_column", ev)}>
             <option value="">-- none --</option>
             {columns.map(column => <option key={column} value={column}>{column}</option>)}
-          </select></label>
-          <label>Size <select name="size_column" value={this.state.size_column} onChange={ev => onChangeSelect("size_column", ev)}>
+          </select></div></label>
+          <label>Size <div className="select-wrapper"><select name="size_column" value={this.state.size_column} onChange={ev => onChangeSelect("size_column", ev)}>
             <option value="">-- none --</option>
             {columns.map(column => <option key={column} value={column}>{column}</option>)}
-          </select></label>
+          </select></div></label>
         </div>
-        <div><button onClick={this.toggleAxis.bind(this)}>Swap X and Y</button></div>
-      </form> : null
+      </form>
+      <div style={{overflow:'auto'}}>
+        <div ref={this.chartRef}></div>
+      </div>
+      </div> : null
     );
   }
 }

src/index.css

@@ -1,14 +1,14 @@
-body {
+body.datasette-vega-demo {
   margin: 0;
   padding: 1em;
   font-family: sans-serif;
 }
 
 
-form div {
+body.datasette-vega-demo form div {
   margin-bottom: 0.5em
 }
 
-label {
+body.datasette-vega-demo label {
   padding-right: 0.5em;
 }

src/index.js

@@ -3,16 +3,42 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import DatasetteVega from './DatasetteVega';
 
+const matchesCurrentHostAndPath = (url) => {
+  // Given a url, is it the same host and path as current page?
+  // (ignores querystring and fragment hash)
+  url = url.split('#')[0];
+  // Only activate if link is to current page (presumably with different querystring)
+  var currentHostAndPath = window.location.hostname;
+  if (window.location.port !== '') {
+    currentHostAndPath += ':' + window.location.port;
+  }
+  currentHostAndPath += window.location.pathname;
+  // Ignore http/s due to https://github.com/simonw/datasette/issues/333
+  var linkedHostAndPath = url.split('://')[1].split('?')[0];
+  return currentHostAndPath === linkedHostAndPath;
+};
+
+// Update any forms with current page as action when fragment changes
+const onFragmentChange = () => {
+  if (window.location.hash.length === 0) {
+    return;
+  }
+  Array.from(document.getElementsByTagName('form')).forEach(form => {
+    var action = form.action.split('#')[0];
+    if (matchesCurrentHostAndPath(action)) {
+      form.action = action + window.location.hash;
+    }
+  });
+};
+
 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 +46,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) {
@@ -36,7 +56,43 @@ document.addEventListener('DOMContentLoaded', () => {
     jsonUrl += (jsonUrl.indexOf('?') > -1) ? '&' : '?';
     jsonUrl += '_shape=array'
     ReactDOM.render(
-      <DatasetteVega base_url={jsonUrl} />, visTool
+      <DatasetteVega base_url={jsonUrl} onFragmentChange={onFragmentChange} />, visTool
     );
   }
 });
+
+// Persist #settings across links to same page
+window.addEventListener('click', function (ev) {
+  if (window.location.hash.length === 0) {
+    return true;
+  }
+  if (ev.altKey || ev.ctrlKey || ev.metaKey || ev.shiftKey || ev.defaultPrevented) {
+    return true;
+  }
+  var a = null;
+  for (var n = ev.target; n.parentNode; n = n.parentNode) {
+    if (n.nodeName === 'A') {
+      a = n;
+      break;
+    }
+  }
+  if (!a || !a.href) {
+    return true;
+  }
+  // This expands the full URL even if the link is /relative:
+  var href = a.href;
+  // Split off any existing #fragment
+  href = href.split('#')[0];
+  var linkedHostQuery = href.split('?')[1];
+  if (matchesCurrentHostAndPath(href)) {
+    // Cancel click, navigate to this + fragment instead
+    var linkedHostAndPath = href.split('://')[1].split('?')[0];
+    if (linkedHostQuery) {
+      linkedHostAndPath += '?' + linkedHostQuery;
+    }
+    ev.preventDefault();
+    window.location = window.location.protocol + '//' + linkedHostAndPath + window.location.hash;
+    return false;
+  }
+  return true;
+});

tests/test_vega.py

@@ -0,0 +1,11 @@
+import pytest
+from datasette.app import Datasette
+
+
+@pytest.mark.asyncio
+async def test_plugin_is_installed():
+    ds = Datasette([], memory=True)
+    response = await ds.client.get("/-/plugins.json")
+    assert response.status_code == 200
+    installed_plugins = {p["name"] for p in response.json()}
+    assert "datasette-vega" in installed_plugins