Dreamview: added planning theta graph to PNC monitor

modules/dreamview/backend/simulation_world/simulation_world_service.cc

@@ -762,11 +762,7 @@ void SimulationWorldService::UpdatePlanningData(const PlanningData &data) {
     for (int index : sampled_indices) {
       const auto &path_point = path.path_point()[index];
       auto *point = downsampled_path->add_path_point();
-      point->set_x(path_point.x());
-      point->set_y(path_point.y());
-      point->set_s(path_point.s());
-      point->set_kappa(path_point.kappa());
-      point->set_dkappa(path_point.dkappa());
+      point->CopyFrom(path_point);
     }
   }
 }

modules/dreamview/frontend/src/components/PNCMonitor/PlanningMonitor.js

@@ -51,6 +51,7 @@ export default class PlanningMonitor extends React.Component {
             <div>
                 {this.generateScatterGraph('speedGraph', data.speedGraph)}
                 {this.generateScatterGraph('accelerationGraph', data.accelerationGraph)}
+                {this.generateScatterGraph('thetaGraph', data.thetaGraph)}
                 {this.generateScatterGraph('kappaGraph', data.kappaGraph)}
                 {this.generateScatterGraph('dpPolyGraph', data.dpPolyGraph)}
                 {this.generateStGraph(data.stGraph)}

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

@@ -221,6 +221,12 @@ kappaGraph:
                 labelString: 'kappa'
     properties:
         lines:
+            ReferenceLine:
+                color: 'rgba(255, 0, 0, 0.8)' # red
+                borderWidth: 2
+                pointRadius: 0
+                fill: false
+                showLine: true
             DpPolyPathOptimizer:
                 color: 'rgba(27, 249, 105, 0.5)' # green
                 borderWidth: 2
@@ -259,6 +265,24 @@ dkappaGraph:
                 pointRadius: 0
                 fill: false
                 showLine: true
+thetaGraph:
+    title: 'Planning theta'
+    options:
+        legend:
+            display: true
+        axes:
+            x:
+                labelString: 's (m)'
+            y:
+                labelString: 'theta'
+    properties:
+        lines:
+            ReferenceLine:
+                color: 'rgba(255, 0, 0, 0.8)' # red
+                borderWidth: 2
+                pointRadius: 0
+                fill: false
+                showLine: true
 dpPolyGraph:
     title: 'DP Path'
     options:

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

@@ -21,6 +21,7 @@ export default class PlanningData {
       stSpeedGraph: {},
       speedGraph: {},
       accelerationGraph: {},
+      thetaGraph: {},
       kappaGraph: {},
       dkappaGraph: {},
       dpPolyGraph: {},
@@ -175,21 +176,31 @@ export default class PlanningData {
     }
   }
 
+  updateThetaGraph(paths) {
+    for (const path of paths) {
+      const name = path.name === "planning_reference_line" ? "ReferenceLine" : path.name;
+      this.data.thetaGraph[name] =
+        this.extractDataPoints(path.pathPoint, 's', 'theta');
+    }
+  }
+
   updateKappaGraph(paths) {
     for (const path of paths) {
-      this.data.kappaGraph[path.name] =
+      const name = path.name === "planning_reference_line" ? "ReferenceLine" : path.name;
+      this.data.kappaGraph[name] =
         this.extractDataPoints(path.pathPoint, 's', 'kappa');
     }
   }
 
   updateDkappaGraph(paths) {
     for (const path of paths) {
-      this.data.dkappaGraph[path.name] =
+      const name = path.name === "planning_reference_line" ? "ReferenceLine" : path.name;
+      this.data.dkappaGraph[name] =
         this.extractDataPoints(path.pathPoint, 's', 'dkappa');
     }
   }
 
-  updadteLatencyGraph(currentTime, latencyStates) {
+  updateLatencyGraph(currentTime, latencyStates) {
     const timeRange = 300000; // 5 min
     for (const moduleName in this.latencyGraph) {
       let graph = this.latencyGraph[moduleName];
@@ -261,6 +272,7 @@ export default class PlanningData {
       if (planningData.path) {
         this.updateKappaGraph(planningData.path);
         this.updateDkappaGraph(planningData.path);
+        this.updateThetaGraph(planningData.path);
       }
 
       if (planningData.dpPolyGraph) {
@@ -268,7 +280,7 @@ export default class PlanningData {
       }
 
       if (world.latency) {
-        this.updadteLatencyGraph(world.planningTime, world.latency);
+        this.updateLatencyGraph(world.planningTime, world.latency);
       }
 
       this.updatePlanningTime(world.planningTime);