@teachinglab/omd 0.2.7 → 0.2.8

package/omd/step-visualizer/omdStepVisualizerLayout.js

@@ -1,6 +1,7 @@
 import { omdEquationNode } from '../nodes/omdEquationNode.js';
 import { omdColor } from '../../src/omdColor.js';
 import { jsvgLine, jsvgEllipse } from '@teachinglab/jsvg';
+import { getDotRadius } from '../config/omdConfigManager.js';
 
 /**
  * Handles visual layout, positioning, and visibility management for step visualizations
@@ -18,17 +19,25 @@ export class omdStepVisualizerLayout {
      * @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();
+        // Only update if position actually changes
+        if (this.fixedVisualizerPosition !== position) {
+            this.fixedVisualizerPosition = position;
+            // Trigger a layout update if the visualizer is already initialized
+            if (this.stepVisualizer && this.stepVisualizer.stepDots.length > 0) {
+                this.updateVisualLayout(true); // Allow repositioning for position changes
+            }
         }
     }
 
     /**
      * Updates the layout of visual elements relative to the sequence
+     * @param {boolean} allowRepositioning - Whether to allow equation repositioning (default: false)
      */
-    updateVisualLayout() {
+    updateVisualLayout(allowRepositioning = false) {
+        
+        
+        
+        
         if (this.stepVisualizer.stepDots.length === 0) return;
         
         // Calculate the total width needed for equations (including any padding)
@@ -41,7 +50,8 @@ export class omdStepVisualizerLayout {
         this.stepVisualizer.visualContainer.setPosition(visualX, 0);
         
         // Only reposition equations if explicitly allowed (not during simple dot clicks)
-        if (this.allowEquationRepositioning) {
+        if (this.allowEquationRepositioning && allowRepositioning) {
+            
             // Calculate how much space is available for equations before the visualizer
             const availableEquationSpace = this.fixedVisualizerPosition - this.stepVisualizer.visualSpacing;
             
@@ -49,11 +59,14 @@ export class omdStepVisualizerLayout {
             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);
+        } else {
+            
+            
         }
         
         // Position dots based on visible equations
@@ -93,6 +106,11 @@ export class omdStepVisualizerLayout {
         let containerWidth = this.stepVisualizer.dotRadius * 3;
         let containerHeight = this.stepVisualizer.height;
         
+        // Store the original height before expansion for autoscale calculations
+        if (!this.stepVisualizer.sequenceHeight) {
+            this.stepVisualizer.sequenceHeight = containerHeight;
+        }
+        
         const textBoxes = this.stepVisualizer.textBoxManager.getStepTextBoxes();
         if (textBoxes.length > 0) {
             const textBoxWidth = 280;
@@ -136,7 +154,7 @@ export class omdStepVisualizerLayout {
         
         // Adjust position of all steps (equations and operation display nodes)
         sv.steps.forEach(step => {
-            if (step && step.setPosition && typeof step.setPosition === 'function') {
+            if (step && step.setPosition) {
                 const currentX = step.xpos || 0;
                 const currentY = step.ypos || 0;
                 step.setPosition(currentX + offsetX, currentY);
@@ -150,7 +168,7 @@ export class omdStepVisualizerLayout {
             }
         });
         
-        console.debug('Adjusted equation positions by offsetX:', offsetX);
+        
     }
 
     /**
@@ -250,12 +268,12 @@ 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 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) {
@@ -263,20 +281,20 @@ export class omdStepVisualizerLayout {
                 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) {
@@ -287,10 +305,10 @@ 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];
@@ -298,26 +316,26 @@ export class omdStepVisualizerLayout {
             const line = new jsvgLine();
             const lineColor = sv.styling?.lineColor || omdColor.stepColor;
             line.setStrokeColor(lineColor);
-            line.setStrokeWidth(sv.lineWidth);
+            line.setStrokeWidth(sv.styling?.lineWidth || sv.lineWidth);
             line.fromDotIndex = sv.stepDots.indexOf(fromDot);
             line.toDotIndex = sv.stepDots.indexOf(toDot);
 
             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');
+        
     }
 
     /**
@@ -360,34 +378,34 @@ export class omdStepVisualizerLayout {
      * @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 = [];
@@ -395,19 +413,19 @@ export class omdStepVisualizerLayout {
             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;
@@ -416,15 +434,15 @@ export class omdStepVisualizerLayout {
                 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);
@@ -432,26 +450,26 @@ export class omdStepVisualizerLayout {
                 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');
+        
+        
     }
 
     /**
@@ -467,7 +485,7 @@ export class omdStepVisualizerLayout {
         const toEquation = sv.stepDots[toDotIndex]?.equationRef;
         
         if (!fromEquation || !toEquation) {
-            console.debug('Missing equation references for dots', fromDotIndex, toDotIndex);
+            
             return 0;
         }
         
@@ -475,7 +493,7 @@ export class omdStepVisualizerLayout {
         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++) {
@@ -483,13 +501,13 @@ export class omdStepVisualizerLayout {
             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;
     }
 
@@ -506,21 +524,22 @@ export class omdStepVisualizerLayout {
      * @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);
+        const baseRadius = sv.styling?.dotRadius || getDotRadius(0);
+        const expansionRadius = Math.max(3, baseRadius * (sv.styling?.expansionDotScale || 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
+        // Use same color as regular dots from styling
         const dotColor = sv.styling?.dotColor || omdColor.stepColor;
-        console.debug(`Setting expansion dot color: ${dotColor}`);
+        
         expansionDot.setFillColor(dotColor);
         expansionDot.setStrokeColor(dotColor);
-        expansionDot.setStrokeWidth(1);
+        expansionDot.setStrokeWidth(sv.styling?.dotStrokeWidth || 1);
         
         // Store metadata
         expansionDot.isExpansionDot = true;
@@ -529,19 +548,12 @@ export class omdStepVisualizerLayout {
         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) {
@@ -549,8 +561,8 @@ export class omdStepVisualizerLayout {
             }
         };
         
-        console.debug('Expansion dot created successfully');
-        console.debug('=== _createSingleExpansionDot END ===\n');
+        
+        
         
         return expansionDot;
     }
@@ -560,23 +572,23 @@ export class omdStepVisualizerLayout {
      * @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];
@@ -585,9 +597,9 @@ export class omdStepVisualizerLayout {
                     // 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`);
+                    
                 }
             }
             
@@ -595,15 +607,15 @@ export class omdStepVisualizerLayout {
                 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');
+        
     }
 
     /**
@@ -611,11 +623,11 @@ export class omdStepVisualizerLayout {
      * @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 = [];
@@ -624,21 +636,21 @@ export class omdStepVisualizerLayout {
         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 = [];
             }
         });
@@ -646,15 +658,15 @@ export class omdStepVisualizerLayout {
         // 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];
@@ -662,7 +674,7 @@ export class omdStepVisualizerLayout {
                 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;
@@ -671,7 +683,7 @@ export class omdStepVisualizerLayout {
                     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;
                         }
                     }
@@ -683,7 +695,7 @@ export class omdStepVisualizerLayout {
                     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;
@@ -691,17 +703,17 @@ export class omdStepVisualizerLayout {
                         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');
+        
     }
 
     /**
@@ -713,45 +725,45 @@ export class omdStepVisualizerLayout {
         
         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
@@ -759,7 +771,7 @@ export class omdStepVisualizerLayout {
                 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
@@ -768,13 +780,13 @@ export class omdStepVisualizerLayout {
                             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
@@ -843,7 +855,7 @@ export class omdStepVisualizerLayout {
      */
     _removeLinesToHiddenDots() {
         const sv = this.stepVisualizer;
-        console.debug('Checking lines for hidden dot connections...');
+        
         
         // Get lines that connect to hidden dots
         const linesToRemove = [];
@@ -852,25 +864,25 @@ export class omdStepVisualizerLayout {
             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');
+        
     }
 }