gladly-plot 0.0.5 → 0.0.7

package/src/compute/scatter2dInterpolate.js

@@ -0,0 +1,277 @@
+import { registerComputedData, EXPRESSION_REF } from "./ComputationRegistry.js"
+import { ComputedData } from "../data/Computation.js"
+import { ArrayColumn, uploadToTexture, SAMPLE_COLUMN_GLSL } from "../data/ColumnData.js"
+
+function colDomain(col) {
+  if (col instanceof ArrayColumn) {
+    const arr = col.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]
+    }
+    return [min, max]
+  }
+  return col.domain ?? [0, 1]
+}
+
+function makeSplatPass(regl, W, H, pickIds, xTex, yTex, valueTex, xDomain, yDomain, radius) {
+  const accTex = regl.texture({ width: W, height: H, type: 'float', format: 'rgba' })
+  const accFBO = regl.framebuffer({ color: accTex, depth: false, stencil: false })
+  regl.clear({ color: [0, 0, 0, 0], framebuffer: accFBO })
+
+  const N = pickIds.length
+  const pointSize = radius * 2.0 + 1.0
+
+  const drawSplat = regl({
+    framebuffer: accFBO,
+    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_xTex, u_yTex, u_valueTex;
+uniform float u_xMin, u_xMax, u_yMin, u_yMax;
+${SAMPLE_COLUMN_GLSL}
+out float v_value;
+void main() {
+  float xVal  = sampleColumn(u_xTex,     a_pickId);
+  float yVal  = sampleColumn(u_yTex,     a_pickId);
+  v_value     = sampleColumn(u_valueTex, a_pickId);
+  float ndcX  = (xVal - u_xMin) / max(u_xMax - u_xMin, 1e-10) * 2.0 - 1.0;
+  float ndcY  = (yVal - u_yMin) / max(u_yMax - u_yMin, 1e-10) * 2.0 - 1.0;
+  gl_Position = vec4(ndcX, ndcY, 0.0, 1.0);
+  gl_PointSize = ${pointSize.toFixed(2)};
+}`,
+    frag: `#version 300 es
+precision highp float;
+in float v_value;
+out vec4 fragColor;
+void main() {
+  vec2  pc  = gl_PointCoord - 0.5;
+  float d   = length(pc) * ${pointSize.toFixed(2)};
+  if (d > ${radius.toFixed(2)}) discard;
+  float w   = exp(-0.5 * (d / ${radius.toFixed(2)}) * (d / ${radius.toFixed(2)}));
+  fragColor = vec4(v_value * w, 0.0, 0.0, w);
+}`,
+    attributes: { a_pickId: pickIds },
+    uniforms: {
+      u_xTex: xTex,
+      u_yTex: yTex,
+      u_valueTex: valueTex,
+      u_xMin: xDomain[0], u_xMax: xDomain[1],
+      u_yMin: yDomain[0], u_yMax: yDomain[1],
+    },
+    count: N,
+    primitive: 'points'
+  })
+
+  drawSplat()
+  return accTex
+}
+
+function makeValueTexture(regl, W, H, accum1, accum2, accum3, w1, w2, w3) {
+  const totalN  = W * H
+  const nTexels = Math.ceil(totalN / 4)
+  const outW    = Math.min(nTexels, regl.limits.maxTextureSize)
+  const outH    = Math.ceil(nTexels / outW)
+
+  const outTex = regl.texture({ width: outW, height: outH, type: 'float', format: 'rgba' })
+  const outFBO = regl.framebuffer({ color: outTex, depth: false, stencil: false })
+
+  regl({
+    framebuffer: outFBO,
+    vert: `#version 300 es
+precision highp float;
+in vec2 a_position;
+void main() { gl_Position = vec4(a_position, 0.0, 1.0); }`,
+    frag: `#version 300 es
+precision highp float;
+precision highp sampler2D;
+uniform sampler2D u_accum1, u_accum2, u_accum3;
+uniform float u_w1, u_w2, u_w3;
+out vec4 fragColor;
+
+float sampleInterp(sampler2D accum, int linearIdx) {
+  if (linearIdx >= ${totalN}) return 0.0;
+  int px = linearIdx % ${W};
+  int py = linearIdx / ${W};
+  vec4 a = texelFetch(accum, ivec2(px, py), 0);
+  if (a.a < 1e-6) return 0.0;
+  return a.r / a.a;
+}
+
+float combine(int idx) {
+  return u_w1 * sampleInterp(u_accum1, idx)
+       + u_w2 * sampleInterp(u_accum2, idx)
+       + u_w3 * sampleInterp(u_accum3, idx);
+}
+
+void main() {
+  int texelI = int(gl_FragCoord.y) * ${outW} + int(gl_FragCoord.x);
+  int base   = texelI * 4;
+  fragColor  = vec4(
+    combine(base + 0),
+    combine(base + 1),
+    combine(base + 2),
+    combine(base + 3)
+  );
+}`,
+    attributes: { a_position: [[-1, -1], [1, -1], [-1, 1], [1, 1]] },
+    uniforms: {
+      u_accum1: accum1,
+      u_accum2: accum2,
+      u_accum3: accum3,
+      u_w1: w1, u_w2: w2, u_w3: w3,
+    },
+    count: 4,
+    primitive: 'triangle strip'
+  })()
+
+  outTex._dataLength = totalN
+  outTex._dataShape  = [W, H]
+  return outTex
+}
+
+function makeCoordTexturesCorners(regl, xDomain, yDomain) {
+  // Four corners in row-major [2,2] order: index = iy*2 + ix
+  // (ix=0,iy=0)=xMin/yMin  (ix=1,iy=0)=xMax/yMin
+  // (ix=0,iy=1)=xMin/yMax  (ix=1,iy=1)=xMax/yMax
+  const xArr = new Float32Array([xDomain[0], xDomain[1], xDomain[0], xDomain[1]])
+  const yArr = new Float32Array([yDomain[0], yDomain[0], yDomain[1], yDomain[1]])
+  const xTex = uploadToTexture(regl, xArr)
+  const yTex = uploadToTexture(regl, yArr)
+  xTex._dataShape = [2, 2]
+  yTex._dataShape = [2, 2]
+  return { xTex, yTex }
+}
+
+function makeCoordTexturesFull(regl, W, H, xDomain, yDomain) {
+  const totalN  = W * H
+  const nTexels = Math.ceil(totalN / 4)
+  const outW    = Math.min(nTexels, regl.limits.maxTextureSize)
+  const outH    = Math.ceil(nTexels / outW)
+
+  const makeCoordTex = (axis) => {
+    const outTex = regl.texture({ width: outW, height: outH, type: 'float', format: 'rgba' })
+    const outFBO = regl.framebuffer({ color: outTex, depth: false, stencil: false })
+
+    regl({
+      framebuffer: outFBO,
+      vert: `#version 300 es
+precision highp float;
+in vec2 a_position;
+void main() { gl_Position = vec4(a_position, 0.0, 1.0); }`,
+      frag: `#version 300 es
+precision highp float;
+out vec4 fragColor;
+float coordAt(int linearIdx) {
+  if (linearIdx >= ${totalN}) return 0.0;
+  int px = linearIdx % ${W};
+  int py = linearIdx / ${W};
+  ${axis === 'x'
+    ? `return ${xDomain[0].toFixed(10)} + (float(px) + 0.5) / float(${W}) * float(${(xDomain[1] - xDomain[0]).toFixed(10)});`
+    : `return ${yDomain[0].toFixed(10)} + (float(py) + 0.5) / float(${H}) * float(${(yDomain[1] - yDomain[0]).toFixed(10)});`
+  }
+}
+void main() {
+  int texelI = int(gl_FragCoord.y) * ${outW} + int(gl_FragCoord.x);
+  int base   = texelI * 4;
+  fragColor  = vec4(
+    coordAt(base + 0),
+    coordAt(base + 1),
+    coordAt(base + 2),
+    coordAt(base + 3)
+  );
+}`,
+      attributes: { a_position: [[-1, -1], [1, -1], [-1, 1], [1, 1]] },
+      uniforms: {},
+      count: 4,
+      primitive: 'triangle strip'
+    })()
+
+    outTex._dataLength = totalN
+    outTex._dataShape  = [W, H]
+    return outTex
+  }
+
+  return { xTex: makeCoordTex('x'), yTex: makeCoordTex('y') }
+}
+
+class Scatter2dInterpolateData extends ComputedData {
+  columns() { return ['value', 'x', 'y'] }
+
+  compute(regl, params, data, getAxisDomain) {
+    const xCol    = data.getData(params.x)
+    const yCol    = data.getData(params.y)
+    const valCol  = data.getData(params.value)
+
+    const W = params.resolutionX | 0
+    const H = params.resolutionY | 0
+    const radius         = params.radius ?? 5.0
+    const w1             = params.w1 ?? 0.5
+    const w2             = params.w2 ?? 0.3
+    const w3             = params.w3 ?? 0.2
+    const fullCoordinates = params.full_coordinates ?? false
+
+    const N = xCol.length
+    const pickIds = new Float32Array(N)
+    for (let i = 0; i < N; i++) pickIds[i] = i
+
+    const xTex    = xCol.toTexture(regl)
+    const yTex    = yCol.toTexture(regl)
+    const valTex  = valCol.toTexture(regl)
+
+    const xDomain = colDomain(xCol)
+    const yDomain = colDomain(yCol)
+
+    const accum1 = makeSplatPass(regl, W, H, pickIds, xTex, yTex, valTex, xDomain, yDomain, radius)
+    const accum2 = makeSplatPass(regl, W, H, pickIds, xTex, yTex, valTex, xDomain, yDomain, radius * 2)
+    const accum3 = makeSplatPass(regl, W, H, pickIds, xTex, yTex, valTex, xDomain, yDomain, radius * 4)
+
+    const valueTex = makeValueTexture(regl, W, H, accum1, accum2, accum3, w1, w2, w3)
+
+    const coordShape = fullCoordinates ? [W, H] : [2, 2]
+    const { xTex: xOutTex, yTex: yOutTex } = fullCoordinates
+      ? makeCoordTexturesFull(regl, W, H, xDomain, yDomain)
+      : makeCoordTexturesCorners(regl, xDomain, yDomain)
+
+    const xQK  = (typeof params.x     === 'string' && data) ? (data.getQuantityKind(params.x)     ?? null) : null
+    const yQK  = (typeof params.y     === 'string' && data) ? (data.getQuantityKind(params.y)     ?? null) : null
+    const valQK = (typeof params.value === 'string' && data) ? (data.getQuantityKind(params.value) ?? null) : null
+
+    return {
+      value: valueTex,
+      x:     xOutTex,
+      y:     yOutTex,
+      _meta: {
+        domains:      { value: null, x: xDomain, y: yDomain },
+        quantityKinds: { value: valQK, x: xQK, y: yQK },
+        shapes:       { value: [W, H], x: coordShape, y: coordShape },
+      }
+    }
+  }
+
+  schema(data) {
+    const cols = data ? data.columns() : []
+    return {
+      type: 'object',
+      title: 'Scatter2dInterpolate',
+      properties: {
+        x:                { type: 'string', enum: cols },
+        y:                { type: 'string', enum: cols },
+        value:            { type: 'string', enum: cols },
+        resolutionX:      { type: 'integer', default: 256 },
+        resolutionY:      { type: 'integer', default: 256 },
+        radius:           { type: 'number',  default: 5.0 },
+        w1:               { type: 'number',  default: 0.5 },
+        w2:               { type: 'number',  default: 0.3 },
+        w3:               { type: 'number',  default: 0.2 },
+        full_coordinates: { type: 'boolean', default: false },
+      },
+      required: ['x', 'y', 'value', 'resolutionX', 'resolutionY']
+    }
+  }
+}
+
+registerComputedData('Scatter2dInterpolate', new Scatter2dInterpolateData())

package/src/compute/util.js

@@ -0,0 +1,196 @@
+import { registerTextureComputation, registerGlslComputation, EXPRESSION_REF } from "./ComputationRegistry.js"
+import { TextureComputation, GlslComputation } from "../data/Computation.js"
+import { GlslColumn } from "../data/ColumnData.js"
+
+// Shared helper: allocate an output texture + FBO and run a fullscreen quad.
+function runFullscreenQuad(regl, N, fragGlsl, uniforms = {}) {
+  const nTexels = Math.ceil(N / 4)
+  const w = Math.min(nTexels, regl.limits.maxTextureSize)
+  const h = Math.ceil(nTexels / w)
+  const outputTex = regl.texture({ width: w, height: h, type: 'float', format: 'rgba' })
+  const outputFBO = regl.framebuffer({ color: outputTex, depth: false, stencil: false })
+  regl({
+    framebuffer: outputFBO,
+    vert: `#version 300 es
+precision highp float;
+in vec2 a_position;
+void main() { gl_Position = vec4(a_position, 0.0, 1.0); }`,
+    frag: fragGlsl(w),
+    attributes: { a_position: [[-1, -1], [1, -1], [-1, 1], [1, 1]] },
+    uniforms,
+    count: 4,
+    primitive: 'triangle strip'
+  })()
+  outputTex._dataLength = N
+  return outputTex
+}
+
+// ─── linspace ─────────────────────────────────────────────────────────────────
+// Produces N values in ]0, 1[ : value[i] = (i + 0.5) / N  — fully on GPU.
+class LinspaceComputation extends TextureComputation {
+  compute(regl, inputs, _getAxisDomain) {
+    const N = inputs.length
+    return runFullscreenQuad(regl, N, w => `#version 300 es
+precision highp float;
+uniform int u_N;
+out vec4 fragColor;
+float linVal(int idx) { return (float(idx) + 0.5) / float(u_N); }
+void main() {
+  int texelI = int(gl_FragCoord.y) * ${w} + int(gl_FragCoord.x);
+  int base = texelI * 4;
+  fragColor = vec4(
+    base + 0 < u_N ? linVal(base + 0) : 0.0,
+    base + 1 < u_N ? linVal(base + 1) : 0.0,
+    base + 2 < u_N ? linVal(base + 2) : 0.0,
+    base + 3 < u_N ? linVal(base + 3) : 0.0
+  );
+}`, { u_N: N })
+  }
+
+  schema(_data) {
+    return {
+      type: 'object',
+      title: 'linspace',
+      properties: {
+        length: { type: 'integer', description: 'Number of values' }
+      },
+      required: ['length']
+    }
+  }
+}
+
+registerTextureComputation('linspace', new LinspaceComputation())
+
+// ─── range ────────────────────────────────────────────────────────────────────
+// Produces N integer values: 0, 1, 2, ..., N-1  — fully on GPU.
+class RangeComputation extends TextureComputation {
+  compute(regl, inputs, _getAxisDomain) {
+    const N = inputs.length
+    return runFullscreenQuad(regl, N, w => `#version 300 es
+precision highp float;
+uniform int u_N;
+out vec4 fragColor;
+void main() {
+  int texelI = int(gl_FragCoord.y) * ${w} + int(gl_FragCoord.x);
+  int base = texelI * 4;
+  fragColor = vec4(
+    base + 0 < u_N ? float(base + 0) : 0.0,
+    base + 1 < u_N ? float(base + 1) : 0.0,
+    base + 2 < u_N ? float(base + 2) : 0.0,
+    base + 3 < u_N ? float(base + 3) : 0.0
+  );
+}`, { u_N: N })
+  }
+
+  schema(_data) {
+    return {
+      type: 'object',
+      title: 'range',
+      properties: {
+        length: { type: 'integer', description: 'Number of values' }
+      },
+      required: ['length']
+    }
+  }
+}
+
+registerTextureComputation('range', new RangeComputation())
+
+// ─── glslExpr ─────────────────────────────────────────────────────────────────
+// A GlslComputation where the GLSL expression is a user-supplied string.
+// Named inputs are referenced in expr as {name} placeholders.
+//
+// Example:
+//   { glslExpr: { expr: "sin({x}) * {y}", inputs: { x: "col1", y: "col2" } } }
+class GlslExprComputation extends GlslComputation {
+  glsl(_resolvedExprs) { throw new Error('glslExpr: use createColumn, not glsl()') }
+
+  createColumn(inputs) {
+    const expr = inputs.expr       // raw string from user
+    const colInputs = inputs.inputs ?? {}
+    return new GlslColumn(colInputs, (resolvedExprs) => {
+      let result = expr
+      for (const [name, glslExpr] of Object.entries(resolvedExprs)) {
+        result = result.replaceAll(`{${name}}`, glslExpr)
+      }
+      return result
+    })
+  }
+
+  schema(data) {
+    return {
+      type: 'object',
+      title: 'glslExpr',
+      properties: {
+        expr: {
+          type: 'string',
+          description: 'GLSL expression; reference inputs as {name} placeholders'
+        },
+        inputs: {
+          type: 'object',
+          additionalProperties: EXPRESSION_REF,
+          description: 'Named input columns referenced in expr as {name}'
+        }
+      },
+      required: ['expr']
+    }
+  }
+}
+
+registerGlslComputation('glslExpr', new GlslExprComputation())
+
+// ─── random ───────────────────────────────────────────────────────────────────
+// Produces N pseudorandom values in ]0, 1[ derived from index ^ seed.
+// All computation is done on the GPU via a fullscreen quad render pass.
+// Hash: 3-round xorshift-multiply (good avalanche, no trig, GLSL ES 300).
+class RandomComputation extends TextureComputation {
+  compute(regl, inputs, _getAxisDomain) {
+    const N    = inputs.length
+    const seed = (inputs.seed || 0) === 0 ? (Math.random() * 0x7fffffff) | 0 : inputs.seed
+    return runFullscreenQuad(regl, N, w => `#version 300 es
+precision highp float;
+uniform int u_seed;
+uniform int u_N;
+out vec4 fragColor;
+
+uint uhash(uint x) {
+  x ^= x >> 17u;
+  x *= 0xbf324c81u;
+  x ^= x >> 11u;
+  x *= 0x68bc4b39u;
+  x ^= x >> 16u;
+  return x;
+}
+
+// Maps uint to ]0, 1[ : (bits + 0.5) / 2^24
+float randVal(int idx) {
+  uint h = uhash(uint(idx) ^ uint(u_seed));
+  return (float(h >> 8u) + 0.5) / 16777216.0;
+}
+
+void main() {
+  int texelI = int(gl_FragCoord.y) * ${w} + int(gl_FragCoord.x);
+  int base = texelI * 4;
+  fragColor = vec4(
+    base + 0 < u_N ? randVal(base + 0) : 0.0,
+    base + 1 < u_N ? randVal(base + 1) : 0.0,
+    base + 2 < u_N ? randVal(base + 2) : 0.0,
+    base + 3 < u_N ? randVal(base + 3) : 0.0
+  );
+}`, { u_seed: seed | 0, u_N: N })
+  }
+
+  schema(_data) {
+    return {
+      type: 'object',
+      title: 'random',
+      properties: {
+        length: { type: 'integer', description: 'Number of values' },
+        seed:   { type: 'integer', description: 'Integer seed (default 0)', default: 0 }
+      },
+      required: ['length']
+    }
+  }
+}
+
+registerTextureComputation('random', new RandomComputation())

package/src/core/ComputePipeline.js

@@ -0,0 +1,153 @@
+import { GlBase } from "./GlBase.js"
+import { FilterAxisRegistry } from "../axes/FilterAxisRegistry.js"
+import { DataGroup, normalizeData } from "../data/Data.js"
+import { ColumnData, ArrayColumn } from "../data/ColumnData.js"
+
+// Read a 4-packed RGBA float texture back to a flat Float32Array of length dataLength.
+function readTextureToArray(regl, texture) {
+  const dataLength = texture._dataLength ?? (texture.width * texture.height * 4)
+  const fbo = regl.framebuffer({ color: texture, depth: false })
+  let pixels
+  try {
+    regl({ framebuffer: fbo })(() => {
+      pixels = regl.read()
+    })
+  } finally {
+    fbo.destroy()
+  }
+  const arr = pixels instanceof Float32Array ? pixels : new Float32Array(pixels.buffer, pixels.byteOffset, pixels.byteLength / 4)
+  return arr.slice(0, dataLength)
+}
+
+// Wraps any ColumnData and adds getArray() for CPU readback.
+class ReadableColumn extends ColumnData {
+  constructor(col, regl) {
+    super()
+    this._col = col
+    this._regl = regl
+  }
+
+  get length()       { return this._col.length }
+  get domain()       { return this._col.domain }
+  get quantityKind() { return this._col.quantityKind }
+
+  resolve(path, regl) { return this._col.resolve(path, regl) }
+  toTexture(regl)     { return this._col.toTexture(regl) }
+  refresh(plot)       { return this._col.refresh(plot) }
+  withOffset(expr)    { return this._col.withOffset(expr) }
+
+  getArray() {
+    if (this._col instanceof ArrayColumn) return this._col.array
+    const tex = this._col.toTexture(this._regl)
+    return readTextureToArray(this._regl, tex)
+  }
+}
+
+// Output object returned by ComputePipeline.update().
+// Like DataGroup but getData() returns ReadableColumn with getArray(),
+// and getArrays() reads all columns to CPU at once.
+export class ComputeOutput {
+  constructor(dataGroup, regl) {
+    this._dataGroup = dataGroup
+    this._regl = regl
+  }
+
+  columns() {
+    return this._dataGroup.columns()
+  }
+
+  getData(col) {
+    const colData = this._dataGroup.getData(col)
+    if (!colData) return null
+    return new ReadableColumn(colData, this._regl)
+  }
+
+  getArrays() {
+    const result = {}
+    for (const col of this.columns()) {
+      const readable = this.getData(col)
+      if (readable) {
+        try {
+          result[col] = readable.getArray()
+        } catch (e) {
+          console.warn(`[gladly] ComputeOutput.getArrays(): failed to read column '${col}': ${e.message}`)
+        }
+      }
+    }
+    return result
+  }
+}
+
+// Headless GPU compute pipeline for running data transforms without any visual output.
+// Creates its own offscreen WebGL context; no DOM container needed.
+//
+// Usage:
+//   const pipeline = new ComputePipeline()
+//   const output = pipeline.update({ data, transforms, axes })
+//   const arr = output.getData('hist.counts').getArray()   // Float32Array
+//   const all = output.getArrays()                         // { 'hist.counts': Float32Array, ... }
+//   pipeline.destroy()
+export class ComputePipeline extends GlBase {
+  constructor() {
+    super()
+    const canvas = typeof OffscreenCanvas !== 'undefined'
+      ? new OffscreenCanvas(1, 1)
+      : document.createElement('canvas')
+    this._initRegl(canvas)
+    this.filterAxisRegistry = new FilterAxisRegistry()
+  }
+
+  // Runs the given transforms over data and returns a ComputeOutput.
+  //
+  // axes: { [quantityKind]: { min, max } } — sets filter axis ranges before computing.
+  // Transforms that access a filter axis will see the configured range.
+  async update({ data, transforms = [], axes = {} } = {}) {
+    const epoch = ++this._initEpoch
+
+    if (data !== undefined) {
+      this._rawData = normalizeData(data)
+    }
+
+    this._dataTransformNodes = []
+    this.filterAxisRegistry = new FilterAxisRegistry()
+
+    if (this._rawData != null) {
+      const fresh = new DataGroup({})
+      fresh._children = { ...this._rawData._children }
+      this.currentData = fresh
+    } else {
+      this.currentData = new DataGroup({})
+    }
+
+    // Run transforms; filter axes are registered and data extents set during this step.
+    // At this point filter ranges are all null (open bounds).
+    await this._processTransforms(transforms, epoch)
+    if (this._initEpoch !== epoch) return new ComputeOutput(this.currentData, this.regl)
+
+    // Apply axes config to set filter ranges on any registered filter axis.
+    for (const [axisId, axisConfig] of Object.entries(axes)) {
+      if (this.filterAxisRegistry.hasAxis(axisId)) {
+        this.filterAxisRegistry.setRange(
+          axisId,
+          axisConfig.min !== undefined ? axisConfig.min : null,
+          axisConfig.max !== undefined ? axisConfig.max : null
+        )
+      }
+    }
+
+    // Refresh transforms whose output depends on any filter axis that now has a range set.
+    for (const node of this._dataTransformNodes) {
+      await node.refreshIfNeeded(this)
+      if (this._initEpoch !== epoch) return new ComputeOutput(this.currentData, this.regl)
+    }
+
+    return new ComputeOutput(this.currentData, this.regl)
+  }
+
+  destroy() {
+    if (this.regl) {
+      this.regl.destroy()
+      this.regl = null
+    }
+  }
+}