29:null 2a:["$","title",null,{"children":"Group Family Tree | Lao | Observable"}] 2f:Ta9e,viewof controls = { const allOrders = [...new Set(data.nodes.map(n => n.gapIndex[0]))].sort((a, b) => a - b); let min = 2 let max = allOrders.length const container = html`

Max Levels:

`; const slider = container.querySelector('input[type="range"]'); const number = container.querySelector('input[type="number"]'); const linearBtn = container.querySelector('[data-layout="linear"]'); const radialBtn = container.querySelector('[data-layout="radial"]'); container.value = { maxLevels: 4, layout: 'linear' }; function updateLevels(value) { value = Math.max(min, Math.min(max, parseInt(value) || 4)); slider.value = value; number.value = value; container.value = { ...container.value, maxLevels: value }; container.dispatchEvent(new CustomEvent("input")); } function updateLayout(layout) { container.value = { ...container.value, layout }; if (layout === 'linear') { linearBtn.style.background = '#2563eb'; linearBtn.style.color = 'white'; radialBtn.style.background = 'transparent'; radialBtn.style.color = '#666'; } else { radialBtn.style.background = '#2563eb'; radialBtn.style.color = 'white'; linearBtn.style.background = 'transparent'; linearBtn.style.color = '#666'; } container.dispatchEvent(new CustomEvent("input")); } slider.oninput = () => updateLevels(slider.value); number.oninput = () => updateLevels(number.value); linearBtn.onclick = () => updateLayout('linear'); radialBtn.onclick = () => updateLayout('radial'); return container; }30:T828f,familyChart = { const containerWidth = width; const containerHeight = 800; const { nodes, links, config, maxLevel, minLevel, layoutType, toSubscript } = layoutData; // Calculate pill sizes const tempSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); const tempText = document.createElementNS("http://www.w3.org/2000/svg", "text"); tempText.setAttribute('font-size', '14px'); tempText.setAttribute('font-weight', '500'); tempText.setAttribute('font-family', "'JetBrains Mono', 'Fira Code', 'SF Mono', monospace"); tempSvg.appendChild(tempText); document.body.appendChild(tempSvg); nodes.forEach(node => { tempText.textContent = node.label; const bbox = tempText.getBBox(); node.textWidth = bbox.width; node.pillWidth = bbox.width + 16; node.pillHeight = 24; }); document.body.removeChild(tempSvg); const nodeById = new Map(nodes.map(n => [n.id, n])); const levels = d3.group(nodes, d => d.level); // Create SVG const svg = d3.create("svg") .attr("class", "family-chart") .attr("width", containerWidth) .attr("height", containerHeight) .attr("viewBox", [0, 0, containerWidth, containerHeight]); const zoomableGroup = svg.append('g').attr('class', 'zoomable-content'); const fixedGroup = svg.append('g').attr('class', 'fixed-content'); // ============================================ // LINK PATH GENERATORS // ============================================ function getLinearLinkPath(d) { const source = nodeById.get(d.source); const target = nodeById.get(d.target); // Source is at lower level (left), target is at higher level (right) // Connect from right edge of source to left edge of target const sourceX = source.x + source.pillWidth / 2; // Right edge of source const sourceY = source.y; const targetX = target.x - target.pillWidth / 2; // Left edge of target const targetY = target.y; // Straight line from right edge to left edge return `M ${sourceX} ${sourceY} L ${targetX} ${targetY}`; } function getRadialLinkPath(d) { const source = nodeById.get(d.source); const target = nodeById.get(d.target); // If source is at center (radius 0), use straight line if (source.radius === 0) { return `M${source.x},${source.y} L${target.x},${target.y}`; } // Calculate edge positions based on pill width // For radial layout, "outer edge" means further from center const sourceOuterRadius = source.radius + source.pillWidth / 2; const targetInnerRadius = target.radius - target.pillWidth / 2; // Start point: outer edge of source pill const sx = sourceOuterRadius * Math.cos(source.angle); const sy = sourceOuterRadius * Math.sin(source.angle); // End point: inner edge of target pill const tx = targetInnerRadius * Math.cos(target.angle); const ty = targetInnerRadius * Math.sin(target.angle); // Generate 5 points along an Archimedean spiral // Archimedean spiral: r = a + b*theta // We need to interpolate from (sourceOuterRadius, source.angle) to (targetInnerRadius, target.angle) // Calculate angle difference (handle wrap-around) let angleDiff = target.angle - source.angle; while (angleDiff < -Math.PI) angleDiff += 2 * Math.PI; while (angleDiff > Math.PI) angleDiff -= 2 * Math.PI; const startRadius = sourceOuterRadius; const endRadius = targetInnerRadius; const startAngle = source.angle; // Generate 5 evenly spaced points along the spiral const points = []; for (let i = 0; i < 5; i++) { const t = i / 4; // 0, 0.25, 0.5, 0.75, 1 // Linear interpolation for both radius and angle (Archimedean spiral property) const r = startRadius + t * (endRadius - startRadius); const theta = startAngle + t * angleDiff; const x = r * Math.cos(theta); const y = r * Math.sin(theta); points.push([x, y]); } // Use D3's curveNatural to create a smooth spline through the points const lineGenerator = d3.line().curve(d3.curveNatural); return lineGenerator(points); } const getLinkPath = layoutType === 'radial' ? getRadialLinkPath : getLinearLinkPath; // ============================================ // RENDER LINKS // ============================================ const linksGroup = zoomableGroup.append('g').attr('class', 'links'); const linkSelection = linksGroup.selectAll('.link-group') .data(links) .join('g') .attr('class', 'link-group'); linkSelection.append('path') .attr('class', 'link-path') .attr('d', getLinkPath) .attr('fill', 'none') .attr('stroke', d => { if (d.type === 'direct') return '#000'; if (d.type === 'semidirect') return '#2563eb'; if (d.type === 'non-split central') return '#16a34a'; if (d.type === 'non-split non-central') return '#dc2626'; return '#16a34a'; // fallback }) .attr('stroke-width', 1.5) .attr('opacity', 0.25); // Link labels const linkLabelsGroup = zoomableGroup.append('g').attr('class', 'link-labels'); const linkLabelSelection = linkLabelsGroup.selectAll('.link-label') .data(links) .join('text') .attr('class', 'link-label') .attr('x', d => { if (layoutType === 'radial') { const source = nodeById.get(d.source); const target = nodeById.get(d.target); // If source is at center (radius 0), use simple average (linear link) if (source.radius === 0) { return (source.x + target.x) / 2; } // For curved links, use polar coordinates: average radius and mid angle const avgRadius = (source.radius + target.radius) / 2; // Calculate mid angle (handling wrap-around) let angleDiff = target.angle - source.angle; while (angleDiff < -Math.PI) angleDiff += 2 * Math.PI; while (angleDiff > Math.PI) angleDiff -= 2 * Math.PI; const midAngle = source.angle + angleDiff / 2; return avgRadius * Math.cos(midAngle); } // Linear layout: simple average const source = nodeById.get(d.source); const target = nodeById.get(d.target); return (source.x + target.x) / 2; }) .attr('y', d => { if (layoutType === 'radial') { const source = nodeById.get(d.source); const target = nodeById.get(d.target); // If source is at center (radius 0), use simple average (linear link) if (source.radius === 0) { return (source.y + target.y) / 2; } // For curved links, use polar coordinates: average radius and mid angle const avgRadius = (source.radius + target.radius) / 2; // Calculate mid angle (handling wrap-around) let angleDiff = target.angle - source.angle; while (angleDiff < -Math.PI) angleDiff += 2 * Math.PI; while (angleDiff > Math.PI) angleDiff -= 2 * Math.PI; const midAngle = source.angle + angleDiff / 2; return avgRadius * Math.sin(midAngle); } // Linear layout: simple average const source = nodeById.get(d.source); const target = nodeById.get(d.target); return (source.y + target.y) / 2; }) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('font-size', '13px') .attr('fill', '#1a1a1a') .attr('stroke', '#ffffff') .attr('stroke-width', 5) .attr('paint-order', 'stroke fill') .attr('opacity', 0) .text(d => d.label); // ============================================ // RENDER NODES // ============================================ const classColors = { 'abelian': '#1a1a1a', 'non-abelian': '#2563eb' }; // Calculate level widths for hover areas (linear layout) const levelWidths = new Map(); for (const [level, levelNodes] of levels) { const maxWidth = d3.max(levelNodes, n => n.pillWidth); levelWidths.set(level, maxWidth); } const labelOffset = 30; const nodesGroup = zoomableGroup.append('g').attr('class', 'nodes'); const nodeSelection = nodesGroup.selectAll('.node-group') .data(nodes) .join('g') .attr('class', 'node-group') .attr('transform', d => `translate(${d.x}, ${d.y})`); // For radial layout, create an inner group that rotates the pill // Text should read outward from center, but never upside down const nodeInner = nodeSelection.append('g') .attr('class', 'node-inner') .attr('transform', d => { if (layoutType !== 'radial') return ''; // For center node, no rotation needed if (d.radius === 0) return ''; // Calculate rotation angle (in degrees) // The angle points outward from center let rotationDeg = d.angle * 180 / Math.PI; // Text is upside down when on the left side of the circle (x < 0) // Flip by 180 degrees to make it readable if (d.x < 0) { rotationDeg += 180; } return `rotate(${rotationDeg})`; }); // Hover targets (simplified for radial) if (layoutType === 'linear') { nodeInner.append('rect') .attr('class', 'hover-target') .attr('x', d => -levelWidths.get(d.level) / 2) .attr('y', d => { const levelNodes = nodes.filter(n => n.level === d.level); levelNodes.sort((a, b) => a.y - b.y); const nodeIndex = levelNodes.findIndex(n => n.id === d.id); if (nodeIndex === 0) return -labelOffset; const prevNode = levelNodes[nodeIndex - 1]; return -(d.y - prevNode.y) / 2; }) .attr('width', d => levelWidths.get(d.level)) .attr('height', d => { const levelNodes = nodes.filter(n => n.level === d.level); levelNodes.sort((a, b) => a.y - b.y); const nodeIndex = levelNodes.findIndex(n => n.id === d.id); let topExtension, bottomExtension; if (nodeIndex === 0) { topExtension = labelOffset; } else { const prevNode = levelNodes[nodeIndex - 1]; topExtension = (d.y - prevNode.y) / 2; } if (nodeIndex === levelNodes.length - 1) { bottomExtension = labelOffset; } else { const nextNode = levelNodes[nodeIndex + 1]; bottomExtension = (nextNode.y - d.y) / 2; } return topExtension + bottomExtension; }) .attr('fill', 'transparent'); } else { // Circular hover target for radial (on the outer group, not rotated) nodeSelection.insert('circle', '.node-inner') .attr('class', 'hover-target') .attr('r', d => Math.max(d.pillWidth, d.pillHeight) / 2 + 8) .attr('fill', 'transparent'); } // Node pills nodeInner.append('rect') .attr('class', 'node-pill') .attr('x', d => -d.pillWidth / 2) .attr('y', -12) .attr('width', d => d.pillWidth) .attr('height', d => d.pillHeight) .attr('rx', 12) .attr('ry', 12) .attr('fill', d => classColors[d.class] || '#888') .attr('stroke', 'none'); // Node labels nodeInner.append('text') .attr('class', 'node-label') .attr('x', 0) .attr('y', 0) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('font-size', '14px') .attr('font-weight', '500') .attr('fill', '#ffffff') .text(d => d.label); // ============================================ // BUILD CONNECTION DATA FOR UPSTREAM/DOWNSTREAM // ============================================ const nodeConnections = new Map(); nodes.forEach(node => { nodeConnections.set(node.id, { directUpward: [], // nodes this connects TO (higher level) directDownward: [], // nodes this connects FROM (lower level) fullUpperSet: new Set(), fullLowerSet: new Set(), combinedSet: new Set(), directSet: new Set() }); }); // Record direct connections links.forEach(link => { // source is lower level, target is higher level nodeConnections.get(link.source).directUpward.push(link.target); nodeConnections.get(link.target).directDownward.push(link.source); }); // Compute transitive closure (upper set - all ancestors) function computeUpperSet(nodeId, visited = new Set()) { if (visited.has(nodeId)) return visited; visited.add(nodeId); const directUp = nodeConnections.get(nodeId).directUpward; directUp.forEach(upId => { computeUpperSet(upId, visited); }); return visited; } // Compute transitive closure (lower set - all descendants) function computeLowerSet(nodeId, visited = new Set()) { if (visited.has(nodeId)) return visited; visited.add(nodeId); const directDown = nodeConnections.get(nodeId).directDownward; directDown.forEach(downId => { computeLowerSet(downId, visited); }); return visited; } // Pre-compute full upper and lower sets for each node nodes.forEach(node => { const connections = nodeConnections.get(node.id); // Compute upper set (excluding self) const upperSet = computeUpperSet(node.id, new Set()); upperSet.delete(node.id); connections.fullUpperSet = upperSet; // Compute lower set (excluding self) const lowerSet = computeLowerSet(node.id, new Set()); lowerSet.delete(node.id); connections.fullLowerSet = lowerSet; // Pre-compute combined set (self + upper + lower) connections.combinedSet = new Set([node.id]); upperSet.forEach(id => connections.combinedSet.add(id)); lowerSet.forEach(id => connections.combinedSet.add(id)); // Pre-compute direct connections set connections.directUpward.forEach(id => connections.directSet.add(id)); connections.directDownward.forEach(id => connections.directSet.add(id)); }); // Pre-compute which links are in each node's combined set const nodeLinkSets = new Map(); const nodeDirectLinks = new Map(); nodes.forEach(node => { const connections = nodeConnections.get(node.id); const combinedSet = connections.combinedSet; const inSetLinks = []; const directLinks = []; links.forEach((link, i) => { const sourceInSet = combinedSet.has(link.source); const targetInSet = combinedSet.has(link.target); if (sourceInSet && targetInSet) { inSetLinks.push(i); } if (link.source === node.id || link.target === node.id) { directLinks.push(i); } }); nodeLinkSets.set(node.id, inSetLinks); nodeDirectLinks.set(node.id, directLinks); }); // ============================================ // INTERACTION (Optimized) // ============================================ // Store references to DOM elements for fast access const nodePillElements = nodeSelection.select('.node-pill').nodes(); const nodeLabelElements = nodeSelection.select('.node-label').nodes(); const linkPathElements = linkSelection.select('.link-path').nodes(); const linkLabelElements = linkLabelSelection.nodes(); // Create maps for quick index lookup const nodeIndexMap = new Map(); nodes.forEach((node, i) => nodeIndexMap.set(node.id, i)); let isHovering = false; nodeSelection .on('mouseenter', function(event, d) { if (isHovering) return; // Debounce isHovering = true; const connections = nodeConnections.get(d.id); const combinedSet = connections.combinedSet; const directSet = connections.directSet; const inSetLinkIndices = nodeLinkSets.get(d.id); const directLinkIndices = nodeDirectLinks.get(d.id); // Add hovering class to SVG svg.classed('hovering', true); // Batch DOM updates requestAnimationFrame(() => { // Update nodes nodes.forEach((node, i) => { const isInSet = combinedSet.has(node.id); const isHovered = node.id === d.id; const isDirect = directSet.has(node.id); nodePillElements[i].classList.toggle('in-set', isInSet); nodePillElements[i].classList.toggle('is-hovered', isHovered); nodePillElements[i].classList.toggle('is-direct', isDirect); nodeLabelElements[i].classList.toggle('in-set', isInSet); }); // Update links - mark all as not in set first, then mark in-set ones const inSetLinkSet = new Set(inSetLinkIndices); const directLinkSet = new Set(directLinkIndices); links.forEach((link, i) => { const isInSet = inSetLinkSet.has(i); const isDirect = directLinkSet.has(i); linkPathElements[i].classList.toggle('in-set', isInSet); linkLabelElements[i].classList.toggle('is-direct', isDirect); }); }); }) .on('mouseleave', function() { isHovering = false; // Remove hovering class svg.classed('hovering', false); requestAnimationFrame(() => { // Remove all highlight classes nodePillElements.forEach(el => { el.classList.remove('in-set', 'is-hovered', 'is-direct'); }); nodeLabelElements.forEach(el => { el.classList.remove('in-set'); }); linkPathElements.forEach(el => { el.classList.remove('in-set'); }); linkLabelElements.forEach(el => { el.classList.remove('is-direct'); }); }); }); // ============================================ // LEVEL LABELS (Linear only) // ============================================ const levelLabels = zoomableGroup.append('g').attr('class', 'level-labels'); if (layoutType === 'linear') { // Linear: labels above each column const levelData = []; for (let level = minLevel; level <= maxLevel; level++) { const levelNodes = nodes.filter(n => n.level === level); if (levelNodes.length > 0) { const firstNode = levelNodes.reduce((min, n) => n.index < min.index ? n : min, levelNodes[0]); levelData.push({ level, label: "Order " + Math.pow(2, level), x: firstNode.x, y: firstNode.y }); } } levelLabels.selectAll('.level-label') .data(levelData) .join('text') .attr('class', 'level-label') .attr('x', d => d.x) .attr('y', d => d.y - 30) .attr('text-anchor', 'middle') .attr('font-size', '14px') .attr('fill', '#888') .attr('font-weight', '500') .text(d => d.label); } // No level labels for radial layout // ============================================ // DYNAMIC LEGEND // ============================================ let legendExpanded = false; const presentClasses = new Set(nodes.map(n => n.class)); const colorLegendData = [ { class: 'abelian', label: 'Abelian', color: '#1a1a1a' }, { class: 'non-abelian', label: 'Non-abelian', color: '#2563eb' } ].filter(item => presentClasses.has(item.class)); // Map link types to legend keys const typeLegendMap = { 'direct product': 'direct', 'semidirect product': 'semidirect', 'non-split central': 'non-split-central', 'non-split non-central': 'non-split-non-central' }; const presentTypes = new Set(links.map(l => typeLegendMap[l.type] || l.type)); const allOperationsData = [ { type: 'direct', symbol: '×', label: 'Direct product', color: '#000' }, { type: 'semidirect', symbol: '⋊', label: 'Semidirect product', color: '#2563eb' }, { type: 'non-split-central', symbol: '↑', label: 'Non-split central', color: '#16a34a' }, { type: 'non-split-non-central', symbol: '↑', label: 'Non-split non-central', color: '#dc2626' } ]; const operationsData = allOperationsData.filter(item => presentTypes.has(item.type)); const presentGroupTypes = new Set(); nodes.forEach(node => { const desc = node.desc; const label = node.label; if (/^C\d/.test(desc)) presentGroupTypes.add('cyclic'); if (/^E\d/.test(label)) presentGroupTypes.add('elementary'); if (/^D\d/.test(desc)) presentGroupTypes.add('dihedral'); if (/^Q\d/.test(desc) && !/^QD/.test(desc)) presentGroupTypes.add('quaternion'); if (/^SD\d/.test(label) || /^QD\d/.test(desc)) presentGroupTypes.add('semidihedral'); if (/^M\d/.test(label)) presentGroupTypes.add('modular'); if (/^He\d/.test(label) || /^Γ/.test(desc) || /^Pauli/.test(desc)) presentGroupTypes.add('heisenberg'); }); const allNotationData = [ { type: 'cyclic', symbol: 'Cₙ', label: 'Cyclic' }, { type: 'elementary', symbol: 'Eₙ', label: 'Elementary abelian' }, { type: 'dihedral', symbol: 'D₂ₙ', label: 'Dihedral' }, { type: 'quaternion', symbol: 'Qₙ', label: 'Quaternion' }, { type: 'semidihedral', symbol: 'SDₙ', label: 'Semi-dihedral' }, { type: 'modular', symbol: 'Mₙ', label: 'Modular' }, { type: 'heisenberg', symbol: 'Heₚ', label: 'Heisenberg' } ]; const notationData = allNotationData.filter(item => presentGroupTypes.has(item.type)); const legendGroup = fixedGroup.append('g') .attr('class', 'combined-legend') .attr('transform', 'translate(0, 0)'); // Measure text widths const measureSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); const measureText = document.createElementNS("http://www.w3.org/2000/svg", "text"); measureText.setAttribute('font-size', '11px'); measureText.setAttribute('font-family', "'JetBrains Mono', 'Fira Code', 'SF Mono', monospace"); measureSvg.appendChild(measureText); document.body.appendChild(measureSvg); let groupMaxWidth = 0; notationData.forEach(item => { measureText.textContent = item.symbol + ' ' + item.label; const w = measureText.getBBox().width; groupMaxWidth = Math.max(groupMaxWidth, w); }); let operationsMaxWidth = 0; operationsData.forEach(item => { measureText.textContent = item.symbol + ' ' + item.label; const w = measureText.getBBox().width + 46; operationsMaxWidth = Math.max(operationsMaxWidth, w); }); let classesMaxWidth = 0; colorLegendData.forEach(item => { measureText.textContent = item.label; const textWidth = measureText.getBBox().width; const pillWidth = textWidth + 16; classesMaxWidth = Math.max(classesMaxWidth, pillWidth); }); document.body.removeChild(measureSvg); const hasNotation = notationData.length > 0; const hasOperations = operationsData.length > 0; const hasClasses = colorLegendData.length > 0; // Single column layout const leftPadding = 12; const rightPadding = 12; const sectionSpacing = 16; const itemHeight = 20; const classItemHeight = 24; // Calculate total width based on widest content const contentWidth = Math.max(groupMaxWidth, operationsMaxWidth, classesMaxWidth); const totalWidth = leftPadding + contentWidth + rightPadding; // Calculate heights for each section const groupSectionHeight = hasNotation ? 20 + notationData.length * itemHeight : 0; const classSectionHeight = hasClasses ? 20 + colorLegendData.length * classItemHeight : 0; const operationsSectionHeight = hasOperations ? 20 + operationsData.length * itemHeight : 0; // Calculate Y positions for each section (ORDER: GROUP, CLASS, OPERATIONS) let currentY = 10; const groupY = currentY; if (hasNotation) currentY += groupSectionHeight + sectionSpacing; const classY = currentY; if (hasClasses) currentY += classSectionHeight + sectionSpacing; const operationsY = currentY; if (hasOperations) currentY += operationsSectionHeight; const legendContentHeight = currentY + 10; const legendBg = legendGroup.append('path') .attr('class', 'legend-bg') .attr('d', 'M 0 0 L 100 0 L 100 20 Q 100 28, 92 28 L 0 28 Z') .attr('fill', '#ffffff') .attr('fill-opacity', 0.85) .attr('stroke', '#ddd') .attr('stroke-width', 1) .attr('filter', 'drop-shadow(0 2px 8px rgba(0,0,0,0.1))'); const toggleButton = legendGroup.append('g') .attr('class', 'legend-toggle'); const toggleBg = toggleButton.append('rect') .attr('x', 0) .attr('y', 0) .attr('width', 100) .attr('height', 28) .attr('rx', 8) .attr('fill', 'transparent'); const collapsedTitle = toggleButton.append('text') .attr('class', 'collapsed-title') .attr('x', 12) .attr('y', 14) .attr('font-size', '12px') .attr('font-weight', '600') .attr('fill', '#555') .attr('dominant-baseline', 'middle') .attr('opacity', 1) .text('Legend'); const toggleIcon = toggleButton.append('path') .attr('class', 'toggle-icon') .attr('d', 'M -3 0 L 1 4 L -3 8') .attr('transform', 'translate(85, 10)') .attr('fill', 'none') .attr('stroke', '#666') .attr('stroke-width', 2) .attr('stroke-linecap', 'round') .attr('stroke-linejoin', 'round'); const legendContent = legendGroup.append('g') .attr('class', 'legend-content') .attr('opacity', 0) .style('display', 'none'); // GROUP section if (hasNotation) { legendContent.append('text') .attr('x', leftPadding) .attr('y', groupY + 12) .attr('font-size', '11px') .attr('font-weight', '600') .attr('fill', '#888') .attr('dominant-baseline', 'middle') .text('GROUP'); const notationItems = legendContent.append('g').attr('class', 'notation-items'); const notationItemGroups = notationItems.selectAll('.notation-item') .data(notationData) .join('g') .attr('class', 'notation-item') .attr('transform', (d, i) => `translate(${leftPadding}, ${groupY + 28 + i * itemHeight})`); notationItemGroups.append('text') .attr('x', 0) .attr('y', 0) .attr('font-size', '15px') .attr('font-weight', '500') .attr('fill', '#1a1a1a') .attr('dominant-baseline', 'middle') .text(d => d.symbol); notationItemGroups.append('text') .attr('x', 28) .attr('y', 0) .attr('font-size', '11px') .attr('fill', '#666') .attr('dominant-baseline', 'middle') .text(d => d.label); } // CLASS section if (hasClasses) { legendContent.append('text') .attr('x', leftPadding) .attr('y', classY + 12) .attr('font-size', '11px') .attr('font-weight', '600') .attr('fill', '#888') .attr('dominant-baseline', 'middle') .text('CLASS'); // Measure pill widths colorLegendData.forEach(d => { const tempMeasure = document.createElementNS("http://www.w3.org/2000/svg", "svg"); const tempMeasureText = document.createElementNS("http://www.w3.org/2000/svg", "text"); tempMeasureText.setAttribute('font-size', '11px'); tempMeasureText.setAttribute('font-weight', '500'); tempMeasure.appendChild(tempMeasureText); document.body.appendChild(tempMeasure); tempMeasureText.textContent = d.label; const textWidth = tempMeasureText.getBBox().width; d.pillWidth = textWidth + 16; document.body.removeChild(tempMeasure); }); const colorItems = legendContent.append('g').attr('class', 'color-items'); const colorItemGroups = colorItems.selectAll('.color-item') .data(colorLegendData) .join('g') .attr('class', 'color-item') .attr('transform', (d, i) => `translate(${leftPadding}, ${classY + 28 + i * classItemHeight})`); colorItemGroups.append('rect') .attr('x', 0) .attr('y', -8) .attr('width', d => d.pillWidth) .attr('height', 16) .attr('rx', 8) .attr('ry', 8) .attr('fill', d => d.color) .attr('stroke', '#fff') .attr('stroke-width', 1.5); colorItemGroups.append('text') .attr('x', d => d.pillWidth / 2) .attr('y', 0) .attr('text-anchor', 'middle') .attr('font-size', '11px') .attr('font-weight', '500') .attr('fill', '#ffffff') .attr('dominant-baseline', 'middle') .text(d => d.label); } // OPERATIONS section if (hasOperations) { legendContent.append('text') .attr('x', leftPadding) .attr('y', operationsY + 12) .attr('font-size', '11px') .attr('font-weight', '600') .attr('fill', '#888') .attr('dominant-baseline', 'middle') .text('OPERATIONS'); const operationItems = legendContent.append('g').attr('class', 'operation-items'); const operationItemGroups = operationItems.selectAll('.operation-item') .data(operationsData) .join('g') .attr('class', 'operation-item') .attr('transform', (d, i) => `translate(${leftPadding}, ${operationsY + 28 + i * itemHeight})`); operationItemGroups.append('line') .attr('x1', 0) .attr('y1', 0) .attr('x2', 24) .attr('y2', 0) .attr('stroke', d => d.color) .attr('stroke-width', 2.5); operationItemGroups.append('text') .attr('x', 32) .attr('y', 0) .attr('font-size', '13px') .attr('font-weight', '500') .attr('fill', '#1a1a1a') .attr('dominant-baseline', 'middle') .text(d => d.symbol); operationItemGroups.append('text') .attr('x', 46) .attr('y', 0) .attr('font-size', '11px') .attr('fill', '#666') .attr('dominant-baseline', 'middle') .text(d => d.label); } function updateLegendState() { const contentOpacity = legendExpanded ? 1 : 0; const bgPath = legendExpanded ? `M 0 0 L ${totalWidth} 0 L ${totalWidth} ${legendContentHeight - 8} Q ${totalWidth} ${legendContentHeight}, ${totalWidth - 8} ${legendContentHeight} L 0 ${legendContentHeight} Z` : 'M 0 0 L 100 0 L 100 20 Q 100 28, 92 28 L 0 28 Z'; const toggleWidth = legendExpanded ? totalWidth : 100; const arrowPath = legendExpanded ? 'M 0 -3 L 4 1 L 8 -3' : 'M -3 0 L 1 4 L -3 8'; const arrowTransform = legendExpanded ? `translate(${totalWidth - 24}, 18)` : 'translate(85, 10)'; legendContent.transition() .duration(200) .attr('opacity', contentOpacity) .on('end', function() { if (!legendExpanded) { d3.select(this).style('display', 'none'); } }); if (legendExpanded) { legendContent.style('display', 'block').attr('opacity', 0); legendContent.transition().duration(200).attr('opacity', 1); } if (legendExpanded) { collapsedTitle.transition().duration(200).attr('opacity', 0) .on('end', function() { d3.select(this).style('display', 'none'); }); } else { collapsedTitle.style('display', 'block').attr('opacity', 0) .transition().duration(200).attr('opacity', 1); } legendBg.transition() .duration(200) .attr('d', bgPath); toggleBg.transition() .duration(200) .attr('width', toggleWidth); toggleIcon.transition() .duration(200) .attr('d', arrowPath) .attr('transform', arrowTransform); } toggleButton.on('click', function() { legendExpanded = !legendExpanded; updateLegendState(); }); // ============================================ // ZOOM AND INITIAL TRANSFORM // ============================================ const zoom = d3.zoom() .scaleExtent(config.zoomExtent) .on('zoom', (event) => { zoomableGroup.attr('transform', event.transform); }); svg.call(zoom); // Calculate bounding box let minX = Infinity, maxX = -Infinity; let minY = Infinity, maxY = -Infinity; nodes.forEach(node => { const nodeLeft = node.x - node.pillWidth / 2; const nodeRight = node.x + node.pillWidth / 2; const nodeTop = node.y - node.pillHeight / 2; const nodeBottom = node.y + node.pillHeight / 2; minX = Math.min(minX, nodeLeft); maxX = Math.max(maxX, nodeRight); minY = Math.min(minY, nodeTop); maxY = Math.max(maxY, nodeBottom); }); // Add padding for labels if (layoutType === 'linear') { minY -= 50; // Space for level labels } else { // For radial, expand bounds symmetrically const maxExtent = Math.max(Math.abs(minX), Math.abs(maxX), Math.abs(minY), Math.abs(maxY)) + 50; minX = -maxExtent; maxX = maxExtent; minY = -maxExtent; maxY = maxExtent; } const boundingWidth = maxX - minX; const boundingHeight = maxY - minY; const boundingCenterX = minX + boundingWidth / 2; const boundingCenterY = minY + boundingHeight / 2; const padding = config.boundingPadding; const availableWidth = containerWidth - 2 * padding; const availableHeight = containerHeight - 2 * padding; // Calculate scale to fit content // Only limit maximum initial zoom for small graphs (3 or fewer levels) to prevent over-zooming const numLevels = maxLevel - minLevel + 1; let scale = Math.min( availableWidth / boundingWidth, availableHeight / boundingHeight ); // For small graphs, cap the initial zoom to prevent them from being too large if (numLevels <= 3) { scale = Math.min(scale, 2.0); } const scaledCenterX = boundingCenterX * scale; const scaledCenterY = boundingCenterY * scale; const viewportCenterX = containerWidth / 2; const viewportCenterY = containerHeight / 2; const translateX = viewportCenterX - scaledCenterX; const translateY = viewportCenterY - scaledCenterY; const initialTransform = d3.zoomIdentity .translate(translateX, translateY) .scale(scale); svg.call(zoom.transform, initialTransform); return svg.node(); }31:T66ef,layoutData = { const maxLevels = controls.maxLevels; const layoutMode = controls.layout; // Helper function to convert numbers to subscript characters function toSubscript(num) { const subscripts = '₀₁₂₃₄₅₆₇₈₉'; return String(num).split('').map(d => subscripts[parseInt(d)]).join(''); } // Helper function to convert numbers to superscript characters function toSuperscript(num) { const superscripts = '⁰¹²³⁴⁵⁶⁷⁸⁹'; return String(num).split('').map(d => superscripts[parseInt(d)]).join(''); } // Simplify GAP's StructureDescription to standard mathematical notation function simplifyGroupName(desc) { let result = desc; const p = 2; // Normalize GAP's " x " to "@" and " : " to "#" for internal processing result = result.replace(/ x /g, '@').replace(/ : /g, '#'); const elementaryPattern2 = /^(C2\s*[@x]\s*)+C2$/; if (elementaryPattern2.test(result)) { const count = (result.match(/C2/g) || []).length; const order = Math.pow(2, count); return "E" + order; } const elementaryPatternP = new RegExp("^(C" + p + "\\s*[@x]\\s*)+C" + p + "$"); if (elementaryPatternP.test(result)) { const count = (result.match(new RegExp("C" + p, 'g')) || []).length; const order = Math.pow(p, count); return "E" + order; } if (/^C2\s*[@x]\s*C2$/.test(result)) { return 'E4'; } result = result.replace(/QD(\d+)/g, 'SD$1'); const heisenbergPattern = /^$C(\d+)\s*[@x]\s*C\1$\s*[:#]\s*C\1$/; const heisMatch = result.match(heisenbergPattern); if (heisMatch) { const prime = heisMatch[1]; return "He" + prime; } return result; } function formatLabel(desc) { let simplified = simplifyGroupName(desc); // Parse the group into components // Split by common operations: @, #, ., ~, *, x // We need to handle this carefully to preserve the operations // First, let's identify all the components and operations const parts = []; const ops = []; let current = ''; let i = 0; while (i < simplified.length) { const char = simplified[i]; if (char === '@' || char === '#' || char === '.' || char === '~' || char === '*' || char === 'x') { if (current.trim()) { parts.push(current.trim()); } // Check for operation suffix (like @1, #2) let op = char; if (i + 1 < simplified.length && /\d/.test(simplified[i + 1])) { let suffix = ''; i++; while (i < simplified.length && /\d/.test(simplified[i])) { suffix += simplified[i]; i++; } op += suffix; i--; // Back up one since the loop will increment } ops.push(op); current = ''; } else if (char === ' ') { // Skip spaces } else { current += char; } i++; } if (current.trim()) { parts.push(current.trim()); } // Check if all operations are direct products (@, x, or no suffix) const allDirect = ops.every(op => op === '@' || op === 'x' || /^@\d+$/.test(op)); if (allDirect && parts.length > 0) { // Parse each part to identify elementary and cyclic groups let elementaryOrder = 1; const primeCyclics = []; // Track prime cyclic groups separately const otherParts = []; let hasElementary = false; parts.forEach(part => { // Match elementary group: E followed by number const elemMatch = part.match(/^E(\d+)$/); if (elemMatch) { elementaryOrder *= parseInt(elemMatch[1]); hasElementary = true; return; } // Match cyclic group: C followed by number const cyclicMatch = part.match(/^C(\d+)$/); if (cyclicMatch) { const order = parseInt(cyclicMatch[1]); // Check if it's a prime (for potential consolidation into elementary) const isPrime = order > 1 && (() => { for (let j = 2; j <= Math.sqrt(order); j++) { if (order % j === 0) return false; } return true; })(); if (isPrime) { primeCyclics.push({ order, label: part }); } else { // Non-prime cyclic, keep as is otherParts.push({ type: 'cyclic', order, label: part }); } return; } // Other group types - extract order if possible const orderMatch = part.match(/(\d+)/); const order = orderMatch ? parseInt(orderMatch[1]) : 0; otherParts.push({ type: 'other', order, label: part }); }); // Decide how to handle prime cyclic groups // Only consolidate into E if: // 1. There's already an E group, OR // 2. There are multiple prime cyclic groups const shouldConsolidate = hasElementary || primeCyclics.length > 1; if (shouldConsolidate) { // Multiply all prime cyclics into elementary order primeCyclics.forEach(pc => { elementaryOrder *= pc.order; }); if (elementaryOrder > 1) { otherParts.push({ type: 'elementary', order: elementaryOrder, label: 'E' + elementaryOrder }); } } else { // Keep prime cyclics as cyclic groups primeCyclics.forEach(pc => { otherParts.push({ type: 'cyclic', order: pc.order, label: pc.label }); }); // If there was a standalone E group with no prime cyclics to merge, add it back if (hasElementary && elementaryOrder > 1) { otherParts.push({ type: 'elementary', order: elementaryOrder, label: 'E' + elementaryOrder }); } } // Sort by order (highest first) otherParts.sort((a, b) => b.order - a.order); // Rebuild the label if (otherParts.length > 0) { simplified = otherParts.map(p => p.label).join('@'); } } // Apply standard formatting - convert internal symbols to display symbols return simplified .replace(/@/g, '×') // Direct product .replace(/#/g, '⋊') // Semidirect product .replace(/\./g, '↑') // Non-split central extension .replace(/~/g, '↑') // Non-split non-central (same display symbol) .replace(/\*/g, '○') // Central product .replace(/(\d+)/g, (match) => toSubscript(match)) .replace(/\s+/g, ''); } function formatFormula(formula, sourceLabel, linkType) { // Use the link type to determine the operation symbol let operation = '×'; // default for direct if (linkType === 'semidirect' || linkType === 'semidirect product' || linkType === 'split non-central') { operation = '⋊'; } else if (linkType === 'non-split-central' || linkType === 'non-split central' || linkType === 'central extension') { operation = '↑'; } else if (linkType === 'non-split-non-central' || linkType === 'non-split non-central' || linkType === 'non-central non-split') { operation = '↑'; } // Check for operation suffix in formula (like _1, _2, etc.) let operationSuffix = ''; const suffixMatch = formula.match(/_(\d+)/); if (suffixMatch) { operationSuffix = toSubscript(suffixMatch[1]); } // Build: sourceLabel + operation + C₂ return sourceLabel + operation + operationSuffix + 'C' + toSubscript(2); } const typeMap = { "direct product": "direct", "split central": "direct", "semidirect product": "semidirect", "split non-central": "semidirect", "non-split central": "non-split-central", "central extension": "non-split-central", "non-split non-central": "non-split-non-central", "non-central non-split": "non-split-non-central" }; // ============================================ // DETERMINE LEVELS FROM DISTINCT ORDERS // ============================================ // Get all distinct orders and sort them const allOrders = [...new Set(data.nodes.map(n => n.gapIndex[0]))].sort((a, b) => a - b); // Create a map from order to level (1-indexed) // Level 1 = smallest order, Level 2 = next smallest, etc. const orderToLevel = new Map(); allOrders.forEach((order, index) => { orderToLevel.set(order, index + 1); // 1-indexed levels }); // Filter nodes to only include those within maxLevels const nodes = data.nodes .filter(node => orderToLevel.get(node.gapIndex[0]) <= maxLevels) .map(node => ({ ...node, label: formatLabel(node.desc), level: orderToLevel.get(node.gapIndex[0]), order: node.gapIndex[0], class: node.isAbelian ? 'abelian' : 'non-abelian' })); const nodeIds = new Set(nodes.map(n => n.id)); const nodeMap = new Map(nodes.map(n => [n.id, n])); // Filter and transform links const links = data.links .filter(link => nodeIds.has(link.source) && nodeIds.has(link.target)) .map(link => { const sourceNode = nodeMap.get(link.source); const mappedType = typeMap[link.type] || link.type; return { ...link, label: formatFormula(link.formula, sourceNode ? sourceNode.label : '', link.type), type: mappedType }; }); // Configuration const config = { levelWidth: 200, minNodeSpacing: 36, paddingLeft: 50, paddingRight: 120, paddingY: 70, boundingPadding: 20, zoomExtent: [0.1, 4], transitionDuration: 100, // Radial config radialMinOuterRadius: 150, radialLevelSpacing: 60, radialMinLevelSpacing: 80 // Minimum distance between any two levels }; // ============================================ // LINEAR LAYOUT ALGORITHM // ============================================ function computeLinearLayout(nodes, links, config) { const { minNodeSpacing, paddingLeft, paddingRight, paddingY } = config; const levels = d3.group(nodes, d => d.level); const sortedLevelKeys = Array.from(levels.keys()).sort((a, b) => a - b); const maxLevel = Math.max(...sortedLevelKeys); const minLevel = Math.min(...sortedLevelKeys); for (const [level, levelNodes] of levels) { levelNodes.forEach((node, i) => { node.index = i; }); } // Calculate level heights (number of nodes * spacing) const levelHeights = new Map(); for (const [level, levelNodes] of levels) { const height = (levelNodes.length - 1) * minNodeSpacing; levelHeights.set(level, height); } // Calculate dynamic level widths based on the height of adjacent levels // Space between levels = 1/3 the max height of the two adjacent levels const levelPositions = new Map(); let currentX = paddingLeft; for (let i = 0; i < sortedLevelKeys.length; i++) { const level = sortedLevelKeys[i]; levelPositions.set(level, currentX); if (i < sortedLevelKeys.length - 1) { const nextLevel = sortedLevelKeys[i + 1]; const currentHeight = levelHeights.get(level); const nextHeight = levelHeights.get(nextLevel); const maxHeight = Math.max(currentHeight, nextHeight); // Level spacing = 1/3 the max height of adjacent levels, with a minimum const minLevelWidth = 100; // Minimum spacing between levels const levelSpacing = Math.max(minLevelWidth, maxHeight / 3); currentX += levelSpacing; } } function getLinksBetweenLevels(lowerLevel, upperLevel) { return links.filter(link => { const sourceNode = nodes.find(n => n.id === link.source); const targetNode = nodes.find(n => n.id === link.target); return sourceNode && targetNode && sourceNode.level === lowerLevel && targetNode.level === upperLevel; }); } function optimizeLevel(levelToOptimize, fixedLevel, isUpperFixed) { const levelNodes = levels.get(levelToOptimize); const fixedNodes = levels.get(fixedLevel); // Guard against undefined levels if (!levelNodes || !fixedNodes) return; const levelLinks = getLinksBetweenLevels( isUpperFixed ? levelToOptimize : fixedLevel, isUpperFixed ? fixedLevel : levelToOptimize ); levelNodes.forEach(node => { const connectedLinks = levelLinks.filter(link => isUpperFixed ? link.source === node.id : link.target === node.id ); if (connectedLinks.length > 0) { const sum = connectedLinks.reduce((acc, link) => { const connectedId = isUpperFixed ? link.target : link.source; const connectedNode = fixedNodes.find(n => n.id === connectedId); return acc + (connectedNode ? connectedNode.index : 0); }, 0); node.barycenter = sum / connectedLinks.length; } else { node.barycenter = node.index; } }); levelNodes.sort((a, b) => a.barycenter - b.barycenter); levelNodes.forEach((node, i) => { node.index = i; }); } // Iterate over actual level keys instead of assuming consecutive integers for (let i = sortedLevelKeys.length - 1; i > 0; i--) { optimizeLevel(sortedLevelKeys[i - 1], sortedLevelKeys[i], true); } for (let i = 0; i < sortedLevelKeys.length - 1; i++) { optimizeLevel(sortedLevelKeys[i + 1], sortedLevelKeys[i], false); } for (let pass = 0; pass < 3; pass++) { for (let i = sortedLevelKeys.length - 1; i > 0; i--) { optimizeLevel(sortedLevelKeys[i - 1], sortedLevelKeys[i], true); } for (let i = 0; i < sortedLevelKeys.length - 1; i++) { optimizeLevel(sortedLevelKeys[i + 1], sortedLevelKeys[i], false); } } // Position nodes horizontally using the dynamic level positions nodes.forEach(node => { node.x = levelPositions.get(node.level); }); const highestLevelNodes = levels.get(maxLevel); highestLevelNodes.sort((a, b) => a.index - b.index); const totalHeight = (highestLevelNodes.length - 1) * minNodeSpacing; highestLevelNodes.forEach((node, i) => { node.y = paddingY + i * minNodeSpacing; }); // Iterate backwards through actual levels for (let i = sortedLevelKeys.length - 2; i >= 0; i--) { const level = sortedLevelKeys[i]; const currentLevelNodes = levels.get(level); if (!currentLevelNodes) continue; currentLevelNodes.sort((a, b) => a.index - b.index); currentLevelNodes.forEach(node => { const connectedLinks = links.filter(link => link.source === node.id); const connectedNodes = connectedLinks.map(link => nodes.find(n => n.id === link.target) ).filter(Boolean); if (connectedNodes.length > 0) { node.y = d3.mean(connectedNodes, n => n.y); } else { node.y = paddingY + node.index * minNodeSpacing; } }); currentLevelNodes.sort((a, b) => a.index - b.index); for (let j = 1; j < currentLevelNodes.length; j++) { const prev = currentLevelNodes[j - 1]; const curr = currentLevelNodes[j]; if (curr.y - prev.y < minNodeSpacing) { curr.y = prev.y + minNodeSpacing; } } const levelMinY = d3.min(currentLevelNodes, n => n.y); const levelMaxY = d3.max(currentLevelNodes, n => n.y); const levelCenter = (levelMinY + levelMaxY) / 2; const targetCenter = paddingY + totalHeight / 2; const adjustment = (targetCenter - levelCenter) * 0.3; currentLevelNodes.forEach(node => { node.y += adjustment; }); } // Calculate final dimensions based on dynamic positions const lastLevel = sortedLevelKeys[sortedLevelKeys.length - 1]; const calculatedWidth = levelPositions.get(lastLevel) + paddingRight; const calculatedHeight = paddingY * 2 + d3.max(nodes, n => n.y); return { nodes, links, width: calculatedWidth, height: calculatedHeight, maxLevel, minLevel, paddingLeft, layoutType: 'linear' }; } // ============================================ // RADIAL LAYOUT ALGORITHM // ============================================ function computeRadialLayout(nodes, links, config) { const { radialLevelSpacing, radialMinOuterRadius, radialMinLevelSpacing } = config; const levels = d3.group(nodes, d => d.level); const sortedLevelKeys = Array.from(levels.keys()).sort((a, b) => a - b); const maxLevel = Math.max(...sortedLevelKeys); const minLevel = Math.min(...sortedLevelKeys); const numLevels = sortedLevelKeys.length; for (const [level, levelNodes] of levels) { levelNodes.forEach((node, i) => { node.index = i; }); } function getLinksBetweenLevels(lowerLevel, upperLevel) { return links.filter(link => { const sourceNode = nodes.find(n => n.id === link.source); const targetNode = nodes.find(n => n.id === link.target); return sourceNode && targetNode && sourceNode.level === lowerLevel && targetNode.level === upperLevel; }); } function circularMean(angles) { if (angles.length === 0) return 0; let sumSin = 0, sumCos = 0; for (const a of angles) { sumSin += Math.sin(a); sumCos += Math.cos(a); } return Math.atan2(sumSin / angles.length, sumCos / angles.length); } function normalizeAngle(angle) { while (angle > Math.PI) angle -= 2 * Math.PI; while (angle < -Math.PI) angle += 2 * Math.PI; return angle; } const pillHeight = 24; function minAngularGap(radius) { if (radius === 0) return 0; return (pillHeight * 2) / radius; } const highestLevelNodes = levels.get(maxLevel); highestLevelNodes.forEach((node, i) => { node.index = i; }); const n = highestLevelNodes.length; highestLevelNodes.sort((a, b) => a.index - b.index); highestLevelNodes.forEach((node, i) => { if (n === 1) { node.angle = 0; } else { node.angle = (2 * Math.PI * i) / n; } }); const levelRadii = new Map(); // Calculate the outer radius based on the highest level's node count const highestCount = highestLevelNodes.length; const highestCircumference = highestCount * pillHeight * 2; const outerRadius = Math.max(radialMinOuterRadius, highestCircumference / (2 * Math.PI)); levelRadii.set(maxLevel, outerRadius); // Calculate the inner radius for the lowest level const lowestLevelNodes = levels.get(minLevel); const lowestCount = lowestLevelNodes.length; let innerRadius; if (lowestCount === 1) { innerRadius = 0; } else { const lowestCircumference = lowestCount * pillHeight * 2; innerRadius = lowestCircumference / (2 * Math.PI); } // Ensure minimum total span based on minimum level spacing const minTotalSpan = (numLevels - 1) * radialMinLevelSpacing; const currentSpan = outerRadius - innerRadius; // If the current span is too small, expand the outer radius let adjustedOuterRadius = outerRadius; if (currentSpan < minTotalSpan) { adjustedOuterRadius = innerRadius + minTotalSpan; levelRadii.set(maxLevel, adjustedOuterRadius); } levelRadii.set(minLevel, innerRadius); // Calculate intermediate level radii if (numLevels > 2) { // First, calculate density-based radii (what each level needs based on node count) const densityRadii = new Map(); for (let i = 1; i < sortedLevelKeys.length - 1; i++) { const level = sortedLevelKeys[i]; const levelNodes = levels.get(level); if (!levelNodes) continue; const nodeCount = levelNodes.length; const requiredCircumference = nodeCount * pillHeight * 2; densityRadii.set(level, requiredCircumference / (2 * Math.PI)); } // Calculate evenly spaced radii const finalOuterRadius = levelRadii.get(maxLevel); const levelSpacing = (finalOuterRadius - innerRadius) / (numLevels - 1); // Assign radii with minimum spacing enforcement for (let i = 1; i < sortedLevelKeys.length - 1; i++) { const level = sortedLevelKeys[i]; const levelIndex = i; // Use index in sorted array const evenlySpacedRadius = innerRadius + levelIndex * levelSpacing; const densityRadius = densityRadii.get(level) || evenlySpacedRadius; // Blend evenly spaced with density-based let blendedRadius = (evenlySpacedRadius + densityRadius) / 2; // Enforce minimum spacing from the previous level const prevLevel = sortedLevelKeys[i - 1]; const prevRadius = levelRadii.get(prevLevel); if (blendedRadius - prevRadius < radialMinLevelSpacing) { blendedRadius = prevRadius + radialMinLevelSpacing; } levelRadii.set(level, blendedRadius); } // Second pass: if any level got pushed too close to the outer radius, // we may need to expand the outer radius further const secondToLastLevel = sortedLevelKeys[sortedLevelKeys.length - 2]; const secondToLastRadius = levelRadii.get(secondToLastLevel); const finalOuterRadius2 = levelRadii.get(maxLevel); if (finalOuterRadius2 - secondToLastRadius < radialMinLevelSpacing) { levelRadii.set(maxLevel, secondToLastRadius + radialMinLevelSpacing); } } // Process levels from second-highest down to lowest for (let i = sortedLevelKeys.length - 2; i >= 0; i--) { const level = sortedLevelKeys[i]; const levelNodes = levels.get(level); if (!levelNodes) continue; const outerLevel = sortedLevelKeys[i + 1]; const outerNodes = levels.get(outerLevel); if (!outerNodes) continue; const levelLinks = getLinksBetweenLevels(level, outerLevel); const radius = levelRadii.get(level); if (levelNodes.length === 1 && radius === 0) { levelNodes[0].angle = 0; continue; } levelNodes.forEach(node => { const connectedLinks = levelLinks.filter(link => link.source === node.id); if (connectedLinks.length > 0) { const connectedAngles = connectedLinks.map(link => { const connectedNode = outerNodes.find(n => n.id === link.target); return connectedNode ? connectedNode.angle : 0; }); node.targetAngle = circularMean(connectedAngles); } else { node.targetAngle = (2 * Math.PI * node.index) / levelNodes.length; } }); levelNodes.sort((a, b) => { const normA = normalizeAngle(a.targetAngle); const normB = normalizeAngle(b.targetAngle); return normA - normB; }); levelNodes.forEach((node, idx) => { node.index = idx; node.angle = node.targetAngle; }); const minGap = minAngularGap(radius); const maxIterations = 50; for (let iter = 0; iter < maxIterations; iter++) { let hasOverlap = false; for (let j = 0; j < levelNodes.length; j++) { const curr = levelNodes[j]; const next = levelNodes[(j + 1) % levelNodes.length]; let gap = next.angle - curr.angle; if (j === levelNodes.length - 1) { gap = (next.angle + 2 * Math.PI) - curr.angle; } gap = normalizeAngle(gap); if (gap < 0) gap += 2 * Math.PI; if (gap < minGap) { hasOverlap = true; const adjustment = (minGap - gap) / 2; curr.angle = normalizeAngle(curr.angle - adjustment); next.angle = normalizeAngle(next.angle + adjustment); } } levelNodes.forEach(node => { const diff = normalizeAngle(node.targetAngle - node.angle); node.angle = normalizeAngle(node.angle + diff * 0.1); }); if (!hasOverlap) break; } let hasOverlap = false; for (let j = 0; j < levelNodes.length; j++) { const curr = levelNodes[j]; const next = levelNodes[(j + 1) % levelNodes.length]; let gap = next.angle - curr.angle; if (j === levelNodes.length - 1) { gap = (next.angle + 2 * Math.PI) - curr.angle; } gap = normalizeAngle(gap); if (gap < 0) gap += 2 * Math.PI; if (gap < minGap * 0.9) { hasOverlap = true; break; } } if (hasOverlap) { const nodeCount = levelNodes.length; let bestNode = levelNodes[0]; let bestDiff = Math.abs(normalizeAngle(levelNodes[0].targetAngle - levelNodes[0].angle)); levelNodes.forEach(node => { const diff = Math.abs(normalizeAngle(node.targetAngle - node.angle)); if (diff < bestDiff) { bestDiff = diff; bestNode = node; } }); const startAngle = bestNode.targetAngle; const anchorIndex = levelNodes.indexOf(bestNode); levelNodes.forEach((node, idx) => { const offset = idx - anchorIndex; node.angle = normalizeAngle(startAngle + (2 * Math.PI * offset) / nodeCount); }); } } nodes.forEach(node => { const radius = levelRadii.get(node.level); node.radius = radius; if (radius === 0) { node.x = 0; node.y = 0; node.angle = 0; } else { node.x = radius * Math.cos(node.angle); node.y = radius * Math.sin(node.angle); } }); const finalOuterRadius = levelRadii.get(maxLevel); const maxRadius = finalOuterRadius + 60; const size = maxRadius * 2 + 100; return { nodes, links, width: size, height: size, maxLevel, minLevel, centerX: size / 2, centerY: size / 2, levelRadii, layoutType: 'radial' }; } const result = layoutMode === 'radial' ? computeRadialLayout([...nodes], links, config) : computeLinearLayout([...nodes], links, config); return { ...result, config, toSubscript, orderToLevel }; }32:Tba6,styles = html``33:T2d41,codeData = { const { p, n, filename, filepath } = params; const escapedFilepath = filepath.replace(/\\/g, '/'); const fullPath = `${escapedFilepath}/${filename}.json`; const gapCode = `# Parameters p := ${p}; maxPower := ${n}; filepath := "${fullPath}"; # Function to get presentation GetPresentation := function(G) local F, hom, rels, gens; hom := IsomorphismFpGroup(G); F := Image(hom); gens := GeneratorsOfGroup(F); rels := RelatorsOfFpGroup(F); return rec( generators := JoinStringsWithSeparator(List(gens, String), ", "), relations := JoinStringsWithSeparator(List(rels, String), ", ") ); end; # Function to get extension type priority (lower = preferred) ExtensionPriority := function(extType) if extType = "direct product" then return 1; elif extType = "semidirect product" then return 2; elif extType = "non-split central" then return 3; else return 4; fi; end; # Helper to build formula from parts BuildFormula := function(ext, indexStr) return Concatenation( ext.leftOperand, " ", ext.operator, indexStr, " ", ext.rightOperand ); end; # Collect all data allNodes := []; allLinks := []; for exp in [1..maxPower] do ord := p^exp; Print("Processing order ", ord, " (", NrSmallGroups(ord), " groups)...\\n"); for i in [1..NrSmallGroups(ord)] do G := SmallGroup(ord, i); pres := GetPresentation(G); Add(allNodes, rec( id := [ord, i], desc := StructureDescription(G), isAbelian := IsAbelian(G), presentation := pres )); if exp > 1 then # Approach: Look for ALL ways G can be built as extension # For each normal subgroup N, Q = G/N is the base # We want links where |N| = p (extending by Cp) normalSubsOfOrderP := Filtered(NormalSubgroups(G), N -> Size(N) = p); for N in normalSubsOfOrderP do Q := G / N; Qid := IdSmallGroup(Q); Qdesc := StructureDescription(Q); Cp := Concatenation("C", String(p)); centerG := Center(G); isNCentral := IsSubgroup(centerG, N); complements := ComplementClassesRepresentatives(G, N); if Length(complements) > 0 then comp := complements[1]; if IsNormal(G, comp) then Add(allLinks, rec( parent := Qid, parentDesc := Qdesc, child := [ord, i], childDesc := StructureDescription(G), extension := rec( type := "direct product", operator := "\\303\\227", leftOperand := Qdesc, rightOperand := Cp ) )); else Add(allLinks, rec( parent := Qid, parentDesc := Qdesc, child := [ord, i], childDesc := StructureDescription(G), extension := rec( type := "semidirect product", operator := ":", leftOperand := Cp, rightOperand := Qdesc ) )); fi; else if isNCentral then Add(allLinks, rec( parent := Qid, parentDesc := Qdesc, child := [ord, i], childDesc := StructureDescription(G), extension := rec( type := "non-split central", operator := ".", leftOperand := Cp, rightOperand := Qdesc ) )); else Add(allLinks, rec( parent := Qid, parentDesc := Qdesc, child := [ord, i], childDesc := StructureDescription(G), extension := rec( type := "non-split non-central", operator := ".", leftOperand := Cp, rightOperand := Qdesc ) )); fi; fi; od; # ALSO check for semidirect/direct products where |G| = |H| * p # and H is normal with complement of order p # This catches cases like D8 = C4 : C2 where C4 is normal normalSubsOfIndexP := Filtered(NormalSubgroups(G), H -> Index(G, H) = p); for H in normalSubsOfIndexP do complements := ComplementClassesRepresentatives(G, H); if Length(complements) > 0 then # G splits as H extended by Cp Hid := IdSmallGroup(H); Hdesc := StructureDescription(H); Cp := Concatenation("C", String(p)); comp := complements[1]; if IsNormal(G, comp) then Add(allLinks, rec( parent := Hid, parentDesc := Hdesc, child := [ord, i], childDesc := StructureDescription(G), extension := rec( type := "direct product", operator := "\\303\\227", leftOperand := Hdesc, rightOperand := Cp ) )); else Add(allLinks, rec( parent := Hid, parentDesc := Hdesc, child := [ord, i], childDesc := StructureDescription(G), extension := rec( type := "semidirect product", operator := ":", leftOperand := Hdesc, rightOperand := Cp ) )); fi; fi; od; fi; od; od; # Deduplicate links, preferring split extensions (direct/semidirect) over non-split uniqueLinksMap := rec(); for link in allLinks do key := Concatenation(String(link.parent), "->", String(link.child)); if not IsBound(uniqueLinksMap.(key)) then uniqueLinksMap.(key) := link; else # Keep the one with better (lower) priority if ExtensionPriority(link.extension.type) < ExtensionPriority(uniqueLinksMap.(key).extension.type) then uniqueLinksMap.(key) := link; fi; fi; od; uniqueLinks := []; for key in RecNames(uniqueLinksMap) do Add(uniqueLinks, uniqueLinksMap.(key)); od; # Sort links for consistent output SortBy(uniqueLinks, l -> [l.parent, l.child]); # Group by (source, operator, operands) to find duplicates needing indices formulaCounts := rec(); for link in uniqueLinks do baseFormula := BuildFormula(link.extension, ""); key := Concatenation(String(link.parent), ":", baseFormula); if not IsBound(formulaCounts.(key)) then formulaCounts.(key) := []; fi; Add(formulaCounts.(key), link); od; # Assign indexed formulas for key in RecNames(formulaCounts) do links := formulaCounts.(key); if Length(links) > 1 then SortBy(links, l -> l.child); for i in [1..Length(links)] do links[i].formula := BuildFormula( links[i].extension, Concatenation("_", String(i)) ); od; else links[1].formula := BuildFormula(links[1].extension, ""); fi; od; Print("\\nTotal nodes: ", Length(allNodes), "\\n"); Print("Total unique links: ", Length(uniqueLinks), "\\n"); # Count by extension type directCount := Length(Filtered(uniqueLinks, l -> l.extension.type = "direct product")); semiCount := Length(Filtered(uniqueLinks, l -> l.extension.type = "semidirect product")); centralCount := Length(Filtered(uniqueLinks, l -> l.extension.type = "non-split central")); noncentralCount := Length(Filtered(uniqueLinks, l -> l.extension.type = "non-split non-central")); Print(" Direct products: ", directCount, "\\n"); Print(" Semidirect products: ", semiCount, "\\n"); Print(" Non-split central: ", centralCount, "\\n"); Print(" Non-split non-central: ", noncentralCount, "\\n"); # Save to file output := OutputTextFile(filepath, false); SetPrintFormattingStatus(output, false); PrintTo(output, "{\\n"); AppendTo(output, " \\"nodes\\": [\\n"); for i in [1..Length(allNodes)] do node := allNodes[i]; AppendTo(output, " {\\n"); AppendTo(output, " \\"id\\": \\"", node.id[1], "_", node.id[2], "\\",\\n"); AppendTo(output, " \\"gapIndex\\": [", node.id[1], ", ", node.id[2], "],\\n"); AppendTo(output, " \\"desc\\": \\"", node.desc, "\\",\\n"); AppendTo(output, " \\"isAbelian\\": ", node.isAbelian, ",\\n"); AppendTo(output, " \\"generators\\": \\"", node.presentation.generators, "\\",\\n"); AppendTo(output, " \\"relations\\": \\"", node.presentation.relations, "\\"\\n"); AppendTo(output, " }"); if i < Length(allNodes) then AppendTo(output, ","); fi; AppendTo(output, "\\n"); od; AppendTo(output, " ],\\n"); AppendTo(output, " \\"links\\": [\\n"); for i in [1..Length(uniqueLinks)] do link := uniqueLinks[i]; AppendTo(output, " {\\n"); AppendTo(output, " \\"source\\": \\"", link.parent[1], "_", link.parent[2], "\\",\\n"); AppendTo(output, " \\"target\\": \\"", link.child[1], "_", link.child[2], "\\",\\n"); AppendTo(output, " \\"formula\\": \\"", link.formula, "\\",\\n"); AppendTo(output, " \\"type\\": \\"", link.extension.type, "\\"\\n"); AppendTo(output, " }"); if i < Length(uniqueLinks) then AppendTo(output, ","); fi; AppendTo(output, "\\n"); od; AppendTo(output, " ]\\n"); AppendTo(output, "}\\n"); CloseStream(output); Print("Saved to ", filepath, "\\n");`; // Create highlighted version let highlighted = gapCode .replace(/&/g, '&') .replace(//g, '>'); highlighted = highlighted.replace( /p := (\d+);/g, `p := ${p};` ); highlighted = highlighted.replace( /maxPower := (\d+);/g, `maxPower := ${n};` ); highlighted = highlighted.replace( /filepath := "([^"]+)";/g, `filepath := "${fullPath}";` ); return { gapCode, highlighted }; }34:[{"id":"5714d83f56099a6094f0f9e5a60f804b7bc2e8f11af02295234f5aa1539e8e265ef23a9ca9a7288251b818642f047c44c136df896c59291992db359c7c5a5ec9","href":"https://static.observableusercontent.com/files/5714d83f56099a6094f0f9e5a60f804b7bc2e8f11af02295234f5aa1539e8e265ef23a9ca9a7288251b818642f047c44c136df896c59291992db359c7c5a5ec9","name":"poset_3.json","type":"application/json","lastModified":1769052449309.144,"size":714526},{"id":"758dde30b70e785f26fc4141575071df1c2b8623b3dc7242d36c45f311bfce897d71fd876bfbf59aad026140860d676d7eb43655fcbfdb8ea6e971e5aabda7dc","href":"https://static.observableusercontent.com/files/758dde30b70e785f26fc4141575071df1c2b8623b3dc7242d36c45f311bfce897d71fd876bfbf59aad026140860d676d7eb43655fcbfdb8ea6e971e5aabda7dc","name":"poset.json","type":"application/json","lastModified":1769045827608.395,"size":366852}] 2d:{"id":"830afeaada6a9512","slug":null,"title":"Group Family Tree","thumbnail":"9d5258c3613d0e9b0e4c65d98cf22db04f1fbcf3190bfa483d667619fdb62d47","access_level":"public","create_time":"$D2026-01-19T19:07:39.751Z","update_time":"$D2026-01-23T04:37:24.935Z","view_time":null,"first_public_time":"$D2026-01-19T21:31:59.360Z","fork":false,"stars":11,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":292,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"},{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"title":"Group Family Tree","cells":[{"id":0,"value":"# Group Family Tree\n## Constructing a poset of pⁿ order groups generated with GAP","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":28,"value":"The default graph setting shows a cleaner version of [this subgroup relations chart](https://groupprops.subwiki.org/wiki/Groups_of_order_16#Subgroup/quotient_relationships) on group props. The radial layout is useful for graphs with lots of nodes. Below are instructions for generating your own data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":134,"value":"data = FileAttachment(\"poset.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":184,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":197,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"## Generate your own group data using GAP","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":115,"value":"**G**roups, **A**lgorithms, **P**rogramming is a free, open-source system for computational discrete algebra, with particular emphasis on computational group theory. \n\nDownload from the official GAP website: [https://www.gap-system.org](https://www.gap-system.org). \n\nThen, **right-click + paste** the following code into GAP. Press **enter** to save a JSON file you can upload to this notebook. Higher order groups will take longer to compute.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":66,"value":"viewof params = Inputs.form({\n p: Inputs.select([2, 3, 5, 7, 11, 13, 17, 19, 23, 29], {\n label: \"Prime number\",\n value: 2,\n width: \"50px\"\n }),\n n: Inputs.select([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], {\n label: \"Number of powers\",\n value: 3,\n width: \"50px\"\n }),\n filename: Inputs.text({\n label: \"JSON file name\",\n value: \"poset\"\n }),\n filepath: Inputs.text({\n label: \"JSON save folder\",\n value: \"paste-folder-path-here\",\n width: \"500px\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"codeDisplay = {\n const container = html`

\n \n

${html`${codeData.highlighted}`}

`;\n \n const button = container.querySelector('.copy-button');\n \n button.addEventListener('click', async () => {\n try {\n await navigator.clipboard.writeText(codeData.gapCode);\n button.textContent = 'Copied!';\n button.style.background = '#34a853';\n setTimeout(() => {\n button.textContent = 'Copy Code to Clipboard';\n button.style.background = '#4a90d9';\n }, 2000);\n } catch (err) {\n button.textContent = 'Failed to copy';\n button.style.background = '#d93025';\n setTimeout(() => {\n button.textContent = 'Copy Code to Clipboard';\n button.style.background = '#4a90d9';\n }, 2000);\n }\n });\n \n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":257,"value":"```\nExtensions of N by Q\n│\n├── Split extensions (semi-direct products)\n│ ├── Trivial action → Direct product\n│ ├── Action by inner auts → \"Weak\" semi-direct\n│ └── Action by outer auts → \"Strong\" semi-direct\n│ └── (multiple non-conjugate choices possible)\n│\n└── Non-split extensions\n ├── Central (N ⊆ Z(G))\n │ ├── Stem extensions (N = Z(G) ∩ [G,G])\n │ └── Non-stem central\n │\n └── Non-central\n ├── N abelian but not central\n └── N non-abelian\n └── (increasingly complex)\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2e:"$2d:body"