include performance statistics in console output of geoarrowDummyWidget

Author: Tim Appelhans

README.Rmd

@@ -37,7 +37,7 @@ remotes::install_github("r-spatial/geoarrowWidget")
 For testing purposes, `geoarrowWidget` provides a minimal `htmlwidget` called 
 `geoarrowDummyWidget`. Here's an example of how to use it:
 
-```r
+```{r, eval=FALSE}
 library(geoarrowWidget)
 library(wk)
 library(nanoarrow)
@@ -84,9 +84,21 @@ wgt
 
 This will create a web page with the data attached as a geoarrow object. 
 In the browser console (press F12) this will look something like this 
-(depending on the browser obviously, Librewolf in this case)
+(depending on the browser obviously, Librewolf in this case). You should see two
+entries:
+
+1. `Object` - the geoarrow data
+2. `PerformanceResourceTiming` - details about the performance of loading the data
+including `encodedBodySize` of the data in Bytes and `duration` in milliseconds.
+
+Another way to see how long it takes to load the data is to open the `Network` tab
+in the developer tools and refresh the page. 
 
 ![](man/figures/browser_console.png)
+_Note: the 200MB `encodedBodySize` and 375ms `duration` in the screenshot are the 
+result of running the above code with `1e7` points._
+
+<br>
 
 The page source (press <CTRL + u>) will look something like this, where in 
 line 11 you see the attached test.arrow file and above the necessary scripts 
@@ -96,7 +108,7 @@ line 11 you see the attached test.arrow file and above the necessary scripts
 
 <br>
 
-The general usage pattern is highlighted in [these lines of `geoarrowDummyWidget`](https://github.com/r-spatial/geoarrowWidget/blob/master/inst/htmlwidgets/geoarrowDummyWidget.js#L17-L30)
+The general usage pattern is highlighted in [these lines of `geoarrowDummyWidget`](https://github.com/r-spatial/geoarrowWidget/blob/master/inst/htmlwidgets/geoarrowDummyWidget.js#L33-L42)
 
 ### Acknowledgment
 

README.md

@@ -74,9 +74,22 @@ wgt
 
 This will create a web page with the data attached as a geoarrow object.
 In the browser console (press F12) this will look something like this
-(depending on the browser obviously, Librewolf in this case)
+(depending on the browser obviously, Librewolf in this case). You should
+see two entries:
 
-![](man/figures/browser_console.png)
+1.  `Object` - the geoarrow data
+2.  `PerformanceResourceTiming` - details about the performance of
+    loading the data including `encodedBodySize` of the data in Bytes
+    and `duration` in milliseconds.
+
+Another way to see how long it takes to load the data is to open the
+`Network` tab in the developer tools and refresh the page.
+
+![](man/figures/browser_console.png) *Note: the 200MB `encodedBodySize`
+and 375ms `duration` in the screenshot are the result of running the
+above code with `1e7` points.*
+
+<br>
 
 The page source (press \<CTRL + u\>) will look something like this,
 where in line 11 you see the attached test.arrow file and above the
@@ -88,7 +101,7 @@ further in JavaScript.
 <br>
 
 The general usage pattern is highlighted in [these lines of
-`geoarrowDummyWidget`](https://github.com/r-spatial/geoarrowWidget/blob/master/inst/htmlwidgets/geoarrowDummyWidget.js#L17-L30)
+`geoarrowDummyWidget`](https://github.com/r-spatial/geoarrowWidget/blob/master/inst/htmlwidgets/geoarrowDummyWidget.js#L33-L42)
 
 ### Acknowledgment
 

inst/htmlwidgets/geoarrowDummyWidget.js

@@ -11,12 +11,24 @@ HTMLWidgets.widget({
 
       renderValue: function(x) {
 
-        // TODO: code to render the widget, e.g.
-        el.innerText = x.message;
-
         // find data attachment
         let data_fl = document.getElementById(x.dataname + "-geoarrowWidget-attachment");
 
+        // timings to see how long it will take to fetch
+        // https://stackoverflow.com/a/66865354
+        let resourceObserver = new PerformanceObserver( (list) => {
+          list.getEntries()
+            // get only the one we're interested in
+            .filter( ({ name }) => name === data_fl.href )
+            .forEach( (resource) => {
+              console.log( resource );
+            } );
+          // Disconnect after processing the events.
+          resourceObserver.disconnect();
+        } );
+        // make it a resource observer
+        resourceObserver.observe( { type: "resource" } );
+
         // fetch and read data, then process as arrow table
         fetch(data_fl.href)
           .then(result => Arrow.tableFromIPC(result))
@@ -27,7 +39,9 @@ HTMLWidgets.widget({
 
             //debugger;
             console.log(arrow_table);
-          });
+          })
+
+        el.innerText = x.message;
 
       },