← History Part 1 ← Back to Engine

History Part 2: UI Overhaul, Complex Analysis & More

Changes since the initial architecture was documented. Covers the residue theorem module, complex plane visualizations, UI redesign, and integration improvements.

1. Residue Theorem Module EXPERIMENTAL

What it does

Evaluates improper integrals of rational functions P(x)/Q(x) over (-inf, inf) using complex contour integration. This is the first step into complex analysis territory.

How it works

Pole detection — Finds roots of Q(z) in the complex plane. Uses the quadratic formula for degree-2, rational root theorem + factoring for higher degrees, and Durand-Kerner numerical iteration for degree 4+.
Multiplicity detection — Groups nearby Durand-Kerner roots within 1e-6 tolerance to identify double/triple poles.
Contour selection — Picks upper half-plane poles (Im(z) > 0), falls back to lower half-plane if needed.
Residue computation — Simple poles: P(z0)/Q'(z0). Higher-order: numerical contour integral around tiny circle (r=1e-5, n=256 points).
Result — Real integral = Re(2*pi*i * sum of residues). Validates imaginary part is near zero.

residue_theorem.rb definite_integral.rb

2. Complex Plane Visualizations

Four canvas-based plots

When a residue theorem integration runs, four plots are rendered in both the results panel and the expression tree panel:

|f(z)| Amplitude — Domain coloring heatmap. Deep navy at zeros, white-hot at poles. Log-scaled with aggressive ramp for high contrast.
arg(f(z)) Phase + Contour — HSL color wheel for phase, golden semicircular contour path, green dashed circles around enclosed poles, direction arrows.
Re(f(z)) — Dark background, cyan (negative) / orange (positive) diverging colormap with quadratic+linear brightness ramp.
Im(f(z)) — Dark background, magenta (negative) / green (positive) diverging colormap.

Results panel: 4 in a row at 270px each. Tree panel: 2x2 grid at 150px each, matching tree height.

complex_plot.js

3. UI Redesign

Operation Popups — Variable Auto-Detection

All operation forms (derivative, integrate, evaluate, gradient, differential, definite integral, residue) now auto-detect variables from the formula and present them as color-coded clickable chips instead of text inputs.

Evaluate Form — Per-Variable Inputs

Each detected variable gets its own styled input field with matching color. No more "x 2.0 y 3.0" text format.

Range Visualization — Draggable

Definite integral and residue forms show a live number-line bar. Drag the handles to change bounds; values update in real-time. Supports infinity endpoints.

Layout — Examples at Bottom

Input bar, formula display, trees, and results stay together. All example groups moved to the bottom of the page.

Theme Selector

Four themes: Default (dark glass), Academic (cool slate-indigo), Artistic (warm amber-rose), Wild (neon green-magenta). Persists via localStorage.

Compact Solution Steps

Each step category gets a unique math symbol (xn for power, u-arrow for substitution, theta for trig, etc). Reduced padding and margins. Simplification steps are extra-compact.

UI Fixes

Before: Pi/ops button shook on hover due to CSS rotate(90deg) + hover-triggered menu. Modal closed when clicking outside. LaTeX broke on nested functions like exp(cos(x)).

After: Smooth hover+click behavior. Modal only closes via X/Cancel. LaTeX uses balanced-paren parser for correct nested rendering.

4. Integration Improvements

Mixed Partial Fractions (Linear + Irreducible Quadratic)

New: integrate_mixed_pf handles denominators that factor into linear terms times an irreducible quadratic. Uses numerical point-evaluation to set up a linear system, Gaussian elimination to solve for coefficients, then integrates each part separately (ln terms for linear factors, ln+arctan for the quadratic).

Example: (x^2+1)/(x^3+3x) = (x^2+1)/(x(x^2+3))

Decomposes as 1/(3x) + (2x)/(3(x^2+3)), integrates to (1/3)ln|x| + (1/3)ln(x^2+3).

Previously returned "integral" (unsolvable). Now fully handles the general case.

rational_integration.rb

Simplification in All Pipelines

Gradient and differential form endpoints now simplify each component after computation. Previously, raw derivative output like 2*x^(2-1) + y^2*((0*ln(y) + 2*0/y)) was returned as-is. Now it simplifies to 2*x and 2*y.

3-Mode Simplification

New dropdown in the header with three modes:

Simplify final result (default) — Run the experimental simplifier after the main computation.
Never simplify — Return raw output. Useful for debugging the engine or seeing exact intermediate forms.
Simplify along the way — Aggressive per-step simplification during recursive integration. Can produce cleaner intermediate steps but may occasionally interfere with pattern matching.

Simplification steps are now shown in the solution steps panel with a ≈ symbol.

5. Solution Steps Redesign

Unique Symbols per Category

Symbol	Category	Color
`∫∂`	Integration by Parts	Blue
`xn`	Power Rule	Amber
`+-`	Sum/Difference	Green
`∘`	Product/Chain Rule	Blue
`c`	Constant	Purple
`ex`	Exponential	Emerald
`∿`	Trigonometric	Cyan
`u-arrow`	U-Substitution	Amber
`P/Q`	Partial Fractions	Pink
`theta`	Trig Identity	Teal
`sqrt`	Radical/Trig Sub	Fuchsia
`div`	Polynomial Division	Sky
`≈`	Simplification	Slate
`✓`	Final Result	Purple

P and Q in partial fraction steps are now color-coded: P in red, Q in green, with quotient in blue and remainder in amber.

6. Technical Notes

Balanced-Paren LaTeX Parser

The client-side convertToLatex function was rewritten to handle nested parentheses correctly. The old regex /exp\(([^)]+)\)/ broke on exp(cos(x)) because [^)]+ stops at the first close paren. The new version uses a proper balanced-paren scanner, fixing all nested function rendering.

Cache-Busting

All script tags use ?v=N version parameters, incremented on each deployment, to prevent browser caching issues. This solved the initial bug where complex_plot.js wasn't loading despite being deployed.

Canvas innerHTML Bug

Early version used div.innerHTML += '...' after drawing to a canvas, which serializes the canvas to HTML (losing all pixel data) then re-parses it. Fixed by using createElement + appendChild for labels.

Continued in: History Part 3: The Correctness Audit, Independent Verification & the Modern UI →

Symbolic Math Engine — Built with Ruby — Back to Engine — History Part 1 — History Part 3