329 lines
11 KiB
TypeScript
329 lines
11 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem } from "@/components/ui/dropdown-menu"
|
|
import { Slider } from "@/components/ui/slider"
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
|
|
|
|
export default function Component() {
|
|
const [array, setArray] = useState<number[]>([])
|
|
const [isRunning, setIsRunning] = useState(false)
|
|
const [currentAlgorithm, setCurrentAlgorithm] = useState("bubble")
|
|
const [arraySize, setArraySize] = useState(20)
|
|
|
|
useEffect(() => {
|
|
generateRandomArray(arraySize)
|
|
}, [arraySize])
|
|
|
|
const generateRandomArray = (size: number) => {
|
|
const newArray = Array.from({ length: size }, () => Math.floor(Math.random() * 100))
|
|
setArray(newArray)
|
|
}
|
|
|
|
const shuffleArray = () => {
|
|
const shuffledArray = [...array].sort(() => Math.random() - 0.5)
|
|
setArray(shuffledArray)
|
|
}
|
|
|
|
const startAnimation = () => {
|
|
setIsRunning(true)
|
|
switch (currentAlgorithm) {
|
|
case "bubble":
|
|
bubbleSort()
|
|
break
|
|
case "insertion":
|
|
insertionSort()
|
|
break
|
|
case "merge":
|
|
mergeSort(array, 0, array.length - 1)
|
|
break
|
|
case "heap":
|
|
heapSort()
|
|
break
|
|
case "quick":
|
|
quickSort(array, 0, array.length - 1)
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
}
|
|
|
|
const pauseAnimation = () => {
|
|
setIsRunning(false)
|
|
}
|
|
|
|
const resetAnimation = () => {
|
|
setIsRunning(false)
|
|
generateRandomArray(arraySize)
|
|
}
|
|
|
|
const bubbleSort = async () => {
|
|
const newArray = [...array]
|
|
for (let i = 0; i < newArray.length; i++) {
|
|
for (let j = 0; j < newArray.length - i - 1; j++) {
|
|
if (newArray[j] > newArray[j + 1]) {
|
|
;[newArray[j], newArray[j + 1]] = [newArray[j + 1], newArray[j]]
|
|
setArray([...newArray])
|
|
await new Promise((resolve) => setTimeout(resolve, 100))
|
|
}
|
|
}
|
|
}
|
|
setIsRunning(false)
|
|
}
|
|
|
|
const insertionSort = async () => {
|
|
const newArray = [...array]
|
|
for (let i = 1; i < newArray.length; i++) {
|
|
const key = newArray[i]
|
|
let j = i - 1
|
|
while (j >= 0 && newArray[j] > key) {
|
|
newArray[j + 1] = newArray[j]
|
|
j = j - 1
|
|
setArray([...newArray])
|
|
await new Promise((resolve) => setTimeout(resolve, 100))
|
|
}
|
|
newArray[j + 1] = key
|
|
setArray([...newArray])
|
|
await new Promise((resolve) => setTimeout(resolve, 100))
|
|
}
|
|
setIsRunning(false)
|
|
}
|
|
|
|
async function heapify(newArray: number[], n: number, i: number) {
|
|
let largest = i
|
|
const left = 2 * i + 1
|
|
const right = 2 * i + 2
|
|
|
|
if (left < n && newArray[left] > newArray[largest]) largest = left
|
|
if (right < n && newArray[right] > newArray[largest]) largest = right
|
|
|
|
if (largest !== i) {
|
|
;[newArray[i], newArray[largest]] = [newArray[largest], newArray[i]]
|
|
setArray([...newArray])
|
|
await new Promise((resolve) => setTimeout(resolve, 100))
|
|
await heapify(newArray, n, largest)
|
|
}
|
|
}
|
|
|
|
const heapSort = async () => {
|
|
const newArray = [...array]
|
|
const n = newArray.length
|
|
for (let i = Math.floor(n / 2) - 1; i >= 0; i--) {
|
|
await heapify(newArray, n, i)
|
|
}
|
|
for (let i = n - 1; i > 0; i--) {
|
|
;[newArray[0], newArray[i]] = [newArray[i], newArray[0]]
|
|
setArray([...newArray])
|
|
await new Promise((resolve) => setTimeout(resolve, 100))
|
|
await heapify(newArray, i, 0)
|
|
}
|
|
setIsRunning(false)
|
|
}
|
|
|
|
async function partition(arr: number[], low: number, high: number) {
|
|
const pivot = arr[high]
|
|
let i = low - 1
|
|
for (let j = low; j < high; j++) {
|
|
if (arr[j] < pivot) {
|
|
i++
|
|
;[arr[i], arr[j]] = [arr[j], arr[i]]
|
|
setArray([...arr])
|
|
await new Promise((resolve) => setTimeout(resolve, 100))
|
|
}
|
|
}
|
|
;[arr[i + 1], arr[high]] = [arr[high], arr[i + 1]]
|
|
setArray([...arr])
|
|
await new Promise((resolve) => setTimeout(resolve, 100))
|
|
return i + 1
|
|
}
|
|
|
|
const quickSort = async (arr: number[], low: number, high: number) => {
|
|
if (low < high) {
|
|
const pi = await partition(arr, low, high)
|
|
await quickSort(arr, low, pi - 1)
|
|
await quickSort(arr, pi + 1, high)
|
|
}
|
|
}
|
|
|
|
const mergeSort = async (arr: number[], left: number, right: number) => {
|
|
if (left < right) {
|
|
const mid = Math.floor((left + right) / 2)
|
|
await mergeSort(arr, left, mid)
|
|
await mergeSort(arr, mid + 1, right)
|
|
await merge(arr, left, mid, right)
|
|
}
|
|
}
|
|
|
|
const merge = async (arr: number[], left: number, mid: number, right: number) => {
|
|
const n1 = mid - left + 1
|
|
const n2 = right - mid
|
|
const leftArr = new Array(n1)
|
|
const rightArr = new Array(n2)
|
|
|
|
for (let i = 0; i < n1; i++) leftArr[i] = arr[left + i]
|
|
for (let j = 0; j < n2; j++) rightArr[j] = arr[mid + 1 + j]
|
|
|
|
let i = 0, j = 0, k = left
|
|
|
|
while (i < n1 && j < n2) {
|
|
if (leftArr[i] <= rightArr[j]) {
|
|
arr[k] = leftArr[i]
|
|
i++
|
|
} else {
|
|
arr[k] = rightArr[j]
|
|
j++
|
|
}
|
|
setArray([...arr])
|
|
await new Promise((resolve) => setTimeout(resolve, 100))
|
|
k++
|
|
}
|
|
|
|
while (i < n1) {
|
|
arr[k] = leftArr[i]
|
|
i++
|
|
k++
|
|
setArray([...arr])
|
|
await new Promise((resolve) => setTimeout(resolve, 100))
|
|
}
|
|
|
|
while (j < n2) {
|
|
arr[k] = rightArr[j]
|
|
j++
|
|
k++
|
|
setArray([...arr])
|
|
await new Promise((resolve) => setTimeout(resolve, 100))
|
|
}
|
|
}
|
|
|
|
const getAlgorithmExplanation = () => {
|
|
switch (currentAlgorithm) {
|
|
case "bubble":
|
|
return {
|
|
title: "Bubble Sort",
|
|
timeComplexity: "Time: O(n^2)",
|
|
spaceComplexity: "Space: O(1)",
|
|
description: "Bubble sort is a simple sorting algorithm that repeatedly steps through the list, compares adjacent elements and swaps them if they are in the wrong order. The pass through the list is repeated until the list is sorted."
|
|
}
|
|
case "insertion":
|
|
return {
|
|
title: "Insertion Sort",
|
|
timeComplexity: "Time: O(n^2)",
|
|
spaceComplexity: "Space: O(1)",
|
|
description: "Insertion sort is a simple sorting algorithm that builds the final sorted array one item at a time. It is much less efficient on large lists than more advanced algorithms such as quicksort, heapsort, or merge sort."
|
|
}
|
|
case "merge":
|
|
return {
|
|
title: "Merge Sort",
|
|
timeComplexity: "Time: O(n log n)",
|
|
spaceComplexity: "Space: O(n)",
|
|
description: "Merge sort is an efficient, stable, comparison-based, divide and conquer sorting algorithm. Most implementations produce a stable sort, meaning that the implementation preserves the input order of equal elements in the sorted output."
|
|
}
|
|
case "heap":
|
|
return {
|
|
title: "Heap Sort",
|
|
timeComplexity: "Time: O(n log n)",
|
|
spaceComplexity: "Space: O(1)",
|
|
description: "Heap sort is a comparison-based sorting technique based on Binary Heap data structure. It is similar to selection sort where we first find the maximum element and place the maximum element at the end. We repeat the same process for the remaining element."
|
|
}
|
|
case "quick":
|
|
return {
|
|
title: "Quick Sort",
|
|
timeComplexity: "Time: O(n log n)",
|
|
spaceComplexity: "Space: O(log n)",
|
|
description: "Quick sort is an efficient sorting algorithm that, on average, makes O(n log n) comparisons to sort n items. It is an in-place sort (i.e., it doesn't require any extra storage)."
|
|
}
|
|
default:
|
|
return { title: "", timeComplexity: "", spaceComplexity: "", description: "" }
|
|
}
|
|
}
|
|
|
|
const { title, timeComplexity, spaceComplexity, description } = getAlgorithmExplanation()
|
|
|
|
return (
|
|
<div className="flex flex-col items-center h-screen">
|
|
<header className="bg-primary text-primary-foreground py-4 px-6 w-full">
|
|
<h1 className="text-4xl font-bold text-center">Algorithm Visualizer</h1>
|
|
</header>
|
|
<h1 className="text-3xl font-bold mt-8 capitalize">{currentAlgorithm} sort</h1>
|
|
<div className="flex items-end justify-center h-64 mt-10 shadow-2xl p-4">
|
|
{array.map((value, index) => (
|
|
<div
|
|
key={index}
|
|
className={`mx-0.5 ${isRunning ? 'bg-red-500' : 'bg-blue-500'}`}
|
|
style={{ height: `${value * 2}px`, width: '20px' }}
|
|
></div>
|
|
))}
|
|
</div>
|
|
<div className="flex mt-10 space-x-4">
|
|
<Button onClick={startAnimation}>Start</Button>
|
|
<Button onClick={pauseAnimation} variant="outline" a>Pause</Button>
|
|
<Button onClick={resetAnimation}>Reset</Button>
|
|
<Button onClick={shuffleArray}>Shuffle</Button>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger>
|
|
{currentAlgorithm.charAt(0).toUpperCase() + currentAlgorithm.slice(1)} Sort
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuRadioGroup
|
|
value={currentAlgorithm}
|
|
onValueChange={setCurrentAlgorithm}
|
|
>
|
|
<DropdownMenuRadioItem value="bubble">Bubble Sort</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value="insertion">Insertion Sort</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value="merge">Merge Sort</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value="heap">Heap Sort</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value="quick">Quick Sort</DropdownMenuRadioItem>
|
|
</DropdownMenuRadioGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
<div className="flex flex-col items-center mt-10 space-y-4">
|
|
<label className="text-xl">Array Size: {arraySize}</label>
|
|
<Slider
|
|
value={[arraySize]}
|
|
onValueChange={(value) => setArraySize(value[0])}
|
|
min={5}
|
|
max={100}
|
|
/>
|
|
</div>
|
|
<div className="mt-16 w-full max-w-xl">
|
|
<Card className="shadow-2xl">
|
|
<CardHeader>
|
|
<CardTitle className="underline mb-2">{title}</CardTitle>
|
|
<CardDescription>
|
|
<div>{timeComplexity}</div>
|
|
<div>{spaceComplexity}</div>
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-justify">{description}</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ArrowUpDownIcon(props) {
|
|
return (
|
|
<svg
|
|
{...props}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="m21 16-4 4-4-4" />
|
|
<path d="M17 20V4" />
|
|
<path d="m3 8 4-4 4 4" />
|
|
<path d="M7 4v16" />
|
|
</svg>
|
|
)
|
|
}
|