Split map SVG into separate route (#538)

Author: sea-kelp

OpenOversight/app/main/views.py

@@ -160,7 +160,6 @@ def index():
         state_count=state_count,
         department_count=department_count,
         departments_by_state=departments_by_state,
-        map_paths=current_app.config["MAP_DATA"],
     )
 
 
@@ -179,10 +178,19 @@ def set_session_timezone():
 @main.route("/browse", methods=[HTTPMethod.GET])
 def browse():
     departments_by_state = Department.by_state()
-    return render_template(
-        "browse.html",
-        departments_by_state=departments_by_state,
-        map_paths=current_app.config["MAP_DATA"],
+    return render_template("browse.html", departments_by_state=departments_by_state)
+
+
+@main.route("/map.svg", methods=[HTTPMethod.GET])
+def render_map():
+    departments_by_state = Department.by_state()
+    return Response(
+        render_template(
+            "map.svg",
+            departments_by_state=departments_by_state,
+            map_paths=current_app.config["MAP_DATA"],
+        ),
+        mimetype="image/svg+xml",
     )
 
 

OpenOversight/app/templates/browse.html

@@ -13,36 +13,7 @@ <h1 class="hero">Browse Officers by Department</h1>
     <div class="text-center">
       <div class="col-lg-6 text-start mx-auto py-5">
         <p class="mb-5 vertical-padding">Use the map or list below to browse officers by department.</p>
-        <svg xmlns="http://www.w3.org/2000/svg"
-             version="1.1"
-             viewBox="0 0 1000 618">
-          <defs>
-          <style>
-              .cls-1 {
-                  fill: #0099c9;
-              }
-
-              .cls-1,
-              .cls-2 {
-                  stroke: #fff;
-                  stroke-width: .8px;
-              }
-
-              .cls-2 {
-                  fill: #d3d3d3;
-              }
-          </style>
-          </defs>
-          {% for state, path in map_paths.items() %}
-            {% if state in departments_by_state.keys() %}
-              <a href="#state-{{ state }}">
-                <path class="cls-1" d="{{ path }}" />
-              </a>
-            {% else %}
-              <path class="cls-2" d="{{ path }}" />
-            {% endif %}
-          {% endfor %}
-        </svg>
+        <object type="image/svg+xml" data="{{ url_for('main.render_map') }}"></object>
         {% for state, departments in departments_by_state.items() %}
           <div id="state-{{ state }}" class="state-row mt-5">
             <h3>{{ state | get_state_full_name }}</h3>

OpenOversight/app/templates/index.html

@@ -23,34 +23,8 @@ <h1>OpenOversight</h1>
         </div>
         <div class="row display-flex horizontal-padding text-start">
           <div class="col-lg-6">
-            <svg xmlns="http://www.w3.org/2000/svg"
-                 version="1.1"
-                 viewBox="0 0 1000 618">
-              <defs>
-              <style>
-                  .cls-1 {
-                      fill: #0099c9;
-                  }
-
-                  .cls-1,
-                  .cls-2 {
-                      stroke: #fff;
-                      stroke-width: .8px;
-                  }
-
-                  .cls-2 {
-                      fill: #d3d3d3;
-                  }
-              </style>
-              </defs>
-              {% for state, path in map_paths.items() %}
-                {% if state in departments_by_state.keys() %}
-                  <path class="cls-1" d="{{ path }}" />
-                {% else %}
-                  <path class="cls-2" d="{{ path }}" />
-                {% endif %}
-              {% endfor %}
-            </svg>
+            <img alt="Map of states with departments in OpenOversight"
+                 src="{{ url_for('main.render_map') }}" />
           </div>
           <div class="col-lg-6">
             <a href="{{ url_for('main.get_officer') }}"

OpenOversight/app/templates/map.svg

@@ -4,6 +4,7 @@
 import pytest
 from flask import current_app, url_for
 
+from OpenOversight.app.models.database import Department
 from OpenOversight.app.utils.constants import ENCODING_UTF_8, KEY_TIMEZONE
 from OpenOversight.tests.constants import GENERAL_USER_USERNAME
 from OpenOversight.tests.routes.route_helpers import login_user
@@ -83,3 +84,14 @@ def test_timezone_setting_empty_string(client):
         assert rv.status_code == HTTPStatus.OK
         with client.session_transaction() as session:
             assert session[KEY_TIMEZONE] == current_app.config.get(KEY_TIMEZONE)
+
+
+def test_map_rendering(client, mockdata):
+    with current_app.test_request_context():
+        departments_by_state = Department.by_state()
+        rv = client.get(url_for("main.render_map"))
+        assert rv.status_code == HTTPStatus.OK
+        assert rv.mimetype == "image/svg+xml"
+
+        for state in departments_by_state.keys():
+            assert f"#state-{state}" in rv.data.decode(ENCODING_UTF_8)