Skip to content

Commit e7ae456

Browse files
rdhyeeclaude
andcommitted
Fix button rendering with Observable html template
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>
1 parent 5cdb9b0 commit e7ae456

File tree

1 file changed

+19
-5
lines changed

1 file changed

+19
-5
lines changed

tutorials/parquet_cesium.qmd

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,25 @@ viewof searchGeoPid = Inputs.text({
4848
```
4949

5050
```{ojs}
51-
//| echo: fenced
52-
viewof classifyDots = Inputs.button("Color-code by type (sample/site/both)", {
53-
value: null,
54-
reduce: () => Date.now()
55-
})
51+
//| echo: false
52+
// Simple trigger variable that increments on button click
53+
viewof classifyTrigger = {
54+
let count = 0;
55+
const button = html`<button
56+
style="padding: 8px 16px; margin: 10px 0; background: #2E86AB; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;">
57+
🎨 Color-code by type (sample/site/both)
58+
</button>`;
59+
button.onclick = () => {
60+
count++;
61+
button.value = count;
62+
button.dispatchEvent(new CustomEvent("input"));
63+
};
64+
button.value = count;
65+
return button;
66+
}
67+
68+
// Alias for handler compatibility
69+
classifyDots = classifyTrigger > 0 ? classifyTrigger : null
5670
```
5771

5872
::: {.callout-tip collapse="true"}

0 commit comments

Comments
 (0)