algorithm-visualizer · 18vikastg · Oct 16, 2025
diff --git a/src/components/App/index.js b/src/components/App/index.js
@@ -54,6 +54,23 @@ class App extends BaseComponent {
       .catch(this.handleError);
 
     this.toggleHistoryBlock(true);
+
+    // Load saved workspace preferences
+    const savedNavigatorOpened = localStorage.getItem('navigatorOpened');
+    if (savedNavigatorOpened !== null) {
+      const isOpened = JSON.parse(savedNavigatorOpened);
+      this.toggleNavigatorOpened(isOpened);
+    }
+
+    const savedWeights = localStorage.getItem('workspaceWeights');
+    if (savedWeights) {
+      try {
+        const weights = JSON.parse(savedWeights);
+        this.setState({ workspaceWeights: weights });
+      } catch (e) {
+        // Invalid saved data, ignore
+      }
+    }
   }
 
   componentWillUnmount() {
@@ -63,16 +80,33 @@ class App extends BaseComponent {
     this.toggleHistoryBlock(false);
   }
 
-  componentWillReceiveProps(nextProps) {
-    const { params } = nextProps.match;
-    const { search } = nextProps.location;
-    if (params !== this.props.match.params || search !== this.props.location.search) {
+  componentDidUpdate(prevProps, prevState) {
+    const { params } = this.props.match;
+    const { search } = this.props.location;
+    const { params: prevParams } = prevProps.match;
+    const { search: prevSearch } = prevProps.location;
+
+    if (params !== prevParams || search !== prevSearch) {
       const { categoryKey, algorithmKey, gistId } = params;
-      const { algorithm, scratchPaper } = nextProps.current;
+      const { algorithm, scratchPaper } = this.props.current;
       if (algorithm && algorithm.categoryKey === categoryKey && algorithm.algorithmKey === algorithmKey) return;
       if (scratchPaper && scratchPaper.gistId === gistId) return;
       this.loadAlgorithm(params, queryString.parse(search));
     }
+
+    // Persist navigator state
+    const { workspaceVisibles } = this.state;
+    const { workspaceVisibles: prevVisibles } = prevState;
+    if (workspaceVisibles[0] !== prevVisibles[0]) {
+      localStorage.setItem('navigatorOpened', JSON.stringify(workspaceVisibles[0]));
+    }
+
+    // Persist workspace weights
+    const { workspaceWeights } = this.state;
+    const { workspaceWeights: prevWeights } = prevState;
+    if (workspaceWeights !== prevWeights) {
+      localStorage.setItem('workspaceWeights', JSON.stringify(workspaceWeights));
+    }
   }
 
   toggleHistoryBlock(enable = !this.unblock) {

diff --git a/src/components/FoldableAceEditor/index.js b/src/components/FoldableAceEditor/index.js
@@ -22,8 +22,10 @@ class FoldableAceEditor extends AceEditor {
     super.componentDidUpdate(prevProps, prevState, snapshot);
 
     const { editingFile, shouldBuild } = this.props.current;
-    if (editingFile !== prevProps.current.editingFile) {
-      if (shouldBuild) this.foldTracers();
+    const { editingFile: prevEditingFile } = prevProps.current;
+
+    if (editingFile !== prevEditingFile && shouldBuild) {
+      this.foldTracers();
     }
   }
 

diff --git a/src/components/Navigator/index.js b/src/components/Navigator/index.js
@@ -28,9 +28,11 @@ class Navigator extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    const { algorithm } = nextProps.current;
-    if (algorithm) {
+  componentDidUpdate(prevProps) {
+    const { algorithm } = this.props.current;
+    const { algorithm: prevAlgorithm } = prevProps.current;
+
+    if (algorithm && (!prevAlgorithm || algorithm.categoryKey !== prevAlgorithm.categoryKey)) {
       this.toggleCategory(algorithm.categoryKey, true);
     }
   }

diff --git a/src/components/Player/index.js b/src/components/Player/index.js
@@ -31,15 +31,46 @@ class Player extends BaseComponent {
   componentDidMount() {
     const { editingFile, shouldBuild } = this.props.current;
     if (shouldBuild) this.build(editingFile);
+    window.addEventListener('resize', this.handleResize);
+    document.addEventListener('keydown', this.handleKeyDown);
   }
 
-  componentWillReceiveProps(nextProps) {
-    const { editingFile, shouldBuild } = nextProps.current;
-    if (editingFile !== this.props.current.editingFile) {
+  componentDidUpdate(prevProps) {
+    const { editingFile, shouldBuild } = this.props.current;
+    if (editingFile !== prevProps.current.editingFile) {
       if (shouldBuild) this.build(editingFile);
     }
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+    document.removeEventListener('keydown', this.handleKeyDown);
+  }
+
+  handleResize = () => {
+    // Implement resize logic if needed
+  }
+
+  handleKeyDown = (e) => {
+    const { playing } = this.state;
+
+    // Space: play/pause
+    if (e.code === 'Space' && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
+      e.preventDefault();
+      playing ? this.pause() : this.resume(true);
+    }
+    // Arrow Left: previous
+    if (e.code === 'ArrowLeft' && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
+      e.preventDefault();
+      this.prev();
+    }
+    // Arrow Right: next
+    if (e.code === 'ArrowRight' && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
+      e.preventDefault();
+      this.next();
+    }
+  }
+
   reset(commands = []) {
     const chunks = [{
       commands: [],

diff --git a/src/components/ToastContainer/index.js b/src/components/ToastContainer/index.js
@@ -5,11 +5,27 @@ import { classes } from 'common/util';
 import styles from './ToastContainer.module.scss';
 
 class ToastContainer extends React.Component {
-  componentWillReceiveProps(nextProps) {
-    const newToasts = nextProps.toast.toasts.filter(toast => !this.props.toast.toasts.includes(toast));
-    newToasts.forEach(toast => {
-      window.setTimeout(() => this.props.hideToast(toast.id), 3000);
-    });
+  constructor(props) {
+    super(props);
+    this.timeout = null;
+  }
+
+  componentDidUpdate(prevProps) {
+    const { toasts } = this.props.toast;
+    const { toasts: prevToasts } = prevProps.toast;
+
+    if (toasts !== prevToasts) {
+      clearTimeout(this.timeout);
+      const newToasts = toasts.filter(toast => !prevToasts.includes(toast));
+      if (newToasts.length > 0) {
+        const latestToast = newToasts[newToasts.length - 1];
+        this.timeout = setTimeout(() => this.props.hideToast(latestToast.id), 3000);
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
   }
 
   render() {

diff --git a/src/components/VisualizationViewer/index.js b/src/components/VisualizationViewer/index.js
@@ -24,11 +24,11 @@ class VisualizationViewer extends BaseComponent {
     this.update(chunks, cursor);
   }
 
-  componentWillReceiveProps(nextProps) {
-    const { chunks, cursor } = nextProps.player;
-    const { chunks: oldChunks, cursor: oldCursor } = this.props.player;
-    if (chunks !== oldChunks || cursor !== oldCursor) {
-      this.update(chunks, cursor, oldChunks, oldCursor);
+  componentDidUpdate(prevProps) {
+    const { chunks, cursor } = this.props.player;
+    const { chunks: prevChunks, cursor: prevCursor } = prevProps.player;
+    if (chunks !== prevChunks || cursor !== prevCursor) {
+      this.update(chunks, cursor, prevChunks, prevCursor);
     }
   }