Public
Edited
Oct 27, 2023
1 fork
Importers
engraftHostObservable = import(await FileAttachment("engraft-host-observable@4.js").url())
React = engraftHostObservable.React
ReactDOM = engraftHostObservable.ReactDOM
import { render, jsx, useObservableValue } with { React, ReactDOM } from '@joshuahhh/react'
EngraftComponent = ({ key, inputs, hide, __element }) => {
const [outputState, setOutputState] = React.useState(null);
const [outputP, setOutputP] = React.useState(null);
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);
const localStorageKey = `observable-embed-${key}`;
return jsx`
<${engraftHostObservable.ObservableEmbed}
reportOutputState=${setOutputState}
reportOutputP=${setOutputP}
inputs=${inputs}
localStorageKey=${localStorageKey}
hide=${hide}
/>
<div style=${{height: 10}}/>
`;
}
engraft = function (key, inputs, self) {
return render(EngraftComponent, {key, inputs}, self);
}
viewof number = Inputs.range([0, 10], {label: "Amount", step: 1})
viewof numberSquared = engraft('numberSquared', {number}, this, {"toolName":"notebook","cells":[{"var_":{"id":"IDhare654374","label":"A"},"program":{"toolName":"slot","modeName":"code","code":"IDnumber000000 ** 2","defaultCode":"IDa000000","subPrograms":{}}}],"prevVarId":"IDsloop027769"})
numberCubed = numberSquared * number
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.
