31:T740,viewof surveyUi = { (initialLoadQuestions, initialLoadLayout, load_config) console.log("Executing surveyUi") const updateEditorState = (state) => { ui.dataset.surveyEditorState = state; console.log(ui.dataset.surveyEditorState); }; const resetEditorState = () => updateEditorState('editor'); const ui = view`

${pageHeader(['Survey Designer'])}

Import

${Inputs.button("Close", { reduce: resetEditorState})}

${importUi(resetEditorState)}

Export

${Inputs.button("Close", { reduce: resetEditorState})}

${exportUi()}

${['...', surveyEditor()]}

${pageFooter()}

` return ui; }32:T4f8,// Special arg suffixes like _json, _md, _html are expended function questionToUiCell(source) { const questionAttribute = ([k, v]) => { k = k.trim() if (k.endsWith("_json")) { return [k.replace(/_json$/, ''), Array.isArray(v) ? v.map(v => questionToUiCell(JSON.parse("(" + v + ")"))) : questionToUiCell(JSON.parse("(" + v + ")"))] } if (k.endsWith("_eval")) { return [k.replace(/_eval$/, ''), Array.isArray(v) ? v.map(v => questionToUiCell(eval("(" + v + ")"))) : questionToUiCell(eval("(" + v + ")"))] } if (k.endsWith("_js")) { return [k.replace(/_js$/, ''), Array.isArray(v) ? v.map(v => questionToUiCell(eval("(" + v + ")"))) : questionToUiCell(eval("(" + v + ")"))] } if (k.endsWith("_md")) { return [k.replace(/_md$/, ''), v] } if (!k || !v) return undefined; return [k, v] } if (Array.isArray(source)) return source.map(arg => questionToUiCell(arg)); else if (typeof source === 'object') return Object.fromEntries(Object.entries(source).map(questionAttribute).filter(e => e)) else return source } 33:T5b0,viewof surveyUiInput = { console.log("Executing viewof surveyUiInput") // Go through the layout *in order* and build up pages with cells *in order* const pagesByMenu = {}; const layoutUi = [...questionsNoLayout.entries()].map(([id, q]) => ({ menu: "nolayout", id, set:"", role:"" })).concat(layout.data); layoutUi.forEach(l => { const connections = []; // set and role are comma deliminated lists // zip them into an array const sets = l.set.split(","); const roles = l.role.split(","); for (let i = 0; i < Math.max(sets.length, roles.length); i++) { connections.push({ set: sets[i], role: roles[i], }) } const source = questions.get(l.id); if (!source) return; const question = questionToUiCell(source); pagesByMenu[l.menu] = pagesByMenu[l.menu] || { title: l.menu, cells: [] }; pagesByMenu[l.menu].cells.push({ id: l.id, inner: { type: question.type, result: { ...question, ...(question.options && {options: question.options.map( (option, index) => ({...option, id: option.value}) )}) } }, connections: { connections: connections } }) }) return Inputs.input(({ metadata: { ...surveyConfig, title: surveyConfig.pageTitle }, pages: Object.entries(pagesByMenu).map(([menu, page]) => page) })) }34:T49c,syncSurveyOutput = { console.log("surveyOutput") // convert ui representation (pages -> cells) to {questions, layout, config} for storage. if (surveyUiOutput.pages.length === 0) return invalidation; // Extract questions const questions = new Map(); surveyUiOutput.pages.forEach(page => { page.cells.forEach(cell => { questions.set(cell.id, uiCellToQuestion({ ...cell.inner.result, type: cell.inner.type, })) }) }); // Extract layout const layout = []; surveyUiOutput.pages.forEach(page => { page.cells.forEach(cell => { const connections = cell?.connections?.connections || [] const set = connections.map(c => c.set).join(","); layout.push({ id: cell.id, menu: page.title, set, role: set === "" ? "" : connections.map(c => c.role).join(","), }) }) }); // Extract config const config = { ...viewof surveyConfig.value, // carry over initial state pageTitle: surveyUiOutput.metadata.title }; viewof surveyOutput.value = { questions, layout, config }; viewof surveyOutput.dispatchEvent(new Event('input', {bubbles: true})) }35:T852, autosave = { async function saveState() { console.log("saveState") await Promise.all([ saveQuestions(viewof surveyOutput.value.questions), saveLayout(viewof surveyOutput.value.layout), saveConfig(viewof surveyOutput.value.config) ]); await files.save("settings.json", viewof settings.value); return "Saved " + new Date() } console.log("Initializing autosave"); function debounce(func, timeout = 2000){ // 2 seconds let timer; let hasRun = true; // Only one of setTimeout OR visibility change should run let args; const runTask = async () => { if (!hasRun) { console.log("auto_save") hasRun = true; await func.apply(this, args); } }; window.addEventListener('beforeunload', function (e) { if (!hasRun) { // Cancel the event e.preventDefault(); // If you prevent default behavior in Mozilla Firefox prompt will always be shown // Chrome requires returnValue to be set e.returnValue = "Please wait for your latest changes to be saved. Try again in a few seconds"; } }); return (...latestArgs) => { args = latestArgs; hasRun = false; clearTimeout(timer); document.removeEventListener("visibilitychange", runTask) timer = setTimeout(runTask, timeout); document.addEventListener("visibilitychange", runTask); invalidation.then(() => document.removeEventListener("visibilitychange", runTask)) }; } let first = true; return Generators.observe(next => { const autosave = debounce(async () => { if (first) { console.log("Skipping first save as its from page load not human interaction") first = false; // Skip first save as it's from page load } else { console.log("saving") const answers = await saveState() next(answers); } }); viewof surveyOutput.addEventListener('input', autosave); invalidation.then(() => viewof surveyOutput.removeEventListener('input', autosave)) next("Autosave initialized") }) }36:T70d,function csvToQuestions(csv) { return csv.reduce( (acc, row) => { // Now append the rows question attributes and values to the current question being processed const attribute = row['key']; const value = row['value']; const id = row['id'] || acc.previous?.id; let current = acc.previous; if (id != acc.previous?.id) { current = { id: id } acc.questions.push(current) } const arrays = ['options', 'rows', 'columns']; if (arrays.some(arr => attribute.startsWith(arr))) { // But if the element is packed as an array we don't unwind let packed = false; try { if (Array.isArray(eval(value))) { packed = true; current[attribute] = value; } } catch (err) {} if (attribute === 'rows' && !Number.isNaN(+value)) { // When rows is in a textarea is it not in an array current[attribute] = value; } else if (!packed) { // Arrays come in a list of elements const array = current[attribute] || []; if (arrays.includes(attribute)) { array.push({ value: value, label: value }); } else { array.push(value); } current[attribute] = array; } } else { current[attribute] = sanitizeValue(value); } return { questions: acc.questions, previous: current } } , { questions: [], previous: null } ).questions.reduce( // Index by id (map, q) => { const {id, ...value} = q map.set(id, value) return map; }, new Map() // Map remembers insertion order which is useful ) }37:T527,questionsToCSV = (questions) => [...questions.entries()].reduce( (acc, row) => { Object.entries(row[1] || row[0]).forEach(([k,v]) => { if (k == 'id') return; if (Array.isArray(v)) { v.forEach(e => { if (typeof e === 'string') { acc.push({ 'id': row[0], 'key': k, 'value': e }) } else if (typeof e === 'object' && typeof e.label === 'string' && e.label === e.value) { acc.push({ 'id': row[0], 'key': k, 'value': e.label }) } else { throw new Error(Object.keys(e)) } }) } else if (typeof v === 'string'){ acc.push({ 'id': row[0], 'key': k, 'value':v }) } else if (typeof v === 'boolean') { acc.push({ 'id': row[0], 'key': k, 'value': v ? "TRUE" : "FALSE" }) } else if (typeof v === 'object') { acc.push({ 'id': row[0], 'key': k + "_js", 'value': JSON.stringify(v) }) }else { throw new Error(v) } }); return acc; },[])38:T441,importUi = (afterSave) => { const submitFiles = async () => { if (ui.value.questionsCsv) { console.log('Updating questions CSV') viewof questions.value = csvToQuestions(await ui.value.questionsCsv.csv()); } if (ui.value.layoutCsv) { console.log('Updating layout CSV') viewof layoutData.value = {data: csvToLayout(await ui.value.layoutCsv.csv())} } if (ui.value.questionsCsv || ui.value.layoutCsv) { viewof questions.dispatchEvent(new Event('input', {bubbles: true})); viewof layoutData.dispatchEvent(new Event('input', {bubbles: true})) } if (typeof afterSave === 'function') { afterSave(); } } const submit = Inputs.button(buttonLabel({label: "Save"}), {reduce: submitFiles}); const ui = view`

Questions CSV file

${['questionsCsv', fileInput({prompt: "Drop questions as a CSV file here"})]}

Layout CSV file

${['layoutCsv', fileInput({prompt: "Drop layout as a CSV file here"})]}

${submit}

` return ui; }39:[] 2f:{"title":"Survey Slate | Designer Tools","cells":[{"id":0,"value":"# Survey Slate | Designer Tools\n\n_Create, edit, and connect questions for both simple and complex surveys using a variety of input types. Also check out the [User Guide for Survey Slate Designer](https://observablehq.com/@categorise/surveyslate-user-guide-for-grouping-questions)._","pinned":false,"hidden":false,"mode":"md"},{"id":2795,"value":"md`\n

👋 Welcome! This notebook is about **Survey Slate**—an [assemblage of Observable web-based notebooks](https://observablehq.com/collection/@categorise/survey-slate) allowing organizations to host custom surveys for end users on their own AWS infrastructure. Check out the [Technical Overview](https://observablehq.com/@categorise/surveyslate-docs) to get started! ✨

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"loginTitle = md`## Login`","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"md`test credentials for demoEditor`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2824,"value":"

\n{\n  \"accessKeyId\": \"${accessKeyId}\",\n  \"secretAccessKey\": \"${secretAccessKey}\"\n}\n

\n","pinned":false,"hidden":false,"mode":"html"},{"id":2819,"value":"accessKeyId = 'AKIAQO7DBPIFETPNCNEF'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2818,"value":"secretAccessKey = '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'","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof login = viewof manualCredentials","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"credStore = saveCreds","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"surveyChooserTitle = md`## Survey Chooser`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"viewof survey = Inputs.select(surveys)","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"surveys = myTags['designer'].split(\" \")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1905,"value":"## Designer UI","pinned":false,"hidden":false,"mode":"md"},{"id":1903,"value":"import {surveyEditor, styles as designUiStyles, tachyons} from '@categorise/surveyslate-designer-ui'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1902,"value":"loadStyles = (tachyons, designUiStyles)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1901,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":2173,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2000,"value":"function uiCellToQuestion(args) {\n const uiAttribute = ([k, v]) => {\n if (v == \"\") return undefined;\n if (k == \"connections\") return undefined;\n if (k == \"id\") k = \"value\";\n\n const arrays = [\"options\", \"rows\", \"columns\"]\n if (arrays.includes(k) && Array.isArray(v)) {\n return [k + \"_js\", uiCellToQuestion(v).map(e => JSON.stringify(e))];\n } \n\n v = uiCellToQuestion(v);\n\n if (_.isEqual(v, {})) return undefined;\n if (v === undefined) return undefined;\n\n if ([\"description\"].includes(k)) return [k + \"_md\", v];\n \n return [k, v]\n }\n if (Array.isArray(args))\n return args.map(arg => uiCellToQuestion(arg));\n else if (typeof args === 'object')\n return Object.fromEntries(Object.entries(args).map(uiAttribute).filter(a => a !== undefined))\n else if (typeof args === 'number')\n return String(args)\n else \n return args\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1900,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1899,"value":"syncSurveyUiInputToSurveyUi = {\n console.log(\"syncSurveyUiInputToSurveyUi\");\n if (!_.isEqual(viewof surveyUi.value, viewof surveyUiInput.value)) {\n console.log(\"syncSurveyUiInputToSurveyUi: change detected\");\n viewof surveyUi.value = viewof surveyUiInput.value;\n // Manually updating the UI state\n // viewof surveyUi.applyValueUpdates();\n viewof surveyUi.dispatchEvent(new Event('input', {bubbles: true}))\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1898,"value":"syncSurveyUIToSurveyUiOutput = {\n console.log(\"syncSurveyUIToSurveyUiOutput\")\n // Reactive to UI changes (i.e. surveyUi)\n if (!_.isEqual(viewof surveyUiOutput.value, surveyUi)) {\n console.log(\"syncSurveyUIToSurveyUiOutput: change detected\");\n viewof surveyUiOutput.value = _.cloneDeep(surveyUi);\n viewof surveyUiOutput.dispatchEvent(new Event('input', {bubbles: true}))\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1897,"value":"viewof surveyUiOutput = Inputs.input(undefined);","pinned":false,"hidden":false,"mode":"ojs"},{"id":2516,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1896,"value":"viewof surveyOutput = Inputs.input(undefined)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1915,"value":"diff = require('https://bundle.run/json-diff@0.5.4')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2269,"value":"viewof selectedQuestionDiff = Inputs.select(Object.keys(logicalQuestionDiff).map(k => k.replace(\"__deleted\", '').replace(\"__added\", '')), {label: \"Select question diff\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2282,"value":"md`\nquestion: ${selectedQuestionDiff}\n\nQuestion Input to UI questions\n~~~js\n${JSON.stringify(questions.get(selectedQuestionDiff), null, 2)}\n~~~\n\nQuestion Output to UI\n~~~js\n${JSON.stringify(surveyOutput.questions.get(selectedQuestionDiff), null, 2)}\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2532,"value":"normalizedQuestions = Object.fromEntries([...csvToQuestions(questionsToCSV(questions)).entries()].map(reifyAttributes))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2536,"value":"normalizedQuestionsOutput = Object.fromEntries([...csvToQuestions(questionsToCSV(surveyOutput.questions)).entries()]\n .map(reifyAttributes).filter(e => e[0] !== \" \"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2104,"value":"logicalQuestionDiff = Object.fromEntries(Object.entries(\n diff.diff(normalizedQuestions, normalizedQuestionsOutput) || []\n))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2414,"value":"## Autosave UI","pinned":false,"hidden":false,"mode":"md"},{"id":2418,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2657,"value":"## Export","pinned":false,"hidden":false,"mode":"md"},{"id":2661,"value":"exportDataUri = URL.createObjectURL(new Blob([ JSON.stringify({\n ...surveyOutput,\n questions: Object.fromEntries(surveyOutput.questions.entries())\n}) ], { type: 'application/json' }));","pinned":false,"hidden":false,"mode":"ojs"},{"id":2669,"value":"htl.html`\n download survey.json\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1752,"value":"## Persistence","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"viewof settings = Inputs.input(await files.load('settings.json'))","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"files = ({\n save: async (key, object) => {\n await putObject(config.PRIVATE_BUCKET, `surveys/${survey}/${key}`, JSON.stringify(object), {\n tags: {\n \"survey\": survey\n },\n ...(key === \"settings.json\" && {'CacheControl': \"no-cache\"})\n })\n },\n load: async (key, object) => {\n return JSON.parse(await getObject(config.PRIVATE_BUCKET, `surveys/${survey}/${key}`))\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"saveQuestions = async (questions) => {\n const name = `questions_${Date.now()}.json`\n await files.save(name, Array.from(questions.entries()))\n viewof settings.value = {\n ...viewof settings.value,\n questions: [\n ...(viewof settings.value.questions || []),\n name\n ]\n }\n return name;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":764,"value":"loadQuestions = async (name) => {\n const entries = await files.load(name)\n return new Map(entries);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":756,"value":"saveLayout = async (layout) => {\n const name = `layout_${Date.now()}.json`\n await files.save(name, layout);\n viewof settings.value = {\n ...viewof settings.value,\n layout: [\n ...(viewof settings.value.layout || []),\n name\n ]\n };\n return name;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"loadLayout = async (name) => await files.load(name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1594,"value":"saveConfig = async (config) => {\n const name = `config_${Date.now()}.json`\n await files.save(name, config)\n viewof settings.value = {\n ...viewof settings.value,\n configs: [\n ...(viewof settings.value.configs || []),\n name\n ]\n };\n return name;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1597,"value":"loadConfig = async (name) => await files.load(name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1381,"value":"async function saveVersion() {\n const name = `version_${Date.now()}.json`\n \n const version = ({\n layout: viewof settings.value.layout.at(-1),\n questions: viewof settings.value.questions.at(-1),\n config: viewof settings.value.configs.at(-1)\n });\n \n await files.save(name, version)\n \n viewof settings.value = {\n ...viewof settings.value,\n versions: [\n ...(viewof settings.value.versions || []),\n name\n ]\n };\n \n await files.save(\"settings.json\", viewof settings.value);\n \n return name;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2749,"value":"viewof settings.value.versions.at(-1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2744,"value":"revertChanges = async function() {\n const version = await files.load(viewof settings.value.versions.at(-1))\n viewof settings.value = {\n ...viewof settings.value,\n configs: [\n ...(viewof settings.value.configs || []),\n version.config\n ],\n questions: [\n ...(viewof settings.value.questions || []),\n version.questions\n ],\n layout: [\n ...(viewof settings.value.layout || []),\n version.layout\n ]\n };\n \n await files.save(\"settings.json\", viewof settings.value);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"md`## Questions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"viewof questions = Inputs.input(new Map())","pinned":false,"hidden":false,"mode":"ojs"},{"id":1312,"value":"mutable initialLoadQuestions = (/* reload everything on choice change */ survey, false)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1317,"value":"initialQuestionLoader = {\n if (!initialLoadQuestions) {\n mutable initialLoadQuestions = true;\n viewof questions.value = await loadQuestions(settings.questions[settings.questions.length - 1])\n viewof questions.dispatchEvent(new Event('input', {bubbles: true}));\n }\n return \"Initial Question Loader\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":583,"value":"md`### Import external CSV of questions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"viewof questionUpload = fileInput({prompt: \"Drop questions as a CSV file here\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1805,"value":"onQuestionUpload = {\n viewof questions.value = csvToQuestions(await questionUpload.csv());\n viewof questions.dispatchEvent(new Event('input', {bubbles: true}));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":667,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":2101,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"md`### Export questions to CSV`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2643,"value":"questionsCsvDataUri = URL.createObjectURL(new Blob([ d3.csvFormat(exportQuestionsCSV) ], { type: 'text/csv' }));","pinned":false,"hidden":false,"mode":"ojs"},{"id":2698,"value":"viewof questionsCsvDataUriView = Inputs.input(undefined)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2697,"value":"updateQuestionsCsvDataUriView = {\n viewof questionsCsvDataUriView.value = questionsCsvDataUri /* sync questionsCsvDataUri changes to the view */\n viewof questionsCsvDataUriView.dispatchEvent(new Event('input', {bubbles: true}))\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":597,"value":"downloadQuestionsCsv = htl.html`\n Download questions.csv\n\n${exportQuestionsProblems.length > 0 ? md` Warning, some questions are not exporting properly, you may lose data in export` : null}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":609,"value":"exportQuestionsCSV = questionsToCSV(questions)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"exportQuestionsProblems = {\n const exportedQuestions = csvToQuestions(exportQuestionsCSV);\n const qProblems = [...questions.keys()].reduce((acc, q) => {\n const question = questions.get(q);\n const exported = exportedQuestions.get(q);\n if (!_.isEqual(question, exported)) {\n acc.push({\n q, question, exported\n })\n }\n return acc\n }, [])\n \n const eProblems = [...exportedQuestions.keys()].reduce((acc, q) => {\n const question = questions.get(q);\n const exported = exportedQuestions.get(q);\n if (!_.isEqual(question, exported)) {\n acc.push({\n q, question, exported\n })\n }\n return acc\n }, qProblems)\n \n return eProblems;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"md`## Layout`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1065,"value":"viewof layoutData = Inputs.input([]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1441,"value":"md`### Import layout from CSV`","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"viewof layoutUpload = fileInput({prompt: \"Drop layout as a CSV file here\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1850,"value":"onLayoutUpload = {\n viewof layoutData.value = {data: csvToLayout(await layoutUpload.csv())}\n viewof layoutData.dispatchEvent(new Event('input', {bubbles: true}))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":785,"value":"function csvToLayout(csv) {\n return csv.reduce(\n (acc, row) => {\n acc.push(row)\n return acc\n }, []\n )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1457,"value":"md`### Export layout to CSV`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2695,"value":"layoutCsvDataUri = URL.createObjectURL(new Blob([ d3.csvFormat(exportLayoutCSV) ], { type: 'text/csv' }));","pinned":true,"hidden":false,"mode":"ojs"},{"id":2694,"value":"viewof layoutCsvDataUriView = Inputs.input(undefined)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2693,"value":"updateLayoutCsvDataUriView = {\n viewof layoutCsvDataUriView.value = layoutCsvDataUri\n viewof layoutCsvDataUriView.dispatchEvent(new Event('input', {bubbles: true}))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":810,"value":"downloadLayoutCsv = htl.html`\n Download layout.csv\n\n${exportLayoutProblems.length > 0 ? md` Warning, some layouts are not exporting properly, you may lose data in export` : null}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1330,"value":"mutable initialLoadLayout = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":1213,"value":"initialLayoutLoader = {\n if (!initialLoadLayout) {\n mutable initialLoadLayout = true;\n setLayout([...await loadLayout(settings.layout[settings.layout.length - 1])])\n }\n return \"Initial Layout Loader\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":992,"value":"function setLayout(data) {\n const choices = learnChoices(data);\n \n menuOptions.data = choices[\"menu\"]\n setOptions.data = choices[\"set\"]\n viewof menuOptions.dispatchEvent(new Event('input', {bubbles: true}))\n viewof setOptions.dispatchEvent(new Event('input', {bubbles: true}))\n \n \n layoutData.data = data;\n viewof layoutData.dispatchEvent(new Event('input', {bubbles: true}))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1011,"value":"learnChoices = (data) => {\n const columns = [\"menu\", \"set\"]\n const counts = data.reduce(\n (arr, l) => {\n columns.forEach(c => { \n arr[c] = arr[c] || {};\n arr[c][l[c]] = (arr[c][l[c]] || 0) + 1 \n })\n return arr;\n }, {})\n return Object.fromEntries(Object.entries(counts).map(([key, counts]) => {\n return [key, Object.keys(counts).map(k => ({[key]: k}))]\n }))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2691,"value":"### Export UI","pinned":false,"hidden":false,"mode":"md"},{"id":2690,"value":"sampleExportUi = exportUi()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2689,"value":"exportUi = () => {\n const now = Date.now();\n\n return view`

\n Download Questions\n

\n\n

\n Download Layout\n

`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2688,"value":"### Import UI","pinned":false,"hidden":false,"mode":"md"},{"id":2687,"value":"viewof sampleImportUi = importUi()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2686,"value":"sampleImportUi","pinned":true,"hidden":false,"mode":"ojs"},{"id":2685,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":985,"value":"md`### Edit user choices within the layout Editors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1146,"value":"function selection(title) {\n const choices = dataEditor([], {\n columns: [title],\n width: {\n [title]: \"400px\"\n },\n format: {\n [title]: (d) => Inputs.text({value: d, width: \"400px\", disabled: true}),\n },\n })\n const addForm = view`

\n ${[title, Inputs.text({\n label: `Add ${title}`\n })]}\n ${Inputs.button(\"add\", {\n reduce: () => {\n choices.value.data = [...choices.value.data, addForm.value]\n addForm[title].value = '';\n choices.dispatchEvent(new Event('input', {bubbles: true}));\n }\n })}\n `\n\n return view`

Edit choices for ${title}

\n ${['...', choices]}${cautious(() => addForm)}\n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":988,"value":"viewof menuOptions = selection(\"menu\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1150,"value":"viewof setOptions = selection(\"set\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":981,"value":"md`### Layout Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"viewof layout = Inputs.input(layoutData)\n/*\n{ \n const menuOptionsArr = menuOptions.data.map(d => d[\"menu\"]);\n const setOptionsArr = setOptions.data.map(d => d[\"set\"]);\n \n return dataEditor(layoutData.data, {\n columns: [\"id\", \"menu\", \"set\", \"role\"],\n format: {\n \"id\": (d) => Inputs.text({value: d}),\n \"menu\": (d) => Inputs.select(menuOptionsArr, {value: d}),\n \"set\": (d) => Inputs.select(setOptionsArr, {value: d}),\n \"role\": (d) => Inputs.text({value: d})\n },\n width: {\n \"set\": \"100px\"\n },\n tableClass: \"layout\",\n stylesheet: `\n .layout .col-cell_name form {\n width: 300px\n }\n .layout .col-menu form {\n width: 100px\n }\n .layout .col-set form {\n width: 100px\n }\n `\n })\n}*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":1475,"value":"md`## Data Quality Checks`","pinned":false,"hidden":false,"mode":"ojs"},{"id":921,"value":"md`### Questions that have no layout`","pinned":false,"hidden":false,"mode":"ojs"},{"id":924,"value":"{\n const results = [...questionsNoLayout.entries()].map(([k, v]) => ({id: k, ...v}));\n if (results.length > 0) {\n return dataEditor(results, {\n columns: [\"id\", \"type\"]\n })\n } else {\n return md`✅ The are no questions with no layout`\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2247,"value":"questionsNoLayout.values().next()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1301,"value":"md`### Layouts with no question`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1298,"value":"{\n const results = layoutsNoQuestion.map(([name, layoutArray]) => layoutArray[0]);\n if (results.length > 0) {\n return dataEditor(results)\n } else {\n return md`✅ The are no layouts with no questions`\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1511,"value":"md`### Questions with options but some of the options do not have a 'value'\n\nAll options need value's defined, this is the key used to ensure updates to question text do not affect the endusers pre-existing answers.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1547,"value":"{\n if (optionsWithoutValue.length > 0) {\n return md`⚠️ There are ${optionsWithoutValue.length} mistakes\n ${optionsWithoutValue.map(mistake => `\\n- ${mistake[1].cell_name}`)}`\n } else {\n return md`✅ All options have a value defined`\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1516,"value":"optionsWithoutValue = [...surveyOutput.questions.entries()].map(([k, q]) => [k, reifyAttributes(q)]).filter(([name, question]) => question.options && !question.options.some(option => option.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":821,"value":"layoutById = d3.group(layout.data, d => d.id)","pinned":false,"hidden":false,"mode":"ojs"},{"id":864,"value":"duplicateLayouts = Object.fromEntries([...layoutById.entries()].filter(([name, layoutArr]) => layoutArr.length > 1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"questionsNoLayout = new Map([...questions.entries()].filter(([name, q]) => !layoutById.has(name)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":834,"value":"layoutsNoQuestion = ([...layoutById.keys()].filter(name => !surveyOutput.questions.has(name))).map(k => [k, layoutById.get(k)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"exportLayoutCSV = surveyOutput.layout","pinned":false,"hidden":false,"mode":"ojs"},{"id":804,"value":"exportLayoutProblems = {\n const exportedLayout = csvToLayout(exportLayoutCSV);\n \n const problems = [];\n for (var i = 0; i < Math.max(surveyOutput.layout.length, exportedLayout.length); i++) {\n if (!_.isEqual(layout.data[i], exportedLayout[i])) {\n problems.push({\n row: i,\n layout: layout.data[i],\n exportedLayout: exportedLayout[1]\n })\n }\n }\n return problems;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1600,"value":"## Config\n\nConfig is additional data that might be useful such as the menu display titles.","pinned":false,"hidden":false,"mode":"md"},{"id":1632,"value":"viewof latestConfig = editor({\n type: \"object\",\n title: \"Config\",\n properties: {\n pageTitle: {\n type: \"string\"\n },\n menuSegmentLabels: {\n type: \"object\",\n additionalProperties: { \"type\": \"string\" }\n }\n }\n}, {\n theme: \"spectre\",\n disable_edit_json: true,\n disable_properties: false,\n iconlib: \"spectre\",\n show_errors: \"always\",\n prompt_before_delete: \"false\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1669,"value":"save_config = {\n \n if (viewof surveyConfig.value && !_.isEqual(latestConfig, viewof surveyConfig.value)) {\n yield md`Saving...`\n viewof surveyConfig.value = latestConfig;\n await saveConfig(latestConfig);\n yield md`saved`\n } else {\n yield md`no changes`\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1694,"value":"viewof surveyConfig = Inputs.input()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1775,"value":"sync_ui = {\n viewof latestConfig.value = surveyConfig\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1699,"value":"load_config = {\n viewof surveyConfig.value = settings.configs?.length > 0 \n ? await loadConfig(settings.configs[settings.configs.length - 1])\n : {};\n viewof surveyConfig.dispatchEvent(new Event('input', {bubbles: true}))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1638,"value":"import {editor} from \"@a10k/hello-json-editor\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2683,"value":"## Styles","pinned":false,"hidden":false,"mode":"md"},{"id":2682,"value":"styles = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":2681,"value":"### Styles for the in notebook demo","pinned":false,"hidden":false,"mode":"md"},{"id":2680,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":304,"value":"surveyPreviewTitle = md`## Survey Preview`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1487,"value":"viewof responses = {\n addMenuBehaviour\n const view = surveyView(surveyOutput.questions, surveyOutput.layout, surveyOutput.config, new Map(), {\n putFile: (name) => console.log(\"mock save \" + name),\n getFile: (name) => console.log(\"mock get \" + name),\n })\n \n return view\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2714,"value":"responses","pinned":true,"hidden":false,"mode":"ojs"},{"id":1485,"value":"import {surveyView, addMenuBehaviour} from '@categorise/surveyslate-styling'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1357,"value":"md`## Preview Answers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1355,"value":"responses","pinned":false,"hidden":false,"mode":"ojs"},{"id":2734,"value":"## Revert changes\n\nRollback survey to last deployed version","pinned":false,"hidden":false,"mode":"md"},{"id":2742,"value":"viewof reollbackButton = Inputs.button(\"revert\", {\n reduce: async () => {\n await revertChanges(); \n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1376,"value":"deployTitle = md`## Deploy Survey Version`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2598,"value":"Last deployed: ${new Date(Number.parseInt(viewof settings.value.versions.at(-1).replace(\"version_\", \"\").replace(\".json\", \"\")))}\n\n${/*force update on deploy*/ (deployButton, '')}","pinned":false,"hidden":false,"mode":"md"},{"id":1362,"value":"viewof deployButton = Inputs.button(\"deploy\", {\n reduce: async () => {\n await saveVersion(); \n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"md`---\n## Cloud Configuration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"me = getUser()","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"myTags = listUserTags(me.UserName)","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"REGION = 'us-east-2'","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import {listObjects, getObject, putObject, listUsers, createUser, deleteUser, getUser, listAccessKeys, createAccessKey, deleteAccessKey, viewof manualCredentials, viewof mfaCode, saveCreds, listUserTags, tagUser, untagUser, iam, s3, listGroups, listGroupsForUser, addUserToGroup, removeUserFromGroup} with {REGION as REGION} from '@tomlarkworthy/aws'","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"md`---\n\n## Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"sanitizeValue = (text) => {\n text = text.trim()\n if (text === \"TRUE\") return true;\n if (text === \"FALSE\") return false;\n return text\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"md`### Dependancies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"import {createQuestion, reifyAttributes, bindLogic, setTypes, config} from '@categorise/survey-components'","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"import {toc} from \"@bryangingechen/toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"import {view, cautious} from '@tomlarkworthy/view'","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"import {fileInput} from \"@tomlarkworthy/fileinput\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"import {dataEditor} from '@tomlarkworthy/dataeditor'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2679,"value":"import {pageHeader, pageFooter, buttonLabel} from \"@categorise/common-components\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2807,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2809,"value":"import { substratum } from \"@categorise/substratum\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2812,"value":"substratum({ invalidation })","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}