From e7ae456aecb334d92083c81cfcad3844668d1a01 Mon Sep 17 00:00:00 2001
From: Raymond Yee <raymond.yee@gmail.com>
Date: Sat, 1 Nov 2025 09:50:08 -0700
Subject: [PATCH] Fix button rendering with Observable html template
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace Inputs.button() with html template literal to fix rendering issues:
- Button was showing as black box
- Code block visible despite echo directives

Solution uses viewof + CustomEvent pattern for Observable reactivity.
Button now renders properly and triggers classification handler.

Tested locally - button displays correctly and functions as expected.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 tutorials/parquet_cesium.qmd | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/tutorials/parquet_cesium.qmd b/tutorials/parquet_cesium.qmd
index 8596a69..0f271b2 100644
--- a/tutorials/parquet_cesium.qmd
+++ b/tutorials/parquet_cesium.qmd
@@ -48,11 +48,25 @@ viewof searchGeoPid = Inputs.text({
 ```
 
 ```{ojs}
-//| echo: fenced
-viewof classifyDots = Inputs.button("Color-code by type (sample/site/both)", {
-  value: null,
-  reduce: () => Date.now()
-})
+//| echo: false
+// Simple trigger variable that increments on button click
+viewof classifyTrigger = {
+  let count = 0;
+  const button = html`<button
+    style="padding: 8px 16px; margin: 10px 0; background: #2E86AB; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;">
+    🎨 Color-code by type (sample/site/both)
+  </button>`;
+  button.onclick = () => {
+    count++;
+    button.value = count;
+    button.dispatchEvent(new CustomEvent("input"));
+  };
+  button.value = count;
+  return button;
+}
+
+// Alias for handler compatibility
+classifyDots = classifyTrigger > 0 ? classifyTrigger : null
 ```
 
 ::: {.callout-tip collapse="true"}