26 | TypeScript mode
27 |
28 |
29 |
51 |
52 |
59 |
60 | This is a specialization of the JavaScript mode.
61 |
62 |
--------------------------------------------------------------------------------
/dist-utility-files/server.js:
--------------------------------------------------------------------------------
1 | const express = require("express");
2 | const os = require('os');
3 | const path = require('path');
4 | const bodyParser = require('body-parser');
5 |
6 | const app = express();
7 |
8 | const port = process.env.PORT || 3000;
9 | /*
10 | To set a port other than 3000:
11 | in Unix:
12 |
13 | $ PORT=1234 node server.js
14 |
15 | in Windows:
16 |
17 | set PORT=1234
18 | node server.js
19 | */
20 |
21 | const ifaces = os.networkInterfaces();
22 |
23 | Object.keys(ifaces).forEach(function (ifname) {
24 | let alias = 0;
25 |
26 | ifaces[ifname].forEach(function (iface) {
27 | if ('IPv4' !== iface.family || iface.internal !== false) {
28 | // skip over internal (i.e. 127.0.0.1) and non-ipv4 addresses
29 | return;
30 | }
31 |
32 | if (alias >= 1) {
33 | // this single interface has multiple ipv4 addresses
34 | console.log(ifname + ':' + alias, iface.address);
35 | } else {
36 | // this interface has only one ipv4 adress
37 | console.log(ifname, iface.address);
38 | }
39 | ++alias;
40 | });
41 | });
42 |
43 | // parse application/x-www-form-urlencoded
44 | app.use(bodyParser.urlencoded({extended: false}));
45 |
46 | // parse application/json
47 | app.use(bodyParser.json());
48 |
49 | const frontendFolder = path.join(__dirname, 'dynamic-programming-visualization');
50 | // Point static path to frontend folder
51 | app.use(express.static(frontendFolder));
52 | console.log("Serving static from " + frontendFolder);
53 |
54 | // Catch all other routes and return the index file
55 | app.get('*', (req, res) => {
56 | res.sendFile(path.join(frontendFolder, 'index.html'));
57 | });
58 |
59 | app.listen(port, function () {
60 | console.log('listening on port ' + port);
61 | console.log('press Ctrl + C to shut down server');
62 | });
63 |
--------------------------------------------------------------------------------
/src/assets/problems/problem-directory.json:
--------------------------------------------------------------------------------
1 | {
2 | "version":"2019.8.8-master",
3 | "sections": [
4 | {
5 | "name": "Strings and Subsequences",
6 | "problems": [
7 | {
8 | "name": "Longest Increasing Subsequence",
9 | "id": "longest-increasing-subsequence"
10 | },
11 | {
12 | "name": "Longest Common Subsequence",
13 | "id": "longest-common-subsequence"
14 | },
15 | {
16 | "name": "Levenshtein Distance",
17 | "id": "levenshtein-distance"
18 | }
19 | ]
20 | },
21 | {
22 | "name": "Knapsack Variations",
23 | "problems": [
24 | {
25 | "name": "Knapsack With Repetition",
26 | "id": "knapsack-with-repetition"
27 | },
28 | {
29 | "name": "Knapsack Without Repetition",
30 | "id": "knapsack-without-repetition"
31 | }
32 | ]
33 | },
34 | {
35 | "name": "Intervals",
36 | "problems": [
37 | {
38 | "name": "Chain Matrix Multiplication",
39 | "id": "chain-matrix-multiplication"
40 | }
41 | ]
42 | },
43 | {
44 | "name": "Directed Acyclic Graphs",
45 | "problems": [
46 | {
47 | "name": "Shortest Path in DAG",
48 | "id": "shortest-path-in-dag"
49 | },
50 | {
51 | "name": "Longest Path in DAG",
52 | "id": "longest-path-in-dag"
53 | }
54 | ]
55 | }
56 | ]
57 | }
58 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "dynamic-programming-visualization",
3 | "version": "2019.8.8",
4 | "scripts": {
5 | "ng": "ng",
6 | "develop": "ng serve",
7 | "start": "cd dist && npm start",
8 | "postinstall": "npm run build && cd dist && npm install",
9 | "build": "ng build --prod && cp -r dist-utility-files/. dist",
10 | "messy-build": "ng build && cp -r dist-utility-files/. dist",
11 | "test": "ng test",
12 | "lint": "ng lint",
13 | "e2e": "ng e2e"
14 | },
15 | "private": true,
16 | "dependencies": {
17 | "@angular-devkit/build-angular": "~0.6.0",
18 | "@angular/animations": "^6.0.0",
19 | "@angular/cdk": "^6.0.0",
20 | "@angular/cli": "~6.0.0",
21 | "@angular/common": "^6.0.0",
22 | "@angular/compiler": "^6.0.0",
23 | "@angular/compiler-cli": "^6.0.0",
24 | "@angular/core": "^6.0.0",
25 | "@angular/forms": "^6.0.0",
26 | "@angular/http": "^6.0.0",
27 | "@angular/language-service": "^6.0.0",
28 | "@angular/material": "^6.0.0",
29 | "@angular/platform-browser": "^6.0.0",
30 | "@angular/platform-browser-dynamic": "^6.0.0",
31 | "@angular/router": "^6.0.0",
32 | "core-js": "^2.5.4",
33 | "hammerjs": "^2.0.8",
34 | "rxjs": "^6.0.0",
35 | "typescript": "~2.7.2",
36 | "zone.js": "^0.8.26"
37 | },
38 | "devDependencies": {
39 | "@types/jasmine": "~2.8.6",
40 | "@types/jasminewd2": "~2.0.3",
41 | "@types/node": "~8.9.4",
42 | "codelyzer": "~4.2.1",
43 | "jasmine-core": "~2.99.1",
44 | "jasmine-spec-reporter": "~4.2.1",
45 | "karma": "~1.7.1",
46 | "karma-chrome-launcher": "~2.2.0",
47 | "karma-coverage-istanbul-reporter": "~1.4.2",
48 | "karma-jasmine": "~1.1.1",
49 | "karma-jasmine-html-reporter": "^0.2.2",
50 | "protractor": "~5.3.0",
51 | "ts-node": "~5.0.1",
52 | "tslint": "~5.9.1"
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/src/assets/codemirror/languages/javascript/json-ld.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
29 | JSON-LD mode
30 |
31 |
32 |
61 |
62 |
70 |
71 | This is a specialization of the JavaScript mode.
72 |
73 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import {BrowserModule} from '@angular/platform-browser';
2 | import {NgModule} from '@angular/core';
3 |
4 | import 'hammerjs';
5 |
6 | import {AppComponent} from './app.component';
7 | import {SolveProblemComponent} from './solve-problem/solve-problem.component';
8 | import {RouterModule, Routes} from '@angular/router';
9 | import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
10 | import {FormsModule} from '@angular/forms';
11 | import {
12 | MatButtonModule,
13 | MatCardModule,
14 | MatCheckboxModule,
15 | MatExpansionModule,
16 | MatFormFieldModule,
17 | MatInputModule,
18 | MatSelectModule,
19 | MatDialogModule,
20 | MatTabsModule,
21 | MatProgressBarModule,
22 | MatSlideToggleModule,
23 | MatProgressSpinnerModule,
24 | MatTooltipModule
25 | } from '@angular/material';
26 | import {HttpClientModule} from '@angular/common/http';
27 | import {ConfirmationDialogComponent} from './dialogs/confirmation-dialog/confirmation-dialog.component';
28 | import {SelectProblemComponent} from './select-problem/select-problem.component';
29 | import {AnimationDialogComponent} from './dialogs/animation-dialog/animation-dialog.component';
30 |
31 | const routes: Routes = [
32 | {path: 'problem/:problem-name', component: SolveProblemComponent},
33 | {path: 'select-problem', component: SelectProblemComponent},
34 | {path: '**', redirectTo: 'select-problem', pathMatch: 'full'} // Default route
35 | ];
36 |
37 |
38 | @NgModule({
39 | declarations: [
40 | AppComponent,
41 | SolveProblemComponent,
42 | ConfirmationDialogComponent,
43 | AnimationDialogComponent,
44 | SelectProblemComponent
45 | ],
46 | imports: [
47 | BrowserModule,
48 | BrowserAnimationsModule,
49 | HttpClientModule,
50 | FormsModule,
51 | MatCardModule,
52 | MatFormFieldModule,
53 | MatInputModule,
54 | MatSelectModule,
55 | MatExpansionModule,
56 | MatTabsModule,
57 | MatButtonModule,
58 | MatCheckboxModule,
59 | MatSlideToggleModule,
60 | MatDialogModule,
61 | MatProgressBarModule,
62 | MatProgressSpinnerModule,
63 | MatTooltipModule,
64 | RouterModule.forRoot(routes)
65 | ],
66 | entryComponents: [
67 | ConfirmationDialogComponent,
68 | AnimationDialogComponent
69 | ],
70 | providers: [],
71 | bootstrap: [AppComponent]
72 | })
73 | export class AppModule {
74 | }
75 |
--------------------------------------------------------------------------------
/src/app/select-problem/select-problem.component.css:
--------------------------------------------------------------------------------
1 | .main-content-container {
2 | padding: 5px;
3 | }
4 |
5 | #main-title-div {
6 | text-align: center;
7 | margin-top: 5px;
8 | width: 100%;
9 | }
10 |
11 | .main-title-container {
12 | display: inline-block;
13 | }
14 |
15 | .main-title {
16 | font-weight: bold;
17 | margin: 0;
18 | display: inline-block;
19 | }
20 |
21 | .main-title-logo-span {
22 | word-space: nowrap;
23 | display: -moz-inline-stack;
24 | display: inline-block;
25 | vertical-align: top;
26 | }
27 |
28 | .logo {
29 | display: inline-block;
30 | float: left;
31 | width: 0.9em;
32 | height: 0.9em;
33 | position: relative;
34 | top: 2px;
35 | margin-right: 8px;
36 | }
37 |
38 | .subtitle-div-container {
39 | text-align: center;
40 | }
41 |
42 | .subtitle-div {
43 | display: inline-block;
44 | }
45 |
46 | .subtitle-div-section {
47 | margin-top: 8px;
48 | margin-bottom: 8px;
49 | display: inline-block;
50 | }
51 |
52 | .external-link {
53 | cursor: pointer;
54 | color: unset;
55 | }
56 |
57 | .subtitle-item {
58 | padding-left: 8px;
59 | padding-right: 8px;
60 | }
61 |
62 | .source-code-link {
63 | vertical-align: text-bottom;
64 | }
65 |
66 | .version-number {
67 | vertical-align: bottom;
68 | }
69 |
70 | .dark-mode-toggle {
71 | padding-top: 8px;
72 | }
73 |
74 | input {
75 | background-color: transparent;
76 | }
77 |
78 | #custom-problem-error-text {
79 | margin-top: 4px;
80 | }
81 |
82 | .mat-expansion-panel {
83 | margin: 0 !important;
84 | }
85 |
86 | .expanded-panel {
87 | margin-top: 10px !important;
88 | margin-bottom: 10px !important;
89 | }
90 |
91 | .problem-count-summary {
92 | margin-left: 8px;
93 | }
94 |
95 | .problem-file-version {
96 | margin-left: 2px;
97 | opacity: 0.5;
98 | }
99 |
100 | .section-title {
101 | font-weight: bold;
102 | margin-left: 5px;
103 | margin-top: 10px;
104 | margin-bottom: 5px;
105 | }
106 |
107 | .problem-link {
108 | cursor: pointer;
109 | font-weight: 600;
110 | padding: 10px;
111 | }
112 |
113 | .problem-link:hover {
114 | background-color: rgba(0.7, 0.7, 0.7, 0.1);
115 | }
116 |
117 | .section-separator {
118 | border-top-color: gray;
119 | }
120 |
121 | .custom-problem-card {
122 | margin: 10px;
123 | }
124 |
125 | .custom-problem-container {
126 | margin-left: 5px;
127 | }
128 |
129 | .progress-container {
130 | font-weight: normal;
131 | }
132 |
133 | .page-footer {
134 | display: flex;
135 | justify-content: center;
136 | }
137 |
--------------------------------------------------------------------------------
/src/app/dialogs/animation-dialog/animation-dialog.component.css:
--------------------------------------------------------------------------------
1 | .no-padding {
2 | padding: 0;
3 | }
4 |
5 | mat-card {
6 | padding: 5px;
7 | }
8 |
9 | .main-header {
10 | font-weight: bold;
11 | font-size: large;
12 | }
13 |
14 | .result-header {
15 | float: right;
16 | padding-top: 3px;
17 | padding-right: 3px;
18 | }
19 |
20 | .main-container {
21 | width: 75vw;
22 | max-height: 95vh;
23 | padding: 5px;
24 | overflow-y: auto;
25 | overflow-x: hidden;
26 | }
27 |
28 | .main-header-container {
29 | padding-bottom: 2px;
30 | }
31 |
32 | mat-expansion-panel-header {
33 | padding-left: 8px !important;
34 | height: 36px !important;
35 | }
36 |
37 | .section-card-header {
38 | padding-left: 3px;
39 | display: inline-block;
40 | width: 100%;
41 | }
42 |
43 | .slightly-bold-label {
44 | font-weight: 600;
45 | }
46 |
47 | .result-card {
48 | height: 36px;
49 | }
50 |
51 | .table-card {
52 | height: 100%;
53 | flex-grow: 1;
54 | }
55 |
56 | /*DP Table*/
57 |
58 | .dp-table {
59 | width: 100%;
60 | height: 100%;
61 | }
62 |
63 | .dp-tr {
64 | height: 5vw;
65 | }
66 |
67 | .dp-td {
68 | width: 5vw;
69 | height: 5vw;
70 | padding: 0;
71 | border: 1px solid #AAAAAA;
72 | text-align: center;
73 | }
74 |
75 | .dp-td:after {
76 | }
77 |
78 | .dp-table-data {
79 | position: absolute;
80 | /*top: 0;*/
81 | /*bottom: 0;*/
82 | /*left: 0;*/
83 | /*right: 0;*/
84 | height: 100%;
85 | }
86 |
87 | .glyphicon-stop {
88 | padding-bottom: 2px;
89 | padding-right: 2px;
90 | }
91 |
92 | .get-entry {
93 | color: #00c5ff;
94 | }
95 |
96 | .set-entry {
97 | color: #ff1744;
98 | }
99 |
100 | .get-animation {
101 | background-color: rgba(0, 197, 255, 0.25);
102 | }
103 |
104 | .set-animation {
105 | background-color: rgba(255, 23, 68, 0.25);
106 | }
107 |
108 | .frames-progress-bar {
109 | margin: 4px;
110 | }
111 |
112 | .controls-container {
113 | width: 100%;
114 | display: inline-block;
115 | }
116 |
117 | .controls-left-container {
118 | display: inline-block;
119 | vertical-align: top;
120 | }
121 |
122 | .controls-center-container {
123 | display: inline-block;
124 | text-align: center;
125 | vertical-align: top;
126 | }
127 |
128 | .controls-right-container {
129 | display: inline-block;
130 | text-align: right;
131 | vertical-align: top;
132 | }
133 |
134 | .operation-count-container {
135 | padding-left: 4px;
136 | }
137 |
138 | .operation-count {
139 | font-size: small;
140 | }
141 |
142 | .table-operation-count-container {
143 | display: inline-block;
144 | float: right;
145 | }
146 |
147 | .control-button {
148 | margin: 4px;
149 | }
150 |
151 | .control-glyphicon {
152 | padding-bottom: 4px;
153 | }
154 |
155 | .animation-speed-selector {
156 | padding-top: 8px;
157 | padding-right: 4px;
158 | }
159 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 |
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
39 |
40 | /** IE10 and IE11 requires the following for the Reflect API. */
41 | // import 'core-js/es6/reflect';
42 |
43 |
44 | /** Evergreen browsers require these. **/
45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
46 | import 'core-js/es7/reflect';
47 |
48 |
49 | /**
50 | * Web Animations `@angular/platform-browser/animations`
51 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
52 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
53 | **/
54 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
55 |
56 | /**
57 | * By default, zone.js will patch all possible macroTask and DomEvents
58 | * user can disable parts of macroTask/DomEvents patch by setting following flags
59 | */
60 |
61 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
62 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
63 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
64 |
65 | /*
66 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
67 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
68 | */
69 | // (window as any).__Zone_enable_cross_context_check = true;
70 |
71 | /***************************************************************************************************
72 | * Zone JS is required by default for Angular itself.
73 | */
74 | import 'zone.js/dist/zone'; // Included with Angular CLI.
75 |
76 |
77 |
78 | /***************************************************************************************************
79 | * APPLICATION IMPORTS
80 | */
81 |
--------------------------------------------------------------------------------
/src/app/providers/progress.service.ts:
--------------------------------------------------------------------------------
1 | import {Injectable} from '@angular/core';
2 |
3 | const PROBLEM_PREFIX = '__PROBLEM_PROGRESS_DATA__';
4 | const DARK_MODE_MARKER = '__DARK_MODE__';
5 |
6 | @Injectable({
7 | providedIn: 'root'
8 | })
9 | export class ProgressService {
10 |
11 | private hasLocalStorage;
12 |
13 | constructor() {
14 | const component = this;
15 | component.hasLocalStorage = typeof (Storage) !== 'undefined';
16 | }
17 |
18 | getProblemProgressObjectSetIfNotExists(problemId: string, defaultValue) {
19 | const component = this;
20 | return component.getItemSetIfNotExists(PROBLEM_PREFIX + problemId, defaultValue);
21 | }
22 |
23 | getProblemProgressObjectNullIfNotExists(problemId: string) {
24 | const component = this;
25 | const key = PROBLEM_PREFIX + problemId;
26 | return component.hasItem(key) ? component.getItem(key) : null;
27 | }
28 |
29 | setProblemProgressObjectAsCompletedSetIfNotExists(problemId: string, solutionType: string, defaultValue) {
30 | const component = this;
31 | const key = PROBLEM_PREFIX + problemId;
32 | const currentProgress = component.getItemSetIfNotExists(key, defaultValue);
33 | currentProgress.hasSolvedSolutionTypes[solutionType] = true;
34 | component.setItem(key, currentProgress);
35 | }
36 |
37 | markProblemAsSolutionRevealedSetIfNotExists(problemId: string, defaultValue) {
38 | const component = this;
39 | const key = PROBLEM_PREFIX + problemId;
40 | const currentProgress = component.getItemSetIfNotExists(problemId, defaultValue);
41 | currentProgress.hasRevealedSolution = true;
42 | component.setItem(key, currentProgress);
43 | }
44 |
45 | getDarkModeStatus() {
46 | const component = this;
47 | return component.getItemSetIfNotExists(DARK_MODE_MARKER, false);
48 | }
49 |
50 | setDarkModeStatus(isDarkTheme: boolean) {
51 | const component = this;
52 | return component.setItem(DARK_MODE_MARKER, isDarkTheme);
53 | }
54 |
55 | public getHasLocalStorage(): boolean {
56 | return this.hasLocalStorage;
57 | }
58 |
59 | // Local storage wrapper functions
60 | private deleteItem(key: string): void {
61 | this.assertHasLocalStorage();
62 | localStorage.removeItem(key);
63 | }
64 |
65 | private setItem(key: string, value: any): void {
66 | this.assertHasLocalStorage();
67 | localStorage.setItem(key, JSON.stringify(value));
68 | }
69 |
70 | private hasItem(key: string): boolean {
71 | this.assertHasLocalStorage();
72 | return typeof localStorage[key] !== 'undefined';
73 | }
74 |
75 | private getItemSetIfNotExists(key: string, defaultValue: any): any {
76 | const component = this;
77 | component.assertHasLocalStorage();
78 | const exists = component.hasItem(key);
79 | if (exists) {
80 | return component.getItem(key);
81 | } else {
82 | component.setItem(key, defaultValue);
83 | return defaultValue;
84 | }
85 | }
86 |
87 | private getItem(key: string): any {
88 | this.assertHasLocalStorage();
89 | return JSON.parse(localStorage.getItem(key));
90 | }
91 |
92 | clearAll(): void {
93 | this.assertHasLocalStorage();
94 | localStorage.clear();
95 | }
96 |
97 | private assertHasLocalStorage(): void {
98 | if (!this.getHasLocalStorage()) {
99 | throw 'Local storage not available on browser';
100 | }
101 | }
102 | }
103 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": [
3 | "node_modules/codelyzer"
4 | ],
5 | "rules": {
6 | "arrow-return-shorthand": true,
7 | "callable-types": true,
8 | "class-name": true,
9 | "comment-format": [
10 | true,
11 | "check-space"
12 | ],
13 | "curly": true,
14 | "deprecation": {
15 | "severity": "warn"
16 | },
17 | "eofline": true,
18 | "forin": true,
19 | "import-blacklist": [
20 | true,
21 | "rxjs/Rx"
22 | ],
23 | "import-spacing": true,
24 | "indent": [
25 | true,
26 | "spaces"
27 | ],
28 | "interface-over-type-literal": true,
29 | "label-position": true,
30 | "max-line-length": [
31 | true,
32 | 140
33 | ],
34 | "member-access": false,
35 | "member-ordering": [
36 | true,
37 | {
38 | "order": [
39 | "static-field",
40 | "instance-field",
41 | "static-method",
42 | "instance-method"
43 | ]
44 | }
45 | ],
46 | "no-arg": true,
47 | "no-bitwise": true,
48 | "no-console": [
49 | true,
50 | "debug",
51 | "info",
52 | "time",
53 | "timeEnd",
54 | "trace"
55 | ],
56 | "no-construct": true,
57 | "no-debugger": true,
58 | "no-duplicate-super": true,
59 | "no-empty": false,
60 | "no-empty-interface": true,
61 | "no-eval": true,
62 | "no-inferrable-types": [
63 | true,
64 | "ignore-params"
65 | ],
66 | "no-misused-new": true,
67 | "no-non-null-assertion": true,
68 | "no-shadowed-variable": true,
69 | "no-string-literal": false,
70 | "no-string-throw": true,
71 | "no-switch-case-fall-through": true,
72 | "no-trailing-whitespace": true,
73 | "no-unnecessary-initializer": true,
74 | "no-unused-expression": true,
75 | "no-use-before-declare": true,
76 | "no-var-keyword": true,
77 | "object-literal-sort-keys": false,
78 | "one-line": [
79 | true,
80 | "check-open-brace",
81 | "check-catch",
82 | "check-else",
83 | "check-whitespace"
84 | ],
85 | "prefer-const": true,
86 | "quotemark": [
87 | true,
88 | "single"
89 | ],
90 | "radix": true,
91 | "semicolon": [
92 | true,
93 | "always"
94 | ],
95 | "triple-equals": [
96 | true,
97 | "allow-null-check"
98 | ],
99 | "typedef-whitespace": [
100 | true,
101 | {
102 | "call-signature": "nospace",
103 | "index-signature": "nospace",
104 | "parameter": "nospace",
105 | "property-declaration": "nospace",
106 | "variable-declaration": "nospace"
107 | }
108 | ],
109 | "unified-signatures": true,
110 | "variable-name": false,
111 | "whitespace": [
112 | true,
113 | "check-branch",
114 | "check-decl",
115 | "check-operator",
116 | "check-separator",
117 | "check-type"
118 | ],
119 | "no-output-on-prefix": true,
120 | "use-input-property-decorator": true,
121 | "use-output-property-decorator": true,
122 | "use-host-property-decorator": true,
123 | "no-input-rename": true,
124 | "no-output-rename": true,
125 | "use-life-cycle-interface": true,
126 | "use-pipe-transform-interface": true,
127 | "component-class-suffix": true,
128 | "directive-class-suffix": true
129 | }
130 | }
131 |
--------------------------------------------------------------------------------
/src/app/solve-problem/solve-problem.component.css:
--------------------------------------------------------------------------------
1 | .row.no-gutter {
2 | margin-left: 0;
3 | margin-right: 0;
4 | }
5 |
6 | .loading-spinner-container {
7 | height: 100vh;
8 | width: 100vw;
9 | text-align: center;
10 | }
11 |
12 | .page-container {
13 | min-height: 100vh;
14 | /*width: 100vw;*/
15 | }
16 |
17 | .page-loading-spinner {
18 | text-align: center;
19 | margin: 25vh auto auto;
20 | }
21 |
22 | .main-header-card {
23 | padding: 5px;
24 | }
25 |
26 | .home-button {
27 | vertical-align: top;
28 | margin: 0;
29 | padding-top: 4px;
30 | padding-left: 4px;
31 | cursor: pointer;
32 | }
33 |
34 | .main-header {
35 | font-weight: bold;
36 | font-size: x-large;
37 | margin: 0;
38 | }
39 |
40 | .dark-mode-toggle {
41 | display: inline-block;
42 | float: right;
43 | padding-right: 6px;
44 | }
45 |
46 | .section-header {
47 | font-weight: bold;
48 | font-size: large;
49 | }
50 |
51 | .row.no-gutter [class*='col-']:not(:first-child),
52 | .row.no-gutter [class*='col-']:not(:last-child) {
53 | padding-right: 0;
54 | padding-left: 0;
55 | }
56 |
57 | #code-card {
58 | padding: 5px;
59 | }
60 |
61 | .code {
62 | font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, sans-serif;
63 | }
64 |
65 | .default-entry-container {
66 | padding-bottom: 10px;
67 | }
68 |
69 | .initialization-textarea-container {
70 | margin-bottom: 10px;
71 | }
72 |
73 | /*.input-field-very-small {*/
74 | /*width: 20px;*/
75 | /*}*/
76 |
77 | /*.input-field-small {*/
78 | /*width: 100px;*/
79 | /*}*/
80 |
81 | .set-next-value-container {
82 | width: calc(100% - 45px);
83 | max-width: calc(100% - 45px);
84 | min-width: calc(100% - 45px);
85 | float: right;
86 | }
87 |
88 | #return-value-textarea-outer-container {
89 | width: 100%;
90 | display: inline-block;
91 | }
92 |
93 | .initialization-textarea-container, #return-value-textarea-container, .code-editor {
94 | width: calc(100% - 8px);
95 | max-width: calc(100% - 8px);
96 | min-width: calc(100% - 8px);
97 | float: right;
98 | display: inline-block;
99 | }
100 |
101 | #set-next-entry-textarea-container {
102 | width: 90%;
103 | max-width: 90%;
104 | min-width: 90%;
105 | }
106 |
107 | .full-width {
108 | width: 100%;
109 | max-width: 100%;
110 | min-width: 100%;
111 | }
112 |
113 | .problem-definition-panel {
114 | padding-bottom: 5px;
115 | }
116 |
117 | .half-page-card {
118 | margin-top: 0;
119 | }
120 |
121 | .custom-input-helper-text {
122 | margin-top: 8px;
123 | margin-bottom: 8px;
124 | }
125 |
126 | .custom-input-field {
127 | width: 100%;
128 | }
129 |
130 | pre {
131 | background-color: unset;
132 | color: unset;
133 | }
134 |
135 | .input-display {
136 | padding-top: 8px;
137 | }
138 |
139 | /*DP Table*/
140 |
141 | .dp-table {
142 | width: 90%;
143 | }
144 |
145 | .dp-tr {
146 | height: 5vw;
147 | }
148 |
149 | .dp-td {
150 | width: 5vw;
151 | height: 5vw;
152 | padding: 0;
153 | border: 1px solid #AAAAAA;
154 | text-align: center;
155 | }
156 |
157 | .dp-td:after {
158 | }
159 |
160 | .dp-table-data {
161 | position: absolute;
162 | /*top: 0;*/
163 | /*bottom: 0;*/
164 | /*left: 0;*/
165 | /*right: 0;*/
166 | height: 100%;
167 | }
168 |
169 | .slightly-bold-label {
170 | font-weight: 600;
171 | }
172 |
173 | .view-animation-button, .view-input-json-toggle {
174 | float: right;
175 | display: inline-block;
176 | vertical-align: top;
177 | }
178 |
179 | .play-animation-glyphicon {
180 | font-size: smaller;
181 | padding-right: 2px;
182 | vertical-align: top;
183 | position: relative;
184 | padding-bottom: 4px;
185 | }
186 |
187 | .transpose-button {
188 | margin: 5px;
189 | }
190 |
191 | .transpose-text {
192 | cursor: pointer;
193 | text-underline: none;
194 | }
195 |
196 | .run-tests-button {
197 | font-size: large;
198 | padding-bottom: 4px;
199 | padding-right: 6px;
200 | }
201 |
202 | #reveal-solution-button {
203 | margin-left: 10px;
204 | float: right;
205 | }
206 |
207 | .correct-result-but-different-table-text {
208 |
209 | }
210 |
211 | .test-result-label {
212 | display: inline;
213 | vertical-align: middle;
214 | }
215 |
216 | .glyphicon-time {
217 | padding-right: 4px;
218 | }
219 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Dynamic Programming Visualization
2 |
3 | [**dp.debkbanerji.com**](https://dp.debkbanerji.com)
4 |
5 | In browser visualization for dynamic programming algorithms
6 |
7 | ## Deployed Version
8 |
9 | A deployed version of the master branch can be found at [dp.debkbanerji.com](https://dp.debkbanerji.com). Note that this is the master version and is therefore subject to change whenever there are changes to the source code or problems and so it is good to be aware of its volatile nature. Also, it may not have 100% uptime. If you need a more stable, reliable version of the application, please see the distribution section of this document.
10 |
11 | ## Creating a Problem
12 |
13 | If you'd like to create your own problem, it is recommended that you modify one of the `.dp.json` problem files in `src/assets/problems`. The field names should be pretty self explanatory. Note that every problem must have bottom up code defined, but a top down solution is optional - if top down code is not included, this option will not be shown to the user.
14 |
15 | Problems may also optionally have a more detailed solution in addition to the default result (for example, the subsequence itself in addition to the length of the subsequence for the longest increasing subsequence problem). In this case, the `solution` field in `output` must also be defined alongside the necessary code. Note that if you're also allowing for top down code, you must also create a detailed version of the top down code for finding the full solution. (For a total of 4 different versions of the problem)
16 |
17 | It's nice to have a good variety of test cases, in order to cover edge cases. A large number of test cases also helps with debugging as well as making sure a bad solution doesn't pass all test cases. Also, make sure none of your tet cases are very large, since those aren't always useful, they don't display well and the application actually has to process each test case, often multiple times.
18 |
19 | Note that only the input of each test case is defined - the output is generated automatically based on your provided code, so make sure it's correct. (and your inputs are valid) One of the reasons for this is that it is extremely tedious to manually step through large inputs and lay out the expected outputs. Another is that the application needs to actually run the provided code in order to generate the corresponding animation.
20 |
21 | You can test the problem you've created by using the custom problem section of the application's home page. If there is an issue with your problem, it is recommended you first compare it with one of the existing problems. If this does not fix your issue, try running the app locally and stepping through the source code. (It is much more difficult to pinpoint the lines that are causing issues in the built version of the application)
22 |
23 | ## Contributing a Problem
24 |
25 | If you want to contribute a problem you've created to the application, add the problem's `.dp.json` file to `src/assets/problems` and modify the `sections` field within `src\assets/problems/problem-directory.json`. Then, make a pull request on the GitHub Page. Make sure to test the problem before submitting it.
26 |
27 | ## Starting a Development Server
28 |
29 | You'll first need to install `node.js` and `npm`. Then, run `npm install` in the source code directory followed `npm run develop` and navigate to `localhost:4200` to begin development
30 |
31 | ## Building the app
32 |
33 | Run `npm run build` to build the app. The built app can be found within `dist`. The main app itself consists entirely of static frontend files. If you only want those (without the basic server stuff) you can just grab the files within `dist/dynamic-programming-visualization`
34 |
35 | ## Distribution
36 |
37 | You may want to build and distribute a version of this software for educational purposes, likely with a modified problem set (you can do this while leaving the rest of the code untouched by modifying the problems and problem directory within `assets/problems`). If you choose to do this, it is highly recommended that you build the app using the instructions outlined above and deploy the static files to your server, with a different version defined in `assets/problems/problem-directory.json`, removing `-master` from the version string, so users are aware that this is not the master version of the problem file. If you choose to do this, please do not modify the section of the page crediting the original author(s). Also, note that any problems distributed with the master version of this application are publicly available alongside the source code on its GitHub page. Finally, be aware that this software is designed purely as a learning tool and so should not be used to evaluate students.
38 |
--------------------------------------------------------------------------------
/src/assets/codemirror/languages/javascript/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
29 | JavaScript mode
30 |
31 |
32 |
81 |
82 |
90 |
91 |
92 | JavaScript mode supports several configuration options:
93 |
94 | json which will set the mode to expect JSON
95 | data rather than a JavaScript program.jsonld which will set the mode to expect
97 | JSON-LD linked data rather
98 | than a JavaScript program (demo).typescript which will activate additional
100 | syntax highlighting and some other things for TypeScript code
101 | (demo).statementIndent which (given a number) will
103 | determine the amount of indentation to use for statements
104 | continued on a new line.wordCharacters, a regexp that indicates which
106 | characters should be considered part of an identifier.
107 | Defaults to /[\w$]/, which does not handle
108 | non-ASCII identifiers. Can be set to something more elaborate
109 | to improve Unicode support.
111 |
112 |
113 | MIME types defined: text/javascript, application/json, application/ld+json, text/typescript, application/typescript.
114 |
115 |
--------------------------------------------------------------------------------
/src/assets/problems/chain-matrix-multiplication.dp.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Chain Matrix Multiplication",
3 | "problem-statement": "Suppose you are given a sequence (chain) 
8 | Dynamic
9 |
10 |
11 | Programming Visualization
12 |
13 |