From 40cb789c31511cf85ae2a57de5a9a281c6a1c389 Mon Sep 17 00:00:00 2001
From: "T. Andrew Manning" <manninga@illinois.edu>
Date: Tue, 26 Jan 2021 14:16:09 -0600
Subject: [PATCH] static world map demo loads in tilefinder app

---
 package-lock.json                          | 35 ++++++++++++++++++++++
 package.json                               |  3 ++
 src/components/des-pages/des-tilefinder.js |  8 ++++-
 3 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index a31997b..5b17e7a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -668,6 +668,36 @@
         "@polymer/polymer": "^3.0.0"
       }
     },
+    "@d3/world-map": {
+      "version": "https://api.observablehq.com/@d3/world-map.tgz?v=3",
+      "integrity": "sha512-s/f00LCQlfaJhoPdk7Id+k4fiUKnX9J9eQMS6DUQzqJCPdn1yOA8lq+UAbwz7T8QPdJxylQEGcLZGk9m+Y+Dbg=="
+    },
+    "@observablehq/how-to-embed-a-notebook-in-a-react-app": {
+      "version": "https://api.observablehq.com/@observablehq/how-to-embed-a-notebook-in-a-react-app.tgz?v=3",
+      "integrity": "sha512-g4tqkQRrA8vlpVQMV1uN+WB9fxeU2KlsVM57MGwJyIpKtRvlwWucPWYc4vt+Zuhden8LYneY4MnoSCHOLTbmfQ=="
+    },
+    "@observablehq/inspector": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@observablehq/inspector/-/inspector-3.2.2.tgz",
+      "integrity": "sha512-HBHtruB7hcNqyapyNF77fPVpiCyqEZsmLD6rhCy7nHPaciAEPML4NtQG2QBuTkYlEu64Zulky6g3ABrD0PhX2Q=="
+    },
+    "@observablehq/runtime": {
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/@observablehq/runtime/-/runtime-4.8.2.tgz",
+      "integrity": "sha512-wik8Uu92a7w3/cS8r69oHLyHTuZgVGNc+eIz0UwOi10dfpquMC0BzG8AbZzMQQEr1EryxSqNvALFY+vf199dww==",
+      "requires": {
+        "@observablehq/inspector": "^3.2.2",
+        "@observablehq/stdlib": "^3.4.1"
+      }
+    },
+    "@observablehq/stdlib": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@observablehq/stdlib/-/stdlib-3.4.1.tgz",
+      "integrity": "sha512-v0aoQV3e2NphWvkJC/jDI60bV4Nvwy8XD7PFZdzBZYmcQt/cO1ly7TVRZTHGljXdK5e7W6blFY6lNgevUwfrNw==",
+      "requires": {
+        "d3-require": "^1.2.4"
+      }
+    },
     "@polymer/app-layout": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@polymer/app-layout/-/app-layout-3.1.0.tgz",
@@ -3557,6 +3587,11 @@
         "type": "^1.0.1"
       }
     },
+    "d3-require": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/d3-require/-/d3-require-1.2.4.tgz",
+      "integrity": "sha512-8UseEGCkBkBxIMouLMPONUBmU8DUPC1q12LARV1Lk/2Jwa32SVgmRfX8GdIeR06ZP+CG85YD3N13K2s14qCNyA=="
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
diff --git a/package.json b/package.json
index 8a09b2c..c0857e9 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,9 @@
   },
   "dependencies": {
     "@cwmr/paper-password-input": "^3.0.1",
+    "@d3/world-map": "https://api.observablehq.com/@d3/world-map.tgz?v=3",
+    "@observablehq/how-to-embed-a-notebook-in-a-react-app": "https://api.observablehq.com/@observablehq/how-to-embed-a-notebook-in-a-react-app.tgz?v=3",
+    "@observablehq/runtime": "^4.8.2",
     "@polymer/app-layout": "^3.0.0",
     "@polymer/iron-ajax": "^3.0.1",
     "@polymer/iron-icon": "^3.0.1",
diff --git a/src/components/des-pages/des-tilefinder.js b/src/components/des-pages/des-tilefinder.js
index 17e25bd..29a8665 100644
--- a/src/components/des-pages/des-tilefinder.js
+++ b/src/components/des-pages/des-tilefinder.js
@@ -21,6 +21,10 @@ import { SharedStyles } from '../styles/shared-styles.js';
 import {config} from '../des-config.js';
 import { store } from '../../store.js';
 
+import {Runtime, Inspector} from "@observablehq/runtime";
+// import notebook from "@observablehq/how-to-embed-a-notebook-in-a-react-app";
+import notebook from "@d3/world-map";
+
 class DESTileFinder extends connect(store)(PageViewElement) {
 
   static get styles() {
@@ -301,6 +305,7 @@ class DESTileFinder extends connect(store)(PageViewElement) {
     return html`
     <div>
       <section>
+        <div id="observable"></div>
         <div style="font-size: 2rem; font-weight: bold;">
           DES TileFinder
           <paper-spinner class="big"></paper-spinner>
@@ -370,8 +375,9 @@ class DESTileFinder extends connect(store)(PageViewElement) {
         this._submit('name');
       }
     };
+    new Runtime().module(notebook, Inspector.into(this.shadowRoot.querySelector('#observable')));
   }
-
+  
   _getFiles(event,release){
     this.release = release.toLowerCase();