fix: Remove the wrong lasso in the other panel

client/__tests__/util/typedCrossfilter/crossfilter.test.ts

@@ -446,6 +446,7 @@ describe("ImmutableTypedCrossfilter", () => {
             .select("coords", {
               mode: "within-polygon",
               polygon: polygon as [number, number][],
+              graphId: "test-graph-id",
             })
             .allSelected()
         ).toEqual(

client/src/actions/selection.ts

@@ -1,5 +1,7 @@
+import { vec2 } from "gl-matrix";
+
 /*
-Action creators for selection 
+Action creators for selection
 */
 export const selectContinuousMetadataAction =
   (
@@ -210,7 +212,15 @@ export const graphLassoDeselectAction = (embName: any) =>
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
 export const graphLassoEndAction =
-  (embName: any, polygon: any) =>
+  ({
+    embName,
+    polygon,
+    graphId,
+  }: {
+    embName: string;
+    polygon: vec2[];
+    graphId: string;
+  }) =>
   async (
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
     dispatch: any,
@@ -233,6 +243,7 @@ export const graphLassoEndAction =
       type: "graph lasso end",
       obsCrossfilter,
       polygon,
+      graphId,
     });
   };
 

client/src/components/graph/graph.tsx

@@ -543,7 +543,7 @@ class Graph extends React.Component<GraphProps, GraphState> {
   // when a lasso is completed, filter to the points within the lasso polygon
   async handleLassoEnd(polygon: [number, number][]): Promise<void> {
     const minimumPolygonArea = 10;
-    const { dispatch, layoutChoice } = this.props;
+    const { dispatch, layoutChoice, isSidePanel } = this.props;
 
     if (
       polygon.length < 3 ||
@@ -553,10 +553,11 @@ class Graph extends React.Component<GraphProps, GraphState> {
       await dispatch(actions.graphLassoDeselectAction(layoutChoice?.current));
     } else {
       await dispatch(
-        actions.graphLassoEndAction(
-          layoutChoice?.current,
-          polygon.map((xy) => this.mapScreenToPoint(xy))
-        )
+        actions.graphLassoEndAction({
+          embName: layoutChoice?.current,
+          polygon: polygon.map((xy) => this.mapScreenToPoint(xy)),
+          graphId: sidePanelAttributeNameChange("graph", Boolean(isSidePanel)),
+        })
       );
     }
   }
@@ -954,14 +955,28 @@ class Graph extends React.Component<GraphProps, GraphState> {
         this is called from componentDidUpdate(), so be very careful using
         anything from this.state, which may be updated asynchronously.
         */
-    const { currentSelection } = this.props;
+    const { currentSelection, isSidePanel } = this.props;
+
     if (currentSelection.mode === "within-polygon") {
-      /*
-            if there is a current selection, make sure the lasso tool matches
-            */
-      const polygon = currentSelection.polygon.map((p: [number, number]) =>
+      const { polygon: polygonState, graphId } = currentSelection;
+
+      /**
+       * (thuang): Only display the lasso element on the panel that initiated
+       * the lasso
+       */
+      if (
+        graphId !== sidePanelAttributeNameChange("graph", Boolean(isSidePanel))
+      ) {
+        return;
+      }
+
+      /**
+       * if there is a current selection, make sure the lasso tool matches
+       */
+      const polygon = polygonState.map((p: [number, number]) =>
         this.mapPointToScreen(p)
       );
+
       tool?.move(polygon);
     } else {
       tool?.reset();

client/src/components/util/truncate.tsx

@@ -1,4 +1,4 @@
-import React, { cloneElement } from "react";
+import React, { CSSProperties, cloneElement } from "react";
 import { Tooltip2 } from "@blueprintjs/popover2";
 
 import { tooltipHoverOpenDelayQuick } from "../../globals";
@@ -19,12 +19,14 @@ const FIRST_HALF_STYLE = {
   whiteSpace: "nowrap",
   flexShrink: 1,
   minWidth: "5px",
-};
+} as CSSProperties;
+
 const SECOND_HALF_STYLE = {
   position: "relative",
   overflow: "hidden",
   whiteSpace: "nowrap",
 };
+
 const SECOND_HALF_SPACING_STYLE = {
   color: "transparent",
 };

client/src/reducers/graphSelection.ts

@@ -38,12 +38,13 @@ const GraphSelection = (
     }
 
     case "graph lasso end": {
-      const { polygon } = action;
+      const { polygon, graphId } = action;
       return {
         ...state,
         selection: {
           mode: "within-polygon",
           polygon,
+          graphId,
         },
       };
     }

client/src/util/typedCrossfilter/types.ts

@@ -59,6 +59,7 @@ export interface SelectWithinRect {
 export interface SelectWithinPolygon {
   mode: SelectionMode.WithinPolygon | "within-polygon";
   polygon: [number, number][];
+  graphId: string;
 }
 
 export type CrossfilterSelector =