diff --git a/.htmlhintrc b/.htmlhintrc
new file mode 100644
index 0000000000000000000000000000000000000000..19115c1c25ab059dee0544148e5b8d088533ce9b
--- /dev/null
+++ b/.htmlhintrc
@@ -0,0 +1,12 @@
+{
+ "doctype-first": false,
+ "tagname-lowercase": true,
+ "attr-lowercase": false,
+ "attr-value-double-quotes": true,
+ "inline-style-disabled": true,
+ "inline-script-disabled": true,
+ "space-tab-mixed-disabled": true,
+ "style-disabled": true,
+ "attr-no-duplication": true,
+ "tagname-lowercase": true
+}
diff --git a/package-lock.json b/package-lock.json
index 84760f2dce6660614a256752110dc959a0f931bd..01035eb0c17eee0b373b49a5e84b0fee8bd358fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1248,6 +1248,32 @@
"to-fast-properties": "^2.0.0"
}
},
+ "@fortawesome/angular-fontawesome": {
+ "version": "0.6.1",
+ "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.6.1.tgz",
+ "integrity": "sha512-ARQjtRuT+ZskzJDJKPwuiGO3+7nS0iyNLU/uHVJHfG4LwGJxwVIGldwg1SU957sra0Z0OtWEajHMhiS4vB9LwQ=="
+ },
+ "@fortawesome/fontawesome-common-types": {
+ "version": "0.2.28",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz",
+ "integrity": "sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg=="
+ },
+ "@fortawesome/fontawesome-svg-core": {
+ "version": "1.2.28",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz",
+ "integrity": "sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==",
+ "requires": {
+ "@fortawesome/fontawesome-common-types": "^0.2.28"
+ }
+ },
+ "@fortawesome/free-solid-svg-icons": {
+ "version": "5.13.0",
+ "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.0.tgz",
+ "integrity": "sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg==",
+ "requires": {
+ "@fortawesome/fontawesome-common-types": "^0.2.28"
+ }
+ },
"@istanbuljs/schema": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz",
@@ -2671,6 +2697,17 @@
"integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
"dev": true
},
+ "cli": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/cli/-/cli-1.0.1.tgz",
+ "integrity": "sha1-IoF1NPJL+klQw01TLUjsvGIbjBQ=",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "exit": "0.1.2",
+ "glob": "^7.1.1"
+ }
+ },
"cli-cursor": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
@@ -3403,6 +3440,17 @@
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
"dev": true
},
+ "csslint": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/csslint/-/csslint-1.0.5.tgz",
+ "integrity": "sha1-Gcw+2jIhYP0/cjKvHLKjYOiYouk=",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "clone": "~2.1.0",
+ "parserlib": "~1.1.1"
+ }
+ },
"cssnano": {
"version": "4.1.10",
"resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.10.tgz",
@@ -3546,6 +3594,13 @@
"integrity": "sha512-bYQuGLeFxhkxNOF3rcMtiZxvCBAquGzZm6oWA1oZ0g2THUzivaRhv8uOhdr19LmoobSOLoIAxeUK2RdbM8IFTA==",
"dev": true
},
+ "date-now": {
+ "version": "0.1.4",
+ "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
+ "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=",
+ "dev": true,
+ "optional": true
+ },
"debug": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@@ -3875,6 +3930,16 @@
"integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
"dev": true
},
+ "domhandler": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.3.0.tgz",
+ "integrity": "sha1-LeWaCCLVAn+r/28DLCsloqir5zg=",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "domelementtype": "1"
+ }
+ },
"domutils": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
@@ -4915,6 +4980,42 @@
"path-is-absolute": "^1.0.0"
}
},
+ "glob-base": {
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz",
+ "integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=",
+ "dev": true,
+ "requires": {
+ "glob-parent": "^2.0.0",
+ "is-glob": "^2.0.0"
+ },
+ "dependencies": {
+ "glob-parent": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
+ "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
+ "dev": true,
+ "requires": {
+ "is-glob": "^2.0.0"
+ }
+ },
+ "is-extglob": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+ "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+ "dev": true
+ },
+ "is-glob": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+ "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+ "dev": true,
+ "requires": {
+ "is-extglob": "^1.0.0"
+ }
+ }
+ }
+ },
"glob-parent": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
@@ -5190,6 +5291,167 @@
"integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
"dev": true
},
+ "htmlhint": {
+ "version": "0.11.0",
+ "resolved": "https://registry.npmjs.org/htmlhint/-/htmlhint-0.11.0.tgz",
+ "integrity": "sha512-uXuRyVhQa0HlNmZg5LJ1BRJvRq5f7IJL/34tItHhZr9re15pwaqAuLUAIcqtwd1bLUCE++7HVPtR+NSReFW0iA==",
+ "dev": true,
+ "requires": {
+ "async": "2.6.1",
+ "colors": "1.3.2",
+ "commander": "2.17.1",
+ "csslint": "^1.0.5",
+ "glob": "7.1.3",
+ "jshint": "^2.9.6",
+ "parse-glob": "3.0.4",
+ "path-parse": "1.0.6",
+ "request": "2.88.0",
+ "strip-json-comments": "2.0.1",
+ "xml": "1.0.1"
+ },
+ "dependencies": {
+ "async": {
+ "version": "2.6.1",
+ "resolved": "https://registry.npmjs.org/async/-/async-2.6.1.tgz",
+ "integrity": "sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==",
+ "dev": true,
+ "requires": {
+ "lodash": "^4.17.10"
+ }
+ },
+ "colors": {
+ "version": "1.3.2",
+ "resolved": "https://registry.npmjs.org/colors/-/colors-1.3.2.tgz",
+ "integrity": "sha512-rhP0JSBGYvpcNQj4s5AdShMeE5ahMop96cTeDl/v9qQQm2fYClE2QXZRi8wLzc+GmXSxdIqqbOIAhyObEXDbfQ==",
+ "dev": true
+ },
+ "commander": {
+ "version": "2.17.1",
+ "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
+ "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==",
+ "dev": true
+ },
+ "glob": {
+ "version": "7.1.3",
+ "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
+ "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
+ "dev": true,
+ "requires": {
+ "fs.realpath": "^1.0.0",
+ "inflight": "^1.0.4",
+ "inherits": "2",
+ "minimatch": "^3.0.4",
+ "once": "^1.3.0",
+ "path-is-absolute": "^1.0.0"
+ }
+ },
+ "punycode": {
+ "version": "1.4.1",
+ "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+ "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
+ "dev": true
+ },
+ "request": {
+ "version": "2.88.0",
+ "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
+ "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
+ "dev": true,
+ "requires": {
+ "aws-sign2": "~0.7.0",
+ "aws4": "^1.8.0",
+ "caseless": "~0.12.0",
+ "combined-stream": "~1.0.6",
+ "extend": "~3.0.2",
+ "forever-agent": "~0.6.1",
+ "form-data": "~2.3.2",
+ "har-validator": "~5.1.0",
+ "http-signature": "~1.2.0",
+ "is-typedarray": "~1.0.0",
+ "isstream": "~0.1.2",
+ "json-stringify-safe": "~5.0.1",
+ "mime-types": "~2.1.19",
+ "oauth-sign": "~0.9.0",
+ "performance-now": "^2.1.0",
+ "qs": "~6.5.2",
+ "safe-buffer": "^5.1.2",
+ "tough-cookie": "~2.4.3",
+ "tunnel-agent": "^0.6.0",
+ "uuid": "^3.3.2"
+ }
+ },
+ "tough-cookie": {
+ "version": "2.4.3",
+ "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
+ "integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==",
+ "dev": true,
+ "requires": {
+ "psl": "^1.1.24",
+ "punycode": "^1.4.1"
+ }
+ }
+ }
+ },
+ "htmlparser2": {
+ "version": "3.8.3",
+ "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.8.3.tgz",
+ "integrity": "sha1-mWwosZFRaovoZQGn15dX5ccMEGg=",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "domelementtype": "1",
+ "domhandler": "2.3",
+ "domutils": "1.5",
+ "entities": "1.0",
+ "readable-stream": "1.1"
+ },
+ "dependencies": {
+ "domutils": {
+ "version": "1.5.1",
+ "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
+ "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "dom-serializer": "0",
+ "domelementtype": "1"
+ }
+ },
+ "entities": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/entities/-/entities-1.0.0.tgz",
+ "integrity": "sha1-sph6o4ITR/zeZCsk/fyeT7cSvyY=",
+ "dev": true,
+ "optional": true
+ },
+ "isarray": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+ "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+ "dev": true,
+ "optional": true
+ },
+ "readable-stream": {
+ "version": "1.1.14",
+ "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+ "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "core-util-is": "~1.0.0",
+ "inherits": "~2.0.1",
+ "isarray": "0.0.1",
+ "string_decoder": "~0.10.x"
+ }
+ },
+ "string_decoder": {
+ "version": "0.10.31",
+ "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+ "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+ "dev": true,
+ "optional": true
+ }
+ }
+ },
"http-cache-semantics": {
"version": "3.8.1",
"resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
@@ -5706,6 +5968,12 @@
"integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
"dev": true
},
+ "is-dotfile": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz",
+ "integrity": "sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=",
+ "dev": true
+ },
"is-extendable": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@@ -6128,6 +6396,42 @@
"integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
"dev": true
},
+ "jshint": {
+ "version": "2.11.0",
+ "resolved": "https://registry.npmjs.org/jshint/-/jshint-2.11.0.tgz",
+ "integrity": "sha512-ooaD/hrBPhu35xXW4gn+o3SOuzht73gdBuffgJzrZBJZPGgGiiTvJEgTyxFvBO2nz0+X1G6etF8SzUODTlLY6Q==",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "cli": "~1.0.0",
+ "console-browserify": "1.1.x",
+ "exit": "0.1.x",
+ "htmlparser2": "3.8.x",
+ "lodash": "~4.17.11",
+ "minimatch": "~3.0.2",
+ "shelljs": "0.3.x",
+ "strip-json-comments": "1.0.x"
+ },
+ "dependencies": {
+ "console-browserify": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.1.0.tgz",
+ "integrity": "sha1-8CQcRXMKn8YyOyBtvzjtx0HQuxA=",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "date-now": "^0.1.4"
+ }
+ },
+ "strip-json-comments": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-1.0.4.tgz",
+ "integrity": "sha1-HhX7ysl9Pumb8tc7TGVrCCu6+5E=",
+ "dev": true,
+ "optional": true
+ }
+ }
+ },
"json-parse-better-errors": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
@@ -7807,6 +8111,35 @@
"safe-buffer": "^5.1.1"
}
},
+ "parse-glob": {
+ "version": "3.0.4",
+ "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
+ "integrity": "sha1-ssN2z7EfNVE7rdFz7wu246OIORw=",
+ "dev": true,
+ "requires": {
+ "glob-base": "^0.3.0",
+ "is-dotfile": "^1.0.0",
+ "is-extglob": "^1.0.0",
+ "is-glob": "^2.0.0"
+ },
+ "dependencies": {
+ "is-extglob": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+ "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+ "dev": true
+ },
+ "is-glob": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+ "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+ "dev": true,
+ "requires": {
+ "is-extglob": "^1.0.0"
+ }
+ }
+ }
+ },
"parse-json": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
@@ -7832,6 +8165,13 @@
"better-assert": "~1.0.0"
}
},
+ "parserlib": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/parserlib/-/parserlib-1.1.1.tgz",
+ "integrity": "sha1-pkz6ckBiQ0/fw1HJpOwtkrlMBvQ=",
+ "dev": true,
+ "optional": true
+ },
"parseuri": {
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.5.tgz",
@@ -9803,6 +10143,13 @@
"integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
"dev": true
},
+ "shelljs": {
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.3.0.tgz",
+ "integrity": "sha1-NZbmMHp4FUT1kfN9phg2DzHbV7E=",
+ "dev": true,
+ "optional": true
+ },
"signal-exit": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
@@ -10550,6 +10897,12 @@
"integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
"dev": true
},
+ "strip-json-comments": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+ "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
+ "dev": true
+ },
"style-loader": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-1.0.0.tgz",
@@ -13282,6 +13635,12 @@
"async-limiter": "~1.0.0"
}
},
+ "xml": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
+ "integrity": "sha1-eLpyAgApxbyHuKgaPPzXS0ovweU=",
+ "dev": true
+ },
"xml2js": {
"version": "0.4.23",
"resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
diff --git a/package.json b/package.json
index 82a91bc4cea86b9d15b31d704ddd0e84a7b68fa9..036558308792a258ebc54a8cd05cfd0c83f77005 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
"start": "ng serve",
"build": "ng build",
"test": "ng test",
- "lint": "ng lint",
+ "lint": "ng lint && htmlhint",
"e2e": "ng e2e"
},
"private": true,
@@ -19,6 +19,9 @@
"@angular/platform-browser": "~9.0.2",
"@angular/platform-browser-dynamic": "~9.0.2",
"@angular/router": "~9.0.2",
+ "@fortawesome/angular-fontawesome": "^0.6.1",
+ "@fortawesome/fontawesome-svg-core": "^1.2.28",
+ "@fortawesome/free-solid-svg-icons": "^5.13.0",
"bulma": "^0.8.1",
"python": "0.0.4",
"python-shell": "^1.0.8",
@@ -36,6 +39,7 @@
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.12.32",
"codelyzer": "^5.1.2",
+ "htmlhint": "^0.11.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.3.0",
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 06c734263e1716e120bbb2771845eca1ae74c055..a407a1a14f74ac657d9f4f02f089037999778af7 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,8 +1,16 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
+import {ExplorerPageComponent} from './pages/explorer-page/explorer-page.component';
+import {AboutPageComponent} from './pages/about-page/about-page.component';
+import {HomePageComponent} from './pages/home-page/home-page.component';
-const routes: Routes = [];
+export const routes: Routes = [
+ { path: '', component: HomePageComponent },
+ { path: 'explorer', component: ExplorerPageComponent},
+ { path: 'explorer/:proteinGroup', component: ExplorerPageComponent},
+ { path: 'about', component: AboutPageComponent }
+];
@NgModule({
imports: [RouterModule.forRoot(routes)],
diff --git a/src/app/app.component.css b/src/app/app.component.css
deleted file mode 100644
index b7ef084c563fcdce196a2076486d16c87ef19cbf..0000000000000000000000000000000000000000
--- a/src/app/app.component.css
+++ /dev/null
@@ -1,3 +0,0 @@
-p {
- font-family: Lato;
-}
\ No newline at end of file
diff --git a/src/app/app.component.html b/src/app/app.component.html
index d6bbe573ea62de61c74d361bd4f32080bb51baf3..77a029646b99af4c2db67dd808eecdc979d5f760 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,29 +1,33 @@
-<nav class="navbar" role="navigation" aria-label="main navigation">
- <div class="navbar-brand">
- <a class="navbar-item" href="https://bulma.io">
- <img src="data:image/jpeg;base64,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" height="28">
- </a>
-
- <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false">
- <span aria-hidden="true"></span>
- <span aria-hidden="true"></span>
- <span aria-hidden="true"></span>
- </a>
- </div>
-
- <div class="navbar-menu">
- <div class="navbar-start">
- <a class="navbar-item">
- Network
+<div class="container is-fluid">
+ <nav class="navbar" role="navigation" aria-label="main navigation">
+ <div class="navbar-brand">
+ <img src="assets/logo.png" class="menu-icon" alt="logo" width="50px"/>
+ <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false">
+ <span aria-hidden="true"></span>
+ <span aria-hidden="true"></span>
+ <span aria-hidden="true"></span>
</a>
</div>
- <div class="navbar-end">
- <a class="navbar-item">
- About
- </a>
+ <div class="navbar-menu is-active">
+ <div class="navbar-start">
+ <a routerLink="/" routerLinkActive="is-active" class="navbar-item">
+ <span class="icon"><i class="fa fa-home"></i></span>
+ <span>Home</span>
+ </a>
+ <a routerLink="/explorer" routerLinkActive="is-active" class="navbar-item">
+ <span class="icon"><i class="fa fa-project-diagram"></i></span>
+ <span>Explorer</span>
+ </a>
+ <a routerLink="/about" routerLinkActive="is-active" class="navbar-item">
+ <span class="icon"><i class="fa fa-question"></i></span>
+ <span>About</span>
+ </a>
+ </div>
</div>
- </div>
-</nav>
+ </nav>
+</div>
-<router-outlet></router-outlet>
+<main>
+ <router-outlet></router-outlet>
+</main>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..8b137891791fe96927ad78e64b0aad7bded08bdc 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +1 @@
+
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index bf189ee6a5abcf6411e9988afea859b9357fab4e..3929e22a3cc505c855f89dd9636d02ea317b939a 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,30 +1,31 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
+import {ExplorerPageComponent} from './pages/explorer-page/explorer-page.component';
+import {AboutPageComponent} from './pages/about-page/about-page.component';
+import {HomePageComponent} from './pages/home-page/home-page.component';
-
-
-// @NgModule({
-// declarations: [
-// AppComponent
-// ],
-// imports: [
-// BrowserModule,
-// AppRoutingModule
-// ],
-// providers: [],
-// bootstrap: [AppComponent]
-// })
-// export class AppModule { }
-
@NgModule({
- imports: [ BrowserModule, FormsModule, AppRoutingModule],
- declarations: [ AppComponent ],
- bootstrap: [ AppComponent ]
+ declarations: [
+ AppComponent,
+ ExplorerPageComponent,
+ AboutPageComponent,
+ HomePageComponent
+ ],
+ imports: [
+ BrowserModule,
+ AppRoutingModule,
+ FormsModule,
+ CommonModule
+ ],
+ providers: [],
+ bootstrap: [AppComponent]
+
})
export class AppModule { }
diff --git a/src/app/pages/about-page/about-page.component.html b/src/app/pages/about-page/about-page.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..45094ab126acc03f58f9fb5790d98ac26065126d
--- /dev/null
+++ b/src/app/pages/about-page/about-page.component.html
@@ -0,0 +1,4 @@
+<div class="content">
+Write information about the project and website here
+</div>
+
diff --git a/src/app/pages/about-page/about-page.component.scss b/src/app/pages/about-page/about-page.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/pages/about-page/about-page.component.ts b/src/app/pages/about-page/about-page.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c93a5e594bbffb94c24ebb2e9ad1fd8474b73fd9
--- /dev/null
+++ b/src/app/pages/about-page/about-page.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-about-page',
+ templateUrl: './about-page.component.html',
+ styleUrls: ['./about-page.component.scss']
+})
+export class AboutPageComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..79847ed623d8ab3f30e5dbb914648628812a3e1f
--- /dev/null
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -0,0 +1,136 @@
+<div class="content fullscreen">
+ <div class="modal" [class.is-active]="showModal">
+ <div class="modal-background"></div>
+ <div class="modal-card">
+ <header class="modal-card-head">
+ <p class="modal-card-title">{{groupId}}</p>
+ <button class="delete" aria-label="close" (click)="closeSummary()"></button>
+ </header>
+ <section class="modal-card-body">
+ <h2>General Information</h2>
+ <ul>
+ <li><b>Protein Group:</b> {{proteinGroup}}</li>
+ <li><b>Gene Name(s):</b> <span *ngFor="let geneName of geneNames"> {{ geneName }}</span>
+ <li><b>Protein Name(s):</b> <span *ngFor="let proteinName of proteinNames"> {{ proteinName }}</span>
+ </li>
+ <li><b>Protein AC(s):</b>
+ <a href="https://www.uniprot.org/uniprot/{{proteinAC}}" target="_blank"
+ *ngFor="let proteinAC of proteinACs">
+ {{ proteinAC }}<span><img class="inline" align="center" src="../assets/uniprot.png"></span>
+ </a>
+ </li>
+ <li><b>Number of Interactions:</b> {{numberOfInteractions}}</li>
+ </ul>
+
+ <h2>Summary</h2>
+ <figure class="image" (click)="openSummary('A4435')">
+ <img src="../assets/boxplot.png" alt="Boxplots">
+ </figure>
+ </section>
+
+ <footer class="modal-card-foot">
+ <button class="button is-danger" (click)="closeSummary()">Close</button>
+ </footer>
+ </div>
+ </div>
+
+
+ <div class="content left-bar">
+
+ <div class="card left-bar-item">
+ <header class="card-header">
+ <p class="card-header-title">
+ <span class="icon">
+ <i class="fas fa-info" aria-hidden="true"></i>
+ </span> Info
+ </p>
+ </header>
+ <div class="card-content">
+ <div class="content">
+ Information about how to use the explorer
+ </div>
+ </div>
+ </div>
+
+ <div class="card left-bar-item">
+ <header class="card-header">
+ <p class="card-header-title">
+ <span class="icon">
+ <i class="fas fa-search" aria-hidden="true"></i>
+ </span> Query Protein/Gene
+ </p>
+ </header>
+ <div class="card-content">
+ <div class="content">
+ <div class="field">
+ <div class="control is-loading">
+ <input class="input" type="text" placeholder="Search for Protein/Gene...">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="card left-bar-item">
+ <header class="card-header">
+ <p class="card-header-title">
+ <span class="icon">
+ <i class="fas fa-filter" aria-hidden="true"></i>
+ </span> Filtering
+ </p>
+ </header>
+ <div class="card-content">
+ <div class="content">
+ <p><b>Baits</b></p>
+ <label class="checkbox" *ngFor="let baitName of baitNames">
+ <input type="checkbox" class="checkbox">
+ {{ baitName }}
+ </label>
+ </div>
+ </div>
+ <footer class="card-footer">
+ <button class="card-footer-item button is-danger">Reset
+ </button>
+ </footer>
+ </div>
+ </div>
+
+ <div class="card right-big" >
+ <header class="card-header">
+ <p class="card-header-title">
+ SARS-CoV-2 Protein-Protein Interaction Network
+ </p>
+ <a href="#" class="card-header-icon" aria-label="more options">
+ <span class="icon">
+ <i class="fas fa-sliders-h" aria-hidden="true"></i>
+ </span>
+ </a>
+ </header>
+ <div class="card-content">
+ <div class="card-image">
+ <figure class="image" (click)="openSummary('A4435')">
+ <img src="assets/graph_example.png" alt="PPI Network" class="network">
+ </figure>
+ </div>
+ <footer class="card-footer">
+ <button class="card-footer-item button is-primary">
+ <span class="icon">
+ <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
+ </span>
+ </button>
+ <a class="card-footer-item">
+ <span class="icon">
+ <i class="fas fa-search-plus" aria-hidden="true"></i>
+ </span>
+ </a>
+ <a href="#" class="card-footer-item">
+ <span class="icon">
+ <i class="fas fa-search-minus" aria-hidden="true"></i>
+ </span>
+ </a>
+ </footer>
+ </div>
+ </div>
+</div>
+
+
diff --git a/src/app/pages/explorer-page/explorer-page.component.scss b/src/app/pages/explorer-page/explorer-page.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..230c9db23bc69c20eda1da9a21c0b05c93ebbbdb
--- /dev/null
+++ b/src/app/pages/explorer-page/explorer-page.component.scss
@@ -0,0 +1,9 @@
+.card {
+ height: 100%;
+ display:flex;
+ flex-direction: column;
+}
+
+.card-block{
+ height: 100%;
+}
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a16def7f2caa1fd8f8d35d039178fad0d69e1dc3
--- /dev/null
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -0,0 +1,71 @@
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+
+@Component({
+ selector: 'app-explorer-page',
+ templateUrl: './explorer-page.component.html',
+ styleUrls: ['./explorer-page.component.scss'],
+})
+export class ExplorerPageComponent implements OnInit {
+
+ public showModal = false;
+ public groupId = '';
+ public geneNames: Array<string> = [];
+ public proteinGroup = '';
+ public proteinNames: Array<string> = [];
+ public proteinACs: Array<string> = [];
+ public numberOfInteractions = 0;
+ public baitNames: Array<string> = [];
+
+ constructor(private route: ActivatedRoute, private router: Router) {
+
+ this.groupId = 'IFI16';
+ this.geneNames.push('IFI16');
+ this.proteinNames.push('Gamma-interface-inducible protein 16');
+ this.proteinACs.push('Q16666');
+ this.numberOfInteractions = 25;
+ this.baitNames.push('Bait Protein 1');
+ this.baitNames.push('Bait Protein 2');
+ this.baitNames.push('Bait Protein 3');
+ this.baitNames.push('Bait Protein 4');
+ this.baitNames.push('Bait Protein 5');
+
+ this.route.params.subscribe(async (params) => {
+ const proteinGroup = params.proteinGroup;
+ if (!proteinGroup) {
+ // In this case, the URL is just `/explorer`
+ // Therefore, we do not show a modal
+ this.showModal = false;
+ return;
+ }
+
+ // In this case, the URL is `/explorer/<proteinGroup>`
+
+ if (this.proteinGroup === proteinGroup) {
+ // The protein group is the same as before, so we do not need to do anything
+ return;
+ }
+
+ // We have a new proteinGroup id, so we need to load it and show the modal...
+
+ this.proteinGroup = proteinGroup;
+
+ // TODO: Perform call here for 'proteinGroup'...
+
+ this.showModal = true;
+ });
+ }
+
+ ngOnInit() {
+
+ }
+
+ public async openSummary(groupId: string) {
+ await this.router.navigate(['explorer', groupId]);
+ }
+
+ public async closeSummary() {
+ await this.router.navigate(['explorer']);
+ }
+
+}
diff --git a/src/app/pages/home-page/home-page.component.html b/src/app/pages/home-page/home-page.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..d0d4cd44afe8063d7785b8b4bbb2eddaee71b5aa
--- /dev/null
+++ b/src/app/pages/home-page/home-page.component.html
@@ -0,0 +1,17 @@
+<section class="hero is-primary is-large">
+ <div class="hero-body">
+ <div class="container">
+ <h1 class="title">
+ SARS-CoV-2 Explorer
+ </h1>
+ <h2 class="subtitle">
+ Explore the Protein interactions of SARS-CoV-2
+ </h2>
+ </div>
+ </div>
+</section>
+
+<div class="content">
+General Information about the Website
+</div>
+
diff --git a/src/app/pages/home-page/home-page.component.scss b/src/app/pages/home-page/home-page.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/pages/home-page/home-page.component.ts b/src/app/pages/home-page/home-page.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4f49595151dfc8f84a5391366a3ea01dc1b07e65
--- /dev/null
+++ b/src/app/pages/home-page/home-page.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-home-page',
+ templateUrl: './home-page.component.html',
+ styleUrls: ['./home-page.component.scss']
+})
+export class HomePageComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/src/assets/boxplot.png b/src/assets/boxplot.png
new file mode 100644
index 0000000000000000000000000000000000000000..4e8eb829cd5c8581bca92b8ced95653e47b93a46
Binary files /dev/null and b/src/assets/boxplot.png differ
diff --git a/src/assets/graph_example.png b/src/assets/graph_example.png
new file mode 100644
index 0000000000000000000000000000000000000000..a7ed6b8a5ff329c8812c46fabaaf3d8e0a95970d
Binary files /dev/null and b/src/assets/graph_example.png differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..066eb713ee455cebe340dc8504fe6fcf1bfad8d0
Binary files /dev/null and b/src/assets/logo.png differ
diff --git a/src/assets/uniprot.png b/src/assets/uniprot.png
new file mode 100644
index 0000000000000000000000000000000000000000..c2f607535a9d0f1e6cbe3a7e7d6388c14ac86282
Binary files /dev/null and b/src/assets/uniprot.png differ
diff --git a/src/index.html b/src/index.html
index 1eb0ed1f005def2751a3ac0fb4a4069d919443d0..82b85d025b288c79124f834415b62d664a6bc593 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,10 +2,10 @@
<html lang="en">
<head>
<meta charset="utf-8">
- <title>Covid19</title>
+ <title>CovPPI</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="icon" type="image/x-icon" href="favicon.ico">
+ <link rel="icon" type="image/ico" href="../../assets/logo.png">
<script src="https://kit.fontawesome.com/3ad4fe992f.js" crossorigin="anonymous"></script>
</head>
<body>
diff --git a/src/styles.scss b/src/styles.scss
index 7d85f64db268396b259b1bf8cf1a6f1e1422b9d8..cb26458e9f9ffa624ee3e9d1b066af42fe8d5e7a 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,3 +1,92 @@
/* You can add global styles to this file, and also import other style files */
-@import '~bulma';
+@charset "utf-8";
+
+@import url('https://fonts.googleapis.com/css?family=Varela+Round');
+$family-sans-serif: "Varela Round", sans-serif;
+@import "~bulma/bulma.sass";
+
+.hero.is-primary {
+ background-color: #118AB2;
+ background-image: url("assets/logo.png"), linear-gradient(to left, #f2fcfe, #118AB2);
+ background-repeat: no-repeat;
+ background-position: 80%;
+ padding: 50px;
+}
+
+.button.is-primary, .button.is-primary:hover, .button.is-primary:disabled {
+ background-color: #118AB2;
+}
+
+.button.is-danger, .button.is-danger:hover, .button.is-danger:disabled {
+ background-color: #EF476F;
+}
+
+.button.is-success, .button.is-success:hover, .button.is-success:disabled {
+ background-color: #06D6A0;
+}
+
+div.content {
+ margin: 30px;
+}
+
+div.content.fullscreen {
+ margin: 20px;
+ height: calc(100vh - 120px);
+ width: 100%;
+}
+
+div.navbar-menu {
+ margin-left: 5px;
+}
+
+div.content.left-bar {
+ float: left;
+ width: 400px;
+}
+
+div.card.left-bar-item {
+ margin-bottom: 30px;
+}
+
+div.card.right-big {
+ float: right;
+ width: calc(100% - 460px);
+ height: calc(100vh - 105px);
+}
+
+button.i {
+ margin-left: 5px;
+}
+
+body {
+ height: 100%;
+}
+
+img {
+ margin: 10px;
+}
+
+span.icon {
+ margin-right: 5px;
+}
+
+img.inline {
+ height: 30px;
+ margin-left: 0px;
+}
+
+img.network {
+ height: calc(100vh - 270px);
+}
+
+main {
+ height: calc(100vh - 500px);
+}
+
+input.checkbox {
+ margin-left: 15px;
+}
+
+
+