Dreamview: implemented map element toggles in layer menu (#3083)

modules/dreamview/frontend/src/components/SideBar/Menu.js

@@ -47,6 +47,13 @@ const MenuIdOptionMapping = {
         planningLine: 'showPlanning',
         positionLocalization: 'showPositionLocalization',
         positionGps: 'showPositionGps',
+        mapCrosswalk: 'showMapCrosswalk',
+        mapClearArea: 'showMapClearArea',
+        mapJunction: 'showMapJunction',
+        mapLane: 'showMapLane',
+        mapRoad: 'showMapRoad',
+        mapSignal: 'showMapSignal',
+        mapStopSign: 'showMapStopSign',
 };
 
 @observer

modules/dreamview/frontend/src/renderer/map.js

 import * as THREE from "three";
-import {MAP_WS} from "store/websocket";
+import STORE from "store";
+import { MAP_WS } from "store/websocket";
 
 import {
     drawSegmentsFromPoints,
@@ -49,6 +50,7 @@ export default class Map {
         this.laneHeading = {};
         this.overlapMap = {};
         this.initialized = false;
+        this.elementKindsDrawn = '';
     }
 
     // The result will be the all the elements in current but not in data.
@@ -57,6 +59,10 @@ export default class Map {
         let empty = true;
 
         for (const kind in elementIds) {
+            if (!this.shouldDrawThisElementKind(kind)) {
+                continue;
+            }
+
             result[kind] = [];
             const newIds = elementIds[kind];
             const oldData = data[kind];
@@ -381,14 +387,17 @@ export default class Map {
         const newData = {};
 
         for (const kind in this.data) {
+            const drawThisKind = this.shouldDrawThisElementKind(kind);
             newData[kind] = [];
             const oldDataOfThisKind = this.data[kind];
             const currentIds = elementIds[kind];
             oldDataOfThisKind.forEach(oldData => {
-                if (currentIds && currentIds.includes(oldData.id.id)) {
+                if (drawThisKind && currentIds && currentIds.includes(oldData.id.id)) {
                     newData[kind].push(oldData);
                 } else {
-                    this.removeDrewObjects(oldData.drewObjects, scene);
+                    if (kind !== "overlap") {
+                        this.removeDrewObjects(oldData.drewObjects, scene);
+                    }
                     if (kind === 'lane') {
                         delete this.laneHeading[oldData.id.id];
                     }
@@ -472,10 +481,27 @@ export default class Map {
         }
     }
 
+    shouldDrawThisElementKind(kind) {
+        // Ex: mapping 'lane' to 'showMapLane' option
+        const optionName = `showMap${kind[0].toUpperCase()}${kind.slice(1)}`;
+
+        // NOTE: return true if the option is not found
+        return STORE.options[optionName] !== false;
+    }
+
     updateIndex(hash, elementIds, scene) {
-        if (hash !== this.hash) {
+        let newElementKindsDrawn = '';
+        for (const kind of Object.keys(elementIds).sort()) {
+            if (this.shouldDrawThisElementKind(kind)) {
+                newElementKindsDrawn += kind;
+            }
+        }
+
+        if (hash !== this.hash || this.elementKindsDrawn !== newElementKindsDrawn) {
             this.hash = hash;
+            this.elementKindsDrawn = newElementKindsDrawn;
             const diff = this.diffMapElements(elementIds, this.data);
+            this.removeExpiredElements(elementIds, scene);
             if (!_.isEmpty(diff) || !this.initialized) {
                 MAP_WS.requestMapData(diff);
                 this.initialized = true;

modules/dreamview/frontend/src/store/config/MenuData.js

@@ -68,5 +68,18 @@ export default [
             positionLocalization: 'Localization',
             positionGps: 'GPS',
         }
+    }, {
+        id: 'map',
+        title: 'Map',
+        type: 'checkbox',
+        data: {
+            mapCrosswalk: 'Crosswalk',
+            mapClearArea: 'Clear Area',
+            mapJunction: 'Junction',
+            mapLane: 'Lane',
+            mapRoad: 'Road',
+            mapSignal: 'Signal',
+            mapStopSign: 'Stop Sign',
+        }
     },
 ];

modules/dreamview/frontend/src/store/config/parameters.yml

@@ -74,6 +74,13 @@ options:
     showPointCloud: false
     showPositionGps: false
     showPositionLocalization: true
+    showMapCrosswalk: true
+    showMapClearArea: true
+    showMapJunction: false
+    showMapLane: true
+    showMapRoad: false
+    showMapSignal: true
+    showMapStopSign: true
     cameraAngle: Default
 debug:
   # Turn this on for monitor related debugging

modules/dreamview/frontend/src/store/options.js

@@ -48,6 +48,13 @@ export default class Options {
     @observable showPointCloud = PARAMETERS.options.defaults.showPointCloud;
     @observable showPositionGps = PARAMETERS.options.defaults.showPositionGps;
     @observable showPositionLocalization = PARAMETERS.options.defaults.showPositionLocalization;
+    @observable showMapCrosswalk = PARAMETERS.options.defaults.showMapCrosswalk;
+    @observable showMapClearArea = PARAMETERS.options.defaults.showMapClearArea;
+    @observable showMapJunction = PARAMETERS.options.defaults.showMapJunction;
+    @observable showMapLane = PARAMETERS.options.defaults.showMapLane;
+    @observable showMapRoad = PARAMETERS.options.defaults.showMapRoad;
+    @observable showMapSignal = PARAMETERS.options.defaults.showMapSignal;
+    @observable showMapStopSign = PARAMETERS.options.defaults.showMapStopSign;
 
     // Others
     @observable showPNCMonitor = PARAMETERS.options.defaults.showPNCMonitor;