Under Dynamic Programming under Uncategorized, the max_subarray tab is not visible. If we stretch the Editor left a little bit, it becomes visible. This becomes a problem when a category has more than a few programs. Their tabs get hidden.

We therefore need a way to notify the user that there may be more tabs to the right, which are hidden. A suitable way would be to give a scrolling feature so the user knows that they can scroll to the right and see more visualizations under that category.

script.js uses eval () to execute code from data.js & code.js. If a user intentionally or un-intentionally creates a variable which is being used by our script.js, that variable gets overwritten.

Eg- In the Data Editor, create variable like:

codeEditor = "hello world";

Now try running the visualization. The error toast appears because our script cannot find codeEditor.getValue property. (Notice line 11 of the Data Editor)

Here, try this one more in the Data Editor:

dataEditor = "Hello world";  //you will not be able to write "hello world"

This is even more damaging. See the effect & you'll understand it.

(See js/script.js line 196) I'm working on a solution for this. Let me know what you think.

fs.js:143 throw err; ^

Error: ENOENT: no such file or directory, scandir '/home/git/algorithm-visualizer/src/backend/public/algorithms' at Object.fs.readdirSync (fs.js:893:3) at listFiles (webpack:///./src/backend/common/util.js?:64:28) at listDirectories (webpack:///./src/backend/common/util.js?:70:10) at Hierarchy.refresh (webpack:///./src/backend/models/Hierarchy.js?:42:51) at new Hierarchy (webpack:///./src/backend/models/Hierarchy.js?:34:10) at Object.eval (webpack:///./src/backend/common/hierarchy.js?:16:17) at eval (webpack:///./src/backend/common/hierarchy.js?:19:30) at Object../src/backend/common/hierarchy.js (/home/git/algorithm-visualizer/build/backend/index.js:154:1) at webpack_require (/home/git/algorithm-visualizer/build/backend/index.js:30:30) at eval (webpack:///./src/backend/controllers/algorithms.js?:21:18) at Object../src/backend/controllers/algorithms.js (/home/git/algorithm-visualizer/build/backend/index.js:190:1) at webpack_require (/home/git/algorithm-visualizer/build/backend/index.js:30:30) at eval (webpack:///./src/backend/controllers/index.js?:16:19) at Object../src/backend/controllers/index.js (/home/git/algorithm-visualizer/build/backend/index.js:214:1) at webpack_require (/home/git/algorithm-visualizer/build/backend/index.js:30:30) at eval (webpack:///./src/backend/index.js?:25:20)

I think we should make the arguments to each tracer API explicit. For example, this:

var G = WeightedUndirectedGraph.random(5, 1, 1, 9);

Is confusing to the user: "What the heck do those numbers mean?" "Oh yeah, I know what they mean but what's their order?" "Why do I even bother anymoreeeeeeeee" 😄

Tracers should be changed to accept an options object with each property explicitly named. This will make things much clearer:

var G = WeightedUndirectedGraph.random({
    N: 5,
    ratio: 1, 
    min: 1, 
    max: 9
});

I also think we might need to change the names of individual parameters because, unless you're familiar with the code base, they don't tell you much. Perhaps something like this might work:

var G = WeightedUndirectedGraph.random({
    nodeCount: 5,
    pathRatio: 1, 
    minVal: 1, 
    maxVal: 9
});

Not suggesting these particular names but more descriptive names would definitely be useful.

Is it possible to use more than 1 tracer for a single visualization? I'd like to use one for Directed Graph and another for 1D Array to display the progress. I tried a lot of things but it doesn't seem to be working.

Does the current implementation allow it?

The number of visualizations is growing fast. Eventually, we'll face 2 problems:

1. Users will have a tough time finding a particular visualization (and determining if it exists at all) because they may not be able to guess the right category to look under. For instance, Longest Common Subsequence could come under String as well as under DP. A smoother way would be to just type in the algorithm in search bar and poof! you have it
2. Anybody who wants to contribute a new visual will first have to determine whether a particular algo/DS already exists or not. This too becomes frustrating once we have too many visuals and no search bar to quickly filter.

I've started working on a search bar feature. Simple looking Opinions?

In the screenshot below, it seems plausible to combine line 19 (tracer initialization) and line 24 (tracer.set()) into one concise line, e.g., const tracer = new GraphTracer(G).directed(true).weighted();.

Is there any side effect with this approach?

The node-sass version is 4.12 and it's not compatible to latest node and npm. Please update dependencies and adapt to latest node. For now, in node 16.9.1 and npm 7.24. It will throw these error:

    ~/W/algorithm-visualizer    master !2 ?1  npm install            ✔ 
npm WARN deprecated [email protected]: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm ERR! code 1
npm ERR! path /home/×/WebProjects/algorithm-visualizer/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js
npm ERR! Building: /usr/bin/node /home/×/WebProjects/algorithm-visualizer/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   '/usr/bin/node',
npm ERR! gyp verb cli   '/home/×/WebProjects/algorithm-visualizer/node_modules/node-gyp/bin/node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | linux | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (/home/×/WebProjects/algorithm-visualizer/node_modules/which/which.js:13:12)
npm ERR! gyp verb `which` failed     at F (/home/×/WebProjects/algorithm-visualizer/node_modules/which/which.js:68:19)
npm ERR! gyp verb `which` failed     at E (/home/×/WebProjects/algorithm-visualizer/node_modules/which/which.js:80:29)
npm ERR! gyp verb `which` failed     at /home/×/WebProjects/algorithm-visualizer/node_modules/which/which.js:89:16
npm ERR! gyp verb `which` failed     at /home/×/WebProjects/algorithm-visualizer/node_modules/isexe/index.js:42:5
npm ERR! gyp verb `which` failed     at /home/×/WebProjects/algorithm-visualizer/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp verb `which` failed  python2 Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (/home/×/WebProjects/algorithm-visualizer/node_modules/which/which.js:13:12)
npm ERR! gyp verb `which` failed     at F (/home/×/WebProjects/algorithm-visualizer/node_modules/which/which.js:68:19)
npm ERR! gyp verb `which` failed     at E (/home/×/WebProjects/algorithm-visualizer/node_modules/which/which.js:80:29)
npm ERR! gyp verb `which` failed     at /home/×/WebProjects/algorithm-visualizer/node_modules/which/which.js:89:16
npm ERR! gyp verb `which` failed     at /home/×/WebProjects/algorithm-visualizer/node_modules/isexe/index.js:42:5
npm ERR! gyp verb `which` failed     at /home/×/WebProjects/algorithm-visualizer/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb `which` succeeded python /usr/bin/python
npm ERR! gyp ERR! configure error 
npm ERR! gyp ERR! stack Error: Command failed: /usr/bin/python -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack   File "<string>", line 1
npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack                       ^
npm ERR! gyp ERR! stack SyntaxError: invalid syntax
npm ERR! gyp ERR! stack 
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:397:12)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:394:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1064:16)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
npm ERR! gyp ERR! System Linux 5.14.2-1-MANJARO
npm ERR! gyp ERR! command "/usr/bin/node" "/home/×/WebProjects/algorithm-visualizer/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /home/×/WebProjects/algorithm-visualizer/node_modules/node-sass
npm ERR! gyp ERR! node -v v16.9.1
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok 
npm ERR! Build failed with error code: 1

Hi,

I am trying to run algorithm-visualizer locally, but I am not very expert in running Node.js applications. So, it would be of great help for me if the local deployment process would be documented. Here's what I have tried to do, noting that I get an error at the end.

1. I have cloned the project and cd into the directory: git clone https://github.com/algorithm-visualizer/algorithm-visualizer.git && cd algorithm-visualizer

2. I use nvm to manage my Node.js installation. I have done npm install and the npm run build (see the full log)

3. I run ./bin/www (see the full log)

Finally I get this error:

/home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/src/backend/public/tracers/bin/build:1483
  languages[LANG].build().catch(function () {
                  ^

TypeError: Cannot read property 'build' of undefined
    at Object.<anonymous> (/home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/src/backend/public/tracers/bin/build:1483:19)
    at __webpack_require__ (/home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/src/backend/public/tracers/bin/build:21:30)
    at Object.defineProperty.value (/home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/src/backend/public/tracers/bin/build:85:18)
    at Object.<anonymous> (/home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/src/backend/public/tracers/bin/build:88:10)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Function.Module.runMain (module.js:684:10)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3
Unhandled rejection Error: npm WARN deprecated [email protected]: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update! 
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

clean-webpack-plugin: /home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/src/backend/public/tracers/bin has been removed.
/home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/src/backend/public/tracers/bin/build:1483
  languages[LANG].build().catch(function () {
                  ^

TypeError: Cannot read property 'build' of undefined
    at Object.<anonymous> (/home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/src/backend/public/tracers/bin/build:1483:19)
    at __webpack_require__ (/home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/src/backend/public/tracers/bin/build:21:30)
    at Object.defineProperty.value (/home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/src/backend/public/tracers/bin/build:85:18)
    at Object.<anonymous> (/home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/src/backend/public/tracers/bin/build:88:10)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Function.Module.runMain (module.js:684:10)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3

    at /home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/build/backend/index.js:1:6251
    at ChildProcess.exithandler (child_process.js:282:5)
    at emitTwo (events.js:126:13)
    at ChildProcess.emit (events.js:214:7)
    at maybeClose (internal/child_process.js:925:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)

If I go to http://localhost:8080 tehe interface is there, but it does not run, for example I get this:

Thanks for the great project and thanks in advance for your help.

I was looking into the code to add several more features, but I found it quite messy overall. Especially, CSS and Tracer parts were horrible as they were written not long after I began web programming. The readability got much better after @nem035 thankfully rewrote everything in ES6 (#48) about 2 years ago. (Already!) I believe migrating to React.js will do even more. I will be working on rewriting everything in the combination of React.js + SASS + Webpack to make the code more comprehensible and modularized. Several changes to UX/UI and Tracer will be followed.

I think it would be useful to have Latex renderings of the space and time complexities when describing the algorithms. Right now its just being rendered with HTML tags. We could potentially use MathJax - Github, MathJax - Website.

The library would provide a cleaner rendering of the typical asymptotic notations. Also the creator would be able to provide proofs or more deeper explanations of space and time complexities.

Thoughts?

Edit: PR #209

Bumps express from 4.17.1 to 4.18.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps qs from 6.5.2 to 6.5.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps loader-utils to 1.4.2 and updates ancestor dependency react-scripts. These dependencies need to be updated together.

Updates loader-utils from 1.2.3 to 1.4.2

Updates react-scripts from 3.0.1 to 5.0.1

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.