Remove SIMD popup

web/src/AutoBoundariesMode.svelte

@@ -339,22 +339,21 @@
         hoverCursor="pointer"
         on:click={clickedBoundary}
       >
-        <Popup openOn="hover" let:props>
-          {#if selectedPrioritization == "none" || selectedPrioritization == "area"}
-            <b>Area:</b>
-            {props.area_km2.toFixed(1)} km²
-          {:else if selectedPrioritization == "density"}
-            <b>Population density:</b>
-            {Math.round(props.population / props.area_km2).toLocaleString()} people
-            / km²
-          {:else if selectedPrioritization == "simd"}
-            <b>SIMD:</b>
-            Less deprived than {props.simd.toFixed(1)}% of data zones.
-          {:else if selectedPrioritization == "stats19"}
-            <b>Pedestrian and cyclist collisions:</b>
-            {(props.number_stats19_collisions / props.area_km2).toFixed(1)} / km²
-          {/if}
-        </Popup>
+        {#if selectedPrioritization != "simd"}
+          <Popup openOn="hover" let:props>
+            {#if selectedPrioritization == "none"}
+              <b>Area:</b>
+              {props.area_km2.toFixed(1)} km²
+            {:else if selectedPrioritization == "density"}
+              <b>Population density:</b>
+              {Math.round(props.population / props.area_km2).toLocaleString()} people
+              / km²
+            {:else if selectedPrioritization == "stats19"}
+              <b>Pedestrian and cyclist collisions:</b>
+              {(props.number_stats19_collisions / props.area_km2).toFixed(1)} / km²
+            {/if}
+          </Popup>
+        {/if}
       </FillLayer>
 
       <LineLayer

web/src/PickNeighbourhoodMode.svelte

@@ -217,7 +217,7 @@
   <div slot="sidebar">
     <h3 style="padding: 4px 8px; margin-bottom: 0">Neighbourhoods</h3>
     <ul class="neighbourhood-list">
-      {#each neighbourhoods.features as { properties: { name, area_km2, simd } }}
+      {#each neighbourhoods.features as { properties: { name } }}
         <li
           on:mouseenter={() => (hoveredNeighbourhoodFromList = name)}
           on:mouseleave={() => (hoveredNeighbourhoodFromList = null)}
@@ -246,17 +246,6 @@
               </button>
             </span>
           </span>
-          {#if selectedPrioritization == "area"}
-            <span>
-              <b>Area:</b>
-              {area_km2.toFixed(1)} km²
-            </span>
-          {:else if selectedPrioritization == "simd"}
-            <span>
-              <b>SIMD:</b>
-              Less deprived than {simd.toFixed(1)}% of data zones.
-            </span>
-          {/if}
         </li>
       {/each}
       <li>
@@ -328,16 +317,10 @@
         <Popup openOn="hover" let:props>
           <h2>{props.name}</h2>
 
-          {#if selectedPrioritization == "none" || selectedPrioritization == "area"}
-            <b>Area:</b>
-            {props.area_km2.toFixed(1)} km²
-          {:else if selectedPrioritization == "density"}
+          {#if selectedPrioritization == "density"}
             <b>Population density:</b>
             {Math.round(props.population / props.area_km2).toLocaleString()} people
             / km²
-          {:else if selectedPrioritization == "simd"}
-            <b>SIMD:</b>
-            Less deprived than {props.simd.toFixed(1)}% of data zones.
           {:else if selectedPrioritization == "stats19"}
             <b>Pedestrian and cyclist collisions:</b>
             {(props.number_stats19_collisions / props.area_km2).toFixed(1)} / km²

web/src/prioritization/PrioritizationSelect.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
   import { SequentialLegend } from "svelte-utils";
   import {
-    areaColorScale,
-    areaLimits,
     bucketize,
     densityColorScale,
     densityLimits,
@@ -22,9 +20,7 @@
       "prioritizationMetric",
     );
 
-    if (currentURLParam == "area") {
-      selectedPrioritization = "area";
-    } else if (currentURLParam == "density") {
+    if (currentURLParam == "density") {
       selectedPrioritization = "density";
     } else if (currentURLParam == "simd") {
       selectedPrioritization = "simd";
@@ -53,18 +49,15 @@
   <label for="prioritization-selection">Metric</label>
   <select id="prioritization-selection" bind:value={selectedPrioritization}>
     <option value="none">None</option>
-    <option value="area">Area (km²)</option>
     <option value="density">Density</option>
     <option value="stats19">Collisions</option>
     <option value="simd">SIMD</option>
   </select>
 </div>
 
-{#if selectedPrioritization == "area"}
-  <SequentialLegend colorScale={areaColorScale} limits={areaLimits} />
-{:else if selectedPrioritization == "density"}
+{#if selectedPrioritization == "density"}
   <SequentialLegend colorScale={densityColorScale} limits={densityLimits} />
-  <div style="display: flex; justify-content: space-between;">
+  <div class="sub-labels">
     <span>Less less</span>
     <span>More dense</span>
   </div>
@@ -73,10 +66,18 @@
     colorScale={simdColorScale}
     buckets={bucketize(simdLimits)}
   />
-  <div style="display: flex; justify-content: space-between;">
+  <div class="sub-labels">
     <span>More deprived</span>
     <span>Less deprived</span>
   </div>
 {:else if selectedPrioritization == "stats19"}
   <SequentialLegend colorScale={stats19ColorScale} limits={stats19Limits} />
+  <div style="text-align: center;">collisions / km²</div>
 {/if}
+
+<style>
+  .sub-labels {
+    display: flex;
+    justify-content: space-between;
+  }
+</style>

web/src/prioritization/index.ts

@@ -1,3 +1,3 @@
 export { default as PrioritizationSelect } from "./PrioritizationSelect.svelte";
 
-export type Prioritization = "none" | "area" | "simd" | "stats19" | "density";
+export type Prioritization = "none" | "simd" | "stats19" | "density";