Skip to content

Fix visualizer layout issues and refactor App.jsx architecture #36

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
Copilot wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Fix visualizer layout issues and refactor App.jsx architecture #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
89327a3
Initial plan
Copilot Aug 18, 2025
7c2e4d3
Fix visualizer components width issue - change from 50/50 to 2:1 layout
Copilot Aug 18, 2025
52f8933
Refactor App.jsx - extract linked list page components to separate files
Copilot Aug 18, 2025
5f2e08f
Optimize CSS imports - move from App.jsx to component-level imports
Copilot Aug 18, 2025
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
275 changes: 8 additions & 267 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,28 +22,8 @@ import { FaHome } from 'react-icons/fa'
// Global styles - imported in order of specificity
import './App.css'

import './features/linkedList/styles/LinkedListHome.css'
import './features/linkedList/styles/LinkedList.css'
import './features/sorting/styles/Sorting.css'
import './features/tree/styles/TreeVisualizer.css'
import './features/tree/styles/TreeHome.css'
import './features/pathfinding/styles/Pathfinding.css'
import './features/quiz/styles/Quiz.css'
import './features/quiz/styles/landingpage.css'
import './features/archive/styles/landingpage.css'
import './features/archive/styles/Archive.css'
import './features/searchAlgos/styles/SearchAlgos.css'
import './features/searchAlgos/styles/SearchHomepage.css'
import './features/klee/styles/KleeAlgorithm.css'
import './features/ds2/styles/DS2HomePage.css'
import './features/graphs/styles/GraphAlgorithmsList.css'
import './features/graphs/styles/GraphVisualizerTemplate.css'
import './features/recursion/styles/RecursionVisualizer.css'
import './features/hashTable/styles/HashTableVisualizer.css'
import './features/greedyAlgorithms/styles/GreedyAlgorithmsList.css'
import './features/greedyAlgorithms/styles/GreedyVisualizerTemplate.css'
import './features/flowcharts/styles/BlockBuilder.css'
import './features/pointers/styles/PointerVisualization.css'
// Global common styles used across multiple components
import './features/common/styles/common.css'


// Shared components
Expand All @@ -52,16 +32,11 @@ import CodeViewer from './features/common/components/CodeViewer'

// Feature components - each handles its own visualization
import LinkedListHome from './features/linkedList/components/LinkedListHome'
import DoublyLinkedListVisualizer from './features/linkedList/components/DoublyLinkedListVisualizer'
import SinglyLinkedListVisualizer from './features/linkedList/components/SinglyLinkedListVisualizer'
import SinglyLinkedListExplanation from './features/linkedList/components/SinglyLinkedListExplanation'
import SinglyLinkedListCodeViewer from './features/linkedList/components/SinglyLinkedListCodeViewer'
import CircularLinkedListVisualizer from './features/linkedList/components/CircularLinkedListVisualizer'
import CircularLinkedListExplanation from './features/linkedList/components/CircularLinkedListExplanation'
import CircularLinkedListCodeViewer from './features/linkedList/components/CircularLinkedListCodeViewer'
import DiySection from './features/linkedList/components/DiySection'
import DoublyLinkedListExplanation from './features/linkedList/components/DoublyLinkedListExplanation'
import DoublyLinkedListCodeViewer from './features/linkedList/components/DoublyLinkedListCodeViewer'
import {
DoublyLinkedListPage,
SinglyLinkedListPage,
CircularLinkedListPage
} from './features/linkedList/pages'
import HomePage from './features/home/components/HomePage'
import AboutUs from './features/about/components/AboutUs'
import SortingVisualizer from './features/sorting/components/SortingVisualizer'
Expand Down Expand Up @@ -111,240 +86,6 @@ import { generateDoublyLinkedListCode } from './utils/doublyLinkedListCodeGenera
import { setStorageItem, getStorageItem } from './utils/helpers'
import { MEMORY_POOL_SIZE } from './constants'

/**
* LinkedListPage wrapper component
* Handles state coordination between code viewer and visualizer
* Manages animation synchronization and memory pool
*/
function LinkedListPage({ nodes, setNodes, code, setCode, memoryPoolAddresses, handleMemoryPoolInit, handleCodeChange, updateNodesAndCode }) {
// State for animation coordination between CodeViewer and DoublyLinkedListVisualizer
const [currentLine, setCurrentLine] = useState(0);
const [isAnimating, setIsAnimating] = useState(false);
const [currentStep, setCurrentStep] = useState('');

// Function to handle animation state updates from DoublyLinkedListVisualizer
const handleAnimationUpdate = useCallback((lineNumber, step, animating) => {
setCurrentLine(lineNumber);
setCurrentStep(step);
setIsAnimating(animating);
}, []);

return (
<div className="app-container">
<div className="linkedlist-bg-overlay"></div>

<motion.header
className="app-header"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
>
<Link to="/" className="home-button">
<FaHome size={18} />
<span>Home</span>
</Link>
<h1 style={{ flex: 1, textAlign: 'center' }}>Linked List Visualizer</h1>
</motion.header>

<motion.div
className="split-view"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8, delay: 0.2 }}
>
<motion.div
className="panel panel-left"
initial={{ x: -20 }}
animate={{ x: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
>
<h2>C Implementation</h2>
<DoublyLinkedListCodeViewer
code={code}
onChange={handleCodeChange}
currentLine={currentLine}
isAnimating={isAnimating}
nodes={nodes}
/>
</motion.div>

<motion.div
className="panel panel-right"
initial={{ x: 20 }}
animate={{ x: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
>
<h2>Interactive Visualization</h2>
<DoublyLinkedListVisualizer
nodes={nodes}
onNodesChange={updateNodesAndCode}
onMemoryPoolInit={handleMemoryPoolInit}
onAnimationUpdate={handleAnimationUpdate}
/>
<DoublyLinkedListExplanation />
<DiySection code={code} />
</motion.div>
</motion.div>
</div>
);
}

/**
* SinglyLinkedListPage wrapper component
* Handles state coordination between code viewer and visualizer for singly linked lists
* Manages animation synchronization and memory pool
*/
function SinglyLinkedListPage({ nodes, setNodes, code, setCode, memoryPoolAddresses, handleMemoryPoolInit, handleCodeChange, updateNodesAndCode }) {
// State for animation coordination between CodeViewer and SinglyLinkedListVisualizer
const [currentLine, setCurrentLine] = useState(0);
const [isAnimating, setIsAnimating] = useState(false);
const [currentStep, setCurrentStep] = useState('');

// Function to handle animation state updates from SinglyLinkedListVisualizer
const handleAnimationUpdate = useCallback((lineNumber, step, animating) => {
setCurrentLine(lineNumber);
setCurrentStep(step);
setIsAnimating(animating);
}, []);

return (
<div className="app-container">
<div className="linkedlist-bg-overlay"></div>

<motion.header
className="app-header"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
>
<Link to="/" className="home-button">
<FaHome size={18} />
<span>Home</span>
</Link>
<h1 style={{ flex: 1, textAlign: 'center' }}>Singly Linked List Visualizer</h1>
</motion.header>

<motion.div
className="split-view"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8, delay: 0.2 }}
>
<motion.div
className="panel panel-left"
initial={{ x: -20 }}
animate={{ x: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
>
<h2>C Implementation</h2>
<SinglyLinkedListCodeViewer
code={code}
onChange={handleCodeChange}
currentLine={currentLine}
isAnimating={isAnimating}
nodes={nodes}
/>
</motion.div>

<motion.div
className="panel panel-right"
initial={{ x: 20 }}
animate={{ x: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
>
<h2>Interactive Visualization</h2>
<SinglyLinkedListVisualizer
nodes={nodes}
onNodesChange={updateNodesAndCode}
onMemoryPoolInit={handleMemoryPoolInit}
onAnimationUpdate={handleAnimationUpdate}
/>
<SinglyLinkedListExplanation />
<DiySection code={code} />
</motion.div>
</motion.div>
</div>
);
}

/**
* CircularLinkedListPage wrapper component
* Handles state coordination between code viewer and visualizer for circular linked lists
* Manages animation synchronization and memory pool
*/
function CircularLinkedListPage({ nodes, setNodes, code, setCode, memoryPoolAddresses, handleMemoryPoolInit, handleCodeChange, updateNodesAndCode }) {
// State for animation coordination between CodeViewer and CircularLinkedListVisualizer
const [currentLine, setCurrentLine] = useState(0);
const [isAnimating, setIsAnimating] = useState(false);
const [currentStep, setCurrentStep] = useState('');

// Function to handle animation state updates from CircularLinkedListVisualizer
const handleAnimationUpdate = useCallback((lineNumber, step, animating) => {
setCurrentLine(lineNumber);
setCurrentStep(step);
setIsAnimating(animating);
}, []);

return (
<div className="app-container">
<div className="linkedlist-bg-overlay"></div>

<motion.header
className="app-header"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
>
<Link to="/" className="home-button">
<FaHome size={18} />
<span>Home</span>
</Link>
<h1 style={{ flex: 1, textAlign: 'center' }}>Circular Linked List Visualizer</h1>
</motion.header>

<motion.div
className="split-view"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8, delay: 0.2 }}
>
<motion.div
className="panel panel-left"
initial={{ x: -20 }}
animate={{ x: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
>
<h2>C Implementation</h2>
<CircularLinkedListCodeViewer
code={code}
onChange={handleCodeChange}
currentLine={currentLine}
isAnimating={isAnimating}
nodes={nodes}
/>
</motion.div>

<motion.div
className="panel panel-right"
initial={{ x: 20 }}
animate={{ x: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
>
<h2>Interactive Visualization</h2>
<CircularLinkedListVisualizer
nodes={nodes}
onNodesChange={updateNodesAndCode}
onMemoryPoolInit={handleMemoryPoolInit}
onAnimationUpdate={handleAnimationUpdate}
/>
<CircularLinkedListExplanation />
<DiySection code={code} />
</motion.div>
</motion.div>
</div>
);
}

// Redirection component for the pathfinding visualizer
function PathfindingRedirect() {
useEffect(() => {
Expand Down Expand Up @@ -560,7 +301,7 @@ function App() {
path="/doubly-linkedlist"
element={
<ErrorBoundary>
<LinkedListPage
<DoublyLinkedListPage
nodes={nodes}
setNodes={setNodes}
code={code}
Expand Down
2 changes: 1 addition & 1 deletion src/features/graphs/styles/GraphVisualizerTemplate.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: 2fr 1fr;
gap: 0.75rem;
padding: 0.75rem;
}
Expand Down
2 changes: 1 addition & 1 deletion src/features/greedyAlgorithms/styles/GreedyVisualizerTemplate.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: 2fr 1fr;
min-height: calc(100vh - 140px);
gap: 1rem;
padding: 1rem;
Expand Down
Loading