Country dropdown (#5)

Co-authored-by: Benjamin Szeghy <benjamin.szeghy@berkeley.edu>

Author: mfisher87

prototype_gui2cell/data/ne_110m_admin_0_countries.geojson

@@ -1,9 +1,16 @@
+from pathlib import Path
+
 from ipywidgets import DOMWidget
 from traitlets import Unicode
 
 MODULE_NAME = "prototype-gui2cell"
 MODULE_VERSION = "^0.1.0"
 
+ADMIN_BOUNDARIES_GEOJSON_FILE = (
+    Path(__file__).parent / "data" / "ne_110m_admin_0_countries.geojson"
+)
+ADMIN_BOUNDARIES_GEOJSON = ADMIN_BOUNDARIES_GEOJSON_FILE.read_text()
+
 
 class Gui2CellWidget(DOMWidget):
     # TODO: Set module name and version
@@ -15,3 +22,7 @@ class Gui2CellWidget(DOMWidget):
     _view_module_version = Unicode(MODULE_VERSION).tag(sync=True)
 
     value = Unicode("Hello World").tag(sync=True)
+
+    # Probably no good reason to pass this data from Python to JS...
+    # Only needs to be synced unidirectionally, do we need the sync tag?
+    admin_boundaries_geojson = Unicode(ADMIN_BOUNDARIES_GEOJSON).tag(sync=True)

prototype_gui2cell/widget.py

@@ -23,6 +23,7 @@ classifiers = [
     "Programming Language :: Python :: 3.14",
 ]
 dependencies = [
+    "ipyleaflet>=0.20.0",
     "ipywidgets>=8.1.8",
     "traitlets>=5.14.3",
 ]

pyproject.toml

@@ -42,32 +42,62 @@ export class ExampleModel extends DOMWidgetModel {
 export class ExampleView extends DOMWidgetView {
   static tracker: INotebookTracker;
 
+  private select!: HTMLSelectElement;
   private button!: HTMLButtonElement;
   private textarea!: HTMLTextAreaElement;
 
   render() {
+    // TODO: Type as GeoJSON (@types/geojson)
+    const adminBoundariesGeoJson: any = JSON.parse(
+      this.model.get('admin_boundaries_geojson')
+    );
+    const countries = adminBoundariesGeoJson['features']
+      .map((f: any) => f['properties']['NAME'] as string)
+      .sort();
+
     this.textarea = document.createElement('textarea');
     this.textarea.value = this.model.get('value');
 
     this.button = document.createElement('button');
-    this.button.textContent = 'test'; //this.model.get('value');
+    this.button.textContent = 'Export to Python code cell';
+
+    this.select = document.createElement('select');
+    for (const country of countries) {
+      const option = document.createElement('option');
+      option.textContent = country;
+      this.select.appendChild(option);
+    }
+
+    const notebook = ExampleView.tracker?.currentWidget?.content;
 
     this.button.onclick = () => {
-      const notebook = ExampleView.tracker?.currentWidget?.content;
       if (!notebook?.model) {
         return;
-      }
+      } // Should never happen; just a typeguard
+
+      const geoJson = adminBoundariesGeoJson['features'].find(
+        (f: any) => f['properties']['NAME'] === this.select.value
+      );
+      const codeCellContents =
+        `print('${String(this.textarea.value)}')\n` +
+        'from ipyleaflet import Map, GeoJSON\n' +
+        'import json\n' +
+        'm = Map()\n' +
+        `m.add(GeoJSON(data=json.loads("""${JSON.stringify(geoJson)}""")))\n` +
+        'm';
+
       notebook.model.sharedModel.insertCell(
         notebook.widgets.findIndex(cell => cell.node.contains(this.el)) + 1,
         {
           cell_type: 'code',
-          source: "print('" + String(this.textarea.value) + "')",
+          source: codeCellContents,
           metadata: {}
         }
       );
     };
 
     this.el.appendChild(this.textarea);
+    this.el.appendChild(this.select);
     this.el.appendChild(this.button);
     this.el.classList.add('custom-widget');
     this.model.on('change:value', this.value_changed, this);

src/widget.ts

@@ -1,15 +1,5 @@
 {
  "cells": [
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "f02609c1-d2ec-452a-8217-4125d8dcbb52",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "1 + 1"
-   ]
-  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -20,26 +10,8 @@
     "from prototype_gui2cell import Gui2CellWidget\n",
     "\n",
     "w = Gui2CellWidget()\n",
-    "w  # Hello world!"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "e6312644-d1fd-4f0a-99e0-3b543bd417c7",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "w.value = \"Foo\"  # This should update the widget text"
+    "w"
    ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "0a44bf30-6583-4f02-b31b-922b1119a4e2",
-   "metadata": {},
-   "outputs": [],
-   "source": []
   }
  ],
  "metadata": {
@@ -58,7 +30,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.12.3"
+   "version": "3.14.0"
   }
  },
  "nbformat": 4,