engraftHostObservable = import(await FileAttachment("engraft-host-observable@14.js").url())
React = engraftHostObservable.React
ReactDOM = engraftHostObservable.ReactDOM
import {render, jsx, useObservableValue } with {React, ReactDOM}from'@joshuahhh/react'
EngraftComponent = ({ key, inputs, __element, programString, hide}) => {
const [outputState, setOutputState] = React.useState(null);
const [outputP, setOutputP] = React.useState(null);
const order = useOrder(__element)
const valueP = React.useMemo(() => {
if (!outputP) {
// Hangs
// return new Promise(() => {});
return undefined;
}
return outputP
.then(output => output.value)
.catch(() => {
// For some reason we're having trouble recovering from errors.
// So just use unresolved promises.
// return new Promise(() => {});
// That doesn't work. Just use undefined.
// (See https://github.com/observablehq/feedback/issues/569)
return undefined;
});
}, [outputP]);
useObservableValue(__element, valueP);
return jsx`
<${engraftHostObservable.ObservableExtEmbed}
reportOutputState=${setOutputState}
reportOutputP=${setOutputP}
inputs=${inputs}
programString=${programString}
hide=${hide}
/>
<div style=${{height: 10}}/>
<div>${order}</div>
`;
}
engraft = function (key, inputs, self, programString, hide = false) {
return render(EngraftComponent, {key, inputs, programString, hide}, self);
}
viewof number = Inputs.range([0, 10], {label: "Amount", step: 1})
viewof numberSquared = engraft('numberSquared', {a:number}, this, {"toolName":"slot","modeName":"tool","subProgram":{"toolName":"notebook","cells":[{"var_":{"id":"IDturtle565316","label":"A"},"program":{"toolName":"slot","modeName":"code","code":"IDa000000","defaultCode":"","subPrograms":{}}},{"var_":{"id":"IDcough663826","label":"B"},"program":{"toolName":"slot","modeName":"code","code":"IDmice742767**2","defaultCode":"IDmice742767","subPrograms":{}}},{"var_":{"id":"IDclose000286","label":"C"},"program":{"toolName":"slot","modeName":"tool","subProgram":{"toolName":"map","inputProgram":{"toolName":"slot","modeName":"code","code":"[\"hi\", IDturtle565316, IDcough663826]","defaultCode":"IDmice742767","subPrograms":{}},"itemVar":{"id":"IDlyre949404","label":"item"},"perItemProgram":{"toolName":"slot","modeName":"code","code":"IDlyre949404","defaultCode":"IDlyre949404","subPrograms":{}}},"defaultCode":"IDmice742767"}}],"prevVarId":"IDmice742767"},"defaultCode":""},false)
numberCubed = numberSquared * number
import {makeUseOrder} from "160a5b92d40690a2"
useOrder = makeUseOrder(React)
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.
