Skip to content

Commit 683a047

Browse files
lee-naishlee-naish
committed
Parameter improvements
graph end start node optional, sorted input etc for all sorting algorithms,...
1 parent 2cbbb7e commit 683a047

File tree

11 files changed

+525
-173
lines changed

11 files changed

+525
-173
lines changed

‎src/algorithms/instructions/index.js

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ const sortInstructions = [{
101101
`Click on ${KEY_CODE} on the right panel to show the code.`,
102102
PLAY_INSTRUCTIONS,
103103
`The list of numbers to be sorted can be edited; click on ${KEY_SORT} or hit return to load the new data.`,
104+
`The order of the input data can be changed with the radio buttons (below the data input; you may need to drag the "..." up to make this visible)`,
104105
],
105106
}];
106107

@@ -109,8 +110,9 @@ const radixSortInstructions = [{
109110
content: [
110111
`Click on ${KEY_CODE} on the right panel to show the code.`,
111112
PLAY_INSTRUCTIONS,
112-
`The list of numbers to be sorted can be edited; click on ${KEY_SORT} or hit return to load the new data.`,
113113
'Hover the mouse over an element of array A to display the value in binary (and base 4 for straight radix sort).',
114+
`The list of numbers to be sorted can be edited; click on ${KEY_SORT} or hit return to load the new data.`,
115+
`The order of the input data can be changed with the radio buttons (below the data input; you may need to drag the "..." up to make this visible)`,
114116
],
115117
}];
116118

@@ -120,7 +122,7 @@ const graphInstructions = [
120122
content: [
121123
`Click on ${KEY_CODE} at the top of the right-hand panel`,
122124
PLAY_INSTRUCTIONS,
123-
`The graph can be chosen (see below; default Graph 1 is shown initially)`,
125+
`The graph can be chosen (see below; default Graph 1 is shown initially unless the graph is specified via the URL)`,
124126
`Other algorithm parameters can be chosen below the
125127
${KEY_PROGRESS} bar; this will reset the animation to the start`,
126128
`Screen layout can be altered (depending on your browser/platform): the right and bottom panels can be enlarged or shrunk by dragging the ellipsis ("..."), and you can zoom in/out and drag elements in the animation panel`,
@@ -139,18 +141,15 @@ by dragging the "..." up temporarily`,
139141
`Edge weights (for weighted graph algorithms) can be toggled between Euclidean, Manhattan and as defined explicitly in the input.`,
140142
]
141143
},
144+
{
145+
title: `Note for transitive closure algorithm`,
146+
content: [`Each node is considered reachable from itself so the leading diagonal of the edge matrix contains all ones and cannot be edited.`]
147+
},
142148
];
143149

144-
const graphInstructionsTC = [{
145-
title: ' ',
146-
content: [
147-
`Click on ${KEY_CODE} on the right panel`,
148-
'Enter a graph in the edge matrix',
149-
`Click on ${KEY_LOAD} or hit return to load the data.`,
150-
PLAY_INSTRUCTIONS,
151-
'All nodes are SELF-REACHABLE => All diagonal elements are ones and NOT allowed to be edited.',
152-
],
153-
}];
150+
// XXX best just add TC note for this case
151+
const graphInstructionsTC =
152+
graphInstructions;
154153

155154
const unionFindInstructions = [{
156155
title: ' ',

‎src/algorithms/parameters/HSParam.js

Lines changed: 166 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,176 @@
1-
/* eslint-disable no-prototype-builtins */
2-
/* eslint-disable jsx-a11y/label-has-associated-control */
3-
import React, { useState, useContext, useEffect } from 'react';
4-
import { genRandNumList } from './helpers/ParamHelper';
1+
// Adapted from Quicksort - could rename a few things
2+
3+
/* eslint-disable no-unused-vars */
4+
import React, { useState, useEffect, useContext } from 'react';
5+
import FormControlLabel from '@mui/material/FormControlLabel';
6+
import Radio from '@mui/material/Radio';
7+
import { withStyles } from '@mui/styles';
8+
import { genRandNumList, quicksortPerfectPivotArray } from './helpers/ParamHelper';
9+
import ListParam from './helpers/ListParam';
10+
import '../../styles/Param.scss';
511

6-
import ListParam from './helpers/ListParam.js';
712
import PropTypes from 'prop-types'; // Import this for URL Param
813
import { withAlgorithmParams } from './helpers/urlHelpers' // Import this for URL Param
914

10-
import { URLContext } from '../../context/urlState.js';
11-
import '../../styles/Param.scss';
15+
import { URLContext } from '../../context/urlState';
16+
17+
18+
const DEFAULT_ARRAY_GENERATOR = genRandNumList.bind(null, 12, 1, 99);
19+
const DEFAULT_ARR = DEFAULT_ARRAY_GENERATOR();
20+
const MERGE_SORT = 'Heap Sort';
21+
const MERGE_SORT_EXAMPLE = 'Please follow the example provided: 0,1,2,3,4';
22+
const UNCHECKED = {
23+
random: false,
24+
sortedAsc: false,
25+
// bestCase: false,
26+
sortedDesc: false
27+
};
28+
29+
const BlueRadio = withStyles({
30+
root: {
31+
color: '#2289ff',
32+
'&$checked': {
33+
color: '#027aff',
34+
},
35+
},
36+
checked: {},
37+
// eslint-disable-next-line react/jsx-props-no-spreading
38+
})((props) => <Radio {...props} />)
39+
40+
function MergesortParam({ list }) {
41+
const [message, setMessage] = useState(null)
42+
43+
const [array, setArray] = useState(list || DEFAULT_ARR)
44+
const { setNodes } = useContext(URLContext)
45+
46+
const [QSCase, setQSCase] = useState({
47+
random: true,
48+
sortedAsc: false,
49+
// bestCase: false,
50+
sortedDesc: false
51+
});
52+
53+
useEffect(() => {
54+
setNodes(array);
55+
}, [array]);
56+
57+
// XXX best case definitely not needed; could skip choice of cases
58+
// function for choosing the type of input
59+
const handleChange = (e) => {
60+
switch (e.target.name) {
61+
case 'sortedAsc':
62+
setArray([...array].sort(function (a, b) {
63+
return (+a) - (+b)
64+
}));
65+
break;
66+
case 'sortedDesc':
67+
setArray([...array].sort(function (a, b) {
68+
return (+b) - (+a)
69+
}));
70+
break;
71+
case 'random':
72+
setArray(DEFAULT_ARRAY_GENERATOR());
73+
break;
74+
case 'bestCase':
75+
setArray(quicksortPerfectPivotArray(Math.floor(Math.random() * 10), 25 + (Math.floor(Math.random() * 25))));
76+
break;
77+
default:
78+
break;
79+
}
80+
81+
setQSCase({ ...UNCHECKED, [e.target.name]: true })
82+
83+
}
84+
85+
useEffect(
86+
() => {
87+
document.getElementById('startBtnGrp').click();
88+
},
89+
[QSCase],
90+
);
1291

13-
// export const DEFAULT_NODES = genRandNumList(12, 1, 50);
14-
const DEFAULT_NODES = genRandNumList(10, 1, 100);
15-
const HEAP_SORT = 'Heap Sort';
16-
const HEAP_SORT_EXAMPLE = 'Please follow the example provided: 0,1,2,3,4';
17-
18-
19-
function HeapsortParam({ list }) { // add the parsing parameters for your algorithm: alg, mode, ...params
20-
// const { alg, mode, param } = useUrlParams();
21-
// const {list, value, xyCoords, edgeWeights, start, end, string, pattern, union} = parseParam(param);
22-
// const { alg, mode, list } = withAlgorithmParams(HeapsortParam);
23-
// const DEFAULT_NODES = genRandNumList.bind(null, 12, 1, 50); // Define the default list of nodes
24-
const [localNodes, setLocalNodes] = useState(list || DEFAULT_NODES);
25-
const [message, setMessage] = useState(null);
26-
const { setNodes } = useContext(URLContext);
27-
28-
useEffect(() => {
29-
setNodes(localNodes);
30-
}, [localNodes]);
31-
32-
return (
33-
<>
34-
<div className="form">
35-
<ListParam
36-
name="heapSort"
37-
buttonName="Sort"
38-
mode="sort"
39-
formClassName="formLeft"
40-
DEFAULT_VAL={localNodes}
41-
SET_VAL={setLocalNodes}
42-
ALGORITHM_NAME={HEAP_SORT}
43-
EXAMPLE={HEAP_SORT_EXAMPLE}
44-
setMessage={setMessage}
45-
/>
46-
</div>
47-
{message}
48-
</>
49-
);
92+
return (
93+
<>
94+
<div className="form">
95+
<ListParam
96+
name="heapSort"
97+
buttonName="Reset"
98+
mode="sort"
99+
formClassName="formLeft"
100+
DEFAULT_VAL={array}
101+
SET_VAL={setArray}
102+
REFRESH_FUNCTION={
103+
(() => {
104+
if (QSCase.sortedAsc) {
105+
return () => {
106+
return (DEFAULT_ARRAY_GENERATOR().sort(function (a, b) {
107+
return (+a) - (+b)
108+
}));
109+
}
110+
}
111+
else if (QSCase.sortedDesc) {
112+
return () => {
113+
return (DEFAULT_ARRAY_GENERATOR().sort(function (a, b) {
114+
return (+b) - (+a)
115+
}));
116+
}
117+
}
118+
else if (QSCase.bestCase) {
119+
return () => quicksortPerfectPivotArray(Math.floor(Math.random() * 10), 25 + (Math.floor(Math.random() * 25)));
120+
}
121+
})()
122+
}
123+
ALGORITHM_NAME={MERGE_SORT}
124+
EXAMPLE={MERGE_SORT_EXAMPLE}
125+
setMessage={setMessage}
126+
/>
127+
</div>
128+
<span className="generalText">Choose input format: &nbsp;&nbsp;</span>
129+
{/* create a checkbox for Random array elements */}
130+
<FormControlLabel
131+
control={
132+
<BlueRadio
133+
checked={QSCase.random}
134+
onChange={handleChange}
135+
name="random"
136+
/>
137+
}
138+
label="Random"
139+
className="checkbox"
140+
/>
141+
<FormControlLabel
142+
control={
143+
<BlueRadio
144+
checked={QSCase.sortedAsc}
145+
onChange={handleChange}
146+
name="sortedAsc"
147+
/>
148+
}
149+
label="Sorted (ascending)"
150+
className="checkbox"
151+
/>
152+
<FormControlLabel
153+
control={
154+
<BlueRadio
155+
checked={QSCase.sortedDesc}
156+
onChange={handleChange}
157+
name="sortedDesc"
158+
/>
159+
}
160+
label="Sorted (descending)"
161+
className="checkbox"
162+
/>
163+
{/* render success/error message */}
164+
{message}
165+
</>
166+
)
50167
}
51168

52169
// Define the prop types for URL Params
53-
HeapsortParam.propTypes = {
54-
mode: PropTypes.string,
55-
list: PropTypes.string
170+
MergesortParam.propTypes = {
171+
alg: PropTypes.string.isRequired,
172+
mode: PropTypes.string.isRequired,
173+
list: PropTypes.string.isRequired
56174
};
57175

58-
export default withAlgorithmParams(HeapsortParam); // Export with the wrapper for URL Params
176+
export default withAlgorithmParams(MergesortParam); // Export with the wrapper for URL Params

0 commit comments

Comments
 (0)