feat(viz): monotonic stack viz
This commit is contained in:
@@ -0,0 +1,881 @@
|
||||
import type { AlgorithmDefinition } from '@/lib/visualizations/types';
|
||||
|
||||
export const monotonicStackAlgorithm: AlgorithmDefinition = {
|
||||
id: 'monotonic-stack-nge',
|
||||
title: 'Next Greater Element',
|
||||
slug: 'monotonic-stack',
|
||||
pattern: {
|
||||
name: 'Monotonic Stack',
|
||||
description:
|
||||
'Use a stack to maintain elements in monotonic order, efficiently finding next greater/smaller elements.',
|
||||
},
|
||||
problemStatement:
|
||||
'For each element in an array, find the next element to its right that is greater. If none exists, return -1.',
|
||||
intuition:
|
||||
'The stack maintains indices of elements waiting for their "next greater". When we encounter a larger element, we resolve all smaller waiting elements by popping them.',
|
||||
code: {
|
||||
language: 'python',
|
||||
code: `def next_greater_element(nums: list[int]) -> list[int]:
|
||||
n = len(nums)
|
||||
result = [-1] * n
|
||||
stack = [] # stores indices
|
||||
|
||||
for i in range(n):
|
||||
# Pop all smaller elements - current is their answer
|
||||
while stack and nums[i] > nums[stack[-1]]:
|
||||
idx = stack.pop()
|
||||
result[idx] = nums[i]
|
||||
stack.append(i)
|
||||
|
||||
return result`,
|
||||
},
|
||||
initialExample: {
|
||||
input: { nums: [4, 5, 2, 10, 8] },
|
||||
expected: [5, 10, 10, -1, -1],
|
||||
},
|
||||
steps: [
|
||||
// Phase 1: Problem (2 steps)
|
||||
{
|
||||
id: 'problem-1',
|
||||
phase: 'problem',
|
||||
explanation:
|
||||
'Given array [4, 5, 2, 10, 8], for each element find the next greater element to its right. If none exists, use -1.',
|
||||
dataState: {
|
||||
arrays: [
|
||||
{
|
||||
id: 'input',
|
||||
label: 'Input Array',
|
||||
elements: [
|
||||
{ value: 4, index: 0, state: 'normal' },
|
||||
{ value: 5, index: 1, state: 'normal' },
|
||||
{ value: 2, index: 2, state: 'normal' },
|
||||
{ value: 10, index: 3, state: 'normal' },
|
||||
{ value: 8, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'result',
|
||||
label: 'Result',
|
||||
elements: [
|
||||
{ value: -1, index: 0, state: 'dimmed' },
|
||||
{ value: -1, index: 1, state: 'dimmed' },
|
||||
{ value: -1, index: 2, state: 'dimmed' },
|
||||
{ value: -1, index: 3, state: 'dimmed' },
|
||||
{ value: -1, index: 4, state: 'dimmed' },
|
||||
],
|
||||
},
|
||||
],
|
||||
stacks: [{ id: 'stack', label: 'Stack', elements: [] }],
|
||||
pointers: [],
|
||||
variables: [],
|
||||
calculations: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'problem-2',
|
||||
phase: 'problem',
|
||||
explanation:
|
||||
'A brute force approach checks every pair: for each element, scan right to find a larger one. This is O(n^2). Can we do better?',
|
||||
dataState: {
|
||||
arrays: [
|
||||
{
|
||||
id: 'input',
|
||||
label: 'Input Array',
|
||||
elements: [
|
||||
{ value: 4, index: 0, state: 'highlighted' },
|
||||
{ value: 5, index: 1, state: 'comparing' },
|
||||
{ value: 2, index: 2, state: 'dimmed' },
|
||||
{ value: 10, index: 3, state: 'dimmed' },
|
||||
{ value: 8, index: 4, state: 'dimmed' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'result',
|
||||
label: 'Result',
|
||||
elements: [
|
||||
{ value: -1, index: 0, state: 'dimmed' },
|
||||
{ value: -1, index: 1, state: 'dimmed' },
|
||||
{ value: -1, index: 2, state: 'dimmed' },
|
||||
{ value: -1, index: 3, state: 'dimmed' },
|
||||
{ value: -1, index: 4, state: 'dimmed' },
|
||||
],
|
||||
},
|
||||
],
|
||||
stacks: [{ id: 'stack', label: 'Stack', elements: [] }],
|
||||
pointers: [],
|
||||
variables: [],
|
||||
calculations: [],
|
||||
},
|
||||
},
|
||||
|
||||
// Phase 2: Intuition (3 steps)
|
||||
{
|
||||
id: 'intuition-1',
|
||||
phase: 'intuition',
|
||||
explanation:
|
||||
'Key insight: When we see a large element, it becomes the "next greater" for ALL smaller elements we have seen that are still waiting.',
|
||||
dataState: {
|
||||
arrays: [
|
||||
{
|
||||
id: 'input',
|
||||
label: 'Input Array',
|
||||
elements: [
|
||||
{ value: 4, index: 0, state: 'highlighted' },
|
||||
{ value: 5, index: 1, state: 'highlighted' },
|
||||
{ value: 2, index: 2, state: 'highlighted' },
|
||||
{ value: 10, index: 3, state: 'success' },
|
||||
{ value: 8, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'result',
|
||||
label: 'Result',
|
||||
elements: [
|
||||
{ value: -1, index: 0, state: 'dimmed' },
|
||||
{ value: -1, index: 1, state: 'dimmed' },
|
||||
{ value: -1, index: 2, state: 'dimmed' },
|
||||
{ value: -1, index: 3, state: 'dimmed' },
|
||||
{ value: -1, index: 4, state: 'dimmed' },
|
||||
],
|
||||
},
|
||||
],
|
||||
stacks: [{ id: 'stack', label: 'Stack', elements: [] }],
|
||||
pointers: [],
|
||||
variables: [],
|
||||
calculations: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'intuition-2',
|
||||
phase: 'intuition',
|
||||
explanation:
|
||||
'We use a stack to track elements waiting for their answer. When we find a larger element, we pop and resolve all smaller waiting elements.',
|
||||
dataState: {
|
||||
arrays: [
|
||||
{
|
||||
id: 'input',
|
||||
label: 'Input Array',
|
||||
elements: [
|
||||
{ value: 4, index: 0, state: 'normal' },
|
||||
{ value: 5, index: 1, state: 'normal' },
|
||||
{ value: 2, index: 2, state: 'normal' },
|
||||
{ value: 10, index: 3, state: 'normal' },
|
||||
{ value: 8, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'result',
|
||||
label: 'Result',
|
||||
elements: [
|
||||
{ value: -1, index: 0, state: 'dimmed' },
|
||||
{ value: -1, index: 1, state: 'dimmed' },
|
||||
{ value: -1, index: 2, state: 'dimmed' },
|
||||
{ value: -1, index: 3, state: 'dimmed' },
|
||||
{ value: -1, index: 4, state: 'dimmed' },
|
||||
],
|
||||
},
|
||||
],
|
||||
stacks: [
|
||||
{
|
||||
id: 'stack',
|
||||
label: 'Stack',
|
||||
elements: [
|
||||
{ id: 's0', value: 0, state: 'normal' },
|
||||
{ id: 's1', value: 1, state: 'normal' },
|
||||
{ id: 's2', value: 2, state: 'highlighted' },
|
||||
],
|
||||
},
|
||||
],
|
||||
pointers: [],
|
||||
variables: [],
|
||||
calculations: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'intuition-3',
|
||||
phase: 'intuition',
|
||||
explanation:
|
||||
'The stack maintains a monotonically DECREASING sequence - elements get smaller as we go up. This ensures we pop in the right order.',
|
||||
dataState: {
|
||||
arrays: [
|
||||
{
|
||||
id: 'input',
|
||||
label: 'Input Array',
|
||||
elements: [
|
||||
{ value: 4, index: 0, state: 'highlighted' },
|
||||
{ value: 5, index: 1, state: 'highlighted' },
|
||||
{ value: 2, index: 2, state: 'highlighted' },
|
||||
{ value: 10, index: 3, state: 'normal' },
|
||||
{ value: 8, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'result',
|
||||
label: 'Result',
|
||||
elements: [
|
||||
{ value: -1, index: 0, state: 'dimmed' },
|
||||
{ value: -1, index: 1, state: 'dimmed' },
|
||||
{ value: -1, index: 2, state: 'dimmed' },
|
||||
{ value: -1, index: 3, state: 'dimmed' },
|
||||
{ value: -1, index: 4, state: 'dimmed' },
|
||||
],
|
||||
},
|
||||
],
|
||||
stacks: [
|
||||
{
|
||||
id: 'stack',
|
||||
label: 'Stack',
|
||||
elements: [
|
||||
{ id: 's0', value: 0, state: 'normal' },
|
||||
{ id: 's1', value: 1, state: 'normal' },
|
||||
{ id: 's2', value: 2, state: 'normal' },
|
||||
],
|
||||
},
|
||||
],
|
||||
pointers: [],
|
||||
variables: [],
|
||||
calculations: [],
|
||||
},
|
||||
},
|
||||
|
||||
// Phase 3: Code walkthrough (4 steps)
|
||||
{
|
||||
id: 'code-1',
|
||||
phase: 'code',
|
||||
explanation:
|
||||
'Initialize result array with -1 (default when no greater element exists) and an empty stack to track indices.',
|
||||
codeLine: 3,
|
||||
codeHighlightLines: [2, 3, 4],
|
||||
dataState: {
|
||||
arrays: [
|
||||
{
|
||||
id: 'input',
|
||||
label: 'Input Array',
|
||||
elements: [
|
||||
{ value: 4, index: 0, state: 'normal' },
|
||||
{ value: 5, index: 1, state: 'normal' },
|
||||
{ value: 2, index: 2, state: 'normal' },
|
||||
{ value: 10, index: 3, state: 'normal' },
|
||||
{ value: 8, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'result',
|
||||
label: 'Result',
|
||||
elements: [
|
||||
{ value: -1, index: 0, state: 'normal' },
|
||||
{ value: -1, index: 1, state: 'normal' },
|
||||
{ value: -1, index: 2, state: 'normal' },
|
||||
{ value: -1, index: 3, state: 'normal' },
|
||||
{ value: -1, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
],
|
||||
stacks: [{ id: 'stack', label: 'Stack', elements: [] }],
|
||||
pointers: [],
|
||||
variables: [{ id: 'n', name: 'n', value: 5 }],
|
||||
calculations: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'code-2',
|
||||
phase: 'code',
|
||||
explanation:
|
||||
'Iterate through each element. For each position i, we check if current element is greater than elements at stack indices.',
|
||||
codeLine: 6,
|
||||
dataState: {
|
||||
arrays: [
|
||||
{
|
||||
id: 'input',
|
||||
label: 'Input Array',
|
||||
elements: [
|
||||
{ value: 4, index: 0, state: 'normal' },
|
||||
{ value: 5, index: 1, state: 'normal' },
|
||||
{ value: 2, index: 2, state: 'normal' },
|
||||
{ value: 10, index: 3, state: 'normal' },
|
||||
{ value: 8, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'result',
|
||||
label: 'Result',
|
||||
elements: [
|
||||
{ value: -1, index: 0, state: 'normal' },
|
||||
{ value: -1, index: 1, state: 'normal' },
|
||||
{ value: -1, index: 2, state: 'normal' },
|
||||
{ value: -1, index: 3, state: 'normal' },
|
||||
{ value: -1, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
],
|
||||
stacks: [{ id: 'stack', label: 'Stack', elements: [] }],
|
||||
pointers: [],
|
||||
variables: [{ id: 'n', name: 'n', value: 5 }],
|
||||
calculations: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'code-3',
|
||||
phase: 'code',
|
||||
explanation:
|
||||
'While stack is not empty AND current element > element at stack top: pop the index and set its result to current element.',
|
||||
codeLine: 8,
|
||||
codeHighlightLines: [8, 9, 10],
|
||||
dataState: {
|
||||
arrays: [
|
||||
{
|
||||
id: 'input',
|
||||
label: 'Input Array',
|
||||
elements: [
|
||||
{ value: 4, index: 0, state: 'normal' },
|
||||
{ value: 5, index: 1, state: 'normal' },
|
||||
{ value: 2, index: 2, state: 'normal' },
|
||||
{ value: 10, index: 3, state: 'normal' },
|
||||
{ value: 8, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'result',
|
||||
label: 'Result',
|
||||
elements: [
|
||||
{ value: -1, index: 0, state: 'normal' },
|
||||
{ value: -1, index: 1, state: 'normal' },
|
||||
{ value: -1, index: 2, state: 'normal' },
|
||||
{ value: -1, index: 3, state: 'normal' },
|
||||
{ value: -1, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
],
|
||||
stacks: [{ id: 'stack', label: 'Stack', elements: [] }],
|
||||
pointers: [],
|
||||
variables: [{ id: 'n', name: 'n', value: 5 }],
|
||||
calculations: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'code-4',
|
||||
phase: 'code',
|
||||
explanation:
|
||||
'After resolving smaller elements, push current index onto stack. It will wait for its own "next greater" element.',
|
||||
codeLine: 11,
|
||||
dataState: {
|
||||
arrays: [
|
||||
{
|
||||
id: 'input',
|
||||
label: 'Input Array',
|
||||
elements: [
|
||||
{ value: 4, index: 0, state: 'normal' },
|
||||
{ value: 5, index: 1, state: 'normal' },
|
||||
{ value: 2, index: 2, state: 'normal' },
|
||||
{ value: 10, index: 3, state: 'normal' },
|
||||
{ value: 8, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'result',
|
||||
label: 'Result',
|
||||
elements: [
|
||||
{ value: -1, index: 0, state: 'normal' },
|
||||
{ value: -1, index: 1, state: 'normal' },
|
||||
{ value: -1, index: 2, state: 'normal' },
|
||||
{ value: -1, index: 3, state: 'normal' },
|
||||
{ value: -1, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
],
|
||||
stacks: [{ id: 'stack', label: 'Stack', elements: [] }],
|
||||
pointers: [],
|
||||
variables: [{ id: 'n', name: 'n', value: 5 }],
|
||||
calculations: [],
|
||||
},
|
||||
},
|
||||
|
||||
// Phase 4: Execution (~10 steps)
|
||||
{
|
||||
id: 'exec-1',
|
||||
phase: 'execution',
|
||||
explanation: 'i=0: Stack is empty, so we just push index 0. Value 4 waits for its next greater element.',
|
||||
codeLine: 11,
|
||||
dataState: {
|
||||
arrays: [
|
||||
{
|
||||
id: 'input',
|
||||
label: 'Input Array',
|
||||
elements: [
|
||||
{ value: 4, index: 0, state: 'highlighted' },
|
||||
{ value: 5, index: 1, state: 'normal' },
|
||||
{ value: 2, index: 2, state: 'normal' },
|
||||
{ value: 10, index: 3, state: 'normal' },
|
||||
{ value: 8, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'result',
|
||||
label: 'Result',
|
||||
elements: [
|
||||
{ value: -1, index: 0, state: 'normal' },
|
||||
{ value: -1, index: 1, state: 'normal' },
|
||||
{ value: -1, index: 2, state: 'normal' },
|
||||
{ value: -1, index: 3, state: 'normal' },
|
||||
{ value: -1, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
],
|
||||
stacks: [
|
||||
{
|
||||
id: 'stack',
|
||||
label: 'Stack',
|
||||
elements: [{ id: 's0', value: 0, state: 'pushing' }],
|
||||
},
|
||||
],
|
||||
pointers: [{ id: 'i', name: 'i', index: 0, color: 'default', showValue: true }],
|
||||
variables: [
|
||||
{ id: 'i', name: 'i', value: 0 },
|
||||
{ id: 'current', name: 'nums[i]', value: 4 },
|
||||
],
|
||||
calculations: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'exec-2',
|
||||
phase: 'execution',
|
||||
explanation: 'i=1: Current value 5 > nums[stack top] = nums[0] = 4. Pop index 0 and set result[0] = 5.',
|
||||
codeLine: 9,
|
||||
decision: {
|
||||
question: 'Is 5 > nums[0]?',
|
||||
answer: '5 > 4 = true',
|
||||
action: 'Pop index 0, set result[0] = 5',
|
||||
},
|
||||
dataState: {
|
||||
arrays: [
|
||||
{
|
||||
id: 'input',
|
||||
label: 'Input Array',
|
||||
elements: [
|
||||
{ value: 4, index: 0, state: 'comparing' },
|
||||
{ value: 5, index: 1, state: 'highlighted' },
|
||||
{ value: 2, index: 2, state: 'normal' },
|
||||
{ value: 10, index: 3, state: 'normal' },
|
||||
{ value: 8, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'result',
|
||||
label: 'Result',
|
||||
elements: [
|
||||
{ value: 5, index: 0, state: 'success' },
|
||||
{ value: -1, index: 1, state: 'normal' },
|
||||
{ value: -1, index: 2, state: 'normal' },
|
||||
{ value: -1, index: 3, state: 'normal' },
|
||||
{ value: -1, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
],
|
||||
stacks: [
|
||||
{
|
||||
id: 'stack',
|
||||
label: 'Stack',
|
||||
elements: [{ id: 's0', value: 0, state: 'popped' }],
|
||||
},
|
||||
],
|
||||
pointers: [{ id: 'i', name: 'i', index: 1, color: 'default', showValue: true }],
|
||||
variables: [
|
||||
{ id: 'i', name: 'i', value: 1 },
|
||||
{ id: 'current', name: 'nums[i]', value: 5 },
|
||||
{ id: 'idx', name: 'popped idx', value: 0 },
|
||||
],
|
||||
calculations: [
|
||||
{ id: 'calc-1', expression: 'result[0]', result: '5', position: 'above' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'exec-3',
|
||||
phase: 'execution',
|
||||
explanation: 'Stack is now empty. Push index 1. Value 5 waits for its next greater element.',
|
||||
codeLine: 11,
|
||||
dataState: {
|
||||
arrays: [
|
||||
{
|
||||
id: 'input',
|
||||
label: 'Input Array',
|
||||
elements: [
|
||||
{ value: 4, index: 0, state: 'dimmed' },
|
||||
{ value: 5, index: 1, state: 'highlighted' },
|
||||
{ value: 2, index: 2, state: 'normal' },
|
||||
{ value: 10, index: 3, state: 'normal' },
|
||||
{ value: 8, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'result',
|
||||
label: 'Result',
|
||||
elements: [
|
||||
{ value: 5, index: 0, state: 'success' },
|
||||
{ value: -1, index: 1, state: 'normal' },
|
||||
{ value: -1, index: 2, state: 'normal' },
|
||||
{ value: -1, index: 3, state: 'normal' },
|
||||
{ value: -1, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
],
|
||||
stacks: [
|
||||
{
|
||||
id: 'stack',
|
||||
label: 'Stack',
|
||||
elements: [{ id: 's1', value: 1, state: 'pushing' }],
|
||||
},
|
||||
],
|
||||
pointers: [{ id: 'i', name: 'i', index: 1, color: 'default', showValue: true }],
|
||||
variables: [
|
||||
{ id: 'i', name: 'i', value: 1 },
|
||||
{ id: 'current', name: 'nums[i]', value: 5 },
|
||||
],
|
||||
calculations: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'exec-4',
|
||||
phase: 'execution',
|
||||
explanation: 'i=2: Current value 2 < nums[stack top] = nums[1] = 5. No pop needed, just push index 2.',
|
||||
codeLine: 11,
|
||||
decision: {
|
||||
question: 'Is 2 > nums[1]?',
|
||||
answer: '2 > 5 = false',
|
||||
action: 'Skip while loop, push index 2',
|
||||
},
|
||||
dataState: {
|
||||
arrays: [
|
||||
{
|
||||
id: 'input',
|
||||
label: 'Input Array',
|
||||
elements: [
|
||||
{ value: 4, index: 0, state: 'dimmed' },
|
||||
{ value: 5, index: 1, state: 'normal' },
|
||||
{ value: 2, index: 2, state: 'highlighted' },
|
||||
{ value: 10, index: 3, state: 'normal' },
|
||||
{ value: 8, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'result',
|
||||
label: 'Result',
|
||||
elements: [
|
||||
{ value: 5, index: 0, state: 'success' },
|
||||
{ value: -1, index: 1, state: 'normal' },
|
||||
{ value: -1, index: 2, state: 'normal' },
|
||||
{ value: -1, index: 3, state: 'normal' },
|
||||
{ value: -1, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
],
|
||||
stacks: [
|
||||
{
|
||||
id: 'stack',
|
||||
label: 'Stack',
|
||||
elements: [
|
||||
{ id: 's1', value: 1, state: 'normal' },
|
||||
{ id: 's2', value: 2, state: 'pushing' },
|
||||
],
|
||||
},
|
||||
],
|
||||
pointers: [{ id: 'i', name: 'i', index: 2, color: 'default', showValue: true }],
|
||||
variables: [
|
||||
{ id: 'i', name: 'i', value: 2 },
|
||||
{ id: 'current', name: 'nums[i]', value: 2 },
|
||||
],
|
||||
calculations: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'exec-5',
|
||||
phase: 'execution',
|
||||
explanation: 'i=3: Current value 10 > nums[stack top] = nums[2] = 2. Pop index 2, set result[2] = 10.',
|
||||
codeLine: 9,
|
||||
decision: {
|
||||
question: 'Is 10 > nums[2]?',
|
||||
answer: '10 > 2 = true',
|
||||
action: 'Pop index 2, set result[2] = 10',
|
||||
},
|
||||
dataState: {
|
||||
arrays: [
|
||||
{
|
||||
id: 'input',
|
||||
label: 'Input Array',
|
||||
elements: [
|
||||
{ value: 4, index: 0, state: 'dimmed' },
|
||||
{ value: 5, index: 1, state: 'normal' },
|
||||
{ value: 2, index: 2, state: 'comparing' },
|
||||
{ value: 10, index: 3, state: 'highlighted' },
|
||||
{ value: 8, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'result',
|
||||
label: 'Result',
|
||||
elements: [
|
||||
{ value: 5, index: 0, state: 'success' },
|
||||
{ value: -1, index: 1, state: 'normal' },
|
||||
{ value: 10, index: 2, state: 'success' },
|
||||
{ value: -1, index: 3, state: 'normal' },
|
||||
{ value: -1, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
],
|
||||
stacks: [
|
||||
{
|
||||
id: 'stack',
|
||||
label: 'Stack',
|
||||
elements: [
|
||||
{ id: 's1', value: 1, state: 'normal' },
|
||||
{ id: 's2', value: 2, state: 'popped' },
|
||||
],
|
||||
},
|
||||
],
|
||||
pointers: [{ id: 'i', name: 'i', index: 3, color: 'default', showValue: true }],
|
||||
variables: [
|
||||
{ id: 'i', name: 'i', value: 3 },
|
||||
{ id: 'current', name: 'nums[i]', value: 10 },
|
||||
{ id: 'idx', name: 'popped idx', value: 2 },
|
||||
],
|
||||
calculations: [
|
||||
{ id: 'calc-2', expression: 'result[2]', result: '10', position: 'above' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'exec-6',
|
||||
phase: 'execution',
|
||||
explanation: 'Stack top is now index 1. Current 10 > nums[1] = 5. Pop index 1, set result[1] = 10.',
|
||||
codeLine: 9,
|
||||
decision: {
|
||||
question: 'Is 10 > nums[1]?',
|
||||
answer: '10 > 5 = true',
|
||||
action: 'Pop index 1, set result[1] = 10',
|
||||
},
|
||||
dataState: {
|
||||
arrays: [
|
||||
{
|
||||
id: 'input',
|
||||
label: 'Input Array',
|
||||
elements: [
|
||||
{ value: 4, index: 0, state: 'dimmed' },
|
||||
{ value: 5, index: 1, state: 'comparing' },
|
||||
{ value: 2, index: 2, state: 'dimmed' },
|
||||
{ value: 10, index: 3, state: 'highlighted' },
|
||||
{ value: 8, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'result',
|
||||
label: 'Result',
|
||||
elements: [
|
||||
{ value: 5, index: 0, state: 'success' },
|
||||
{ value: 10, index: 1, state: 'success' },
|
||||
{ value: 10, index: 2, state: 'success' },
|
||||
{ value: -1, index: 3, state: 'normal' },
|
||||
{ value: -1, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
],
|
||||
stacks: [
|
||||
{
|
||||
id: 'stack',
|
||||
label: 'Stack',
|
||||
elements: [{ id: 's1', value: 1, state: 'popped' }],
|
||||
},
|
||||
],
|
||||
pointers: [{ id: 'i', name: 'i', index: 3, color: 'default', showValue: true }],
|
||||
variables: [
|
||||
{ id: 'i', name: 'i', value: 3 },
|
||||
{ id: 'current', name: 'nums[i]', value: 10 },
|
||||
{ id: 'idx', name: 'popped idx', value: 1 },
|
||||
],
|
||||
calculations: [
|
||||
{ id: 'calc-3', expression: 'result[1]', result: '10', position: 'above' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'exec-7',
|
||||
phase: 'execution',
|
||||
explanation: 'Stack is now empty. Push index 3. Value 10 waits for its next greater element.',
|
||||
codeLine: 11,
|
||||
dataState: {
|
||||
arrays: [
|
||||
{
|
||||
id: 'input',
|
||||
label: 'Input Array',
|
||||
elements: [
|
||||
{ value: 4, index: 0, state: 'dimmed' },
|
||||
{ value: 5, index: 1, state: 'dimmed' },
|
||||
{ value: 2, index: 2, state: 'dimmed' },
|
||||
{ value: 10, index: 3, state: 'highlighted' },
|
||||
{ value: 8, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'result',
|
||||
label: 'Result',
|
||||
elements: [
|
||||
{ value: 5, index: 0, state: 'success' },
|
||||
{ value: 10, index: 1, state: 'success' },
|
||||
{ value: 10, index: 2, state: 'success' },
|
||||
{ value: -1, index: 3, state: 'normal' },
|
||||
{ value: -1, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
],
|
||||
stacks: [
|
||||
{
|
||||
id: 'stack',
|
||||
label: 'Stack',
|
||||
elements: [{ id: 's3', value: 3, state: 'pushing' }],
|
||||
},
|
||||
],
|
||||
pointers: [{ id: 'i', name: 'i', index: 3, color: 'default', showValue: true }],
|
||||
variables: [
|
||||
{ id: 'i', name: 'i', value: 3 },
|
||||
{ id: 'current', name: 'nums[i]', value: 10 },
|
||||
],
|
||||
calculations: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'exec-8',
|
||||
phase: 'execution',
|
||||
explanation: 'i=4: Current value 8 < nums[stack top] = nums[3] = 10. No pop needed, just push index 4.',
|
||||
codeLine: 11,
|
||||
decision: {
|
||||
question: 'Is 8 > nums[3]?',
|
||||
answer: '8 > 10 = false',
|
||||
action: 'Skip while loop, push index 4',
|
||||
},
|
||||
dataState: {
|
||||
arrays: [
|
||||
{
|
||||
id: 'input',
|
||||
label: 'Input Array',
|
||||
elements: [
|
||||
{ value: 4, index: 0, state: 'dimmed' },
|
||||
{ value: 5, index: 1, state: 'dimmed' },
|
||||
{ value: 2, index: 2, state: 'dimmed' },
|
||||
{ value: 10, index: 3, state: 'normal' },
|
||||
{ value: 8, index: 4, state: 'highlighted' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'result',
|
||||
label: 'Result',
|
||||
elements: [
|
||||
{ value: 5, index: 0, state: 'success' },
|
||||
{ value: 10, index: 1, state: 'success' },
|
||||
{ value: 10, index: 2, state: 'success' },
|
||||
{ value: -1, index: 3, state: 'normal' },
|
||||
{ value: -1, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
],
|
||||
stacks: [
|
||||
{
|
||||
id: 'stack',
|
||||
label: 'Stack',
|
||||
elements: [
|
||||
{ id: 's3', value: 3, state: 'normal' },
|
||||
{ id: 's4', value: 4, state: 'pushing' },
|
||||
],
|
||||
},
|
||||
],
|
||||
pointers: [{ id: 'i', name: 'i', index: 4, color: 'default', showValue: true }],
|
||||
variables: [
|
||||
{ id: 'i', name: 'i', value: 4 },
|
||||
{ id: 'current', name: 'nums[i]', value: 8 },
|
||||
],
|
||||
calculations: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'exec-9',
|
||||
phase: 'execution',
|
||||
explanation: 'Loop complete. Elements remaining in stack (indices 3, 4) have no next greater element - their result stays -1.',
|
||||
codeLine: 13,
|
||||
dataState: {
|
||||
arrays: [
|
||||
{
|
||||
id: 'input',
|
||||
label: 'Input Array',
|
||||
elements: [
|
||||
{ value: 4, index: 0, state: 'dimmed' },
|
||||
{ value: 5, index: 1, state: 'dimmed' },
|
||||
{ value: 2, index: 2, state: 'dimmed' },
|
||||
{ value: 10, index: 3, state: 'highlighted' },
|
||||
{ value: 8, index: 4, state: 'highlighted' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'result',
|
||||
label: 'Result',
|
||||
elements: [
|
||||
{ value: 5, index: 0, state: 'success' },
|
||||
{ value: 10, index: 1, state: 'success' },
|
||||
{ value: 10, index: 2, state: 'success' },
|
||||
{ value: -1, index: 3, state: 'comparing' },
|
||||
{ value: -1, index: 4, state: 'comparing' },
|
||||
],
|
||||
},
|
||||
],
|
||||
stacks: [
|
||||
{
|
||||
id: 'stack',
|
||||
label: 'Stack',
|
||||
elements: [
|
||||
{ id: 's3', value: 3, state: 'normal' },
|
||||
{ id: 's4', value: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
],
|
||||
pointers: [],
|
||||
variables: [],
|
||||
calculations: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'exec-10',
|
||||
phase: 'execution',
|
||||
explanation: 'Final result: [5, 10, 10, -1, -1]. Each element found its next greater, or -1 if none exists. Time: O(n), Space: O(n).',
|
||||
codeLine: 13,
|
||||
dataState: {
|
||||
arrays: [
|
||||
{
|
||||
id: 'input',
|
||||
label: 'Input Array',
|
||||
elements: [
|
||||
{ value: 4, index: 0, state: 'normal' },
|
||||
{ value: 5, index: 1, state: 'normal' },
|
||||
{ value: 2, index: 2, state: 'normal' },
|
||||
{ value: 10, index: 3, state: 'normal' },
|
||||
{ value: 8, index: 4, state: 'normal' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'result',
|
||||
label: 'Result',
|
||||
elements: [
|
||||
{ value: 5, index: 0, state: 'success' },
|
||||
{ value: 10, index: 1, state: 'success' },
|
||||
{ value: 10, index: 2, state: 'success' },
|
||||
{ value: -1, index: 3, state: 'success' },
|
||||
{ value: -1, index: 4, state: 'success' },
|
||||
],
|
||||
},
|
||||
],
|
||||
stacks: [{ id: 'stack', label: 'Stack', elements: [] }],
|
||||
pointers: [],
|
||||
variables: [
|
||||
{ id: 'result', name: 'result', value: '[5, 10, 10, -1, -1]' },
|
||||
],
|
||||
calculations: [],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
Reference in New Issue
Block a user