@teachinglab/omd 0.2.6 → 0.2.7

package/omd/step-visualizer/omdStepVisualizerLayout.js

@@ -1,6 +1,6 @@
 import { omdEquationNode } from '../nodes/omdEquationNode.js';
 import { omdColor } from '../../src/omdColor.js';
-import { jsvgLine } from '@teachinglab/jsvg';
+import { jsvgLine, jsvgEllipse } from '@teachinglab/jsvg';
 
 /**
  * Handles visual layout, positioning, and visibility management for step visualizations
@@ -8,6 +8,21 @@ import { jsvgLine } from '@teachinglab/jsvg';
 export class omdStepVisualizerLayout {
     constructor(stepVisualizer) {
         this.stepVisualizer = stepVisualizer;
+        this.expansionDots = []; // Small dots that show/hide hidden steps
+        this.fixedVisualizerPosition = 250; // Fixed position for the step visualizer from left edge
+        this.allowEquationRepositioning = true; // Flag to control when equations can be repositioned
+    }
+
+    /**
+     * Sets the fixed position for the step visualizer
+     * @param {number} position - The x position from the left edge where the visualizer should be positioned
+     */
+    setFixedVisualizerPosition(position) {
+        this.fixedVisualizerPosition = position;
+        // Trigger a layout update if the visualizer is already initialized
+        if (this.stepVisualizer && this.stepVisualizer.stepDots.length > 0) {
+            this.updateVisualLayout();
+        }
     }
 
     /**
@@ -16,14 +31,31 @@ export class omdStepVisualizerLayout {
     updateVisualLayout() {
         if (this.stepVisualizer.stepDots.length === 0) return;
         
-        // Position visual container to the right of the sequence
-        // Add extra offset based on equation background padding (if any)
-        const baseRight = (this.stepVisualizer.sequenceWidth || this.stepVisualizer.width);
-        // Use EFFECTIVE padding (after pill clamping) to avoid overlap when pills are wider
+        // Calculate the total width needed for equations (including any padding)
+        const baseEquationWidth = (this.stepVisualizer.sequenceWidth || this.stepVisualizer.width);
         const extraPaddingX = this._getMaxEquationEffectivePaddingX();
-        const visualX = baseRight + this.stepVisualizer.visualSpacing + extraPaddingX;
+        const totalEquationWidth = baseEquationWidth + extraPaddingX;
+        
+        // Position visual container at a fixed position
+        const visualX = this.fixedVisualizerPosition;
         this.stepVisualizer.visualContainer.setPosition(visualX, 0);
         
+        // Only reposition equations if explicitly allowed (not during simple dot clicks)
+        if (this.allowEquationRepositioning) {
+            // Calculate how much space is available for equations before the visualizer
+            const availableEquationSpace = this.fixedVisualizerPosition - this.stepVisualizer.visualSpacing;
+            
+            // If equations are too wide, shift them left to fit
+            let equationOffsetX = 0;
+            if (totalEquationWidth > availableEquationSpace) {
+                equationOffsetX = availableEquationSpace - totalEquationWidth;
+                console.debug('Equations too wide, shifting left by:', -equationOffsetX);
+            }
+            
+            // Apply the offset to equation positioning
+            this._adjustEquationPositions(equationOffsetX);
+        }
+        
         // Position dots based on visible equations
         const visibleSteps = this.stepVisualizer.steps.filter(s => s.visible !== false);
         let currentY = 0;
@@ -88,6 +120,37 @@ export class omdStepVisualizerLayout {
         
         this.stepVisualizer.visualContainer.setWidthAndHeight(containerWidth, containerHeight);
         this.updateVisualZOrder();
+        
+        // Position expansion dots after main dots are positioned
+        this._positionExpansionDots();
+    }
+
+    /**
+     * Adjusts the horizontal position of all equations by the specified offset
+     * @private
+     */
+    _adjustEquationPositions(offsetX) {
+        if (offsetX === 0) return; // No adjustment needed
+        
+        const sv = this.stepVisualizer;
+        
+        // Adjust position of all steps (equations and operation display nodes)
+        sv.steps.forEach(step => {
+            if (step && step.setPosition && typeof step.setPosition === 'function') {
+                const currentX = step.xpos || 0;
+                const currentY = step.ypos || 0;
+                step.setPosition(currentX + offsetX, currentY);
+                
+                // Also adjust operation display nodes if they exist
+                if (step.operationDisplayNode && step.operationDisplayNode.setPosition) {
+                    const opCurrentX = step.operationDisplayNode.xpos || 0;
+                    const opCurrentY = step.operationDisplayNode.ypos || 0;
+                    step.operationDisplayNode.setPosition(opCurrentX + offsetX, opCurrentY);
+                }
+            }
+        });
+        
+        console.debug('Adjusted equation positions by offsetX:', offsetX);
     }
 
     /**
@@ -157,6 +220,16 @@ export class omdStepVisualizerLayout {
                 }
             }
         });
+
+        // Expansion dots on top of regular dots (z-index 4)
+        this.expansionDots.forEach(dot => {
+            if (dot && dot.svgObject) {
+                dot.svgObject.style.zIndex = '4';
+                if (dot.parentNode !== this.stepVisualizer.visualContainer) {
+                    this.stepVisualizer.visualContainer.addChild(dot);
+                }
+            }
+        });
     }
 
     /**
@@ -177,20 +250,33 @@ export class omdStepVisualizerLayout {
      * Updates visibility of visual elements based on equation visibility
      */
     updateVisualVisibility() {
+        console.debug('\n=== updateVisualVisibility START ===');
         const sv = this.stepVisualizer;
 
-        // Update dot visibility first, which is the source of truth
-        sv.stepDots.forEach(dot => {
+        // Update dot visibility and color first, which is the source of truth
+        const dotColor = sv.styling?.dotColor || omdColor.stepColor;
+        console.debug('Updating dot visibility and color...');
+        
+        sv.stepDots.forEach((dot, index) => {
             if (dot.equationRef && dot.equationRef.visible !== false) {
+                dot.setFillColor(dotColor);
+                dot.setStrokeColor(dotColor);
                 dot.show();
                 dot.visible = true; // Use the dot's own visibility property
+                console.debug(`Dot ${index}: VISIBLE (equation.visible=${dot.equationRef.visible})`);
             } else {
                 dot.hide();
                 dot.visible = false;
+                console.debug(`Dot ${index}: HIDDEN (equation.visible=${dot.equationRef ? dot.equationRef.visible : 'no equation'})`);
             }
         });
 
+        // Clear existing expansion dots
+        console.debug('Clearing existing expansion dots...');
+        this._clearExpansionDots();
+
         // Remove all old lines from the container and the array
+        console.debug('Removing old lines...');
         sv.stepLines.forEach(line => {
             // Remove the line if it is currently a child of the visualContainer
             if (line.parent === sv.visualContainer) {
@@ -201,14 +287,17 @@ export class omdStepVisualizerLayout {
 
         // Get the dots that are currently visible
         const visibleDots = sv.stepDots.filter(dot => dot.visible);
+        console.debug(`Found ${visibleDots.length} visible dots out of ${sv.stepDots.length} total dots`);
 
         // Re-create connecting lines only between the visible dots
+        console.debug('Creating lines between visible dots...');
         for (let i = 0; i < visibleDots.length - 1; i++) {
             const fromDot = visibleDots[i];
             const toDot = visibleDots[i + 1];
 
             const line = new jsvgLine();
-            line.setStrokeColor(omdColor.stepColor);
+            const lineColor = sv.styling?.lineColor || omdColor.stepColor;
+            line.setStrokeColor(lineColor);
             line.setStrokeWidth(sv.lineWidth);
             line.fromDotIndex = sv.stepDots.indexOf(fromDot);
             line.toDotIndex = sv.stepDots.indexOf(toDot);
@@ -216,9 +305,19 @@ export class omdStepVisualizerLayout {
             sv.visualContainer.addChild(line);
             sv.stepLines.push(line);
         }
+        console.debug(`Created ${sv.stepLines.length} lines`);
 
         // After creating the lines, update their positions
         this.updateAllLinePositions();
+
+        // Create expansion dots for dots that have hidden steps before them
+        console.debug('\n>>> CALLING _createExpansionDots <<<');
+        this._createExpansionDots();
+        
+        console.debug('\n>>> CALLING _positionExpansionDots <<<');
+        this._positionExpansionDots();
+        
+        console.debug('=== updateVisualVisibility END ===\n');
     }
 
     /**
@@ -242,4 +341,536 @@ export class omdStepVisualizerLayout {
             dot.svgObject.onclick = null;
         }
     }
+
+    /**
+     * Clears all expansion dots
+     * @private
+     */
+    _clearExpansionDots() {
+        this.expansionDots.forEach(dot => {
+            if (dot.parentNode === this.stepVisualizer.visualContainer) {
+                this.stepVisualizer.visualContainer.removeChild(dot);
+            }
+        });
+        this.expansionDots = [];
+    }
+
+    /**
+     * Creates expansion dots for visible dots that have hidden steps before them
+     * @private
+     */
+    _createExpansionDots() {
+        console.debug('=== _createExpansionDots START ===');
+        const sv = this.stepVisualizer;
+        const allDots = sv.stepDots;
+        const visibleDots = sv.stepDots.filter(dot => dot.visible);
+        
+        console.debug('Total dots:', allDots.length, 'Visible dots:', visibleDots.length);
+        
+        // Debug all steps and their properties
+        console.debug('=== ALL STEPS DEBUG ===');
+        sv.steps.forEach((step, i) => {
+            if (step && (step instanceof omdEquationNode || step.constructor.name === 'omdEquationNode')) {
+                console.debug(`Step ${i}: type=${step.constructor.name}, stepMark=${step.stepMark}, visible=${step.visible}`);
+            } else {
+                console.debug(`Step ${i}: type=${step ? step.constructor.name : 'null'}, not an equation`);
+            }
+        });
+        
+        // Debug all dots and their properties
+        console.debug('=== ALL DOTS DEBUG ===');
+        allDots.forEach((dot, i) => {
+            if (dot && dot.equationRef) {
+                console.debug(`Dot ${i}: visible=${dot.visible}, equation.stepMark=${dot.equationRef.stepMark}, equation.visible=${dot.equationRef.visible}`);
+            } else {
+                console.debug(`Dot ${i}: no equation reference`);
+            }
+        });
+        
+        console.debug('=== CHECKING VISIBLE DOTS FOR EXPANSION OPPORTUNITIES ===');
+        
+        // Check for hidden intermediate steps between consecutive visible major steps (stepMark = 0)
+        const visibleMajorSteps = [];
+        sv.steps.forEach((step, stepIndex) => {
+            if (step && (step instanceof omdEquationNode || step.constructor.name === 'omdEquationNode')) {
+                if (step.stepMark === 0 && step.visible === true) {
+                    visibleMajorSteps.push(stepIndex);
+                    console.debug(`Found visible major step at index ${stepIndex}`);
+                }
+            }
+        });
+        
+        console.debug(`Visible major steps: [${visibleMajorSteps.join(', ')}]`);
+        
+        // Check between consecutive visible major steps for hidden intermediate steps
+        for (let i = 1; i < visibleMajorSteps.length; i++) {
+            const previousMajorStepIndex = visibleMajorSteps[i - 1];
+            const currentMajorStepIndex = visibleMajorSteps[i];
+            
+            console.debug(`\n--- Checking between major steps ${previousMajorStepIndex} and ${currentMajorStepIndex} ---`);
+            
+            // Count hidden intermediate steps between these major steps
+            let hiddenIntermediateCount = 0;
+            for (let j = previousMajorStepIndex + 1; j < currentMajorStepIndex; j++) {
+                const step = sv.steps[j];
+                if (step && (step instanceof omdEquationNode || step.constructor.name === 'omdEquationNode')) {
+                    if (step.stepMark > 0 && step.visible === false) {
+                        hiddenIntermediateCount++;
+                        console.debug(`  Found hidden intermediate step at ${j}: stepMark=${step.stepMark}`);
+                    }
+                }
+            }
+            
+            console.debug(`Hidden intermediate steps between ${previousMajorStepIndex} and ${currentMajorStepIndex}: ${hiddenIntermediateCount}`);
+            
+            if (hiddenIntermediateCount > 0) {
+                console.debug('>>> CREATING EXPANSION DOT <<<');
+                // Find the dot for the current major step to position the expansion dot above it
+                const currentMajorStep = sv.steps[currentMajorStepIndex];
+                const currentDotIndex = sv.stepDots.findIndex(dot => dot.equationRef === currentMajorStep);
+                
+                if (currentDotIndex >= 0) {
+                    // Find the position in the visible dots array
+                    const visibleDotIndex = i; // i is the position in visibleMajorSteps array
+                    console.debug(`Found dot at stepDots index ${currentDotIndex} for major step ${currentMajorStepIndex}, visible dot index: ${visibleDotIndex}`);
+                    const expansionDot = this._createSingleExpansionDot(visibleDotIndex, previousMajorStepIndex, hiddenIntermediateCount);
+                    expansionDot.majorStepIndex = currentMajorStepIndex; // Store for reference
+                    this.expansionDots.push(expansionDot);
+                    sv.visualContainer.addChild(expansionDot);
+                    console.debug(`Expansion dot created at visible index ${visibleDotIndex} and added to container`);
+                } else {
+                    console.debug(`WARNING: Could not find dot for major step ${currentMajorStepIndex}`);
+                }
+            } else {
+                console.debug('No expansion dot needed - no hidden intermediate steps');
+            }
+        }
+        
+        console.debug('=== CHECKING FOR COLLAPSE DOTS ===');
+        // Also create collapse dots for expanded sequences
+        this._createCollapseDots();
+        
+        console.debug(`Total expansion dots created: ${this.expansionDots.length}`);
+        console.debug('=== _createExpansionDots END ===\n');
+    }
+
+    /**
+     * Counts intermediate steps (stepMark > 0) between two visible dots
+     * @private
+     */
+    _countIntermediateStepsBetween(fromDotIndex, toDotIndex) {
+        const sv = this.stepVisualizer;
+        let count = 0;
+        
+        // Get the equation references for the from and to dots
+        const fromEquation = sv.stepDots[fromDotIndex]?.equationRef;
+        const toEquation = sv.stepDots[toDotIndex]?.equationRef;
+        
+        if (!fromEquation || !toEquation) {
+            console.debug('Missing equation references for dots', fromDotIndex, toDotIndex);
+            return 0;
+        }
+        
+        // Find the step indices in the main steps array
+        const fromStepIndex = sv.steps.indexOf(fromEquation);
+        const toStepIndex = sv.steps.indexOf(toEquation);
+        
+        console.debug('Checking steps between step indices:', fromStepIndex, 'and', toStepIndex);
+        
+        // Count intermediate steps between these two major steps
+        for (let i = fromStepIndex + 1; i < toStepIndex; i++) {
+            const step = sv.steps[i];
+            if (step && (step instanceof omdEquationNode || step.constructor.name === 'omdEquationNode')) {
+                // Count intermediate steps (stepMark > 0) that are currently hidden
+                if (step.stepMark !== undefined && step.stepMark > 0 && step.visible === false) {
+                    console.debug(`  Found intermediate step at ${i}: stepMark=${step.stepMark}, visible=${step.visible}`);
+                    count++;
+                }
+            }
+        }
+        
+        console.debug('Intermediate steps between dots', fromDotIndex, 'and', toDotIndex, '(step indices', fromStepIndex, 'to', toStepIndex, '):', count);
+        return count;
+    }
+
+    /**
+     * Counts hidden steps between two step indices (legacy method for backward compatibility)
+     * @private
+     */
+    _countHiddenStepsBetween(fromIndex, toIndex) {
+        return this._countIntermediateStepsBetween(fromIndex, toIndex);
+    }
+
+    /**
+     * Creates a single expansion dot
+     * @private
+     */
+    _createSingleExpansionDot(currentStepIndex, previousStepIndex, hiddenCount) {
+        console.debug(`\n=== _createSingleExpansionDot(${currentStepIndex}, ${previousStepIndex}, ${hiddenCount}) ===`);
+        const sv = this.stepVisualizer;
+        const expansionRadius = Math.max(3, sv.dotRadius * 0.4);
+        
+        console.debug(`Creating expansion dot with radius: ${expansionRadius}`);
+        
+        const expansionDot = new jsvgEllipse();
+        expansionDot.setWidthAndHeight(expansionRadius * 2, expansionRadius * 2);
+        
+        // Use same color as regular dots
+        const dotColor = sv.styling?.dotColor || omdColor.stepColor;
+        console.debug(`Setting expansion dot color: ${dotColor}`);
+        expansionDot.setFillColor(dotColor);
+        expansionDot.setStrokeColor(dotColor);
+        expansionDot.setStrokeWidth(1);
+        
+        // Store metadata
+        expansionDot.isExpansionDot = true;
+        expansionDot.currentStepIndex = currentStepIndex;
+        expansionDot.previousStepIndex = previousStepIndex;
+        expansionDot.hiddenCount = hiddenCount;
+        expansionDot.radius = expansionRadius;
+        
+        console.debug('Expansion dot metadata:', {
+            isExpansionDot: expansionDot.isExpansionDot,
+            currentStepIndex: expansionDot.currentStepIndex,
+            previousStepIndex: expansionDot.previousStepIndex,
+            hiddenCount: expansionDot.hiddenCount,
+            radius: expansionDot.radius
+        });
+        
+        // Make it clickable
+        expansionDot.svgObject.style.cursor = "pointer";
+        expansionDot.svgObject.onclick = (event) => {
+            try {
+                console.debug('Expansion dot clicked!');
+                this._handleExpansionDotClick(expansionDot);
+                event.stopPropagation();
+            } catch (error) {
+                console.error('Error in expansion dot click handler:', error);
+            }
+        };
+        
+        console.debug('Expansion dot created successfully');
+        console.debug('=== _createSingleExpansionDot END ===\n');
+        
+        return expansionDot;
+    }
+
+    /**
+     * Positions expansion dots above their corresponding main dots
+     * @private
+     */
+    _positionExpansionDots() {
+        console.debug('\n=== _positionExpansionDots START ===');
+        const sv = this.stepVisualizer;
+        
+        console.debug(`Positioning ${this.expansionDots.length} expansion dots`);
+        
+        this.expansionDots.forEach((expansionDot, index) => {
+            console.debug(`\n--- Positioning expansion dot ${index} ---`);
+            let targetDot;
+            
+            if (expansionDot.isCollapseDot) {
+                console.debug('This is a collapse dot');
+                // For collapse dots, use the currentStepIndex which points to the dot index
+                const dotIndex = expansionDot.currentStepIndex;
+                targetDot = sv.stepDots[dotIndex];
+                console.debug(`Using dot index ${dotIndex} for collapse dot positioning`);
+            } else {
+                console.debug('This is an expansion dot');
+                // For expansion dots, we need to find the actual visible dot that corresponds to the major step
+                const majorStepIndex = expansionDot.majorStepIndex;
+                const majorStep = sv.steps[majorStepIndex];
+                
+                if (majorStep) {
+                    // Find the dot that corresponds to this major step
+                    const dotIndex = sv.stepDots.findIndex(dot => dot.equationRef === majorStep);
+                    targetDot = sv.stepDots[dotIndex];
+                    console.debug(`Found target dot at index ${dotIndex} for major step ${majorStepIndex}`);
+                } else {
+                    console.debug(`WARNING: Major step at index ${majorStepIndex} not found`);
+                }
+            }
+            
+            if (targetDot && targetDot.visible) {
+                const offsetY = -(expansionDot.radius * 2 + 8); // Position above main dot
+                const newX = targetDot.xpos;
+                const newY = targetDot.ypos + offsetY;
+                console.debug(`Positioning at: x=${newX}, y=${newY} (target: x=${targetDot.xpos}, y=${targetDot.ypos}, offset=${offsetY})`);
+                expansionDot.setPosition(newX, newY);
+                console.debug('Expansion dot positioned successfully');
+            } else {
+                console.debug(`WARNING: No visible target dot found for expansion dot ${index}`);
+            }
+        });
+        
+        console.debug('=== _positionExpansionDots END ===\n');
+    }
+
+    /**
+     * Creates collapse dots for expanded sequences
+     * @private
+     */
+    _createCollapseDots() {
+        console.debug('\n=== _createCollapseDots START ===');
+        const sv = this.stepVisualizer;
+        const allDots = sv.stepDots;
+        
+        console.debug('Checking for visible intermediate steps to create collapse dots');
+        
+        // Group visible intermediate steps by their consecutive sequences
+        const intermediateGroups = [];
+        let currentGroup = [];
+        
+        allDots.forEach((dot, index) => {
+            if (dot && dot.visible && dot.equationRef) {
+                const stepMark = dot.equationRef.stepMark;
+                console.debug(`Dot ${index}: visible=${dot.visible}, stepMark=${stepMark}`);
+                
+                if (stepMark !== undefined && stepMark > 0) {
+                    currentGroup.push(index);
+                    console.debug(`>>> Found visible intermediate step at index ${index} (stepMark=${stepMark})`);
+                } else if (currentGroup.length > 0) {
+                    // We hit a major step, so end the current group
+                    intermediateGroups.push([...currentGroup]);
+                    console.debug(`Ended intermediate group:`, currentGroup);
+                    currentGroup = [];
+                }
+            } else if (currentGroup.length > 0) {
+                // We hit a non-visible dot, so end the current group
+                intermediateGroups.push([...currentGroup]);
+                console.debug(`Ended intermediate group at non-visible dot:`, currentGroup);
+                currentGroup = [];
+            }
+        });
+        
+        // Don't forget the last group if it exists
+        if (currentGroup.length > 0) {
+            intermediateGroups.push([...currentGroup]);
+            console.debug(`Final intermediate group:`, currentGroup);
+        }
+        
+        console.debug(`Found ${intermediateGroups.length} groups of visible intermediate steps:`, intermediateGroups);
+        
+        // Create a collapse dot for each group
+        intermediateGroups.forEach((group, groupIndex) => {
+            if (group.length > 0) {
+                console.debug(`\n>>> CREATING COLLAPSE DOT FOR GROUP ${groupIndex} <<<`);
+                
+                // Find the major step that comes after the last intermediate step in this group
+                const lastIntermediateIndex = group[group.length - 1];
+                const lastIntermediateDot = sv.stepDots[lastIntermediateIndex];
+                const lastIntermediateStep = lastIntermediateDot.equationRef;
+                const lastIntermediateStepIndex = sv.steps.indexOf(lastIntermediateStep);
+                
+                console.debug(`Last intermediate step in group ${groupIndex} is at step index ${lastIntermediateStepIndex}`);
+                
+                // Find the next major step (stepMark = 0) after the intermediate steps
+                let majorStepAfterIndex = -1;
+                for (let i = lastIntermediateStepIndex + 1; i < sv.steps.length; i++) {
+                    const step = sv.steps[i];
+                    if (step && (step instanceof omdEquationNode || step.constructor.name === 'omdEquationNode')) {
+                        if (step.stepMark === 0 && step.visible === true) {
+                            majorStepAfterIndex = i;
+                            console.debug(`Found major step after intermediates at step index ${i}`);
+                            break;
+                        }
+                    }
+                }
+                
+                if (majorStepAfterIndex >= 0) {
+                    // Find the dot index for this major step
+                    const majorStepAfter = sv.steps[majorStepAfterIndex];
+                    const majorDotIndex = sv.stepDots.findIndex(dot => dot.equationRef === majorStepAfter);
+                    
+                    if (majorDotIndex >= 0) {
+                        console.debug(`Positioning collapse dot for group ${groupIndex} above major step dot at index ${majorDotIndex}`);
+                        
+                        const collapseDot = this._createSingleExpansionDot(majorDotIndex, -1, group.length);
+                        collapseDot.isCollapseDot = true;
+                        collapseDot.intermediateSteps = group;
+                        collapseDot.groupIndex = groupIndex; // Store group reference
+                        this.expansionDots.push(collapseDot);
+                        sv.visualContainer.addChild(collapseDot);
+                        console.debug(`Collapse dot created and added to container for group ${groupIndex} at major step dot index: ${majorDotIndex}`);
+                    } else {
+                        console.debug(`WARNING: Could not find dot for major step after intermediates in group ${groupIndex}`);
+                    }
+                } else {
+                    console.debug(`WARNING: Could not find major step after intermediate steps in group ${groupIndex}`);
+                }
+            }
+        });
+        
+        console.debug('=== _createCollapseDots END ===\n');
+    }
+
+    /**
+     * Handles clicking on an expansion dot to toggle hidden steps
+     * @private
+     */
+    _handleExpansionDotClick(expansionDot) {
+        const sv = this.stepVisualizer;
+        
+        if (expansionDot.isCollapseDot) {
+            // Handle collapse dot click - hide only the specific group of intermediate steps
+            console.debug(`Collapse dot clicked: collapsing group ${expansionDot.groupIndex || 'unknown'}`);
+            
+            // Hide only the intermediate steps in this specific group
+            const intermediateSteps = expansionDot.intermediateSteps || [];
+            console.debug(`Hiding ${intermediateSteps.length} intermediate steps in this group:`, intermediateSteps);
+            
+            intermediateSteps.forEach(dotIndex => {
+                const dot = sv.stepDots[dotIndex];
+                if (dot && dot.equationRef) {
+                    console.debug(`Hiding intermediate step with dot index ${dotIndex}, stepMark=${dot.equationRef.stepMark}`);
+                    this._hideStep(dot.equationRef);
+                    
+                    // Also hide the corresponding dot
+                    dot.hide();
+                    dot.visible = false;
+                    console.debug(`Hidden dot ${dotIndex}`);
+                }
+            });
+            
+            // Remove any lines that connect to the hidden dots
+            console.debug('Cleaning up lines connected to hidden dots...');
+            this._removeLinesToHiddenDots();
+            
+            console.debug(`Collapsed group ${expansionDot.groupIndex || 'unknown'}`);
+        } else {
+            // Handle expansion dot click - show steps between the major steps
+            const { majorStepIndex, previousStepIndex } = expansionDot;
+            
+            console.debug('Expansion dot clicked: showing steps between major step indices', previousStepIndex, 'and', majorStepIndex);
+            
+            // Remove this expansion dot immediately since we're expanding
+            console.debug('Removing clicked expansion dot from container and array');
+            if (expansionDot.parentNode === sv.visualContainer) {
+                sv.visualContainer.removeChild(expansionDot);
+            }
+            const dotIndex = this.expansionDots.indexOf(expansionDot);
+            if (dotIndex >= 0) {
+                this.expansionDots.splice(dotIndex, 1);
+                console.debug(`Removed expansion dot at index ${dotIndex}`);
+            }
+            
+            // Show all intermediate steps between the previous and current major steps
+            for (let i = previousStepIndex + 1; i < majorStepIndex; i++) {
+                const step = sv.steps[i];
+                if (step && (step instanceof omdEquationNode || step.constructor.name === 'omdEquationNode')) {
+                    if (step.stepMark > 0) {
+                        console.debug('Showing intermediate step at index', i, 'with stepMark', step.stepMark);
+                        this._showStep(step);
+                        
+                        // Also show the corresponding dot
+                        const stepDotIndex = sv.stepDots.findIndex(dot => dot.equationRef === step);
+                        if (stepDotIndex >= 0) {
+                            const stepDot = sv.stepDots[stepDotIndex];
+                            stepDot.show();
+                            stepDot.visible = true;
+                            console.debug(`Shown dot ${stepDotIndex}`);
+                        }
+                    }
+                }
+            }
+            
+            console.debug('Showed intermediate steps');
+        }
+        
+        // Force a complete refresh of the visualizer to clean up artifacts and rebuild lines
+        sv.rebuildVisualizer();
+    }
+
+    /**
+     * Properly hides a step and all its child elements
+     * @private
+     */
+    _hideStep(step) {
+        step.visible = false;
+        if (step.svgObject) {
+            step.svgObject.style.display = 'none';
+        }
+        
+        // Also hide operation display nodes if they exist
+        if (step.operationDisplayNode) {
+            step.operationDisplayNode.visible = false;
+            if (step.operationDisplayNode.svgObject) {
+                step.operationDisplayNode.svgObject.style.display = 'none';
+            }
+        }
+        
+        // Hide any child nodes recursively
+        if (step.children && Array.isArray(step.children)) {
+            step.children.forEach(child => {
+                if (child) {
+                    this._hideStep(child);
+                }
+            });
+        }
+    }
+
+    /**
+     * Properly shows a step and all its child elements
+     * @private
+     */
+    _showStep(step) {
+        step.visible = true;
+        if (step.svgObject) {
+            step.svgObject.style.display = '';
+        }
+        
+        // Also show operation display nodes if they exist
+        if (step.operationDisplayNode) {
+            step.operationDisplayNode.visible = true;
+            if (step.operationDisplayNode.svgObject) {
+                step.operationDisplayNode.svgObject.style.display = '';
+            }
+        }
+        
+        // Show any child nodes recursively
+        if (step.children && Array.isArray(step.children)) {
+            step.children.forEach(child => {
+                if (child) {
+                    this._showStep(child);
+                }
+            });
+        }
+    }
+
+    /**
+     * Removes lines that connect to hidden dots
+     * @private
+     */
+    _removeLinesToHiddenDots() {
+        const sv = this.stepVisualizer;
+        console.debug('Checking lines for hidden dot connections...');
+        
+        // Get lines that connect to hidden dots
+        const linesToRemove = [];
+        sv.stepLines.forEach((line, lineIndex) => {
+            const fromDot = sv.stepDots[line.fromDotIndex];
+            const toDot = sv.stepDots[line.toDotIndex];
+            
+            if ((fromDot && !fromDot.visible) || (toDot && !toDot.visible)) {
+                console.debug(`Line ${lineIndex} connects to hidden dot(s): from visible=${fromDot?.visible}, to visible=${toDot?.visible}`);
+                linesToRemove.push(line);
+            }
+        });
+        
+        // Remove the problematic lines
+        console.debug(`Removing ${linesToRemove.length} lines connected to hidden dots`);
+        linesToRemove.forEach(line => {
+            if (line.parent === sv.visualContainer) {
+                sv.visualContainer.removeChild(line);
+                console.debug('Removed line from visual container');
+            }
+            const lineIndex = sv.stepLines.indexOf(line);
+            if (lineIndex >= 0) {
+                sv.stepLines.splice(lineIndex, 1);
+                console.debug(`Removed line from stepLines array at index ${lineIndex}`);
+            }
+        });
+        
+        console.debug('Line cleanup complete');
+    }
 }