EngraftComponent = ({__element, parameters}) => {
const [outputState, setOutputState] = React.useState(null);
const [outputP, setOutputP] = React.useState(null);
const [ext, setExt] = React.useState(false)
const [version, setVersion] = React.useState(null);
const order = useOrder(__element) || -1 // fallback value when useOrder fails on startup
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]);
const channel = new MessageChannel()
React.useEffect(()=>{
// MessageChannel Extension Check
window.parent.postMessage({source: "observable-writer", type:'engraft-check', order: order},"*",[channel.port2]);
channel.port1.onmessage = (e) => {
setVersion(e.data.version)
setExt(true)
};
},[order])
useObservableValue(__element, valueP);
return jsx`
<${engraftHostObservable.ObservableEmbed}
reportOutputState=${setOutputState}
reportOutputP=${setOutputP}
parameters=${parameters}
order=${order}
extension=${ext}
version=${version}
/>
`;
}
engraft = function (self, parameters) {
return render(EngraftComponent, {parameters}, self);
}
import {render, jsx, useObservableValue} with {React, ReactDOM}from'@joshuahhh/react'
viewof num = Inputs.range([0,10])
Inputs.bind(Inputs.range([0,10]), viewof n)
viewof n=engraft(this,{inputs:{num},program:{'toolName':'slot','modeName':'tool','subProgram':{'toolName':'notebook','cells':[{'var_':{'id':'IDgas429883','label':'A'},'program':{'toolName':'slot','modeName':'tool','subProgram':{'toolName':'notebook','cells':[{'var_':{'id':'IDgas429883','label':'A'},'program':{'toolName':'slot','modeName':'tool','subProgram':{'toolName':'notebook','cells':[{'var_':{'id':'IDgas429883','label':'A'},'program':{'toolName':'slot','modeName':'tool','subProgram':{'toolName':'notebook','cells':[{'var_':{'id':'IDgas429883','label':'A'},'program':{'toolName':'slot','modeName':'tool','subProgram':{'toolName':'notebook','cells':[{'var_':{'id':'IDgas429883','label':'A'},'program':{'toolName':'slot','modeName':'code','code':'88','subPrograms':{},'defaultCode':''}}],'prevVarId':'IDrisk200457'},'defaultCode':''}}],'prevVarId':'IDrisk200457'},'defaultCode':''}}],'prevVarId':'IDrisk200457'},'defaultCode':''}}],'prevVarId':'IDrisk200457'},'defaultCode':''}}],'prevVarId':'IDrisk200457'},'defaultCode':''}});
viewof n2=engraft(this,{inputs:{num},program:{'toolName':'slot','modeName':'tool','subProgram':{'toolName':'notebook','cells':[{'var_':{'id':'IDgas429883','label':'A'},'program':{'toolName':'slot','modeName':'tool','subProgram':{'toolName':'notebook','cells':[{'var_':{'id':'IDgas429883','label':'A'},'program':{'toolName':'slot','modeName':'tool','subProgram':{'toolName':'notebook','cells':[{'var_':{'id':'IDgas429883','label':'A'},'program':{'toolName':'slot','modeName':'tool','subProgram':{'toolName':'notebook','cells':[{'var_':{'id':'IDgas429883','label':'A'},'program':{'toolName':'slot','modeName':'code','code':'IDnum000000','subPrograms':{},'defaultCode':''}}],'prevVarId':'IDrisk200457'},'defaultCode':''}}],'prevVarId':'IDrisk200457'},'defaultCode':''}}],'prevVarId':'IDrisk200457'},'defaultCode':''}}],'prevVarId':'IDrisk200457'},'defaultCode':''}});
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.
