Fix classification button visibility

[rdhyee]

Problem

The "Color-code by type (sample/site/both)" button from PR #33 wasn't appearing on the live site.

Root Cause

Using //| echo: false on the viewof classifyDots cell was preventing the Observable runtime from properly rendering the button UI. The cell existed in the DOM but was empty:

<div id="ojs-cell-4" data-nodetype="declaration">
</div>

Solution

Changed from //| echo: false to //| echo: fenced, which:

• Shows the code in a collapsible fence (like other code blocks)
• Ensures the button UI renders properly in the Observable runtime
• Maintains clean UX (code can be hidden by default if desired)

Changes

File: tutorials/parquet_cesium.qmd (lines 51-56)

Before:

//| echo: false
viewof classifyDots = Inputs.button("Color-code by type (sample/site/both)", {
  value: null,
  reduce: () => Date.now()
});

After:

//| echo: fenced
viewof classifyDots = Inputs.button("Color-code by type (sample/site/both)", {
  value: null,
  reduce: () => Date.now()
})

Testing

After deployment, verify at https://isamples.org/tutorials/parquet_cesium.html:

• Button appears below the "Jump to Geocode" search box
• Clicking button triggers classification query (~7 seconds)
• Dots recolor: blue (sample locations), purple (site markers), orange (both)
• Console shows: "Classification completed in XXXXms"

Impact

This restores the key performance optimization UX from PR #33:

• Fast initial load with all blue dots (~2s)
• Optional classification via button click (~7s)
• User chooses whether to pay the classification cost

🤖 Generated with Claude Code