engraft = function (self, parameters) {
return render(EngraftComponent, {parameters}, self);
}
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]);
React.useEffect(()=>{
// MessageChannel Extension Check
const channel = new MessageChannel() // initialize channel
window.parent.postMessage({source: "observable-writer", type:'engraft-check'},"*",[channel.port2]);
channel.port1.onmessage = (e) => {
setVersion(e.data.version)
setExt(true)
};
},[order])
useObservableValue(__element, valueP);
return jsx`
<${engraftObservableHost.ObservableEmbed}
reportOutputState=${setOutputState}
reportOutputP=${setOutputP}
parameters=${parameters}
order=${order}
extensionDetected=${ext}
version=${version}
/>
`;
}
engraftObservableHost = import(await FileAttachment("engraft-observable-host.js").url())
React = engraftObservableHost.React
ReactDOM = engraftObservableHost.ReactDOM
import {makeUseOrder} from "160a5b92d40690a2"
useOrder = makeUseOrder(React)
import {render, jsx, useObservableValue} with {React, ReactDOM}from'@joshuahhh/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.
