From 6ef233a2a233f12f0731105f0a74d2d981cab130 Mon Sep 17 00:00:00 2001
From: Paul Bienkowski <pb@opatut.de>
Date: Wed, 16 Mar 2022 22:06:06 +0100
Subject: [PATCH] Show usage count on map

---
 frontend/src/pages/MapPage/LayerSidebar.tsx |  1 +
 frontend/src/reducers/mapConfig.ts          | 81 ++++++++++++---------
 2 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/frontend/src/pages/MapPage/LayerSidebar.tsx b/frontend/src/pages/MapPage/LayerSidebar.tsx
index 1448d5c..4f4626a 100644
--- a/frontend/src/pages/MapPage/LayerSidebar.tsx
+++ b/frontend/src/pages/MapPage/LayerSidebar.tsx
@@ -22,6 +22,7 @@ const ROAD_ATTRIBUTE_OPTIONS = [
   {value: 'distance_overtaker_max', key: 'distance_overtaker_max', text: 'Overtaker distance maximum'},
   {value: 'distance_overtaker_median', key: 'distance_overtaker_median', text: 'Overtaker distance median'},
   {value: 'overtaking_event_count', key: 'overtaking_event_count', text: 'Event count'},
+  {value: 'usage_count', key: 'usage_count', text: 'Usage count'},
 ]
 
 function LayerSidebar({
diff --git a/frontend/src/reducers/mapConfig.ts b/frontend/src/reducers/mapConfig.ts
index f779238..f0140cb 100644
--- a/frontend/src/reducers/mapConfig.ts
+++ b/frontend/src/reducers/mapConfig.ts
@@ -1,67 +1,80 @@
-import {useMemo} from 'react'
-import {useSelector} from 'react-redux'
-import produce from 'immer'
-import _ from 'lodash'
+import { useMemo } from "react";
+import { useSelector } from "react-redux";
+import produce from "immer";
+import _ from "lodash";
 
-type BaseMapStyle = 'positron' | 'bright'
+type BaseMapStyle = "positron" | "bright";
 
 type RoadAttribute =
-  | 'distance_overtaker_mean'
-  | 'distance_overtaker_min'
-  | 'distance_overtaker_max'
-  | 'distance_overtaker_median'
-  | 'overtaking_event_count'
+  | "distance_overtaker_mean"
+  | "distance_overtaker_min"
+  | "distance_overtaker_max"
+  | "distance_overtaker_median"
+  | "overtaking_event_count"
+  | "usage_count";
 
 export type MapConfig = {
   baseMap: {
-    style: BaseMapStyle
-  }
+    style: BaseMapStyle;
+  };
   obsRoads: {
-    show: boolean
-    showUntagged: boolean
-    attribute: RoadAttribute
-    maxCount: number
-  }
+    show: boolean;
+    showUntagged: boolean;
+    attribute: RoadAttribute;
+    maxCount: number;
+  };
   obsEvents: {
-    show: boolean
-  }
-}
+    show: boolean;
+  };
+};
 
 export const initialState: MapConfig = {
   baseMap: {
-    style: 'positron',
+    style: "positron",
   },
   obsRoads: {
     show: true,
     showUntagged: true,
-    attribute: 'distance_overtaker_median',
+    attribute: "distance_overtaker_median",
     maxCount: 20,
   },
   obsEvents: {
     show: false,
   },
-}
+};
 
-type MapConfigAction = {type: 'MAP_CONFIG.SET_FLAG'; payload: {flag: string; value: any}}
+type MapConfigAction = {
+  type: "MAP_CONFIG.SET_FLAG";
+  payload: { flag: string; value: any };
+};
 
-export function setMapConfigFlag(flag: string, value: unknown): MapConfigAction {
-  return {type: 'MAP_CONFIG.SET_FLAG', payload: {flag, value}}
+export function setMapConfigFlag(
+  flag: string,
+  value: unknown
+): MapConfigAction {
+  return { type: "MAP_CONFIG.SET_FLAG", payload: { flag, value } };
 }
 
 export function useMapConfig() {
-  const mapConfig = useSelector((state) => state.mapConfig)
-  const result = useMemo(() => _.merge({}, initialState, mapConfig), [mapConfig])
-  return result
+  const mapConfig = useSelector((state) => state.mapConfig);
+  const result = useMemo(
+    () => _.merge({}, initialState, mapConfig),
+    [mapConfig]
+  );
+  return result;
 }
 
-export default function mapConfigReducer(state: MapConfig = initialState, action: MapConfigAction) {
+export default function mapConfigReducer(
+  state: MapConfig = initialState,
+  action: MapConfigAction
+) {
   switch (action.type) {
-    case 'MAP_CONFIG.SET_FLAG':
+    case "MAP_CONFIG.SET_FLAG":
       return produce(state, (draft) => {
-        _.set(draft, action.payload.flag, action.payload.value)
-      })
+        _.set(draft, action.payload.flag, action.payload.value);
+      });
 
     default:
-      return state
+      return state;
   }
 }