Smart People. Smart Cloud.
Public
Edited
Nov 7, 2024
mutable state_data = ({})
viewof name = Inputs.text({value : state_data.name})
viewof description = Inputs.text({value : state_data.description})
viewof status = Inputs.text({value : state_data.status})
viewof load_template_data = Inputs.button("Load Template", {reduce: () => swap_data(template_data)});
viewof load_file_data = Inputs.button("Load File Data", {reduce: () => swap_data(file_data)});
function swap_data(data) {
mutable state_data = data;
return state_data
}
// If I don't have anything in local storage, I'll work from this template
template_data = ({
name: "Sample Project",
description: "Initial project data",
status: "active"
})
// Let's assume these are the data values after a change.
file_data = ({
name: "File Project",
description: "Changed project data",
status: "pending"
})
ephemeral_state = (function() {
const ephemeral_state = localStorage.getItem('state_data');
return ephemeral_state !== null && ephemeral_state !== 'null'
? mutable state_data = JSON.parse(ephemeral_state)
: mutable state_data = template_data;
})();
current_state = ({
name: name,
description: description,
status: status
})
viewof persist_current_state = Inputs.button("Persist Changed Data", {
reduce: () => {
localStorage.setItem('state_data', JSON.stringify(current_state)) }
})
download_name = "state_data"
DOM.download(serialize(current_state), download_name, "Download Current State")
function serialize (data) {
let s = JSON.stringify(data);
return new Blob([s], {type: "application/json"})
}
/// not updating mutable until intermediate action taken
viewof local_data = Inputs.file({
label : "Load Project",
multiple : false,
//reduce: (f) => swap_data(f.json()),
})
load_data = ({
name: "Load Project",
description: "Loaded project data",
status: "loaded"
})
// swap_data(local_data)
(async function(d) {
return d === null ? "pending file selection" : mutable state_data = await d.json();
})(local_data);
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.
