From 5b5313731356561276f05d8179c3a1476f3dfa24 Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Fri, 29 Mar 2024 11:48:20 +0000
Subject: [PATCH] Add more cases for the block classification

---
 osm2streets/src/block.rs                   | 17 ++++++++++++
 web/src/common/Legend.svelte               | 24 +++++++++++++++++
 web/src/common/index.ts                    |  1 +
 web/src/street-explorer/App.svelte         |  5 +++-
 web/src/street-explorer/RenderBlock.svelte | 30 +++++++++++++---------
 5 files changed, 64 insertions(+), 13 deletions(-)
 create mode 100644 web/src/common/Legend.svelte

diff --git a/osm2streets/src/block.rs b/osm2streets/src/block.rs
index f88050ca..9b91b466 100644
--- a/osm2streets/src/block.rs
+++ b/osm2streets/src/block.rs
@@ -23,6 +23,11 @@ pub enum Step {
 pub enum BlockKind {
     /// The space between a road and sidewalk. It might be a wide sidewalk or contain grass.
     RoadAndSidewalk,
+    /// The space between a road and cycle lane. It should contain some kind of separation.
+    RoadAndCycleLane,
+    /// The space between a cycle lane and sidewalk. It should contain some kind of separation --
+    /// at least a curb.
+    CycleLaneAndSidewalk,
     /// The space between one-way roads. Probably has some kind of physical barrier, not just
     /// markings.
     DualCarriageway,
@@ -202,6 +207,7 @@ fn trace_polygon(streets: &StreetNetwork, steps: &Vec<Step>, clockwise: bool) ->
 
 fn classify(streets: &StreetNetwork, steps: &Vec<Step>) -> BlockKind {
     let mut has_road = false;
+    let mut has_cycle_lane = false;
     let mut has_sidewalk = false;
 
     for step in steps {
@@ -210,6 +216,10 @@ fn classify(streets: &StreetNetwork, steps: &Vec<Step>) -> BlockKind {
             if road.is_driveable() {
                 // TODO Or bus lanes?
                 has_road = true;
+            } else if road.lane_specs_ltr.len() == 1
+                && road.lane_specs_ltr[0].lt == LaneType::Biking
+            {
+                has_cycle_lane = true;
             } else if road.lane_specs_ltr.len() == 1
                 && road.lane_specs_ltr[0].lt == LaneType::Sidewalk
             {
@@ -221,11 +231,18 @@ fn classify(streets: &StreetNetwork, steps: &Vec<Step>) -> BlockKind {
     if has_road && has_sidewalk {
         return BlockKind::RoadAndSidewalk;
     }
+    if has_road && has_cycle_lane {
+        return BlockKind::RoadAndCycleLane;
+    }
     if has_road {
         // TODO Insist on one-ways pointing the opposite direction? What about different types of
         // small connector roads?
         return BlockKind::DualCarriageway;
     }
+    // TODO This one is usually missed, because of a small piece of road crossing both
+    if !has_road && has_cycle_lane && has_sidewalk {
+        return BlockKind::CycleLaneAndSidewalk;
+    }
 
     BlockKind::Unknown
 }
diff --git a/web/src/common/Legend.svelte b/web/src/common/Legend.svelte
new file mode 100644
index 00000000..840c92de
--- /dev/null
+++ b/web/src/common/Legend.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  // (Label, color) pairs
+  export let rows: [string, string][];
+</script>
+
+<ul>
+  {#each rows as [label, color]}
+    <li>
+      <span style:background={color} />
+      {label}
+    </li>
+  {/each}
+</ul>
+
+<style>
+  span {
+    display: block;
+    float: left;
+    height: 16px;
+    width: 30px;
+    margin-right: 5px;
+    border: 1px solid #999;
+  }
+</style>
diff --git a/web/src/common/index.ts b/web/src/common/index.ts
index 7b40d02d..5ecf453c 100644
--- a/web/src/common/index.ts
+++ b/web/src/common/index.ts
@@ -1,6 +1,7 @@
 export { default as BasemapPicker } from "./BasemapPicker.svelte";
 export { default as Geocoder } from "./Geocoder.svelte";
 export { default as Layout } from "./Layout.svelte";
+export { default as Legend } from "./Legend.svelte";
 export { default as Map } from "./Map.svelte";
 export { default as StreetView } from "./StreetView.svelte";
 export { default as ThemePicker } from "./ThemePicker.svelte";
diff --git a/web/src/street-explorer/App.svelte b/web/src/street-explorer/App.svelte
index 99886561..d8083e07 100644
--- a/web/src/street-explorer/App.svelte
+++ b/web/src/street-explorer/App.svelte
@@ -91,11 +91,14 @@
 
         <hr />
 
+        <RenderBlock />
+
+        <hr />
+
         <DynamicMovementArrows />
         <DynamicRoadOrdering />
         <DynamicConnectedRoads />
         <DebugIDs />
-        <RenderBlock />
 
         <hr />
 
diff --git a/web/src/street-explorer/RenderBlock.svelte b/web/src/street-explorer/RenderBlock.svelte
index 0321349f..2853bc12 100644
--- a/web/src/street-explorer/RenderBlock.svelte
+++ b/web/src/street-explorer/RenderBlock.svelte
@@ -2,7 +2,9 @@
   import { caseHelper, layerId, emptyGeojson } from "../common/utils";
   import { Popup, FillLayer, GeoJSON } from "svelte-maplibre";
   import { blockGj } from "./stores";
-  import { network } from "../common";
+  import { network, Legend } from "../common";
+
+  $: active = $blockGj.features.length > 0;
 
   function clear() {
     blockGj.set(emptyGeojson());
@@ -11,31 +13,35 @@
   function findAll() {
     blockGj.set(JSON.parse($network!.findAllBlocks()));
   }
+
+  let colors = {
+    RoadAndSidewalk: "green",
+    RoadAndCycleLane: "orange",
+    CycleLaneAndSidewalk: "yellow",
+    DualCarriageway: "purple",
+    Unknown: "blue",
+  };
 </script>
 
 <GeoJSON data={$blockGj}>
   <FillLayer
     {...layerId("block")}
     paint={{
-      "fill-color": caseHelper(
-        "kind",
-        {
-          RoadAndSidewalk: "green",
-          DualCarriageway: "purple",
-          Unknown: "red",
-        },
-        "red",
-      ),
+      "fill-color": caseHelper("kind", colors, "red"),
       "fill-opacity": 0.8,
     }}
   >
     <Popup openOn="hover" let:data>
-      <pre>{JSON.stringify(data.properties, null, "  ")}</pre>
+      <p>{data.properties.kind}</p>
     </Popup>
   </FillLayer>
 </GeoJSON>
 
 <div>
-  Block <button on:click={clear}>Clear</button>
+  Blocks
+  <button on:click={clear} disabled={!active}>Clear</button>
   <button on:click={findAll}>Find all</button>
 </div>
+{#if active}
+  <Legend rows={Object.entries(colors)} />
+{/if}