anywidget-vector 0.3.0__tar.gz → 0.3.1__tar.gz

{anywidget_vector-0.3.0 → anywidget_vector-0.3.1}/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 0.3.1 (2026-03-16)
+
+### New Features
+
+- **Lasso selection**: New lasso mode for freehand point selection in the 3D canvas, with point-in-polygon hit testing
+- **Selection highlighting**: Selected points show wireframe highlight rings and non-selected points are dimmed to 15% brightness
+- **Auto-sizing**: Width defaults to 100% (fill container), height defaults to 1:1 aspect ratio. Both can still be set to fixed pixel values
+
+### Bug Fixes
+
+- **Properties panel**: Panel is now always created (previously skipped when `show_properties=False`), so the toolbar button always works. Starts closed unless `show_properties=True`
+- **Distance metric feedback**: Changing the metric now auto-enables k=5 connections when a point is selected, giving immediate visual feedback
+
+### Improvements
+
+- Reduced scroll zoom sensitivity (`zoomSpeed` halved to 0.5)
+- Search filter dimming increased from 12% to 6% opacity for clearer visual contrast
+- Camera no longer resets on every point update (only on initial load)
+- Cross-widget filtering: example updated so VectorSpace lasso selection feeds back into ParallelCoordinates dimming via marimo reactivity
+
 ## 0.3.0 (2026-03-16)
 
 ### New Features

{anywidget_vector-0.3.0 → anywidget_vector-0.3.1}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: anywidget-vector
-Version: 0.3.0
+Version: 0.3.1
 Summary: Interactive 3D vector visualization with query UI for vector databases
 Project-URL: Homepage, https://grafeo.dev/
 Project-URL: Repository, https://github.com/GrafeoDB/anywidget-vector

{anywidget_vector-0.3.0 → anywidget_vector-0.3.1}/examples/fashion-mnist-parallel-coords-6d.py

@@ -13,13 +13,13 @@
 #     "wigglystuff==0.2.37",
 #     "matplotlib==3.10.8",
 #     "pandas==3.0.1",
-#     "anywidget-vector==0.2.7",
+#     "anywidget-vector==0.3.1",
 # ]
 # ///
 
 import marimo
 
-__generated_with = "0.19.7"
+__generated_with = "0.20.2"
 app = marimo.App(width="full")
 
 
@@ -34,7 +34,6 @@ def _():
     from wigglystuff import ParallelCoordinates
 
     from anywidget_vector import VectorSpace
-
     return PCA, ParallelCoordinates, VectorSpace, fetch_openml, mo, np, pl, plt
 
 
@@ -43,7 +42,7 @@ def _(mo):
     mo.md(r"""
     # Fashion MNIST: Parallel Coordinates + 6D Vector View
 
-    Brush the parallel coordinates axes to filter. The 3D scatter updates in real time.
+    Brush the parallel coordinates axes to filter. The 3D (xyz)+3D(color/size/shape) scatter updates in real time.
     Use the dropdowns to map PCA dimensions to visual channels.
     """)
     return
@@ -77,7 +76,7 @@ def _(fetch_openml, np):
 @app.cell
 def _(mo):
     n_samples_slider = mo.ui.slider(start=500, stop=5000, step=500, value=2000, label="Samples")
-    n_components_slider = mo.ui.slider(start=3, stop=15, step=1, value=8, label="PCA dims")
+    n_components_slider = mo.ui.slider(start=3, stop=15, step=1, value=5, label="PCA dims")
     mo.hstack([n_samples_slider, n_components_slider])
     return n_components_slider, n_samples_slider
 
@@ -204,8 +203,7 @@ def _(
 
     vs_widget = VectorSpace(
         points=vs_points,
-        width=1600,
-        height=500,
+        height=900,
         show_toolbar=True,
         show_settings=True,
         show_properties=False,
@@ -213,36 +211,62 @@ def _(
     )
     vs = mo.ui.anywidget(vs_widget)
     vs
-    return vs_points, vs_widget
+    return vs, vs_points, vs_widget
 
 
 @app.cell
 def _(LABEL_COLORS, color_dim, mo, vs_points, vs_widget, widget):
-    _filtered = set(widget.widget.filtered_indices)
-    _dim_color = "#d1d5db"
+    # ParallelCoordinates -> VectorSpace (one-way)
+    # Uses vs_widget (raw) to avoid triggering vs-dependent cells
+    _par_selected = list(widget.widget.selected_indices or [])
+    _par_filtered = set(widget.widget.filtered_indices)
+    _active_set = set(_par_selected) if _par_selected else _par_filtered
     _updated = []
     for _i, _p in enumerate(vs_points):
+        if _i not in _active_set:
+            continue
         _new_p = dict(_p)
-        if _i in _filtered:
-            if color_dim.value == "label":
-                _new_p["color"] = LABEL_COLORS[_p["label"]]
-            else:
-                _new_p.pop("color", None)
+        if color_dim.value == "label":
+            _new_p["color"] = LABEL_COLORS[_p["label"]]
         else:
-            _new_p["color"] = _dim_color
+            _new_p.pop("color", None)
         _updated.append(_new_p)
     vs_widget.points = _updated
-    mo.md(f"**{len(_filtered)}** / {len(vs_points)} points selected")
+    mo.md(f"**{len(_updated)}** / {len(vs_points)} points selected")
+    return
+
+
+@app.cell
+def _(LABEL_COLORS, ParallelCoordinates, df, mo, vs):
+    # VectorSpace -> filtered ParallelCoordinates (reactive via vs.value)
+    _selected = list(vs.widget.selected_points or [])
+    if _selected:
+        _indices = sorted(int(sid.split("_")[1]) for sid in _selected)
+        _filtered_df = df[_indices]
+        _par = ParallelCoordinates(_filtered_df, color_by="label", color_map=LABEL_COLORS)
+        mo.vstack([
+            mo.md(f"**{len(_indices)}** points selected in 3D view"),
+            mo.ui.anywidget(_par),
+        ])
+    else:
+        mo.md("*Lasso or box-select points in the 3D view to filter*")
     return
 
 
 @app.cell
-def _(LABEL_COLORS, idx, images, label_names, labels, np, plt, vs_widget, widget):
+def _(LABEL_COLORS, idx, images, label_names, labels, np, plt, vs, widget):
+    _selected_ids = set(vs.widget.selected_points or [])
     _filtered = widget.widget.filtered_indices
-    _sample_idx = np.array(_filtered[:10]) if len(_filtered) >= 10 else np.array(_filtered)
 
-    # Which points are selected in the 3D view?
-    _selected_ids = set(vs_widget.selected_points or [])
+    if _selected_ids:
+        _show = [
+            _i for _i in range(len(idx))
+            if f"p_{_i}" in _selected_ids
+        ][:10]
+    else:
+        _show = list(_filtered[:10])
+
+    _sample_idx = np.array(_show) if len(_show) > 0 else np.array([0])
 
     _fig, _axes = plt.subplots(1, len(_sample_idx), figsize=(2 * len(_sample_idx), 2.4))
     if len(_sample_idx) == 1:
@@ -252,7 +276,6 @@ def _(LABEL_COLORS, idx, images, label_names, labels, np, plt, vs_widget, widget
         _ax.imshow(images[idx[_si]].reshape(28, 28), cmap="gray")
         _ax.set_title(_name, fontsize=9)
         _ax.axis("off")
-        # Highlight if selected in 3D view
         if f"p_{_si}" in _selected_ids:
             _color = LABEL_COLORS.get(_name, "#0880ea")
             for _spine in _ax.spines.values():

{anywidget_vector-0.3.0 → anywidget_vector-0.3.1}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "anywidget-vector"
-version = "0.3.0"
+version = "0.3.1"
 description = "Interactive 3D vector visualization with query UI for vector databases"
 readme = "README.md"
 license = "Apache-2.0"

{anywidget_vector-0.3.0 → anywidget_vector-0.3.1}/src/anywidget_vector/static/icons.js

@@ -16,4 +16,5 @@ export const ICONS = {
   zoomFit: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>',
   cursor: '<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M4 2l12 14h-5l-2.3 5.5L6 20.3 8.3 15H4V2z"/></svg>',
   boxSelect: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 2"><rect x="3" y="3" width="18" height="18" rx="1"/></svg>',
+  lasso: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="10" rx="9" ry="7"/><path d="M12 17v3M12 20l-2 2"/></svg>',
 };

{anywidget_vector-0.3.0 → anywidget_vector-0.3.1}/src/anywidget_vector/ui/__init__.py

@@ -122,8 +122,16 @@ async function executeBackendQuery(model) {{
 function render({{ model, el }}) {{
   const wrapper = document.createElement("div");
   wrapper.className = "avs-wrapper";
-  wrapper.style.width = model.get("width") + "px";
-  wrapper.style.height = model.get("height") + "px";
+
+  const _w = model.get("width");
+  const _h = model.get("height");
+  wrapper.style.width = _w > 0 ? _w + "px" : "100%";
+  if (_h > 0) {{
+    wrapper.style.height = _h + "px";
+  }} else {{
+    wrapper.style.aspectRatio = "1 / 1";
+  }}
+
   el.appendChild(wrapper);
 
   // Auto-detect host theme (marimo uses Tailwind class="dark" on <html>)
@@ -175,7 +183,7 @@ function render({{ model, el }}) {{
       onRunQuery: () => runQuery(),
       onFilterInput: (text) => {{
         if (canvas) {{
-          const result = canvas.applyFilter(text);
+          const result = canvas.applyFilter(text, false);
           if (toolbarUI) toolbarUI.setFilterCount(result.matched, result.total);
         }}
       }},
@@ -215,21 +223,22 @@ function render({{ model, el }}) {{
     main.appendChild(settingsPanel.element);
   }}
 
-  if (model.get("show_properties")) {{
-    propertiesPanel = createPropertiesPanel(model, {{
-      onClose: () => propertiesPanel?.close(),
-    }});
-    main.appendChild(propertiesPanel.element);
-  }}
+  propertiesPanel = createPropertiesPanel(model, {{
+    onClose: () => propertiesPanel?.close(),
+  }});
+  main.appendChild(propertiesPanel.element);
+  if (model.get("show_properties")) propertiesPanel.open();
 
-  const canvas = createCanvas(model, canvasContainer, {{}});
+  const canvas = createCanvas(model, canvasContainer, {{
+    onHover: (point) => propertiesPanel?.setHoveredPoint(point),
+  }});
 
   async function runQuery() {{
     const query = model.get("query_input") || "";
 
-    // Always apply client-side filter
+    // Apply hard client-side filter (completely hide non-matching)
     if (canvas) {{
-      const result = canvas.applyFilter(query);
+      const result = canvas.applyFilter(query, true);
       if (toolbarUI) toolbarUI.setFilterCount(result.matched, result.total);
     }}
 

{anywidget_vector-0.3.0 → anywidget_vector-0.3.1}/src/anywidget_vector/ui/canvas.js

@@ -40,8 +40,17 @@ export function createCanvas(model, container, callbacks) {
   let animationId;
   let resizeObserver;
   let selectionRect, boxOverlay;
+  let selectionGroup;
+  let lassoOverlayEl, lassoSvg, lassoPathEl;
+  let isLassoing = false, lassoCoords = [];
   let currentMode = model.get("selection_mode") || "click";
 
+  function setSelection(ids) {
+    model.set("selected_points", ids);
+    model.set("_selection_version", (model.get("_selection_version") || 0) + 1);
+    model.save_changes();
+  }
+
   init();
   animate();
 
@@ -80,10 +89,21 @@ export function createCanvas(model, container, callbacks) {
     // Controls
     controls = new OrbitControls(camera, renderer.domElement);
     controls.enableDamping = true;
-    controls.dampingFactor = 0.05;
+    controls.dampingFactor = 0.08;
+    controls.zoomSpeed = 0.3;
+    controls.enableZoom = false; // disable built-in scroll zoom
     const target = model.get("camera_target") || [0, 0, 0];
     controls.target.set(target[0], target[1], target[2]);
-    controls.addEventListener("change", onCameraChange);
+
+    // Custom smooth scroll zoom with reduced sensitivity
+    renderer.domElement.addEventListener("wheel", (e) => {
+      e.preventDefault();
+      const factor = 1 + e.deltaY * 0.0003;
+      const offset = camera.position.clone().sub(controls.target);
+      offset.multiplyScalar(factor);
+      camera.position.copy(controls.target).add(offset);
+      controls.update();
+    }, { passive: false });
 
     // Lighting
     scene.add(new THREE.AmbientLight(0xffffff, 0.6));
@@ -96,6 +116,8 @@ export function createCanvas(model, container, callbacks) {
     scene.add(pointsGroup);
     connectionsGroup = new THREE.Group();
     scene.add(connectionsGroup);
+    selectionGroup = new THREE.Group();
+    scene.add(selectionGroup);
     axesGroup = new THREE.Group();
     scene.add(axesGroup);
 
@@ -105,6 +127,7 @@ export function createCanvas(model, container, callbacks) {
     setupTooltip();
     setupZoomControls();
     setupBoxSelection();
+    setupLassoSelection();
     setupKeyboardShortcuts();
     createPoints();
     createConnections();
@@ -123,9 +146,9 @@ export function createCanvas(model, container, callbacks) {
         e.preventDefault();
         fitToView();
       } else if (e.key === "Escape") {
-        model.set("selected_points", []);
-        model.set("hovered_point", null);
-        model.save_changes();
+        hoveredObject = null;
+        hideTooltip();
+        setSelection([]);
       }
     });
   }
@@ -402,14 +425,12 @@ export function createCanvas(model, container, callbacks) {
       const point = points[pointIndex];
       if (point && (!hoveredObject || hoveredObject.pointId !== pointId)) {
         hoveredObject = { pointIndex, pointId };
-        model.set("hovered_point", point);
-        model.save_changes();
+        callbacks.onHover?.(point);
         showTooltip(event, point);
       }
     } else if (hoveredObject) {
       hoveredObject = null;
-      model.set("hovered_point", null);
-      model.save_changes();
+      callbacks.onHover?.(null);
       hideTooltip();
     }
   }
@@ -438,18 +459,16 @@ export function createCanvas(model, container, callbacks) {
       const currentSelection = model.get("selected_points") || [];
 
       if (selectionMode === "click") {
-        model.set("selected_points", [pointId]);
+        setSelection([pointId]);
       } else if (selectionMode === "multi") {
         if (currentSelection.includes(pointId)) {
-          model.set("selected_points", currentSelection.filter(id => id !== pointId));
+          setSelection(currentSelection.filter(id => id !== pointId));
         } else {
-          model.set("selected_points", [...currentSelection, pointId]);
+          setSelection([...currentSelection, pointId]);
         }
       }
-      model.save_changes();
     } else {
-      model.set("selected_points", []);
-      model.save_changes();
+      setSelection([]);
     }
   }
 
@@ -518,25 +537,28 @@ export function createCanvas(model, container, callbacks) {
     boxBtn.innerHTML = ICONS.boxSelect;
     boxBtn.title = "Box select mode";
 
+    const lassoBtn = document.createElement("button");
+    lassoBtn.className = "avs-zoom-btn avs-mode-btn";
+    lassoBtn.innerHTML = ICONS.lasso;
+    lassoBtn.title = "Lasso select mode";
+
     function setActiveMode(mode) {
       currentMode = mode;
-      model.set("selection_mode", mode === "box" ? "box" : "click");
+      model.set("selection_mode", mode);
       model.save_changes();
 
-      clickBtn.classList.toggle("avs-mode-active", mode !== "box");
+      clickBtn.classList.toggle("avs-mode-active", mode === "click");
       boxBtn.classList.toggle("avs-mode-active", mode === "box");
+      lassoBtn.classList.toggle("avs-mode-active", mode === "lasso");
 
-      // Toggle orbit controls: disabled in box mode so drag draws the rectangle
-      controls.enabled = (mode !== "box");
-
-      // Show/hide box overlay
-      if (boxOverlay) {
-        boxOverlay.style.display = (mode === "box") ? "block" : "none";
-      }
+      controls.enabled = (mode === "click");
+      if (boxOverlay) boxOverlay.style.display = (mode === "box") ? "block" : "none";
+      if (lassoOverlayEl) lassoOverlayEl.style.display = (mode === "lasso") ? "block" : "none";
     }
 
     clickBtn.addEventListener("click", () => setActiveMode("click"));
     boxBtn.addEventListener("click", () => setActiveMode("box"));
+    lassoBtn.addEventListener("click", () => setActiveMode("lasso"));
 
     // Sync with model changes from Python side
     model.on("change:selection_mode", () => {
@@ -546,6 +568,7 @@ export function createCanvas(model, container, callbacks) {
 
     modeGroup.appendChild(clickBtn);
     modeGroup.appendChild(boxBtn);
+    modeGroup.appendChild(lassoBtn);
 
     zoomControls.appendChild(modeGroup);
     zoomControls.appendChild(zoomInBtn);
@@ -619,8 +642,7 @@ export function createCanvas(model, container, callbacks) {
         { x1, y1, x2, y2 },
         rect.width, rect.height
       );
-      model.set("selected_points", selectedIds);
-      model.save_changes();
+      setSelection(selectedIds);
     });
   }
 
@@ -659,14 +681,8 @@ export function createCanvas(model, container, callbacks) {
     tooltip.style.display = "none";
   }
 
-  function onCameraChange() {
-    model.set("camera_position", [camera.position.x, camera.position.y, camera.position.z]);
-    model.set("camera_target", [controls.target.x, controls.target.y, controls.target.z]);
-    model.save_changes();
-  }
-
   function bindModelEvents() {
-    model.on("change:points", () => { createPoints(); createConnections(); fitToView(); });
+    model.on("change:points", () => { createPoints(); createConnections(); updateSelectionHighlight(); });
     model.on("change:background", () => { scene.background = new THREE.Color(model.get("background")); });
     model.on("change:show_axes", setupAxesAndGrid);
     model.on("change:show_grid", setupAxesAndGrid);
@@ -684,6 +700,7 @@ export function createCanvas(model, container, callbacks) {
     model.on("change:distance_metric", createConnections);
     model.on("change:connection_color", createConnections);
     model.on("change:connection_opacity", createConnections);
+    model.on("change:selected_points", updateSelectionHighlight);
     model.on("change:camera_position", () => {
       const pos = model.get("camera_position");
       if (pos) camera.position.set(pos[0], pos[1], pos[2]);
@@ -714,32 +731,43 @@ export function createCanvas(model, container, callbacks) {
     });
   }
 
-  function applyFilter(filterText) {
+  function applyFilter(filterText, hard) {
     const points = model.get("points") || [];
     const filter = (filterText || "").toLowerCase().trim();
     const total = points.length;
 
     if (!filter) {
-      // Reset all to full opacity
+      // Reset all to visible
       pointsGroup.children.forEach(obj => {
         if (obj.userData.isInstanced) {
-          // Restore original colors from stored data
+          if (obj.userData._filterOrigMatrices) {
+            const m = new THREE.Matrix4();
+            for (let i = 0; i < obj.userData.pointIndices.length; i++) {
+              m.fromArray(obj.userData._filterOrigMatrices, i * 16);
+              obj.setMatrixAt(i, m);
+            }
+            obj.instanceMatrix.needsUpdate = true;
+            obj.userData._filterOrigMatrices = null;
+          }
           if (obj.userData._originalColors) {
             const attr = obj.geometry.getAttribute("color");
             attr.array.set(obj.userData._originalColors);
             attr.needsUpdate = true;
+            obj.userData._originalColors = null;
+          }
+        } else {
+          obj.visible = true;
+          if (obj.material) {
+            obj.material.opacity = 1;
+            obj.material.transparent = false;
+            obj.material.needsUpdate = true;
           }
-        } else if (obj.material) {
-          obj.material.opacity = 1;
-          obj.material.transparent = false;
-          obj.material.needsUpdate = true;
         }
       });
       return { matched: total, total };
     }
 
     let matched = 0;
-    // Build match set from points data
     const matchSet = new Set();
     points.forEach((point, idx) => {
       if (pointMatchesFilter(point, filter)) {
@@ -748,32 +776,219 @@ export function createCanvas(model, container, callbacks) {
       }
     });
 
+    if (hard) {
+      // Hard filter: completely hide non-matching
+      const zeroMatrix = new THREE.Matrix4().makeScale(0, 0, 0);
+      pointsGroup.children.forEach(obj => {
+        if (obj.userData.isInstanced) {
+          const indices = obj.userData.pointIndices;
+          if (!obj.userData._filterOrigMatrices) {
+            const buf = new Float32Array(indices.length * 16);
+            const m = new THREE.Matrix4();
+            for (let i = 0; i < indices.length; i++) {
+              obj.getMatrixAt(i, m);
+              m.toArray(buf, i * 16);
+            }
+            obj.userData._filterOrigMatrices = buf;
+          }
+          const m = new THREE.Matrix4();
+          for (let i = 0; i < indices.length; i++) {
+            if (matchSet.has(indices[i])) {
+              m.fromArray(obj.userData._filterOrigMatrices, i * 16);
+            } else {
+              m.copy(zeroMatrix);
+            }
+            obj.setMatrixAt(i, m);
+          }
+          obj.instanceMatrix.needsUpdate = true;
+        } else {
+          obj.visible = matchSet.has(obj.userData.pointIndex);
+        }
+      });
+    } else {
+      // Soft filter: dim non-matching
+      pointsGroup.children.forEach(obj => {
+        if (obj.userData.isInstanced) {
+          const indices = obj.userData.pointIndices;
+          const attr = obj.geometry.getAttribute("color");
+          if (!obj.userData._originalColors) {
+            obj.userData._originalColors = new Float32Array(attr.array);
+          }
+          for (let i = 0; i < indices.length; i++) {
+            const dim = matchSet.has(indices[i]) ? 1.0 : 0.08;
+            attr.array[i * 3] = obj.userData._originalColors[i * 3] * dim;
+            attr.array[i * 3 + 1] = obj.userData._originalColors[i * 3 + 1] * dim;
+            attr.array[i * 3 + 2] = obj.userData._originalColors[i * 3 + 2] * dim;
+          }
+          attr.needsUpdate = true;
+        } else if (obj.material) {
+          const matches = matchSet.has(obj.userData.pointIndex);
+          obj.material.transparent = !matches;
+          obj.material.opacity = matches ? 1.0 : 0.08;
+          obj.material.needsUpdate = true;
+        }
+      });
+    }
+
+    return { matched, total };
+  }
+
+  function setupLassoSelection() {
+    // SVG overlay for drawing the lasso path
+    lassoSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    lassoSvg.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;z-index:16;display:none;pointer-events:none;";
+    container.appendChild(lassoSvg);
+
+    lassoPathEl = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
+    lassoPathEl.setAttribute("fill", "rgba(99, 102, 241, 0.1)");
+    lassoPathEl.setAttribute("stroke", "#6366f1");
+    lassoPathEl.setAttribute("stroke-width", "2");
+    lassoPathEl.setAttribute("stroke-dasharray", "4 2");
+    lassoSvg.appendChild(lassoPathEl);
+
+    // Transparent overlay to capture mouse events in lasso mode
+    lassoOverlayEl = document.createElement("div");
+    lassoOverlayEl.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;z-index:15;display:none;cursor:crosshair;";
+    container.appendChild(lassoOverlayEl);
+
+    lassoOverlayEl.addEventListener("mousedown", (e) => {
+      if (currentMode !== "lasso") return;
+      e.preventDefault();
+      isLassoing = true;
+      lassoCoords = [];
+      const rect = container.getBoundingClientRect();
+      lassoCoords.push([e.clientX - rect.left, e.clientY - rect.top]);
+      lassoSvg.style.display = "block";
+      lassoPathEl.setAttribute("points", "");
+    });
+
+    lassoOverlayEl.addEventListener("mousemove", (e) => {
+      if (!isLassoing) return;
+      const rect = container.getBoundingClientRect();
+      lassoCoords.push([e.clientX - rect.left, e.clientY - rect.top]);
+      lassoPathEl.setAttribute("points", lassoCoords.map(([x, y]) => `${x},${y}`).join(" "));
+    });
+
+    lassoOverlayEl.addEventListener("mouseup", () => {
+      if (!isLassoing) return;
+      isLassoing = false;
+      lassoSvg.style.display = "none";
+
+      if (lassoCoords.length < 3) return;
+
+      // Close the polygon
+      lassoCoords.push(lassoCoords[0]);
+
+      const rect = container.getBoundingClientRect();
+      const selectedIds = [];
+      const points = model.get("points") || [];
+      points.forEach((p, idx) => {
+        const pos = new THREE.Vector3(p.x ?? 0, p.y ?? 0, p.z ?? 0).project(camera);
+        const sx = (pos.x * 0.5 + 0.5) * rect.width;
+        const sy = (-pos.y * 0.5 + 0.5) * rect.height;
+        if (pointInPolygon(sx, sy, lassoCoords)) {
+          selectedIds.push(p.id || `point_${idx}`);
+        }
+      });
+
+      setSelection(selectedIds);
+      lassoCoords = [];
+    });
+  }
+
+  function pointInPolygon(x, y, polygon) {
+    let inside = false;
+    for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+      const [xi, yi] = polygon[i];
+      const [xj, yj] = polygon[j];
+      if (((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi)) {
+        inside = !inside;
+      }
+    }
+    return inside;
+  }
+
+  function updateSelectionHighlight() {
+    // Clear previous highlight rings
+    while (selectionGroup.children.length > 0) {
+      const obj = selectionGroup.children[0];
+      if (obj.geometry) obj.geometry.dispose();
+      if (obj.material) obj.material.dispose();
+      selectionGroup.remove(obj);
+    }
+
+    const selectedIds = model.get("selected_points") || [];
+    const points = model.get("points") || [];
+
+    if (selectedIds.length === 0) {
+      // Restore all points: show everything
+      pointsGroup.children.forEach(obj => {
+        if (obj.userData.isInstanced) {
+          // Restore original instance matrices
+          if (obj.userData._selOrigMatrices) {
+            const m = new THREE.Matrix4();
+            for (let i = 0; i < obj.userData.pointIds.length; i++) {
+              m.fromArray(obj.userData._selOrigMatrices, i * 16);
+              obj.setMatrixAt(i, m);
+            }
+            obj.instanceMatrix.needsUpdate = true;
+            obj.userData._selOrigMatrices = null;
+          }
+        } else {
+          obj.visible = true;
+        }
+      });
+      return;
+    }
+
+    const selectedSet = new Set(selectedIds);
+    const zeroMatrix = new THREE.Matrix4().makeScale(0, 0, 0);
+
+    // Hide non-selected points completely
     pointsGroup.children.forEach(obj => {
       if (obj.userData.isInstanced) {
-        // Dim non-matching instances by darkening their color
-        const indices = obj.userData.pointIndices;
-        const attr = obj.geometry.getAttribute("color");
-        if (!obj.userData._originalColors) {
-          obj.userData._originalColors = new Float32Array(attr.array);
+        const pointIds = obj.userData.pointIds;
+        // Back up original matrices on first selection
+        if (!obj.userData._selOrigMatrices) {
+          const buf = new Float32Array(pointIds.length * 16);
+          const m = new THREE.Matrix4();
+          for (let i = 0; i < pointIds.length; i++) {
+            obj.getMatrixAt(i, m);
+            m.toArray(buf, i * 16);
+          }
+          obj.userData._selOrigMatrices = buf;
         }
-        for (let i = 0; i < indices.length; i++) {
-          const matches = matchSet.has(indices[i]);
-          const dim = matches ? 1.0 : 0.12;
-          attr.array[i * 3] = obj.userData._originalColors[i * 3] * dim;
-          attr.array[i * 3 + 1] = obj.userData._originalColors[i * 3 + 1] * dim;
-          attr.array[i * 3 + 2] = obj.userData._originalColors[i * 3 + 2] * dim;
+        // Scale non-selected instances to zero
+        const m = new THREE.Matrix4();
+        for (let i = 0; i < pointIds.length; i++) {
+          if (selectedSet.has(pointIds[i])) {
+            m.fromArray(obj.userData._selOrigMatrices, i * 16);
+          } else {
+            m.copy(zeroMatrix);
+          }
+          obj.setMatrixAt(i, m);
         }
-        attr.needsUpdate = true;
-      } else if (obj.material) {
-        const idx = obj.userData.pointIndex;
-        const matches = matchSet.has(idx);
-        obj.material.transparent = !matches;
-        obj.material.opacity = matches ? 1.0 : 0.12;
-        obj.material.needsUpdate = true;
+        obj.instanceMatrix.needsUpdate = true;
+      } else {
+        obj.visible = selectedSet.has(obj.userData.pointId);
       }
     });
 
-    return { matched, total };
+    // Zoom to fit selected points
+    const selectedPoints = points.filter(p => selectedSet.has(p.id));
+    if (selectedPoints.length > 0) {
+      const box = new THREE.Box3();
+      selectedPoints.forEach(p => box.expandByPoint(new THREE.Vector3(p.x ?? 0, p.y ?? 0, p.z ?? 0)));
+      const center = box.getCenter(new THREE.Vector3());
+      const size = box.getSize(new THREE.Vector3()).length() || 0.1;
+      const distance = size / (2 * Math.tan(Math.PI * camera.fov / 360));
+      controls.target.copy(center);
+      camera.position.copy(center.clone().add(new THREE.Vector3(0, 0, distance * 0.55)));
+      camera.near = Math.max(0.01, distance * 0.001);
+      camera.far = Math.max(1000, distance * 10);
+      camera.updateProjectionMatrix();
+      controls.update();
+    }
   }
 
   return { cleanup, applyFilter };

{anywidget_vector-0.3.0 → anywidget_vector-0.3.1}/src/anywidget_vector/ui/properties.js

@@ -46,23 +46,20 @@ export function createPropertiesPanel(model, callbacks) {
     }
   });
 
-  // Update on hover
-  model.on("change:hovered_point", () => {
-    const hovered = model.get("hovered_point");
-    const selectedIds = model.get("selected_points") || [];
-    if (hovered && selectedIds.length === 0) {
-      showPointProperties(content, hovered, true);
-    } else if (selectedIds.length === 0) {
-      showEmpty(content);
-    }
-  });
-
   return {
     element: panel,
     open: () => panel.classList.add("avs-open"),
     close: () => panel.classList.remove("avs-open"),
     toggle: () => panel.classList.toggle("avs-open"),
     isOpen: () => panel.classList.contains("avs-open"),
+    setHoveredPoint: (point) => {
+      const selectedIds = model.get("selected_points") || [];
+      if (point && selectedIds.length === 0) {
+        showPointProperties(content, point, true);
+      } else if (!point && selectedIds.length === 0) {
+        showEmpty(content);
+      }
+    },
   };
 }
 

{anywidget_vector-0.3.0 → anywidget_vector-0.3.1}/src/anywidget_vector/ui/sidebar.js

@@ -206,6 +206,16 @@ export function createSidebar(model, callbacks) {
   });
   metricSelect.addEventListener("change", () => {
     model.set("distance_metric", metricSelect.value);
+    // Auto-enable connections when a point is selected
+    const selected = model.get("selected_points") || [];
+    if (selected.length === 1) {
+      model.set("reference_point", selected[0]);
+      if (!model.get("show_connections") || model.get("k_neighbors") === 0) {
+        model.set("k_neighbors", 5);
+        model.set("show_connections", true);
+        kInput.value = 5;
+      }
+    }
     model.save_changes();
   });
   metricGroup.appendChild(metricSelect);

{anywidget_vector-0.3.0 → anywidget_vector-0.3.1}/src/anywidget_vector/widget.py

@@ -34,8 +34,9 @@ class VectorSpace(anywidget.AnyWidget):
     points = traitlets.List(trait=traitlets.Dict()).tag(sync=True)
 
     # === Display ===
-    width = traitlets.Int(default_value=800).tag(sync=True)
-    height = traitlets.Int(default_value=600).tag(sync=True)
+    # width=0 means "auto" (fill container). height=0 means "match width" (1:1 ratio).
+    width = traitlets.Int(default_value=0).tag(sync=True)
+    height = traitlets.Int(default_value=0).tag(sync=True)
     background = traitlets.Unicode(default_value="#1a1a2e").tag(sync=True)
 
     # === Theme ===
@@ -66,8 +67,11 @@ class VectorSpace(anywidget.AnyWidget):
 
     # === Interaction ===
     selected_points = traitlets.List(default_value=[]).tag(sync=True)
+    _selection_version = traitlets.Int(default_value=0).tag(sync=True)
     hovered_point = traitlets.Dict(default_value=None, allow_none=True).tag(sync=True)
-    selection_mode = traitlets.CaselessStrEnum(values=["click", "multi", "box"], default_value="click").tag(sync=True)
+    selection_mode = traitlets.CaselessStrEnum(values=["click", "multi", "box", "lasso"], default_value="click").tag(
+        sync=True
+    )
 
     # === Tooltip ===
     show_tooltip = traitlets.Bool(default_value=True).tag(sync=True)

{anywidget_vector-0.3.0 → anywidget_vector-0.3.1}/tests/test_widget.py

@@ -12,8 +12,8 @@ class TestVectorSpaceInit:
         """Test empty initialization."""
         widget = VectorSpace()
         assert widget.points == []
-        assert widget.width == 800
-        assert widget.height == 600
+        assert widget.width == 0
+        assert widget.height == 0
 
     def test_with_points(self):
         """Test initialization with points."""

{anywidget_vector-0.3.0 → anywidget_vector-0.3.1}/uv.lock

@@ -50,7 +50,7 @@ wheels = [
 
 [[package]]
 name = "anywidget-vector"
-version = "0.3.0"
+version = "0.3.1"
 source = { editable = "." }
 dependencies = [
     { name = "anywidget" },