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

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

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.3.1 2026-03-16
+
+### New Features
+
+- **Lasso selection**: Freeform lasso tool for selecting nodes by drawing around them
+
+### Bug Fixes
+
+- Fixed missing ICONS import causing zoom and lasso buttons to fail
+- Fixed `lassoSvg` referenced before declaration, crashing widget on load
+
 ## 0.3.0
 
 ### New Features

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

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: anywidget-graph
-Version: 0.3.0
+Version: 0.3.1
 Summary: Interactive graph visualization for Python notebooks using anywidget
 Project-URL: Homepage, https://grafeo.dev/
 Project-URL: Repository, https://github.com/GrafeoDB/anywidget-graph

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

@@ -1,6 +1,6 @@
 [project]
 name = "anywidget-graph"
-version = "0.3.0"
+version = "0.3.1"
 description = "Interactive graph visualization for Python notebooks using anywidget"
 readme = "README.md"
 license = "Apache-2.0"

{anywidget_graph-0.3.0 → anywidget_graph-0.3.1}/src/anywidget_graph/ui/icons.js

@@ -18,4 +18,5 @@ export const ICONS = {
   search: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>`,
   chevronUp: `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 15l-6-6-6 6"/></svg>`,
   table: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M3 15h18M9 3v18"/></svg>`,
+  lasso: `<svg width="14" height="14" 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_graph-0.3.0 → anywidget_graph-0.3.1}/src/anywidget_graph/ui/index.js

@@ -6,6 +6,7 @@ import Graph from "https://esm.sh/graphology@0.25.4";
 import Sigma from "https://esm.sh/sigma@3.0.0";
 import * as d3Force from "https://esm.sh/d3-force@3.0.0";
 
+import { ICONS } from "./icons.js";
 import { createToolbar } from "./toolbar.js";
 import { createSchemaPanel } from "./schema.js";
 import { createSettingsPanel } from "./settings.js";
@@ -85,6 +86,18 @@ function getCategoricalColor(value) {
   return CATEGORICAL_COLORS[Math.abs(hash) % CATEGORICAL_COLORS.length];
 }
 
+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 computeNodeColor(node, colorField, colorScale, colorDomain) {
   if (node.color) return node.color;
   if (!colorField || node[colorField] === undefined) {
@@ -283,11 +296,16 @@ function render({ model, el }) {
   wrapper.style.height = model.get("height") + "px";
   wrapper.style.maxHeight = model.get("height") + "px";
 
-  // Auto-detect host theme (marimo uses Tailwind class="dark" on <html>)
+  // Renderer reference (set after Sigma init, used by theme/filter callbacks)
+  let rendererRef = null;
+
+  // Auto-detect host theme (Tailwind dark/dark-theme class, data-theme, or prefers-color-scheme)
   function detectHostDark() {
     const html = document.documentElement;
-    if (html.classList.contains("dark")) return true;
+    if (html.classList.contains("dark") || html.classList.contains("dark-theme")) return true;
     if (html.dataset.theme === "dark") return true;
+    if (document.body?.classList.contains("dark") || document.body?.classList.contains("dark-theme")) return true;
+    if (document.body?.dataset.theme === "dark") return true;
     if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) return true;
     return false;
   }
@@ -299,14 +317,28 @@ function render({ model, el }) {
     rendererRef?.refresh();
   }
 
-  // Detect if inside a themed host (marimo, etc.)
-  const hasHostTheme = !!el.getRootNode()?.host?.tagName?.startsWith("MARIMO-");
-  if (hasHostTheme) {
-    wrapper.classList.add("awg-auto-theme");
-    model.set("dark_mode", detectHostDark());
-    model.save_changes();
-    updateTheme();
-    const themeObserver = new MutationObserver(() => {
+  // Always auto-detect and observe theme changes
+  let autoTheme = true;
+  model.set("dark_mode", detectHostDark());
+  model.save_changes();
+  updateTheme();
+
+  const themeObserver = new MutationObserver(() => {
+    if (!autoTheme) return;
+    const dark = detectHostDark();
+    if (model.get("dark_mode") !== dark) {
+      model.set("dark_mode", dark);
+      model.save_changes();
+      updateTheme();
+    }
+  });
+  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme", "style"] });
+  if (document.body) {
+    themeObserver.observe(document.body, { attributes: true, attributeFilter: ["class", "data-theme", "style"] });
+  }
+  if (window.matchMedia) {
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+      if (!autoTheme) return;
       const dark = detectHostDark();
       if (model.get("dark_mode") !== dark) {
         model.set("dark_mode", dark);
@@ -314,13 +346,11 @@ function render({ model, el }) {
         updateTheme();
       }
     });
-    themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme"] });
-  } else {
-    updateTheme();
   }
 
-  // Manual toggle from settings panel still works
+  // Manual toggle from settings panel disables auto-theme
   model.on("change:dark_mode", () => {
+    autoTheme = false;
     updateTheme();
   });
 
@@ -331,7 +361,6 @@ function render({ model, el }) {
   let hiddenNodeTypes = new Set();
   let hiddenEdgeTypes = new Set();
   let typeColorOverrides = new Map(); // custom colors from filter panel
-  let rendererRef = null; // set after Sigma init
 
   function onFilterChange(nodeTypes, edgeTypes) {
     hiddenNodeTypes = nodeTypes;
@@ -855,7 +884,8 @@ function render({ model, el }) {
   let justDragged = false;
 
   renderer.on("downNode", ({ node }) => {
-    if (model.get("selection_mode") === "box") return;
+    const selMode = model.get("selection_mode");
+    if (selMode === "box" || selMode === "lasso") return;
     draggedNode = node;
     isDragging = false;
     renderer.getCamera().disable();
@@ -945,10 +975,16 @@ function render({ model, el }) {
   boxModeBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="1" stroke-dasharray="4 2"/></svg>`;
   boxModeBtn.title = "Box select";
 
+  const lassoModeBtn = document.createElement("button");
+  lassoModeBtn.className = "awg-zoom-btn awg-mode-btn";
+  lassoModeBtn.innerHTML = ICONS.lasso;
+  lassoModeBtn.title = "Lasso select";
+
   function updateModeButtons() {
     const mode = model.get("selection_mode");
-    clickModeBtn.classList.toggle("awg-mode-active", mode !== "box");
+    clickModeBtn.classList.toggle("awg-mode-active", mode === "click");
     boxModeBtn.classList.toggle("awg-mode-active", mode === "box");
+    lassoModeBtn.classList.toggle("awg-mode-active", mode === "lasso");
   }
   updateModeButtons();
 
@@ -960,10 +996,15 @@ function render({ model, el }) {
     model.set("selection_mode", "box");
     model.save_changes();
   });
+  lassoModeBtn.addEventListener("click", () => {
+    model.set("selection_mode", "lasso");
+    model.save_changes();
+  });
   model.on("change:selection_mode", updateModeButtons);
 
   modeGroup.appendChild(clickModeBtn);
   modeGroup.appendChild(boxModeBtn);
+  modeGroup.appendChild(lassoModeBtn);
 
   zoomControls.appendChild(zoomFitBtn);
   zoomControls.appendChild(zoomInBtn);
@@ -982,64 +1023,116 @@ function render({ model, el }) {
   selectionRect.className = "awg-selection-rect";
   container.appendChild(selectionRect);
 
+  // Lasso SVG overlay for drawing the freeform path
+  const 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);
+
+  const 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);
+
   function updateSelectionMode() {
     const mode = model.get("selection_mode");
-    selectionOverlay.style.pointerEvents = mode === "box" ? "auto" : "none";
-    selectionOverlay.style.cursor = mode === "box" ? "crosshair" : "default";
+    const active = mode === "box" || mode === "lasso";
+    selectionOverlay.style.pointerEvents = active ? "auto" : "none";
+    selectionOverlay.style.cursor = active ? "crosshair" : "default";
+    lassoSvg.style.display = "none";
   }
   updateSelectionMode();
   model.on("change:selection_mode", updateSelectionMode);
 
   let boxStart = null;
+  let isLassoing = false;
+  let lassoCoords = [];
 
   selectionOverlay.addEventListener("mousedown", (e) => {
-    if (model.get("selection_mode") !== "box") return;
+    const mode = model.get("selection_mode");
     const rect = container.getBoundingClientRect();
-    boxStart = { x: e.clientX - rect.left, y: e.clientY - rect.top };
-    selectionRect.style.display = "block";
-    selectionRect.style.left = boxStart.x + "px";
-    selectionRect.style.top = boxStart.y + "px";
-    selectionRect.style.width = "0px";
-    selectionRect.style.height = "0px";
+
+    if (mode === "box") {
+      boxStart = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+      selectionRect.style.display = "block";
+      selectionRect.style.left = boxStart.x + "px";
+      selectionRect.style.top = boxStart.y + "px";
+      selectionRect.style.width = "0px";
+      selectionRect.style.height = "0px";
+    } else if (mode === "lasso") {
+      e.preventDefault();
+      isLassoing = true;
+      lassoCoords = [[e.clientX - rect.left, e.clientY - rect.top]];
+      lassoSvg.style.display = "block";
+      lassoPathEl.setAttribute("points", "");
+    }
   });
 
   selectionOverlay.addEventListener("mousemove", (e) => {
-    if (!boxStart) return;
     const rect = container.getBoundingClientRect();
-    const cx = e.clientX - rect.left;
-    const cy = e.clientY - rect.top;
-    const x = Math.min(boxStart.x, cx);
-    const y = Math.min(boxStart.y, cy);
-    const w = Math.abs(cx - boxStart.x);
-    const h = Math.abs(cy - boxStart.y);
-    selectionRect.style.left = x + "px";
-    selectionRect.style.top = y + "px";
-    selectionRect.style.width = w + "px";
-    selectionRect.style.height = h + "px";
+
+    if (boxStart) {
+      const cx = e.clientX - rect.left;
+      const cy = e.clientY - rect.top;
+      const x = Math.min(boxStart.x, cx);
+      const y = Math.min(boxStart.y, cy);
+      const w = Math.abs(cx - boxStart.x);
+      const h = Math.abs(cy - boxStart.y);
+      selectionRect.style.left = x + "px";
+      selectionRect.style.top = y + "px";
+      selectionRect.style.width = w + "px";
+      selectionRect.style.height = h + "px";
+    } else if (isLassoing) {
+      lassoCoords.push([e.clientX - rect.left, e.clientY - rect.top]);
+      lassoPathEl.setAttribute("points", lassoCoords.map(([x, y]) => `${x},${y}`).join(" "));
+    }
   });
 
   selectionOverlay.addEventListener("mouseup", (e) => {
-    if (!boxStart) return;
     const rect = container.getBoundingClientRect();
-    const cx = e.clientX - rect.left;
-    const cy = e.clientY - rect.top;
-    const x1 = Math.min(boxStart.x, cx);
-    const y1 = Math.min(boxStart.y, cy);
-    const x2 = Math.max(boxStart.x, cx);
-    const y2 = Math.max(boxStart.y, cy);
-    boxStart = null;
-    selectionRect.style.display = "none";
-
-    // Find nodes inside the box
-    const selected = [];
-    graph.forEachNode((id, attrs) => {
-      const pos = renderer.graphToViewport({ x: attrs.x, y: attrs.y });
-      if (pos.x >= x1 && pos.x <= x2 && pos.y >= y1 && pos.y <= y2) {
-        selected.push(id);
-      }
-    });
-    model.set("selected_nodes", selected);
-    model.save_changes();
+
+    if (boxStart) {
+      const cx = e.clientX - rect.left;
+      const cy = e.clientY - rect.top;
+      const x1 = Math.min(boxStart.x, cx);
+      const y1 = Math.min(boxStart.y, cy);
+      const x2 = Math.max(boxStart.x, cx);
+      const y2 = Math.max(boxStart.y, cy);
+      boxStart = null;
+      selectionRect.style.display = "none";
+
+      // Find nodes inside the box
+      const selected = [];
+      graph.forEachNode((id, attrs) => {
+        const pos = renderer.graphToViewport({ x: attrs.x, y: attrs.y });
+        if (pos.x >= x1 && pos.x <= x2 && pos.y >= y1 && pos.y <= y2) {
+          selected.push(id);
+        }
+      });
+      model.set("selected_nodes", selected);
+      model.save_changes();
+    } else if (isLassoing) {
+      isLassoing = false;
+      lassoSvg.style.display = "none";
+
+      if (lassoCoords.length < 3) { lassoCoords = []; return; }
+
+      // Close the polygon
+      lassoCoords.push(lassoCoords[0]);
+
+      // Find nodes inside the lasso
+      const selected = [];
+      graph.forEachNode((id, attrs) => {
+        const pos = renderer.graphToViewport({ x: attrs.x, y: attrs.y });
+        if (pointInPolygon(pos.x, pos.y, lassoCoords)) {
+          selected.push(id);
+        }
+      });
+      model.set("selected_nodes", selected);
+      model.save_changes();
+      lassoCoords = [];
+    }
   });
 
   // Tooltip element

{anywidget_graph-0.3.0 → anywidget_graph-0.3.1}/src/anywidget_graph/ui/styles.css

@@ -515,10 +515,7 @@
   color: var(--awg-text);
 }
 
-/* Hide dark mode toggle when host provides theme */
-.awg-wrapper.awg-auto-theme .awg-theme-toggle {
-  display: none;
-}
+/* Dark mode toggle always visible — manual toggle disables auto-theme */
 
 /* === SCHEMA PANEL (LEFT) === */
 .awg-schema-panel {

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

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