Skip to content

feat: side-by-side algorithm comparison #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
alezzz23 wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

feat: side-by-side algorithm comparison #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 31 additions & 30 deletions src/components/AlgoViz.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import GraphVisualizer from '@components/GraphVisualizer'
import MatrixVisualizer from '@components/MatrixVisualizer'
import ConceptVisualizer from '@components/ConceptVisualizer'
import CodePanel from '@components/CodePanel'
import CompareView from '@components/CompareView'
import type { Algorithm } from '@lib/types'

const SIDEBAR_MAX = 260
Expand Down Expand Up @@ -63,6 +64,7 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
const isMobile = useIsMobile()
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
const [mobileCodePanelOpen, setMobileCodePanelOpen] = useState(false)
const [viewMode, setViewMode] = useState<'normal' | 'compare'>('normal')

const initialAlgorithm = initialAlgorithmId
? (algorithms.find((a) => a.id === initialAlgorithmId) ?? null)
Expand Down Expand Up @@ -213,6 +215,14 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
}
}

if (viewMode === 'compare') {
return (
<div className="h-screen flex flex-col overflow-hidden">
<CompareView locale={locale} onExit={() => setViewMode('normal')} />
</div>
)
}

return (
<div className="h-screen flex flex-col overflow-hidden">
<Header
Expand All @@ -235,6 +245,7 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
isMobile={isMobile}
onToggleMobileSidebar={() => setMobileSidebarOpen((v) => !v)}
onToggleMobileCodePanel={() => setMobileCodePanelOpen((v) => !v)}
onCompare={() => setViewMode('compare')}
/>

{/* Main Content */}
Expand All @@ -243,9 +254,8 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
{!isMobile && (
<div className="relative shrink-0 flex">
<aside
className={`bg-black overflow-hidden ${
sidebar.isDragging ? '' : 'transition-all duration-300 ease-in-out'
}`}
className={`bg-black overflow-hidden ${sidebar.isDragging ? '' : 'transition-all duration-300 ease-in-out'
}`}
style={{
width: sidebar.isDragging ? sidebar.width : sidebar.collapsed ? 0 : SIDEBAR_MAX,
}}
Expand Down Expand Up @@ -275,9 +285,8 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
</aside>
{/* Drag handle */}
<div
className={`w-px shrink-0 cursor-col-resize group relative select-none ${
sidebar.collapsed && !sidebar.isDragging ? 'hidden' : ''
}`}
className={`w-px shrink-0 cursor-col-resize group relative select-none ${sidebar.collapsed && !sidebar.isDragging ? 'hidden' : ''
}`}
onMouseDown={sidebar.handleDragStart}
role="separator"
aria-orientation="vertical"
Expand All @@ -291,9 +300,8 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
}}
>
<div
className={`absolute inset-y-0 -left-0.5 w-[5px] z-20 ${
sidebar.isDragging ? 'bg-blue-500/50' : 'hover:bg-white/10'
} transition-colors`}
className={`absolute inset-y-0 -left-0.5 w-[5px] z-20 ${sidebar.isDragging ? 'bg-blue-500/50' : 'hover:bg-white/10'
} transition-colors`}
/>
<div className="h-full bg-white/8" />
</div>
Expand All @@ -304,16 +312,14 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
{isMobile && (
<>
<div
className={`fixed inset-0 bg-black/60 z-40 transition-opacity duration-300 ${
mobileSidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`}
className={`fixed inset-0 bg-black/60 z-40 transition-opacity duration-300 ${mobileSidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`}
onClick={() => setMobileSidebarOpen(false)}
aria-hidden="true"
/>
<aside
className={`fixed top-0 left-0 bottom-0 w-[280px] bg-black z-50 border-r border-white/8 transition-transform duration-300 ease-in-out ${
mobileSidebarOpen ? 'translate-x-0' : '-translate-x-full'
}`}
className={`fixed top-0 left-0 bottom-0 w-[280px] bg-black z-50 border-r border-white/8 transition-transform duration-300 ease-in-out ${mobileSidebarOpen ? 'translate-x-0' : '-translate-x-full'
}`}
aria-label={locale === 'es' ? 'Categorías de algoritmos' : 'Algorithm categories'}
aria-hidden={!mobileSidebarOpen}
inert={!mobileSidebarOpen || undefined}
Expand Down Expand Up @@ -379,9 +385,8 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
<div className="relative shrink-0 flex">
{/* Drag handle */}
<div
className={`w-px shrink-0 cursor-col-resize group relative select-none ${
codePanel.collapsed && !codePanel.isDragging ? 'hidden' : ''
}`}
className={`w-px shrink-0 cursor-col-resize group relative select-none ${codePanel.collapsed && !codePanel.isDragging ? 'hidden' : ''
}`}
onMouseDown={codePanel.handleDragStart}
role="separator"
aria-orientation="vertical"
Expand All @@ -395,16 +400,14 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
}}
>
<div
className={`absolute inset-y-0 -right-0.5 w-[5px] z-20 ${
codePanel.isDragging ? 'bg-blue-500/50' : 'hover:bg-white/10'
} transition-colors`}
className={`absolute inset-y-0 -right-0.5 w-[5px] z-20 ${codePanel.isDragging ? 'bg-blue-500/50' : 'hover:bg-white/10'
} transition-colors`}
/>
<div className="h-full bg-white/8" />
</div>
<aside
className={`bg-black overflow-hidden ${
codePanel.isDragging ? '' : 'transition-all duration-300 ease-in-out'
}`}
className={`bg-black overflow-hidden ${codePanel.isDragging ? '' : 'transition-all duration-300 ease-in-out'
}`}
style={{
width: codePanel.isDragging
? codePanel.width
Expand Down Expand Up @@ -454,16 +457,14 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
{isMobile && (
<>
<div
className={`fixed inset-0 bg-black/60 z-40 transition-opacity duration-300 ${
mobileCodePanelOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`}
className={`fixed inset-0 bg-black/60 z-40 transition-opacity duration-300 ${mobileCodePanelOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`}
onClick={() => setMobileCodePanelOpen(false)}
aria-hidden="true"
/>
<aside
className={`fixed top-0 right-0 bottom-0 w-[min(360px,90vw)] bg-black z-50 border-l border-white/8 transition-transform duration-300 ease-in-out ${
mobileCodePanelOpen ? 'translate-x-0' : 'translate-x-full'
}`}
className={`fixed top-0 right-0 bottom-0 w-[min(360px,90vw)] bg-black z-50 border-l border-white/8 transition-transform duration-300 ease-in-out ${mobileCodePanelOpen ? 'translate-x-0' : 'translate-x-full'
}`}
aria-label={locale === 'es' ? 'Panel de código y detalles' : 'Code and details panel'}
aria-hidden={!mobileCodePanelOpen}
inert={!mobileCodePanelOpen || undefined}
Expand Down
157 changes: 157 additions & 0 deletions src/components/CompareSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
import { useState, useRef, useEffect } from 'react'
import type { Algorithm } from '@lib/types'
import type { Locale } from '@i18n/translations'
import { translations, getCategoryName } from '@i18n/translations'
import { algorithms, categories } from '@lib/algorithms'

interface CompareSelectorProps {
selected: Algorithm | null
onSelect: (algo: Algorithm) => void
locale: Locale
label: string
}

export default function CompareSelector({ selected, onSelect, locale, label }: CompareSelectorProps) {
const t = translations[locale]
const [isOpen, setIsOpen] = useState(false)
const [search, setSearch] = useState('')
const containerRef = useRef<HTMLDivElement>(null)
const searchRef = useRef<HTMLInputElement>(null)

useEffect(() => {
if (isOpen && searchRef.current) {
searchRef.current.focus()
}
}, [isOpen])

useEffect(() => {
const handler = (e: MouseEvent) => {
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
setIsOpen(false)
setSearch('')
}
}
document.addEventListener('mousedown', handler)
return () => document.removeEventListener('mousedown', handler)
}, [])

useEffect(() => {
const handler = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
setIsOpen(false)
setSearch('')
}
}
if (isOpen) {
window.addEventListener('keydown', handler)
return () => window.removeEventListener('keydown', handler)
}
}, [isOpen])

const filteredCategories = categories
.map((cat) => ({
...cat,
algorithms: cat.algorithms.filter((a) =>
a.name.toLowerCase().includes(search.toLowerCase()),
),
}))
.filter((cat) => cat.algorithms.length > 0)

return (
<div ref={containerRef} className="relative">
<button
onClick={() => setIsOpen(!isOpen)}
className="w-full flex items-center gap-2 px-3 py-2 rounded-lg border border-white/10 bg-white/[0.03] hover:bg-white/[0.06] hover:border-white/16 transition-all text-left group"
aria-label={label}
aria-expanded={isOpen}
aria-haspopup="listbox"
>
{selected ? (
<>
<span className="flex-1 text-sm text-white truncate">{selected.name}</span>
<span className="text-[10px] px-1.5 py-0.5 rounded bg-white/8 text-neutral-400 shrink-0">
{getCategoryName(locale, selected.category)}
</span>
</>
) : (
<span className="flex-1 text-sm text-neutral-500">{t.chooseAlgorithm}</span>
)}
<svg
className={`w-3.5 h-3.5 text-neutral-500 transition-transform shrink-0 ${isOpen ? 'rotate-180' : ''}`}
viewBox="0 0 16 16"
fill="currentColor"
aria-hidden="true"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.46966 5.46966L3.99999 4.93933L4.53032 5.46966L7.99999 8.93933L11.4697 5.46966L12 4.93933L12.5303 5.46966L13.0607 5.99999L7.99999 11.0607L2.93933 5.99999L3.46966 5.46966Z"
/>
</svg>
</button>

{isOpen && (
<div className="absolute top-full left-0 right-0 mt-1 bg-neutral-950 border border-white/12 rounded-xl shadow-2xl z-50 max-h-80 overflow-hidden flex flex-col animate-in">
{/* Search */}
<div className="p-2 border-b border-white/8">
<input
ref={searchRef}
type="text"
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder={t.searchAlgorithms}
className="w-full bg-white/[0.04] border border-white/8 rounded-lg px-3 py-1.5 text-sm text-white placeholder:text-neutral-600 outline-none focus:border-white/20 transition-colors"
/>
</div>

{/* Algorithm list */}
<div className="overflow-y-auto flex-1" role="listbox" aria-label={label}>
{filteredCategories.map((cat) => (
<div key={cat.name}>
<div className="px-3 py-1.5 text-[10px] uppercase tracking-wider text-neutral-600 font-semibold sticky top-0 bg-neutral-950">
{getCategoryName(locale, cat.name)}
</div>
{cat.algorithms.map((algo) => {
const isSelected = selected?.id === algo.id
return (
<button
key={algo.id}
onClick={() => {
onSelect(algo)
setIsOpen(false)
setSearch('')
}}
className={`w-full text-left px-3 py-2 text-sm transition-colors flex items-center gap-2 ${isSelected
? 'bg-white/8 text-white'
: 'text-neutral-400 hover:bg-white/[0.04] hover:text-white'
}`}
role="option"
aria-selected={isSelected}
>
<span className="flex-1 truncate">{algo.name}</span>
<span
className={`text-[9px] px-1 py-0.5 rounded ${algo.difficulty === 'easy'
? 'bg-emerald-500/10 text-emerald-400'
: algo.difficulty === 'intermediate'
? 'bg-amber-500/10 text-amber-400'
: 'bg-red-500/10 text-red-400'
}`}
>
{algo.difficulty}
</span>
</button>
)
})}
</div>
))}
{filteredCategories.length === 0 && (
<div className="px-3 py-6 text-sm text-neutral-600 text-center">
No results
</div>
)}
</div>
</div>
)}
</div>
)
}
Loading