# OMD Documentation

# omdStepVisualizerHighlighting

Manages the highlighting of nodes within mathematical expressions displayed by the `omdStepVisualizer`. It uses a robust tree differencing algorithm to identify changes between consecutive steps and highlights affected nodes, providing visual feedback on transformations.

## Class Definition

    export class omdStepVisualizerHighlighting

## Constructor

### `new omdStepVisualizerHighlighting(stepVisualizer)`

Creates a new `omdStepVisualizerHighlighting` instance.

- `stepVisualizer` (`omdStepVisualizer`): The step visualizer instance this highlighting manager is associated with.

During construction, it initializes a `Set` to track `highlightedNodes` and sets `educationalMode` to `true` by default.

## Public Properties

- `stepVisualizer` (`omdStepVisualizer`): The associated step visualizer instance.
- `highlightedNodes` (`Set<omdNode>`): A set of `omdNode` instances that are currently highlighted by this manager.
- `educationalMode` (`boolean`): If `true`, enables highlighting of pedagogical simplifications (e.g., intermediate steps that might be skipped in a final solution). Default: `true`.

## Public Methods

### `highlightAffectedNodes(dotIndex, isOperation = false)`

This is the main method to trigger highlighting. It compares the equation at `dotIndex` with the previous visible equation in the sequence to identify changes and then applies appropriate highlighting.

- `dotIndex` (`number`): The index of the dot (step) for which to highlight affected nodes.
- `isOperation` (`boolean`, optional): If `true`, indicates that the step is an operation (e.g., adding to both sides), which affects how provenance is highlighted. Default: `false`.

How it Works:

1. Clear Existing Highlights: First, any previously active highlights are cleared.
2. Identify Equations: It determines the `currentEquation` (associated with `dotIndex`) and finds the `previousEquation` (the nearest visible equation before the current one).
3. Tree Differencing: It uses `omdTreeDiff.findChangedNodes` to perform a robust comparison between the `previousEquation` and `currentEquation`. This algorithm identifies nodes that have been added, removed, or modified.
4. Direct Highlighting: Nodes identified as directly changed by the diff algorithm are highlighted with a primary explanation color (`omdColor.explainColor`).
5. Provenance Highlighting: For non-operation steps, the system traces the `provenance` (history) of the directly changed nodes back to their origins in the `previousEquation`. These originating nodes are then highlighted with a secondary provenance color (`omdColor.provenanceColor`), visually connecting the transformation.

### `clearHighlights()`

Removes all active highlights managed by this class from the expression tree. It iterates through all `highlightedNodes` and calls `setExplainHighlight(false)` on them, then clears its internal `highlightedNodes` set.

## Internal Methods

- `_highlightNode(node)`: Applies the standard explanation highlight color (`omdColor.explainColor`) to a single `omdNode` by calling its `setExplainHighlight(true)` method and adds the node to `highlightedNodes`.
- `_findNearestVisibleEquationAbove(currentIndex)`: Searches backward from `currentIndex` in the `stepVisualizer.steps` array to find the closest `omdEquationNode` that is currently visible.
- `_highlightProvenanceNodes(changedNodes, previousEquation)`: Iterates through `changedNodes` and their `provenance` chains to identify and highlight corresponding nodes in the `previousEquation` with `omdColor.provenanceColor`. It uses `rootNode.nodeMap` for efficient node lookup and a `visited` set to prevent redundant processing.
- `_belongsToEquation(node, targetEquation)`: Checks if a given `omdNode` is part of the subtree of a `targetEquation` by traversing up its parent chain.
- `_highlightProvenanceNode(node)`: Applies the secondary provenance highlighting style (`omdColor.provenanceColor`) to a single `omdNode` by calling its `setExplainHighlight(true, omdColor.provenanceColor)` method.

## Example

This class is typically used internally by `omdStepVisualizer` when a step dot is clicked:

    // Inside omdStepVisualizer's _handleDotClick method:
    this.highlighting.highlightAffectedNodes(dotIndex, isOperation);

    // Inside omdStepVisualizer's _clearActiveDot method:
    this.highlighting.clearHighlights();

↑ Top