Fix flickered map and some minor optimization

modules/dreamview/backend/map/map_service.cc

@@ -127,8 +127,8 @@ nlohmann::json MapElementIds::Json() const {
 MapService::MapService(const std::string &map_filename)
     : pnc_map_(map_filename) {}
 
-MapElementIds MapService::CollectMapElements(const PointENU &point,
-                                             double radius) const {
+MapElementIds MapService::CollectMapElementIds(const PointENU &point,
+                                               double radius) const {
   MapElementIds result;
 
   std::vector<LaneInfoConstPtr> lanes;
@@ -232,7 +232,7 @@ bool MapService::GetPointsFromRouting(const RoutingResponse &routing,
   }
 
   std::vector<int> sampled_indices;
-  constexpr double angle_threshold = 0.1; // threshold is about 5.72 degree.
+  constexpr double angle_threshold = 0.1;  // threshold is about 5.72 degree.
   DownsampleByAngle(path.path_points(), angle_threshold, &sampled_indices);
   for (int index : sampled_indices) {
     points->push_back(path.path_points()[index]);

modules/dreamview/backend/map/map_service.h

@@ -62,8 +62,8 @@ struct MapElementIds {
 class MapService {
  public:
   explicit MapService(const std::string &map_filename);
-  MapElementIds CollectMapElements(const apollo::common::PointENU &point,
-                                   double raidus) const;
+  MapElementIds CollectMapElementIds(const apollo::common::PointENU &point,
+                                     double raidus) const;
 
   bool GetPointsFromRouting(
       const apollo::routing::RoutingResponse &routing,

modules/dreamview/backend/map/map_service_test.cc

@@ -72,11 +72,11 @@ TEST_F(MapServiceTest, LoadMap) {
   EXPECT_EQ("l1", map_service.hdmap()->get_lane_by_id(id)->id().id());
 }
 
-TEST_F(MapServiceTest, CollectMapElements) {
+TEST_F(MapServiceTest, CollectMapElementIds) {
   PointENU p;
   p.set_x(0.0);
   p.set_y(0.0);
-  MapElementIds map_element_ids = map_service.CollectMapElements(p, 20000.0);
+  MapElementIds map_element_ids = map_service.CollectMapElementIds(p, 20000.0);
 
   EXPECT_THAT(map_element_ids.lane, UnorderedElementsAre("l1"));
   EXPECT_THAT(map_element_ids.crosswalk, UnorderedElementsAre());

modules/dreamview/backend/simulation_world/simulation_world_service.cc

@@ -113,7 +113,7 @@ void SetObstacleInfo(const PerceptionObstacle &obstacle, Object *world_object) {
   world_object->set_speed(
       std::hypot(obstacle.velocity().x(), obstacle.velocity().y()));
   world_object->set_speed_heading(
-        std::atan2(obstacle.velocity().y(), obstacle.velocity().x()));
+      std::atan2(obstacle.velocity().y(), obstacle.velocity().x()));
   world_object->set_timestamp_sec(obstacle.timestamp());
 }
 
@@ -224,8 +224,7 @@ bool LocateMarker(const apollo::planning::ObjectDecisionType &decision,
     world_decision->set_type(Decision_Type_YIELD);
     fence_point = decision.yield().fence_point();
     heading = decision.yield().fence_heading();
-  } else if (decision.has_overtake() &&
-             decision.overtake().has_fence_point()) {
+  } else if (decision.has_overtake() && decision.overtake().has_fence_point()) {
     world_decision->set_type(Decision_Type_OVERTAKE);
     fence_point = decision.overtake().fence_point();
     heading = decision.overtake().fence_heading();
@@ -319,13 +318,13 @@ Json SimulationWorldService::GetUpdateAsJson() const {
   point.set_y(world_.auto_driving_car().position_y());
 
   MapElementIds map_element_ids =
-      map_service_->CollectMapElements(point, kMapRadius);
+      map_service_->CollectMapElementIds(point, kMapRadius);
 
   Json update;
   update["type"] = "sim_world_update";
   update["timestamp"] = apollo::common::time::AsInt64<millis>(Clock::Now());
   update["world"] = Json::parse(sim_world_json);
-  update["mapElements"] = map_element_ids.Json();
+  update["mapElementIds"] = map_element_ids.Json();
   update["mapHash"] = map_element_ids.Hash();
 
   return update;
@@ -546,8 +545,8 @@ void SimulationWorldService::UpdateDecision(const DecisionResult &decision_res,
   // Update obstacle decision.
   for (const auto &obj_decision : decision_res.object_decision().decision()) {
     if (obj_decision.has_perception_id()) {
-      Object &world_obj = obj_map_[std::to_string(
-          obj_decision.perception_id())];
+      Object &world_obj =
+          obj_map_[std::to_string(obj_decision.perception_id())];
       if (!world_obj.has_type()) {
         world_obj.set_type(Object_Type_VIRTUAL);
       }

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

@@ -219,8 +219,8 @@ class Renderer {
         this.map.appendMapData(newData, this.coordinates, this.scene);
     }
 
-    updateMapIndex(hash, elements) {
-        this.map.updateIndex(hash, elements, this.scene);
+    updateMapIndex(hash, elementIds) {
+        this.map.updateIndex(hash, elementIds, this.scene);
     }
 }
 

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

@@ -19,28 +19,33 @@ const colorMapping = {
     DEFAULT: 0xC0C0C0
 };
 
-// The result will be the all the elements in current but
-// not in data.
-function diffMapElements(elements, data) {
+function base64Decode(encoded) {
+    return Buffer.from(encoded, 'base64').toString();
+}
+
+// The result will be the all the elements in current but not in data.
+function diffMapElements(elementIds, data) {
     const result = {};
+    let empty = true;
 
-    for (const kind in elements) {
+    for (const kind in elementIds) {
         result[kind] = [];
-        const newOnes = elements[kind];
-        const oldOnes = data[kind];
+        const newIds = elementIds[kind];
+        const oldData = data[kind];
 
-        for (let i = 0; i < newOnes.length; ++i) {
-            const found = oldOnes ? oldOnes.find(x => {
-                return x.id.id === newOnes[i];
+        for (let i = 0; i < newIds.length; ++i) {
+            const found = oldData ? oldData.find(old => {
+                return base64Decode(old.id.id) === newIds[i];
             }) : false;
 
             if (!found) {
-                result[kind].push(newOnes[i]);
+                empty = false;
+                result[kind].push(newIds[i]);
             }
         }
     }
 
-    return result;
+    return empty ? {} : result;
 }
 
 function addLaneMesh(laneType, points) {
@@ -232,16 +237,18 @@ export default class Map {
         this.data = {};
     }
 
-    removeExpiredElements(elements, scene) {
+    removeExpiredElements(elementIds, scene) {
         const newData = {};
 
         for (const kind in this.data) {
             newData[kind] = [];
             const oldDataOfThisKind = this.data[kind];
-            const current = elements[kind];
+            const current = elementIds[kind];
             if (current) {
                 for (let i = 0; i < oldDataOfThisKind.length; ++i) {
-                    if (current.includes(oldDataOfThisKind[i].id.id)) {
+                    // Map elements Id is base64 encoded by MessageToJsonString
+                    const id = base64Decode(oldDataOfThisKind[i].id.id);
+                    if (current.includes(id)) {
                         newData[kind].push(oldDataOfThisKind[i]);
                     } else if (oldDataOfThisKind[i].drewObjects) {
                         oldDataOfThisKind[i].drewObjects.forEach(object => {
@@ -301,12 +308,14 @@ export default class Map {
         }
     }
 
-    updateIndex(hash, elements, scene) {
+    updateIndex(hash, elementIds, scene) {
         if (hash !== this.hash) {
             this.hash = hash;
-            const diff = diffMapElements(elements, this.data);
-            this.removeExpiredElements(elements, scene);
-            WS.requestMapData(diff);
+            const diff = diffMapElements(elementIds, this.data);
+            this.removeExpiredElements(elementIds, scene);
+            if (!_.isEmpty(diff)) {
+                WS.requestMapData(diff);
+            }
         }
     }
 }

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

@@ -34,9 +34,9 @@ class WebSocketEndpoint {
                         // NOTE: This is a hack to limit the rate
                         // of map updates.
                         this.counter = 0;
-                        RENDERER.updateMapIndex(
-                            message.mapHash, message.mapElements);
+                        RENDERER.updateMapIndex(message.mapHash, message.mapElementIds);
                     }
+                    this.counter += 1;
                     break;
                 case "MapData":
                     RENDERER.updateMap(message.data);