Fix issue with point selection and marker removal when hovering over …

…chart elements.
bioretics · Nov 19, 2024 · 4b06d5c · 4b06d5c
1 parent 021458e
commit 4b06d5c
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 58 deletions.
diff --git a/lib/Models/Terria.ts b/lib/Models/Terria.ts
@@ -2243,25 +2243,11 @@ export default class Terria {
     return true;
   }
 
-  @observable selectedStopSummaryRowIndex: {
-    fromTable: number | null;
-    fromChart: number | null;
-    fromMap: number | null;
-  } = { fromTable: null, fromChart: null, fromMap: null };
+  @observable selectedStopPointIdx: number | null = null;
 
   @action
-  setSelectedStopSummaryRowIndex(
-    source: "fromTable" | "fromChart" | "fromMap",
-    index: number | null
-  ) {
-    this.selectedStopSummaryRowIndex[source] = index;
-  }
-
-  @action
-  removeSelectedStopSummaryRowIndex() {
-    this.setSelectedStopSummaryRowIndex("fromChart", null);
-    this.setSelectedStopSummaryRowIndex("fromTable", null);
-    this.setSelectedStopSummaryRowIndex("fromMap", null);
+  setSelectedStopPointIdx(index: number | null) {
+    this.selectedStopPointIdx = index;
   }
 }
 

diff --git a/lib/ReactViews/Custom/Chart/BottomDockChart.jsx b/lib/ReactViews/Custom/Chart/BottomDockChart.jsx
@@ -192,10 +192,11 @@ class Chart extends React.Component {
         );
 
         if (idx === 1) {
-          this.props.terria.setSelectedStopSummaryRowIndex(
-            "fromChart",
+          this.props.terria.setSelectedStopPointIdx(
             point ? chartItem.points.indexOf(point) : null
           );
+        } else {
+          this.props.terria.setSelectedStopPointIdx(null);
         }
 
         return {
@@ -262,11 +263,14 @@ class Chart extends React.Component {
 
   componentDidMount() {
     this.disposeReaction = reaction(
-      () =>
-        this.props.terria.selectedStopSummaryRowIndex.fromTable ||
-        this.props.terria.selectedStopSummaryRowIndex.fromMap,
+      () => this.props.terria.selectedStopPointIdx,
       (idx) => {
         if (idx !== null && this.props.chartItems) {
+          console.log(
+            "this.props.terria.selectedStopPointIdx: ",
+            this.props.terria.selectedStopPointIdx
+          );
+          console.log("idx: ", idx);
           const sumDistances =
             this.props.terria.measurableGeom.stopGroundDistances
               .slice(0, idx + 1)
@@ -287,6 +291,8 @@ class Chart extends React.Component {
             x: xCoord,
             y: yCoord
           });
+        } else {
+          this.setMouseCoords(undefined);
         }
       }
     );

diff --git a/lib/ReactViews/Custom/Chart/MeasurableGeometryChartPanel.tsx b/lib/ReactViews/Custom/Chart/MeasurableGeometryChartPanel.tsx
@@ -95,7 +95,6 @@ const MeasurableGeometryChartPanel = observer((props: Props) => {
       if (!pointIndex) return;
       const coords = terria?.measurableGeom?.sampledPoints?.[pointIndex];
       if (!coords) return;
-
       if (!billboardCollection.current) {
         billboardCollection.current = new BillboardCollection({
           scene: terria.cesium.scene
@@ -113,14 +112,13 @@ const MeasurableGeometryChartPanel = observer((props: Props) => {
       });
 
       terria.currentViewer.notifyRepaintRequired();
-    } else if (billboardCollection.current) {
-      if (
-        newPoint === undefined ||
-        terria.selectedStopSummaryRowIndex.fromTable !== null ||
-        terria.selectedStopSummaryRowIndex.fromMap !== null
-      ) {
-        terria.removeSelectedStopSummaryRowIndex();
-        billboardCollection.current.removeAll();
+    } else {
+      if (newPoint === undefined) {
+        terria.setSelectedStopPointIdx(null);
+        if (billboardCollection.current) {
+          billboardCollection.current.removeAll();
+          terria.currentViewer.notifyRepaintRequired();
+        }
       }
     }
   };

diff --git a/lib/ReactViews/MeasurableGeometry/MeasurablePanel.tsx b/lib/ReactViews/MeasurableGeometry/MeasurablePanel.tsx
@@ -421,27 +421,15 @@ const MeasurablePanel = observer((props: Props) => {
 
   useEffect(() => {
     console.log(
-      "aiudo terria.selectedStopSummaryRowIndex.fromMap",
-      terria.selectedStopSummaryRowIndex.fromMap
-    );
-    console.log(
-      "aiudo terria.selectedStopSummaryRowIndex.fromChart",
-      terria.selectedStopSummaryRowIndex.fromChart
+      "aiudo terria.selectedStopPointIdx",
+      terria.selectedStopPointIdx
     );
 
-    if (terria.selectedStopSummaryRowIndex.fromChart !== null)
-      setHighlightedRow(terria.selectedStopSummaryRowIndex.fromChart);
-    if (terria.selectedStopSummaryRowIndex.fromMap !== null)
-      setHighlightedRow(terria.selectedStopSummaryRowIndex.fromMap);
-    if (
-      terria.selectedStopSummaryRowIndex.fromChart === null &&
-      terria.selectedStopSummaryRowIndex.fromMap === null
-    )
-      setHighlightedRow(null);
-  }, [
-    terria.selectedStopSummaryRowIndex.fromChart,
-    terria.selectedStopSummaryRowIndex.fromMap
-  ]);
+    if (terria.selectedStopPointIdx !== null)
+      setHighlightedRow(terria.selectedStopPointIdx);
+    else setHighlightedRow(null);
+    terria.currentViewer.notifyRepaintRequired();
+  }, [terria.selectedStopPointIdx]);
 
   useEffect(() => {
     const rangeThreshold = 0.001; // ~ 100 meters of range
@@ -458,6 +446,7 @@ const MeasurablePanel = observer((props: Props) => {
 
       if (terria.cesium) {
         if (nearbyStopPoint) {
+          console.log("You're near the point: ", nearbyStopPoint);
           if (!billboardCollection.current) {
             billboardCollection.current = new BillboardCollection({
               scene: terria.cesium.scene
@@ -477,13 +466,15 @@ const MeasurablePanel = observer((props: Props) => {
           });
           const idx = terria.measurableGeom.stopPoints.indexOf(nearbyStopPoint);
           console.log("idx: ", idx);
-          terria.setSelectedStopSummaryRowIndex("fromMap", idx);
-          terria.currentViewer.notifyRepaintRequired();
-        } else if (billboardCollection.current) {
-          billboardCollection.current.removeAll();
-          terria.removeSelectedStopSummaryRowIndex();
-          terria.currentViewer.notifyRepaintRequired();
+          terria.setSelectedStopPointIdx(idx);
+        } else {
+          console.log("You're not near any points.");
+          if (billboardCollection.current) {
+            billboardCollection.current.removeAll();
+          }
+          terria.setSelectedStopPointIdx(null);
         }
+        terria.currentViewer.notifyRepaintRequired();
       }
     };
 
@@ -498,7 +489,7 @@ const MeasurablePanel = observer((props: Props) => {
   const renderStepDetails = () => {
     const updateChartPoint = (idx: number) => {
       setHighlightedRow(idx);
-      terria.setSelectedStopSummaryRowIndex("fromTable", idx);
+      terria.setSelectedStopPointIdx(idx);
       const coords = terria?.measurableGeom?.stopPoints?.[idx];
       if (!coords) return;
       if (!terria.cesium) return;
@@ -522,7 +513,7 @@ const MeasurablePanel = observer((props: Props) => {
 
     const handleMouseLeave = () => {
       setHighlightedRow(null);
-      terria.removeSelectedStopSummaryRowIndex();
+      terria.setSelectedStopPointIdx(null);
       if (billboardCollection.current) {
         billboardCollection.current.removeAll();
         terria.currentViewer.notifyRepaintRequired();