2c:null 2d:["$","title",null,{"children":"Handsontable spreadsheet | Christophe Yamahata | Observable"}] 32:T4dc,// Extract data from spreadsheet function extractFromSpreadsheet() { const data = spreadsheet.getData(); // Extract Activity Data const activityData = data .filter(row => row[0] && row[0].trim() !== '') // Filter out rows where Activity ID is empty .map(row => { const activityID = row[0] || ''; const duration = (row[1] !== undefined && row[1] !== null) ? row[1] : '?'; const nameDesc = row[3] || row[0] || ''; return `${activityID}\t\t${duration}\t "${nameDesc}"`; }) .join('\n'); mutable activities_data = activityData; // Extract Dependence Data let dependenceData = []; data.forEach(row => { const activityID = row[0] || ''; const precedence = row[2] || ''; // Ignore row if Precedence is empty or "-" if (activityID && precedence && precedence !== '-') { const precedences = precedence.split(',').map(p => p.trim()); precedences.forEach(dep => { if (dep) { dependenceData.push(`${dep} > ${activityID}`); } }); } }); mutable dependencies_data = dependenceData.join('\n'); } 33:[{"id":"1b1617e3a6992b98bf0be5d8e689ab9244d88b166ce5923b47e4aa674eecdc430ee4164b604c4228b7a829b6de03d9ed9afc30c0c4693e9a4aafdeb76d217667","href":"https://static.observableusercontent.com/files/1b1617e3a6992b98bf0be5d8e689ab9244d88b166ce5923b47e4aa674eecdc430ee4164b604c4228b7a829b6de03d9ed9afc30c0c4693e9a4aafdeb76d217667","name":"handsontable.full.min.js","type":"application/javascript","lastModified":1735761895110.961,"size":1769611},{"id":"bb02ab96cae5850e92c4e0640428ecd3698eadf44f35ef8d7c56b2c8f1e3f1ac9301e2d1a47bb765350d2358336102368907d7841f25bd116840a18eab965cf7","href":"https://static.observableusercontent.com/files/bb02ab96cae5850e92c4e0640428ecd3698eadf44f35ef8d7c56b2c8f1e3f1ac9301e2d1a47bb765350d2358336102368907d7841f25bd116840a18eab965cf7","name":"handsontable.full.min.css","type":"text/css","lastModified":1735763957174.172,"size":40378},{"id":"79b187a2345cc842d2bfb7aa05bd9e5d40efcbb55bf71f8f39acda61f61f5d881b6f8e655c41296671e3dffdac14aec3ee111ffd00aeb47c9e9e4bf237f1ae24","href":"https://static.observableusercontent.com/files/79b187a2345cc842d2bfb7aa05bd9e5d40efcbb55bf71f8f39acda61f61f5d881b6f8e655c41296671e3dffdac14aec3ee111ffd00aeb47c9e9e4bf237f1ae24","name":"CPM_handsontable_CodePen_raBYBQB.PNG","type":"image/png","lastModified":1735841755988.708,"size":125458}] 30:{"id":"9b6527500db2276f","slug":"handsontable-cpm","title":"Handsontable spreadsheet","thumbnail":"bafcd00005cf37411a38d1c50e68c4eac5eb020360ab05cde57e2c4785fd4efd","access_level":"public","create_time":"$D2025-01-01T20:04:08.027Z","update_time":"$D2025-01-04T11:26:56.270Z","view_time":null,"first_public_time":"$D2025-01-01T22:52:10.950Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024"},"version":422,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null}],"members":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null,"role":"editor"},{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"a4317cf9df48c2f1","slug":"sandbox","title":"Sandbox","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"type":"notebook","body":{"titling":"auto","title":"Handsontable spreadsheet","cells":[{"id":0,"value":"# Handsontable spreadsheet\n\nThis notebook demonstrates how to handle data from a **spreadsheet** using the Handsontable library. \n\nIn this example, data is preloaded from an array, and the user has the possibility to modify the spreadsheet. \nThe data can be easily exported by clicking a button.\n\n**Note**: This example was specifically prepared for another Observable notebook on the Critical Path Method (CPM).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":400,"value":"cpm_handsontable_codepene = {\n const container = html`\n

Activity-on-Node diagram (AON) generated from a Handsontable spreadsheet.
Check the associated CodePen project.\n

👆🏻 Click to resize the illustration.\n

`;\n\n container.onclick = () => {\n const currentWidth = container.style.width;\n container.style.width = currentWidth === \"500px\" ? \"calc(100% - 60px)\": \"500px\";\n };\n\n return container; \n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":356,"value":"viewof update_spreadsheet = Inputs.button(spreadsheet_data == null ? \"Set Initial Data\" : \"Reset Initial Data\", {\n reduce: () => {\n mutable spreadsheet_data = [\n [\"Start\", \"-\", \"-\", \"Start\"],\n [\"A\", 4, \"Start\", \"Clear site\"],\n [\"B\", \"3.0\", \"A\", \"Lay foundation\"],\n [\"C\", 12, \"B\", \"Rough framing\"],\n [\"D\", 3, \"C\", \"Install windows,
doors\"],\n [\"E\", 4, \"D\", \"Install drywall\"],\n [\"J\", 2, \"E\", \"Interior paint\"],\n [\"F\", 3, \"E\", \"Install carpet,
flooring\"],\n [\"G\", 5, \"C\", \"Install electrical,
plumbing\"],\n [\"H\", 2, \"G\", \"Install fixtures\"],\n [\"I\", 2, \"G\", \"Install faucets\"],\n [\"K\", 1, \"F, H, I, J\", \"Final inspection\"],\n [\"Finish\", 0, \"K\", \"Finish\"],\n ];\n const div = document.getElementById('spreadsheet');\n // Clear the div\n div.innerHTML = '';\n }\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"spreadsheet_display = {\n const container = html`\n\n

\n`\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"viewof update_from_spreadsheet = Inputs.button(html`Copy to Fields`, {\n label: html`Click to update the fields`,\n value: null,\n reduce: extractFromSpreadsheet,\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"
\n### Activities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"viewof activitiesInput = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"### Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"viewof dependenciesInput = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"Handsontable = {\n const styles = html``;\n document.head.appendChild(styles);\n return require( await FileAttachment(\"handsontable.full.min.js\").url());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"spreadsheet = {\n const container = document.getElementById('spreadsheet')\n \n // Initialize Handsontable correctly\n const hot = new Handsontable(container, {\n data: spreadsheet_data, // Blank rows\n colHeaders: ['Activity ID', 'Duration', 'Predecessors', 'Name/Description'],\n rowHeaders: true,\n manualRowMove: true,\n\t contextMenu: {\n \t\titems: {\n \t\t row_above: {},\n \t\t row_below: {},\n \t\t remove_row: {},\n \t\t undo: {},\n \t\t redo: {},\n \t\t make_read_only: {},\n \t\t alignment: {},\n \t\t copy: {}, \n \t\t cut: {},\n \t\t }\n\t },\n columns: [\n { data: 0, type: 'text' }, // Activity ID\n { data: 1, type: 'text', className: 'htCenter' }, // Duration (center-aligned)\n { data: 2, type: 'text' }, // Precedence\n { data: 3, type: 'text' } // Name/Description\n ],\n licenseKey: 'non-commercial-and-evaluation'\n })\n\n return hot\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"mutable spreadsheet_data = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"sample_data = [\n [\"Start\", \"-\", \"-\", \"Start\"],\n [\"A\", 4, \"Start\", \"Clear site\"],\n [\"B\", \"3.0\", \"A\", \"Lay foundation\"],\n [\"C\", 12, \"B\", \"Rough framing\"],\n [\"D\", 3, \"C\", \"Install windows,
doors\"],\n [\"E\", 4, \"D\", \"Install drywall\"],\n [\"J\", 2, \"E\", \"Interior paint\"],\n [\"F\", 3, \"E\", \"Install carpet,
flooring\"],\n [\"G\", 5, \"C\", \"Install electrical,
plumbing\"],\n [\"H\", 2, \"G\", \"Install fixtures\"],\n [\"I\", 2, \"G\", \"Install faucets\"],\n [\"K\", 1, \"F, H, I, J\", \"Final inspection\"],\n [\"Finish\", 0, \"K\", \"Finish\"],\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"mutable activities_data = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"mutable dependencies_data = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"