added recursive hoverover feature for stepper by wkc75 · Pull Request #3586 · source-academy/frontend

wkc75 · 2026-02-18T05:43:34Z

Created by :
Raaghul Raaghulk04@gmail.com
Kin Chong wongkinchong75@gmail.com

Recursive Popover and CSS Improvements

Summary

This PR introduces recursive popover support and refines multiple CSS styles to improve clarity, consistency, and overall UI readability. Changes include recursive popover rendering, improved marker styling, cleaner hover behaviour, full function-body highlighting, and refined popover box design.

What’s Changed

Added recursive popover rendering for recursive functions
Fixed inconsistent conditional symbol styling
Replaced orange hover backgrounds with bold text for hoverable elements
Updated “Before” markers from orange to red
Expanded highlighting to cover entire function declaration bodies
Refined popover box CSS (spacing, borders, readability)

Before vs After — Visual Changes

Recursive Popover

Before

After

Improvement

Nested content now renders recursively inside popovers
More intuitive expansion of recursive function definitions

Conditional Marker Styling Fix

Before

After

Improvement

Consistent styling for conditional (?) markers
Reduced visual inconsistency

Hoverable Elements — Styling Update

Before — Orange Background

After — Bold Text

Improvement

Hover now uses bold text instead of an orange background
Reduces visual noise while maintaining emphasis

“Before” Marker Color Change

Before — Orange Marker

After — Red Marker

Improvement

Red marker provides clearer semantic emphasis
Avoids confusion with other orange highlights

Function Declaration Highlighting

Before — Partial Highlight

After — Full Body Highlight

Improvement

Entire function declaration body is highlighted
Better reflects execution scope compared to partial highlighting

Popover Box CSS Improvements

Before

After

Improvement

Improved padding and spacing
Cleaner borders and contrast
Enhanced readability
More consistent color coding

Type of Change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update
Code quality improvements

Checklist

I have tested this code
I have updated the documentation

Co-authored-by: Raaghul <Raaghulk04@gmail.com>

src/commons/sideContent/content/SideContentSubstVisualizer.tsx

  parentNode?: StepperBaseNode;
  isRight?: boolean; // specified for binary expression
  styleWrapper: StyleWrapper;
+  popoverDepth?: number;
 }

 /**


RichDom2185 · 2026-02-18T15:29:45Z

package.json

    "@sentry/react": "^10.5.0",
    "@sourceacademy/c-slang": "^1.0.21",
    "@sourceacademy/conductor": "https://github.com/source-academy/conductor.git#0.2.1",
+    "@sourceacademy/js-slang": "portal:../js-slang",


Revert this change. The package is js-slang, not @sourceacademy/js-slang.

RichDom2185 · 2026-02-18T15:29:54Z

yarn.lock

Revert the changes to this file.

RichDom2185 · 2026-02-18T15:30:14Z

src/styles/_workspace.scss

+// CSS for stepper popover box
+.stepper-popover {
+  .stepper-display {
+    font: 16px / normal 'Inconsolata', 'Consolas', monospace;
+  }
+
+  .stepper-literal {
+    color: #ff6078;
+  }
+
+  .stepper-operator {
+    color: #f89210;
+  }
+
+  .stepper-identifier {
+    color: #f8d871;
+  }
+
+  .stepper-conditional-operator {
+    color: #ffffff;
+  }
+
+  .#{$ns}-code-block {
+    .stepper-literal {
+      color: #ff6078;
+    }
+
+    .stepper-operator {
+      color: #f89210;
+    }
+
+    .stepper-identifier {
+      color: #f8d871;
+    }
+
+    .stepper-conditional-operator {
+      color: #ffffff;
+    }
+
+    .stepper-mu-term {
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }


Please use CSS modules instead of global styles

RichDom2185 · 2026-02-18T15:30:26Z

src/commons/sideContent/content/SideContentSubstVisualizer.tsx

        ) {
          function addHovering(preprocessed: React.ReactNode): React.ReactNode {
-            const functionDefinition = astToString(node);
+            // const functionDefinition = astToString(node);


Why is this commented out?

RichDom2185 · 2026-02-18T15:30:47Z

src/commons/sideContent/content/SideContentSubstVisualizer.tsx

+
+      /** 
+       * Recursive Hoverover feature
+       * muTermStyleWrapper wraps identifiers in the code body with popover
+       */
+      const FunctionDefinitionPopoverContent = () => (
+        <div className={classNames('stepper-popover', Classes.DARK)}>
+          <div className="stepper-display">
+            <Icon icon="code" />
+            <span>{' Function definition'}</span>
+            <pre className={Classes.CODE_BLOCK}>
+              <code>
+                {renderFunctionArguments(node.params)}
+                <span className="stepper-identifier">{' => '}</span>
+                {renderNode(node.body, {
+                  styleWrapper: composeStyleWrapper(styleWrapper, muTermStyleWrapper)!,
+                  popoverDepth: popoverDepth + 1
+                })}
+              </code>
+            </pre>
+          </div>
+        </div>
+      );


Don't nest components as this results in highly inefficient code.

RichDom2185 · 2026-02-18T15:31:02Z

src/commons/sideContent/content/SideContentSubstVisualizer.tsx

-import { astToString } from 'js-slang/dist/utils/ast/astToString';
+// import { astToString } from 'js-slang/dist/utils/ast/astToString';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';

 import { beginAlertSideContent } from '../SideContentActions';
 import { SideContentLocation, SideContentType } from '../SideContentTypes';
+// import { cons } from 'js-slang/dist/alt-langs/scheme/scm-slang/src/stdlib/base';


Please remove commented code if unused.

src/commons/sideContent/content/SideContentSubstVisualizer.tsx

          function addHovering(preprocessed: React.ReactNode): React.ReactNode {
-            const functionDefinition = astToString(node);
            return (
              <span className="stepper-mu-term">
                <Popover
                  interactionKind="hover"


coveralls · 2026-02-21T07:25:18Z

Pull Request Test Coverage Report for Build 22253403945

Details

1 of 12 (8.33%) changed or added relevant lines in 1 file are covered.
4 unchanged lines in 2 files lost coverage.
Overall coverage decreased (-0.06%) to 40.654%

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/commons/sideContent/content/SideContentSubstVisualizer.tsx	1	12	8.33%

Files with Coverage Reduction	New Missed Lines	%
src/commons/sideContent/content/SideContentSubstVisualizer.tsx	1	14.46%
src/commons/sideContent/content/SideContentCseMachine.tsx	3	37.8%

Totals
Change from base Build 22213982646:	-0.06%
Covered Lines:	5261
Relevant Lines:	11985

💛 - Coveralls

src/commons/sideContent/content/SideContentSubstVisualizer.tsx

      return (
        <span>
          <span className="stepper-operator">{'return '}</span>
-          {node.argument && renderNode(node.argument, { styleWrapper: styleWrapper })}
+          {node.argument &&
+            renderNode(node.argument, { styleWrapper: styleWrapper, popoverDepth: popoverDepth })}
          {';'}
        </span>
      );


src/commons/sideContent/content/SideContentSubstVisualizer.tsx

added recursive hoverover feature for stepper

af25067

Co-authored-by: Raaghul <Raaghulk04@gmail.com>

sentry bot reviewed Feb 18, 2026

View reviewed changes

src/commons/sideContent/content/SideContentSubstVisualizer.tsx

Comment on lines 208 to 214

parentNode?: StepperBaseNode;

isRight?: boolean; // specified for binary expression

styleWrapper: StyleWrapper;

popoverDepth?: number;

}

/**

This comment was marked as outdated.

Sign in to view

RichDom2185 requested changes Feb 18, 2026

View reviewed changes

Resolved review comments for recursive hoverover

639ca6d

Raaghulk04 force-pushed the feature/recursive-hoverover branch from 017d8d6 to 639ca6d Compare February 21, 2026 07:16

sentry bot reviewed Feb 21, 2026

View reviewed changes

Raaghulk04 force-pushed the feature/recursive-hoverover branch from 319bc58 to 639ca6d Compare February 21, 2026 07:41

Fixed formatting

5362c9e

sentry bot reviewed Feb 21, 2026

View reviewed changes

Raaghulk04 force-pushed the feature/recursive-hoverover branch from 1a9242d to 5362c9e Compare February 21, 2026 08:11

Raaghulk04 and others added 2 commits February 21, 2026 16:13

Fixed popoverDepth issues

6103edd

Merge branch 'master' into feature/recursive-hoverover

8ea5f7f

Raaghulk04 requested a review from RichDom2185 February 25, 2026 11:52

Merge branch 'master' into feature/recursive-hoverover

95fab57

RichDom2185 approved these changes Feb 26, 2026

View reviewed changes

src/commons/sideContent/content/SideContentSubstVisualizer.tsx Outdated Show resolved Hide resolved

Update src/commons/sideContent/content/SideContentSubstVisualizer.tsx

55515c3

RichDom2185 enabled auto-merge (squash) February 26, 2026 12:28

RichDom2185 merged commit d6d5539 into master Feb 26, 2026
9 of 10 checks passed

RichDom2185 deleted the feature/recursive-hoverover branch February 26, 2026 12:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

added recursive hoverover feature for stepper#3586

added recursive hoverover feature for stepper#3586
RichDom2185 merged 7 commits intomasterfrom
feature/recursive-hoverover

wkc75 commented Feb 18, 2026 •

edited by Raaghulk04

Loading

Uh oh!

This comment was marked as outdated.

Uh oh!

RichDom2185 Feb 18, 2026

Uh oh!

RichDom2185 Feb 18, 2026

Uh oh!

RichDom2185 Feb 18, 2026

Uh oh!

RichDom2185 Feb 18, 2026

Uh oh!

RichDom2185 Feb 18, 2026

Uh oh!

RichDom2185 Feb 18, 2026

Uh oh!

This comment was marked as outdated.

Uh oh!

coveralls commented Feb 21, 2026 •

edited

Loading

Uh oh!

This comment was marked as outdated.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

wkc75 commented Feb 18, 2026 • edited by Raaghulk04 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Recursive Popover and CSS Improvements

Summary

What’s Changed

Before vs After — Visual Changes

Recursive Popover

Conditional Marker Styling Fix

Hoverable Elements — Styling Update

“Before” Marker Color Change

Function Declaration Highlighting

Popover Box CSS Improvements

Type of Change

Checklist

Uh oh!

This comment was marked as outdated.

Uh oh!

RichDom2185 Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

RichDom2185 Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

RichDom2185 Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

RichDom2185 Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

RichDom2185 Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

RichDom2185 Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

This comment was marked as outdated.

Uh oh!

coveralls commented Feb 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Test Coverage Report for Build 22253403945

Details

💛 - Coveralls

Uh oh!

This comment was marked as outdated.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

wkc75 commented Feb 18, 2026 •

edited by Raaghulk04

Loading

coveralls commented Feb 21, 2026 •

edited

Loading