Merge pull request #588 from Renumics/feature/lasso-selection

Feature/lasso selection

Author: druzsan

docs/configure_visualizations/ui_components/scatter_plot.md

@@ -19,3 +19,9 @@ Simply select `x-Axis` and `y-Axis` from the dropdowns in settings. The points w
 </video>
 
 _fsd50k_ - place datapoints on the **similarity map** based on a column
+
+## Selection
+
+Selection works exactly as it does for the
+[similarity map](similarity_map.md#selection), including the rectangular and lasso
+tools offered by the `Selection Tool` menu in the top bar.

docs/configure_visualizations/ui_components/similarity_map.md

@@ -56,7 +56,17 @@ In order to select a single point simply click on it. This will reset any select
 To add a point to a selection click on it while pressing `shift` and to remove it press `ctrl` while clicking on it.
 
 These steps also apply for multiple points. By pressing the left mouse button and moving the mouse,
-a selection rectangle will be shown. On releasing the left mouse button, the selection will be applied in the same fashion as it is done for a single point.
+a selection shape will be shown. On releasing the left mouse button, the selection will be applied in the same fashion as it is done for a single point.
+
+Two selection tools are available and can be switched at any time through the
+`Selection Tool` menu in the top bar:
+
+- **Rectangular selection** (default): drag with the left mouse button to select every point inside the resulting rectangle.
+- **Lasso selection**: drag with the left mouse button to draw a freehand outline. Every point enclosed by the outline is selected once the mouse button is released. This is useful for irregularly shaped clusters that a rectangle cannot isolate.
+
+The `shift` and `ctrl` modifiers behave identically for both tools. The selected tool
+is a global setting: it applies to the similarity map and the
+[scatter plot](scatter_plot.md) alike and is remembered across sessions.
 
 <video controls muted loop playsinline preload="metadata" poster="../../../assets/data/docs/ui-components/similarity-map/selection-720.jpg">
   <source src="../../../assets/data/docs/ui-components/similarity-map/selection-720.webm" type="video/webm" />

package.json

@@ -54,7 +54,9 @@
         "d3-brush": "^3.0.0",
         "d3-cloud": "^1.2.5",
         "d3-delaunay": "^6.0.2",
+        "d3-drag": "^3.0.0",
         "d3-format": "^3.1.0",
+        "d3-polygon": "^3.0.1",
         "d3-scale": "^4.0.2",
         "d3-selection": "^3.0.0",
         "d3-shape": "^3.2.0",

pnpm-lock.yaml

@@ -97,12 +97,14 @@ analyzers = [
 torch = [
   "torch>=2.0.0",
   "torchcodec",
+  "torchvision",
 ]
 all = [
   "cleanlab",
   "cleanvision",
   "torch>=2.0.0",
   "torchcodec",
+  "torchvision",
 ]
 
 [project.scripts]
@@ -196,6 +198,7 @@ explicit = true
 [tool.uv.sources]
 torch = { index = "pytorch-cpu" }
 torchcodec = { index = "pytorch-cpu" }
+torchvision = { index = "pytorch-cpu" }
 
 [tool.hatch.build.targets.sdist]
 include = [

pyproject.toml

@@ -5,7 +5,11 @@ import HelpIcon from '../icons/Help';
 import OpenFolderIcon from '../icons/OpenFolder';
 import ColorPaletteIcon from '../icons/ColorPalette';
 import NumberIcon from '../icons/Number';
+import SelectionIcon from '../icons/Selection';
+import LassoIcon from '../icons/Lasso';
+import RectangularSelectionIcon from '../icons/RectangularSelection';
 import Button from './ui/Button';
+import ToggleButton from './ui/ToggleButton';
 import Dialog from './ui/Dialog';
 import Dropdown, { DropdownContext } from './ui/Dropdown';
 import Tooltip from './ui/Tooltip';
@@ -24,6 +28,7 @@ import ColorPaletteSelect from './ui/ColorPaletteSelect';
 import { categoricalPalettes, continuousPalettes } from '../palettes';
 import Select from './ui/Select';
 import { Notation, notations, useAppSettings } from '../stores/appSettings';
+import { SelectionMode } from './shared/Plot';
 
 const NavBar = tw.nav`py-0.5 px-1 bg-gray-200 flex items-center w-full top-0 z-10 border-b border-gray-400`;
 
@@ -193,6 +198,65 @@ const ColorMenu = () => {
     );
 };
 
+const SelectionMenuContent = (): JSX.Element => {
+    const selectionMode = useAppSettings((s) => s.selectionMode);
+    const setSelectionMode = useAppSettings((s) => s.setSelectionMode);
+    const dropdown = useContext(DropdownContext);
+
+    // close the menu after picking a tool, otherwise it keeps covering the plot
+    const selectMode = useCallback(
+        (mode: SelectionMode) => {
+            setSelectionMode(mode);
+            dropdown.hide();
+        },
+        [setSelectionMode, dropdown]
+    );
+
+    return (
+        <Menu tw="w-44">
+            <Menu.Title>Selection Tool</Menu.Title>
+            <Menu.Item>
+                <ToggleButton
+                    tw="w-full"
+                    data-test-tag="selection-mode-rectangular"
+                    checked={selectionMode === 'rectangular'}
+                    onChange={() => selectMode('rectangular')}
+                >
+                    <div tw="flex flex-row font-normal w-full items-center content-center">
+                        <RectangularSelectionIcon />
+                        <span tw="ml-1 text-sm">Rectangular</span>
+                    </div>
+                </ToggleButton>
+            </Menu.Item>
+            <Menu.Item>
+                <ToggleButton
+                    tw="w-full"
+                    data-test-tag="selection-mode-lasso"
+                    checked={selectionMode === 'lasso'}
+                    onChange={() => selectMode('lasso')}
+                >
+                    <div tw="flex flex-row font-normal w-full items-center content-center">
+                        <LassoIcon />
+                        <span tw="ml-1 text-sm">Lasso</span>
+                    </div>
+                </ToggleButton>
+            </Menu.Item>
+        </Menu>
+    );
+};
+
+const SelectionMenu = () => {
+    const content = <SelectionMenuContent />;
+
+    return (
+        <div data-test-tag="selection-mode-dropdown">
+            <Dropdown content={content} tooltip="Selection Tool">
+                <SelectionIcon />
+            </Dropdown>
+        </div>
+    );
+};
+
 const NumberMenu = () => {
     const notation = useAppSettings((s) => s.numberNotation);
     const onChangeNotation = (value?: Notation) => {
@@ -250,6 +314,7 @@ const AppBar = (): JSX.Element => {
             </Tooltip>
             <FileBar tw="flex-grow" />
             <div tw="flex items-center">
+                <SelectionMenu />
                 <ColorMenu />
                 <NumberMenu />
                 <HelpMenu />

src/components/AppBar.tsx

@@ -1,5 +1,5 @@
 import * as d3 from 'd3';
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import PlotContext from './PlotContext';
 import { MergeStrategy, Point2d } from './types';
 
@@ -20,15 +20,39 @@ function findOrCreateGroup(svgElement: SVGSVGElement) {
 const Brush = ({ hidden, onSelect }: Props): JSX.Element => {
     const { svgRef, transformRef, xScale, yScale, points } = useContext(PlotContext);
 
+    // The behaviour is created once so that the group it is attached to survives
+    // changes of the data or the scales. Recreating the group would move it to
+    // the end of the svg and thereby change the hit testing order against the
+    // axes, which are appended after it.
+    const [brush] = useState(() =>
+        d3
+            .brush()
+            .filter(({ button, altKey }) => button === 0 && !altKey)
+            .keyModifiers(false)
+    );
+
     useEffect(() => {
         const svgElement = svgRef.current;
         if (!svgElement) return;
-        if (!transformRef.current) return;
 
-        const brush = d3
-            .brush()
-            .filter(({ button, altKey }) => button === 0 && !altKey)
-            .keyModifiers(false);
+        const brushGroup = findOrCreateGroup(svgElement);
+        brushGroup.call(brush);
+
+        return () => {
+            // Detach the handlers before dropping the group. The listeners of a
+            // gesture that is still in flight live on the window and cannot be
+            // removed from here, so clearing the dispatch is what stops a stale
+            // onSelect from firing after the component has unmounted.
+            brush.on('start brush end', null);
+            brushGroup.on('.brush', null);
+            brushGroup.remove();
+        };
+    }, [svgRef, brush]);
+
+    useEffect(() => {
+        const svgElement = svgRef.current;
+        if (!svgElement) return;
+        if (!transformRef.current) return;
 
         const brushGroup = findOrCreateGroup(svgElement);
 
@@ -86,8 +110,7 @@ const Brush = ({ hidden, onSelect }: Props): JSX.Element => {
         };
 
         brush.on('end', handleBrush);
-        brushGroup.call(brush);
-    }, [svgRef, transformRef, xScale, yScale, points, hidden, onSelect]);
+    }, [brush, svgRef, transformRef, xScale, yScale, points, hidden, onSelect]);
 
     return <></>;
 };