Skip to content

todo.md

Latest commit

 

History

History
110 lines (83 loc) · 6.03 KB

todo.md

File metadata and controls

110 lines (83 loc) · 6.03 KB
Raw

TODO.md - Script Implementation for Page Replacement Algorithm Graph Plotter

This document outlines all the development tasks required to implement the JavaScript (script.js) for the Page Replacement Algorithm Graph Plotter. The script should follow the existing architecture (pure JS, Chart.js, direct DOM manipulation) and maintain the same visual/interaction style as the original Disk Scheduling project.

1. Core Setup & State Management

  • 1.1 Define global variables:
    • currentSimulation (stores simulation result: steps, hits, faults, ratios, framesUsed)
    • currentStepIndex (current simulation step for playback)
    • playbackInterval (interval ID for auto-stepping)
    • Chart references: faultChart, utilChart, compareChart
  • 1.2 Cache all required DOM elements (input fields, buttons, stat spans, container divs).
  • 1.3 Implement helper functions:
    • showError(msg) – displays temporary error toast (reuse existing error style from original project).
    • parseReferenceString(str) – validates and converts input to array of integers; throws meaningful errors.

2. Page Replacement Algorithms (Core Logic)

  • 2.1 Implement fifoSimulation(refs, numFrames)
    • Returns object: { steps, hits, faults, hitRatio, faultRatio, framesUsed }
    • Step object must contain: step, page, frames[], hit, fault, replacedPage, replacedIndex, incomingPage
  • 2.2 Implement lruSimulation(refs, numFrames) with usage tracking.
  • 2.3 Implement optimalSimulation(refs, numFrames) – look-ahead for future references.
  • 2.4 Implement lfuSimulation(refs, numFrames) – frequency counters.
  • 2.5 Implement mfuSimulation(refs, numFrames) – most frequently used.
  • 2.6 Create runAlgorithm(algorithm, refs, numFrames) dispatcher (switch/case).

3. UI Rendering Functions

  • 3.1 updateStatistics(sim) – updates the five stat cards (hits, faults, hit ratio, fault ratio, frames used).
  • 3.2 renderFrames(stepData) – dynamically creates frame cards inside #frameContainer.
    • Add highlight-replace class for replaced frame.
    • Add highlight-incoming class for newly loaded frame (if different from replaced).
  • 3.3 renderStepTable(sim, currentStep) – populates #stepTableBody with rows up to currentStep.
    • Columns: Step, Ref Page, Frames (as [a,b,c]), Hit/Fault (with color badge), Replaced Page.
  • 3.4 drawFaultTimeline(sim) – renders line chart (step vs binary fault/hit) using Chart.js.
  • 3.5 drawFrameUtilization(sim) – renders line chart (step vs number of occupied frames).

4. Playback Controls

  • 4.1 stopPlayback() – clears interval.
  • 4.2 startPlayback() – starts interval that advances step every 800ms; stops at end.
  • 4.3 setStep(index) – updates currentStepIndex, re-renders frames and step table, and updates button states.
  • 4.4 updatePlaybackButtons() – enables/disables Play, Pause, Next, Prev, Reset Sim based on simulation existence and current step.
  • 4.5 resetSimulationView() – resets to step 0 and stops playback.
  • 4.6 Attach event listeners to playback buttons.

5. Compare All Mode

  • 5.1 compareAll() function:
    • Parse reference string and number of frames (reuse validation).
    • Run all five algorithms.
    • Build comparison bar chart (Hits vs Faults per algorithm) – destroy previous chart if exists.
    • Generate comparison HTML table (Algorithm, Hits, Faults, Hit Ratio, Fault Ratio).
  • 5.2 Insert comparison table into #comparisonTableContainer.

6. Main Simulation Runner

  • 6.1 runSimulation():
    • Stop any ongoing playback.
    • Parse inputs, validate (non-empty refs, frames >=1, frames <=20).
    • Call runAlgorithm with selected algorithm.
    • Store result in currentSimulation, reset currentStepIndex to 0.
    • Update stats, render first step, draw both charts.
    • Enable/disable playback buttons accordingly.
  • 6.2 Attach runSimulation to "Run Simulation" button.
  • 6.3 Attach compareAll to "Compare All" button.
  • 6.4 Attach reset (full page reload or clear state) to "Reset" button.

7. Algorithm Information Cards (Collapsible)

  • 7.1 buildAlgoInfo() – dynamically creates cards for each algorithm (FIFO, LRU, Optimal, LFU, MFU).
  • 7.2 Each card contains:
    • Header with algorithm name and arrow (▼/▲).
    • Content with definition, advantages, disadvantages, time/space complexity.
  • 7.3 Add click event to toggle open class and change arrow symbol.

8. Input Validation & Edge Cases

  • 8.1 Reference string: handle empty string, spaces, non-numeric entries, trailing commas.
  • 8.2 Frames: reject 0 or negative; enforce reasonable maximum (e.g., 20).
  • 8.3 Show error toasts (consistent with original project's error style) for all validation failures.

9. Initialization & Event Binding

  • 9.1 On DOMContentLoaded, call buildAlgoInfo() and runSimulation() (default demonstration).
  • 9.2 Bind all buttons: run, compare, reset, play, pause, next, prev, reset simulation.
  • 9.3 Ensure that when a new simulation is run, any existing playback interval is cleared and charts are updated.

10. Performance & Cleanup

  • 10.1 Destroy existing Chart.js instances before creating new ones to avoid memory leaks.
  • 10.2 Limit max frames to 10 in UI (but allow up to 20 in logic for flexibility).
  • 10.3 Use requestAnimationFrame or CSS transitions for smooth frame highlighting (already done via CSS animations).

Deliverable Checklist

  • script.js contains all functions listed above.
  • No external libraries except Chart.js (already included via CDN in HTML).
  • The script must work with the provided index.html and style.css without modification.
  • All user interactions (run, compare, playback, reset) work as expected.
  • Error messages are shown gracefully (toast style) without breaking the UI.

Note: This TODO list assumes the HTML structure and CSS classes are already defined as per the earlier generated files. Adjust class/id names if the final HTML differs.