html`${viewof cell_bar}<br>
${viewof trx_bar}<br>
${viewof img_bar}<br>`
viewof cell_bar = {
const cell_bar = Inputs.text({
label: "Cell Category",
value: obs_state.cell_cat.get()
});
// Input → Observable
cell_bar.addEventListener("input", () => {
obs_state.cell_cat.set(cell_bar.value);
});
// Shared subscriber callback
const maybeResetCellBar = () => {
if (obs_state.cell_cat.get() !== obs_state.cell_cat.getDefault()) {
cell_bar.querySelector("input").value = obs_state.cell_cat.getDefault();
}
};
// Subscriptions that might trigger a reset
obs_state.trx_cat.subscribe(maybeResetCellBar);
obs_state.img_cat.subscribe(maybeResetCellBar);
return cell_bar;
}
viewof trx_bar = {
const trx_bar = Inputs.text({
label: "Trx Category",
value: obs_state.trx_cat.get()
});
// Input → Observable
trx_bar.addEventListener("input", () => {
obs_state.trx_cat.set(trx_bar.value);
});
// Shared subscriber callback
const maybeResetTrxBar = () => {
if (obs_state.trx_cat.get() !== obs_state.trx_cat.getDefault()) {
trx_bar.querySelector("input").value = obs_state.trx_cat.getDefault();
}
};
// Subscriptions that might trigger a reset
obs_state.cell_cat.subscribe(maybeResetTrxBar);
obs_state.img_cat.subscribe(maybeResetTrxBar);
return trx_bar;
}
viewof img_bar = {
const img_bar = Inputs.text({
label: "Image Category",
value: obs_state.img_cat.get()
});
// Input → Observable
img_bar.addEventListener("input", () => {
obs_state.img_cat.set(img_bar.value);
});
// Shared subscriber callback
const maybeResetImgBar = () => {
if (obs_state.img_cat.get() !== obs_state.img_cat.getDefault()) {
img_bar.querySelector("input").value = obs_state.img_cat.getDefault();
}
};
// Subscriptions that might trigger a reset
obs_state.cell_cat.subscribe(maybeResetImgBar);
obs_state.trx_cat.subscribe(maybeResetImgBar);
return img_bar;
}
obs_state.cell_cat.get()
obs_state.trx_cat.get()
obs_state.img_cat.get()
function Observable(initialValue) {
let value = initialValue;
const subscribers = new Set();
return {
get: () => value,
getDefault: () => initialValue,
set: newValue => {
if (value !== newValue) {
value = newValue;
subscribers.forEach(fn => fn(value));
}
},
subscribe: fn => {
subscribers.add(fn);
fn(value); // Call immediately with current value
return () => subscribers.delete(fn); // Unsubscribe function
}
};
}
obs_state = ({
cell_cat: Observable("default cell cat"),
trx_cat: Observable("default trx cat"),
img_cat: Observable("default img cat"),
})
import { Inputs } from "@observablehq/inputs";
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
