31:T554,## CPM in Brief The **Critical Path Method (CPM)** is a scheduling technique used to estimate the minimum project duration and identify schedule flexibility within the network paths of a project. This method helps determine the longest sequence of dependent activities, which dictates the shortest possible project timeline. CPM works by calculating key dates for each activity: **Early Start (ES)**, **Early Finish (EF)**, **Late Start (LS)**, and **Late Finish (LF)** dates. These calculations are done by performing forward pass (for ES and EF) and backward pass (for LS and LF) analyses through the project’s network, without considering resource constraints. ${activityMap.get("Finish").ES > 0 ? `In the following example, the longest path is found in the sequence **${generateDot(activities, dependencies, activityMap).criticalPath}**, which represents the **critical path**. This path dictates the project’s minimum duration.` : ""} Activities on the critical path have the least total float, or slack—typically zero (**Total Float = 0**)—meaning any delay on these tasks will directly impact the project’s end date. CPM is essential for identifying the critical path(s) and determining the amount of total and free float (schedule flexibility) along the network paths within the schedule model.32:T44b,html`

Activities

${apple_pie_activities}

${Inputs.button(html`Copy to Fields`, { label: html`Click to directly update the fields`, value: null, reduce: () => { mutable spreadsheet_data = [ ["Start", "-", "-", "Start"], ["Finish", "-", "", "Finish"], ["", "", "", ""], ["", "", "", ""], ["", "", "", ""], ]; const div = document.getElementById('spreadsheet'); div.innerHTML = ''; mutable activities_data = apple_pie_activities; mutable dependencies_data = apple_pie_dependencies; document.getElementById("critical_path").scrollIntoView(); } })}

Dependencies

${apple_pie_dependencies}

`33:T6cb,## Other Examples - Example **A**: https://www.usemotion.com/blog/critical-path - Example **B**: https://www.youtube.com/watch?v=uPGUe8aKELk - Example **C**: https://www.geeksforgeeks.org/software-engineering-critical-path-method/ - Example **D**: https://www.simplilearn.com/tutorials/project-management-tutorial/critical-path-method - Example **E**: https://www.praxisframework.org/en/library/critical-path-analysis - Example **F**: https://www.pmi.org/learning/library/critical-path-method-calculations-scheduling-8040 - Example **G**: https://pressbooks.ulib.csuohio.edu/project-management-navigating-the-complexity/chapter/7-4-creating-an-activity-network-diagram/ - Example **H**: https://timekrei.tenda.co.jp/column/critical_path/ - Example **I**: https://hbr.org/1963/09/the-abcs-of-the-critical-path-method34:T4e2,**Example H**: New product development project
クリティカルパスを用いたタイムマネジメント (text in Japanese)

Activities

Start    -     "スタート"
Finish   -     "フィニッシュ"
A        5     "開発体制<br/>整備"
B        40    "商品<br/>コンセプト"
C        35    "市場調査"
D        25    "技術調查" 
E        15    "知財調査" 
F        20    "製品設計"
G        15    "材料調達<br/>計画"
H        10    "製品<br/>デザイン"
I        20    "電気回路<br/>設計"
J        15    "機械構造<br/>設計"
K        5     "材料調達<br/>実施"
L        5     "試作品<br/>評価"
M        10    "品質管理<br/>体制整備"
N        15    "量産施設<br/>整備"
O        3     "量産開始"

Dependencies

Start>A
A>B
A>C
A>D
A>E
B>H
B>F
C>H
D>F
D>G
E>F
E>G
F>I
F>J
F>K
G>K
H>L
I>L
J>L
K>O
L>M
L>N
M>O
N>O
O>Finish

35:Tb10,ABC_CPM = md`**Example I**: Building a house [View the generated file on Wikimedia]
(F.K. Levy, G.L. Thompson, J.D. Wiest, “*The ABCs of the Critical Path Method*,” Harvard Business Review, Sept. 1963)

Activities

Start  -    "Start (a)"
Finish -    "Finish (x)" 
b      4    "<u>Excavate </u> and<br/>pour footers"
c      2    "Pour concrete<br/><u>foundation </u>"
d      4    "Erect <u>wooden frame</u><br/> incl. rough roof"
e      6    "Lay <u>brickwork</u>"
f      1    "Install <u>basement</u><br/>drains and <u>plumbing</u>"
g      2    "Pour <u>basement</u><br/><u>floor</u>"
h      3    "Install <u>rough</u><br/><u>plumbing</u>"
i      2    "Install <u>rough</u><br/><u>wiring</u>"
j      4    "Install <u>heating</u><br/>and ventilating"
k      10   "Fasten <u>plaster</u><br/>board and plaster<br/>(incl. drying)"
l      3    "Lay <u>finish</u><br/><u>flooring</u>"
m      1    "Install <u>kitchen</u><br/><u>fixtures</u>"
n      2    "Install <u>finish</u><br/><u>plumbing</u>"
o      3    "<u>Finish carpentry</u>"
p      2    "<u>Finish roofing</u><br/>and flashing"
q      1    "Fasten <u>gutters</u><br/>and <u>downspouts</u>"
r      1    "Lay <u>storm drains</u><br/>for rain water"
s      2    "Sand and <u>varnish</u><br/><u>flooring</u>"
t      3    "<u>Paint</u>"
u      1    "<u>Finish</u><br/><u>electrical work</u>"
v      2    "Finish <u>grading</u>"
w      5    "Pour <u>walks and</u><br/>complete <u>landscaping</u>"

Dependencies

Start > b
b > c
c > d
d > e
c > f
f > g
f > h
d > i
d > j
g > j
i > k
j > k
h > k
k > l
l > m
l > n
l > o
e > p
p > q
c > r
o > s
t > s
m > t
n > t
t > u
q > v
r > v
v > w
s > Finish
u > Finish
w > Finish

`36:T54b,## Useful Links - CodePen code editor featuring essential elements from this notebook: - Spreadsheet version (utilizing the Handsontable library) - Text Form version - LinkedIn Post (December 2024): Critical Path Method (CPM). - Graphviz: Open-source software for visualizing graphs and networks. The AON diagram in this notebook is built using Graphviz. - Handsontable: JavaScript library for displaying data grids with a spreadsheet-like feel. Check out this basic Observable notebook for a demonstration. - PERT-based Monte Carlo Schedule Analysis: This Observable notebooks combines the Critical Path Method (CPM) and Monte Carlo simulations to analyze project schedules.37:T434,function parseActivities(activitiesInput) { // Split the input into lines const lines = activitiesInput.split("\n"); // Parse each line into an activity object const activities = lines .map(line => { // Trim any extra whitespace and skip empty lines const trimmedLine = line.trim(); if (!trimmedLine) return null; // Extract columns using regular expressions, handling quoted descriptions const match = trimmedLine.match(/^(\S+)\s+(-|\d+(\.\d+)?)\s+"(.+)"$/); if (!match) return null; // Skip lines that don't match the expected format const [_, id, duration, , name] = match; // Parse and limit duration to 2 significant digits after the decimal const parsedDuration = duration === "-" ? 0 : parseFloat(duration).toFixed(2); return { id, duration: parseFloat(parsedDuration), // Convert to a number again after toFixed name }; }) .filter(activity => activity !== null); // Filter out invalid lines return activities; // Return the parsed activities array } 38:T45c,function parseDependencies(dependenciesInput, activities) { // Extract the IDs from activities for easy lookup const activityIds = new Set(activities.map(activity => activity.id)); // Split the input into lines and remove any extra spaces const lines = dependenciesInput.split("\n").map(line => line.trim()).filter(line => line.length > 0); const dependencies = lines .map(line => { // Split the line by '>' and trim any extra spaces const parts = line.split('>').map(part => part.trim()); // Ensure the line has exactly two parts (source and target) if (parts.length !== 2) return null; const [source, target] = parts; // Return null if target is empty or source equals target if (target === "" || source === target) return null; return { source, target }; }) // Filter out null values .filter(dependency => dependency !== null); // Check if all sources and targets are in activityIds const allValid = dependencies.every(dep => activityIds.has(dep.source) && activityIds.has(dep.target)); return allValid ? dependencies : []; } 39:T7b0,function calculateES(activities, dependencies) { // Ensure "Start" is included in the activities if (!activities.some(activity => activity.id === "Start")) { activities.unshift({ id: "Start", duration: 0, name: "Start" }); // Add Start activity if not present } let activityMap = new Map(); // Populate the activityMap with initial values activities.forEach(activity => { activityMap.set(activity.id, { ...activity, ES: activity.id === "Start" ? 0 : undefined, // ES = 0 for Start EF: activity.id === "Start" ? 0 : activity.duration, // EF = 0 for Start LS: undefined, LF: undefined, TotalFloat: undefined }); }); // Forward pass to calculate ES and EF for each activity let updated; do { updated = false; activities.forEach(activity => { let maxEF = 0; // Default value if no predecessors // Check all dependencies of the current activity dependencies.forEach(dep => { if (dep.target === activity.id) { let depActivity = activityMap.get(dep.source); if (depActivity && depActivity.EF !== undefined) { maxEF = Math.max(maxEF, depActivity.EF); // Get maximum EF of predecessors } } }); // Update ES if it is undefined or a higher value is found if (activityMap.get(activity.id).ES === undefined || maxEF > activityMap.get(activity.id).ES) { activityMap.get(activity.id).ES = Math.round(maxEF * 100) / 100; // Round to 2 decimal places updated = true; // Mark that an update occurred } // Calculate EF for each activity (EF = ES + Duration) when ES is updated if (activityMap.get(activity.id).ES !== undefined) { activityMap.get(activity.id).EF = Math.round((activityMap.get(activity.id).ES + activity.duration) * 100) / 100; // Round to 2 decimal places } }); } while (updated); // Repeat until no changes occur return activityMap; } 3a:Tac3,function calculateLS(activityMap, activities, dependencies) { // Ensure the "Finish" activity exists let finishActivity = activityMap.get("Finish"); if (!finishActivity) { // Calculate the largest EF value from activityMap let maxEF = 0; activityMap.forEach(activity => { if (activity.EF !== undefined) { maxEF = Math.max(maxEF, activity.EF); } }); // Initialize "Finish" activity with max EF activityMap.set("Finish", { id: "Finish", duration: 0, name: "Finish", ES: maxEF, EF: maxEF, LS: maxEF, LF: maxEF, TotalFloat: 0 }); finishActivity = activityMap.get("Finish"); } // Initialize all LS and LF with the ES of "Finish" const finishES = finishActivity.ES || 0; // Default to 0 if "Finish" ES is undefined activities.forEach(activity => { const activityData = activityMap.get(activity.id); if (activityData) { activityData.LS = finishES; activityData.LF = finishES; } }); let updated; do { updated = false; // Iterate through all activities (order-independent) activities.forEach(activity => { const activityData = activityMap.get(activity.id); if (!activityData) return; // Find the minimum LS among all successors let minLS = activityData.LF; // Start with the current LF value dependencies.forEach(dep => { if (dep.source === activity.id) { const successor = activityMap.get(dep.target); if (successor && successor.LS !== undefined) { minLS = Math.min(minLS, successor.LS); // Take the minimum LS of successors } } }); // Update LF if a smaller value is found if (activityData.LF > minLS) { activityData.LF = minLS; // Store raw value updated = true; } // Calculate LS: LS = LF - Duration const newLS = activityData.LF - activity.duration; if (activityData.LS > newLS) { activityData.LS = newLS; // Store raw value updated = true; } // Calculate TotalFloat: TotalFloat = LS - ES if (activityData.LS !== undefined && activityData.ES !== undefined) { activityData.TotalFloat = activityData.LS - activityData.ES; // Store raw value } }); } while (updated); // Repeat until no further updates occur // Apply rounding to the final values activityMap.forEach(activity => { if (activity.LF !== undefined) activity.LF = Math.round(activity.LF * 100) / 100; if (activity.LS !== undefined) activity.LS = Math.round(activity.LS * 100) / 100; if (activity.TotalFloat !== undefined) activity.TotalFloat = Math.round(activity.TotalFloat * 100) / 100; }); return activityMap; } 3b:T73f,// Main function to perform both passes function calculateSchedule(activities, dependencies) { // Helper function to detect cycles using topological sort function detectCycle(dependencies) { const inDegree = new Map(); const adjacencyList = new Map(); // Initialize in-degree and adjacency list activities.forEach(activity => { inDegree.set(activity.id, 0); adjacencyList.set(activity.id, []); }); // Build the graph from the dependencies dependencies.forEach(({ source, target }) => { adjacencyList.get(source).push(target); inDegree.set(target, inDegree.get(target) + 1); }); // Perform topological sort using Kahn's Algorithm (BFS) const queue = []; const result = []; // Start with nodes that have no incoming edges (in-degree of 0) inDegree.forEach((degree, id) => { if (degree === 0) queue.push(id); }); while (queue.length > 0) { const node = queue.shift(); result.push(node); // Decrease in-degree of neighboring nodes adjacencyList.get(node).forEach(neighbor => { inDegree.set(neighbor, inDegree.get(neighbor) - 1); if (inDegree.get(neighbor) === 0) queue.push(neighbor); }); } // If the number of nodes in result is less than the number of activities, we have a cycle return result.length !== activities.length; } // Step 1: Detect if there's a cycle in the dependencies if (detectCycle(dependencies)) { throw new Error("Cycle detected in the project dependencies. Cannot proceed with schedule calculation."); } // Step 2: First pass - Calculate ES and EF let activityMap = calculateES(activities, dependencies); // Step 3: Second pass - Calculate LS, LF, and Total Float activityMap = calculateLS(activityMap, activities, dependencies); return activityMap; } 3c:T232e,function generateDot(activities, dependencies, activityMap) { try { // Helper function for topological sorting function topologicalSort(activities, dependencies) { const inDegree = new Map(); const activityGraph = new Map(); // Initialize graph activities.forEach(activity => { inDegree.set(activity.id, 0); activityGraph.set(activity.id, []); }); // Build graph and in-degree map dependencies.forEach(dep => { if (!activityGraph.has(dep.source) || !activityGraph.has(dep.target)) { throw new Error(`Invalid dependency: ${dep.source} -> ${dep.target}`); } activityGraph.get(dep.source).push(dep.target); inDegree.set(dep.target, inDegree.get(dep.target) + 1); }); // Queue of activities with no incoming dependencies (in-degree 0) const queue = []; activities.forEach(activity => { if (inDegree.get(activity.id) === 0) { queue.push(activity.id); } }); const sortedActivities = []; while (queue.length > 0) { const activityId = queue.shift(); sortedActivities.push(activityId); activityGraph.get(activityId).forEach(neighbor => { inDegree.set(neighbor, inDegree.get(neighbor) - 1); if (inDegree.get(neighbor) === 0) { queue.push(neighbor); } }); } if (sortedActivities.length !== activities.length) { throw new Error("Cycle detected in activity dependencies"); } return sortedActivities; } // Perform topological sort on the activities const sortedActivityIds = topologicalSort(activities, dependencies); // Prepare the activity nodes with HTML table labels const activityNodes = activities .map(activity => { const activityData = activityMap.get(activity.id); if (!activityData) { throw new Error(`Activity data missing for ID: ${activity.id}`); } // If Total Float is 0, highlight the activity in red const isCritical = activityData.TotalFloat === 0; // For activities with a duration of 0, use a circle shape if (activityData.duration === 0) { return `${activity.id} [label=<${activity.name} ${activity.id === "Start" ? "

🚩" : activity.id === "Finish" ? "

🏁" : ""}>, shape=circle, width=1.3, color=black, penwidth=2.8, fillcolor="#F7F1EB", style=filled, fontsize=16];`; } // For activities with non-zero duration, use the table format return `${activity.id} [label=<

${activityData.ES+StartDateConvention}	${activityData.duration}	${activityData.EF}
${hideActivityID? "" : "Activity "+activity.id+" "}${DescriptionItalic? "" : ""}${activity.name}${DescriptionItalic? "" : ""}
${activityData.LS+StartDateConvention}	${activityData.TotalFloat}	${activityData.LF}

>, shape=plaintext, width=2, height=1.5, color=${isCritical ? 'red' : 'black'}];`; }) .join("\n"); // Extract critical activities (activities with TotalFloat === 0 and non-zero duration) const criticalActivities = sortedActivityIds.filter(activityId => { const activityData = activityMap.get(activityId); if (!activityData) { throw new Error(`Activity data missing for ID: ${activityId}`); } return activityData.duration !== 0 && activityData.TotalFloat === 0; }); // Check if there are multiple critical paths let criticalPath = ""; if (criticalActivities.length === 0) { criticalPath = ""; } else { // Initialize an array to hold all potential critical paths const criticalPaths = []; // Function to explore a path recursively function explorePath(currentPath, activityId) { currentPath.push(activityId); // Find the next critical activity that is dependent on the current activity const nextActivities = dependencies.filter(dep => dep.source === activityId && criticalActivities.includes(dep.target)); if (nextActivities.length === 0) { // If no further dependencies, store the completed path criticalPaths.push([...currentPath]); } else { // Recursively explore all next critical activities nextActivities.forEach(dep => { explorePath([...currentPath], dep.target); }); } } // Start exploring paths from all critical activities criticalActivities.forEach(activityId => { // To avoid exploring the same path multiple times, we check if the activity is already in any path const alreadyInPath = criticalPaths.some(path => path.includes(activityId)); if (!alreadyInPath) { explorePath([], activityId); } }); // After exploring all paths, check if we have multiple paths if (criticalPaths.length === 1) { criticalPath = criticalPaths[0].join(" > "); criticalPath = ""+criticalPath+""; } else if (criticalPaths.length > 1) { criticalPath = "There are several critical paths."; } } // Prepare the links (dependencies) between activities const activityLinks = dependencies .map(dep => { const depSource = dep.source; const depTarget = dep.target; const sourceData = activityMap.get(depSource); const targetData = activityMap.get(depTarget); if (!sourceData || !targetData) { throw new Error(`Dependency data missing for: ${depSource} -> ${depTarget}`); } const isCriticalLink = sourceData.TotalFloat === 0 && targetData.TotalFloat === 0; return `${depSource} -> ${depTarget} [${isCriticalLink ? 'color=red, penwidth=2' : ''}];`; }) .join("\n"); // Legend node in a separate graph const legendNode = ` graph [ fontname="Arial", fontsize = 15, label=<

༺ Legend ༻

ES	Duration	EF
Activity Description
LS	Total Float	LF

➔ Critical Path Link

Start day is Day ${StartDateConvention}

>, color=blue]; } `; // Return the full Graphviz DOT format string and the critical path return { dot: ` digraph CPM { rankdir=${ orientation_LR ? "LR" : "TD"}; bgcolor = "${background}"; graph [fontname="Arial", labelloc="t", labeljust="l", pad=0.2]; edge [fontname="Arial"]; node [fontname="Arial", shape=plaintext]; ${activityNodes} ${activityLinks} ${show_legend? legendNode: ""} } `, criticalPath: criticalPath }; } catch (error) { console.error(error.message); return { error: error.message }; } } 3d:T5a4,layout = { let _id = 0; return function(layout) { return function * (parts, ...args) { yield html`

... loading ...

`; const str = parts.map((s, i) => s + (i < args.length ? args[i] : "")).join(""); const svg = graphviz.layout(str, "svg", layout); const id = ++_id; yield html`\

${svg}

`; setTimeout((id) => { var svgElement = d3.select(`#id_${id}`).select("svg"); // Set width dynamically svgElement.attr("width", `${width -60}px`); svgElement.attr("transform", "translate(30, 0)"); const svgHeight = svgElement.node().getBBox().height; svgElement.attr("height", `${svgHeight}px`); // Adjust the viewBox dynamically var g = svgElement.select("g"); var [x, y, _width, _height] = svgElement.attr("viewBox").split(" "); svgElement.attr("viewBox", `${x} ${y} ${_width} ${svgHeight+50}`); // Apply zoom functionality var zoom = d3.zoom(); svgElement.call(zoom.translateTo, width / 2, -svgHeight / 2 ); }, 1000, id); } } }; 3e:T4d9,// 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'); } 3f:[{"id":"7151ba80091e6133ec996d89c2311d7e934168e326146f20e9ec6f0e80b6be960e2738e843c9dd0205d33149fa3cdd0e1c745d6a8b373de6d0f9b0d300d4cc0e","href":"https://static.observableusercontent.com/files/7151ba80091e6133ec996d89c2311d7e934168e326146f20e9ec6f0e80b6be960e2738e843c9dd0205d33149fa3cdd0e1c745d6a8b373de6d0f9b0d300d4cc0e","name":"YouTube_shorts_icon.svg","type":"image/svg+xml","lastModified":1735057761442.76,"size":583},{"id":"8a5ddf785653b555cffc435d9e21f432a3e8bee18616a7d6e790b1c145a00b6cf09d27bb4e611dc77f32d906da7cd28a5ba3c435ad43a1e11e3a81bf74555120","href":"https://static.observableusercontent.com/files/8a5ddf785653b555cffc435d9e21f432a3e8bee18616a7d6e790b1c145a00b6cf09d27bb4e611dc77f32d906da7cd28a5ba3c435ad43a1e11e3a81bf74555120","name":"AON_diagram_apple_pie.png","type":"image/png","lastModified":1734949144011.207,"size":82164},{"id":"970ece38712f12757a76db4e83c17191470621c10805c187f44ff3e6eeac1c3b7f61f104102cf4188c9e64e76a99539aa58e7441c6d5e42266f102202c4db029","href":"https://static.observableusercontent.com/files/970ece38712f12757a76db4e83c17191470621c10805c187f44ff3e6eeac1c3b7f61f104102cf4188c9e64e76a99539aa58e7441c6d5e42266f102202c4db029","name":"download_ZIP_critical-path-method.mp4","type":"video/mp4","lastModified":1735301028908.422,"size":1431162},{"id":"d4c4c380c7745bfc3baa97dee82675d3ba26be37076be68a067348bae9078dedc2dd3f8c8fb38f31a49097c77eb81dfd2569b38c53a8bfb5f156f4cb21b7bb22","href":"https://static.observableusercontent.com/files/d4c4c380c7745bfc3baa97dee82675d3ba26be37076be68a067348bae9078dedc2dd3f8c8fb38f31a49097c77eb81dfd2569b38c53a8bfb5f156f4cb21b7bb22","name":"graphviz.js","type":"application/javascript","lastModified":1734783945753.888,"size":659747},{"id":"be914a47f03e5c0c4527e95b5960e2afed7f7bad1b1c0be51a4a3fa34b7ce6b8d39358228e1304dad68879296df5c0bffb3a7e054fa75a2eaa6cf6dd7bd5ad9f","href":"https://static.observableusercontent.com/files/be914a47f03e5c0c4527e95b5960e2afed7f7bad1b1c0be51a4a3fa34b7ce6b8d39358228e1304dad68879296df5c0bffb3a7e054fa75a2eaa6cf6dd7bd5ad9f","name":"IC-Critical-Path-Network-Diagram-Example.webp","type":"image/webp","lastModified":1734803191307.383,"size":29696},{"id":"62221829257a3a122b92d9101afa4d581dc7ae833eb32873e9957722dafd85804137867a21bb6a0e30ea02e399e3aa0589519668deecd0079ec2ce4c276a53af","href":"https://static.observableusercontent.com/files/62221829257a3a122b92d9101afa4d581dc7ae833eb32873e9957722dafd85804137867a21bb6a0e30ea02e399e3aa0589519668deecd0079ec2ce4c276a53af","name":"Lez07-projectplanning.pdf","type":"application/pdf","lastModified":1734822961828.972,"size":58432},{"id":"a633664a6dbc404cdcb25cdf9becdda2dea21a72a7dfd8f5c1d5cf0b10ad515460d8d130b909e58a7b813a156bcb59141398e1dc336d664c203e604c380c36e9","href":"https://static.observableusercontent.com/files/a633664a6dbc404cdcb25cdf9becdda2dea21a72a7dfd8f5c1d5cf0b10ad515460d8d130b909e58a7b813a156bcb59141398e1dc336d664c203e604c380c36e9","name":"graphviz+CodePen.png","type":"image/png","lastModified":1735650483111.128,"size":45389},{"id":"bb02ab96cae5850e92c4e0640428ecd3698eadf44f35ef8d7c56b2c8f1e3f1ac9301e2d1a47bb765350d2358336102368907d7841f25bd116840a18eab965cf7","href":"https://static.observableusercontent.com/files/bb02ab96cae5850e92c4e0640428ecd3698eadf44f35ef8d7c56b2c8f1e3f1ac9301e2d1a47bb765350d2358336102368907d7841f25bd116840a18eab965cf7","name":"handsontable.full.min.css","type":"text/css","lastModified":1735772351611.919,"size":40378},{"id":"1b1617e3a6992b98bf0be5d8e689ab9244d88b166ce5923b47e4aa674eecdc430ee4164b604c4228b7a829b6de03d9ed9afc30c0c4693e9a4aafdeb76d217667","href":"https://static.observableusercontent.com/files/1b1617e3a6992b98bf0be5d8e689ab9244d88b166ce5923b47e4aa674eecdc430ee4164b604c4228b7a829b6de03d9ed9afc30c0c4693e9a4aafdeb76d217667","name":"handsontable.full.min.js","type":"application/javascript","lastModified":1735772361182.633,"size":1769611},{"id":"c9b58818c22d45226cc811ebc6e58279a7b35fe3a05ef0e33b8741f523274a1f388feb52366761489236bf6499a11af5c7089cab62268d769d587aef867f589d","href":"https://static.observableusercontent.com/files/c9b58818c22d45226cc811ebc6e58279a7b35fe3a05ef0e33b8741f523274a1f388feb52366761489236bf6499a11af5c7089cab62268d769d587aef867f589d","name":"CPM_AON_examples@1.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1735853053627.435,"size":35029},{"id":"79e7a1811b5af84645e2586bfd91f1ee2b9952ba3fba9f74bbf3e25a2a46d9e00d09ac56ae279272b88b1d3b768a2e95328453a1ada8cd7f0a399702f518f4d8","href":"https://static.observableusercontent.com/files/79e7a1811b5af84645e2586bfd91f1ee2b9952ba3fba9f74bbf3e25a2a46d9e00d09ac56ae279272b88b1d3b768a2e95328453a1ada8cd7f0a399702f518f4d8","name":"CPM_critical-path-method_(A)@1.zip","type":"application/zip","lastModified":1735989063236.105,"size":1267842},{"id":"037f8708361c7d1acd930796bb89887ec2317fc73685150121db349bd11af6855ce3607c8a9271b07774564c82b9a63c92554b7dff49a9a5476b0612ffe5a0c0","href":"https://static.observableusercontent.com/files/037f8708361c7d1acd930796bb89887ec2317fc73685150121db349bd11af6855ce3607c8a9271b07774564c82b9a63c92554b7dff49a9a5476b0612ffe5a0c0","name":"CPM_critical-path-method_(B)@8.zip","type":"application/zip","lastModified":1736805223912.534,"size":1697553}] 2f:{"title":"Critical Path Method (CPM)","cells":[{"id":0,"value":"# Critical Path Method (CPM)","pinned":false,"hidden":false,"mode":"md"},{"id":704,"value":"*This notebook is designed to explore the Critical Path Method (CPM) using the dynamic capabilities of JavaScript.*\n\n📋 **Getting Started**\n\nTo generate a scheduling network diagram, start by preparing a list of Activities and Dependencies. Use a plain text editor (e.g., Notepad++) and follow the structure outlined below.\n

\n**Key Notes:**\n- Each CPM begins with a “Start” node and ends with a “Finish” node. These nodes serve as structural markers to define the logical flow of activities.\n- While activity-on-arrow diagrams were once common, this notebook uses the more modern and widely adopted **activity-on-node** (AON) format.","pinned":false,"hidden":false,"mode":"md"},{"id":1300,"value":"aon_diagram_apple_pie = {\n const container = html`\n

Activity-on-Node (AON) Diagram: Apple Pie Preparation. This example is explained in greater detail within the notebook.\n

👆🏻 Click to resize the illustration.\n

`;\n\n container.onclick = () => {\n const currentWidth = container.style.width;\n container.style.width = currentWidth === \"600px\" ? \"calc(100% - 60px)\": \"600px\";\n };\n\n return container; \n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1410,"value":"
\n🔗 For your convenience, the following CodePen projects gather the essential features of this notebook, enabling you to create AON diagrams on the fly:\n
[ A: Text Form | B: Spreadsheet ]","pinned":false,"hidden":false,"mode":"md"},{"id":1677,"value":"↥ These CodePen projects are also available as standalone packages: \n

\n 📦 CPM_critical-path-method_(A).zip (1.2 MB) \n
📦 CPM_critical-path-method_(B).zip (1.6 MB)\n
(downloadable files available from the ᥫ Files Pane).

","pinned":false,"hidden":false,"mode":"html"},{"id":1720,"value":"

ⓘ Unzip the [ZIP] archive and open the index.html file in a web browser.\n

","pinned":false,"hidden":false,"mode":"html"},{"id":1735,"value":"➔ Simply unzip the [ZIP] archive and open the index.html file in a web browser. \n It runs fully offline, with zero external dependencies (i.e., no libraries will be downloaded).","pinned":false,"hidden":false,"mode":"md"},{"id":536,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":529,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":1422,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":2411,"value":"## Building the AON Diagram\nTo generate the AON diagram automatically, you will need to complete two steps: \n1. Entering the **activities** and their durations.\n2. Defining the **dependencies** between the activities.\n\n↳ **Method A**: Update the *Text Fields* ① Activities and ② Dependencies\n(see below)\n\n↳ **Method B**: Update the *Spreadsheet* with Activities & dependencies (①+②)\n

","pinned":false,"hidden":false,"mode":"md"},{"id":2568,"value":"viewof clear_data_1 = Inputs.button(html`Clear All Data`, {\n reduce: () => {\n mutable activities_data = \"\";\n mutable dependencies_data = \"\";\n mutable spreadsheet_data = [\n [\"Start\", \"-\", \"-\", \"Start\"],\n [\"Finish\", \"-\", \"\", \"Finish\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n ];\n const div = document.getElementById('spreadsheet');\n div.innerHTML = '';\n }\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":2795,"value":"method_A = md`\n### Method A \n##### [see also CodePen A: Text Form]\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2789,"value":"initialize_fields_construction = Inputs.button(html`Use pre-set example`, {\n label: html`Initialize text fields with example data`,\n value: null,\n reduce: () => {\n mutable spreadsheet_data = [\n [\"Start\", \"-\", \"-\", \"Start\"],\n [\"Finish\", \"-\", \"\", \"Finish\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n ];\n const div = document.getElementById('spreadsheet');\n div.innerHTML = ''; \n mutable activities_data = construction_activities; \n mutable dependencies_data = construction_dependencies; \n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"#### ① Activities\n\nThe *textarea* below lists the activities and their durations. You can modify this section to reflect your project’s specific activities.","pinned":false,"hidden":false,"mode":"md"},{"id":337,"value":"viewof activitiesInput = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"#### ② Dependencies\nOnce the activities are entered, define the dependencies between them in the following format (*e.g.*, **A > B** means that **A** is a preceding activity to **B**).","pinned":false,"hidden":false,"mode":"md"},{"id":278,"value":"viewof dependenciesInput = {\n return html`\n\n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2797,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":2917,"value":"viewof clear_data_2 = Inputs.button(html`Clear All Data`, {\n reduce: () => {\n mutable activities_data = \"\";\n mutable dependencies_data = \"\";\n mutable spreadsheet_data = [\n [\"Start\", \"-\", \"-\", \"Start\"],\n [\"Finish\", \"-\", \"\", \"Finish\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n ];\n const div = document.getElementById('spreadsheet');\n div.innerHTML = '';\n }\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"#### ➲ Schedule Network Diagram\nThe following **Schedule Network Diagram** is dynamically generated based on the activities and dependencies you provide. The **critical path**, which represents the longest sequence of dependent activities, is highlighted in red: \n
critical path activity | ➔ critical path link.","pinned":false,"hidden":false,"mode":"md"},{"id":742,"value":"

\nCritical path: ${generateDot(activities, dependencies, activityMap).criticalPath || \"?\"}\n${activityMap.get(\"Finish\").ES > 0 ? `(duration → ${activityMap.get(\"Finish\").ES} units)` : \"\"}\n

\n\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"CPM_diagram = dot`${generateDot(activities, dependencies, activityMap).dot || \"\"}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1602,"value":"viewof background = Inputs.color({label: html`Background color`, value: \"#ffffff\", datalist: [\"#ffffff\",\"#fafeff\",\"#fbfefc\",\"#faf9f5\",\"#fffafb\",\n \"#ededed\",\"#ebedff\",\"#e4ece7\",\"#eeeadd\",\"#f1e9eb\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2224,"value":"viewof activityColor = Inputs.color({label: html`Activity cell color`, value: \"#f1fafa\", datalist: [\"#ffffff\",\"#f1fafa\",\"#fbfefc\",\"#faf9f5\",\"#fffafb\",\n \"#ededed\",\"#ebedff\",\"#e4ece7\",\"#eeeadd\",\"#f1e9eb\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2237,"value":"viewof StartDateConvention = Inputs.radio(new Map([[\"Day 0\", 0], [\"Day 1\", 1]]), {value: 0, label: html`Start day
(recommendation)`, format: ([name, value]) => html`${name}`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1516,"value":"viewof show_legend = Inputs.toggle({label: htl.html`Insert legend`, value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"viewof hideActivityID = Inputs.toggle({label: htl.html`Hide activity ID`, value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2183,"value":"viewof DescriptionItalic = Inputs.toggle({label: htl.html`Description in italic`, value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"viewof orientation_LR = Inputs.toggle({label: htl.html`Horizontal orientation (→)`, value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":952,"value":"DOM.download(() => serialize(CPM_diagram), \"CPM_diagram\", \"Save as SVG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2914,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":2907,"value":"viewof clear_data_3 = Inputs.button(html`Clear All Data`, {\n reduce: () => {\n mutable activities_data = \"\";\n mutable dependencies_data = \"\";\n mutable spreadsheet_data = [\n [\"Start\", \"-\", \"-\", \"Start\"],\n [\"Finish\", \"-\", \"\", \"Finish\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n ];\n const div = document.getElementById('spreadsheet');\n div.innerHTML = '';\n }\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"method_B = md`\n### Method B\n##### [see also CodePen B: Spreadsheet]\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2551,"value":"viewof update_spreadsheet = Inputs.button(\"Use pre-set example\", {\n label: html`Initialize spreadsheet with example data`,\n reduce: () => {\n mutable activities_data = \"\";\n mutable dependencies_data = \"\";\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"},{"id":2801,"value":"#### ①+② Spreadsheet with Activities & dependencies\nIf your data is organized in a table with defined activities and their dependencies, you can directly extract the data for activities and dependencies.\n\nYou can either paste your data into the spreadsheet or initialize it with the provided example.","pinned":false,"hidden":false,"mode":"md"},{"id":2520,"value":"spreadsheet_display = {\n const container = html`\n\n
\n`\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2938,"value":"
\n
\n
\n ${Inputs.button(html`Update Fields
and Diagram`, {\n label: html`Extract data from spreadsheet`,\n value: null,\n reduce: () => {\n extractFromSpreadsheet();\n document.getElementById(\"critical_path\").scrollIntoView();\n }, \n })}\n
\n
\n
\n \n Note: You must click the button to update the diagram. \n Until then, the AON diagram will display information based on the text fields from Method A.\n \n
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":2817,"value":"
\n\n---","pinned":false,"hidden":false,"mode":"md"},{"id":571,"value":"reference_example = md`\n## Reference Example: House Construction 🏗️\nThe pre-set example used in this notebook is derived from a webpage by Kate Eby, which offers a comprehensive explanation of CPM Scheduling. \n
↧ You may also want to explore the “Building a house” historical example.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2103,"value":"update_fields_construction = Inputs.button(html`Copy to Fields`, {\n label: html`Reset fields
to this example`,\n value: null,\n reduce: () => {\n mutable spreadsheet_data = [\n [\"Start\", \"-\", \"-\", \"Start\"],\n [\"Finish\", \"-\", \"\", \"Finish\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n ];\n const div = document.getElementById('spreadsheet');\n div.innerHTML = ''; \n mutable activities_data = construction_activities; \n mutable dependencies_data = construction_dependencies; \n document.getElementById(\"critical_path\").scrollIntoView();\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"icCriticalPathNetworkDiagramExample = FileAttachment(\"IC-Critical-Path-Network-Diagram-Example.webp\").image({width: 800, style: \"margin-left: 50px;\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1645,"value":"## Practical Example: Apple Pie 🥧\n**Source:** Solved exercises for the course of\nFoundations of Operations Research, Roberto Cordone \n[PDF file downloadable from the ᥫ Files Pane]\n
► https://homes.di.unimi.it/cordone/courses/2014-for/Lez07-projectplanning.pdf
(link visited in Dec. 2024)
","pinned":false,"hidden":false,"mode":"md"},{"id":795,"value":"Problem statement: \n
\nThe preparation of the apple pie has long been a tradition for the Smith family.\nFirst, the weight of the ingredients must be determined: flour, sugar, butter,\neggs, apples, cream. Then, we must melt down the butter and add it to a mixture\nof flour, sugar, and eggs. Apples must be added to this new mixture, once they\nhave been peeled and cut into thin slices. The mixture can then be cooked in the \nalready heated oven. It is advised to whip the cream only after the apple slices \nhave been added to the mixture. Once the cake is cooked, the cream is used to garnish it.\n
\n
\nThe following table reports the time needed for each activity.\n","pinned":false,"hidden":false,"mode":"html"},{"id":798,"value":"| Activity ID | Time (min) | Description |\n|-------------|------------|-------------------------------------|\n| Start | - | Start |\n| Finish | - | Finish |\n| A | 5 | Weigh the ingredients |\n| B | 3 | Melt the butter down |\n| C | 5 | Mix flour, eggs, and sugar |\n| D | 10 | Peel and cut the apples into slices |\n| E | 20 | Heat the oven |\n| F | 8 | Add butter to the mixture |\n| G | 4 | Add apples to the mixture |\n| H | 40 | Cook the mixture in the oven |\n| I | 10 | Whip the cream |\n| L | 5 | Garnish |\n","pinned":false,"hidden":false,"mode":"md"},{"id":1633,"value":"
\n\n\n
\n \nYouTube Short: Critical Path Method (CPM): Schedule Network Diagram ","pinned":false,"hidden":false,"mode":"html"},{"id":2092,"value":"**Solution:**\nFrom the textual description of the problem, it is possible to derive the precedence relations given below.\n\n📋 *To see the solution, simply copy the text below into the input fields above.*","pinned":false,"hidden":false,"mode":"md"},{"id":804,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":695,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":700,"value":"📋 If you would like to try one of these examples, simply copy/paste the text below into the
input fields above (Method A).","pinned":false,"hidden":false,"mode":"html"},{"id":2870,"value":"🧾 If you prefer using spreadsheets (Method B), you can download the Excel file containing
the examples featured in this notebook. Check the ᥫ Files Pane.","pinned":false,"hidden":false,"mode":"html"},{"id":732,"value":"**Example A**: Cooking a steak for dinner\n
\n
\n
Activities
\n
\nStart - \"Start cooking\"\nFinish - \"Dinner's ready\" \nA 5 \"Gather ingredients\"\nB 5 \"Prepare meat\"\nC 10 \"Cook meat\"\nD 2 \"Serve\"\nE 5 \"Preheat oven\"\nF 10 \"Chop vegetables\"\nG 20 \"Roast vegetables\"
\n
\n
\n
Dependencies
\n
\nStart>A\nA>B\nB>C\nC>D\nA>E\nE>G\nG>D\nA>F\nF>G\nD>Finish
\n
\n
\n","pinned":false,"hidden":false,"mode":"md"},{"id":1779,"value":"**Example B**: Time estimates for a production line (Hours, precise to 1 decimal place). \n→ You shall use Day 0 convention for this example.\n
\n
\n
Activities
\n
\nStart - \"Start\"\nFinish - \"End\" \nA 6.0 \"A\"\nB 7.2 \"B\"\nC 5.0 \"C\"\nD 6.0 \"D\"\nE 4.5 \"E\"\nF 7.7 \"F\"\nG 4.0 \"G\"
\n
\n
\n
Dependencies
\n
\nStart>A\nStart>B\nA>C\nB>D\nC>D\nB>E\nC>E\nD>F\nE>G\nF>G\nG>Finish
\n
\n
","pinned":false,"hidden":false,"mode":"md"},{"id":698,"value":"**Example C**:\n
\n
\n
Activities
\n
\nStart - \"Start\"\nFinish - \"Finish\" \nA 6 \"A\"\nB 4 \"B\"\nC 3 \"C\"\nD 4 \"D\"\nE 3 \"E\"\nF 10 \"F\"\nG 3 \"G\"\nH 2 \"H\"
\n
\n
\n
Dependencies
\n
\nStart>A\nStart>B\nStart>F\nA>C\nB>D\nB>E\nE>G\nF>G\nC>H\nD>H\nG>Finish\nH>Finish
\n
\n
","pinned":false,"hidden":false,"mode":"md"},{"id":1193,"value":"**Example D**:\n
\n
\n
Activities
\n
\nStart - \"Start\"\nFinish - \"Finish\" \nA 3 \"A\"\nB 4 \"B\"\nC 6 \"C\"\nD 3 \"D\"\nE 9 \"E\"\nF 1 \"F\"\nG 4 \"G\"\nH 5 \"H\"\nI 4 \"I\"\nJ 3 \"J\"\nK 6 \"K\"\nL 3 \"L\"\nM 6 \"M\"\nN 9 \"N\"
\n
\n
\n
Dependencies
\n
\nStart>A\nStart>B\nStart>C\nB>D\nA>E\nA>F\nB>G\nC>H\nD>H\nC>I\nD>I\nE>J\nF>K\nG>K\nH>K\nF>L\nG>L\nH>L\nI>M\nJ>N\nK>N\nL>Finish\nM>Finish\nN>Finish
\n
\n
\n","pinned":false,"hidden":false,"mode":"md"},{"id":587,"value":"**Example E**:\n
\n
\n
Activities
\n
\nStart - \"Start\"\nFinish - \"Finish\"\nA 2 \"A\"\nB 3 \"B\"\nC 3 \"C\"\nD 10 \"D\"\nE 4 \"E\"\nF 6 \"F\"\nG 3 \"G\"
\n
\n
\n
Dependencies
\n
\nStart>A\nA>B\nB>C\nC>F\nA>D\nD>F\nD>E\nE>G\nF>G\nG>Finish
\n
\n
\n","pinned":false,"hidden":false,"mode":"md"},{"id":2162,"value":"**Example F**:\n
\n
\n
Activities
\n
\nStart - \"Start\"\nFinish - \"Finish\"\nA 5 \"A\"\nB 6 \"B\"\nC 3 \"C\"\nD 4 \"D\"\nE 2 \"E\"\nF 1 \"F\"
\n
\n
\n
Dependencies
\n
\nStart>A\nA>B\nB>D\nD>F\nA>C\nC>E\nB>E\nE>F\nF>Finish
\n
\n
\n","pinned":false,"hidden":false,"mode":"md"},{"id":2165,"value":"**Example G**:\n
\n
\n
Activities
\n
\nStart - \"Start\"\nFinish - \"Finish\"\nA 1 \"A\"\nB 2 \"B\"\nC 2 \"C\" \nD 4 \"D\"\nE 1 \"E\"\nF 2 \"F\"\nG 3 \"G\"\nH 1 \"H\"\nI 4 \"I\"\nJ 1 \"J\"\nK 3 \"K\"\nL 4 \"L\"\nM 1 \"M\"
\n
\n
\n
Dependencies
\n
\nStart>A\nStart>B\nA>C\nA>D\nB>E\nC>F\nD>F\nE>G\nG>H\nG>I\nF>J\nJ>K\nH>K\nI>L\nK>M\nL>M\nM>Finish
\n
\n
\n","pinned":false,"hidden":false,"mode":"md"},{"id":2170,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":2336,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2453,"value":"$36","pinned":false,"hidden":false,"mode":"md"},{"id":2468,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":2110,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2112,"value":"viewof display_inspect = Inputs.toggle({label: \"⇣ Check to inspect variables and functions\", values: [\"true\", \"none\"], value: \"none\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"\n
\n${display_inspect == \"none\"? html`
⇣ Appendix is hidden ...
` : md`## Appendix`}","pinned":false,"hidden":false,"mode":"html"},{"id":114,"value":"$${display_inspect == \"none\"? \"\" : md`### Critical path functions`}","pinned":false,"hidden":false,"mode":"md"},{"id":366,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":660,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"$${display_inspect == \"none\"? \"\" : md`### Graphviz`}","pinned":false,"hidden":false,"mode":"md"},{"id":103,"value":"graphviz = GraphvizModule.Graphviz.load();","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"// GraphvizModule = import ('@hpcc-js/wasm/dist/graphviz');\nGraphvizModule = import(await FileAttachment(\"graphviz.js\").url())","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"dot = layout(\"dot\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":2524,"value":"$${display_inspect == \"none\"? \"\" : md`### Handsontable`}","pinned":false,"hidden":false,"mode":"md"},{"id":2527,"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"},{"id":2530,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":2536,"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' }, // Predecessors\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"},{"id":2556,"value":"mutable spreadsheet_data = [\n [\"Start\", \"-\", \"-\", \"Start\"],\n [\"Finish\", \"-\", \"\", \"Finish\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n [\"\", \"\", \"\", \"\"],\n ];","pinned":false,"hidden":false,"mode":"ojs"},{"id":1919,"value":"$${display_inspect == \"none\"? \"\" : md`### Other`}","pinned":false,"hidden":false,"mode":"md"},{"id":963,"value":"// https://observablehq.com/@mbostock/saving-svg\nserialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serialize(svg) {\n svg = svg.cloneNode(true);\n const fragment = window.location.href + \"#\";\n const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT);\n while (walker.nextNode()) {\n for (const attr of walker.currentNode.attributes) {\n if (attr.value.includes(fragment)) {\n attr.value = attr.value.replace(fragment, \"#\");\n }\n }\n }\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"activities = parseActivities(activitiesInput);","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"dependencies = parseDependencies(dependenciesInput,activities);","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"activityMap = calculateSchedule(activities, dependencies);\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2539,"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"},{"id":1911,"value":"mutable activities_data = construction_activities","pinned":false,"hidden":false,"mode":"ojs"},{"id":1915,"value":"mutable dependencies_data = construction_dependencies","pinned":false,"hidden":false,"mode":"ojs"},{"id":1903,"value":"construction_activities = `Start - \"Start\"\nFinish 0 \"Finish\"\n\nA 4 \"Clear site\"\nB 3.0 \"Lay foundation\"\nC 12 \"Rough framing\"\nD 3 \"Install windows,
doors\"\nE 4 \"Install drywall\"\nJ 2 \"Interior paint\"\nF 3 \"Install carpet,
flooring\"\nG 5 \"Install electrical,
plumbing\"\nH 2 \"Install fixtures\"\nI 2 \"Install faucets\"\nK 1 \"Final inspection\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1907,"value":"construction_dependencies = `Start > A\nA > B\nB > C\nC > D\nD > E\nE > F\nF > K\nC > G\nG > H\nH > K\nG > I\nI > K\nE > J\nJ > K\nK > Finish`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1878,"value":"apple_pie_activities = `Start\t\t- \"Start\"\nFinish - \"Finish\"\nA\t\t5 \"Weigh the ingredients\"\nB\t\t3 \"Melt the butter down\"\nC\t\t5 \"Mix flour, eggs, and sugar\"\nD\t\t10 \"Peel and cut the apples into slices\"\nE\t\t20 \"Heat the oven\"\nF\t\t8 \"Add butter to the mixture\"\nG\t\t4 \"Add apples to the mixture\"\nH\t\t40 \"Cook the mixture in the oven\"\nI\t\t10 \"Whip the cream\"\nL\t\t5 \"Garnish\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1886,"value":"apple_pie_dependencies = `Start > A\nStart > E\nA > B\nA > C\nA > D\nB > F\nC > F\nD > G\nF > G\nE > H\nG > H\nG > I\nH > L\nI > L\nL > Finish`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3f","stdlib":"1","titling":"auto"}