From df5488ed6500c32a8c0cd3653ab9e7356c6cf046 Mon Sep 17 00:00:00 2001
From: KrokodileDandy <s.fuehr1@gmail.com>
Date: Fri, 4 Jun 2021 21:07:40 +0200
Subject: [PATCH 01/18] Update dependencies

---
 frontend/package-lock.json | 429 +++++++++++++++++++------------------
 1 file changed, 222 insertions(+), 207 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7913f20..64e013e 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1328,16 +1328,6 @@
             "integrity": "sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q==",
             "dev": true
         },
-        "@types/mini-css-extract-plugin": {
-            "version": "0.9.1",
-            "resolved": "https://registry.npmjs.org/@types/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.1.tgz",
-            "integrity": "sha512-+mN04Oszdz9tGjUP/c1ReVwJXxSniLd7lF++sv+8dkABxVNthg6uccei+4ssKxRHGoMmPxdn7uBdJWONSJGTGQ==",
-            "dev": true,
-            "optional": true,
-            "requires": {
-                "@types/webpack": "*"
-            }
-        },
         "@types/minimatch": {
             "version": "3.0.3",
             "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -1658,6 +1648,142 @@
                 "tslint": "^5.20.1",
                 "webpack": "^4.0.0",
                 "yorkie": "^2.0.0"
+            },
+            "dependencies": {
+                "ajv": {
+                    "version": "6.12.6",
+                    "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+                    "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "fast-deep-equal": "^3.1.1",
+                        "fast-json-stable-stringify": "^2.0.0",
+                        "json-schema-traverse": "^0.4.1",
+                        "uri-js": "^4.2.2"
+                    }
+                },
+                "ansi-styles": {
+                    "version": "4.3.0",
+                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+                    "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "color-convert": "^2.0.1"
+                    }
+                },
+                "chalk": {
+                    "version": "4.1.1",
+                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+                    "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "ansi-styles": "^4.1.0",
+                        "supports-color": "^7.1.0"
+                    }
+                },
+                "color-convert": {
+                    "version": "2.0.1",
+                    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+                    "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "color-name": "~1.1.4"
+                    }
+                },
+                "color-name": {
+                    "version": "1.1.4",
+                    "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+                    "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+                    "dev": true,
+                    "optional": true
+                },
+                "fast-deep-equal": {
+                    "version": "3.1.3",
+                    "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+                    "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+                    "dev": true,
+                    "optional": true
+                },
+                "fork-ts-checker-webpack-plugin-v5": {
+                    "version": "npm:fork-ts-checker-webpack-plugin@5.2.1",
+                    "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.2.1.tgz",
+                    "integrity": "sha512-SVi+ZAQOGbtAsUWrZvGzz38ga2YqjWvca1pXQFUArIVXqli0lLoDQ8uS0wg0kSpcwpZmaW5jVCZXQebkyUQSsw==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "@babel/code-frame": "^7.8.3",
+                        "@types/json-schema": "^7.0.5",
+                        "chalk": "^4.1.0",
+                        "cosmiconfig": "^6.0.0",
+                        "deepmerge": "^4.2.2",
+                        "fs-extra": "^9.0.0",
+                        "memfs": "^3.1.2",
+                        "minimatch": "^3.0.4",
+                        "schema-utils": "2.7.0",
+                        "semver": "^7.3.2",
+                        "tapable": "^1.0.0"
+                    }
+                },
+                "has-flag": {
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+                    "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+                    "dev": true,
+                    "optional": true
+                },
+                "lru-cache": {
+                    "version": "6.0.0",
+                    "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+                    "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "yallist": "^4.0.0"
+                    }
+                },
+                "schema-utils": {
+                    "version": "2.7.0",
+                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
+                    "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "@types/json-schema": "^7.0.4",
+                        "ajv": "^6.12.2",
+                        "ajv-keywords": "^3.4.1"
+                    }
+                },
+                "semver": {
+                    "version": "7.3.5",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+                    "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "lru-cache": "^6.0.0"
+                    }
+                },
+                "supports-color": {
+                    "version": "7.2.0",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+                    "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "has-flag": "^4.0.0"
+                    }
+                },
+                "yallist": {
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+                    "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+                    "dev": true,
+                    "optional": true
+                }
             }
         },
         "@vue/cli-plugin-vuex": {
@@ -1748,6 +1874,16 @@
                         "uri-js": "^4.2.2"
                     }
                 },
+                "ansi-styles": {
+                    "version": "4.3.0",
+                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+                    "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "color-convert": "^2.0.1"
+                    }
+                },
                 "cacache": {
                     "version": "13.0.1",
                     "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1774,6 +1910,17 @@
                         "unique-filename": "^1.1.1"
                     }
                 },
+                "chalk": {
+                    "version": "4.1.1",
+                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+                    "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "ansi-styles": "^4.1.0",
+                        "supports-color": "^7.1.0"
+                    }
+                },
                 "cliui": {
                     "version": "6.0.0",
                     "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@@ -1785,6 +1932,30 @@
                         "wrap-ansi": "^6.2.0"
                     }
                 },
+                "color-convert": {
+                    "version": "2.0.1",
+                    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+                    "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "color-name": "~1.1.4"
+                    }
+                },
+                "color-name": {
+                    "version": "1.1.4",
+                    "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+                    "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+                    "dev": true,
+                    "optional": true
+                },
+                "emojis-list": {
+                    "version": "3.0.0",
+                    "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+                    "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+                    "dev": true,
+                    "optional": true
+                },
                 "fast-deep-equal": {
                     "version": "3.1.3",
                     "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -1823,6 +1994,13 @@
                         "universalify": "^0.1.0"
                     }
                 },
+                "has-flag": {
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+                    "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+                    "dev": true,
+                    "optional": true
+                },
                 "is-fullwidth-code-point": {
                     "version": "3.0.0",
                     "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -1838,6 +2016,18 @@
                         "graceful-fs": "^4.1.6"
                     }
                 },
+                "loader-utils": {
+                    "version": "2.0.0",
+                    "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+                    "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "big.js": "^5.2.2",
+                        "emojis-list": "^3.0.0",
+                        "json5": "^2.1.2"
+                    }
+                },
                 "locate-path": {
                     "version": "5.0.0",
                     "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -1933,6 +2123,16 @@
                         "strip-ansi": "^6.0.0"
                     }
                 },
+                "supports-color": {
+                    "version": "7.2.0",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+                    "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "has-flag": "^4.0.0"
+                    }
+                },
                 "terser-webpack-plugin": {
                     "version": "2.3.8",
                     "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -1955,6 +2155,18 @@
                     "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
                     "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
                     "dev": true
+                },
+                "vue-loader-v16": {
+                    "version": "npm:vue-loader@16.2.0",
+                    "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
+                    "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "chalk": "^4.1.0",
+                        "hash-sum": "^2.0.0",
+                        "loader-utils": "^2.0.0"
+                    }
                 }
             }
         },
@@ -5800,123 +6012,6 @@
                 "worker-rpc": "^0.1.0"
             }
         },
-        "fork-ts-checker-webpack-plugin-v5": {
-            "version": "npm:fork-ts-checker-webpack-plugin@5.1.0",
-            "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.1.0.tgz",
-            "integrity": "sha512-vuKyEjSLGbhQbEr5bifXXOkr9iV73L6n72mHoHIv7okvrf7O7z6RKeplM6C6ATPsukoQivij+Ba1vcptL60Z2g==",
-            "dev": true,
-            "optional": true,
-            "requires": {
-                "@babel/code-frame": "^7.8.3",
-                "@types/json-schema": "^7.0.5",
-                "chalk": "^4.1.0",
-                "cosmiconfig": "^6.0.0",
-                "deepmerge": "^4.2.2",
-                "fs-extra": "^9.0.0",
-                "memfs": "^3.1.2",
-                "minimatch": "^3.0.4",
-                "schema-utils": "2.7.0",
-                "semver": "^7.3.2",
-                "tapable": "^1.0.0"
-            },
-            "dependencies": {
-                "ajv": {
-                    "version": "6.12.4",
-                    "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz",
-                    "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "fast-deep-equal": "^3.1.1",
-                        "fast-json-stable-stringify": "^2.0.0",
-                        "json-schema-traverse": "^0.4.1",
-                        "uri-js": "^4.2.2"
-                    }
-                },
-                "ansi-styles": {
-                    "version": "4.2.1",
-                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-                    "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "@types/color-name": "^1.1.1",
-                        "color-convert": "^2.0.1"
-                    }
-                },
-                "chalk": {
-                    "version": "4.1.0",
-                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-                    "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "ansi-styles": "^4.1.0",
-                        "supports-color": "^7.1.0"
-                    }
-                },
-                "color-convert": {
-                    "version": "2.0.1",
-                    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-                    "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "color-name": "~1.1.4"
-                    }
-                },
-                "color-name": {
-                    "version": "1.1.4",
-                    "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-                    "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-                    "dev": true,
-                    "optional": true
-                },
-                "fast-deep-equal": {
-                    "version": "3.1.3",
-                    "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-                    "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-                    "dev": true,
-                    "optional": true
-                },
-                "has-flag": {
-                    "version": "4.0.0",
-                    "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-                    "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-                    "dev": true,
-                    "optional": true
-                },
-                "schema-utils": {
-                    "version": "2.7.0",
-                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
-                    "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "@types/json-schema": "^7.0.4",
-                        "ajv": "^6.12.2",
-                        "ajv-keywords": "^3.4.1"
-                    }
-                },
-                "semver": {
-                    "version": "7.3.2",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
-                    "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
-                    "dev": true,
-                    "optional": true
-                },
-                "supports-color": {
-                    "version": "7.1.0",
-                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-                    "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "has-flag": "^4.0.0"
-                    }
-                }
-            }
-        },
         "form-data": {
             "version": "2.3.3",
             "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
@@ -12069,86 +12164,6 @@
                 }
             }
         },
-        "vue-loader-v16": {
-            "version": "npm:vue-loader@16.0.0-beta.5",
-            "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.5.tgz",
-            "integrity": "sha512-ciWfzNefqWlmzKznCWY9hl+fPP4KlQ0A9MtHbJ/8DpyY+dAM8gDrjufIdxwTgC4szE4EZC3A6ip/BbrqM84GqA==",
-            "dev": true,
-            "optional": true,
-            "requires": {
-                "@types/mini-css-extract-plugin": "^0.9.1",
-                "chalk": "^3.0.0",
-                "hash-sum": "^2.0.0",
-                "loader-utils": "^1.2.3",
-                "merge-source-map": "^1.1.0",
-                "source-map": "^0.6.1"
-            },
-            "dependencies": {
-                "ansi-styles": {
-                    "version": "4.2.1",
-                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-                    "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "@types/color-name": "^1.1.1",
-                        "color-convert": "^2.0.1"
-                    }
-                },
-                "chalk": {
-                    "version": "3.0.0",
-                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-                    "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "ansi-styles": "^4.1.0",
-                        "supports-color": "^7.1.0"
-                    }
-                },
-                "color-convert": {
-                    "version": "2.0.1",
-                    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-                    "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "color-name": "~1.1.4"
-                    }
-                },
-                "color-name": {
-                    "version": "1.1.4",
-                    "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-                    "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-                    "dev": true,
-                    "optional": true
-                },
-                "has-flag": {
-                    "version": "4.0.0",
-                    "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-                    "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-                    "dev": true,
-                    "optional": true
-                },
-                "source-map": {
-                    "version": "0.6.1",
-                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-                    "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-                    "dev": true,
-                    "optional": true
-                },
-                "supports-color": {
-                    "version": "7.1.0",
-                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-                    "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "has-flag": "^4.0.0"
-                    }
-                }
-            }
-        },
         "vue-property-decorator": {
             "version": "8.5.1",
             "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-8.5.1.tgz",

From 07d3eb9e89ad30a4d3a795560a4d22cf4d4780b0 Mon Sep 17 00:00:00 2001
From: KrokodileDandy <s.fuehr1@gmail.com>
Date: Fri, 4 Jun 2021 21:08:09 +0200
Subject: [PATCH 02/18] Add GUI elements for street segment popularity

---
 README.md                                     |   5 +-
 frontend/src/components/Sidebar.vue           | 486 +++++++++++-------
 frontend/src/constants.ts                     |   4 +
 frontend/src/locales/en.json                  |  11 +-
 .../viewModes/popularity/PopularityView.vue   |  54 ++
 frontend/src/views/Map.vue                    | 447 +++++++++-------
 6 files changed, 641 insertions(+), 366 deletions(-)
 create mode 100644 frontend/src/viewModes/popularity/PopularityView.vue

diff --git a/README.md b/README.md
index ff0e9d1..65bf705 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,8 @@
 # SimRa-Visualization
 
 This project is part of the SimRa research project which includes the following subprojects:
-- [sirma-android](https://github.com/simra-project/simra-android/): The SimRa app for Android.
+
+- [simra-android](https://github.com/simra-project/simra-android/): The SimRa app for Android.
 - [simra-ios](https://github.com/simra-project/simra-ios): The SimRa app for iOS.
 - [backend](https://github.com/simra-project/backend): The SimRa backend software.
 - [dataset](https://github.com/simra-project/dataset): Result data from the SimRa project.
@@ -10,5 +11,3 @@ This project is part of the SimRa research project which includes the following
 
 In this project, we collect – with a strong focus on data protection and privacy – data on such near crashes to identify when and where bicyclists are especially at risk. We also aim to identify the main routes of bicycle traffic in Berlin. To obtain such data, we have developed a smartphone app that uses GPS information to track routes of bicyclists and the built-in acceleration sensors to pre-categorize near crashes. After their trip, users are asked to annotate and upload the collected data, pseudonymized per trip.
 For more information see [our website](https://www.digital-future.berlin/en/research/projects/simra/).
-
-```
\ No newline at end of file
diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
index 5997248..82bb911 100644
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -1,134 +1,225 @@
 <template>
-    <div class="sidebar" :class="{'small': small}">
+    <div class="sidebar" :class="{ small: small }">
         <div class="entries">
-            <SidebarEntry :title="$t('sidebar.rides')"
-                          icon="fa-biking"
-                          :icon-color="'#156ec7'"
-                          :is-small="small"
-                          :class="{'selected': value === config.viewModes.RIDES}"
-                          @entryClicked="switchToView(config.viewModes.RIDES)">
+            <!-- Rides -->
+            <SidebarEntry
+                :title="$t('sidebar.rides')"
+                icon="fa-biking"
+                :icon-color="'#156ec7'"
+                :is-small="small"
+                :class="{ selected: value === config.viewModes.RIDES }"
+                @entryClicked="switchToView(config.viewModes.RIDES)"
+            >
                 <div class="field">
-                    <b-radio v-model="computedSubViewMode"
-                             :native-value="subViewMode === config.subViewModes.RIDES_ORIGINAL ? config.subViewModes.RIDES_ORIGINAL : config.subViewModes.RIDES_DENSITY_ALL">
-                        {{ $t('ride.all') }}
+                    <b-radio
+                        v-model="computedSubViewMode"
+                        :native-value="
+                            subViewMode === config.subViewModes.RIDES_ORIGINAL
+                                ? config.subViewModes.RIDES_ORIGINAL
+                                : config.subViewModes.RIDES_DENSITY_ALL
+                        "
+                    >
+                        {{ $t("ride.all") }}
                     </b-radio>
                 </div>
                 <div class="field">
-                    <b-radio v-model="computedSubViewMode"
-                             :native-value="config.subViewModes.RIDES_DENSITY_RUSHHOURMORNING">
-                        {{ $t('ride.rushHourMorning') }}
+                    <b-radio
+                        v-model="computedSubViewMode"
+                        :native-value="
+                            config.subViewModes.RIDES_DENSITY_RUSHHOURMORNING
+                        "
+                    >
+                        {{ $t("ride.rushHourMorning") }}
                     </b-radio>
                 </div>
                 <div class="field">
-                    <b-radio v-model="computedSubViewMode"
-                             :native-value="config.subViewModes.RIDES_DENSITY_RUSHHOUREVENING">
-                        {{ $t('ride.rushHourEvening') }}
+                    <b-radio
+                        v-model="computedSubViewMode"
+                        :native-value="
+                            config.subViewModes.RIDES_DENSITY_RUSHHOUREVENING
+                        "
+                    >
+                        {{ $t("ride.rushHourEvening") }}
                     </b-radio>
                 </div>
                 <div class="field">
-                    <b-radio v-model="computedSubViewMode"
-                             :native-value="config.subViewModes.RIDES_DENSITY_WEEKEND">
-                        {{ $t('ride.weekend') }}
+                    <b-radio
+                        v-model="computedSubViewMode"
+                        :native-value="
+                            config.subViewModes.RIDES_DENSITY_WEEKEND
+                        "
+                    >
+                        {{ $t("ride.weekend") }}
                     </b-radio>
                 </div>
             </SidebarEntry>
 
-            <SidebarEntry :title="$t('sidebar.incidents')"
-                          icon="fa-car-crash"
-                          :icon-color="'#1d917c'"
-                          :is-small="small"
-                          :class="{'selected': value === config.viewModes.INCIDENTS}"
-                          @entryClicked="switchToView(config.viewModes.INCIDENTS)">
+            <!-- Incidents -->
+            <SidebarEntry
+                :title="$t('sidebar.incidents')"
+                icon="fa-car-crash"
+                :icon-color="'#1d917c'"
+                :is-small="small"
+                :class="{ selected: value === config.viewModes.INCIDENTS }"
+                @entryClicked="switchToView(config.viewModes.INCIDENTS)"
+            >
                 <div class="entry-subtext">
-                    {{ $t('sidebar.incidentsDescription') }}
+                    {{ $t("sidebar.incidentsDescription") }}
                 </div>
             </SidebarEntry>
 
-            <SidebarEntry :title="$t('sidebar.surfaceQuality')"
-                          icon="fa-road"
-                          :icon-color="'#d63e12'"
-                          :is-small="small"
-                          :class="{'selected': value === config.viewModes.SURFACE_QUALITY}"
-                          @entryClicked="switchToView(config.viewModes.SURFACE_QUALITY)">
+            <!-- Surface quality -->
+            <SidebarEntry
+                :title="$t('sidebar.surfaceQuality')"
+                icon="fa-road"
+                :icon-color="'#d63e12'"
+                :is-small="small"
+                :class="{
+                    selected: value === config.viewModes.SURFACE_QUALITY
+                }"
+                @entryClicked="switchToView(config.viewModes.SURFACE_QUALITY)"
+            >
                 <div class="entry-subtext">
-                    {{ $t('sidebar.surfaceQualityDescription') }}
+                    {{ $t("sidebar.surfaceQualityDescription") }}
                 </div>
             </SidebarEntry>
 
-            <SidebarEntry :title="$t('sidebar.relativeSpeed')"
-                          icon="fa-tachometer-alt"
-                          :icon-color="'#156ec7'"
-                          :is-small="small"
-                          :class="{'selected': value === config.viewModes.RELATIVE_SPEED}"
-                          @entryClicked="switchToView(config.viewModes.RELATIVE_SPEED)">
+            <!-- Speed -->
+            <SidebarEntry
+                :title="$t('sidebar.relativeSpeed')"
+                icon="fa-tachometer-alt"
+                :icon-color="'#156ec7'"
+                :is-small="small"
+                :class="{ selected: value === config.viewModes.RELATIVE_SPEED }"
+                @entryClicked="switchToView(config.viewModes.RELATIVE_SPEED)"
+            >
                 <div class="entry-subtext">
-                    {{ $t('sidebar.relativeSpeedDescription') }}
+                    {{ $t("sidebar.relativeSpeedDescription") }}
                 </div>
             </SidebarEntry>
 
-            <SidebarEntry :title="$t('sidebar.stopTimes')"
-                          icon="fa-traffic-light"
-                          :icon-color="'#1d917c'"
-                          :is-small="small"
-                          :class="{'selected': value === config.viewModes.STOP_TIMES}"
-                          @entryClicked="switchToView(config.viewModes.STOP_TIMES)">
+            <!-- Stop times -->
+            <SidebarEntry
+                :title="$t('sidebar.stopTimes')"
+                icon="fa-traffic-light"
+                :icon-color="'#1d917c'"
+                :is-small="small"
+                :class="{ selected: value === config.viewModes.STOP_TIMES }"
+                @entryClicked="switchToView(config.viewModes.STOP_TIMES)"
+            >
                 <div class="entry-subtext">
-                    {{ $t('sidebar.stopTimesDescription') }}
+                    {{ $t("sidebar.stopTimesDescription") }}
                 </div>
             </SidebarEntry>
 
-            <SidebarEntry :title="$t('sidebar.boxAnalysis')"
-                          icon="fa-draw-polygon"
-                          :icon-color="'#d63e12'"
-                          :is-small="small"
-                          :class="{'selected': value === config.viewModes.BOX_ANALYSIS}"
-                          @entryClicked="switchToView(config.viewModes.BOX_ANALYSIS, 1 << 0)">
+            <!-- Box analysis -->
+            <SidebarEntry
+                :title="$t('sidebar.boxAnalysis')"
+                icon="fa-draw-polygon"
+                :icon-color="'#d63e12'"
+                :is-small="small"
+                :class="{ selected: value === config.viewModes.BOX_ANALYSIS }"
+                @entryClicked="
+                    switchToView(config.viewModes.BOX_ANALYSIS, 1 << 0)
+                "
+            >
                 <div class="entry-subtext">
-                    {{ $t('sidebar.boxAnalysisDescription') }}
+                    {{ $t("sidebar.boxAnalysisDescription") }}
                 </div>
 
                 <div class="field" style="margin-top: 10px">
                     <b-checkbox v-model="computedBoxAnalysisHelper1">
-                        {{ $t('boxAnalysis.all') }}
+                        {{ $t("boxAnalysis.all") }}
                     </b-checkbox>
                 </div>
                 <div class="field">
                     <b-checkbox v-model="computedBoxAnalysisHelper2">
-                        {{ $t('boxAnalysis.start') }}
+                        {{ $t("boxAnalysis.start") }}
                     </b-checkbox>
                 </div>
                 <div class="field">
                     <b-checkbox v-model="computedBoxAnalysisHelper3">
-                        {{ $t('boxAnalysis.end') }}
+                        {{ $t("boxAnalysis.end") }}
                     </b-checkbox>
                 </div>
             </SidebarEntry>
 
-            <SidebarEntry :title="$t('sidebar.tools')"
-                          :icon="'fa-tools'"
-                          :icon-color="'#156ec7'"
-                          :is-small="small"
-                          :class="{'selected': value === config.viewModes.TOOLS}"
-                          @entryClicked="switchToView(config.viewModes.TOOLS)">
+            <!-- Tools -->
+            <SidebarEntry
+                :title="$t('sidebar.tools')"
+                :icon="'fa-tools'"
+                :icon-color="'#156ec7'"
+                :is-small="small"
+                :class="{ selected: value === config.viewModes.TOOLS }"
+                @entryClicked="switchToView(config.viewModes.TOOLS)"
+            >
                 <div class="entry-subtext">
-                    {{ $t('sidebar.toolsDescription') }}
+                    {{ $t("sidebar.toolsDescription") }}
+                </div>
+            </SidebarEntry>
+
+            <!-- Popularity of street segments -->
+            <SidebarEntry
+                :title="$t('sidebar.popularity')"
+                :icon="'fa-tools'"
+                :icon-color="'#1d917c'"
+                :is-small="small"
+                :class="{ selected: value === config.viewModes.POPULARITY }"
+                @entryClicked="switchToView(config.viewModes.POPULARITY)"
+            >
+                <div class="entry-subtext">
+                    {{ $t("sidebar.popularityDescription") }}
+                </div>
+
+                <!-- Aggregated street segments aggregated (avoided / chosen) -->
+                <div class="field" style="margin-top: 10px">
+                    <b-radio
+                        v-model="computedSubViewMode"
+                        :native-value="config.subViewModes.POPULARITY_COMBINED"
+                    >
+                        {{ $t("popularity.combined") }}
+                    </b-radio>
+                </div>
+                <!-- Density of avoided street segments -->
+                <div class="field">
+                    <b-radio
+                        v-model="computedSubViewMode"
+                        :native-value="config.subViewModes.POPULARITY_AVOIDED"
+                    >
+                        {{ $t("popularity.avoided") }}
+                    </b-radio>
+                </div>
+                <!-- Density of deliberately chosen street segments -->
+                <div class="field">
+                    <b-radio
+                        v-model="computedSubViewMode"
+                        :native-value="config.subViewModes.POPULARITY_CHOSEN"
+                    >
+                        {{ $t("popularity.chosen") }}
+                    </b-radio>
                 </div>
             </SidebarEntry>
         </div>
 
-        <div class="bottom-expand-button" @click="small = false" :title="$t('sidebar.expandMenu')">
+        <div
+            class="bottom-expand-button"
+            @click="small = false"
+            :title="$t('sidebar.expandMenu')"
+        >
             <i class="fas fa-lg fa-angle-double-right"></i>
         </div>
         <div class="bottom">
-            <div class="bottom-statistics"
-                 :title="small ? $t('sidebar.statistics') : ''"
-                 :class="{'selected': value === config.viewModes.STATISTICS}"
-                 @click="switchToView(config.viewModes.STATISTICS)">
+            <div
+                class="bottom-statistics"
+                :title="small ? $t('sidebar.statistics') : ''"
+                :class="{ selected: value === config.viewModes.STATISTICS }"
+                @click="switchToView(config.viewModes.STATISTICS)"
+            >
                 <div class="bottom-icon">
                     <i class="fas fa-lg fa-chart-pie"></i>
                 </div>
                 <div class="bottom-text">
-                    {{ $t('sidebar.statistics') }}
+                    {{ $t("sidebar.statistics") }}
                 </div>
             </div>
             <div class="bottom-reduce-button" @click="small = true">
@@ -145,31 +236,28 @@ import Config from "@/constants";
 export default {
     name: "Sidebar",
     components: { SidebarEntry },
-    props: [
-        'value',
-        'subViewMode',
-    ],
+    props: ["value", "subViewMode"],
     data() {
         return {
             config: Config,
-            small: false,
-        }
+            small: false
+        };
     },
     methods: {
         switchToView(viewId, defaultSubViewMode = Config.subViewModes.DEFAULT) {
             if (this.value === viewId) {
-                this.$emit('input', Config.viewModes.NONE);
+                this.$emit("input", Config.viewModes.NONE);
             } else {
-                this.$emit('input', viewId);
+                this.$emit("input", viewId);
             }
 
-            this.$emit('update:sub-view-mode', defaultSubViewMode);
-        },
+            this.$emit("update:sub-view-mode", defaultSubViewMode);
+        }
     },
     watch: {
-        small: function (newValue, oldValue) {
-            if (newValue !== oldValue) this.$emit('size-changed');
-        },
+        small: function(newValue, oldValue) {
+            if (newValue !== oldValue) this.$emit("size-changed");
+        }
     },
     computed: {
         computedSubViewMode: {
@@ -177,155 +265,183 @@ export default {
                 return this.subViewMode;
             },
             set(value) {
-                this.$emit('update:sub-view-mode', value);
+                this.$emit("update:sub-view-mode", value);
             }
         },
         computedBoxAnalysisHelper1: {
-            get() { return (this.subViewMode & 1 << 0) > 0 },
+            get() {
+                return (this.subViewMode & (1 << 0)) > 0;
+            },
             set(value) {
-                this.$emit('update:sub-view-mode', value ? (this.subViewMode | 1 << 0) : (this.subViewMode & ~(1 << 0)));
+                this.$emit(
+                    "update:sub-view-mode",
+                    value
+                        ? this.subViewMode | (1 << 0)
+                        : this.subViewMode & ~(1 << 0)
+                );
             }
         },
         computedBoxAnalysisHelper2: {
-            get() { return (this.subViewMode & 1 << 1) > 0 },
+            get() {
+                return (this.subViewMode & (1 << 1)) > 0;
+            },
             set(value) {
-                this.$emit('update:sub-view-mode', value ? (this.subViewMode | 1 << 1) : (this.subViewMode & ~(1 << 1)));
+                this.$emit(
+                    "update:sub-view-mode",
+                    value
+                        ? this.subViewMode | (1 << 1)
+                        : this.subViewMode & ~(1 << 1)
+                );
             }
         },
         computedBoxAnalysisHelper3: {
-            get() { return (this.subViewMode & 1 << 2) > 0 },
+            get() {
+                return (this.subViewMode & (1 << 2)) > 0;
+            },
             set(value) {
-                this.$emit('update:sub-view-mode', value ? (this.subViewMode | 1 << 2) : (this.subViewMode & ~(1 << 2)));
+                this.$emit(
+                    "update:sub-view-mode",
+                    value
+                        ? this.subViewMode | (1 << 2)
+                        : this.subViewMode & ~(1 << 2)
+                );
             }
-        },
+        }
     }
 };
 </script>
 
 <style lang="scss">
-    $sidebar-width: 304px;
+$sidebar-width: 304px;
 
-    .sidebar {
-        width: $sidebar-width;
-        flex-shrink: 0;
-        background-color: #fafafa;//#eaeaea;
-        border-right: 1px solid rgba(0, 0, 0, 0.1);
-        overflow-y: scroll;
-        height: calc(100vh - 57px);
-    }
+.sidebar {
+    width: $sidebar-width;
+    flex-shrink: 0;
+    background-color: #fafafa; //#eaeaea;
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+    overflow-y: scroll;
+    height: calc(100vh - 57px);
+}
 
-    .entries {
-        padding-top: 8px;
-        height: calc(100% - 53px);
-        overflow-y: auto;
-        overflow-x: hidden;
-    }
+.entries {
+    padding-top: 8px;
+    height: calc(100% - 53px);
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.bottom {
+    height: 52px;
+    display: flex;
+    align-items: center;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 
-    .bottom {
-        height: 52px;
+    .bottom-statistics {
         display: flex;
         align-items: center;
-        border-top: 1px solid rgba(0, 0, 0, 0.1);
-        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-
-        .bottom-statistics {
-            display: flex;
-            align-items: center;
-            padding: 12px 8px;
-            width: 100%;
-
-            &:hover, &:active {
-                background-color: #eaeaea;
-                cursor: pointer;
-            }
+        padding: 12px 8px;
+        width: 100%;
 
-            .bottom-icon {
-                width: 60px;
-                flex-shrink: 0;
-                padding-right: 6px;
-                text-align: center;
-                color: slategray;
-            }
-
-            .bottom-text {
-                width: 100%;
-                color: black;
-                font-size: 18px;
-                font-family: "Segoe UI VSS (Regular)", "Segoe UI", "-apple-system", BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-                user-select: none;
-            }
-
-            &.selected {
-                font-weight: bold;
-                background-color: #dcdcdc !important;
-                border-bottom: 1px solid #e0e0e0;
-
-                &::before {
-                    bottom: 0;
-                    background-color: rgba(0, 0, 0, .2);
-                    content: "";
-                    left: 0;
-                    position: absolute;
-                    top: 0;
-                    width: 3px;
-                }
-            }
+        &:hover,
+        &:active {
+            background-color: #eaeaea;
+            cursor: pointer;
         }
 
-        .bottom-reduce-button {
-            height: 100%;
+        .bottom-icon {
             width: 60px;
             flex-shrink: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            &:hover, &:active {
-                background-color: #eaeaea;
-                cursor: pointer;
-                color: #156ec7;
+            padding-right: 6px;
+            text-align: center;
+            color: slategray;
+        }
+
+        .bottom-text {
+            width: 100%;
+            color: black;
+            font-size: 18px;
+            font-family: "Segoe UI VSS (Regular)", "Segoe UI", "-apple-system",
+                BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Ubuntu,
+                Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+                "Segoe UI Symbol";
+            user-select: none;
+        }
+
+        &.selected {
+            font-weight: bold;
+            background-color: #dcdcdc !important;
+            border-bottom: 1px solid #e0e0e0;
+
+            &::before {
+                bottom: 0;
+                background-color: rgba(0, 0, 0, 0.2);
+                content: "";
+                left: 0;
+                position: absolute;
+                top: 0;
+                width: 3px;
             }
         }
     }
 
-    .bottom-expand-button {
-        height: 52px;
-        width: 70px;
-        display: none;
+    .bottom-reduce-button {
+        height: 100%;
+        width: 60px;
+        flex-shrink: 0;
+        display: flex;
         align-items: center;
         justify-content: center;
 
-        &:hover, &:active {
+        &:hover,
+        &:active {
             background-color: #eaeaea;
             cursor: pointer;
             color: #156ec7;
         }
     }
+}
 
-    .sidebar.small {
-        width: 71px;
-        overflow: hidden;
+.bottom-expand-button {
+    height: 52px;
+    width: 70px;
+    display: none;
+    align-items: center;
+    justify-content: center;
 
-        .entries {
-            height: calc(100% - 104px);
-        }
+    &:hover,
+    &:active {
+        background-color: #eaeaea;
+        cursor: pointer;
+        color: #156ec7;
+    }
+}
 
-        .entry {
-            .entry-label .entry-text, .entry-content {
-                display: none;
-            }
-        }
+.sidebar.small {
+    width: 71px;
+    overflow: hidden;
 
-        .bottom .bottom-statistics .bottom-text {
-            display: none;
-        }
+    .entries {
+        height: calc(100% - 104px);
+    }
 
-        .bottom .bottom-reduce-button {
+    .entry {
+        .entry-label .entry-text,
+        .entry-content {
             display: none;
         }
+    }
 
-        .bottom-expand-button {
-            display: flex;
-        }
+    .bottom .bottom-statistics .bottom-text {
+        display: none;
+    }
+
+    .bottom .bottom-reduce-button {
+        display: none;
+    }
+
+    .bottom-expand-button {
+        display: flex;
     }
+}
 </style>
diff --git a/frontend/src/constants.ts b/frontend/src/constants.ts
index 158bdb0..9718a4d 100644
--- a/frontend/src/constants.ts
+++ b/frontend/src/constants.ts
@@ -8,6 +8,7 @@ let viewModes = {
     STOP_TIMES: 5,
     BOX_ANALYSIS: 6,
     TOOLS: 7,
+    POPULARITY: 8,
     STATISTICS: 99,
 }
 
@@ -25,6 +26,9 @@ let subViewModes = {
     BOX_ANALYSIS_ALL: 0,
     BOX_ANALYSIS_START: 1,
     BOX_ANALYSIS_STOP: 2,
+    POPULARITY_COMBINED: 0,
+    POPULARITY_AVOIDED: 1,
+    POPULARITY_CHOSEN: 2
 }
 
 let osmAttribution = " &copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors";
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index e858524..30ac429 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -27,6 +27,8 @@
         "boxAnalysisDescription": "Draw a shape on the map to see what bike rides went through it. Click on the shape to draw a new one.",
         "tools": "Tools",
         "toolsDescription": "Upload a ride to analyze it (drag the file on the map).",
+        "popularity": "Popularity",
+        "popularityDescription": "Some fancy description for the popularity of street segments.",
         "statistics": "Statistics",
         "expandMenu": "Expand menu"
     },
@@ -42,7 +44,9 @@
         "relativeSpeedFaster": "Speed faster than average",
         "relativeSpeedAverage": "Average speed",
         "relativeSpeedSlower": "Speed slower than average",
-        "stopTimes": "Wait times per intersection"
+        "stopTimes": "Wait times per intersection",
+        "avoidedStreetSegments": "Avoided street segments",
+        "chosenStreetSegments": "Deliberately chosen street segments"
     },
     "map": {
         "loadingMapData": "Loading Map Data"
@@ -82,6 +86,11 @@
             "polygonEnd": "Click first point to close this shape."
         }
     },
+    "popularity": {
+        "avoided": "Avoided street segments",
+        "chosen": "Chosen street segements",
+        "combined": "Combined"
+    },
     "statistics": {
         "title": "Statistics for",
         "toptext": {
diff --git a/frontend/src/viewModes/popularity/PopularityView.vue b/frontend/src/viewModes/popularity/PopularityView.vue
new file mode 100644
index 0000000..746fd4a
--- /dev/null
+++ b/frontend/src/viewModes/popularity/PopularityView.vue
@@ -0,0 +1,54 @@
+<template>
+    <div>
+        <l-tile-layer
+            v-if="subViewMode === config.subViewModes.POPULARITY_COMBINED"
+            :url="TILE_URL + '/tiles/popularity-combined/{z}/{x}/{y}.png'"
+        />
+        <l-tile-layer
+            v-if="subViewMode === config.subViewModes.POPULARITY_AVOIDED"
+            :url="TILE_URL + '/tiles/popularity-avoided/{z}/{x}/{y}.png'"
+        />
+        <l-tile-layer
+            v-if="subViewMode === config.subViewModes.POPULARITY_CHOSEN"
+            :url="TILE_URL + '/tiles/popularity-chosen/{z}/{x}/{y}.png'"
+        />
+    </div>
+</template>
+
+<script>
+import { LGeoJson, LTileLayer } from "vue2-leaflet";
+
+import Config from "@/constants";
+
+export default {
+    name: "PopularityView",
+    components: {
+        LGeoJson,
+        LTileLayer
+    },
+    props: {
+        subViewMode: Number
+    },
+    data() {
+        return {
+            config: Config
+        };
+    },
+    computed: {
+        TILE_URL() {
+            return process.env.VUE_APP_TILE_URL;
+        }
+    }
+};
+</script>
+
+<style lang="scss">
+.rides-submode-switcher .b-tabs {
+    margin-top: 16px;
+
+    li > a {
+        background-color: white;
+        color: #3273dc;
+    }
+}
+</style>
diff --git a/frontend/src/views/Map.vue b/frontend/src/views/Map.vue
index d6b0e64..ca07a3f 100644
--- a/frontend/src/views/Map.vue
+++ b/frontend/src/views/Map.vue
@@ -1,35 +1,56 @@
 <template>
     <div>
-        <Navigation :map-style="mapStyle"
-                    :center="center"
-                    :zoom="zoom"
-                    @showAboutModal="showAboutModal = true"
-                    @update:map-style="mapStyle = $event; updateUrlQuery();"
+        <Navigation
+            :map-style="mapStyle"
+            :center="center"
+            :zoom="zoom"
+            @showAboutModal="showAboutModal = true"
+            @update:map-style="
+                mapStyle = $event;
+                updateUrlQuery();
+            "
         />
 
         <div class="main-layout" style="display:flex;">
-            <Sidebar v-model.sync="viewMode" ref="sidebar"
-                     :sub-view-mode="subViewMode"
-                     @size-changed="mapObject.invalidateSize()"
-                     @update:sub-view-mode="subViewMode = $event"
+            <Sidebar
+                v-model.sync="viewMode"
+                ref="sidebar"
+                :sub-view-mode="subViewMode"
+                @size-changed="mapObject.invalidateSize()"
+                @update:sub-view-mode="subViewMode = $event"
             />
 
             <section class="hero is-fullheight-with-navbar viewmode-container">
-                <l-map ref="map"
-                       style="width: 100%"
-                       :zoom="zoom"
-                       :center="center"
-                       :min-zoom="2"
-                       @update:zoom="zoom = $event"
-                       @update:center="center = $event; updateUrlQuery();"
-                       @update:bounds="bounds = $event"
-                       @click="clickedOnMap"
-                       :style="{'display: none': viewMode === config.viewModes.STATISTICS}"
+                <l-map
+                    ref="map"
+                    style="width: 100%"
+                    :zoom="zoom"
+                    :center="center"
+                    :min-zoom="2"
+                    @update:zoom="zoom = $event"
+                    @update:center="
+                        center = $event;
+                        updateUrlQuery();
+                    "
+                    @update:bounds="bounds = $event"
+                    @click="clickedOnMap"
+                    :style="{
+                        'display: none':
+                            viewMode === config.viewModes.STATISTICS
+                    }"
                 >
-                    <l-tile-layer :url="mapStyle.url" :class="{monochrome: false}" :attribution="mapStyle.attribution"/>
+                    <l-tile-layer
+                        :url="mapStyle.url"
+                        :class="{ monochrome: false }"
+                        :attribution="mapStyle.attribution"
+                    />
 
                     <div class="leaflet-control bottomcenter">
-                        <div class="loading-container" v-if="loadingProgress !== null" :class="{'invisible': loadingProgress === 100}">
+                        <div
+                            class="loading-container"
+                            v-if="loadingProgress !== null"
+                            :class="{ invisible: loadingProgress === 100 }"
+                        >
                             <div class="overlay overlay-loading">
                                 <div class="spinner-container">
                                     <scaling-squares-spinner
@@ -38,77 +59,124 @@
                                         color="hsl(217, 71%, 53%)"
                                     />
 
-                                    <div class="text">{{ $t('map.loadingMapData') }}</div>
+                                    <div class="text">
+                                        {{ $t("map.loadingMapData") }}
+                                    </div>
                                 </div>
 
-                                <b-progress type="is-primary is-small" :value="loadingProgress"/>
+                                <b-progress
+                                    type="is-primary is-small"
+                                    :value="loadingProgress"
+                                />
                             </div>
                         </div>
                     </div>
 
-                    <l-control position="bottomright" v-if="config.viewModeHasLegend(viewMode)">
-                        <MapLegend :view-mode="viewMode" :sub-view-mode="subViewMode" :zoom="zoom" class="is-hidden-mobile"/>
+                    <l-control
+                        position="bottomright"
+                        v-if="config.viewModeHasLegend(viewMode)"
+                    >
+                        <MapLegend
+                            :view-mode="viewMode"
+                            :sub-view-mode="subViewMode"
+                            :zoom="zoom"
+                            class="is-hidden-mobile"
+                        />
                     </l-control>
 
                     <!-- Because of a Vue/DOM problem, view modes have to be declared this way ... (wrapped in a tag) -->
                     <div>
-                        <RideView v-if="viewMode === config.viewModes.RIDES" ref="rideView"
-                                  :sub-view-mode="subViewMode"
-                                  @on-progress="updateLoadingView"
-                                  @update:sub-view-mode="subViewMode = $event"
+                        <RideView
+                            v-if="viewMode === config.viewModes.RIDES"
+                            ref="rideView"
+                            :sub-view-mode="subViewMode"
+                            @on-progress="updateLoadingView"
+                            @update:sub-view-mode="subViewMode = $event"
                         />
                     </div>
                     <div>
-                        <IncidentView v-if="viewMode === config.viewModes.INCIDENTS" ref="incidentView"
-                                      :zoom="zoom"
-                                      :bounds="bounds"
-                                      @on-progress="updateLoadingView"
-                                      @fit-in-view="fitMapObjectIntoView"
+                        <IncidentView
+                            v-if="viewMode === config.viewModes.INCIDENTS"
+                            ref="incidentView"
+                            :zoom="zoom"
+                            :bounds="bounds"
+                            @on-progress="updateLoadingView"
+                            @fit-in-view="fitMapObjectIntoView"
                         />
                     </div>
                     <div>
-                        <SurfaceQualityView v-if="viewMode === config.viewModes.SURFACE_QUALITY" ref="surfaceQualityView"
-                                            :sub-view-mode="subViewMode"
-                                            @on-progress="updateLoadingView"
-                                            @update:sub-view-mode="subViewMode = $event"
+                        <SurfaceQualityView
+                            v-if="viewMode === config.viewModes.SURFACE_QUALITY"
+                            ref="surfaceQualityView"
+                            :sub-view-mode="subViewMode"
+                            @on-progress="updateLoadingView"
+                            @update:sub-view-mode="subViewMode = $event"
                         />
                     </div>
                     <div>
-                        <RelativeSpeedView v-if="viewMode === config.viewModes.RELATIVE_SPEED" ref="relativeSpeedView"
-                                           :sub-view-mode="subViewMode"
-                                           @on-progress="updateLoadingView"
-                                           @update:sub-view-mode="subViewMode = $event"
+                        <RelativeSpeedView
+                            v-if="viewMode === config.viewModes.RELATIVE_SPEED"
+                            ref="relativeSpeedView"
+                            :sub-view-mode="subViewMode"
+                            @on-progress="updateLoadingView"
+                            @update:sub-view-mode="subViewMode = $event"
                         />
                     </div>
                     <div>
-                        <StopTimesView v-if="viewMode === config.viewModes.STOP_TIMES" ref="stopTimesView"
-                                       @on-progress="updateLoadingView"
+                        <StopTimesView
+                            v-if="viewMode === config.viewModes.STOP_TIMES"
+                            ref="stopTimesView"
+                            @on-progress="updateLoadingView"
                         />
                     </div>
                     <div>
-                        <BoxAnalysisView v-if="viewMode === config.viewModes.BOX_ANALYSIS" ref="boxAnalysisView"
-                                         :mapLayer="boxAnalysisMapLayer"
-                                         :sub-view-mode="subViewMode"
-                                         @on-progress="updateLoadingView"
-                                         @update:sub-view-mode="subViewMode = $event"
+                        <BoxAnalysisView
+                            v-if="viewMode === config.viewModes.BOX_ANALYSIS"
+                            ref="boxAnalysisView"
+                            :mapLayer="boxAnalysisMapLayer"
+                            :sub-view-mode="subViewMode"
+                            @on-progress="updateLoadingView"
+                            @update:sub-view-mode="subViewMode = $event"
                         />
                     </div>
                     <div>
-                        <ToolsView v-if="viewMode === config.viewModes.TOOLS" ref="toolsView"
-                                   @fit-in-view="fitMapObjectIntoView"
+                        <ToolsView
+                            v-if="viewMode === config.viewModes.TOOLS"
+                            ref="toolsView"
+                            @fit-in-view="fitMapObjectIntoView"
+                        />
+                    </div>
+                    <div>
+                        <PopularityView
+                            v-if="viewMode === config.viewModes.POPULARITY"
+                            ref="popularityView"
+                            :sub-view-mode="subViewMode"
+                            @on-progress="updateLoadingView"
+                            @update:sub-view-mode="subViewMode = $event"
                         />
                     </div>
 
-                    <l-tile-layer v-if="mapStyle.hasLabelLayer" :url="mapStyle.urlLabels" pane="overlayPane"/>
+                    <l-tile-layer
+                        v-if="mapStyle.hasLabelLayer"
+                        :url="mapStyle.urlLabels"
+                        pane="overlayPane"
+                    />
                 </l-map>
 
-                <div class="statistics-container" v-if="viewMode === config.viewModes.STATISTICS">
-                    <Statistics :regions="regions" ref="statisticsView"/>
+                <div
+                    class="statistics-container"
+                    v-if="viewMode === config.viewModes.STATISTICS"
+                >
+                    <Statistics :regions="regions" ref="statisticsView" />
                 </div>
             </section>
         </div>
 
-        <b-modal :active="showAboutModal" @close="showAboutModal = false" style="z-index: 999">
+        <b-modal
+            :active="showAboutModal"
+            @close="showAboutModal = false"
+            style="z-index: 999"
+        >
             <About />
         </b-modal>
     </div>
@@ -131,6 +199,7 @@ import RelativeSpeedView from "@/viewModes/relativeSpeed/RelativeSpeedView";
 import StopTimesView from "@/viewModes/stopTimes/StopTimesView";
 import BoxAnalysisView from "@/viewModes/boxAnalysis/BoxAnalysisView";
 import ToolsView from "@/viewModes/tools/ToolsView";
+import PopularityView from "@/viewModes/popularity/PopularityView";
 import Statistics from "@/views/Statistics";
 
 export default {
@@ -152,44 +221,52 @@ export default {
         StopTimesView,
         BoxAnalysisView,
         ToolsView,
+        PopularityView,
         Statistics,
-        About,
+        About
     },
     data() {
         return {
             // General
             config: Config,
             viewMode: parseInt(this.$route.query.m) || Config.viewModes.RIDES,
-            subViewMode: parseInt(this.$route.query.sm) || Config.subViewModes.DEFAULT,
+            subViewMode:
+                parseInt(this.$route.query.sm) || Config.subViewModes.DEFAULT,
             loadingProgress: null,
             regions: null,
             showAboutModal: false,
 
             // Map
             mapObject: null,
-            mapStyle: Config.mapStyles[this.$route.query.style] || Config.getDefaultMapStyle(),
+            mapStyle:
+                Config.mapStyles[this.$route.query.style] ||
+                Config.getDefaultMapStyle(),
             zoom: parseInt(this.$route.query.z) || 15,
-            center: [this.$route.query.lat || 52.5125322, this.$route.query.lng || 13.3269446],
+            center: [
+                this.$route.query.lat || 52.5125322,
+                this.$route.query.lng || 13.3269446
+            ],
             bounds: null,
 
             // Extras for view modes
-            boxAnalysisMapLayer: null,
+            boxAnalysisMapLayer: null
         };
     },
     methods: {
         updateUrlQuery() {
-            this.$router.replace({
-                name: "mapQuery",
-                params: {
-                    lat: this.center.lat,
-                    lng: this.center.lng,
-                    zoom: this.zoom,
-                    style: this.mapStyle.key,
-                    viewMode: this.viewMode,
-                    subViewMode: this.subViewMode,
-                },
-            }).catch(() => {
-            });
+            this.$router
+                .replace({
+                    name: "mapQuery",
+                    params: {
+                        lat: this.center.lat,
+                        lng: this.center.lng,
+                        zoom: this.zoom,
+                        style: this.mapStyle.key,
+                        viewMode: this.viewMode,
+                        subViewMode: this.subViewMode
+                    }
+                })
+                .catch(() => {});
         },
         fitMapObjectIntoView(mapObject) {
             // Fitting a map object (e.g. a ride) into view if it's not already
@@ -205,18 +282,25 @@ export default {
         },
         updateLoadingView(progress, expectedTotal) {
             if (expectedTotal === 0) return;
-            let currentProgress = Math.min(Math.max(progress / expectedTotal, 0.0), 1.0);
+            let currentProgress = Math.min(
+                Math.max(progress / expectedTotal, 0.0),
+                1.0
+            );
 
             const minOffset = 0.1;
-            this.loadingProgress = Math.min(minOffset + (currentProgress * (1.0 - minOffset)), 1.0) * 100;
+            this.loadingProgress =
+                Math.min(minOffset + currentProgress * (1.0 - minOffset), 1.0) *
+                100;
 
             if (progress === expectedTotal) {
-                setTimeout(() => this.loadingProgress = null, 1200);
+                setTimeout(() => (this.loadingProgress = null), 1200);
             }
-        },
+        }
     },
     async mounted() {
-        fetch("http://207.180.205.80:8000/api/regions/").then(r => r.json()).then(r => this.regions = r);
+        fetch("http://207.180.205.80:8000/api/regions/")
+            .then(r => r.json())
+            .then(r => (this.regions = r));
 
         this.$nextTick(() => {
             this.mapObject = this.$refs.map.mapObject;
@@ -225,136 +309,145 @@ export default {
             this.bounds = this.mapObject.getBounds();
             this.updateUrlQuery();
 
-            this.boxAnalysisMapLayer = new window.L.FeatureGroup().addTo(this.mapObject);
+            this.boxAnalysisMapLayer = new window.L.FeatureGroup().addTo(
+                this.mapObject
+            );
         });
     },
     watch: {
-        viewMode: function (newValue, oldValue) {
+        viewMode: function(newValue, oldValue) {
             this.updateUrlQuery();
             this.updateLoadingView(1, 1);
         },
-        subViewMode: function (newValue, oldValue) {
+        subViewMode: function(newValue, oldValue) {
             this.updateUrlQuery();
         }
-    },
+    }
 };
 </script>
 
 <style lang="scss">
-    $sidebar-width: 304px;
-
-    .viewmode-container {
-        border-top: none;
-        min-height: calc(100vh - 57px) !important;
-        width: calc(100vw - #{$sidebar-width} - 1px);
+$sidebar-width: 304px;
+
+.viewmode-container {
+    border-top: none;
+    min-height: calc(100vh - 57px) !important;
+    width: calc(100vw - #{$sidebar-width} - 1px);
+}
+
+.vue2leaflet-map {
+    height: 100%;
+    width: 100%;
+    flex: 1 0;
+
+    // The class monochrome can only be set on the element before
+    .monochrome
+        ~ .leaflet-pane.leaflet-map-pane
+        .leaflet-pane.leaflet-tile-pane
+        .leaflet-layer:nth-child(1) {
+        filter: grayscale(1);
     }
-
-    .vue2leaflet-map {
-        height: 100%;
-        width: 100%;
-        flex: 1 0;
-
-        // The class monochrome can only be set on the element before
-        .monochrome ~ .leaflet-pane.leaflet-map-pane .leaflet-pane.leaflet-tile-pane .leaflet-layer:nth-child(1) {
-            filter: grayscale(1);
-        }
+}
+
+.leaflet-control {
+    &.topcenter {
+        position: absolute;
+        top: 0;
+        width: 300px;
+        left: calc(50% - 150px);
+        right: calc(50% - 150px);
     }
 
-    .leaflet-control {
-        &.topcenter {
-            position: absolute;
-            top: 0;
-            width: 300px;
-            left: calc(50% - 150px);
-            right: calc(50% - 150px);
-        }
-
-        &.bottomcenter {
-            position: absolute;
-            bottom: 0;
-            width: 300px;
-            left: calc(50% - 150px);
-            right: calc(50% - 150px);
-
-            .loading-container {
-                $loadingProgressHeight: 0.4rem;
-
-                width: 100%;
-                margin: 0 0 calc(12px + #{$loadingProgressHeight});
-                display: flex;
-                justify-content: center;
-                transition: opacity 1s ease 0.2s, filter 1s ease 0.2s;
-
-                &.invisible {
-                    opacity: 0;
-                    filter: grayscale(.9);
-
-                    .scaling-squares-spinner, .scaling-squares-spinner .square {
-                        opacity: 0.6;
-                        transition: opacity 1s linear;
-                    }
+    &.bottomcenter {
+        position: absolute;
+        bottom: 0;
+        width: 300px;
+        left: calc(50% - 150px);
+        right: calc(50% - 150px);
+
+        .loading-container {
+            $loadingProgressHeight: 0.4rem;
+
+            width: 100%;
+            margin: 0 0 calc(12px + #{$loadingProgressHeight});
+            display: flex;
+            justify-content: center;
+            transition: opacity 1s ease 0.2s, filter 1s ease 0.2s;
+
+            &.invisible {
+                opacity: 0;
+                filter: grayscale(0.9);
+
+                .scaling-squares-spinner,
+                .scaling-squares-spinner .square {
+                    opacity: 0.6;
+                    transition: opacity 1s linear;
                 }
+            }
 
-                .overlay {
-                    padding: 0;
+            .overlay {
+                padding: 0;
 
-                    & > div {
-                        display: flex;
-                        padding: 10px 40px 10px 20px;
+                & > div {
+                    display: flex;
+                    padding: 10px 40px 10px 20px;
 
-                        .scaling-squares-spinner {
-                            flex: 0 1 30px;
-                        }
+                    .scaling-squares-spinner {
+                        flex: 0 1 30px;
+                    }
 
-                        .text {
-                            flex: 1 0;
-                            font-size: 16px;
-                            align-self: center;
-                            padding-left: 20px;
-                        }
+                    .text {
+                        flex: 1 0;
+                        font-size: 16px;
+                        align-self: center;
+                        padding-left: 20px;
                     }
+                }
 
-                    .progress-wrapper {
-                        position: relative;
-                        top: $loadingProgressHeight;
-                        margin-top: -$loadingProgressHeight;
-                        padding: 0;
+                .progress-wrapper {
+                    position: relative;
+                    top: $loadingProgressHeight;
+                    margin-top: -$loadingProgressHeight;
+                    padding: 0;
 
-                        progress {
-                            border-radius: 0 0 4px 4px;
-                            height: $loadingProgressHeight;
-                        }
+                    progress {
+                        border-radius: 0 0 4px 4px;
+                        height: $loadingProgressHeight;
                     }
                 }
             }
         }
-
-        .overlay {
-            padding: 10px;
-            background-color: white;
-            -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-            box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-            color: #4a4a4a;
-            position: relative;
-        }
-
-        &.leaflet-control-zoom {
-            display: none;
-        }
     }
 
-    .statistics-container {
-        position: fixed;
-        max-height: 100%;
-        width: calc(100vw - #{$sidebar-width} - 1px);
-        overflow-y: scroll;
-        z-index: 1000;
-        background: #f3f3f3;
+    .overlay {
+        padding: 10px;
+        background-color: white;
+        -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1),
+            0 0 0 1px rgba(10, 10, 10, 0.1);
+        box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1),
+            0 0 0 1px rgba(10, 10, 10, 0.1);
+        color: #4a4a4a;
+        position: relative;
     }
 
-    .sidebar.small + .viewmode-container {
-        &, .statistics-container {
-            width: calc(100vw - 72px);
-        }
+    &.leaflet-control-zoom {
+        display: none;
+    }
+}
+
+.statistics-container {
+    position: fixed;
+    max-height: 100%;
+    width: calc(100vw - #{$sidebar-width} - 1px);
+    overflow-y: scroll;
+    z-index: 1000;
+    background: #f3f3f3;
+}
+
+.sidebar.small + .viewmode-container {
+    &,
+    .statistics-container {
+        width: calc(100vw - 72px);
     }
+}
 </style>

From 4d04d18d665e1aef3f7140ae6474b5add7140122 Mon Sep 17 00:00:00 2001
From: KrokodileDandy <s.fuehr1@gmail.com>
Date: Mon, 14 Jun 2021 07:15:40 +0200
Subject: [PATCH 03/18] Change config to be localhost

---
 frontend/.env             | 4 ++--
 frontend/src/constants.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/.env b/frontend/.env
index 5c1440e..8c54c16 100644
--- a/frontend/.env
+++ b/frontend/.env
@@ -1,6 +1,6 @@
 VUE_APP_TITLE="SimRa Visualization (Dev)"
-VUE_APP_API_URL=http://207.180.205.80:8000
-VUE_APP_TILE_URL=http://207.180.205.80:1337
+VUE_APP_API_URL=http://127.0.0.1:8000
+VUE_APP_TILE_URL=http://127.0.0.1:1337
 VUE_APP_DEBUG=false
 VUE_APP_I18N_LOCALE=en
 VUE_APP_I18N_FALLBACK_LOCALE=en
diff --git a/frontend/src/constants.ts b/frontend/src/constants.ts
index 9718a4d..9971fa7 100644
--- a/frontend/src/constants.ts
+++ b/frontend/src/constants.ts
@@ -99,7 +99,7 @@ export default {
     viewModes: viewModes,
     subViewModes: subViewModes,
     viewModeHasLegend(viewMode: number) {
-        return viewMode === viewModes.RIDES || viewMode === viewModes.INCIDENTS || viewMode === viewModes.SURFACE_QUALITY || viewMode === viewModes.RELATIVE_SPEED || viewMode === viewModes.STOP_TIMES;
+        return viewMode === viewModes.RIDES || viewMode === viewModes.INCIDENTS || viewMode === viewModes.SURFACE_QUALITY || viewMode === viewModes.RELATIVE_SPEED || viewMode === viewModes.STOP_TIMES || viewMode === viewModes.POPULARITY;
     },
     mapStyles: mapStyles,
     getDefaultMapStyle: () => {

From 70e35fc08abe864f83cd53fc129368fef2f49402 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20F=C3=BChr?= <s.fuehr1@gmail.com>
Date: Thu, 17 Jun 2021 09:22:44 +0200
Subject: [PATCH 04/18] Add 4 map modes for street segment popularity

In addition the side bar menu for popularity (radio buttons) was
removed. For the first three maps, legends where added.
---
 frontend/package-lock.json                    | 494 +++++++++---------
 frontend/src/components/MapLegend.vue         |  37 ++
 frontend/src/components/Sidebar.vue           |  28 -
 frontend/src/constants.ts                     |   3 +-
 frontend/src/locales/en.json                  |  13 +-
 .../viewModes/popularity/PopularityView.vue   |  25 +-
 6 files changed, 318 insertions(+), 282 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 64e013e..ab0004d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1648,142 +1648,6 @@
                 "tslint": "^5.20.1",
                 "webpack": "^4.0.0",
                 "yorkie": "^2.0.0"
-            },
-            "dependencies": {
-                "ajv": {
-                    "version": "6.12.6",
-                    "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-                    "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "fast-deep-equal": "^3.1.1",
-                        "fast-json-stable-stringify": "^2.0.0",
-                        "json-schema-traverse": "^0.4.1",
-                        "uri-js": "^4.2.2"
-                    }
-                },
-                "ansi-styles": {
-                    "version": "4.3.0",
-                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-                    "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "color-convert": "^2.0.1"
-                    }
-                },
-                "chalk": {
-                    "version": "4.1.1",
-                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-                    "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "ansi-styles": "^4.1.0",
-                        "supports-color": "^7.1.0"
-                    }
-                },
-                "color-convert": {
-                    "version": "2.0.1",
-                    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-                    "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "color-name": "~1.1.4"
-                    }
-                },
-                "color-name": {
-                    "version": "1.1.4",
-                    "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-                    "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-                    "dev": true,
-                    "optional": true
-                },
-                "fast-deep-equal": {
-                    "version": "3.1.3",
-                    "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-                    "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-                    "dev": true,
-                    "optional": true
-                },
-                "fork-ts-checker-webpack-plugin-v5": {
-                    "version": "npm:fork-ts-checker-webpack-plugin@5.2.1",
-                    "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.2.1.tgz",
-                    "integrity": "sha512-SVi+ZAQOGbtAsUWrZvGzz38ga2YqjWvca1pXQFUArIVXqli0lLoDQ8uS0wg0kSpcwpZmaW5jVCZXQebkyUQSsw==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "@babel/code-frame": "^7.8.3",
-                        "@types/json-schema": "^7.0.5",
-                        "chalk": "^4.1.0",
-                        "cosmiconfig": "^6.0.0",
-                        "deepmerge": "^4.2.2",
-                        "fs-extra": "^9.0.0",
-                        "memfs": "^3.1.2",
-                        "minimatch": "^3.0.4",
-                        "schema-utils": "2.7.0",
-                        "semver": "^7.3.2",
-                        "tapable": "^1.0.0"
-                    }
-                },
-                "has-flag": {
-                    "version": "4.0.0",
-                    "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-                    "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-                    "dev": true,
-                    "optional": true
-                },
-                "lru-cache": {
-                    "version": "6.0.0",
-                    "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-                    "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "yallist": "^4.0.0"
-                    }
-                },
-                "schema-utils": {
-                    "version": "2.7.0",
-                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
-                    "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "@types/json-schema": "^7.0.4",
-                        "ajv": "^6.12.2",
-                        "ajv-keywords": "^3.4.1"
-                    }
-                },
-                "semver": {
-                    "version": "7.3.5",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-                    "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "lru-cache": "^6.0.0"
-                    }
-                },
-                "supports-color": {
-                    "version": "7.2.0",
-                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-                    "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "has-flag": "^4.0.0"
-                    }
-                },
-                "yallist": {
-                    "version": "4.0.0",
-                    "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-                    "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-                    "dev": true,
-                    "optional": true
-                }
             }
         },
         "@vue/cli-plugin-vuex": {
@@ -1874,16 +1738,6 @@
                         "uri-js": "^4.2.2"
                     }
                 },
-                "ansi-styles": {
-                    "version": "4.3.0",
-                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-                    "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "color-convert": "^2.0.1"
-                    }
-                },
                 "cacache": {
                     "version": "13.0.1",
                     "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1910,17 +1764,6 @@
                         "unique-filename": "^1.1.1"
                     }
                 },
-                "chalk": {
-                    "version": "4.1.1",
-                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-                    "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "ansi-styles": "^4.1.0",
-                        "supports-color": "^7.1.0"
-                    }
-                },
                 "cliui": {
                     "version": "6.0.0",
                     "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@@ -1932,30 +1775,6 @@
                         "wrap-ansi": "^6.2.0"
                     }
                 },
-                "color-convert": {
-                    "version": "2.0.1",
-                    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-                    "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "color-name": "~1.1.4"
-                    }
-                },
-                "color-name": {
-                    "version": "1.1.4",
-                    "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-                    "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-                    "dev": true,
-                    "optional": true
-                },
-                "emojis-list": {
-                    "version": "3.0.0",
-                    "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-                    "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-                    "dev": true,
-                    "optional": true
-                },
                 "fast-deep-equal": {
                     "version": "3.1.3",
                     "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -1994,13 +1813,6 @@
                         "universalify": "^0.1.0"
                     }
                 },
-                "has-flag": {
-                    "version": "4.0.0",
-                    "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-                    "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-                    "dev": true,
-                    "optional": true
-                },
                 "is-fullwidth-code-point": {
                     "version": "3.0.0",
                     "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -2016,18 +1828,6 @@
                         "graceful-fs": "^4.1.6"
                     }
                 },
-                "loader-utils": {
-                    "version": "2.0.0",
-                    "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-                    "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "big.js": "^5.2.2",
-                        "emojis-list": "^3.0.0",
-                        "json5": "^2.1.2"
-                    }
-                },
                 "locate-path": {
                     "version": "5.0.0",
                     "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -2123,16 +1923,6 @@
                         "strip-ansi": "^6.0.0"
                     }
                 },
-                "supports-color": {
-                    "version": "7.2.0",
-                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-                    "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "has-flag": "^4.0.0"
-                    }
-                },
                 "terser-webpack-plugin": {
                     "version": "2.3.8",
                     "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -2155,18 +1945,6 @@
                     "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
                     "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
                     "dev": true
-                },
-                "vue-loader-v16": {
-                    "version": "npm:vue-loader@16.2.0",
-                    "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
-                    "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "chalk": "^4.1.0",
-                        "hash-sum": "^2.0.0",
-                        "loader-utils": "^2.0.0"
-                    }
                 }
             }
         },
@@ -6012,6 +5790,142 @@
                 "worker-rpc": "^0.1.0"
             }
         },
+        "fork-ts-checker-webpack-plugin-v5": {
+            "version": "npm:fork-ts-checker-webpack-plugin@5.2.1",
+            "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.2.1.tgz",
+            "integrity": "sha512-SVi+ZAQOGbtAsUWrZvGzz38ga2YqjWvca1pXQFUArIVXqli0lLoDQ8uS0wg0kSpcwpZmaW5jVCZXQebkyUQSsw==",
+            "dev": true,
+            "optional": true,
+            "requires": {
+                "@babel/code-frame": "^7.8.3",
+                "@types/json-schema": "^7.0.5",
+                "chalk": "^4.1.0",
+                "cosmiconfig": "^6.0.0",
+                "deepmerge": "^4.2.2",
+                "fs-extra": "^9.0.0",
+                "memfs": "^3.1.2",
+                "minimatch": "^3.0.4",
+                "schema-utils": "2.7.0",
+                "semver": "^7.3.2",
+                "tapable": "^1.0.0"
+            },
+            "dependencies": {
+                "ajv": {
+                    "version": "6.12.6",
+                    "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+                    "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "fast-deep-equal": "^3.1.1",
+                        "fast-json-stable-stringify": "^2.0.0",
+                        "json-schema-traverse": "^0.4.1",
+                        "uri-js": "^4.2.2"
+                    }
+                },
+                "ansi-styles": {
+                    "version": "4.3.0",
+                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+                    "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "color-convert": "^2.0.1"
+                    }
+                },
+                "chalk": {
+                    "version": "4.1.1",
+                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+                    "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "ansi-styles": "^4.1.0",
+                        "supports-color": "^7.1.0"
+                    }
+                },
+                "color-convert": {
+                    "version": "2.0.1",
+                    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+                    "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "color-name": "~1.1.4"
+                    }
+                },
+                "color-name": {
+                    "version": "1.1.4",
+                    "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+                    "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+                    "dev": true,
+                    "optional": true
+                },
+                "fast-deep-equal": {
+                    "version": "3.1.3",
+                    "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+                    "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+                    "dev": true,
+                    "optional": true
+                },
+                "has-flag": {
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+                    "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+                    "dev": true,
+                    "optional": true
+                },
+                "lru-cache": {
+                    "version": "6.0.0",
+                    "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+                    "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "yallist": "^4.0.0"
+                    }
+                },
+                "schema-utils": {
+                    "version": "2.7.0",
+                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
+                    "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "@types/json-schema": "^7.0.4",
+                        "ajv": "^6.12.2",
+                        "ajv-keywords": "^3.4.1"
+                    }
+                },
+                "semver": {
+                    "version": "7.3.5",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+                    "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "lru-cache": "^6.0.0"
+                    }
+                },
+                "supports-color": {
+                    "version": "7.2.0",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+                    "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "has-flag": "^4.0.0"
+                    }
+                },
+                "yallist": {
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+                    "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+                    "dev": true,
+                    "optional": true
+                }
+            }
+        },
         "form-data": {
             "version": "2.3.3",
             "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
@@ -6055,16 +5969,16 @@
             }
         },
         "fs-extra": {
-            "version": "9.0.1",
-            "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
-            "integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
+            "version": "9.1.0",
+            "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+            "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
             "dev": true,
             "optional": true,
             "requires": {
                 "at-least-node": "^1.0.0",
                 "graceful-fs": "^4.2.0",
                 "jsonfile": "^6.0.1",
-                "universalify": "^1.0.0"
+                "universalify": "^2.0.0"
             }
         },
         "fs-minipass": {
@@ -6077,9 +5991,9 @@
             }
         },
         "fs-monkey": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.1.tgz",
-            "integrity": "sha512-fcSa+wyTqZa46iWweI7/ZiUfegOZl0SG8+dltIwFXo7+zYU9J9kpS3NB6pZcSlJdhvIwp81Adx2XhZorncxiaA==",
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
+            "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==",
             "dev": true,
             "optional": true
         },
@@ -6768,9 +6682,9 @@
             }
         },
         "import-fresh": {
-            "version": "3.2.1",
-            "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
-            "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+            "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
             "dev": true,
             "optional": true,
             "requires": {
@@ -7358,14 +7272,14 @@
             }
         },
         "jsonfile": {
-            "version": "6.0.1",
-            "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.0.1.tgz",
-            "integrity": "sha512-jR2b5v7d2vIOust+w3wtFKZIfpC2pnRmFAhAC/BuweZFQR8qZzxH1OyrQ10HmdVYiXWkYUqPVsz91cG7EL2FBg==",
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+            "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
             "dev": true,
             "optional": true,
             "requires": {
                 "graceful-fs": "^4.1.6",
-                "universalify": "^1.0.0"
+                "universalify": "^2.0.0"
             }
         },
         "jsprim": {
@@ -7741,13 +7655,13 @@
             "dev": true
         },
         "memfs": {
-            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.2.0.tgz",
-            "integrity": "sha512-f/xxz2TpdKv6uDn6GtHee8ivFyxwxmPuXatBb1FBwxYNuVpbM3k/Y1Z+vC0mH/dIXXrukYfe3qe5J32Dfjg93A==",
+            "version": "3.2.2",
+            "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.2.2.tgz",
+            "integrity": "sha512-RE0CwmIM3CEvpcdK3rZ19BC4E6hv9kADkMN5rPduRak58cNArWLi/9jFLsa4rhsjfVxMP3v0jO7FHXq7SvFY5Q==",
             "dev": true,
             "optional": true,
             "requires": {
-                "fs-monkey": "1.0.1"
+                "fs-monkey": "1.0.3"
             }
         },
         "memory-fs": {
@@ -11790,9 +11704,9 @@
             }
         },
         "universalify": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
-            "integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==",
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+            "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
             "dev": true,
             "optional": true
         },
@@ -12164,6 +12078,94 @@
                 }
             }
         },
+        "vue-loader-v16": {
+            "version": "npm:vue-loader@16.2.0",
+            "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
+            "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
+            "dev": true,
+            "optional": true,
+            "requires": {
+                "chalk": "^4.1.0",
+                "hash-sum": "^2.0.0",
+                "loader-utils": "^2.0.0"
+            },
+            "dependencies": {
+                "ansi-styles": {
+                    "version": "4.3.0",
+                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+                    "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "color-convert": "^2.0.1"
+                    }
+                },
+                "chalk": {
+                    "version": "4.1.1",
+                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+                    "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "ansi-styles": "^4.1.0",
+                        "supports-color": "^7.1.0"
+                    }
+                },
+                "color-convert": {
+                    "version": "2.0.1",
+                    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+                    "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "color-name": "~1.1.4"
+                    }
+                },
+                "color-name": {
+                    "version": "1.1.4",
+                    "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+                    "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+                    "dev": true,
+                    "optional": true
+                },
+                "emojis-list": {
+                    "version": "3.0.0",
+                    "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+                    "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+                    "dev": true,
+                    "optional": true
+                },
+                "has-flag": {
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+                    "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+                    "dev": true,
+                    "optional": true
+                },
+                "loader-utils": {
+                    "version": "2.0.0",
+                    "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+                    "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "big.js": "^5.2.2",
+                        "emojis-list": "^3.0.0",
+                        "json5": "^2.1.2"
+                    }
+                },
+                "supports-color": {
+                    "version": "7.2.0",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+                    "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "has-flag": "^4.0.0"
+                    }
+                }
+            }
+        },
         "vue-property-decorator": {
             "version": "8.5.1",
             "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-8.5.1.tgz",
@@ -12938,9 +12940,9 @@
             "dev": true
         },
         "yaml": {
-            "version": "1.10.0",
-            "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz",
-            "integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==",
+            "version": "1.10.2",
+            "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+            "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
             "dev": true,
             "optional": true
         },
diff --git a/frontend/src/components/MapLegend.vue b/frontend/src/components/MapLegend.vue
index 012932f..3b2f120 100644
--- a/frontend/src/components/MapLegend.vue
+++ b/frontend/src/components/MapLegend.vue
@@ -85,6 +85,39 @@
             </div>
             <div class="text-box">{{ $t('legend.stopTimes') }}</div>
         </template>
+
+        <!-- Popularity score p_score -->
+        <template v-if="viewMode === config.viewModes.POPULARITY && subViewMode === config.subViewModes.POPULARITY_COMBINED">
+            <div class="symbol-container">
+                <div class="symbol symbol-box gradient1"/>
+                <div class="symbol symbol-box gradient2" v-if="zoom <= 15"/>
+                <div class="symbol symbol-box gradient3"/>
+                <div class="symbol symbol-box gradient4"/>
+                <div class="symbol symbol-box gradient5"/>
+                <div class="symbol symbol-box gradient6" v-if="zoom <= 15"/>
+            </div>
+            <div class="text-box">{{ $t('legend.popularityCombined') }}</div>
+        </template>
+
+        <!-- Avoided street segment density -->
+        <template v-if="viewMode === config.viewModes.POPULARITY && subViewMode == config.subViewModes.POPULARITY_AVOIDED">
+            <div class="symbol-container">
+                <div class="symbol symbol-box red1 one-third"/>
+                <div class="symbol symbol-box red2 two-thirds"/>
+                <div class="symbol symbol-box red3"/>
+            </div>
+            <div class="text-box">{{ $t('legend.avoidedStreetSegments') }}</div>
+        </template>
+
+        <!-- Chosen street segment density -->
+        <template v-if="viewMode === config.viewModes.POPULARITY && subViewMode == config.subViewModes.POPULARITY_CHOSEN">
+            <div class="symbol-container">
+                <div class="symbol symbol-box blue1 one-third"/>
+                <div class="symbol symbol-box blue2 two-thirds"/>
+                <div class="symbol symbol-box blue3"/>
+            </div>
+            <div class="text-box">{{ $t('legend.chosenStreetSegments') }}</div>
+        </template>
     </div>
 </template>
 
@@ -163,6 +196,10 @@ export default {
         &.blue2 { background-color: hsl(215, 71%, 53%); opacity: 0.9; }
         &.blue3 { background-color: hsl(240, 71%, 53%); }
 
+        &.red1 {background-color: hsl(80, 80%, 48%); }
+        &.red2 {background-color: hsl(55, 80%, 48%); }
+        &.red3 {background-color: hsl(30, 80%, 48%); }
+
         &.gradient1 { background-color: rgb(68, 153, 53); }
         &.gradient2 { background-color: rgb(142, 192, 84); }
         &.gradient3 { background-color: rgb(237, 226, 4); }
diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
index 82bb911..dfc0431 100644
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -170,34 +170,6 @@
                 <div class="entry-subtext">
                     {{ $t("sidebar.popularityDescription") }}
                 </div>
-
-                <!-- Aggregated street segments aggregated (avoided / chosen) -->
-                <div class="field" style="margin-top: 10px">
-                    <b-radio
-                        v-model="computedSubViewMode"
-                        :native-value="config.subViewModes.POPULARITY_COMBINED"
-                    >
-                        {{ $t("popularity.combined") }}
-                    </b-radio>
-                </div>
-                <!-- Density of avoided street segments -->
-                <div class="field">
-                    <b-radio
-                        v-model="computedSubViewMode"
-                        :native-value="config.subViewModes.POPULARITY_AVOIDED"
-                    >
-                        {{ $t("popularity.avoided") }}
-                    </b-radio>
-                </div>
-                <!-- Density of deliberately chosen street segments -->
-                <div class="field">
-                    <b-radio
-                        v-model="computedSubViewMode"
-                        :native-value="config.subViewModes.POPULARITY_CHOSEN"
-                    >
-                        {{ $t("popularity.chosen") }}
-                    </b-radio>
-                </div>
             </SidebarEntry>
         </div>
 
diff --git a/frontend/src/constants.ts b/frontend/src/constants.ts
index 9971fa7..9219c9e 100644
--- a/frontend/src/constants.ts
+++ b/frontend/src/constants.ts
@@ -28,7 +28,8 @@ let subViewModes = {
     BOX_ANALYSIS_STOP: 2,
     POPULARITY_COMBINED: 0,
     POPULARITY_AVOIDED: 1,
-    POPULARITY_CHOSEN: 2
+    POPULARITY_CHOSEN: 2,
+    POPULARITY_SCORE: 3,
 }
 
 let osmAttribution = " &copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors";
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 30ac429..f71925f 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -28,7 +28,7 @@
         "tools": "Tools",
         "toolsDescription": "Upload a ride to analyze it (drag the file on the map).",
         "popularity": "Popularity",
-        "popularityDescription": "Some fancy description for the popularity of street segments.",
+        "popularityDescription": "The subjective popularity of street segments.",
         "statistics": "Statistics",
         "expandMenu": "Expand menu"
     },
@@ -45,8 +45,10 @@
         "relativeSpeedAverage": "Average speed",
         "relativeSpeedSlower": "Speed slower than average",
         "stopTimes": "Wait times per intersection",
+        "popularityCombined": "Popularity of a street segment",
         "avoidedStreetSegments": "Avoided street segments",
-        "chosenStreetSegments": "Deliberately chosen street segments"
+        "chosenStreetSegments": "Deliberately chosen street segments",
+        "popularityScore": "Popularity and safety of a street segment"
     },
     "map": {
         "loadingMapData": "Loading Map Data"
@@ -87,9 +89,10 @@
         }
     },
     "popularity": {
-        "avoided": "Avoided street segments",
-        "chosen": "Chosen street segements",
-        "combined": "Combined"
+        "avoided": "Avoided",
+        "chosen": "Chosen",
+        "combined": "Combined",
+        "score": "Score"
     },
     "statistics": {
         "title": "Statistics for",
diff --git a/frontend/src/viewModes/popularity/PopularityView.vue b/frontend/src/viewModes/popularity/PopularityView.vue
index 746fd4a..04b03b0 100644
--- a/frontend/src/viewModes/popularity/PopularityView.vue
+++ b/frontend/src/viewModes/popularity/PopularityView.vue
@@ -1,16 +1,33 @@
 <template>
     <div>
+        <div class="leaflet-control topcenter rides-submode-switcher" v-if="subViewMode === config.subViewModes.POPULARITY_COMBINED || subViewMode === config.subViewModes.POPULARITY_AVOIDED || subViewMode === config.subViewModes.POPULARITY_CHOSEN || subViewMode === config.subViewModes.POPULARITY_SCORE">
+            <b-tabs type="is-toggle-rounded"
+                    :value="subViewMode"
+                    @change="$emit('update:sub-view-mode', $event)"
+                    @update="$emit('update:sub-view-mode', $event)"
+            >
+                <b-tab-item :label="$t('popularity.combined')" icon="chart-area"></b-tab-item>
+                <b-tab-item :label="$t('popularity.avoided')" icon="database"></b-tab-item>
+                <b-tab-item :label="$t('popularity.chosen')" icon="database"></b-tab-item>
+                <b-tab-item :label="$t('popularity.score')" icon="database"></b-tab-item>
+            </b-tabs>
+        </div>
+
         <l-tile-layer
             v-if="subViewMode === config.subViewModes.POPULARITY_COMBINED"
             :url="TILE_URL + '/tiles/popularity-combined/{z}/{x}/{y}.png'"
         />
         <l-tile-layer
             v-if="subViewMode === config.subViewModes.POPULARITY_AVOIDED"
-            :url="TILE_URL + '/tiles/popularity-avoided/{z}/{x}/{y}.png'"
+            :url="TILE_URL + '/tiles/popularity-original_avoided/{z}/{x}/{y}.png'"
         />
         <l-tile-layer
             v-if="subViewMode === config.subViewModes.POPULARITY_CHOSEN"
-            :url="TILE_URL + '/tiles/popularity-chosen/{z}/{x}/{y}.png'"
+            :url="TILE_URL + '/tiles/popularity-original_chosen/{z}/{x}/{y}.png'"
+        />
+        <l-tile-layer
+            v-if="subViewMode === config.subViewModes.POPULARITY_SCORE"
+            :url="TILE_URL + '/tiles/popularity-score/{z}/{x}/{y}.png'"
         />
     </div>
 </template>
@@ -45,6 +62,10 @@ export default {
 <style lang="scss">
 .rides-submode-switcher .b-tabs {
     margin-top: 16px;
+    position: absolute;
+    width: 500px;
+    left: calc(50% - 250px);
+    right: calc(50% - 250px);
 
     li > a {
         background-color: white;

From f09ea091c54e64dbbd622a87d44a44128eabd243 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20F=C3=BChr?= <s.fuehr1@gmail.com>
Date: Fri, 18 Jun 2021 08:27:53 +0200
Subject: [PATCH 05/18] Move popularity sidebar button up

---
 frontend/src/components/Sidebar.vue | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
index dfc0431..832d937 100644
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -112,6 +112,20 @@
                 </div>
             </SidebarEntry>
 
+            <!-- Popularity of street segments -->
+            <SidebarEntry
+                :title="$t('sidebar.popularity')"
+                :icon="'fa-tools'"
+                :icon-color="'#1d917c'"
+                :is-small="small"
+                :class="{ selected: value === config.viewModes.POPULARITY }"
+                @entryClicked="switchToView(config.viewModes.POPULARITY)"
+            >
+                <div class="entry-subtext">
+                    {{ $t("sidebar.popularityDescription") }}
+                </div>
+            </SidebarEntry>
+
             <!-- Box analysis -->
             <SidebarEntry
                 :title="$t('sidebar.boxAnalysis')"
@@ -157,20 +171,6 @@
                     {{ $t("sidebar.toolsDescription") }}
                 </div>
             </SidebarEntry>
-
-            <!-- Popularity of street segments -->
-            <SidebarEntry
-                :title="$t('sidebar.popularity')"
-                :icon="'fa-tools'"
-                :icon-color="'#1d917c'"
-                :is-small="small"
-                :class="{ selected: value === config.viewModes.POPULARITY }"
-                @entryClicked="switchToView(config.viewModes.POPULARITY)"
-            >
-                <div class="entry-subtext">
-                    {{ $t("sidebar.popularityDescription") }}
-                </div>
-            </SidebarEntry>
         </div>
 
         <div

From cdf171a10b4257fcdeb84077ed45ecbb9c6b7943 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20F=C3=BChr?= <s.fuehr1@gmail.com>
Date: Fri, 18 Jun 2021 10:50:43 +0200
Subject: [PATCH 06/18] Add dynamic mixed popularity score legend

---
 frontend/src/components/MapLegend.vue | 30 +++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/frontend/src/components/MapLegend.vue b/frontend/src/components/MapLegend.vue
index 3b2f120..6eeb8ba 100644
--- a/frontend/src/components/MapLegend.vue
+++ b/frontend/src/components/MapLegend.vue
@@ -20,6 +20,7 @@
                 <div class="text-box">{{ $t('legend.regularIncident') }}</div>
         </template>
 
+        <!-- Incidents combined -->
         <template v-if="viewMode === config.viewModes.INCIDENTS">
             <template v-if="zoom > 15">
                 <div class="symbol symbol-marker marker-scary"><i class="fa fa-car"/></div>
@@ -118,6 +119,35 @@
             </div>
             <div class="text-box">{{ $t('legend.chosenStreetSegments') }}</div>
         </template>
+
+        <!-- Mixed popularity score p_mscore -->
+        <template v-if="viewMode === config.viewModes.POPULARITY && subViewMode === config.subViewModes.POPULARITY_SCORE">
+            <!-- Show different incident markes, depending on zoom level. -->
+            <template v-if="zoom > 15">
+                <div class="symbol symbol-marker marker-scary"><i class="fa fa-car"/></div>
+                <div class="text-box">{{ $t('legend.scaryIncident') }}</div>
+
+                <div class="symbol symbol-marker marker-regular"><i class="fa fa-car"/></div>
+                <div class="text-box">{{ $t('legend.regularIncident') }}</div>
+            </template>
+            <template v-else>
+                <div class="symbol-container">
+                    <div class="symbol symbol-circle" style="background-color: #9e1a16"/>
+                    <div class="symbol symbol-circle" style="background-color: #777777"/>
+                </div>
+                <div class="text-box">{{ $t('legend.incidents') }}</div>
+            </template>
+
+            <div class="symbol-container">
+                <div class="symbol symbol-box gradient1"/>
+                <div class="symbol symbol-box gradient2"/>
+                <div class="symbol symbol-box gradient3"/>
+                <div class="symbol symbol-box gradient4"/>
+                <div class="symbol symbol-box gradient5"/>
+                <div class="symbol symbol-box gradient6"/>
+            </div>
+            <div class="text-box">{{ $t('legend.popularityCombined') }}</div>
+        </template>
     </div>
 </template>
 

From a05eb3d3fbf7201ead4a4791f83b62faec76564f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20F=C3=BChr?= <s.fuehr1@gmail.com>
Date: Fri, 18 Jun 2021 10:51:40 +0200
Subject: [PATCH 07/18] Implement dynamic incident overlay for mixed popularity
 view map

---
 .../viewModes/popularity/PopularityView.vue   | 223 ++++++++++++++++--
 1 file changed, 203 insertions(+), 20 deletions(-)

diff --git a/frontend/src/viewModes/popularity/PopularityView.vue b/frontend/src/viewModes/popularity/PopularityView.vue
index 04b03b0..0fefded 100644
--- a/frontend/src/viewModes/popularity/PopularityView.vue
+++ b/frontend/src/viewModes/popularity/PopularityView.vue
@@ -9,31 +9,64 @@
                 <b-tab-item :label="$t('popularity.combined')" icon="chart-area"></b-tab-item>
                 <b-tab-item :label="$t('popularity.avoided')" icon="database"></b-tab-item>
                 <b-tab-item :label="$t('popularity.chosen')" icon="database"></b-tab-item>
-                <b-tab-item :label="$t('popularity.score')" icon="database"></b-tab-item>
+                <b-tab-item :label="$t('popularity.score')" icon="chart-area"></b-tab-item>
             </b-tabs>
         </div>
 
-        <l-tile-layer
-            v-if="subViewMode === config.subViewModes.POPULARITY_COMBINED"
-            :url="TILE_URL + '/tiles/popularity-combined/{z}/{x}/{y}.png'"
-        />
-        <l-tile-layer
-            v-if="subViewMode === config.subViewModes.POPULARITY_AVOIDED"
-            :url="TILE_URL + '/tiles/popularity-original_avoided/{z}/{x}/{y}.png'"
-        />
-        <l-tile-layer
-            v-if="subViewMode === config.subViewModes.POPULARITY_CHOSEN"
-            :url="TILE_URL + '/tiles/popularity-original_chosen/{z}/{x}/{y}.png'"
-        />
-        <l-tile-layer
-            v-if="subViewMode === config.subViewModes.POPULARITY_SCORE"
-            :url="TILE_URL + '/tiles/popularity-score/{z}/{x}/{y}.png'"
-        />
+        <!-- When no specific ride is highlighted -->
+        <template v-if="rideHighlighted === null">
+            <!-- List of sub view layers. -->
+            <l-tile-layer
+                v-if="subViewMode === config.subViewModes.POPULARITY_COMBINED"
+                :url="TILE_URL + '/tiles/popularity-combined/{z}/{x}/{y}.png'"
+            />
+            <l-tile-layer
+                v-if="subViewMode === config.subViewModes.POPULARITY_AVOIDED"
+                :url="TILE_URL + '/tiles/popularity-original_avoided/{z}/{x}/{y}.png'"
+            />
+            <l-tile-layer
+                v-if="subViewMode === config.subViewModes.POPULARITY_CHOSEN"
+                :url="TILE_URL + '/tiles/popularity-original_chosen/{z}/{x}/{y}.png'"
+            />
+            <l-tile-layer
+                v-if="subViewMode === config.subViewModes.POPULARITY_SCORE"
+                :url="TILE_URL + '/tiles/popularity-score/{z}/{x}/{y}.png'"
+            />
+
+            <!-- Show all incidents -->
+            <l-geo-json v-if="zoom > 15 && incidents"
+                    :geojson="incidents"
+                    :options="markerStyle">
+                <l-popup/>
+            </l-geo-json>
+        </template>
+
+        <!-- Single, highlighted Bike Ride with its Incidents -->
+        <template v-else>
+            <l-geo-json :geojson="rideHighlighted" :options="rideHighlightedStyle" @ready="$emit('fit-in-view', $event)"/>
+
+            <l-marker :lat-lng="rideHighlightedStart" :icon="rideHighlightedStartIcon">
+                <l-tooltip :options="{direction: 'bottom'}"><strong>{{ $t('incident.start') }}</strong></l-tooltip>
+            </l-marker>
+            <l-marker :lat-lng="rideHighlightedEnd" :icon="rideHighlightedEndIcon">
+                <l-tooltip :options="{direction: 'bottom'}"><strong>{{ $t('incident.end') }}</strong></l-tooltip>
+            </l-marker>
+
+            <l-geo-json v-if="rideHighlightedIncidents" :geojson="rideHighlightedIncidents" :options="markerStyle">
+                <l-popup/>
+            </l-geo-json>
+        </template>
     </div>
 </template>
 
 <script>
-import { LGeoJson, LTileLayer } from "vue2-leaflet";
+import Vue from "vue";
+import { LGeoJson, LTileLayer, LMarker, LTooltip } from "vue2-leaflet";
+import { ExtraMarkers } from "leaflet-extra-markers";
+
+import { IncidentUtils } from "@/services/IncidentUtils";
+import { ApiService } from "@/services/ApiService";
+import MapPopup from "@/components/MapPopup";
 
 import Config from "@/constants";
 
@@ -41,25 +74,147 @@ export default {
     name: "PopularityView",
     components: {
         LGeoJson,
+        LTooltip,
+        LMarker,
         LTileLayer
     },
     props: {
-        subViewMode: Number
+        subViewMode: Number,
+        zoom: Number,
+        bounds: Object
     },
     data() {
         return {
-            config: Config
+            config: Config,
+
+            // Markers
+            incidents: [],
+            incidentRequestKey: null,
+            markerStyle: {
+                pointToLayer: (feature, latlng) => L.marker(latlng, {
+                    icon: ExtraMarkers.icon({
+                        icon: IncidentUtils.getIcon(feature.properties),
+                        markerColor: feature.properties.scary ? "orange-dark" : "blue",
+                        prefix: "fa",
+                    }),
+                }),
+                onEachFeature: (feature, layer) => layer.bindPopup(() => {
+                    const mapPopup = new (Vue.extend(MapPopup))({
+                        propsData: {
+                            incident: feature.properties,
+                            showRouteEnabled: this.rideHighlighted === null,
+                            showRoute: () => { this.highlightRide(feature.properties.ride_id) },
+                            t: (key) => { return this.$t(key) },
+                        },
+                    });
+                    return mapPopup.$mount().$el;
+                }),
+            },
+
+            // Highlighted Ride
+            rideHighlighted: null,
+            rideHighlightedIncidents: [],
+            rideHighlightedStart: [0, 0],
+            rideHighlightedEnd: [0, 0],
+            rideHighlightedStartIcon: ExtraMarkers.icon({
+                icon: 'fa-biking',
+                markerColor: 'white',
+                prefix: 'fa'
+            }),
+            rideHighlightedEndIcon: ExtraMarkers.icon({
+                icon: 'fa-flag-checkered',
+                markerColor: 'black',
+                prefix: 'fa'
+            }),
+            rideHighlightedStyle: {
+                color: "hsl(215, 71%, 53%)",
+                weight: 4,
+            },
         };
     },
     computed: {
         TILE_URL() {
             return process.env.VUE_APP_TILE_URL;
         }
+    },
+    methods: {
+        loadIncidents() {
+            console.log("loading incidents");
+            let min_y = Math.floor(this.bounds._southWest.lat * 100) - 1;
+            let max_y = Math.floor(this.bounds._northEast.lat * 100) + 1;
+            let max_x = Math.floor(this.bounds._northEast.lng * 100) + 1;
+            let min_x = Math.floor(this.bounds._southWest.lng * 100) - 1;
+            let bottomLeft = [min_x, min_y];
+            let bottomRight = [max_x, min_y];
+            let topLeft = [min_x, max_y];
+            let topRight = [max_x, max_y];
+            let polygon = [bottomLeft, bottomRight, topRight, topLeft, bottomLeft];
+            console.log(polygon);
+
+            this.apiWorker.postMessage(["incidents", polygon]);
+        },
+        highlightRide(rideId) {
+            ApiService.loadRide(rideId).then(response => {
+                let { ride, incidents } = response;
+
+                if (ride.status !== 500 && incidents.status !== 500) {
+                    console.log(ride);
+                    console.log(incidents);
+
+                    this.rideHighlightedStart = [ride.geometry.coordinates[0][1], ride.geometry.coordinates[0][0]];
+                    this.rideHighlightedEnd = [ride.geometry.coordinates[ride.geometry.coordinates.length - 1][1], ride.geometry.coordinates[ride.geometry.coordinates.length - 1][0]];
+                    this.rideHighlighted = ride;
+                    this.rideHighlightedIncidents = incidents;
+                } else {
+                    console.log("associated ride is not in db.");
+                }
+            });
+        },
+        resetRideHighlight() {
+            this.rideHighlightedStart = [0, 0];
+            this.rideHighlightedEnd = [0, 0];
+            this.rideHighlighted = null;
+            this.rideHighlightedIncidents = [];
+            console.log("unfocussing highlighted ride");
+        },
+        clickedOnMap(event) {
+            if (event.originalEvent.target.nodeName !== 'path' && this.rideHighlighted != null) {
+                this.resetRideHighlight();
+            }
+        },
+        handleWorkerMessage(message) {
+            switch (message.data[0]) {
+                case "progress":
+                    this.$emit('on-progress', message.data[1], message.data[2])
+                    break;
+                case "incidents":
+                    if (this.incidentRequestKey === null || this.incidentRequestKey !== message.data[1]) {
+                        console.log("Setting incident variable with new data");
+                        this.incidentRequestKey = message.data[1];
+                        this.incidents = message.data[2];
+                    }
+                    break;
+            }
+        },
+    },
+    async mounted() {
+        this.apiWorker = new Worker("/ApiWorker.js");
+        this.apiWorker.onmessage = this.handleWorkerMessage;
+        this.apiWorker.postMessage(["backendUrl", ApiService.URL_API]);
+    },
+    watch: {
+        bounds: function (newValue, oldValue) {
+            if (this.zoom > 15)
+                this.loadIncidents();
+        }
     }
 };
 </script>
 
 <style lang="scss">
+@import "~leaflet.markercluster/dist/MarkerCluster.css";
+@import "~leaflet.markercluster/dist/MarkerCluster.Default.css";
+
 .rides-submode-switcher .b-tabs {
     margin-top: 16px;
     position: absolute;
@@ -73,3 +228,31 @@ export default {
     }
 }
 </style>
+
+<style lang="less">
+    @import "~leaflet-extra-markers/src/assets/less/leaflet.extra-markers";
+
+    .extra-marker {
+        background-image: url("../../assets/markers_custom.png");
+
+        &.extra-marker-circle-white i.fa.fa-biking {
+            color: #555 !important;
+        }
+    }
+
+    .extra-marker-shadow {
+        background-image: url("../../assets/markers_shadow.png");
+        opacity: 0.75;
+    }
+
+    @media (min--moz-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2),
+    (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx) {
+        .extra-marker {
+            background-image: url("../../assets/markers_custom@2x.png");
+        }
+
+        .extra-marker-shadow {
+            background-image: url("../../assets/markers_shadow@2x.png");
+        }
+    }
+</style>

From a5f18bf9641fdbb6c70b5cb8c75104f306cf02e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20F=C3=BChr?= <s.fuehr1@gmail.com>
Date: Fri, 18 Jun 2021 10:52:16 +0200
Subject: [PATCH 08/18] Adapts popularity view component to support dynamic
 incidents overlay

---
 frontend/src/views/Map.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/views/Map.vue b/frontend/src/views/Map.vue
index ca07a3f..e2b1e0a 100644
--- a/frontend/src/views/Map.vue
+++ b/frontend/src/views/Map.vue
@@ -151,8 +151,11 @@
                             v-if="viewMode === config.viewModes.POPULARITY"
                             ref="popularityView"
                             :sub-view-mode="subViewMode"
+                            :zoom="zoom"
+                            :bounds="bounds"
                             @on-progress="updateLoadingView"
                             @update:sub-view-mode="subViewMode = $event"
+                            @fit-in-view="fitMapObjectIntoView"
                         />
                     </div>
 
@@ -278,6 +281,8 @@ export default {
         clickedOnMap(event) {
             if (this.viewMode === Config.viewModes.INCIDENTS) {
                 this.$refs.incidentView.clickedOnMap(event);
+            } else if (this.viewMode === Config.viewModes.POPULARITY) {
+                this.$refs.popularityView.clickedOnMap(event);
             }
         },
         updateLoadingView(progress, expectedTotal) {

From 692bba6d69568ad50eff638f3898a62e9d0594ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20F=C3=BChr?= <s.fuehr1@gmail.com>
Date: Fri, 18 Jun 2021 14:10:27 +0200
Subject: [PATCH 09/18] Add incident markers to map legends for popularity maps

---
 frontend/src/components/MapLegend.vue | 95 +++++++++++++++++++++++----
 1 file changed, 82 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/MapLegend.vue b/frontend/src/components/MapLegend.vue
index 6eeb8ba..515ee4e 100644
--- a/frontend/src/components/MapLegend.vue
+++ b/frontend/src/components/MapLegend.vue
@@ -89,19 +89,61 @@
 
         <!-- Popularity score p_score -->
         <template v-if="viewMode === config.viewModes.POPULARITY && subViewMode === config.subViewModes.POPULARITY_COMBINED">
+            <!--
+            Show different incident markes, depending on zoom level.
+                16 - 18 Drop formed markers with icons.
+                14 - 15 Grey and red dots.
+                   < 14 None.
+            -->
+            <template v-if="zoom >= 16">
+                <div class="symbol symbol-marker marker-scary"><i class="fa fa-car"/></div>
+                <div class="text-box">{{ $t('legend.scaryIncident') }}</div>
+
+                <div class="symbol symbol-marker marker-regular"><i class="fa fa-car"/></div>
+                <div class="text-box">{{ $t('legend.regularIncident') }}</div>
+            </template>
+            <template v-else-if="zoom >= 14">
+                <div class="symbol-container">
+                    <div class="symbol symbol-circle" style="background-color: #9e1a16"/>
+                    <div class="symbol symbol-circle" style="background-color: #777777"/>
+                </div>
+                <div class="text-box">{{ $t('legend.incidents') }}</div>
+            </template>
+
             <div class="symbol-container">
-                <div class="symbol symbol-box gradient1"/>
-                <div class="symbol symbol-box gradient2" v-if="zoom <= 15"/>
-                <div class="symbol symbol-box gradient3"/>
-                <div class="symbol symbol-box gradient4"/>
+                <div class="symbol symbol-box gradient6"/>
                 <div class="symbol symbol-box gradient5"/>
-                <div class="symbol symbol-box gradient6" v-if="zoom <= 15"/>
+                <div class="symbol symbol-box gradient4"/>
+                <div class="symbol symbol-box gradient3"/>
+                <div class="symbol symbol-box gradient2"/>
+                <div class="symbol symbol-box gradient1"/>
             </div>
             <div class="text-box">{{ $t('legend.popularityCombined') }}</div>
         </template>
 
         <!-- Avoided street segment density -->
         <template v-if="viewMode === config.viewModes.POPULARITY && subViewMode == config.subViewModes.POPULARITY_AVOIDED">
+            <!--
+            Show different incident markes, depending on zoom level.
+                16 - 18 Drop formed markers with icons.
+                14 - 15 Grey and red dots.
+                   < 14 None.
+            -->
+            <template v-if="zoom >= 16">
+                <div class="symbol symbol-marker marker-scary"><i class="fa fa-car"/></div>
+                <div class="text-box">{{ $t('legend.scaryIncident') }}</div>
+
+                <div class="symbol symbol-marker marker-regular"><i class="fa fa-car"/></div>
+                <div class="text-box">{{ $t('legend.regularIncident') }}</div>
+            </template>
+            <template v-else-if="zoom >= 14">
+                <div class="symbol-container">
+                    <div class="symbol symbol-circle" style="background-color: #9e1a16"/>
+                    <div class="symbol symbol-circle" style="background-color: #777777"/>
+                </div>
+                <div class="text-box">{{ $t('legend.incidents') }}</div>
+            </template>
+
             <div class="symbol-container">
                 <div class="symbol symbol-box red1 one-third"/>
                 <div class="symbol symbol-box red2 two-thirds"/>
@@ -112,6 +154,27 @@
 
         <!-- Chosen street segment density -->
         <template v-if="viewMode === config.viewModes.POPULARITY && subViewMode == config.subViewModes.POPULARITY_CHOSEN">
+            <!--
+            Show different incident markes, depending on zoom level.
+                16 - 18 Drop formed markers with icons.
+                14 - 15 Grey and red dots.
+                   < 14 None.
+            -->
+            <template v-if="zoom >= 16">
+                <div class="symbol symbol-marker marker-scary"><i class="fa fa-car"/></div>
+                <div class="text-box">{{ $t('legend.scaryIncident') }}</div>
+
+                <div class="symbol symbol-marker marker-regular"><i class="fa fa-car"/></div>
+                <div class="text-box">{{ $t('legend.regularIncident') }}</div>
+            </template>
+            <template v-else-if="zoom >= 14">
+                <div class="symbol-container">
+                    <div class="symbol symbol-circle" style="background-color: #9e1a16"/>
+                    <div class="symbol symbol-circle" style="background-color: #777777"/>
+                </div>
+                <div class="text-box">{{ $t('legend.incidents') }}</div>
+            </template>
+
             <div class="symbol-container">
                 <div class="symbol symbol-box blue1 one-third"/>
                 <div class="symbol symbol-box blue2 two-thirds"/>
@@ -122,15 +185,20 @@
 
         <!-- Mixed popularity score p_mscore -->
         <template v-if="viewMode === config.viewModes.POPULARITY && subViewMode === config.subViewModes.POPULARITY_SCORE">
-            <!-- Show different incident markes, depending on zoom level. -->
-            <template v-if="zoom > 15">
+            <!--
+            Show different incident markes, depending on zoom level.
+                16 - 18 Drop formed markers with icons.
+                14 - 15 Grey and red dots.
+                   < 14 None.
+            -->
+            <template v-if="zoom >= 16">
                 <div class="symbol symbol-marker marker-scary"><i class="fa fa-car"/></div>
                 <div class="text-box">{{ $t('legend.scaryIncident') }}</div>
 
                 <div class="symbol symbol-marker marker-regular"><i class="fa fa-car"/></div>
                 <div class="text-box">{{ $t('legend.regularIncident') }}</div>
             </template>
-            <template v-else>
+            <template v-else-if="zoom >= 14">
                 <div class="symbol-container">
                     <div class="symbol symbol-circle" style="background-color: #9e1a16"/>
                     <div class="symbol symbol-circle" style="background-color: #777777"/>
@@ -139,12 +207,12 @@
             </template>
 
             <div class="symbol-container">
-                <div class="symbol symbol-box gradient1"/>
-                <div class="symbol symbol-box gradient2"/>
-                <div class="symbol symbol-box gradient3"/>
-                <div class="symbol symbol-box gradient4"/>
-                <div class="symbol symbol-box gradient5"/>
                 <div class="symbol symbol-box gradient6"/>
+                <div class="symbol symbol-box gradient5"/>
+                <div class="symbol symbol-box gradient4"/>
+                <div class="symbol symbol-box gradient3"/>
+                <div class="symbol symbol-box gradient2"/>
+                <div class="symbol symbol-box gradient1"/>
             </div>
             <div class="text-box">{{ $t('legend.popularityCombined') }}</div>
         </template>
@@ -160,6 +228,7 @@ export default {
         viewMode: Number,
         subViewMode: Number,
         zoom: Number,
+        incidentsVisible: Boolean,
     },
     data() {
         return {

From 213a97b2e6bd9ebd188d76b02ca2671d0829463b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20F=C3=BChr?= <s.fuehr1@gmail.com>
Date: Fri, 18 Jun 2021 15:25:10 +0200
Subject: [PATCH 10/18] Add incident visibility checkbox for popularity maps

---
 frontend/src/components/MapLegend.vue         | 21 ++++++++++++-------
 frontend/src/components/Sidebar.vue           | 19 +++++++++++++----
 frontend/src/locales/en.json                  |  3 ++-
 .../viewModes/popularity/PopularityView.vue   |  9 ++++++--
 frontend/src/views/Map.vue                    |  8 ++++++-
 5 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/MapLegend.vue b/frontend/src/components/MapLegend.vue
index 515ee4e..9c9d4d1 100644
--- a/frontend/src/components/MapLegend.vue
+++ b/frontend/src/components/MapLegend.vue
@@ -95,14 +95,14 @@
                 14 - 15 Grey and red dots.
                    < 14 None.
             -->
-            <template v-if="zoom >= 16">
+            <template v-if="zoom >= 16 && incidentsVisible">
                 <div class="symbol symbol-marker marker-scary"><i class="fa fa-car"/></div>
                 <div class="text-box">{{ $t('legend.scaryIncident') }}</div>
 
                 <div class="symbol symbol-marker marker-regular"><i class="fa fa-car"/></div>
                 <div class="text-box">{{ $t('legend.regularIncident') }}</div>
             </template>
-            <template v-else-if="zoom >= 14">
+            <template v-else-if="zoom >= 14 && incidentsVisible">
                 <div class="symbol-container">
                     <div class="symbol symbol-circle" style="background-color: #9e1a16"/>
                     <div class="symbol symbol-circle" style="background-color: #777777"/>
@@ -129,14 +129,14 @@
                 14 - 15 Grey and red dots.
                    < 14 None.
             -->
-            <template v-if="zoom >= 16">
+            <template v-if="zoom >= 16 && incidentsVisible">
                 <div class="symbol symbol-marker marker-scary"><i class="fa fa-car"/></div>
                 <div class="text-box">{{ $t('legend.scaryIncident') }}</div>
 
                 <div class="symbol symbol-marker marker-regular"><i class="fa fa-car"/></div>
                 <div class="text-box">{{ $t('legend.regularIncident') }}</div>
             </template>
-            <template v-else-if="zoom >= 14">
+            <template v-else-if="zoom >= 14 && incidentsVisible">
                 <div class="symbol-container">
                     <div class="symbol symbol-circle" style="background-color: #9e1a16"/>
                     <div class="symbol symbol-circle" style="background-color: #777777"/>
@@ -160,14 +160,14 @@
                 14 - 15 Grey and red dots.
                    < 14 None.
             -->
-            <template v-if="zoom >= 16">
+            <template v-if="zoom >= 16 && incidentsVisible">
                 <div class="symbol symbol-marker marker-scary"><i class="fa fa-car"/></div>
                 <div class="text-box">{{ $t('legend.scaryIncident') }}</div>
 
                 <div class="symbol symbol-marker marker-regular"><i class="fa fa-car"/></div>
                 <div class="text-box">{{ $t('legend.regularIncident') }}</div>
             </template>
-            <template v-else-if="zoom >= 14">
+            <template v-else-if="zoom >= 14 && incidentsVisible">
                 <div class="symbol-container">
                     <div class="symbol symbol-circle" style="background-color: #9e1a16"/>
                     <div class="symbol symbol-circle" style="background-color: #777777"/>
@@ -191,14 +191,14 @@
                 14 - 15 Grey and red dots.
                    < 14 None.
             -->
-            <template v-if="zoom >= 16">
+            <template v-if="zoom >= 16 && incidentsVisible">
                 <div class="symbol symbol-marker marker-scary"><i class="fa fa-car"/></div>
                 <div class="text-box">{{ $t('legend.scaryIncident') }}</div>
 
                 <div class="symbol symbol-marker marker-regular"><i class="fa fa-car"/></div>
                 <div class="text-box">{{ $t('legend.regularIncident') }}</div>
             </template>
-            <template v-else-if="zoom >= 14">
+            <template v-else-if="zoom >= 14 && incidentsVisible">
                 <div class="symbol-container">
                     <div class="symbol symbol-circle" style="background-color: #9e1a16"/>
                     <div class="symbol symbol-circle" style="background-color: #777777"/>
@@ -234,6 +234,11 @@ export default {
         return {
             config: Config,
         }
+    },
+    watch: {
+        incidentsVisible() {
+            return this.incidentsVisible;
+        }
     }
 };
 </script>
diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
index 832d937..ad307ef 100644
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -116,7 +116,7 @@
             <SidebarEntry
                 :title="$t('sidebar.popularity')"
                 :icon="'fa-tools'"
-                :icon-color="'#1d917c'"
+                :icon-color="'#d63e12'"
                 :is-small="small"
                 :class="{ selected: value === config.viewModes.POPULARITY }"
                 @entryClicked="switchToView(config.viewModes.POPULARITY)"
@@ -124,13 +124,23 @@
                 <div class="entry-subtext">
                     {{ $t("sidebar.popularityDescription") }}
                 </div>
+
+                <div class="field" style="margin-top: 10px">
+                    <b-checkbox
+                        v-model="checked"
+                        value="true"
+                        unchecked-value="false"
+                        @input="$emit('update:incidents-visible', checked)">
+                        {{ $t("popularity.showIncidents") }}
+                    </b-checkbox>
+                </div>
             </SidebarEntry>
 
             <!-- Box analysis -->
             <SidebarEntry
                 :title="$t('sidebar.boxAnalysis')"
                 icon="fa-draw-polygon"
-                :icon-color="'#d63e12'"
+                :icon-color="'#156ec7'"
                 :is-small="small"
                 :class="{ selected: value === config.viewModes.BOX_ANALYSIS }"
                 @entryClicked="
@@ -162,7 +172,7 @@
             <SidebarEntry
                 :title="$t('sidebar.tools')"
                 :icon="'fa-tools'"
-                :icon-color="'#156ec7'"
+                :icon-color="'#1d917c'"
                 :is-small="small"
                 :class="{ selected: value === config.viewModes.TOOLS }"
                 @entryClicked="switchToView(config.viewModes.TOOLS)"
@@ -212,7 +222,8 @@ export default {
     data() {
         return {
             config: Config,
-            small: false
+            small: false,
+            checked: false
         };
     },
     methods: {
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index f71925f..93b3e53 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -92,7 +92,8 @@
         "avoided": "Avoided",
         "chosen": "Chosen",
         "combined": "Combined",
-        "score": "Score"
+        "score": "Score",
+        "showIncidents": "Show Incident Markers"
     },
     "statistics": {
         "title": "Statistics for",
diff --git a/frontend/src/viewModes/popularity/PopularityView.vue b/frontend/src/viewModes/popularity/PopularityView.vue
index 0fefded..3bde56e 100644
--- a/frontend/src/viewModes/popularity/PopularityView.vue
+++ b/frontend/src/viewModes/popularity/PopularityView.vue
@@ -1,5 +1,6 @@
 <template>
     <div>
+        <!-- Leaflet control map switcher on top of the screen. -->
         <div class="leaflet-control topcenter rides-submode-switcher" v-if="subViewMode === config.subViewModes.POPULARITY_COMBINED || subViewMode === config.subViewModes.POPULARITY_AVOIDED || subViewMode === config.subViewModes.POPULARITY_CHOSEN || subViewMode === config.subViewModes.POPULARITY_SCORE">
             <b-tabs type="is-toggle-rounded"
                     :value="subViewMode"
@@ -34,7 +35,7 @@
             />
 
             <!-- Show all incidents -->
-            <l-geo-json v-if="zoom > 15 && incidents"
+            <l-geo-json v-if="zoom > 15 && incidents && incidentsVisible"
                     :geojson="incidents"
                     :options="markerStyle">
                 <l-popup/>
@@ -81,7 +82,8 @@ export default {
     props: {
         subViewMode: Number,
         zoom: Number,
-        bounds: Object
+        bounds: Object,
+        incidentsVisible: Boolean
     },
     data() {
         return {
@@ -206,6 +208,9 @@ export default {
         bounds: function (newValue, oldValue) {
             if (this.zoom > 15)
                 this.loadIncidents();
+        },
+        incidentsVisible() {
+            return this.incidentsVisible;
         }
     }
 };
diff --git a/frontend/src/views/Map.vue b/frontend/src/views/Map.vue
index e2b1e0a..f625753 100644
--- a/frontend/src/views/Map.vue
+++ b/frontend/src/views/Map.vue
@@ -18,6 +18,7 @@
                 :sub-view-mode="subViewMode"
                 @size-changed="mapObject.invalidateSize()"
                 @update:sub-view-mode="subViewMode = $event"
+                @update:incidents-visible="incidentsVisible = $event"
             />
 
             <section class="hero is-fullheight-with-navbar viewmode-container">
@@ -80,6 +81,7 @@
                             :view-mode="viewMode"
                             :sub-view-mode="subViewMode"
                             :zoom="zoom"
+                            :incidents-visible="incidentsVisible"
                             class="is-hidden-mobile"
                         />
                     </l-control>
@@ -153,6 +155,7 @@
                             :sub-view-mode="subViewMode"
                             :zoom="zoom"
                             :bounds="bounds"
+                            :incidents-visible="incidentsVisible"
                             @on-progress="updateLoadingView"
                             @update:sub-view-mode="subViewMode = $event"
                             @fit-in-view="fitMapObjectIntoView"
@@ -252,7 +255,10 @@ export default {
             bounds: null,
 
             // Extras for view modes
-            boxAnalysisMapLayer: null
+            boxAnalysisMapLayer: null,
+
+            // Whether incidents should be visible as an overlay or not
+            incidentsVisible: false,
         };
     },
     methods: {

From 23c8e21dd1e1c083c0199bf6902694c8cdae79cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20F=C3=BChr?= <s.fuehr1@gmail.com>
Date: Sat, 19 Jun 2021 19:25:42 +0200
Subject: [PATCH 11/18] Change SimRa visualization reference

---
 README.md | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 65bf705..6a3a359 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# SimRa-Visualization
+# SimRa Visualization
 
 This project is part of the SimRa research project which includes the following subprojects:
 
@@ -6,8 +6,7 @@ This project is part of the SimRa research project which includes the following
 - [simra-ios](https://github.com/simra-project/simra-ios): The SimRa app for iOS.
 - [backend](https://github.com/simra-project/backend): The SimRa backend software.
 - [dataset](https://github.com/simra-project/dataset): Result data from the SimRa project.
-- [screenshots](https://github.com/simra-project/screenshots): Screenshots of both the iOS and Android app.
-- [SimRa-Visualization](https://github.com/simra-project/SimRa-Visualization): Web application for visualizing the dataset.
+- [screenshots](https://github.com/simra-project/SimRa-Visualization): Screenshots of both the iOS and Android app.
+- SimRa-Visualization: Web application for visualizing the dataset([frontend](https://github.com/simra-project/simra-visualization-web), [backend](https://github.com/simra-project/simra-visualizations-server)).
 
-In this project, we collect – with a strong focus on data protection and privacy – data on such near crashes to identify when and where bicyclists are especially at risk. We also aim to identify the main routes of bicycle traffic in Berlin. To obtain such data, we have developed a smartphone app that uses GPS information to track routes of bicyclists and the built-in acceleration sensors to pre-categorize near crashes. After their trip, users are asked to annotate and upload the collected data, pseudonymized per trip.
-For more information see [our website](https://www.digital-future.berlin/en/research/projects/simra/).
+In this project, we collect – with a strong focus on data protection and privacy – data on such near crashes to identify when and where bicyclists are especially at risk. We also aim to identify the main routes of bicycle traffic in Berlin. To obtain such data, we have developed a smartphone app that uses GPS information to track routes of bicyclists and the built-in acceleration sensors to pre-categorize near crashes. After their trip, users are asked to annotate and upload the collected data, pseudonymized per trip. For more information see [our website](https://www.digital-future.berlin/en/research/projects/simra/).
\ No newline at end of file

From dd1749fe9fdb3497f53d50898b89d3c9346fce77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20F=C3=BChr?= <s.fuehr1@gmail.com>
Date: Sat, 19 Jun 2021 19:26:08 +0200
Subject: [PATCH 12/18] Add dynamic incident overlay for popularity maps

---
 frontend/src/components/MapLegend.vue         |  8 +--
 frontend/src/constants.ts                     |  4 ++
 .../viewModes/popularity/PopularityView.vue   | 72 ++++++++++++++++++-
 3 files changed, 79 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/MapLegend.vue b/frontend/src/components/MapLegend.vue
index 9c9d4d1..f30ec4e 100644
--- a/frontend/src/components/MapLegend.vue
+++ b/frontend/src/components/MapLegend.vue
@@ -88,7 +88,7 @@
         </template>
 
         <!-- Popularity score p_score -->
-        <template v-if="viewMode === config.viewModes.POPULARITY && subViewMode === config.subViewModes.POPULARITY_COMBINED">
+        <template v-if="viewMode === config.viewModes.POPULARITY && (subViewMode === config.subViewModes.POPULARITY_COMBINED || subViewMode === config.subViewModes.POPULARITY_W_INCIDENTS_COMBINED)">
             <!--
             Show different incident markes, depending on zoom level.
                 16 - 18 Drop formed markers with icons.
@@ -122,7 +122,7 @@
         </template>
 
         <!-- Avoided street segment density -->
-        <template v-if="viewMode === config.viewModes.POPULARITY && subViewMode == config.subViewModes.POPULARITY_AVOIDED">
+        <template v-if="viewMode === config.viewModes.POPULARITY && (subViewMode == config.subViewModes.POPULARITY_AVOIDED || subViewMode == config.subViewModes.POPULARITY_W_INCIDENTS_AVOIDED)">
             <!--
             Show different incident markes, depending on zoom level.
                 16 - 18 Drop formed markers with icons.
@@ -153,7 +153,7 @@
         </template>
 
         <!-- Chosen street segment density -->
-        <template v-if="viewMode === config.viewModes.POPULARITY && subViewMode == config.subViewModes.POPULARITY_CHOSEN">
+        <template v-if="viewMode === config.viewModes.POPULARITY && (subViewMode == config.subViewModes.POPULARITY_CHOSEN || subViewMode == config.subViewModes.POPULARITY_W_INCIDENTS_CHOSEN)">
             <!--
             Show different incident markes, depending on zoom level.
                 16 - 18 Drop formed markers with icons.
@@ -184,7 +184,7 @@
         </template>
 
         <!-- Mixed popularity score p_mscore -->
-        <template v-if="viewMode === config.viewModes.POPULARITY && subViewMode === config.subViewModes.POPULARITY_SCORE">
+        <template v-if="viewMode === config.viewModes.POPULARITY && (subViewMode === config.subViewModes.POPULARITY_SCORE || subViewMode === config.subViewModes.POPULARITY_W_INCIDENTS_SCORE)">
             <!--
             Show different incident markes, depending on zoom level.
                 16 - 18 Drop formed markers with icons.
diff --git a/frontend/src/constants.ts b/frontend/src/constants.ts
index 9219c9e..6b0f4f8 100644
--- a/frontend/src/constants.ts
+++ b/frontend/src/constants.ts
@@ -30,6 +30,10 @@ let subViewModes = {
     POPULARITY_AVOIDED: 1,
     POPULARITY_CHOSEN: 2,
     POPULARITY_SCORE: 3,
+    POPULARITY_W_INCIDENTS_COMBINED: 9,
+    POPULARITY_W_INCIDENTS_AVOIDED: 19,
+    POPULARITY_W_INCIDENTS_CHOSEN: 29,
+    POPULARITY_W_INCIDENTS_SCORE: 39,
 }
 
 let osmAttribution = " &copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors";
diff --git a/frontend/src/viewModes/popularity/PopularityView.vue b/frontend/src/viewModes/popularity/PopularityView.vue
index 3bde56e..4a8ea47 100644
--- a/frontend/src/viewModes/popularity/PopularityView.vue
+++ b/frontend/src/viewModes/popularity/PopularityView.vue
@@ -1,7 +1,16 @@
 <template>
     <div>
         <!-- Leaflet control map switcher on top of the screen. -->
-        <div class="leaflet-control topcenter rides-submode-switcher" v-if="subViewMode === config.subViewModes.POPULARITY_COMBINED || subViewMode === config.subViewModes.POPULARITY_AVOIDED || subViewMode === config.subViewModes.POPULARITY_CHOSEN || subViewMode === config.subViewModes.POPULARITY_SCORE">
+        <div class="leaflet-control topcenter rides-submode-switcher" v-if="
+            subViewMode === config.subViewModes.POPULARITY_COMBINED
+            || subViewMode === config.subViewModes.POPULARITY_AVOIDED
+            || subViewMode === config.subViewModes.POPULARITY_CHOSEN
+            || subViewMode === config.subViewModes.POPULARITY_SCORE
+            || subViewMode === config.subViewModes.POPULARITY_W_INCIDENTS_COMBINED
+            || subViewMode === config.subViewModes.POPULARITY_W_INCIDENTS_AVOIDED
+            || subViewMode === config.subViewModes.POPULARITY_W_INCIDENTS_CHOSEN
+            || subViewMode === config.subViewModes.POPULARITY_W_INCIDENTS_SCORE
+        ">
             <b-tabs type="is-toggle-rounded"
                     :value="subViewMode"
                     @change="$emit('update:sub-view-mode', $event)"
@@ -33,6 +42,22 @@
                 v-if="subViewMode === config.subViewModes.POPULARITY_SCORE"
                 :url="TILE_URL + '/tiles/popularity-score/{z}/{x}/{y}.png'"
             />
+            <l-tile-layer
+                v-if="subViewMode === config.subViewModes.POPULARITY_W_INCIDENTS_COMBINED"
+                :url="TILE_URL + '/tiles/popularity_w-incidents_combined/{z}/{x}/{y}.png'"
+            />
+            <l-tile-layer
+                v-if="subViewMode === config.subViewModes.POPULARITY_W_INCIDENTS_AVOIDED"
+                :url="TILE_URL + '/tiles/popularity-original_w-incidents_avoided/{z}/{x}/{y}.png'"
+            />
+            <l-tile-layer
+                v-if="subViewMode === config.subViewModes.POPULARITY_W_INCIDENTS_CHOSEN"
+                :url="TILE_URL + '/tiles/popularity-original_w-incidents_chosen/{z}/{x}/{y}.png'"
+            />
+            <l-tile-layer
+                v-if="subViewMode === config.subViewModes.POPULARITY_W_INCIDENTS_SCORE"
+                :url="TILE_URL + '/tiles/popularity_w-incidents_score/{z}/{x}/{y}.png'"
+            />
 
             <!-- Show all incidents -->
             <l-geo-json v-if="zoom > 15 && incidents && incidentsVisible"
@@ -137,6 +162,14 @@ export default {
     computed: {
         TILE_URL() {
             return process.env.VUE_APP_TILE_URL;
+        },
+        computedSubViewMode: {
+            get() {
+                return this.subViewMode;
+            },
+            set(value) {
+                this.$emit("update:sub-view-mode", value);
+            }
         }
     },
     methods: {
@@ -198,6 +231,42 @@ export default {
                     break;
             }
         },
+        switchToView(viewId) {
+            this.$emit("update:sub-view-mode", viewId);
+            console.log("Switched sub view to ", viewId);
+        },
+        /** 
+         *  Switches to the map, overlayed with incidents, corresponding to
+         *  the currently active map.
+         */
+        popularitySubViewSwitcher() {
+            switch (this.subViewMode) {
+                case 0: // combined
+                    this.switchToView(9);
+                    break;
+                case 1: // avoided
+                    this.switchToView(19);
+                    break;
+                case 2: // chosen
+                    this.switchToView(29);
+                    break;
+                case 3: // mixed score
+                    this.switchToView(39);
+                    break;
+                case 9: // combined with incidents
+                    this.switchToView(0);
+                    break;
+                case 19: // avoided with incidents
+                    this.switchToView(1);
+                    break;
+                case 29: // chosen with incidents
+                    this.switchToView(2);
+                    break;
+                case 39: // mixed score with incidents
+                    this.switchToView(3);
+                    break;
+            }
+        }
     },
     async mounted() {
         this.apiWorker = new Worker("/ApiWorker.js");
@@ -210,6 +279,7 @@ export default {
                 this.loadIncidents();
         },
         incidentsVisible() {
+            this.popularitySubViewSwitcher();
             return this.incidentsVisible;
         }
     }

From bd774df9c8e2d103ebe23a95d2ffb54f8fbe35f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20F=C3=BChr?= <s.fuehr1@gmail.com>
Date: Sat, 19 Jun 2021 19:29:29 +0200
Subject: [PATCH 13/18] Move setup instructions into README.md

---
 README.md          | 14 +++++++++++++-
 frontend/README.md | 19 -------------------
 2 files changed, 13 insertions(+), 20 deletions(-)
 delete mode 100644 frontend/README.md

diff --git a/README.md b/README.md
index 6a3a359..536f431 100644
--- a/README.md
+++ b/README.md
@@ -9,4 +9,16 @@ This project is part of the SimRa research project which includes the following
 - [screenshots](https://github.com/simra-project/SimRa-Visualization): Screenshots of both the iOS and Android app.
 - SimRa-Visualization: Web application for visualizing the dataset([frontend](https://github.com/simra-project/simra-visualization-web), [backend](https://github.com/simra-project/simra-visualizations-server)).
 
-In this project, we collect – with a strong focus on data protection and privacy – data on such near crashes to identify when and where bicyclists are especially at risk. We also aim to identify the main routes of bicycle traffic in Berlin. To obtain such data, we have developed a smartphone app that uses GPS information to track routes of bicyclists and the built-in acceleration sensors to pre-categorize near crashes. After their trip, users are asked to annotate and upload the collected data, pseudonymized per trip. For more information see [our website](https://www.digital-future.berlin/en/research/projects/simra/).
\ No newline at end of file
+In this project, we collect – with a strong focus on data protection and privacy – data on such near crashes to identify when and where bicyclists are especially at risk. We also aim to identify the main routes of bicycle traffic in Berlin. To obtain such data, we have developed a smartphone app that uses GPS information to track routes of bicyclists and the built-in acceleration sensors to pre-categorize near crashes. After their trip, users are asked to annotate and upload the collected data, pseudonymized per trip. For more information see [our website](https://www.digital-future.berlin/en/research/projects/simra/).
+
+## Project setup
+
+```
+cd frontend/
+npm install
+```
+
+Then you can either execute `npm run server` to compile and provide hot-reloading while developing or run `npm run build` to compile and manifest for production.
+
+## Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
\ No newline at end of file
diff --git a/frontend/README.md b/frontend/README.md
deleted file mode 100644
index 6051581..0000000
--- a/frontend/README.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# frontend
-
-## Project setup
-```
-npm install
-```
-
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
-
-### Compiles and minifies for production
-```
-npm run build
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).

From 7c598028eef8e4e6a99bd5d419ddc7b3be7de907 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20F=C3=BChr?= <s.fuehr1@gmail.com>
Date: Sat, 19 Jun 2021 19:31:40 +0200
Subject: [PATCH 14/18] Change popularity-original_chosen legend colors

---
 frontend/src/components/MapLegend.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/MapLegend.vue b/frontend/src/components/MapLegend.vue
index f30ec4e..259054d 100644
--- a/frontend/src/components/MapLegend.vue
+++ b/frontend/src/components/MapLegend.vue
@@ -145,9 +145,9 @@
             </template>
 
             <div class="symbol-container">
-                <div class="symbol symbol-box red1 one-third"/>
-                <div class="symbol symbol-box red2 two-thirds"/>
-                <div class="symbol symbol-box red3"/>
+                <div class="symbol symbol-box blue1 one-third"/>
+                <div class="symbol symbol-box blue2 two-thirds"/>
+                <div class="symbol symbol-box blue3"/>
             </div>
             <div class="text-box">{{ $t('legend.avoidedStreetSegments') }}</div>
         </template>

From bc5ca5f9f7938c594a5aef3c4f729035758af90a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20F=C3=BChr?= <s.fuehr1@gmail.com>
Date: Sat, 19 Jun 2021 19:41:12 +0200
Subject: [PATCH 15/18] Add translation for popularity related UI elements

---
 frontend/src/locales/de.json | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index afb1564..02c0049 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -27,6 +27,8 @@
         "boxAnalysisDescription": "Zeichne eine Form auf der Karte um zu sehen welche Fahrten durch diese gingen. Klicke auf die Form um eine neue zu zeichnen.",
         "tools": "Tools",
         "toolsDescription": "Lade eine Fahrt hoch um sie zu analysieren (ziehe die Datei auf die Karte).",
+        "popularity": "Beliebtheit",
+        "popularityDescription": "Die subjektiv wahrgenommene Beliebtheit von Straßensegmenten.",
         "statistics": "Statistiken",
         "expandMenu": "Menü ausklappen"
     },
@@ -42,7 +44,11 @@
         "relativeSpeedFaster": "Schneller als der Durchschnitt",
         "relativeSpeedAverage": "Durchschnittliche Geschwindigkeit",
         "relativeSpeedSlower": "Langsamer als der Durchschnitt",
-        "stopTimes": "Wartezeiten pro Kreuzung"
+        "stopTimes": "Wartezeiten pro Kreuzung",
+        "popularityCombined": "Beliebtheit von Straßenabschnitten",
+        "avoidedStreetSegments": "Vermiedene Straßenabschnitte",
+        "chosenStreetSegments": "Bewusst gewählte Straßenabschnitte",
+        "popularityScore": "Beliebtheit und Sicherheit von Straßensegmenten"
     },
     "map": {
         "loadingMapData": "Lade Kartendaten"
@@ -82,6 +88,13 @@
             "polygonEnd": "Klicke den ersten Punkt um die Form fertigzustellen."
         }
     },
+    "popularity": {
+        "avoided": "Vermieden",
+        "chosen": "Gewählt",
+        "combined": "Kombiniert",
+        "score": "Score",
+        "showIncidents": "Ereignismarker anzeigen"
+    },
     "statistics": {
         "title": "Statistiken für",
         "toptext": {

From c9bb5144ce1757d69b59fb95c6e3f6e0602fda1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20F=C3=BChr?= <s.fuehr1@gmail.com>
Date: Sat, 19 Jun 2021 19:44:09 +0200
Subject: [PATCH 16/18] Change combinated popularity view control panel text

---
 frontend/src/locales/de.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 02c0049..231b6e4 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -91,7 +91,7 @@
     "popularity": {
         "avoided": "Vermieden",
         "chosen": "Gewählt",
-        "combined": "Kombiniert",
+        "combined": "Komb.",
         "score": "Score",
         "showIncidents": "Ereignismarker anzeigen"
     },

From 2739e84ac321d8aa50a20a3cca33e6f956bd6a46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20F=C3=BChr?= <s.fuehr1@gmail.com>
Date: Wed, 7 Jul 2021 11:26:27 +0200
Subject: [PATCH 17/18] =?UTF-8?q?Add=20Sebastian=20F=C3=BChr=20to=20about?=
 =?UTF-8?q?=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/constants.ts    | 1 -
 frontend/src/views/About.vue | 5 ++++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/constants.ts b/frontend/src/constants.ts
index 6b0f4f8..438150e 100644
--- a/frontend/src/constants.ts
+++ b/frontend/src/constants.ts
@@ -1,4 +1,3 @@
-
 let viewModes = {
     NONE: 0,
     RIDES: 1,
diff --git a/frontend/src/views/About.vue b/frontend/src/views/About.vue
index 0d27e5b..818e806 100644
--- a/frontend/src/views/About.vue
+++ b/frontend/src/views/About.vue
@@ -29,7 +29,10 @@
                 entwickelt. Ursprünglich wurde diese Webseite im Rahmen eines Studentenprojektes im Wintersemester
                 2019/2020 an der Technischen Universität Berlin mit grundlegenden Funktionen entwickelt. <br> Jedoch
                 haben erst Fördermittel der Gemeinden Zeuthen, Eichwalde und Schulzendorf die Erweiterung und
-                Entwicklung vieler neuer Funktionen ermöglicht.
+                Entwicklung vieler neuer Funktionen ermöglicht.<br>
+                Das Projekt wurde im Rahmen einer Bachelorarbeit durch Sebastian Führ 
+                (<a href="https://www.linkedin.com/in/sebastian-f%C3%BChr-578998180/">Link</a>) um Funktionalitäten 
+                zur Bestimmung der Beliebtheit von Straßensegmenten erweitert.
             </div>
         </section>
         <footer class="modal-card-foot">

From c40d4ba96a7c4dc81d809bd907a3e46374ae4236 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20F=C3=BChr?= <s.fuehr1@gmail.com>
Date: Wed, 7 Jul 2021 12:08:44 +0200
Subject: [PATCH 18/18] Resolve sub view mode switching bug

---
 .../viewModes/popularity/PopularityView.vue   |  1 -
 frontend/src/views/Map.vue                    | 36 +++++++++++++++++--
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/frontend/src/viewModes/popularity/PopularityView.vue b/frontend/src/viewModes/popularity/PopularityView.vue
index 4a8ea47..8b416d8 100644
--- a/frontend/src/viewModes/popularity/PopularityView.vue
+++ b/frontend/src/viewModes/popularity/PopularityView.vue
@@ -233,7 +233,6 @@ export default {
         },
         switchToView(viewId) {
             this.$emit("update:sub-view-mode", viewId);
-            console.log("Switched sub view to ", viewId);
         },
         /** 
          *  Switches to the map, overlayed with incidents, corresponding to
diff --git a/frontend/src/views/Map.vue b/frontend/src/views/Map.vue
index f625753..8aecd89 100644
--- a/frontend/src/views/Map.vue
+++ b/frontend/src/views/Map.vue
@@ -12,13 +12,14 @@
         />
 
         <div class="main-layout" style="display:flex;">
+            <!-- incidentsVisible = $event -->
             <Sidebar
                 v-model.sync="viewMode"
                 ref="sidebar"
                 :sub-view-mode="subViewMode"
                 @size-changed="mapObject.invalidateSize()"
                 @update:sub-view-mode="subViewMode = $event"
-                @update:incidents-visible="incidentsVisible = $event"
+                @update:incidents-visible="switchVisibilityMode"
             />
 
             <section class="hero is-fullheight-with-navbar viewmode-container">
@@ -149,6 +150,7 @@
                         />
                     </div>
                     <div>
+                        <!-- subViewMode = $event -->
                         <PopularityView
                             v-if="viewMode === config.viewModes.POPULARITY"
                             ref="popularityView"
@@ -157,7 +159,7 @@
                             :bounds="bounds"
                             :incidents-visible="incidentsVisible"
                             @on-progress="updateLoadingView"
-                            @update:sub-view-mode="subViewMode = $event"
+                            @update:sub-view-mode="switchPopularityView"
                             @fit-in-view="fitMapObjectIntoView"
                         />
                     </div>
@@ -306,6 +308,36 @@ export default {
             if (progress === expectedTotal) {
                 setTimeout(() => (this.loadingProgress = null), 1200);
             }
+        },
+        /**
+         * Determines the clicked sub view mode with regards to whether the incident
+         * overlay is currently active or not.
+         */
+        switchPopularityView(newSubViewMode) {
+            if (this.incidentsVisible) {
+                switch(newSubViewMode) {
+                    case 0: // Popularity combined
+                        this.subViewMode = 9;
+                        break;
+                    case 1: // Avoided score
+                        this.subViewMode = 19;
+                        break;
+                    case 2: // Chosen score
+                        this.subViewMode = 29;
+                        break;
+                    case 3: // Mixed popularity score
+                        this.subViewMode = 39;
+                        break;
+                }
+            } else this.subViewMode = newSubViewMode;
+        },
+        /**
+         * Enables / disables the incident overlay and calls {@see switchPopularityView}
+         * to determine the corrisponding sub view mode.
+         */
+        switchVisibilityMode(event) {
+            this.incidentsVisible = event;
+            this.switchPopularityView(this.subViewMode);
         }
     },
     async mounted() {