Add direct client methodology and e2e results (#8)

* Restructure direct-client section

* Add e2e results

* Update direct-client

* Add more info to methods and results

_quarto.yml

@@ -28,7 +28,7 @@ website:
       - href: index.qmd
         text: Welcome
       - section: approaches/index.qmd
-        contents:   
+        contents: 
           - section: approaches/tiling.qmd
             contents:
             - approaches/tiling/benchmarking-methodology.qmd
@@ -40,7 +40,12 @@ website:
               - approaches/tiling/e2e-results.ipynb
             - approaches/tiling/recommendations.md
             - approaches/tiling/future-areas.md
-          - section: approaches/direct-client.md            
+          - section: approaches/direct-client.qmd
+            contents:
+            - approaches/direct-client/benchmarking-methodology.qmd
+            - approaches/direct-client/e2e-results.ipynb
+            - approaches/direct-client/recommendations.qmd
+            - approaches/direct-client/future-areas.qmd         
 
 
 

approaches/direct-client.md → approaches/direct-client.qmd

@@ -1,8 +1,8 @@
-# Direct Client
+---
+title: "Direct Client"
+---
 
-## Introduction
-
-Traditional approaches to rendering raster datasets in the browser involve the creation of tiles in a pixelated impact format like PNG or JPEG. These tiles can be pre-generated or created by a tiling server on demand, as described in the [tiling approach chapter](tiling.md). While the image tiles are fast to load and easy to render, tiling offers limited flexibility for dynamically customizing visualizations based on user input. In contrast, the direct client approach leverages Zarr to render the data directly using WebGL rather than through an intermediate layer. The Zarr format is ideal for direct rendering in the browser because the chunks of a Zarr dataset serve a similar purpose to the tiles of a web map. In additional, data can be chunked across additional dimensions which prevents the need for generating individual tiles per time step. Lastly, as a cloud-optimized data format Zarr allows for fast, parallel reading and writing from object storage.
+Traditional approaches to rendering raster datasets in the browser involve the creation of tiles in a pixelated impact format like PNG or JPEG. These tiles can be pre-generated or created by a tiling server on demand, as described in the [tiling approach chapter](tiling.qmd). While the image tiles are fast to load and easy to render, tiling offers limited flexibility for dynamically customizing visualizations based on user input. In contrast, the direct client approach leverages Zarr to render the data directly using WebGL rather than through an intermediate layer. The Zarr format is ideal for direct rendering in the browser because the chunks of a Zarr dataset serve a similar purpose to the tiles of a web map. In additional, data can be chunked across additional dimensions which prevents the need for generating individual tiles per time step. Lastly, as a cloud-optimized data format Zarr allows for fast, parallel reading and writing from object storage.
 
 The direct client approach leverages pyramids created with the [ndpyramid](https://github.com/carbonplan/ndpyramid) package for performant rendering of data at multiple zoom levels. The approach loads Zarr V2 or V3 data using the [zarr-js](https://github.com/freeman-lab/zarr-js) JavaScript library and renders the fetched chunks via WebGL using the [regl](https://github.com/regl-project/regl) library. The open-source library called [@carbonplan/maps](https://github.com/carbonplan/maps) provides a small set of React components for rendering raster data using this approach and supports rendering traditional vector layers side-by-side using `mapbox-gl-js`. 
 

approaches/direct-client/benchmarking-methodology.qmd

@@ -0,0 +1,41 @@
+---
+title: Benchmarking Methodology
+---
+
+## End-to-End Benchmarks
+
+The end-to-end benchmarks capture the user experience in response to different actions. The suite of benchmarks included in this cookbook are designed to inform how the choice of Zarr versions and chunking schemes influence the user experience.
+
+### End-to-End Benchmarks: Datasets
+
+
+### End-to-End Benchmarks: Approach
+
+CarbonPlan's [benchmark-maps](https://github.com/carbonplan/benchmark-maps) repository leverages [Playwright](https://playwright.dev/python/) for the end-to-end performance benchmarks. By default, the benchmarks are run on [https://prototype-maps.vercel.app/](https://prototype-maps.vercel.app/) although the url is configurable. The frame below shows this domain after selecting an approach, Zarr version, and dataset.
+
+The benchmarking script takes the following steps:
+
+1. Launch chromium browser 
+2. Create a new page
+3. Start chromium tracing
+4. Select Zarr version in the dropdown
+5. Select Dataset in the dropbown
+6. Wait 5 seconds for the page the render
+7. Zoom in a defined number of times, waiting 5 seconds after each action
+8. Write out metadata about each run and the trace record
+
+The frame rate and request information are extracted from the resultant metadata and trace records. The completion time for each zoom level is determined by comparing the screen captures in the trace record to the expected result for each zoom level.
+
+
+```{=html}
+<iframe
+  style='transform: scale(0.5); transform-origin: top left;'
+  id="inlineFrameExample"
+  title="Inline Frame Example"
+  width="1440"
+  height="1055"
+  src="https://prototype-maps.vercel.app/direct-client/v2/1MB-chunks"
+>
+</iframe>
+```
+