feat: Points experiment 2

.cursor/rules/datamanager-api.mdc

@@ -0,0 +1,75 @@
+---
+description: 
+globs: **/datamanager/**
+alwaysApply: false
+---
+# Data Manager – API usage conventions
+
+## 1. Prefer `root.apiCall(...)`
+• Always call the backend through `root.apiCall` (inside MST models) or  
+  `datamanager.apiCall` (inside plain JS/React).  
+• Never access `APIProxy` methods directly from components/stores.
+
+```js
+// inside a store action
+const data = yield root.apiCall("tasks", { page: 1, pageSize: 50 });
+```
+
+## 2. Signature  
+`apiCall(methodName, params?, body?, options?)`
+
+| Arg        | Type         | Notes                                                |
+|------------|--------------|------------------------------------------------------|
+| methodName | string       | Must exist in `src/sdk/api-config.js`                |
+| params     | object       | • Keys matching `:vars` in the endpoint path are substituted.<br>• All remaining keys become query-string params. |
+| body       | object       | POST / PATCH payload (will be JSON-stringified)      |
+| options    | object       | `{ errorHandler?, headers?, allowToCancel?, alwaysExpectJSON? }` |
+
+### 2.1 `allowToCancel`
+Adds an `AbortController`; subsequent identical requests cancel previous ones.
+```js
+yield root.apiCall("tasks", params, {}, { allowToCancel: true });
+```
+
+### 2.2 `errorHandler`
+Return `true` to mark the error as handled and suppress the default toast.
+```js
+yield root.apiCall("task", { taskID }, undefined, {
+  errorHandler: err => { log(err); return true; }
+});
+```
+
+## 3. Endpoint definitions
+Add/modify endpoints only in `api-config.js`.  
+Structure:
+
+```js
+export const APIConfig = {
+  gateway : "/api",
+  endpoints: {
+    tasks : "/tasks",                        // GET
+    task  : { path: "/tasks/:taskID", method: "get" },
+    // …
+  },
+};
+```
+
+## 4. Automatic shared params  
+`project` and `dataset` IDs are appended automatically by `APIProxy` when present.
+
+## 5. Request/response transforms  
+Pass a `apiTransform` map to `<DataManager>` to mutate params/body/headers:
+```js
+<DataManager apiTransform={{
+  tasks: {
+    params : p => ({ ...p, extra: 1 }),
+    body   : b => ({ ...b, foo: "bar" }),
+    headers: h => ({ ...h, "X-Feature": "on" }),
+  }
+}}/>
+```
+
+## 6. Do NOT  
+✗ Hard-code URLs in components.  
+✗ Mix window‐fetch logic with business logic.  
+✗ Forget to await the returned Promise (it always resolves, never throws).

.cursor/rules/datamanager-legacy-components.mdc

@@ -0,0 +1,27 @@
+---
+description: 
+globs: **/datamanager/**
+alwaysApply: false
+---
+# Data-Manager Legacy Components
+
+Use these **only** inside `web/libs/datamanager`.
+
+| Component (path)                        | Purpose                             |
+|-----------------------------------------|-------------------------------------|
+| `Common/Modal/Modal.jsx`                | Imperative & confirm/info dialogs   |
+| `Common/Button/Button.jsx`              | BEM button + `Button.Group`         |
+| `Common/Space/Space.jsx`                | Flex/inline-flex gap helper         |
+| `Common/Spinner/Spinner.jsx`            | Inline SVG spinner                  |
+| `Common/Table/Table.jsx`                | Virtualised table                   |
+| `Common/Dropdown`                       | Custom dropdown / select            |
+| `Common/Tabs`                           | Draggable tab bar                   |
+| `Common/Pagination`                     | Pager with page-size select         |
+| `Common/Badge`, `Tag`                   | Status labels                       |
+| etc.                                    |                                     |
+
+Guidelines:
+
+* Keep styles in the same folder (`*.scss`), BEM naming.  
+* Do **not** introduce Tailwind into these components.  
+* When moving features out of Data-Manager, rewrite them with `@humansignal/ui` primitives.

.cursor/rules/datamanager-naming.mdc

@@ -0,0 +1,39 @@
+---
+description: 
+globs: **/datamanager/**
+alwaysApply: false
+---
+# Data Manager – Naming conventions
+
+## 1. General
+| Kind                | Convention             | Example                         |
+|---------------------|------------------------|---------------------------------|
+| React component     | `PascalCase`           | `ScatterView`, `DataManager`    |
+| Hook                | `useCamelCase` prefix  | `useShortcut`, `useScatterLayers` |
+| Function / variable | `camelCase`            | `fetchProject`, `pageSize`      |
+| Boolean             | `is/has/can` prefix    | `isLoading`, `hasError`         |
+| Constant value      | `UPPER_SNAKE_CASE`     | `DEFAULT_TOOLBAR`               |
+| MST model           | `PascalCase`           | `TaskModel`, `TabStore`         |
+| File name           | mirror exported symbol | `ScatterView.tsx`               |
+
+## 2. Abbreviations  
+• Avoid abbreviations unless they are industry-standard (`API`, `SDK`, `ID`).  
+• Do **not** mix abbreviation casing: `apiCall` (not `APICall`).
+
+## 3. React props & state  
+• Props interfaces end with `Props`: `ScatterViewProps`.  
+• Local state variables follow the `verb + Noun` pattern: `setLoading`.
+
+## 4. Enumerations / literals  
+• Prefer union string literals over `enum`.  
+```ts
+type ViewMode = "list" | "grid" | "scatter";
+```
+
+## 5. Derived values  
+Prefix with `computed` or suffix with descriptor: `computedBounds`, `totalPages`.
+
+## 6. Do NOT  
+✗ Use Hungarian notation.  
+✗ Use snake_case for JS/TS variables.  
+✗ Prefix private fields with underscores (except when mirroring existing code that already does this).

.cursor/rules/datamanager-stores.mdc

@@ -0,0 +1,72 @@
+---
+description: 
+globs: **/datamanager/**
+alwaysApply: false
+---
+# Data Manager – MobX-state-tree store rules
+
+## 1. Store structure
+```txt
+AppStore        – root, injected into <Provider/>
+  ├─ Tabs/TabStore
+  ├─ TasksStore (DataStore mixin)
+  └─ AnnotationStore (DataStore mixin)
+```
+All stores live in `src/stores/**` and **never import React**.
+
+## 2. DataStore mixin
+When you need a paginated list, extend the generic `DataStore`:
+
+```js
+export const TasksStore = DataStore("tasksStore", {
+  listItemType : TaskModel,
+  apiMethod    : "tasks",          // MUST exist in api-config
+  properties   : { target: "tasks" },
+});
+```
+
+### Built-in helper actions
+• `fetch({ page, reload, interaction })`  
+• `setSelected(id | model)` & `unset()`  
+• `focusPrev()` / `focusNext()`  
+• `updateItem(id, patch)` – merges server response into MST model
+
+### Flags
+`loading`, `loadingItem`, `loadingItems[]`, `total`, `pageSize`, `hasNextPage`
+
+## 3. Accessing the root / SDK
+```js
+import { getRoot } from "mobx-state-tree";
+
+const root = getRoot(self);          // inside any MST node
+root.apiCall("task", { taskID });    // API
+root.SDK.invoke("taskSelected");     // cross-app events
+```
+
+## 4. Async flows
+• **Use `flow(function* () { … })`** for every async action.  
+• Always wrap calls in `try / catch` or rely on `AppStore.apiCall` which never throws.  
+• Check `result.error` instead of relying on exceptions.
+
+## 5. Selection & focus
+Store `selectedId` and `highlightedId` as primitives; expose computed getters:
+```js
+get selected()   { return self.list.find(i => i.id === self.selectedId); }
+```
+
+## 6. Events
+Emit UI-level events through `root.SDK.invoke(eventName, payload)`; do not use
+window events or PubSub libs.
+
+## 7. React integration
+React components observe stores via:
+```jsx
+export const Table = inject("store")(observer(TableImpl));
+```
+• No state is duplicated in React.  
+• Components receive plain snapshots (`view.filterSnapshot`, `view.selected.snapshot`) for serialization.
+
+## 8. Do NOT  
+✗ Mutate MST nodes outside of `actions`.  
+✗ Call `fetch()` directly from React `render`; use `useEffect`.  
+✗ Import stores into each other (use `getRoot` instead).

.cursor/rules/react.mdc

@@ -1,6 +1,7 @@
 ---
 description: React coding standards and best practices for the LabelStudio clientside application
 globs: **/*.jsx,**/*.tsx
+alwaysApply: false
 ---
 
 # React Best Practices
@@ -125,4 +126,16 @@ globs: **/*.jsx,**/*.tsx
 - Keep components focused on a single responsibility
 - Document complex logic with clear comments
 - Follow the project's folder structure and naming conventions
-- Prefer controlled components over uncontrolled ones 
+- Prefer controlled components over uncontrolled ones
+
+## Readability & Formatting
+
+- Always run `make fmt-all` (Prettier/Biome/Ruff) before committing.
+- Use spaces around binary operators and after commas: `const xs = pts.map(p => p.data.x);` not `pts.map(p=>p.data.x)`.
+- Limit line length to 120 chars; break long expressions.
+
+## Documentation & Comments
+
+- Top-level JSDoc for every exported component/hook explaining props & side-effects.
+- Inline comments for non-obvious math / transforms.  
+- Avoid redundant comments; prefer expressive variable names. 

.cursor/rules/typescript.mdc

@@ -1,6 +1,7 @@
 ---
 description: TypeScript coding standards and best practices for the LabelStudio clientside application
 globs: **/*.ts,**/*.tsx,**/*.d.ts
+alwaysApply: false
 ---
 
 # TypeScript Best Practices
@@ -54,4 +55,20 @@ globs: **/*.ts,**/*.tsx,**/*.d.ts
 - Implement the Repository pattern for data access
 - Use the Factory pattern for object creation
 - Leverage dependency injection
-- Use the Module pattern for encapsulation 
+- Use the Module pattern for encapsulation
+
+## Readability & Formatting
+
+- Always run `make fmt-all` (Prettier/Biome/Ruff) before pushing.
+- Use spaces around operators and after commas.
+- Prefer multi-line object literals with trailing commas.
+
+## React + TS patterns
+
+- Prefer `FC<Props>` or explicit function annotations.
+- Never use `any`; fallback to `unknown` + type guards.
+- Use union types instead of enums when possible.
+
+## Documentation
+- Add `/** ... */` JSDoc to every public function/component/hook.
+- Describe parameters, return value, side-effects. 

.cursor/rules/ui-components-system.mdc

@@ -0,0 +1,63 @@
+---
+description: 
+globs: 
+alwaysApply: false
+---
+# Component System – General Rules
+
+## 1. Which library to import from?
+| Scenario                           | Import from                 | Notes                    |
+|------------------------------------|-----------------------------|--------------------------|
+| *New* front-end code (apps/libs)   | `@humansignal/ui`           | Tailwind + Radix shadcn  |
+| Data-Manager internals             | `web/libs/datamanager/...`  | Legacy BEM-SCSS          |
+| Page-level blocks shared by apps   | `@humansignal/app-common`   | may re-export UI parts   |
+
+**Never** mix DM-internal BEM components with the Tailwind ones in the same view.
+
+## 2. Dialogs
+
+1. **Radix Dialog** (`@humansignal/ui → Dialog*`):  
+   ```tsx
+   import { Dialog, DialogTrigger, DialogContent,
+            DialogHeader, DialogFooter, DialogTitle } from "@humansignal/ui";
+
+   <Dialog>
+     <DialogTrigger asChild><Button>Open</Button></DialogTrigger>
+     <DialogContent>
+       <DialogHeader><DialogTitle>Title</DialogTitle></DialogHeader>
+       …body…
+       <DialogFooter><Button variant="primary">OK</Button></DialogFooter>
+     </DialogContent>
+   </Dialog>
+   ```
+2. **DM Modal** (`Modal.confirm/info`): keep inside Data-Manager only.
+
+## 3. Buttons
+
+• Prefer `@humansignal/ui` `Button`.  
+• Use `ButtonGroup` for horizontal groups.  
+• Disable with `waiting` to show spinner.  
+• For non-button nodes use `buttonVariant({...}, className)` helper.
+
+Legacy `Common/Button` must **not** leak outside Data-Manager.
+
+## 4. File / folder organisation
+
+my-component/
+my-component.tsx
+my-component.stories.tsx # always add Storybook
+my-component.module.scss # only if Tailwind is insufficient
+index.ts # re-export
+
+## 5. Theming & Tokens
+
+• Tailwind config comes from `@humansignal/ui`.  
+• Only semantic tokens (`bg-primary-background`) – never raw palette names.  
+• Use `cn()` helper for class merges.
+
+## 6. Accessibility
+
+• Dialogs must trap focus (Radix does by default).  
+• Buttons require `aria-*` if they aren’t `<button>`.
+
+

label_studio/core/urls.py

@@ -70,6 +70,7 @@
     re_path(r'^', include('ml.urls')),
     re_path(r'^', include('webhooks.urls')),
     re_path(r'^', include('labels_manager.urls')),
+    re_path(r'^', include('scatter.urls')),
     re_path(r'data/local-files/', views.localfiles_data, name='localfiles_data'),
     re_path(r'version/', views.version_page, name='version'),  # html page
     re_path(r'api/version/', views.version_page, name='api-version'),  # json response