gladly-plot 0.0.5 → 0.0.6

package/src/compute/hist.js

@@ -1,173 +1,143 @@
-import { registerTextureComputation, TextureComputation, EXPRESSION_REF } from "./ComputationRegistry.js"
-
-/**
- * Auto-select number of histogram bins using Scott's rule.
- * For large datasets, uses a random subset to estimate std for speed.
- * @param {Float32Array | Array} data - input array
- * @param {Object} options
- *   - sampleCutoff: max points to use for std estimation (default 50000)
- * @returns {number} - suggested number of bins
- */
-function autoBinsScott(data, options = {}) {
-  const N = data.length;
-  const sampleCutoff = options.sampleCutoff || 50000;
-
-  let sampleData;
+import { registerTextureComputation, registerComputedData, EXPRESSION_REF, EXPRESSION_REF_OPT } from "./ComputationRegistry.js"
+import { TextureComputation, ComputedData } from "../data/Computation.js"
+import { ArrayColumn, uploadToTexture, SAMPLE_COLUMN_GLSL } from "../data/ColumnData.js"
 
+function autoBinsScott(data, options = {}) {
+  const N = data.length
+  const sampleCutoff = options.sampleCutoff || 50000
+  let sampleData
   if (N > sampleCutoff) {
-    // Randomly sample sampleCutoff points
-    sampleData = new Float32Array(sampleCutoff);
+    sampleData = new Float32Array(sampleCutoff)
     for (let i = 0; i < sampleCutoff; i++) {
-      const idx = Math.floor(Math.random() * N);
-      sampleData[i] = data[idx];
+      sampleData[i] = data[Math.floor(Math.random() * N)]
     }
   } else {
-    sampleData = data;
+    sampleData = data
   }
-
-  const n = sampleData.length;
-
-  // Compute mean
-  const mean = sampleData.reduce((a, b) => a + b, 0) / n;
-
-  // Compute standard deviation
-  let std;
+  const n = sampleData.length
+  const mean = sampleData.reduce((a, b) => a + b, 0) / n
+  let std
   if (N <= sampleCutoff) {
-    // small dataset: population std
-    const variance = sampleData.reduce((a, b) => a + (b - mean) ** 2, 0) / n;
-    std = Math.sqrt(variance);
+    std = Math.sqrt(sampleData.reduce((a, b) => a + (b - mean) ** 2, 0) / n)
   } else {
-    // large dataset: sample std
-    const variance = sampleData.reduce((a, b) => a + (b - mean) ** 2, 0) / (n - 1);
-    std = Math.sqrt(variance);
+    std = Math.sqrt(sampleData.reduce((a, b) => a + (b - mean) ** 2, 0) / (n - 1))
   }
-
-  // Compute bin width
-  const binWidth = 3.5 * std / Math.cbrt(N);
-
-  // Determine number of bins
-  let min = data[0], max = data[0];
+  const binWidth = 3.5 * std / Math.cbrt(N)
+  let min = data[0], max = data[0]
   for (let i = 1; i < data.length; i++) {
-    if (data[i] < min) min = data[i];
-    if (data[i] > max) max = data[i];
+    if (data[i] < min) min = data[i]
+    if (data[i] > max) max = data[i]
   }
-  const bins = Math.max(1, Math.ceil((max - min) / binWidth));
-
-  return bins;
+  return Math.max(1, Math.ceil((max - min) / binWidth))
 }
 
-/**
- * Automatically determine number of bins using Freedman–Diaconis or Sturges
- * @param {Float32Array} data - input array
- * @param {Object} options
- *   - maxBins: maximum bins allowed (GPU-friendly)
- * @returns {number} - number of bins
- */
 function autoBins(data, options = {}) {
-  const N = data.length;
-  const maxBins = options.maxBins || 2048;
-
-  if (N < 30) {
-    // Small dataset → use Sturges
-    return Math.min(Math.ceil(Math.log2(N) + 1), maxBins);
-  }
-
+  const N = data.length
+  const maxBins = options.maxBins || 2048
+  if (N < 30) return Math.min(Math.ceil(Math.log2(N) + 1), maxBins)
   return autoBinsScott(data, options)
 }
 
-/**
- * Create a histogram texture from CPU array or GPU texture.
- * @param {regl} regl - regl context
- * @param {Float32Array | Texture} input - CPU array in [0,1] or GPU texture
- * @param {Object} options
- *   - bins: number of bins (optional, overrides auto)
- *   - useGPU: force GPU histogram
- *   - maxBins: max number of bins for auto calculation
- * @returns {Texture} - histogram texture
- */
-export default function makeHistogram(regl, input, options = {}) {
-  let bins = options.bins;
-  const useGPU = options.useGPU || false;
-
-  // Auto bins if not provided and input is CPU array
-  if (!bins && input instanceof Float32Array) {
-    bins = autoBins(input, { maxBins: options.maxBins || 2048 });
-  } else if (!bins) {
-    bins = options.maxBins || 1024; // default for GPU textures
-  }
+// Build a histogram texture from a column texture (4 values per texel).
+// Assumes input values are already normalized to [0, 1].
+// Returns a 4-packed texture: bins values packed 4 per texel.
+export default function makeHistogram(regl, inputTex, options = {}) {
+  const N = inputTex._dataLength ?? inputTex.width * inputTex.height * 4
+  const bins = options.bins || 1024
 
-  // Allocate histogram texture and framebuffer
-  const histTex = regl.texture({
-    width: bins,
-    height: 1,
-    type: 'float',
-    format: 'rgba'
-  });
-  const histFBO = regl.framebuffer({ color: histTex });
-
-  // Clear histogram
-  regl.clear({ color: [0, 0, 0, 0], framebuffer: histFBO });
-
-  if (input instanceof Float32Array && !useGPU) {
-    // CPU histogram — pack counts into the R channel of each RGBA texel
-    const histData = new Float32Array(bins);
-    const N = input.length;
-    for (let i = 0; i < N; i++) {
-      const b = Math.floor(input[i] * bins);
-      histData[Math.min(b, bins - 1)] += 1;
-    }
-    // RGBA format: 4 floats per texel. Store count in R, leave G/B/A as 0.
-    const packedData = new Float32Array(bins * 4);
-    for (let i = 0; i < bins; i++) packedData[i * 4] = histData[i];
-    histTex.subimage({ data: packedData, width: bins, height: 1 });
+  const nTexels = Math.ceil(bins / 4)
+  const wTexels = Math.min(nTexels, regl.limits.maxTextureSize)
+  const hTexels = Math.ceil(nTexels / wTexels)
 
-  } else {
-    // GPU histogram
-    const dataTex = (input instanceof Float32Array)
-      ? regl.texture({ data: input, shape: [input.length, 1], type: 'float' })
-      : input;
-
-    const N = (input instanceof Float32Array) ? input.length : dataTex.width;
-
-    const drawPoints = regl({
-      framebuffer: histFBO,
-      blend: { enable: true, func: { src: 'one', dst: 'one' } },
-      vert: `
-        precision highp float;
-        attribute float value;
-        void main() {
-          float x = (floor(value * ${bins}.0) + 0.5)/${bins}.0*2.0 - 1.0;
-          gl_Position = vec4(x, 0.0, 0.0, 1.0);
-          gl_PointSize = 1.0;
-        }
-      `,
-      frag: `
-        precision highp float;
-        out vec4 fragColor;
-        void main() { fragColor = vec4(1.0, 0.0, 0.0, 1.0); }
-      `,
-      attributes: {
-        value: () => (input instanceof Float32Array)
-          ? input
-          : Array.from({ length: N }, (_, i) => i / (N - 1))
-      },
-      count: N,
-      primitive: 'points'
-    });
+  const histTex = regl.texture({ width: wTexels, height: hTexels, type: 'float', format: 'rgba' })
+  const histFBO = regl.framebuffer({ color: histTex, depth: false, stencil: false })
+  regl.clear({ color: [0, 0, 0, 0], framebuffer: histFBO })
 
-    drawPoints();
-  }
+  const pickIds = new Float32Array(N)
+  for (let i = 0; i < N; i++) pickIds[i] = i
 
-  return histTex;
+  const drawPoints = regl({
+    framebuffer: histFBO,
+    blend: { enable: true, func: { src: 'one', dst: 'one' } },
+    vert: `#version 300 es
+precision highp float;
+precision highp sampler2D;
+in float a_pickId;
+uniform sampler2D u_inputTex;
+${SAMPLE_COLUMN_GLSL}
+out float v_chan;
+void main() {
+  float value = sampleColumn(u_inputTex, a_pickId);
+  int b = int(clamp(floor(value * float(${bins})), 0.0, float(${bins - 1})));
+  int texelI = b / 4;
+  int chan = b % 4;
+  float tx = (float(texelI % ${wTexels}) + 0.5) / float(${wTexels}) * 2.0 - 1.0;
+  float ty = (float(texelI / ${wTexels}) + 0.5) / float(${hTexels}) * 2.0 - 1.0;
+  gl_Position = vec4(tx, ty, 0.0, 1.0);
+  gl_PointSize = 1.0;
+  v_chan = float(chan);
+}`,
+    frag: `#version 300 es
+precision highp float;
+in float v_chan;
+out vec4 fragColor;
+void main() {
+  int c = int(v_chan + 0.5);
+  fragColor = vec4(float(c == 0), float(c == 1), float(c == 2), float(c == 3));
+}`,
+    attributes: { a_pickId: pickIds },
+    uniforms: { u_inputTex: inputTex },
+    count: N,
+    primitive: 'points'
+  })
+
+  drawPoints()
+  histTex._dataLength = bins
+  return histTex
 }
 
+const TDR_STEP_MS = 500
+
+// ─── HistogramComputation (TextureComputation — inline expression usage) ──────
 class HistogramComputation extends TextureComputation {
-  compute(regl, params) {
-    return makeHistogram(regl, params.input, { bins: params.bins })
+  async compute(regl, inputs, getAxisDomain) {
+    const inputCol = inputs.input  // ColumnData
+
+    let bins = inputs.bins
+    if (!bins && inputCol instanceof ArrayColumn) {
+      bins = autoBins(inputCol.array, { maxBins: inputs.maxBins || 2048 })
+    } else if (!bins) {
+      bins = inputs.maxBins || 1024
+    }
+
+    // Normalize to [0,1] for GPU histogram (CPU work)
+    let normalizedTex
+    const t0 = performance.now()
+    if (inputCol instanceof ArrayColumn) {
+      const arr = inputCol.array
+      let min = arr[0], max = arr[0]
+      for (let i = 1; i < arr.length; i++) {
+        if (arr[i] < min) min = arr[i]
+        if (arr[i] > max) max = arr[i]
+      }
+      const range = max - min || 1
+      const normalized = new Float32Array(arr.length)
+      for (let i = 0; i < arr.length; i++) normalized[i] = (arr[i] - min) / range
+      normalizedTex = uploadToTexture(regl, normalized)
+    } else {
+      // Already a GPU texture — assume values are in [0,1]
+      normalizedTex = inputCol.toTexture(regl)
+    }
+    if (performance.now() - t0 > TDR_STEP_MS)
+      await new Promise(r => requestAnimationFrame(r))
+
+    return makeHistogram(regl, normalizedTex, { bins })
   }
+
   schema(data) {
     return {
       type: 'object',
+      title: 'histogram',
       properties: {
         input: EXPRESSION_REF,
         bins: { type: 'number' }
@@ -178,3 +148,138 @@ class HistogramComputation extends TextureComputation {
 }
 
 registerTextureComputation('histogram', new HistogramComputation())
+
+// ─── HistogramData (ComputedData — top-level transform) ───────────────────────
+class HistogramData extends ComputedData {
+  columns() { return ['binCenters', 'counts'] }
+
+  filterAxes(params, data) {
+    if (!params.filter) return {}
+    const qk = data ? (data.getQuantityKind(params.filter) ?? params.filter) : params.filter
+    return { filter: qk }
+  }
+
+  async compute(regl, params, data, getAxisDomain) {
+    const srcCol = data.getData(params.input)
+    if (!(srcCol instanceof ArrayColumn)) {
+      throw new Error(`HistogramData: input '${params.input}' must be a plain data column`)
+    }
+    const srcV = srcCol.array
+
+    let min = Infinity, max = -Infinity
+    for (let i = 0; i < srcV.length; i++) {
+      if (srcV[i] < min) min = srcV[i]
+      if (srcV[i] > max) max = srcV[i]
+    }
+    const range = max - min || 1
+
+    const bins = params.bins || Math.max(10, Math.min(200, Math.ceil(Math.sqrt(srcV.length))))
+    const binWidth = range / bins
+
+    // Normalize full input to [0,1] for bin assignment.
+    const normalized = new Float32Array(srcV.length)
+    for (let i = 0; i < srcV.length; i++) normalized[i] = (srcV[i] - min) / range
+
+    // Build optional filter mask and track filter axis for axis-reactivity.
+    let filterMask = null
+    const filterDataExtents = {}
+    if (params.filter) {
+      const filterCol = data.getData(params.filter)
+      if (!(filterCol instanceof ArrayColumn)) {
+        throw new Error(`HistogramData: filter '${params.filter}' must be a plain data column`)
+      }
+      const filterArr = filterCol.array
+      const filterQK = data.getQuantityKind(params.filter) ?? params.filter
+
+      let fMin = filterArr[0], fMax = filterArr[0]
+      for (let i = 1; i < filterArr.length; i++) {
+        if (filterArr[i] < fMin) fMin = filterArr[i]
+        if (filterArr[i] > fMax) fMax = filterArr[i]
+      }
+      filterDataExtents[filterQK] = [fMin, fMax]
+
+      // Calling getAxisDomain registers the filter axis as an accessed axis so the
+      // ComputedDataNode recomputes whenever the filter range changes.
+      const domain = getAxisDomain(filterQK)
+      const fRangeMin = domain?.[0] ?? null
+      const fRangeMax = domain?.[1] ?? null
+
+      if (fRangeMin !== null || fRangeMax !== null) {
+        filterMask = new Uint8Array(srcV.length)
+        for (let i = 0; i < filterArr.length; i++) {
+          if (fRangeMin !== null && filterArr[i] < fRangeMin) continue
+          if (fRangeMax !== null && filterArr[i] > fRangeMax) continue
+          filterMask[i] = 1
+        }
+      }
+    }
+
+    // Bin centers always span the full input range so bars don't shift when filtering.
+    const nTexels = Math.ceil(bins / 4)
+    const centersW = Math.min(nTexels, regl.limits.maxTextureSize)
+    const centersH = Math.ceil(nTexels / centersW)
+    const centersData = new Float32Array(centersW * centersH * 4)
+    for (let i = 0; i < bins; i++) centersData[i] = min + (i + 0.5) * binWidth
+    const binCentersTex = regl.texture({ data: centersData, shape: [centersW, centersH], type: 'float', format: 'rgba' })
+    binCentersTex._dataLength = bins
+
+    // Build histogram from filtered (or full) normalized values.
+    let countInput = normalized
+    if (filterMask) {
+      const filtered = []
+      for (let i = 0; i < srcV.length; i++) {
+        if (filterMask[i]) filtered.push(normalized[i])
+      }
+      countInput = new Float32Array(filtered)
+    }
+    const uploadStart = performance.now()
+    const normalizedTex = uploadToTexture(regl, countInput)
+    if (performance.now() - uploadStart > TDR_STEP_MS)
+      await new Promise(r => requestAnimationFrame(r))
+    const countsTex = makeHistogram(regl, normalizedTex, { bins })
+    countsTex._dataLength = bins
+
+    const histCpu = new Float32Array(bins)
+    for (let i = 0; i < countInput.length; i++) {
+      histCpu[Math.min(Math.floor(countInput[i] * bins), bins - 1)] += 1
+    }
+    const maxCount = Math.max(...histCpu, 0)
+
+    const xQK = (typeof params.input === 'string' && data)
+      ? (data.getQuantityKind(params.input) ?? params.input)
+      : null
+
+    return {
+      binCenters: binCentersTex,
+      counts: countsTex,
+      _meta: {
+        domains: {
+          binCenters: [min, max],
+          counts: [0, maxCount],
+        },
+        quantityKinds: {
+          binCenters: xQK,
+          counts: 'count',
+        },
+        binHalfWidth: binWidth / 2,
+        filterDataExtents,
+      }
+    }
+  }
+
+  schema(data) {
+    const cols = data ? data.columns() : []
+    return {
+      type: 'object',
+      title: 'HistogramData',
+      properties: {
+        input: { type: 'string', enum: cols, description: 'Input data column' },
+        bins: { type: 'integer', description: 'Number of bins (0 for auto)', default: 0 },
+        filter: { ...EXPRESSION_REF_OPT, description: 'Filter column — registers a filter axis (null for none)' }
+      },
+      required: ['input', 'filter']
+    }
+  }
+}
+
+registerComputedData('HistogramData', new HistogramData())

package/src/compute/kde.js

@@ -1,71 +1,76 @@
-import { registerTextureComputation, TextureComputation, EXPRESSION_REF } from "./ComputationRegistry.js"
+import { registerTextureComputation, EXPRESSION_REF, resolveQuantityKind } from "./ComputationRegistry.js"
+import { TextureComputation } from "../data/Computation.js"
+import { SAMPLE_COLUMN_GLSL } from "../data/ColumnData.js"
 
 /**
  * Smooth a histogram to produce a KDE texture
  * @param {regl} regl - regl context
- * @param {Float32Array | Texture} histInput - histogram data
+ * @param {Texture} histTex - 4-packed histogram texture (_dataLength = bins)
  * @param {Object} options
  *   - bandwidth: Gaussian sigma in bins (default 5)
- *   - bins: output bins (default same as input)
- * @returns {Texture} - smoothed KDE texture
+ *   - bins: output bins (default same as input via _dataLength)
+ * @returns {Texture} - smoothed KDE texture (4-packed, _dataLength = bins)
  */
-export default function smoothKDE(regl, histInput, options = {}) {
-  const bins = options.bins || (histInput instanceof Float32Array ? histInput.length : histInput.width);
-  const bandwidth = options.bandwidth || 5.0;
+export default function smoothKDE(regl, histTex, options = {}) {
+  const bins = options.bins || histTex._dataLength || histTex.width * 4
+  const bandwidth = options.bandwidth || 5.0
 
-  const histTex = (histInput instanceof Float32Array)
-    ? regl.texture({ data: histInput, shape: [bins, 1], type: 'float' })
-    : histInput;
+  const nTexels = Math.ceil(bins / 4)
+  const wTexels = Math.min(nTexels, regl.limits.maxTextureSize)
+  const hTexels = Math.ceil(nTexels / wTexels)
 
-  const kdeTex = regl.texture({ width: bins, height: 1, type: 'float', format: 'rgba' });
-  const kdeFBO = regl.framebuffer({ color: kdeTex });
+  const kdeTex = regl.texture({ width: wTexels, height: hTexels, type: 'float', format: 'rgba' })
+  const kdeFBO = regl.framebuffer({ color: kdeTex, depth: false, stencil: false })
 
-  const kernelRadius = Math.ceil(bandwidth * 3);
-  const kernelSize = kernelRadius * 2 + 1;
-  const kernel = new Float32Array(kernelSize);
-  let sum = 0;
+  const kernelRadius = Math.ceil(bandwidth * 3)
+  const kernelSize = kernelRadius * 2 + 1
+  const kernel = new Float32Array(kernelSize)
+  let sum = 0
   for (let i = -kernelRadius; i <= kernelRadius; i++) {
-    const w = Math.exp(-0.5 * (i / bandwidth) ** 2);
-    kernel[i + kernelRadius] = w;
-    sum += w;
+    const w = Math.exp(-0.5 * (i / bandwidth) ** 2)
+    kernel[i + kernelRadius] = w
+    sum += w
   }
-  for (let i = 0; i < kernel.length; i++) kernel[i] /= sum;
+  for (let i = 0; i < kernel.length; i++) kernel[i] /= sum
 
-  const kernelTex = regl.texture({ data: kernel, shape: [kernelSize, 1], type: 'float' });
+  // Kernel texture stays R-channel (internal, not exposed via sampleColumn)
+  const kernelData = new Float32Array(kernelSize * 4)
+  for (let i = 0; i < kernelSize; i++) kernelData[i * 4] = kernel[i]
+  const kernelTex = regl.texture({ data: kernelData, shape: [kernelSize, 1], type: 'float', format: 'rgba' })
 
   const drawKDE = regl({
     framebuffer: kdeFBO,
-    vert: `
+    vert: `#version 300 es
       precision highp float;
-      attribute float bin;
-      void main() {
-        float x = (bin + 0.5)/${bins}.0*2.0 - 1.0;
-        gl_Position = vec4(x, 0.0, 0.0, 1.0);
-      }
+      in vec2 position;
+      void main() { gl_Position = vec4(position, 0.0, 1.0); }
     `,
-    frag: `
-      #version 300 es
+    frag: `#version 300 es
       precision highp float;
+      precision highp sampler2D;
       uniform sampler2D histTex;
       uniform sampler2D kernelTex;
       uniform int kernelRadius;
       uniform int bins;
       out vec4 fragColor;
+      ${SAMPLE_COLUMN_GLSL}
       void main() {
-        float idx = gl_FragCoord.x - 0.5;
-        float sum = 0.0;
-        for (int i=-16; i<=16; i++) {
-          if (i+16 >= kernelRadius*2+1) break;
-          int sampleIdx = int(clamp(idx + float(i), 0.0, float(bins-1)));
-          float h = texelFetch(histTex, ivec2(sampleIdx,0),0).r;
-          float w = texelFetch(kernelTex, ivec2(i+kernelRadius,0),0).r;
-          sum += h * w;
+        int texelI = int(gl_FragCoord.y) * ${wTexels} + int(gl_FragCoord.x);
+        int base = texelI * 4;
+        float s0 = 0.0, s1 = 0.0, s2 = 0.0, s3 = 0.0;
+        for (int i = -16; i <= 16; i++) {
+          if (i + 16 >= kernelRadius * 2 + 1) break;
+          float kw = texelFetch(kernelTex, ivec2(i + kernelRadius, 0), 0).r;
+          s0 += sampleColumn(histTex, float(clamp(base + 0 + i, 0, bins - 1))) * kw;
+          s1 += sampleColumn(histTex, float(clamp(base + 1 + i, 0, bins - 1))) * kw;
+          s2 += sampleColumn(histTex, float(clamp(base + 2 + i, 0, bins - 1))) * kw;
+          s3 += sampleColumn(histTex, float(clamp(base + 3 + i, 0, bins - 1))) * kw;
         }
-        fragColor = vec4(sum, 0.0, 0.0, 1.0);
+        fragColor = vec4(s0, s1, s2, s3);
       }
     `,
     attributes: {
-      bin: Array.from({ length: bins }, (_, i) => i)
+      position: [[-1, -1], [1, -1], [-1, 1], [1, 1]]
     },
     uniforms: {
       histTex,
@@ -73,22 +78,35 @@ export default function smoothKDE(regl, histInput, options = {}) {
       kernelRadius,
       bins
     },
-    count: bins,
-    primitive: 'points'
-  });
+    count: 4,
+    primitive: 'triangle strip'
+  })
 
-  drawKDE();
+  drawKDE()
 
-  return kdeTex;
+  kdeTex._dataLength = bins
+  return kdeTex
 }
 
+const TDR_STEP_MS = 500
+
 class KdeComputation extends TextureComputation {
-  compute(regl, params) {
-    return smoothKDE(regl, params.input, { bins: params.bins, bandwidth: params.bandwidth })
+  async compute(regl, inputs, getAxisDomain) {
+    const t0 = performance.now()
+    const inputTex = inputs.input.toTexture(regl)
+    if (performance.now() - t0 > TDR_STEP_MS)
+      await new Promise(r => requestAnimationFrame(r))
+    return smoothKDE(regl, inputTex, { bins: inputs.bins, bandwidth: inputs.bandwidth })
   }
+
+  getQuantityKind(params, data) {
+    return resolveQuantityKind(params.input, data)
+  }
+
   schema(data) {
     return {
       type: 'object',
+      title: 'kde',
       properties: {
         input: EXPRESSION_REF,
         bins: { type: 'number' },