@hema-to/regl-scatterplot 1.14.1-hemato.0

package/src/lasso-manager/utils.js

@@ -0,0 +1,40 @@
+/**
+ * Calculates exponential moving average of 2D points
+ * @param {[number, number][]} values - Array of numbers to average
+ * @param {number} halfLife - Number of steps after which weight becomes half
+ * @param {number} windowSize - Maximum number of previous values to consider
+ * @returns {number} The exponential moving average
+ */
+export const exponentialMovingAverage = (values, halfLife, windowSize) => {
+  if (values.length === 0) {
+    return 0;
+  }
+
+  if (values.length === 1) {
+    return values[0];
+  }
+
+  // Calculate decay factor from `halfLife` such that weight = 0.5 when the
+  // step is `halfLife`
+  const decayBase = 2 ** (-1 / halfLife);
+
+  // Limit to window size
+  const startIdx = Math.max(0, values.length - windowSize);
+  const relevantValues = values.slice(startIdx);
+
+  let weightedSumX = 0;
+  let weightedSumY = 0;
+  let weightSum = 0;
+
+  // Calculate weighted sum starting from most recent value
+  for (let i = relevantValues.length - 1; i >= 0; i--) {
+    const steps = relevantValues.length - 1 - i;
+    const weight = decayBase ** steps;
+
+    weightedSumX += relevantValues[i][0] * weight;
+    weightedSumY += relevantValues[i][1] * weight;
+    weightSum += weight;
+  }
+
+  return [weightedSumX / weightSum, weightedSumY / weightSum];
+};

package/src/point-simple.fs

@@ -0,0 +1,10 @@
+const FRAGMENT_SHADER = `precision highp float;
+
+varying vec4 color;
+
+void main() {
+  gl_FragColor = color;
+}
+`;
+
+export default FRAGMENT_SHADER;

package/src/point-update.fs

@@ -0,0 +1,21 @@
+const SHADER = `precision highp float;
+
+uniform sampler2D startStateTex;
+uniform sampler2D endStateTex;
+uniform float t;
+
+varying vec2 particleTextureIndex;
+
+void main() {
+  // Interpolate x, y, and value
+  vec3 start = texture2D(startStateTex, particleTextureIndex).xyw;
+  vec3 end = texture2D(endStateTex, particleTextureIndex).xyw;
+  vec3 curr = start * (1.0 - t) + end * t;
+
+  // The category cannot be interpolated
+  float endCategory = texture2D(endStateTex, particleTextureIndex).z;
+
+  gl_FragColor = vec4(curr.xy, endCategory, curr.z);
+}`;
+
+export default SHADER;

package/src/point-update.vs

@@ -0,0 +1,13 @@
+const SHADER = `precision highp float;
+
+attribute vec2 position;
+varying vec2 particleTextureIndex;
+
+void main() {
+  // map normalized device coords to texture coords
+  particleTextureIndex = 0.5 * (1.0 + position);
+
+  gl_Position = vec4(position, 0, 1);
+}`;
+
+export default SHADER;

package/src/point.fs

@@ -0,0 +1,22 @@
+const FRAGMENT_SHADER = `
+precision highp float;
+
+uniform float antiAliasing;
+
+varying vec4 color;
+varying float finalPointSize;
+
+float linearstep(float edge0, float edge1, float x) {
+  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
+}
+
+void main() {
+  vec2 c = gl_PointCoord * 2.0 - 1.0;
+  float sdf = length(c) * finalPointSize;
+  float alpha = linearstep(finalPointSize + antiAliasing, finalPointSize - antiAliasing, sdf);
+
+  gl_FragColor = vec4(color.rgb, alpha * color.a);
+}
+`;
+
+export default FRAGMENT_SHADER;

package/src/point.vs

@@ -0,0 +1,124 @@
+const createVertexShader = (globalState) => `
+precision highp float;
+
+uniform sampler2D colorTex;
+uniform float colorTexRes;
+uniform float colorTexEps;
+uniform sampler2D stateTex;
+uniform float stateTexRes;
+uniform float stateTexEps;
+uniform float devicePixelRatio;
+uniform sampler2D encodingTex;
+uniform float encodingTexRes;
+uniform float encodingTexEps;
+uniform float pointSizeExtra;
+uniform float pointOpacityMax;
+uniform float pointOpacityScale;
+uniform float numPoints;
+uniform float globalState;
+uniform float isColoredByZ;
+uniform float isColoredByW;
+uniform float isOpacityByZ;
+uniform float isOpacityByW;
+uniform float isOpacityByDensity;
+uniform float isSizedByZ;
+uniform float isSizedByW;
+uniform float isPixelAligned;
+uniform float colorMultiplicator;
+uniform float opacityMultiplicator;
+uniform float opacityDensity;
+uniform float sizeMultiplicator;
+uniform float numColorStates;
+uniform float pointScale;
+uniform float drawingBufferWidth;
+uniform float drawingBufferHeight;
+uniform mat4 modelViewProjection;
+
+attribute vec2 stateIndex;
+
+varying vec4 color;
+varying float finalPointSize;
+
+void main() {
+  vec4 state = texture2D(stateTex, stateIndex);
+
+  if (isPixelAligned < 0.5) {
+    gl_Position = modelViewProjection * vec4(state.x, state.y, 0.0, 1.0);
+  } else {
+    vec4 clipSpacePosition = modelViewProjection * vec4(state.x, state.y, 0.0, 1.0);
+    vec2 ndcPosition = clipSpacePosition.xy / clipSpacePosition.w;
+    vec2 pixelPos = 0.5 * (ndcPosition + 1.0) * vec2(drawingBufferWidth, drawingBufferHeight);
+    pixelPos = floor(pixelPos + 0.5); // Snap to nearest pixel
+    vec2 snappedPosition = (pixelPos / vec2(drawingBufferWidth, drawingBufferHeight)) * 2.0 - 1.0;
+    gl_Position = vec4(snappedPosition, 0.0, 1.0);
+  }
+
+
+  // Determine color index
+  float colorIndexZ =  isColoredByZ * floor(state.z * colorMultiplicator);
+  float colorIndexW =  isColoredByW * floor(state.w * colorMultiplicator);
+
+  // Multiply by the number of color states per color
+  // I.e., normal, active, hover, background, etc.
+  float colorIndex = (colorIndexZ + colorIndexW) * numColorStates;
+
+  // Half a "pixel" or "texel" in texture coordinates
+  float colorLinearIndex = colorIndex + globalState;
+
+  // Need to add cEps here to avoid floating point issue that can lead to
+  // dramatic changes in which color is loaded as floor(3/2.9999) = 1 but
+  // floor(3/3.0001) = 0!
+  float colorRowIndex = floor((colorLinearIndex + colorTexEps) / colorTexRes);
+
+  vec2 colorTexIndex = vec2(
+    (colorLinearIndex / colorTexRes) - colorRowIndex + colorTexEps,
+    colorRowIndex / colorTexRes + colorTexEps
+  );
+
+  color = texture2D(colorTex, colorTexIndex);
+
+  // Retrieve point size
+  float pointSizeIndexZ = isSizedByZ * floor(state.z * sizeMultiplicator);
+  float pointSizeIndexW = isSizedByW * floor(state.w * sizeMultiplicator);
+  float pointSizeIndex = pointSizeIndexZ + pointSizeIndexW;
+
+  float pointSizeRowIndex = floor((pointSizeIndex + encodingTexEps) / encodingTexRes);
+  vec2 pointSizeTexIndex = vec2(
+    (pointSizeIndex / encodingTexRes) - pointSizeRowIndex + encodingTexEps,
+    pointSizeRowIndex / encodingTexRes + encodingTexEps
+  );
+  float pointSize = texture2D(encodingTex, pointSizeTexIndex).x;
+
+  // Retrieve opacity
+  ${
+    (() => {
+      // Drawing the inner border of selected points
+      if (globalState === 3) return '';
+
+      // Draw points with opacity encoding or dynamic opacity
+      return `
+        if (isOpacityByDensity < 0.5) {
+          float opacityIndexZ = isOpacityByZ * floor(state.z * opacityMultiplicator);
+          float opacityIndexW = isOpacityByW * floor(state.w * opacityMultiplicator);
+          float opacityIndex = opacityIndexZ + opacityIndexW;
+
+          float opacityRowIndex = floor((opacityIndex + encodingTexEps) / encodingTexRes);
+          vec2 opacityTexIndex = vec2(
+            (opacityIndex / encodingTexRes) - opacityRowIndex + encodingTexEps,
+            opacityRowIndex / encodingTexRes + encodingTexEps
+          );
+          color.a = texture2D(encodingTex, opacityTexIndex)[${1 + globalState}];
+        } else {
+          color.a = min(1.0, opacityDensity + globalState);
+        }
+      `;
+    })()
+  }
+
+  color.a = min(pointOpacityMax, color.a) * pointOpacityScale;
+  finalPointSize = (pointSize * pointScale) + pointSizeExtra;
+  gl_PointSize = finalPointSize;
+}
+`;
+
+export default createVertexShader;

package/src/renderer.js

@@ -0,0 +1,252 @@
+import { CLEAR_OPTIONS, DEFAULT_GAMMA } from './constants.js';
+import { checkReglExtensions, createRegl } from './utils.js';
+
+export const createRenderer = (
+  /** @type {Partial<import('./types').RendererOptions>} */ options = {},
+) => {
+  let {
+    regl,
+    canvas = document.createElement('canvas'),
+    gamma = DEFAULT_GAMMA,
+  } = options;
+
+  let isDestroyed = false;
+
+  if (!regl) {
+    regl = createRegl(canvas);
+  }
+
+  const isSupportingAllGlExtensions = checkReglExtensions(regl);
+
+  const fboRes = [canvas.width, canvas.height];
+  const fbo = regl.framebuffer({
+    width: fboRes[0],
+    height: fboRes[1],
+    colorFormat: 'rgba',
+    colorType: 'float',
+  });
+
+  /**
+   * Render the float32 framebuffer to the internal canvas
+   *
+   * From https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds
+   */
+  const renderToCanvas = regl({
+    vert: `
+      precision highp float;
+      attribute vec2 xy;
+      void main () {
+        gl_Position = vec4(xy, 0, 1);
+      }`,
+    frag: `
+      precision highp float;
+      uniform vec2 srcRes;
+      uniform sampler2D src;
+      uniform float gamma;
+
+      vec3 approxLinearToSRGB (vec3 rgb, float gamma) {
+        return pow(clamp(rgb, vec3(0), vec3(1)), vec3(1.0 / gamma));
+      }
+
+      void main () {
+        vec4 color = texture2D(src, gl_FragCoord.xy / srcRes);
+        gl_FragColor = vec4(approxLinearToSRGB(color.rgb, gamma), color.a);
+      }`,
+    attributes: {
+      xy: [-4, -4, 4, -4, 0, 4],
+    },
+    uniforms: {
+      src: () => fbo,
+      srcRes: () => fboRes,
+      gamma: () => gamma,
+    },
+    count: 3,
+    depth: { enable: false },
+    blend: {
+      enable: true,
+      func: {
+        // biome-ignore lint/style/useNamingConvention: Regl internal
+        srcRGB: 'one',
+        srcAlpha: 'one',
+        // biome-ignore lint/style/useNamingConvention: Regl internal
+        dstRGB: 'one minus src alpha',
+        dstAlpha: 'one minus src alpha',
+      },
+    },
+  });
+
+  /**
+   * Copy the pixels from the internal canvas onto the target canvas
+   */
+  const copyTo = (targetCanvas) => {
+    const ctx = targetCanvas.getContext('2d');
+    ctx.clearRect(0, 0, targetCanvas.width, targetCanvas.height);
+    ctx.drawImage(
+      canvas,
+      (canvas.width - targetCanvas.width) / 2,
+      (canvas.height - targetCanvas.height) / 2,
+      targetCanvas.width,
+      targetCanvas.height,
+      0,
+      0,
+      targetCanvas.width,
+      targetCanvas.height,
+    );
+  };
+
+  /**
+   * The render function
+   */
+  const render = (
+    /** @type {(): void} */ draw,
+    /** @type {HTMLCanvasElement} */ targetCanvas,
+  ) => {
+    // Clear internal canvas
+    regl.clear(CLEAR_OPTIONS);
+    fbo.use(() => {
+      // Clear framebuffer
+      regl.clear(CLEAR_OPTIONS);
+      draw();
+    });
+    renderToCanvas();
+    copyTo(targetCanvas);
+  };
+
+  /**
+   * Update Regl's viewport, drawingBufferWidth, and drawingBufferHeight
+   *
+   * @description Call this method after the viewport has changed, e.g., width
+   * or height have been altered
+   */
+  const refresh = () => {
+    regl.poll();
+  };
+
+  const drawFns = new Set();
+
+  /**
+   * Register an draw function that is going to be invoked on every animation
+   * frame.
+   */
+  const onFrame = (/** @type {(): void} */ draw) => {
+    drawFns.add(draw);
+    return () => {
+      drawFns.delete(draw);
+    };
+  };
+
+  const frame = regl.frame(() => {
+    const iterator = drawFns.values();
+    let result = iterator.next();
+    while (!result.done) {
+      result.value(); // The draw function
+      result = iterator.next();
+    }
+  });
+
+  const resize = (
+    /** @type {number} */ customWidth,
+    /** @type {number} */ customHeight,
+  ) => {
+    // We need to limit the width and height by the screen size to prevent
+    // a bug in VSCode where the window height is said to be taller than the
+    // screen height. The problem with too large dimensions is that at some
+    // point WebGL will break down because there's an upper limit on how large
+    // any buffer and texture can be. It also harms the performance quite a bit.
+    //
+    // By restricting the widht/height to the screen size we should have a safe
+    // upper limit for the canvas size.
+    //
+    // @see
+    // https://github.com/microsoft/vscode/issues/225808
+    // https://github.com/flekschas/jupyter-scatter/issues/37
+    const width =
+      customWidth === undefined
+        ? Math.min(window.innerWidth, window.screen.availWidth)
+        : customWidth;
+    const height =
+      customHeight === undefined
+        ? Math.min(window.innerHeight, window.screen.availHeight)
+        : customHeight;
+    canvas.width = width * window.devicePixelRatio;
+    canvas.height = height * window.devicePixelRatio;
+    fboRes[0] = canvas.width;
+    fboRes[1] = canvas.height;
+    fbo.resize(...fboRes);
+  };
+
+  const resizeHandler = () => {
+    resize();
+  };
+
+  if (!options.canvas) {
+    window.addEventListener('resize', resizeHandler);
+    window.addEventListener('orientationchange', resizeHandler);
+    resize();
+  }
+
+  /**
+   * Destroy the renderer to free resources and cancel animation frames
+   */
+  const destroy = () => {
+    isDestroyed = true;
+    window.removeEventListener('resize', resizeHandler);
+    window.removeEventListener('orientationchange', resizeHandler);
+    frame.cancel();
+    canvas = undefined;
+    regl.destroy();
+    regl = undefined;
+  };
+
+  return {
+    /**
+     * Get the associated canvas element
+     * @return {HTMLCanvasElement} The associated canvas element
+     */
+    get canvas() {
+      return canvas;
+    },
+    /**
+     * Get the associated Regl instance
+     * @return {import('regl').Regl} The associated Regl instance
+     */
+    get regl() {
+      return regl;
+    },
+    /**
+     * Get the gamma value
+     * @return {number} The gamma value
+     */
+    get gamma() {
+      return gamma;
+    },
+    /**
+     * Set gamma to a new value
+     * @param {number} newGamma - The new gamma value
+     */
+    set gamma(newGamma) {
+      gamma = +newGamma;
+    },
+    /**
+     * Get whether the browser supports all necessary WebGL features
+     * @return {boolean} If `true` the browser supports all necessary WebGL features
+     */
+    get isSupported() {
+      return isSupportingAllGlExtensions;
+    },
+    /**
+     * Get whether the renderer (and its Regl instance) is destroyed
+     * @return {boolean} If `true` the renderer is destroyed
+     */
+    get isDestroyed() {
+      return isDestroyed;
+    },
+    render,
+    resize,
+    onFrame,
+    refresh,
+    destroy,
+  };
+};
+
+export default createRenderer;