URL input fixes

Added for new alorithms, fixed string vs integer bug for Euclidean
graphs, updated npm/Node.js versions

Author: lee-naish

README.md

@@ -1,6 +1,6 @@
 # Algorithms in Action
 
-![license](https://img.shields.io/badge/license-MIT-Green) ![node](https://img.shields.io/badge/node-v18.17.1-blue) ![npm](https://img.shields.io/badge/npm-v9.6.7-blue)
+![license](https://img.shields.io/badge/license-MIT-Green) ![node](https://img.shields.io/badge/node-v22.13.0-blue) ![npm](https://img.shields.io/badge/npm-10.9.2-blue)
 
 Welcome to Algorithms In Action!
 

src/algorithms/parameters/HashingCHParam.js

@@ -1,3 +1,8 @@
+import PropTypes from 'prop-types';
+import { withAlgorithmParams } from './helpers/urlHelpers'
+
+import { URLContext } from '../../context/urlState.js';
+
 import React, { useState, useContext, useEffect } from 'react';
 import { GlobalContext } from '../../context/GlobalState';
 import { GlobalActions } from '../../context/actions';
@@ -17,8 +22,8 @@ import {
 } from './helpers/ParamHelper';
 import { SMALL_SIZE, LARGE_SIZE } from '../controllers/HashingCommon';
 
-// Algotiyhm information and magic phrases
-const ALGORITHM_NAME = 'Hashing (linear probing)';
+// Algorithm information and magic phrases
+const ALGORITHM_NAME = 'Hashing (chaining)';
 const HASHING_INSERT = 'Hashing Insertion';
 const HASHING_SEARCH = 'Hashing Search';
 const HASHING_EXAMPLE = 'PLACE HOLDER ERROR MESSAGE';
@@ -32,6 +37,8 @@ const UNCHECKED = {
     largeTable: false
 };
 
+const DEFAULT_EXPAND = false;
+
 // Styling of radio buttons
 const BlueRadio = withStyles({
   root: {
@@ -54,15 +61,23 @@ const ERROR_INVALID_RANGES = 'If you had entered ranges, please input valid rang
  * Chaining input component
  * @returns the component
  */
-function HashingCHParam() {
+function HashingCHParam({ mode, list, value }) {
   const [message, setMessage] = useState(null);
   const { algorithm, dispatch } = useContext(GlobalContext);
-  const [array, setArray] = useState(DEFAULT_ARRAY);
-  const [search, setSearch] = useState(DEFAULT_SEARCH);
+  const [array, setLocalArray] = useState(list || DEFAULT_ARRAY);
+  const [search, setLocalSearch] = useState(DEFAULT_SEARCH);
   const [HASHSize, setHashSize] = useState({
     smallTable: true,
     largeTable: false,
   });
+  const [expand, setExpand] = useState(DEFAULT_EXPAND);
+  const { setNodes, setSearchValue } = useContext(URLContext);
+
+  useEffect(() => {
+    setNodes(array);
+    setSearchValue(search);
+  }, [array, search])
+
 
     /**
    * Handle changes to input
@@ -72,6 +87,14 @@ function HashingCHParam() {
     setHashSize({ ...UNCHECKED, [e.target.name]: true })
   }
 
+  /**
+   * Handle expand
+   * @param {*} e the input box component
+   */
+  const handleExpand = (e) => {
+    setExpand(!expand)
+  }
+
   /**
    * Handle insert box inputs
    * @param {*} e the insert box component
@@ -94,7 +117,7 @@ function HashingCHParam() {
           mode: 'insertion',
           hashSize: hashSize,
           values,
-          expand: false
+          expand: expand
         });
         setMessage(successParamMsg(ALGORITHM_NAME));
       }
@@ -141,6 +164,14 @@ function HashingCHParam() {
     [HASHSize],
   );
 
+  // Use effect to detect changes in expand radio box choice
+  useEffect(
+    () => {
+      document.getElementById('startBtnGrp').click();
+    },
+    [expand],
+  );
+
 
   return (
     <>
@@ -151,7 +182,7 @@ function HashingCHParam() {
           mode="insertion"
           formClassName="formLeft"
           DEFAULT_VAL = {array}
-          SET_VAL = {setArray}
+          SET_VAL = {setLocalArray}
           REFRESH_FUNCTION={
             (() => {
               if (HASHSize.smallTable) {
@@ -174,8 +205,8 @@ function HashingCHParam() {
           buttonName="SEARCH"
           mode="search"
           formClassName="formRight"
-          DEFAULT_VAL = {DEFAULT_SEARCH}
-          SET_VAL = {setSearch}
+          DEFAULT_VAL = {value || DEFAULT_SEARCH}
+          SET_VAL = {setLocalSearch}
           ALGORITHM_NAME = {HASHING_SEARCH}
           handleSubmit={handleSearch}
           setMessage={setMessage}
@@ -212,6 +243,22 @@ function HashingCHParam() {
             className="checkbox"
           />
         </div>
+
+
+        <div>
+          {HASHSize.smallTable && (
+            <FormControlLabel
+              control={
+                <BlueRadio
+                  checked={expand}
+                  onClick={handleExpand}
+                />
+              }
+              label="Expand"
+              className="checkbox"
+            />
+          )}
+        </div>
       </div>
 
       {/* render success/error message */}
@@ -220,4 +267,11 @@ function HashingCHParam() {
   );
 }
 
-export default HashingCHParam;
+// Define the prop types for URL Params
+HashingCHParam.propTypes = {
+    alg: PropTypes.string.isRequired, // keep alg for all algorithms
+    mode: PropTypes.string.isRequired, //keep mode for all algorithms
+    list: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired
+ };
+export default withAlgorithmParams(HashingCHParam);

src/algorithms/parameters/StraightRadixSortParam.js

@@ -1,30 +1,39 @@
 /* eslint-disable no-prototype-builtins */
 /* eslint-disable jsx-a11y/label-has-associated-control */
-import React, { useState } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
+import { URLContext } from '../../context/urlState';
 import { genRandNumList } from './helpers/ParamHelper';
 import ListParam from './helpers/ListParam';
+import PropTypes from 'prop-types';
+import { withAlgorithmParams } from './helpers/urlHelpers';
 import '../../styles/Param.scss';
 
 const DEFAULT_NODES = genRandNumList(10, 1, 100);
-const STRAIGHT_RADIX_SORT = 'Straight Radix Sort';
-const STRAIGHT_RADIX_SORT_EXAMPLE = 'Please follow the example provided: 0,1,2,3,4';
+const DEFAULT_MODE = 'sort';
+const Straight_RADIX_SORT = 'Straight Radix Sort';
+const MSDRS_SORT_EXAMPLE = 'Please follow the example provided: 0,1,2,3,4';
 
-function StraightRadixSortParam() {
+function StraightRadixSortParam({ mode, list }) {
     const [message, setMessage] = useState(null);
-    const [nodes, setNodes] = useState(DEFAULT_NODES);
+    const [localNodes, setLocalNodes] = useState(list || DEFAULT_NODES);
+    const { setNodes } = useContext(URLContext);
+
+    useEffect(() => {
+        setNodes(localNodes);
+    }, [localNodes]);
 
     return (
         <>
             <div className="form">
                 <ListParam
                     name="radixSortStraight"
                     buttonName="Sort"
-                    mode="sort"
+                    mode={mode || DEFAULT_MODE}
                     formClassName="formLeft"
-                    DEFAULT_VAL={nodes}
-                    SET_VAL={setNodes}
-                    ALGORITHM_NAME={STRAIGHT_RADIX_SORT}
-                    EXAMPLE={STRAIGHT_RADIX_SORT_EXAMPLE}
+                    DEFAULT_VAL={localNodes}
+                    SET_VAL={setLocalNodes}
+                    ALGORITHM_NAME={Straight_RADIX_SORT}
+                    EXAMPLE={MSDRS_SORT_EXAMPLE}
                     setMessage={setMessage}
                 />
             </div>
@@ -35,4 +44,10 @@ function StraightRadixSortParam() {
     );
 }
 
-export default StraightRadixSortParam;
+StraightRadixSortParam.propTypes = {
+    alg: PropTypes.string.isRequired,
+    mode: PropTypes.string.isRequired,
+    list: PropTypes.string.isRequired,
+}
+
+export default withAlgorithmParams(StraightRadixSortParam);

src/algorithms/parameters/helpers/EuclideanMatrixParams.js

@@ -270,10 +270,18 @@ function EuclideanMatrixParams({
   // and third is weight (if third is missing, weight defaults to 1)
   const [coordsTxt, setCoordsTxt] = useState(graphEgs[0].coords);
   const [edgesTxt, setEdgesTxt] = useState(graphEgs[0].edges);
-  const [startNode, setStartNode] = useState(defaultStart);
+  // Note that with URL input, defaultStart is a string rather than an
+  // integer, so we convert with unary + (otherwise when we compute
+  // start+1 it concatenates strings...)
+  const [startNode, setStartNode] = useState(+defaultStart);
   // XXX not sure if endNodesTxt needs to be in State
   const [endNodesTxt, setEndNodesTxt] = useState(nums2Txt(defaultEnd));
-  const [endNodes, setEndNodes] = useState(Array.isArray(defaultEnd) ? defaultEnd : [defaultEnd]);
+  // A* can have multiple end nodes in general so we use an array.
+  // However, other code assumes a single integer end node so the code
+  // here supports both and multiple end nodes are not yet supported in
+  // A* (XXX might fix this one day) Comment on defaultStart re strings
+  // versus integers also applies
+  const [endNodes, setEndNodes] = useState(Array.isArray(defaultEnd) ?  defaultEnd : [+defaultEnd]);
   // const [graphChoice, setgraphChoice] = useState(GRAPHCHOICERAND);
   const [graphChoice, setgraphChoice] = useState(1);
 
@@ -398,11 +406,16 @@ function EuclideanMatrixParams({
   // required
   // useEffect() triggers handleSearch() to update animation
   const updateEndNode = (newEnd) => {
-    newEnd = (newEnd + size + 1) % (size + 1);
-    if (newEnd === 0 && ALGORITHM_NAME === 'A* Algorithm')
-      newEnd = size;
+    // use modulo size + 1 to wrap around
+    let newEnd1 = (newEnd + size + 1) % (size + 1);
+    // avoid 0 for A*, which has compulsory end node(s)
+    if (newEnd1 === 0 && ALGORITHM_NAME === 'A* Algorithm')
+      if (newEnd === size+1) // we incremented end
+        newEnd1 = 1;
+      else
+        newEnd1 = size; // we decremented end
     setMessage(null);
-    setEndNodes([newEnd]);
+    setEndNodes([newEnd1]);
     // handleSearch();
   };
 
@@ -736,18 +749,20 @@ function EuclideanMatrixParams({
     //         setMessage={setMessage}
     //       />
     //     </div>);
-    // XXX would be nice to display ' ' instead of '0'
     endButton =
         (<div className="sLineButtonContainer">
           <button className="endBtn" onClick={() => updateEndNode(endNodes[0] - 1)}>
             −
           </button>
-          <span className='size'>End: {endNodes[0]}</span>
+          <span className='size'>End:
+            {endNodes[ 0]=== 0 ? ' _' : endNodes[0]}
+          </span>
           <button className="sizeBtn" onClick={() => updateEndNode(endNodes[0] + 1)}>
             +
           </button>
         </div>);
 
+/* // not used
   let startButton = '';
   if (defaultStart !== null)
     startButton =
@@ -761,6 +776,7 @@ function EuclideanMatrixParams({
           </button>
           
         </div>);
+*/
 
   let weightButton = '';
   if (!unweighted)
@@ -952,15 +968,18 @@ const graphEgsNames = (graphEgs) => {
 }
 
 // converts [1,2,3] into '1,2,3' etc
+// Used for end nodes, but a bunch of things only support a single end
+// node so we also support single numbers here
 const nums2Txt = (nums) => {
   if (nums === null) return '';
   let txt = ``;
   if (!Array.isArray(nums)) {
-    console.log('Expected an array but received:', nums);
+    console.log('Hoped for an array but received:', nums);
     if (typeof nums === 'number') {
       txt = nums.toString();
     }
-    return txt; // or handle this case appropriately
+    console.log('Sometimes in life you just have to make do with what you are given');
+    return txt; // XXX or handle this case appropriately
   }
   nums.forEach((n) => {
     txt += n + `,`;

src/algorithms/parameters/msort_arr_bup.js

@@ -1,14 +1,19 @@
 // Adapted from Quicksort - could rename a few things
 
 /* eslint-disable no-unused-vars */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Radio from '@mui/material/Radio';
 import { withStyles } from '@mui/styles';
 import { genRandNumList, quicksortPerfectPivotArray } from './helpers/ParamHelper';
 import ListParam from './helpers/ListParam';
 import '../../styles/Param.scss';
 
+import PropTypes from 'prop-types'; // Import this for URL Param
+import { withAlgorithmParams } from './helpers/urlHelpers' // Import this for URL Param
+
+import { URLContext } from '../../context/urlState';
+
 const DEFAULT_ARRAY_GENERATOR = genRandNumList.bind(null, 12, 1, 50);
 const DEFAULT_ARR = DEFAULT_ARRAY_GENERATOR();
 const MERGE_SORT = 'Merge Sort (bottom up)';
@@ -31,17 +36,20 @@ const BlueRadio = withStyles({
   // eslint-disable-next-line react/jsx-props-no-spreading
 })((props) => <Radio {...props} />)
 
-function MergesortParam() {
+function MergesortParam({ list }) {
   const [message, setMessage] = useState(null)
-  const [array, setArray] = useState(DEFAULT_ARR)
+  const [array, setArray] = useState(list || DEFAULT_ARR)
+  const { setNodes } = useContext(URLContext)
   const [QSCase, setQSCase] = useState({
     random: true,
     sortedAsc: false,
     // bestCase: false,
     sortedDesc: false
   });
 
-
+ useEffect(() => {
+    setNodes(array);
+  }, [array]);
 
   // XXX best case definitely not needed; could skip choice of cases
   // function for choosing the type of input
@@ -155,4 +163,11 @@ function MergesortParam() {
   )
 }
 
-export default MergesortParam
+// Define the prop types for URL Params
+MergesortParam.propTypes = {
+  alg: PropTypes.string.isRequired,
+  mode: PropTypes.string.isRequired,
+  list: PropTypes.string.isRequired
+};
+
+export default withAlgorithmParams(MergesortParam); // Export with the wrapper for URL Params