Add set_height method to set the height of the iframe

eptium/widget.py

@@ -33,15 +33,42 @@ class Eptium(DOMWidget, ValueWidget):
 
     # read-write attributes
     src = Unicode('https://viewer.copc.io').tag(sync=True)
+    height = Unicode('400px').tag(sync=True)
 
     def __init__(
         self,
         src="https://viewer.copc.io",
     ):
         super().__init__()
         self.src = src
+        self.height
+
+    def set_height(self, value: int | str):
+        """Set the height of the Eptium View
+
+        Parameters
+        ----------
+        value : int | str
+            Accepted values are used to set the ``height`` attribute
+            of an iframe. 
+
+        Examples
+        --------
+        >>> widget.set_height('200px')
+        """
+        if isinstance(value, int):
+            value = str(value)
+        self.height = value
 
     def render(self, path: str | pathlib.Path):
+        """Method to call to generate the Eptium View
+
+        Parameters
+        ----------
+        path : str | pathlib.Path
+            Path to the asset that Eptium should display. Acceptable
+            values include local file paths, or URLs to 
+        """
         if isinstance(path, pathlib.Path):
             # not using os.fsdecode since we want forward-slashes
             # even on windows

examples/introduction.ipynb

@@ -0,0 +1,69 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Introduction"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import eptium"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "8eece08bcb794136ae4749c6759ff79c",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "Eptium(value=None, height='200px', src='https://viewer.copc.io/?q=https://s3.amazonaws.com/hobu-lidar/autzen-c…"
+      ]
+     },
+     "execution_count": 2,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "w = eptium.Eptium()\n",
+    "w.render(\"https://s3.amazonaws.com/hobu-lidar/autzen-classified.copc.laz\")\n",
+    "w.set_height('200px')\n",
+    "w"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.10.15"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

src/widget.ts

@@ -45,15 +45,18 @@ export class EptiumView extends DOMWidgetView {
   render() {
     this._iframe = document.createElement('iframe');
     this._iframe.width = '100%';
-    this._iframe.height = '400';
     this._iframe.style.boxSizing = 'border-box';
 
+    // Get the right right
+    this._onHeightChanged();
+
     // this.el is the DOM element associated with the view
     this.el.appendChild(this._iframe);
     this._onSrcChanged();
 
     // Python -> TypeScript update
     this.model.on('change:src', this._onSrcChanged, this);
+    this.model.on('change:height', this._onHeightChanged, this);
   }
 
   private _onSrcChanged() {
@@ -62,4 +65,9 @@ export class EptiumView extends DOMWidgetView {
       this._iframe.src = resolvedUrl;
     });
   }
+
+  private _onHeightChanged() {
+    const height = this.model.get('height');
+    this._iframe.height = height;
+  }
 }