Public
Edited
Jun 3
1 fork
container = html `<div style="height:300px"></div>`
html`
${viewof dropdown_cell}<br>
${viewof dropdown_gene}<br>
${viewof dropdown_img}<br>`
// obs_state.dropdown_cell.set('blue')
// update deck when newLayer is changed (to anything)
{
obs_state.newLayer.subscribe(() => {
const newScatterplotLayer = scatterplotLayer.clone({
id: 'cells-' + obs_state.dropdown_cell.get()
})
deckgl.setProps({
layers: [newScatterplotLayer],
})
})
}
scatterplotLayer = {
return new deck.ScatterplotLayer({
id: 'cells-all',
data: [
{position: [-122.402, 37.79], color: [255, 0, 0], radius: 100, name: 'red'},
{position: [-122.399, 37.79], color: [0, 0, 255], radius: 100, name: 'blue'},
{position: [-122.396, 37.79], color: [0, 0, 0], radius: 100, name: 'black'},
],
getPosition: d => d.position,
getColor: d => {
var inst_color
if (obs_state.dropdown_cell.get() === 'all'){
inst_color = d.color
} else {
if (obs_state.dropdown_cell.get() === d.name)
inst_color = d.color
else {
inst_color = [0, 0, 0, 50]
}
}
return inst_color
},
getRadius: d => d.radius,
opacity: 0.3,
pickable: true,
onClick: d => {
if (obs_state.dropdown_cell.get() !== d.object.name){
obs_state.dropdown_cell.set(d.object.name)
} else {
obs_state.dropdown_cell.set(obs_state.dropdown_cell.getDefault())
}
// say that a new layer needs to be made
obs_state.newLayer.set([])
}
});
}
deckgl.setProps({
layers: [scatterplotLayer],
controller: { doubleClickZoom: false },
initialViewState: {
longitude: -122.402,
latitude: 37.79,
zoom: 15,
pitch: 0,
bearing: 0,
},
})
deckgl = new deck.DeckGL({
container,
controller: true,
})
deck = require.alias({
// optional dependencies
h3: {}
})('deck.gl@latest/dist.min.js')
viewof dropdown_cell = makeResettableDropdown({
key: "dropdown_cell",
label: "Dropdown Cell",
options: ["all", "blue", "red", "black"],
resetTriggers: ["dropdown_gene", "dropdown_img"],
obs_state
})
viewof dropdown_gene = makeResettableDropdown({
key: "dropdown_gene",
label: "Dropdown Gene",
options: ["all", "CD3E", "CD19", "CD68"],
resetTriggers: ["dropdown_cell", "dropdown_img"],
obs_state
})
viewof dropdown_img = makeResettableDropdown({
key: "dropdown_img",
label: "Dropdown Image",
options: ["all", "DAPI", "protein", "rna"],
resetTriggers: ["dropdown_cell", "dropdown_gene"],
obs_state
})
function makeResettableDropdown({ key, label, options, resetTriggers, obs_state }) {
const dropdown = Inputs.select(options, {
label,
value: obs_state[key].getDefault()
});
// Input → Observable
dropdown.addEventListener("input", () => {
// console.log(`user input: ${key}:`, dropdown.value);
obs_state[key].set(dropdown.value);
obs_state.newLayer.set([])
// console.log("");
});
// Observable → Input
obs_state[key].subscribe(val => {
if (dropdown.value !== val) {
dropdown.value = val;
// console.log(`obs input: ${key}:`, val);
}
});
// Reset if triggered by another dropdown
const resetIfNeeded = () => {
if (obs_state.suppressReset.get()) {
// console.log(`suppressed: ${key}`);
return;
}
if (obs_state[key].get() !== obs_state[key].getDefault()) {
obs_state.suppressReset.set(true);
// console.log(`suppressReset: ${key}: on`);
obs_state[key].set(obs_state[key].getDefault());
obs_state.suppressReset.set(false);
// console.log(`suppressReset: ${key}: off`);
} else {
// console.log(`already default: ${key}`);
}
};
// set subscribe function
for (const triggerKey of resetTriggers) {
obs_state[triggerKey].subscribe(resetIfNeeded);
}
return dropdown;
}
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 = ({
dropdown_cell: Observable("all"),
dropdown_gene: Observable("all"),
dropdown_img: Observable("all"),
suppressReset: Observable(false),
newLayer: Observable([])
})
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.
