Merge pull request #80 from MelanieH7/2024_sem2

FEAT: Menu Page, and updating url creation function

Authored by: HumanGPT 
@MinniMinMin, @MaryHuang8, @MaryHuang8, @KittenPrincess1, @Guhh0001

Author: Sraccity

.github/workflows/url.yml

@@ -0,0 +1,28 @@
+name: URL Navigation and Parameter Input CI
+
+on:
+  push:
+    branches:
+      - 2024_sem2
+  pull_request:
+    branches:
+      - 2024_sem2
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    - name: Checkout 🛎️
+      uses: actions/[email protected]
+      with:
+          persist-credentials: false
+
+    - name: Install dependencies
+      run: 
+        npm install
+        npm install jest supertest --save-dev
+
+    - name: Run tests 🔧
+      run: 
+        npm start
+        npm test-url

docs/Colour-Guidelines-20241011.pdf

@@ -15,7 +15,8 @@
     "start:win32": "SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
     "test": "react-scripts test",
     "test-uf": "npm test -- ./src/algorithms/controllers/unionFind.test.js",
-    "test-234t": "npm test -- ./src/algorithms/controllers/TTFTree.test.js"
+    "test-234t": "npm test -- ./src/algorithms/controllers/TTFTree.test.js",
+    "test-url": "npm test -- ./src/algorithms/parameters/helpers/urlHelpers.test.js"
   },
   "husky": {
     "hooks": {
@@ -62,6 +63,7 @@
     "@mui/styles": "^5.14.4",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^12.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
     "denque": "^2.0.1",
     "framer-motion": "^4.0.0",
@@ -90,9 +92,11 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.2",
     "husky": "^4.2.5",
+    "jest": "^27.5.1",
     "lint-staged": "^10.1.3",
     "react": "^17.0.2",
     "react-test-renderer": "^17.0.2",
-    "run-script-os": "^1.1.6"
+    "run-script-os": "^1.1.6",
+    "supertest": "^7.0.0"
   }
 }

docs/Homepage-Guidelines-20241020.pdf

@@ -2,16 +2,17 @@
 import React, { useEffect, useState } from 'react';
 import './styles/App.scss';
 import Header from './components/top/Header';
+import AlgorithmMenu from './components/AlgorithmMenu';
 import { ReactComponent as Circle } from './assets/icons/circle.svg';
 import { ReactComponent as Direction } from './assets/icons/direction.svg';
 import { GlobalProvider } from './context/GlobalState';
-import RightPanel from './components/right-panel';
 import LeftPanel from './components/left-panel';
+import RightPanel from './components/right-panel';
 import MidPanel from './components/mid-panel';
 import ControlPanel from './components/mid-panel/ControlPanel';
 import Settings from './components/top/Settings';
 import {
-  resizeWindow, startRightDrag, startBottomDrag, endDrag, onDrag, collapseLeftDrag, collapseBottomDrag, collapseRightDrag, addEvent,
+  resizeWindow, startLeftDrag, startRightDrag, startBottomDrag, endDrag, onDrag, collapseLeftDrag, collapseBottomDrag, collapseRightDrag, addEvent,
 } from './BorderResize';
 import {
   setTheme,
@@ -23,35 +24,29 @@ import {
   SYSTEM_THEME_KEY,
 } from './components/top/helper';
 
-
 const DEFAULT_FONT_INCREMENT = 0;
-const LEFT_FONT_SIZE = 13;
+const LEFT_FONT_SIZE = 15;
 const MID_FONT_SIZE = 15;
 const RIGHT_FONT_SIZE = 15;
 
 function App() {
   useEffect(() => {
-    window.addEventListener('resize', (event) => {
-      resizeWindow(event);
-    });
-    // eslint-disable-next-line no-unused-vars
-    return (_) => { window.removeEventListener('resize', resizeWindow); };
-  });
-
-  // add mouseout event listener to 'document' when App first mount
+    window.addEventListener('resize', resizeWindow);
+    return () => {
+      window.removeEventListener('resize', resizeWindow);
+    };
+  }, []);
+
   useEffect(() => {
     const mouseOutCallback = (e) => {
-      // e = e || window.event;
       const from = e.relatedTarget || e.toElement;
       if (!from || from.nodeName === 'HTML') {
-        // End dragging when mouse out of html
         endDrag();
       }
     };
 
-    addEvent(document, 'mouseout', mouseOutCallback);
+    document.addEventListener('mouseout', mouseOutCallback);
 
-    // do not forget to remove event listener when the App component unmount
     return () => {
       document.removeEventListener('mouseout', mouseOutCallback);
     };
@@ -68,7 +63,6 @@ function App() {
     setFontSizeIncrease(fontSizeIncrease + val);
   };
 
-
   const initAlgoColor = () => {
     const algoTheme = getWithExpiry(ALGO_THEME_KEY);
     if (algoTheme === null) {
@@ -84,14 +78,12 @@ function App() {
     setAlgoTheme(id);
   };
 
-
   const initSystemColor = () => {
     const theme = getWithExpiry(SYSTEM_THEME_KEY);
     if (theme === null) {
       setTheme(getSystemColorMode());
       return getSystemColorMode();
     }
-
     return theme;
   };
 
@@ -102,14 +94,15 @@ function App() {
   };
 
   useEffect(() => {
-    setTheme(getWithExpiry(SYSTEM_THEME_KEY));
+    const theme = getWithExpiry(SYSTEM_THEME_KEY);
+    setTheme(theme);
     setAlgoTheme(getWithExpiry(ALGO_THEME_KEY));
-  });
+    document.documentElement.setAttribute('data-theme', theme === 'dark' ? 'dark' : 'light');
+  }, []);
 
   return (
-
     <GlobalProvider>
-      { isSettingVisible ? (
+      {isSettingVisible ? (
         <Settings
           onFontIncrease={onFontIncrease}
           onSetting={onSetting}
@@ -127,26 +120,31 @@ function App() {
         tabIndex="-1"
         onMouseMove={(event) => onDrag(event)}
       >
-        <div id="header">
-          <Header onSetting={onSetting} />
+        <div id="header" className="header-container">
+          <div className="header-left">
+            <AlgorithmMenu />
+          </div>
+          <div className="header-right">
+            <Header onSetting={onSetting} />
+          </div>
         </div>
         <div id="leftcol">
           <LeftPanel
             fontSize={LEFT_FONT_SIZE}
             fontSizeIncrement={fontSizeIncrease}
           />
         </div>
-        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
         <div
           id="leftdragbar"
           tabIndex="-1"
           aria-label="Move left drag bar"
-          onClick={collapseLeftDrag}
+          onDoubleClick={collapseLeftDrag}
+          onMouseDown={startLeftDrag}
           role="button"
           className="dragbar"
         >
           <div id="draghandle" className="handle">
-            <Direction id="leftdraghandle"/>
+            <Direction id="leftdraghandle" />
           </div>
         </div>
         <div id="tabpages">
@@ -199,5 +197,4 @@ function App() {
   );
 }
 
-
 export default App;

docs/URL-Code-Implementation-Guideline-20241004.pdf

@@ -10,7 +10,7 @@ import { withAlgorithmParams } from './helpers/urlHelpers' // Import this for UR
 import { URLContext } from '../../context/urlState.js';
 import '../../styles/Param.scss';
 
-
+// export const DEFAULT_NODES = genRandNumList(12, 1, 50);
 const DEFAULT_NODES = genRandNumList(10, 1, 100);
 const HEAP_SORT = 'Heap Sort';
 const HEAP_SORT_EXAMPLE = 'Please follow the example provided: 0,1,2,3,4';
@@ -20,13 +20,13 @@ function HeapsortParam({ list }) { // add the parsing parameters for your algori
     // const { alg, mode, param } = useUrlParams();
     // const {list, value, xyCoords, edgeWeights, start, end, string, pattern, union} = parseParam(param);
     // const { alg, mode, list } = withAlgorithmParams(HeapsortParam);
-    const DEFAULT_NODES = genRandNumList.bind(null, 12, 1, 50); // Define the default list of nodes
+    // const DEFAULT_NODES = genRandNumList.bind(null, 12, 1, 50); // Define the default list of nodes
     const [localNodes, setLocalNodes] = useState(list || DEFAULT_NODES);
     const [message, setMessage] = useState(null);
     const { setNodes } = useContext(URLContext);
 
     useEffect(() => {
-        setNodes(localNodes); 
+        setNodes(localNodes);
     }, [localNodes]);
 
     return (

docs/URL-Code-Implementation-Guideline-20241011.pdf

@@ -436,6 +436,7 @@ function EuclideanMatrixParams({
   // components/DataStructures/Graph/GraphRenderer/index.js) so
   // coordinates here can be updated
   const moveNode = (nodeID, x, y) => {
+    console.log(['moveNode', nodeID, x, y]);
     const newData1 = data1.map((row, index) => {
       if (index === nodeID) {
         return {

package.json

@@ -1,4 +1,3 @@
-import DEFAULT_NODES from '../../../algorithms/parameters/HSParam.js';
 import React, { useState, useEffect, useMemo } from 'react';
 import algorithms from '../../../algorithms';
 
@@ -18,21 +17,31 @@ import algorithms from '../../../algorithms';
 // const DEFAULT_MIN = '1'
 // const DEFAULT_MAX = '10'
 
-const DEFAULT_ALGORITHM = 'heapSort';
-const DEFAULT_MODE = 'sort';
-const DEFAULT_LIST = '';
-const DEFAULT_VALUE = '';
-const DEFAULT_XY_COORDS = '';
-const DEFAULT_EDGE_WEIGHTS = '';
-const DEFAULT_SIZE = '';
-const DEFAULT_START = '';
-const DEFAULT_END = '';
-const DEFAULT_STRING = '';
-const DEFAULT_PATTERN = '';
-const DEFAULT_UNION = '';
-const DEFAULT_HEURISTIC = '';
-const DEFAULT_MIN = '';
-const DEFAULT_MAX = '';
+// List of valid parameter names
+const VALID_PARAM_NAMES = [
+    'alg', 'mode', 'list', 'value', 'xyCoords', 'edgeWeights',
+    'size', 'start', 'end', 'string', 'pattern', 'union',
+    'heuristic', 'min', 'max'
+];
+
+// Default values for each parameter
+const DEFAULT_VALUES = {
+    alg: 'heapSort',
+    mode: 'sort',
+    list: '',
+    value: '',
+    xyCoords: '',
+    edgeWeights: '',
+    size: '',
+    start: '',
+    end: '',
+    string: '',
+    pattern: '',
+    union: '',
+    heuristic: '',
+    min: '',
+    max: ''
+};
 
 
 export function useUrlParams() {
@@ -50,39 +59,30 @@ export function useUrlParams() {
     }, []);
 
     const urlParams = useMemo(() => new URLSearchParams(search), [search]);
-    const alg = urlParams.get('alg') || DEFAULT_ALGORITHM;  // Default algorithm
-    const mode = urlParams.get('mode') || DEFAULT_MODE;    // Default mode
-
-    // Helper function to handle both missing and 'null' values
-    const getParamOrDefault = (param, defaultValue) => {
-        return param === null || param === "null" ? defaultValue : param;
-    };
-
-    // Parse individual parameters directly from URL
-    const list = getParamOrDefault(urlParams.get('list'), DEFAULT_LIST);
-    const value = getParamOrDefault(urlParams.get('value'), DEFAULT_VALUE);
-    const xyCoords = getParamOrDefault(urlParams.get('xyCoords'), DEFAULT_XY_COORDS);
-    const edgeWeights = getParamOrDefault(urlParams.get('edgeWeights'), DEFAULT_EDGE_WEIGHTS);
-    const size = getParamOrDefault(urlParams.get('size'), DEFAULT_SIZE);
-    const start = getParamOrDefault(urlParams.get('start'), DEFAULT_START);
-    const end = getParamOrDefault(urlParams.get('end'), DEFAULT_END);
-    const string = urlParams.get('string') || DEFAULT_STRING
-    const pattern = urlParams.get('pattern') || DEFAULT_PATTERN;
-    const union = getParamOrDefault(urlParams.get('union'), DEFAULT_UNION);
-    const heuristic = getParamOrDefault(urlParams.get('heuristic'), DEFAULT_HEURISTIC);
-    const min = getParamOrDefault(urlParams.get('min'), DEFAULT_MIN);
-    const max = getParamOrDefault(urlParams.get('max'), DEFAULT_MAX);
-
-
-    console.log("Raw URL alg:", urlParams.get('alg'));
-    console.log("Raw URL mode:", urlParams.get('mode'));
-    console.log("Parsed URL Params:", { list, value, xyCoords, edgeWeights, size, start, end, string, pattern, union, heuristic, min, max });
+    const params = {};
+
+    // Filter and parse valid URL parameters
+    VALID_PARAM_NAMES.forEach((name) => {
+        const value = urlParams.get(name);
+        params[name] = value !== null ? value : DEFAULT_VALUES[name];
+    });
+
+    // Log a warning if there are any invalid parameters in the URL
+    urlParams.forEach((_, key) => {
+        if (!VALID_PARAM_NAMES.includes(key)) {
+            console.warn(`Invalid URL parameter ignored: ${key}`);
+        }
+    });
 
-    return { alg, mode, list, value, xyCoords, edgeWeights, size, start, end, string, pattern, union, heuristic, min, max };
+    // console.log("Raw URL alg:", urlParams.get('alg'));
+    // console.log("Raw URL mode:", urlParams.get('mode'));
+    // console.log("Parsed URL Params:", { list, value, xyCoords, edgeWeights, size, start, end, string, pattern, union, heuristic, min, max });
 
+    return params;
 }
 
 
+
 function extractValue(paramString, key) {
     const regex = new RegExp(`${key}=([^;]*)`);
     const match = paramString.match(regex);
@@ -98,6 +98,10 @@ export const withAlgorithmParams = (WrappedComponent) => {
             return <div>Invalid algorithm specified</div>;
         }
 
+        if (!mode || !(mode in algorithms[alg].pseudocode)) {
+            return <div>Invalid mode specified</div>;
+        }
+
         return <WrappedComponent
             alg={alg}
             mode={mode}