hyper-scatter 0.1.0 → 0.2.0

package/dist-lib/impl_candidate/webgl_candidate.js

@@ -39,7 +39,7 @@
  *   is called, because the demo/harness may re-initialize renderers and we
  *   want `init()` to remain side-effect-light.
  */
-import { DEFAULT_COLORS, SELECTION_COLOR, HOVER_COLOR, createIndicesSelectionResult, createGeometrySelectionResult, } from '../core/types.js';
+import { DEFAULT_COLORS, SELECTION_COLOR, HOVER_COLOR, createIndicesSelectionResult, } from '../core/types.js';
 import { createEuclideanView, projectEuclidean, unprojectEuclidean, panEuclidean, zoomEuclidean, } from '../core/math/euclidean.js';
 import { createHyperbolicView, projectPoincare, unprojectPoincare, panPoincare, zoomPoincare, } from '../core/math/poincare.js';
 import { UniformGridIndex, } from './spatial_index.js';
@@ -463,6 +463,14 @@ class WebGLRendererBase {
     pointRadiusCss = 3;
     colors = DEFAULT_COLORS;
     backgroundColor = '#0a0a0a';
+    categoryVisibilityMask = new Uint8Array(0);
+    hasCategoryVisibilityMask = false;
+    categoryAlpha = 1;
+    interactionStyle = {
+        selectionColor: SELECTION_COLOR,
+        hoverColor: HOVER_COLOR,
+        hoverFillColor: null,
+    };
     // Hyperbolic backdrop styling (Poincaré disk). Neutral grayscale defaults.
     // Override per app via InitOptions as needed.
     poincareDiskFillColor = '#141414';
@@ -747,6 +755,74 @@ class WebGLRendererBase {
         // Dataset changes don't affect the backdrop, but point DPR might have changed.
         this.markBackdropDirty();
     }
+    setPalette(colors) {
+        this.colors = colors;
+        this.paletteDirty = true;
+        if (this.gl) {
+            this.uploadPaletteUniforms();
+        }
+    }
+    setCategoryVisibility(mask) {
+        if (mask == null) {
+            this.categoryVisibilityMask = new Uint8Array(0);
+            this.hasCategoryVisibilityMask = false;
+        }
+        else {
+            const n = mask.length >>> 0;
+            const next = new Uint8Array(n);
+            for (let i = 0; i < n; i++) {
+                next[i] = mask[i] ? 1 : 0;
+            }
+            this.categoryVisibilityMask = next;
+            this.hasCategoryVisibilityMask = true;
+        }
+        if (this.hoveredIndex >= 0 && !this.isPointVisibleByCategory(this.hoveredIndex)) {
+            this.hoveredIndex = -1;
+        }
+        this.paletteDirty = true;
+        this.selectionDirty = true;
+        this.hoverDirty = true;
+        if (this.gl) {
+            this.uploadPaletteUniforms();
+            this.uploadSelectionToGPU();
+            this.uploadHoverToGPU();
+        }
+    }
+    setCategoryAlpha(alpha) {
+        const next = Number.isFinite(alpha) ? Math.max(0, Math.min(1, alpha)) : 1;
+        if (Math.abs(next - this.categoryAlpha) <= 1e-12)
+            return;
+        this.categoryAlpha = next;
+        this.paletteDirty = true;
+        if (this.gl) {
+            this.uploadPaletteUniforms();
+        }
+    }
+    setInteractionStyle(style) {
+        if (typeof style.selectionColor === 'string' && style.selectionColor.length > 0) {
+            this.interactionStyle.selectionColor = style.selectionColor;
+        }
+        if (typeof style.hoverColor === 'string' && style.hoverColor.length > 0) {
+            this.interactionStyle.hoverColor = style.hoverColor;
+        }
+        if (Object.prototype.hasOwnProperty.call(style, 'hoverFillColor')) {
+            this.interactionStyle.hoverFillColor = style.hoverFillColor ?? null;
+        }
+    }
+    isCategoryVisible(category) {
+        if (!this.hasCategoryVisibilityMask)
+            return true;
+        const mask = this.categoryVisibilityMask;
+        if (category < 0 || category >= mask.length)
+            return true;
+        return mask[category] !== 0;
+    }
+    isPointVisibleByCategory(index) {
+        const ds = this.dataset;
+        if (!ds || index < 0 || index >= ds.n)
+            return false;
+        return this.isCategoryVisible(ds.labels[index]);
+    }
     resize(width, height) {
         this.width = width;
         this.height = height;
@@ -774,7 +850,12 @@ class WebGLRendererBase {
         return this.selection.size <= 200_000 ? new Set(this.selection) : this.selection;
     }
     setHovered(index) {
-        this.hoveredIndex = index;
+        if (index >= 0 && !this.isPointVisibleByCategory(index)) {
+            this.hoveredIndex = -1;
+        }
+        else {
+            this.hoveredIndex = index;
+        }
         this.hoverDirty = true;
         if (this.gl) {
             this.uploadHoverToGPU();
@@ -894,16 +975,19 @@ class WebGLRendererBase {
             this.paletteBytes[0] = 255;
             this.paletteBytes[1] = 255;
             this.paletteBytes[2] = 255;
-            this.paletteBytes[3] = 255;
+            const visible = this.isCategoryVisible(0);
+            this.paletteBytes[3] = visible ? Math.round(255 * this.categoryAlpha) : 0;
         }
         else {
             for (let i = 0; i < size; i++) {
                 const [r, g, b, a] = parseHexColorBytes(this.colors[i]);
+                const visible = this.isCategoryVisible(i);
+                const alpha = visible ? Math.round(a * this.categoryAlpha) : 0;
                 const o = i * 4;
                 this.paletteBytes[o + 0] = r;
                 this.paletteBytes[o + 1] = g;
                 this.paletteBytes[o + 2] = b;
-                this.paletteBytes[o + 3] = a;
+                this.paletteBytes[o + 3] = alpha;
             }
         }
         if (!this.paletteTex) {
@@ -959,8 +1043,14 @@ class WebGLRendererBase {
         const idx = this.dataIndex;
         if (!ds || !idx)
             return 0;
-        if (result.indices)
-            return result.indices.size;
+        if (result.indices) {
+            let visibleCount = 0;
+            for (const i of result.indices) {
+                if (this.isPointVisibleByCategory(i))
+                    visibleCount++;
+            }
+            return visibleCount;
+        }
         if (result.kind !== 'geometry' || !result.geometry)
             return 0;
         const polygon = result.geometry.coords;
@@ -1026,6 +1116,8 @@ class WebGLRendererBase {
                 const end = offsets[cell + 1];
                 for (let k = start; k < end; k++) {
                     const i = ids[k];
+                    if (!this.isCategoryVisible(ds.labels[i]))
+                        continue;
                     const x = positions[i * 2];
                     const y = positions[i * 2 + 1];
                     // Tight AABB prefilter (cells overlap bounds).
@@ -1432,6 +1524,8 @@ class WebGLRendererBase {
             const lab = new Uint16Array(renderCount);
             let k = 0;
             for (const i of this.selection) {
+                if (!this.isPointVisibleByCategory(i))
+                    continue;
                 pos[k * 2] = ds.positions[i * 2];
                 pos[k * 2 + 1] = ds.positions[i * 2 + 1];
                 lab[k] = ds.labels[i];
@@ -1461,6 +1555,8 @@ class WebGLRendererBase {
         const indices = new Uint32Array(renderCount);
         let k = 0;
         for (const i of this.selection) {
+            if (!this.isPointVisibleByCategory(i))
+                continue;
             indices[k++] = i;
             if (k >= renderCount)
                 break;
@@ -1479,7 +1575,11 @@ class WebGLRendererBase {
             const ds = this.dataset;
             if (!ds || !this.hoverVao || !this.hoverPosBuffer || !this.hoverLabelBuffer)
                 return;
-            const i = (this.hoveredIndex >= 0 && this.hoveredIndex < ds.n) ? this.hoveredIndex : -1;
+            const i = (this.hoveredIndex >= 0 &&
+                this.hoveredIndex < ds.n &&
+                this.isPointVisibleByCategory(this.hoveredIndex))
+                ? this.hoveredIndex
+                : -1;
             const pos = this.hoverPosScratch;
             const lab = this.hoverLabScratch;
             if (i >= 0) {
@@ -1502,7 +1602,9 @@ class WebGLRendererBase {
             this.hoverDirty = false;
             return;
         }
-        const idx = this.hoveredIndex >= 0 ? this.hoveredIndex : 0;
+        const idx = this.hoveredIndex >= 0 && this.isPointVisibleByCategory(this.hoveredIndex)
+            ? this.hoveredIndex
+            : 0;
         const indices = this.hoverIndexScratch;
         indices[0] = idx;
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.hoverEbo);
@@ -1645,7 +1747,7 @@ class WebGLRendererBase {
             fragmentBudget: this.policy.fragmentBudget,
             isInteracting,
         };
-        // Selection overlay (still into points buffer)
+        // Selection overlay (ring + label-colored fill, still into points buffer)
         if (!isInteracting && this.selection.size > 0) {
             gl.useProgram(this.programSolid);
             this.bindViewUniformsForProgram(this.programSolid);
@@ -1656,13 +1758,13 @@ class WebGLRendererBase {
             if (this.uPointRadiusSolid)
                 gl.uniform1f(this.uPointRadiusSolid, this.pointRadiusCss + 1);
             if (this.uSolidColor) {
-                const [r, g, b, a] = parseHexColor(SELECTION_COLOR);
+                const [r, g, b, a] = parseHexColor(this.interactionStyle.selectionColor);
                 gl.uniform4f(this.uSolidColor, r, g, b, a);
             }
             if (this.uSolidRingMode)
-                gl.uniform1i(this.uSolidRingMode, 0);
+                gl.uniform1i(this.uSolidRingMode, 1);
             if (this.uSolidRingThicknessPx)
-                gl.uniform1f(this.uSolidRingThicknessPx, 0);
+                gl.uniform1f(this.uSolidRingThicknessPx, 2);
             if (this.uSolidPointSizePx)
                 gl.uniform1f(this.uSolidPointSizePx, (this.pointRadiusCss + 1) * 2 * this.dpr);
             if (this.gpuUsesFullDataset) {
@@ -1675,9 +1777,33 @@ class WebGLRendererBase {
                 gl.drawArrays(gl.POINTS, 0, this.selectionOverlayCount);
                 gl.bindVertexArray(this.vao);
             }
+            const circlePoints = this.pointsCircle;
+            if (circlePoints) {
+                gl.useProgram(circlePoints.program);
+                this.bindViewUniformsForProgram(circlePoints.program);
+                if (this.paletteDirty)
+                    this.uploadPaletteUniforms();
+                this.bindPaletteTexture();
+                if (circlePoints.uCssSize)
+                    gl.uniform2f(circlePoints.uCssSize, this.width, this.height);
+                if (circlePoints.uDpr)
+                    gl.uniform1f(circlePoints.uDpr, this.dpr);
+                if (circlePoints.uPointRadius)
+                    gl.uniform1f(circlePoints.uPointRadius, this.pointRadiusCss);
+                if (this.gpuUsesFullDataset) {
+                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.selectionEbo);
+                    gl.drawElements(gl.POINTS, this.selectionOverlayCount, gl.UNSIGNED_INT, 0);
+                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+                }
+                else if (this.selectionVao && this.selectionOverlayCount > 0) {
+                    gl.bindVertexArray(this.selectionVao);
+                    gl.drawArrays(gl.POINTS, 0, this.selectionOverlayCount);
+                    gl.bindVertexArray(this.vao);
+                }
+            }
         }
         // Hover overlay (still into points buffer)
-        if (!isInteracting && this.hoveredIndex >= 0 && this.hoveredIndex < ds.n) {
+        if (!isInteracting && this.hoveredIndex >= 0 && this.hoveredIndex < ds.n && this.isPointVisibleByCategory(this.hoveredIndex)) {
             // Ring
             gl.useProgram(this.programSolid);
             this.bindViewUniformsForProgram(this.programSolid);
@@ -1690,7 +1816,7 @@ class WebGLRendererBase {
             if (this.uPointRadiusSolid)
                 gl.uniform1f(this.uPointRadiusSolid, ringRadius);
             if (this.uSolidColor) {
-                const [r, g, b, a] = parseHexColor(HOVER_COLOR);
+                const [r, g, b, a] = parseHexColor(this.interactionStyle.hoverColor);
                 gl.uniform4f(this.uSolidColor, r, g, b, a);
             }
             if (this.uSolidRingMode)
@@ -1708,20 +1834,19 @@ class WebGLRendererBase {
                 gl.drawArrays(gl.POINTS, 0, 1);
                 gl.bindVertexArray(this.vao);
             }
-            // Fill pass (selection color if selected else palette)
+            // Fill pass (selection ring if selected else fill)
             const fillRadius = this.pointRadiusCss + 1;
             if (this.selection.has(this.hoveredIndex)) {
-                // Solid red
                 if (this.uPointRadiusSolid)
                     gl.uniform1f(this.uPointRadiusSolid, fillRadius);
                 if (this.uSolidColor) {
-                    const [r, g, b, a] = parseHexColor(SELECTION_COLOR);
+                    const [r, g, b, a] = parseHexColor(this.interactionStyle.selectionColor);
                     gl.uniform4f(this.uSolidColor, r, g, b, a);
                 }
                 if (this.uSolidRingMode)
-                    gl.uniform1i(this.uSolidRingMode, 0);
+                    gl.uniform1i(this.uSolidRingMode, 1);
                 if (this.uSolidRingThicknessPx)
-                    gl.uniform1f(this.uSolidRingThicknessPx, 0);
+                    gl.uniform1f(this.uSolidRingThicknessPx, 2);
                 if (this.uSolidPointSizePx)
                     gl.uniform1f(this.uSolidPointSizePx, fillRadius * 2 * this.dpr);
                 if (this.gpuUsesFullDataset) {
@@ -1732,30 +1857,79 @@ class WebGLRendererBase {
                     gl.drawArrays(gl.POINTS, 0, 1);
                     gl.bindVertexArray(this.vao);
                 }
+                const circlePoints = this.pointsCircle;
+                if (circlePoints) {
+                    gl.useProgram(circlePoints.program);
+                    this.bindViewUniformsForProgram(circlePoints.program);
+                    if (this.paletteDirty)
+                        this.uploadPaletteUniforms();
+                    this.bindPaletteTexture();
+                    if (circlePoints.uCssSize)
+                        gl.uniform2f(circlePoints.uCssSize, this.width, this.height);
+                    if (circlePoints.uDpr)
+                        gl.uniform1f(circlePoints.uDpr, this.dpr);
+                    if (circlePoints.uPointRadius)
+                        gl.uniform1f(circlePoints.uPointRadius, this.pointRadiusCss);
+                    if (this.gpuUsesFullDataset) {
+                        gl.drawElements(gl.POINTS, 1, gl.UNSIGNED_INT, 0);
+                    }
+                    else if (this.hoverVao) {
+                        gl.bindVertexArray(this.hoverVao);
+                        gl.drawArrays(gl.POINTS, 0, 1);
+                        gl.bindVertexArray(this.vao);
+                    }
+                }
             }
             else {
-                // Use palette program for correct label color
-                const circlePoints = this.pointsCircle;
-                if (!circlePoints)
-                    return;
-                gl.useProgram(circlePoints.program);
-                this.bindViewUniformsForProgram(circlePoints.program);
-                if (this.paletteDirty)
-                    this.uploadPaletteUniforms();
-                this.bindPaletteTexture();
-                if (circlePoints.uCssSize)
-                    gl.uniform2f(circlePoints.uCssSize, this.width, this.height);
-                if (circlePoints.uDpr)
-                    gl.uniform1f(circlePoints.uDpr, this.dpr);
-                if (circlePoints.uPointRadius)
-                    gl.uniform1f(circlePoints.uPointRadius, fillRadius);
-                if (this.gpuUsesFullDataset) {
-                    gl.drawElements(gl.POINTS, 1, gl.UNSIGNED_INT, 0);
+                const hoverFillColor = this.interactionStyle.hoverFillColor;
+                if (hoverFillColor) {
+                    gl.useProgram(this.programSolid);
+                    this.bindViewUniformsForProgram(this.programSolid);
+                    if (this.uPointRadiusSolid)
+                        gl.uniform1f(this.uPointRadiusSolid, fillRadius);
+                    if (this.uSolidColor) {
+                        const [r, g, b, a] = parseHexColor(hoverFillColor);
+                        gl.uniform4f(this.uSolidColor, r, g, b, a);
+                    }
+                    if (this.uSolidRingMode)
+                        gl.uniform1i(this.uSolidRingMode, 0);
+                    if (this.uSolidRingThicknessPx)
+                        gl.uniform1f(this.uSolidRingThicknessPx, 0);
+                    if (this.uSolidPointSizePx)
+                        gl.uniform1f(this.uSolidPointSizePx, fillRadius * 2 * this.dpr);
+                    if (this.gpuUsesFullDataset) {
+                        gl.drawElements(gl.POINTS, 1, gl.UNSIGNED_INT, 0);
+                    }
+                    else if (this.hoverVao) {
+                        gl.bindVertexArray(this.hoverVao);
+                        gl.drawArrays(gl.POINTS, 0, 1);
+                        gl.bindVertexArray(this.vao);
+                    }
                 }
-                else if (this.hoverVao) {
-                    gl.bindVertexArray(this.hoverVao);
-                    gl.drawArrays(gl.POINTS, 0, 1);
-                    gl.bindVertexArray(this.vao);
+                else {
+                    // Use palette program for category color when no hover fill override is set.
+                    const circlePoints = this.pointsCircle;
+                    if (!circlePoints)
+                        return;
+                    gl.useProgram(circlePoints.program);
+                    this.bindViewUniformsForProgram(circlePoints.program);
+                    if (this.paletteDirty)
+                        this.uploadPaletteUniforms();
+                    this.bindPaletteTexture();
+                    if (circlePoints.uCssSize)
+                        gl.uniform2f(circlePoints.uCssSize, this.width, this.height);
+                    if (circlePoints.uDpr)
+                        gl.uniform1f(circlePoints.uDpr, this.dpr);
+                    if (circlePoints.uPointRadius)
+                        gl.uniform1f(circlePoints.uPointRadius, fillRadius);
+                    if (this.gpuUsesFullDataset) {
+                        gl.drawElements(gl.POINTS, 1, gl.UNSIGNED_INT, 0);
+                    }
+                    else if (this.hoverVao) {
+                        gl.bindVertexArray(this.hoverVao);
+                        gl.drawArrays(gl.POINTS, 0, 1);
+                        gl.bindVertexArray(this.vao);
+                    }
                 }
             }
             if (this.gpuUsesFullDataset) {
@@ -1883,6 +2057,8 @@ export class EuclideanWebGLCandidate extends WebGLRendererBase {
         // Avoid building a potentially large candidates array (push-heavy).
         // Instead iterate overlapping grid cells directly.
         idx.forEachInAABB(dataPt.x - dataRadius, dataPt.y - dataRadius, dataPt.x + dataRadius, dataPt.y + dataRadius, (i) => {
+            if (!this.isCategoryVisible(ds.labels[i]))
+                return;
             const dataX = ds.positions[i * 2];
             const dataY = ds.positions[i * 2 + 1];
             // Fast reject in data space (equivalent up to scale).
@@ -1951,11 +2127,22 @@ export class EuclideanWebGLCandidate extends WebGLRendererBase {
         const bounds = { xMin: minX, yMin: minY, xMax: maxX, yMax: maxY };
         const geometry = { type: 'polygon', coords: dataPolyline, bounds };
         const computeTimeMs = performance.now() - startTime;
-        return createGeometrySelectionResult(geometry, ds.positions, computeTimeMs, (px, py, polygon) => {
-            if (px < bounds.xMin || px > bounds.xMax || py < bounds.yMin || py > bounds.yMax)
-                return false;
-            return pointInPolygon(px, py, polygon);
-        });
+        return {
+            kind: 'geometry',
+            geometry,
+            computeTimeMs,
+            has: (index) => {
+                if (index < 0 || index >= ds.n)
+                    return false;
+                if (!this.isCategoryVisible(ds.labels[index]))
+                    return false;
+                const px = ds.positions[index * 2];
+                const py = ds.positions[index * 2 + 1];
+                if (px < bounds.xMin || px > bounds.xMax || py < bounds.yMin || py > bounds.yMax)
+                    return false;
+                return pointInPolygon(px, py, dataPolyline);
+            },
+        };
     }
     projectToScreen(dataX, dataY) {
         return projectEuclidean(dataX, dataY, this.view, this.width, this.height);
@@ -2135,6 +2322,8 @@ export class HyperbolicWebGLCandidate extends WebGLRendererBase {
         const ay = view.ay;
         // Avoid building a candidates array; iterate overlapping cells directly.
         idx.forEachInAABB(dataPt.x - queryRadius, dataPt.y - queryRadius, dataPt.x + queryRadius, dataPt.y + queryRadius, (i) => {
+            if (!this.isCategoryVisible(ds.labels[i]))
+                return;
             const dataX = ds.positions[i * 2];
             const dataY = ds.positions[i * 2 + 1];
             // mobiusTransform(z) = (z - a) / (1 - conj(a) * z)
@@ -2260,11 +2449,22 @@ export class HyperbolicWebGLCandidate extends WebGLRendererBase {
         const bounds = { xMin: minX, yMin: minY, xMax: maxX, yMax: maxY };
         const geometry = { type: 'polygon', coords: dataPolyline, bounds };
         const computeTimeMs = performance.now() - startTime;
-        return createGeometrySelectionResult(geometry, ds.positions, computeTimeMs, (px, py, polygon) => {
-            if (px < bounds.xMin || px > bounds.xMax || py < bounds.yMin || py > bounds.yMax)
-                return false;
-            return pointInPolygon(px, py, polygon);
-        });
+        return {
+            kind: 'geometry',
+            geometry,
+            computeTimeMs,
+            has: (index) => {
+                if (index < 0 || index >= ds.n)
+                    return false;
+                if (!this.isCategoryVisible(ds.labels[index]))
+                    return false;
+                const px = ds.positions[index * 2];
+                const py = ds.positions[index * 2 + 1];
+                if (px < bounds.xMin || px > bounds.xMax || py < bounds.yMin || py > bounds.yMax)
+                    return false;
+                return pointInPolygon(px, py, dataPolyline);
+            },
+        };
     }
     projectToScreen(dataX, dataY) {
         return projectPoincare(dataX, dataY, this.view, this.width, this.height);