pairwiseNetworkNotebook = function(data, counts, { d3, width = 1080, height = 620 } = {}) { const container = document.createElement("div"); const phases = Object.keys(data || {}).filter(k => data[k]); const schoolSet = new Set(); phases.forEach(phase => { Object.keys(data[phase] || {}).forEach(school => schoolSet.add(school)); }); const schoolOptions = Array.from(schoolSet); schoolOptions.sort((a, b) => { if (a === "All") return -1; if (b === "All") return 1; return a.localeCompare(b); }); const modeLabels = { single: "Single", overlay: "Overlay", delta: "Delta", compare: "Compare schools", compareRank: "Compare pair rank" }; const modeDescriptions = { single: "One dataset at a time", overlay: "Pre and Post side by side", delta: "How values changed from Pre to Post", compare: "Raw pair counts by school", compareRank: "Pair priority ranking by school" }; const colorA = "#2563eb"; const colorB = "#7c3aed"; const colorPre = "#2563eb"; const colorPost = "#f59e0b"; const style = document.createElement("style"); style.textContent = ` .pw-wrap{ font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#111827; background:#ffffff; width:100%; } .pw-controls{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; margin-bottom:16px; } .pw-tabbox, .pw-filterbox{ border:1px solid #e5e7eb; border-radius:14px; padding:12px; background:#fafafa; } .pw-tabbox{ display:flex; gap:8px; flex-wrap:wrap; } .pw-tab{ border:1px solid #d1d5db; background:white; color:#374151; border-radius:10px; padding:8px 12px; font-size:13px; line-height:1.2; cursor:pointer; transition:all 0.15s ease; } .pw-tab.active{ border-color:#111827; background:#111827; color:white; } .pw-tab small{ display:block; opacity:.75; font-size:11px; margin-top:3px; } .pw-filterbox{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; } .pw-field{ display:flex; flex-direction:column; gap:5px; min-width:132px; } .pw-field label{ font-size:11px; color:#6b7280; letter-spacing:.02em; text-transform:uppercase; } .pw-field select{ border:1px solid #d1d5db; border-radius:10px; padding:8px 10px; background:white; font-size:13px; color:#111827; } .pw-main{ display:grid; grid-template-columns:minmax(220px, 320px) 10px minmax(420px, 1fr); gap:0; align-items:start; } .pw-resizer{ cursor:col-resize; background:transparent; position:relative; } .pw-resizer::after{ content:""; position:absolute; top:0; bottom:0; left:4px; width:2px; background:#e5e7eb; border-radius:2px; } .pw-summary{ border:1px solid #e5e7eb; border-radius:14px; background:#fbfbfb; padding:14px; min-height:${height}px; box-sizing:border-box; } .pw-summary h3{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#6b7280; margin:0 0 12px 0; font-weight:600; } .pw-summary .item{ margin-bottom:12px; } .pw-summary .k{ font-size:11px; color:#6b7280; text-transform:uppercase; letter-spacing:.03em; margin-bottom:3px; } .pw-summary .v{ font-size:14px; color:#111827; line-height:1.4; } .pw-chartpanel{ border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; background:white; } .pw-chart{ padding:8px 8px 0 8px; } .pw-note{ border-top:1px solid #f0f0f0; padding:10px 14px 8px 14px; font-size:12px; color:#4b5563; background:#fcfcfc; } .pw-tablewrap{ padding:0 14px 14px 14px; background:#fcfcfc; } .pw-table{ width:100%; border-collapse:collapse; font-size:13px; background:white; border:1px solid #ececec; border-radius:10px; overflow:hidden; } .pw-table th{ text-align:left; font-weight:600; color:#374151; background:#f9fafb; border-bottom:1px solid #ececec; padding:10px 12px; } .pw-table td{ padding:9px 12px; border-bottom:1px solid #f3f4f6; color:#111827; } .pw-table tr:last-child td{ border-bottom:none; } .pw-empty{ padding:18px 2px; color:#6b7280; font-size:13px; } .pw-legenddot{ display:inline-block; width:10px; height:10px; border-radius:999px; margin-right:6px; position:relative; top:1px; } `; container.appendChild(style); const ui = document.createElement("div"); ui.className = "pw-wrap"; ui.innerHTML = `

`; container.appendChild(ui); const tabBox = ui.querySelector("#tabBox"); const phaseSelect = ui.querySelector("#phaseSelect"); const schoolSelect = ui.querySelector("#schoolSelect"); const schoolASelect = ui.querySelector("#schoolASelect"); const schoolBSelect = ui.querySelector("#schoolBSelect"); const phaseWrap = ui.querySelector("#phaseWrap"); const schoolWrap = ui.querySelector("#schoolWrap"); const schoolAWrap = ui.querySelector("#schoolAWrap"); const schoolBWrap = ui.querySelector("#schoolBWrap"); const summaryEl = ui.querySelector("#summary"); const chartEl = ui.querySelector("#chart"); const noteEl = ui.querySelector("#note"); const tableWrap = ui.querySelector("#tableWrap"); const mainLayout = ui.querySelector("#mainLayout"); const resizer = ui.querySelector("#resizer"); let state = { mode: "single", phase: phases.includes("Pre") ? "Pre" : phases[0], school: schoolOptions.includes("All") ? "All" : schoolOptions[0], schoolA: schoolOptions.includes("All") ? "All" : schoolOptions[0], schoolB: schoolOptions.find(d => d !== "All") || schoolOptions[0] }; function edgeKey(a, b) { return [a, b].sort().join("||"); } function getAllNodeNames() { const set = new Set(["Art", "Family", "Fun", "Friends", "School"]); phases.forEach(phase => { Object.values(data[phase] || {}).forEach(edges => { (edges || []).forEach(e => { set.add(e.source); set.add(e.target); }); }); }); return Array.from(set); } const nodeNames = getAllNodeNames(); function getNodePositions(names, w, h) { const preset = { Art: { x: w * 0.18, y: h * 0.22 }, Family: { x: w * 0.47, y: h * 0.47 }, Friends: { x: w * 0.79, y: h * 0.24 }, Fun: { x: w * 0.22, y: h * 0.76 }, School: { x: w * 0.76, y: h * 0.74 } }; const missing = names.filter(n => !preset[n]); const fallbackRadius = Math.min(w, h) * 0.33; missing.forEach((name, i) => { const angle = (Math.PI * 2 * i) / Math.max(1, missing.length) - Math.PI / 2; preset[name] = { x: w / 2 + Math.cos(angle) * fallbackRadius, y: h / 2 + Math.sin(angle) * fallbackRadius }; }); return preset; } function getEdges(phase, school) { return ((data[phase] || {})[school] || []).map(d => ({ source: d.source, target: d.target, weight: +d.weight || 0 })); } function toMap(edges) { const map = new Map(); edges.forEach(e => { map.set(edgeKey(e.source, e.target), { source: e.source, target: e.target, weight: +e.weight || 0 }); }); return map; } function listAllPairs() { const map = new Map(); phases.forEach(phase => { Object.values(data[phase] || {}).forEach(edges => { (edges || []).forEach(e => { const key = edgeKey(e.source, e.target); if (!map.has(key)) { map.set(key, { source: [e.source, e.target].sort()[0], target: [e.source, e.target].sort()[1] }); } }); }); }); return Array.from(map.values()); } const allPairs = listAllPairs(); function getSingleRows(phase, school) { return getEdges(phase, school) .map(d => ({ pair: `${d.source} — ${d.target}`, source: d.source, target: d.target, weight: d.weight })) .sort((a, b) => d3.descending(a.weight, b.weight)); } function getOverlayRows(school) { const preMap = toMap(getEdges("Pre", school)); const postMap = toMap(getEdges("Post", school)); return allPairs.map(pair => { const key = edgeKey(pair.source, pair.target); const pre = preMap.get(key)?.weight || 0; const post = postMap.get(key)?.weight || 0; return { pair: `${pair.source} — ${pair.target}`, source: pair.source, target: pair.target, pre, post, delta: post - pre }; }).sort((a, b) => d3.descending(Math.max(a.pre, a.post), Math.max(b.pre, b.post))); } function getDeltaRows(school) { return getOverlayRows(school) .sort((a, b) => d3.descending(Math.abs(a.delta), Math.abs(b.delta))); } function getCompareRows(phase, schoolA, schoolB) { const aMap = toMap(getEdges(phase, schoolA)); const bMap = toMap(getEdges(phase, schoolB)); return allPairs.map(pair => { const key = edgeKey(pair.source, pair.target); const a = aMap.get(key)?.weight || 0; const b = bMap.get(key)?.weight || 0; return { pair: `${pair.source} — ${pair.target}`, source: pair.source, target: pair.target, a, b, delta: b - a }; }).sort((a, b) => d3.descending(Math.max(a.a, a.b), Math.max(b.a, b.b))); } function rankEdges(edges) { const sorted = [...edges].sort((a, b) => d3.descending(a.weight, b.weight)); const rankMap = new Map(); sorted.forEach((d, i) => { rankMap.set(edgeKey(d.source, d.target), { ...d, rank: i + 1 }); }); return rankMap; } function getCompareRankRows(phase, schoolA, schoolB) { const aRank = rankEdges(getEdges(phase, schoolA)); const bRank = rankEdges(getEdges(phase, schoolB)); return allPairs.map(pair => { const key = edgeKey(pair.source, pair.target); const aItem = aRank.get(key); const bItem = bRank.get(key); const aWeight = aItem?.weight || 0; const bWeight = bItem?.weight || 0; const aRankValue = aItem?.rank ?? null; const bRankValue = bItem?.rank ?? null; return { pair: `${pair.source} — ${pair.target}`, source: pair.source, target: pair.target, a: aWeight, b: bWeight, aRank: aRankValue, bRank: bRankValue, rankDelta: aRankValue == null || bRankValue == null ? null : bRankValue - aRankValue }; }).sort((x, y) => { const xr = x.aRank ?? 999; const yr = y.aRank ?? 999; return d3.ascending(xr, yr); }); } function getRowsForCurrentState() { if (state.mode === "single") return getSingleRows(state.phase, state.school); if (state.mode === "overlay") return getOverlayRows(state.school); if (state.mode === "delta") return getDeltaRows(state.school); if (state.mode === "compare") return getCompareRows(state.phase, state.schoolA, state.schoolB); return getCompareRankRows(state.phase, state.schoolA, state.schoolB); } function computeDegrees(rows, mode) { const degree = new Map(nodeNames.map(n => [n, 0])); rows.forEach(row => { let value = 0; if (mode === "single") value = row.weight; if (mode === "overlay") value = Math.max(row.pre, row.post); if (mode === "delta") value = Math.abs(row.delta); if (mode === "compare") value = Math.max(row.a, row.b); if (mode === "compareRank") { const aStrength = row.aRank == null ? 0 : (11 - row.aRank); const bStrength = row.bRank == null ? 0 : (11 - row.bRank); value = Math.max(aStrength, bStrength); } degree.set(row.source, (degree.get(row.source) || 0) + value); degree.set(row.target, (degree.get(row.target) || 0) + value); }); return degree; } function strongestText(rows, mode) { const nonZero = rows.filter(row => { if (mode === "single") return row.weight > 0; if (mode === "overlay") return Math.max(row.pre, row.post) > 0; if (mode === "delta") return Math.abs(row.delta) > 0; if (mode === "compare") return Math.max(row.a, row.b) > 0; if (mode === "compareRank") return row.aRank != null || row.bRank != null; return false; }); if (!nonZero.length) return "No data yet"; const top = nonZero.slice(0, 3).map(row => { if (mode === "single") { return `${row.pair} (${row.weight})`; } if (mode === "overlay") { return `${row.pair} (Pre ${row.pre} / Post ${row.post})`; } if (mode === "delta") { const direction = row.delta > 0 ? "Increase" : row.delta < 0 ? "Decrease" : "No change"; return `${row.pair} (${direction} ${row.delta > 0 ? "+" : ""}${row.delta})`; } if (mode === "compare") { return `${row.pair} (${state.schoolA} ${row.a} / ${state.schoolB} ${row.b})`; } if (mode === "compareRank") { return `${row.pair} (${state.schoolA} rank ${row.aRank ?? "-"} / ${state.schoolB} rank ${row.bRank ?? "-"})`; } return row.pair; }); return top.join("
"); } function curvePath(p1, p2, bendFactor = 0.15, offset = 0) { const dx = p2.x - p1.x; const dy = p2.y - p1.y; const len = Math.hypot(dx, dy) || 1; const nx = -dy / len; const ny = dx / len; const mx = (p1.x + p2.x) / 2; const my = (p1.y + p2.y) / 2; const sign = p1.x <= p2.x ? 1 : -1; const cx = mx + nx * (len * bendFactor * sign + offset); const cy = my + ny * (len * bendFactor * sign + offset); return `M ${p1.x} ${p1.y} Q ${cx} ${cy} ${p2.x} ${p2.y}`; } function getStudentCountText() { if (state.mode === "single") { const n = counts?.[state.phase]?.[state.school] ?? 0; return `${state.school} · n=${n}`; } if (state.mode === "overlay" || state.mode === "delta") { const preN = counts?.Pre?.[state.school] ?? 0; const postN = counts?.Post?.[state.school] ?? 0; return `Pre n=${preN} · Post n=${postN}`; } if (state.mode === "compare" || state.mode === "compareRank") { const a = counts?.[state.phase]?.[state.schoolA] ?? 0; const b = counts?.[state.phase]?.[state.schoolB] ?? 0; return `${state.schoolA} n=${a} · ${state.schoolB} n=${b}`; } return ""; } function renderSummary(rows) { let contextLine = ""; if (state.mode === "single") contextLine = `${state.phase} · ${state.school}`; if (state.mode === "overlay") contextLine = `Pre + Post · ${state.school}`; if (state.mode === "delta") contextLine = `Change from Pre to Post · ${state.school}`; if (state.mode === "compare") contextLine = `${state.phase} · ${state.schoolA} vs ${state.schoolB}`; if (state.mode === "compareRank") contextLine = `${state.phase} · ${state.schoolA} vs ${state.schoolB} (rank)`; summaryEl.innerHTML = `

Current view

Mode

${modeLabels[state.mode]}

Context

${contextLine}

Student base

${getStudentCountText()}

Strongest pairs

${strongestText(rows, state.mode)}

Interpret carefully

n = unique students · edge width = pair frequency or rank-based emphasis depending on mode

`; } function renderNote() { if (state.mode === "single") { noteEl.innerHTML = ` Node size = total connected weight · Edge width = pair weight · Color = ${state.phase} `; return; } if (state.mode === "overlay") { noteEl.innerHTML = ` Pre Post Node size = stronger of the two shown edges `; return; } if (state.mode === "delta") { noteEl.innerHTML = ` Higher in Post than Pre Lower in Post than Pre No change Node size = total amount of change `; return; } if (state.mode === "compare" || state.mode === "compareRank") { noteEl.innerHTML = ` ${state.schoolA} ${state.schoolB} Node size = stronger of the two school values `; return; } } function renderTable(rows) { if (!rows.length) { tableWrap.innerHTML = `

No data for this view yet.

`; return; } let columns = []; if (state.mode === "single") columns = ["Pair", "Weight"]; if (state.mode === "overlay") columns = ["Pair", "Pre", "Post", "Δ"]; if (state.mode === "delta") columns = ["Pair", "Pre", "Post", "Change (Post − Pre)", "Direction"]; if (state.mode === "compare") { columns = ["Pair", state.schoolA, state.schoolB, `${state.schoolB} − ${state.schoolA}`]; } if (state.mode === "compareRank") { columns = [ "Pair", `${state.schoolA} rank`, `${state.schoolB} rank`, `${state.schoolA} count`, `${state.schoolB} count` ]; } const thead = ` ${columns.map(c => `${c}`).join("")} `; const tbodyRows = rows.map(row => { if (state.mode === "single") { return `${row.pair}${row.weight}`; } if (state.mode === "overlay") { const deltaText = `${row.delta > 0 ? "+" : ""}${row.delta}`; return `${row.pair}${row.pre}${row.post}${deltaText}`; } if (state.mode === "delta") { const deltaText = `${row.delta > 0 ? "+" : ""}${row.delta}`; const direction = row.delta > 0 ? "Increase" : row.delta < 0 ? "Decrease" : "No change"; return ` ${row.pair} ${row.pre} ${row.post} ${deltaText} ${direction} `; } if (state.mode === "compare") { const deltaText = `${row.delta > 0 ? "+" : ""}${row.delta}`; return ` ${row.pair} ${row.a} ${row.b} ${deltaText} `; } if (state.mode === "compareRank") { return ` ${row.pair} ${row.aRank ?? "-"} ${row.bRank ?? "-"} ${row.a} ${row.b} `; } return ""; }).join(""); tableWrap.innerHTML = ` ${thead} ${tbodyRows}

`; } function renderChart(rows) { const innerWidth = width - 60; const innerHeight = height - 40; const positions = getNodePositions(nodeNames, innerWidth, innerHeight); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("height", `${height}px`) .style("display", "block") .style("background", "#ffffff"); const g = svg.append("g").attr("transform", "translate(30,20)"); const degrees = computeDegrees(rows, state.mode); const maxDegree = d3.max(Array.from(degrees.values())) || 1; const nodeSize = d3.scaleSqrt().domain([0, maxDegree]).range([12, 28]); let edgeMax = 1; if (state.mode === "single") edgeMax = d3.max(rows, d => d.weight) || 1; if (state.mode === "overlay") edgeMax = d3.max(rows, d => Math.max(d.pre, d.post)) || 1; if (state.mode === "delta") edgeMax = d3.max(rows, d => Math.abs(d.delta)) || 1; if (state.mode === "compare") edgeMax = d3.max(rows, d => Math.max(d.a, d.b)) || 1; if (state.mode === "compareRank") { edgeMax = d3.max(rows, d => { const aStrength = d.aRank == null ? 0 : (11 - d.aRank); const bStrength = d.bRank == null ? 0 : (11 - d.bRank); return Math.max(aStrength, bStrength); }) || 1; } const strokeScale = d3.scaleLinear().domain([0, edgeMax]).range([1, 14]); g.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", innerWidth) .attr("height", innerHeight) .attr("fill", "#ffffff"); const edgeLayer = g.append("g"); const nodeLayer = g.append("g"); if (state.mode === "single") { const color = state.phase === "Pre" ? colorPre : colorPost; rows.filter(d => d.weight > 0).forEach(d => { const p1 = positions[d.source]; const p2 = positions[d.target]; edgeLayer.append("path") .attr("d", curvePath(p1, p2, 0.12, 0)) .attr("fill", "none") .attr("stroke", color) .attr("stroke-opacity", 0.82) .attr("stroke-width", strokeScale(d.weight)) .attr("stroke-linecap", "round"); }); } if (state.mode === "overlay") { rows.forEach(d => { const p1 = positions[d.source]; const p2 = positions[d.target]; if (d.pre > 0) { edgeLayer.append("path") .attr("d", curvePath(p1, p2, 0.12, -7)) .attr("fill", "none") .attr("stroke", colorPre) .attr("stroke-opacity", 0.75) .attr("stroke-width", strokeScale(d.pre)) .attr("stroke-linecap", "round"); } if (d.post > 0) { edgeLayer.append("path") .attr("d", curvePath(p1, p2, 0.12, 7)) .attr("fill", "none") .attr("stroke", colorPost) .attr("stroke-opacity", 0.75) .attr("stroke-width", strokeScale(d.post)) .attr("stroke-linecap", "round"); } }); } if (state.mode === "delta") { rows.forEach(d => { const p1 = positions[d.source]; const p2 = positions[d.target]; const absDelta = Math.abs(d.delta); const color = d.delta > 0 ? "#16a34a" : d.delta < 0 ? "#dc2626" : "#cbd5e1"; const opacity = d.delta === 0 ? 0.45 : 0.85; const widthValue = d.delta === 0 ? 1.5 : strokeScale(absDelta); edgeLayer.append("path") .attr("d", curvePath(p1, p2, 0.12, 0)) .attr("fill", "none") .attr("stroke", color) .attr("stroke-opacity", opacity) .attr("stroke-width", widthValue) .attr("stroke-linecap", "round"); }); } if (state.mode === "compare") { rows.forEach(d => { const p1 = positions[d.source]; const p2 = positions[d.target]; if (d.a > 0) { edgeLayer.append("path") .attr("d", curvePath(p1, p2, 0.12, -7)) .attr("fill", "none") .attr("stroke", colorA) .attr("stroke-opacity", 0.78) .attr("stroke-width", strokeScale(d.a)) .attr("stroke-linecap", "round"); } if (d.b > 0) { edgeLayer.append("path") .attr("d", curvePath(p1, p2, 0.12, 7)) .attr("fill", "none") .attr("stroke", colorB) .attr("stroke-opacity", 0.72) .attr("stroke-width", strokeScale(d.b)) .attr("stroke-linecap", "round"); } }); } if (state.mode === "compareRank") { rows.forEach(d => { const p1 = positions[d.source]; const p2 = positions[d.target]; const aStrength = d.aRank == null ? 0 : (11 - d.aRank); const bStrength = d.bRank == null ? 0 : (11 - d.bRank); if (aStrength > 0) { edgeLayer.append("path") .attr("d", curvePath(p1, p2, 0.12, -7)) .attr("fill", "none") .attr("stroke", colorA) .attr("stroke-opacity", 0.78) .attr("stroke-width", strokeScale(aStrength)) .attr("stroke-linecap", "round"); } if (bStrength > 0) { edgeLayer.append("path") .attr("d", curvePath(p1, p2, 0.12, 7)) .attr("fill", "none") .attr("stroke", colorB) .attr("stroke-opacity", 0.72) .attr("stroke-width", strokeScale(bStrength)) .attr("stroke-linecap", "round"); } }); } nodeNames.forEach(name => { const p = positions[name]; const r = nodeSize(degrees.get(name) || 0); nodeLayer.append("circle") .attr("cx", p.x) .attr("cy", p.y) .attr("r", r) .attr("fill", "#ffffff") .attr("stroke", "#111827") .attr("stroke-width", 1.5); nodeLayer.append("text") .attr("x", p.x) .attr("y", p.y + 4) .attr("text-anchor", "middle") .attr("font-size", 12) .attr("font-weight", 600) .attr("fill", "#111827") .text(name); }); chartEl.replaceChildren(svg.node()); } function populateSelect(selectEl, values) { selectEl.innerHTML = values.map(v => ``).join(""); } function syncControls() { populateSelect(phaseSelect, phases); populateSelect(schoolSelect, schoolOptions); populateSelect(schoolASelect, schoolOptions); populateSelect(schoolBSelect, schoolOptions); phaseSelect.value = state.phase; schoolSelect.value = state.school; schoolASelect.value = state.schoolA; schoolBSelect.value = state.schoolB; phaseWrap.style.display = (state.mode === "single" || state.mode === "compare" || state.mode === "compareRank") ? "" : "none"; schoolWrap.style.display = (state.mode === "single" || state.mode === "overlay" || state.mode === "delta") ? "" : "none"; schoolAWrap.style.display = (state.mode === "compare" || state.mode === "compareRank") ? "" : "none"; schoolBWrap.style.display = (state.mode === "compare" || state.mode === "compareRank") ? "" : "none"; } function renderTabs() { const modes = ["single", "overlay", "delta", "compare", "compareRank"]; tabBox.innerHTML = modes.map(mode => ` `).join(""); tabBox.querySelectorAll(".pw-tab").forEach(btn => { btn.addEventListener("click", () => { state.mode = btn.dataset.mode; syncControls(); update(); }); }); } function update() { syncControls(); renderTabs(); const rows = getRowsForCurrentState(); renderSummary(rows); renderChart(rows); renderNote(); renderTable(rows); } phaseSelect.addEventListener("change", e => { state.phase = e.target.value; update(); }); schoolSelect.addEventListener("change", e => { state.school = e.target.value; update(); }); schoolASelect.addEventListener("change", e => { state.schoolA = e.target.value; update(); }); schoolBSelect.addEventListener("change", e => { state.schoolB = e.target.value; update(); }); let isResizing = false; resizer.addEventListener("mousedown", () => { isResizing = true; document.body.style.cursor = "col-resize"; }); window.addEventListener("mousemove", e => { if (!isResizing) return; const rect = mainLayout.getBoundingClientRect(); const leftWidth = Math.max(220, Math.min(420, e.clientX - rect.left)); mainLayout.style.gridTemplateColumns = `${leftWidth}px 10px minmax(420px, 1fr)`; }); window.addEventListener("mouseup", () => { isResizing = false; document.body.style.cursor = ""; }); update(); return container; }