From 76b1b41b4b13d252484457f6241577d32cf3b188 Mon Sep 17 00:00:00 2001
From: Paul Bienkowski <pb@opatut.de>
Date: Mon, 25 Jul 2022 22:24:31 +0200
Subject: [PATCH] derive logic for "include roads without data" from selected
 attribute

---
 frontend/src/mapstyles/index.js      | 11 +++++++++--
 frontend/src/pages/MapPage/index.tsx | 18 ++++++++++--------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/frontend/src/mapstyles/index.js b/frontend/src/mapstyles/index.js
index e82106b..7dcfa1f 100644
--- a/frontend/src/mapstyles/index.js
+++ b/frontend/src/mapstyles/index.js
@@ -44,12 +44,19 @@ export const reds = [
 ]
 
 export function colorByCount(attribute = 'event_count', maxCount, colormap = viridis) {
-  return colormapToScale(colormap, ['case', ['to-boolean', ['get', attribute]], ['get', attribute], 0], 0, maxCount)
+  return colormapToScale(colormap, ['case', isValidAttribute(attribute), ['get', attribute], 0], 0, maxCount)
 }
 
 var steps = {'rural': [1.6,1.8,2.0,2.2],
              'urban': [1.1,1.3,1.5,1.7]}
 
+export function isValidAttribute(attribute) {
+  if (attribute.endsWith('zone')) {
+    return ['in', ['get', attribute], ['literal', ['rural', 'urban']]]
+  }
+  return ['to-boolean', ['get', attribute]]
+}
+
 export function borderByZone() {
   return ["match", ['get', 'zone'],
   "rural", "cyan",
@@ -62,7 +69,7 @@ export function colorByDistance(attribute = 'distance_overtaker_mean', fallback
 
   return [
     'case',
-    ['!', ['to-boolean', ['get', attribute]]],
+    ['!', isValidAttribute(attribute)],
     fallback,
     ["match", ['get', 'zone'], "rural",
     [
diff --git a/frontend/src/pages/MapPage/index.tsx b/frontend/src/pages/MapPage/index.tsx
index bf597e0..a3196dd 100644
--- a/frontend/src/pages/MapPage/index.tsx
+++ b/frontend/src/pages/MapPage/index.tsx
@@ -6,7 +6,7 @@ import produce from 'immer'
 
 import {Page, Map} from 'components'
 import {useConfig} from 'config'
-import {colorByDistance, colorByCount, borderByZone, reds} from 'mapstyles'
+import {colorByDistance, colorByCount, borderByZone, reds, isValidAttribute} from 'mapstyles'
 import {useMapConfig} from 'reducers/mapConfig'
 
 import RoadInfo from './RoadInfo'
@@ -40,15 +40,16 @@ const untaggedRoadsLayer = {
   minzoom: 12,
 }
 
+const getUntaggedRoadsLayer = (colorAttribute, maxCount) =>
+  produce(untaggedRoadsLayer, (draft) => {
+    draft.filter = ['!', isValidAttribute(colorAttribute)]
+  })
+
+
 const getRoadsLayer = (colorAttribute, maxCount) =>
   produce(untaggedRoadsLayer, (draft) => {
     draft.id = 'obs_roads_normal'
-    if (colorAttribute.endsWith('_count')) {
-      // delete draft.filter
-      draft.filter = ['to-boolean', ['get', colorAttribute]]
-    } else {
-      draft.filter = draft.filter[1] // remove '!'
-    }
+    draft.filter = isValidAttribute(colorAttribute)
     draft.paint['line-width'][6] = 6 // scale bigger on zoom
     draft.paint['line-color'] = colorAttribute.startsWith('distance_')
       ? colorByDistance(colorAttribute)
@@ -130,8 +131,9 @@ export default function MapPage() {
 
   const layers = []
 
+  const untaggedRoadsLayerCustom = useMemo(() => getUntaggedRoadsLayer(attribute), [attribute])
   if (mapConfig.obsRoads.show && mapConfig.obsRoads.showUntagged) {
-    layers.push(untaggedRoadsLayer)
+    layers.push(untaggedRoadsLayerCustom)
   }
 
   const roadsLayer = useMemo(() => getRoadsLayer(attribute, maxCount), [attribute, maxCount])