Dreamview:Loop routing optimization on master (#13274)

* Dreamview:loop routing add threshold at be,add no loop logic

* DV:modify the wrong indent and add build fe

modules/dreamview/backend/common/dreamview_gflags.cc

@@ -92,3 +92,6 @@ DEFINE_int32(monitor_msg_pending_queue_size, 10,
 DEFINE_string(default_data_collection_config_path,
               "/apollo/modules/dreamview/conf/data_collection_table.pb.txt",
               "Data collection table config path.");
+
+DEFINE_int32(loop_routing_end_to_start_distance_threshold, 10,
+             "Loop routing distance threshold: start to end");

modules/dreamview/backend/common/dreamview_gflags.h

@@ -59,3 +59,5 @@ DECLARE_string(lidar_height_yaml);
 DECLARE_int32(monitor_msg_pending_queue_size);
 
 DECLARE_string(default_data_collection_config_path);
+
+DECLARE_int32(loop_routing_end_to_start_distance_threshold);

modules/dreamview/backend/simulation_world/simulation_world_updater.cc

@@ -276,6 +276,8 @@ void SimulationWorldUpdater::RegisterMessageHandlers() {
       [this](const Json &json, WebSocketHandler::Connection *conn) {
         Json response;
         response["type"] = "DefaultRoutings";
+        response["threshold"] =
+            FLAGS_loop_routing_end_to_start_distance_threshold;
 
         Json default_routing_list = Json::array();
         if (LoadDefaultRoutings()) {

modules/dreamview/frontend/src/components/DefaultRouting/CycleNumberInput.js

 import React from 'react';
 import _ from 'lodash';
 
+import CheckboxItem from 'components/common/CheckboxItem';
+
 export default class CycleNumberInput extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
       cycleNumber: 1,
+      isCycling: false,
     };
     this.sendCycleDefaultRouting = this.sendCycleDefaultRouting.bind(this);
     this.cancelSendDefaultRouting = this.cancelSendDefaultRouting.bind(this);
+    this.toggleCycle = this.toggleCycle.bind(this);
     this.handleInput = (event) => {
       this.setState({ cycleNumber: event.target.value });
     };
   }
 
+  toggleCycle() {
+    this.setState((prevState) => {
+      return { isCycling: !prevState.isCycling };
+    });
+  }
+
   sendCycleDefaultRouting() {
     const { routeEditingManager, options } = this.props;
-    const cycleNumber = parseInt(this.state.cycleNumber, 10);
-    if (isNaN(cycleNumber) || cycleNumber < 1) {
-      alert('please input a valid cycle number');
+    if (this.state.isCycling) {
+      const cycleNumber = parseInt(this.state.cycleNumber, 10);
+      if (isNaN(cycleNumber) || cycleNumber < 1) {
+        alert('please input a valid cycle number');
+      }
+      else if (!routeEditingManager.checkCycleRoutingAvailable()) {
+        alert(`Please set the default routing reasonably,the distance from the start point
+          to the end point should not exceed ${routeEditingManager.defaultRoutingDistanceThreshold},
+          otherwise it will not be able to form a closed loop.`);
+      }
+      else {
+        routeEditingManager.sendCycleRoutingRequest(cycleNumber);
+      }
     }
     else {
-      routeEditingManager.sendCycleRoutingRequest(routeEditingManager.currentDefaultRouting,
-        cycleNumber);
+      routeEditingManager.sendRoutingRequest(false, routeEditingManager.currentDefaultRouting);
     }
     options.showCycleNumberInput = false;
   }
@@ -38,13 +57,26 @@ export default class CycleNumberInput extends React.Component {
       <React.Fragment>
         <div className="default-routing-input">
           <div>
-            <label className="name-label">Cycle Number:</label>
-            <input
-              className="name-input"
-              value={this.state.cycleNumber}
-              onChange={this.handleInput}
-              type="number"
-            ></input>
+            <div>
+              <label className="name-label">Start Cycling</label>
+              <CheckboxItem
+                extraClasses="start-cycle-checkbox"
+                id="isReportableData"
+                isChecked={this.state.isCycling}
+                disabled={false}
+                onClick={this.toggleCycle}
+              />
+            </div>
+            {this.state.isCycling &&
+              <div>
+                <label className="name-label">Cycle Number:</label>
+                <input
+                  className="name-input"
+                  value={this.state.cycleNumber}
+                  onChange={this.handleInput}
+                  type="number"
+                ></input>
+              </div>}
           </div>
           <div className="default-routing-input-btn">
             <button className="input-button submit-button" onClick={this.sendCycleDefaultRouting}>Send</button>

modules/dreamview/frontend/src/components/DefaultRouting/DefaultRoutingPoint.js

@@ -5,19 +5,6 @@ import RadioItem from 'components/common/RadioItem';
 
 @observer
 export default class DefaultRoutingPoint extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      startCycling: false,
-    };
-    this.handleInput = this.handleInput.bind(this);
-  }
-
-  handleInput() {
-    this.setState((prevState) => ({ startCycling: !prevState.startCycling }));
-  }
-
   render() {
     //Navigation mode not considered
     const { routeEditingManager, options } = this.props;

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

@@ -351,10 +351,10 @@ class Renderer {
     this.routingEditor.removeLastRoutingPoint(this.scene);
   }
 
-  sendRoutingRequest() {
+  sendRoutingRequest(points = []) {
     return this.routingEditor.sendRoutingRequest(this.adc.mesh.position,
       this.adc.mesh.rotation.y,
-      this.coordinates);
+      this.coordinates, points);
   }
 
   sendCycleRoutingRequest(defaultRoutingName, points, cycleNumber) {

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

@@ -6,7 +6,6 @@ import WS from 'store/websocket';
 import { drawImage } from 'utils/draw';
 
 const minDefaultRoutingPointsNum = 1;
-const maxDistance = 5;
 
 export default class RoutingEditor {
   constructor() {
@@ -48,7 +47,6 @@ export default class RoutingEditor {
     this.routePoints.push(pointMesh);
     scene.add(pointMesh);
     if (offset) {
-      // Default routing has been checked
       WS.checkRoutingPoint(point);
     }
   }
@@ -94,23 +92,25 @@ export default class RoutingEditor {
     }
   }
 
-  sendRoutingRequest(carOffsetPosition, carHeading, coordinates) {
-    if (this.routePoints.length === 0) {
+  sendRoutingRequest(carOffsetPosition, carHeading, coordinates, routingPoints) {
+    if (this.routePoints.length === 0 && routingPoints.length === 0) {
       alert('Please provide at least an end point.');
       return false;
     }
-
-    const points = this.routePoints.map((object) => {
-      object.position.z = 0;
-      return coordinates.applyOffset(object.position, true);
-    });
+    const points = _.isEmpty(routingPoints) ?
+      this.routePoints.map((object) => {
+        object.position.z = 0;
+        return coordinates.applyOffset(object.position, true);
+      }) : routingPoints.map((point) => {
+        point.z = 0;
+        return coordinates.applyOffset(point, true);
+      });
     const start = (points.length > 1) ? points[0]
       : coordinates.applyOffset(carOffsetPosition, true);
     const start_heading = (points.length > 1) ? null : carHeading;
     const end = points[points.length - 1];
     const waypoint = (points.length > 1) ? points.slice(1, -1) : [];
     WS.requestRoute(start, start_heading, waypoint, end, this.parkingInfo);
-
     return true;
   }
 
@@ -137,19 +137,6 @@ export default class RoutingEditor {
     const points = this.routePoints.map((object) => {
       return object.position;
     });
-    if (!this.checkDefaultRoutingAvailable(points[0], points[points.length - 1])) {
-      alert(`Please set the default routing reasonably,the distance from the start point to the end 
-point should not exceed ${maxDistance},otherwise it will not be able to form a closed loop.`);
-      return false;
-    }
     WS.saveDefaultRouting(routingName, points);
   }
-
-  checkDefaultRoutingAvailable(start, end) {
-    if (_.isEmpty(start) || _.isEmpty(end)) {
-      return false;
-    }
-    const distance = Math.sqrt(Math.pow((end.x - start.x), 2) + Math.pow((end.y - start.y), 2));
-    return distance <= maxDistance;
-  }
 }

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

@@ -12,6 +12,8 @@ export default class RouteEditingManager {
 
     @observable defaultRoutings = {};
 
+    @observable defaultRoutingDistanceThreshold = 10;
+
     @observable currentPOI = 'none';
 
     @observable inDefaultRoutingMode = false;
@@ -80,6 +82,9 @@ export default class RouteEditingManager {
     }
 
     @action updateDefaultRoutingPoints(data) {
+      if (data.threshold) {
+        this.defaultRoutingDistanceThreshold = data.threshold;
+      }
       if (data.defaultRoutings === undefined) {
         return;
       }
@@ -122,9 +127,10 @@ export default class RouteEditingManager {
       RENDERER.removeAllRoutingPoints();
     }
 
-    sendRoutingRequest(inNavigationMode) {
+    sendRoutingRequest(inNavigationMode, defaultRoutingName = '') {
       if (!inNavigationMode) {
-        const success = RENDERER.sendRoutingRequest();
+        const success = _.isEmpty(defaultRoutingName) ? RENDERER.sendRoutingRequest()
+          : RENDERER.sendRoutingRequest(this.defaultRoutings[defaultRoutingName]);
         if (success) {
           this.disableRouteEditing();
         }
@@ -133,11 +139,11 @@ export default class RouteEditingManager {
       return MAP_NAVIGATOR.sendRoutingRequest();
     }
 
-    sendCycleRoutingRequest(defaultRoutingName, cycleNumber) {
-      const points = this.defaultRoutings[defaultRoutingName];
+    sendCycleRoutingRequest(cycleNumber) {
+      const points = this.defaultRoutings[this.currentDefaultRouting];
       if (!isNaN(cycleNumber) || !points) {
         const success = RENDERER.sendCycleRoutingRequest
-        (defaultRoutingName, points, cycleNumber);
+        (this.currentDefaultRouting, points, cycleNumber);
         if (success) {
           this.disableRouteEditing();
         }
@@ -145,4 +151,16 @@ export default class RouteEditingManager {
       }
       return false;
     }
+
+    checkCycleRoutingAvailable() {
+      const points = this.defaultRoutings[this.currentDefaultRouting];
+      const start = points[0];
+      const end = points[points.length - 1];
+      if (_.isEmpty(start) || _.isEmpty(end)) {
+        return false;
+      }
+      const distance =
+          Math.sqrt(Math.pow((end.x - start.x), 2) + Math.pow((end.y - start.y), 2));
+      return distance <= this.defaultRoutingDistanceThreshold;
+    }
 }

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

@@ -239,7 +239,7 @@ export default class RealtimeWebSocketEndpoint {
       start,
       end,
       waypoint,
-      cycleNumber
+      cycleNumber,
     };
     if (start_heading) {
       request.start.heading = start_heading;
@@ -384,8 +384,8 @@ export default class RealtimeWebSocketEndpoint {
   saveDefaultRouting(routingName,points) {
     const request = {
       type: 'SaveDefaultRouting',
-      name:routingName,
-      point:points,
+      name: routingName,
+      point: points,
     };
     this.websocket.send(JSON.stringify(request));
   }

modules/dreamview/frontend/src/styles/main.scss

@@ -361,6 +361,11 @@ body {
             padding: 10px 0 10px 10px;
         }
 
+        .start-cycle-checkbox {
+            display: inline-block;
+            padding-left: 20px;
+        }
+        
         .name-input {
             margin: 10px;
             min-height: 20px;