2a:null 2b:["$","title",null,{"children":"🗺 MapScript Notebook | Adam Bouhenguel | Observable"}] 30:T6ef,main = render(({useSetter}) => { const [layout, setLayout] = useState(initialLayout) const [title, setTitle] = useState(initialTitle) useSetter(layout) const onImport = useCallback((e) => doImport(e, {setLayout, setTitle}), [setLayout, setTitle, doImport]) const onExport = useCallback(() => doExport({layout, title}), [layout, title, doExport]) const onTitleChange = useCallback((e) => doTitleChange(e, setTitle) , [setTitle]) return jsx`

🗺

<${BreadLoaf} makeElement=${makeElement} makeSlice=${() => ( {type: 'console'} || {type: 'parallel-coordinates'} || {type: 'trellis'} || {type: 'inspector'} )} updateLayout=${(data, trigger, view) => { console.log("updateLayout", {data, trigger, view}) updateHashState({layout: data}) setLayout(data) }} finishAll=${() => { // console.log("on finishAll") }} onEntered=${() => { // console.log("on entered") }} onExited=${() => { // console.log("on exited") }} onMoved=${(n) => { instanceTable.findAll().forEach((instance) => instance.refresh && instance.refresh()) }} layout=${layout} footer=${Footer} />` })31:T7bc,makeElement = ({fork, close, beginDrag, view: {type, id, ...view}, layout, updateView}) => { const ref = useRef() const refLayout = useRef() refLayout.current = layout useLayoutEffect(() => { let entry = instanceTable.find(id) if (!entry) { entry = instanceTable.make(id, type) if (!entry) { throw new Error("can't make type: " + type) } } const {instance} = entry const {element, title} = instance view.title === title || updateView({title}) if (instance.mount) { instance.mount({view: {type, id, ...view}, updateView}) } const cur = ref.current if (cur.children[0] !== element) { if (cur.children[0]) { cur.replaceChild(element, cur.children[0]) } else { cur.appendChild(element) } } instance.refresh && setTimeout(() => instance.refresh(), 50) }); function headerMouseDown(e) { if (e.button !== 0) { e.preventDefault() e.stopPropagation() return false } return beginDrag(e) } function copy() { fork() } function kill() { const instance = instanceTable.kill(id) || {} console.log("kill", instance, instance.kill) instance.kill && instance.kill() close() } function maximize() { if (!ref.current) { return } ref.current.requestFullscreen().catch(err => { console.error(err) }) } return jsx`

⠿ ${view.title || ''}

` }32:T1b50,instanceTable = { const editorInstance = editor({ world, value: viewof hashState.value.source, autosave: (source) => updateHashState({source}), width: '100%', height: '100%', style: {maxWidth: '100%', height: '100%', cursor: 'text'}, options: {lineWrapping: true}, }) const editorActions = { get editor() { return editorInstance.actions }, get source() { return this.editor.source }, set source(v) { return this.editor.source = v }, reveal(mark) { this.editor.reveal(mark) }, select(mark) { this.editor.select(mark) }, focus() { this.editor.focus() } } function svelteInstance(...args) { const generator = svelteRender(...args) const {value} = generator.next() const svelteComponent = getComponent(value) return { svelteComponent, refresh() { if (svelteComponent.refresh) { svelteComponent.refresh() } }, element: value, kill: () => setTimeout(() => generator.return(), 0), } } const instanceTable = new InstanceTable({ 'editor': () => { return { title: "Editor", refresh() { this.element.editor.refresh() }, element: editorInstance, } }, 'table': () => { return { title: "Table", element: table([ {name: "Adam", food: "Pizza"}, ]) } }, // 'trellis': () => ({ // title: "Plot", // ...svelteInstance(TrellisView, { // height: 300, // data: generatedPromises(() => world.generator(w => { // try { // const scenarios = w.scenarios() // console.log("scenarios", scenarios) // if (scenarios && scenarios[0]) { // const result = scenarios[0].worker.samples() // console.log("result", result) // return result // } // } catch (e) { // console.log(e) // } // return {values: [], schema: []} // }), {values: [], schema: []}), // }), // }), 'parallel-coordinates': () => { return { title: "Parallel Coordinates", ...svelteInstance(ParallelCoordinatesView, { height: 300, fontFamily, labelFontSize: 14, tickFontSize: 12, data: derivedPromises( workerScenarioStore, scenario => world.generator(() => { return scenario ? scenario.samples() : {samplingGroups: []} }), {samplingGroups: []}, ), }), } }, 'browser': () => ({ title: "Browser", ...svelteInstance( svelte ` {#if src}