gladly-plot 0.0.5 → 0.0.6

package/src/core/PlotGroup.js

@@ -0,0 +1,204 @@
+import { AXES } from "../axes/AxisRegistry.js"
+import { linkAxes } from "../axes/AxisLink.js"
+import { normalizeData } from "../data/Data.js"
+
+/**
+ * Coordinates a set of named Plot instances.
+ *
+ * - update({ data, plots }) normalizes data once so all plots share the same
+ *   DataGroup, and updates all plots before re-establishing any auto-links,
+ *   so intermediate QK mismatches never reach linkAxes().
+ *
+ * - When autoLink is true, all axes across all plots that share the same
+ *   quantity kind are automatically linked. Axes that no longer share a QK
+ *   after an update are simply unlinked rather than throwing.
+ *
+ * - When autoLink is false, manual links created via linkAxes() on axes
+ *   belonging to plots in the group survive PlotGroup.update() calls
+ *   unchanged (Axis instances are stable across plot updates).
+ */
+export class PlotGroup {
+  constructor(plots = {}, { autoLink = false } = {}) {
+    this._plots = new Map()
+    this._autoLink = autoLink
+    // key → { unlink, plotA, plotB }
+    this._links = new Map()
+
+    for (const [name, plot] of Object.entries(plots)) {
+      this._plots.set(name, plot)
+    }
+
+    if (autoLink) this._updateAutoLinks()
+  }
+
+  /** Add a named plot to the group. Re-runs auto-linking if enabled. */
+  add(name, plot) {
+    this._plots.set(name, plot)
+    if (this._autoLink) this._updateAutoLinks()
+  }
+
+  /** Remove a named plot from the group, tearing down any links involving it. */
+  remove(name) {
+    if (!this._plots.has(name)) return
+    this._removeLinksForPlot(name)
+    this._plots.delete(name)
+  }
+
+  /**
+   * Update plots in the group.
+   *
+   * @param {object} options
+   * @param {*}      [options.data]   - Raw data passed to all plots (normalized once).
+   * @param {object} [options.plots]  - Map of { plotName: plotConfig } to update individually.
+   */
+  async update({ data, plots } = {}) {
+    // Normalize data once so every plot receives the same DataGroup instance.
+    const normalizedData = data !== undefined ? normalizeData(data) : undefined
+
+    // Drop auto-links before updating any plot so intermediate states (one plot
+    // updated, the other not yet) don't trigger false QK mismatch errors.
+    if (this._autoLink) {
+      for (const entry of this._links.values()) entry.unlink()
+      this._links.clear()
+    }
+
+    // Collect which plots will actually be updated, and snapshot their state
+    // so we can roll all of them back atomically if validation fails.
+    const toUpdate = []
+    for (const [name, plot] of this._plots) {
+      const plotConfig = plots?.[name]
+      if (normalizedData === undefined && plotConfig === undefined) continue
+      toUpdate.push({ name, plot, prevConfig: plot.currentConfig, prevRawData: plot._rawData })
+    }
+
+    try {
+      // Phase 1: apply all updates (no link validation yet).
+      for (const { name, plot } of toUpdate) {
+        const arg = {}
+        if (normalizedData !== undefined) arg.data = normalizedData
+        if (plots?.[name] !== undefined) arg.config = plots[name]
+        await plot._applyUpdate(arg)
+      }
+
+      // Phase 2: validate links across every plot now that all QKs are final.
+      for (const [, plot] of this._plots) plot._validateLinks()
+
+      // Phase 3: reconcile auto-links with the new QKs in place.
+      if (this._autoLink) this._updateAutoLinks()
+
+    } catch (error) {
+      // Roll back every plot that was updated.
+      for (const { plot, prevConfig, prevRawData } of toUpdate) {
+        plot.currentConfig = prevConfig
+        plot._rawData = prevRawData
+        try { await plot._applyUpdate({}) } catch (e) {
+          console.error('[gladly] PlotGroup: error during rollback re-render:', e)
+        }
+      }
+      // Restore auto-links to match the rolled-back state.
+      if (this._autoLink) this._updateAutoLinks()
+      throw error
+    }
+  }
+
+  /** Tear down all auto-managed links. Does not destroy the plots themselves. */
+  destroy() {
+    for (const entry of this._links.values()) entry.unlink()
+    this._links.clear()
+  }
+
+  // ─── Internal ─────────────────────────────────────────────────────────────
+
+  _updateAutoLinks() {
+    // Collect all axes grouped by quantity kind across all plots.
+    // Spatial, color, and filter axes are all handled uniformly:
+    // plot._getAxis(id) returns a stable Axis instance for any id.
+    const qkAxes = new Map() // QK → [{ plotName, axisId }]
+
+    for (const [plotName, plot] of this._plots) {
+      // Spatial axes
+      if (plot.axisRegistry) {
+        for (const axisId of AXES) {
+          const qk = plot.getAxisQuantityKind(axisId)
+          if (!qk) continue
+          _push(qkAxes, qk, { plotName, axisId })
+        }
+      }
+
+      // Color axes (axisId === quantityKind for non-spatial axes)
+      if (plot.colorAxisRegistry) {
+        for (const qk of plot.colorAxisRegistry.getQuantityKinds()) {
+          _push(qkAxes, qk, { plotName, axisId: qk })
+        }
+      }
+
+      // Filter axes
+      if (plot.filterAxisRegistry) {
+        for (const qk of plot.filterAxisRegistry.getQuantityKinds()) {
+          _push(qkAxes, qk, { plotName, axisId: qk })
+        }
+      }
+    }
+
+    // Determine which links should exist.
+    const desiredKeys = new Set()
+    for (const entries of qkAxes.values()) {
+      if (entries.length < 2) continue
+      for (let i = 0; i < entries.length; i++) {
+        for (let j = i + 1; j < entries.length; j++) {
+          desiredKeys.add(_linkKey(entries[i], entries[j]))
+        }
+      }
+    }
+
+    // Remove stale links.
+    for (const [key, entry] of this._links) {
+      if (!desiredKeys.has(key)) {
+        entry.unlink()
+        this._links.delete(key)
+      }
+    }
+
+    // Create missing links.
+    for (const [, entries] of qkAxes) {
+      if (entries.length < 2) continue
+      for (let i = 0; i < entries.length; i++) {
+        for (let j = i + 1; j < entries.length; j++) {
+          const a = entries[i], b = entries[j]
+          const key = _linkKey(a, b)
+          if (this._links.has(key)) continue
+
+          const axisA = this._plots.get(a.plotName)._getAxis(a.axisId)
+          const axisB = this._plots.get(b.plotName)._getAxis(b.axisId)
+          // Both axes share the same QK (guaranteed by qkAxes grouping),
+          // so linkAxes() will not throw.
+          const handle = linkAxes(axisA, axisB)
+          this._links.set(key, { unlink: handle.unlink, plotA: a.plotName, plotB: b.plotName })
+        }
+      }
+    }
+  }
+
+  _removeLinksForPlot(name) {
+    for (const [key, entry] of this._links) {
+      if (entry.plotA === name || entry.plotB === name) {
+        entry.unlink()
+        this._links.delete(key)
+      }
+    }
+  }
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function _push(map, key, value) {
+  if (!map.has(key)) map.set(key, [])
+  map.get(key).push(value)
+}
+
+/** Canonical link key — lexicographically sorted so (A,B) === (B,A). */
+function _linkKey(a, b) {
+  const ka = `${a.plotName}\0${a.axisId}`
+  const kb = `${b.plotName}\0${b.axisId}`
+  return ka < kb ? `${ka}--${kb}` : `${kb}--${ka}`
+}

package/src/core/ShaderQueue.js

@@ -0,0 +1,73 @@
+/**
+ * Parallel shader compilation helpers.
+ *
+ * enqueueRegl(regl, config) — drop-in for regl(config) that defers compilation.
+ *   Returns a callable handle backed by a null command until compileEnqueuedShaders()
+ *   is called. State is stored on the regl object itself so no separate instance
+ *   is needed.
+ *
+ * compileEnqueuedShaders(regl) — compiles all enqueued programs in parallel:
+ *   1. Kicks off raw GL compilation for every queued program without checking
+ *      status, so the GPU driver can pipeline them concurrently.
+ *   2. Forces completion by checking LINK_STATUS on each (blocks only on
+ *      stragglers; the rest are already done).
+ *   3. Discards the raw programs — they exist only to warm the driver's shader
+ *      binary cache (e.g. ANGLE on Chrome/Edge, Mesa on Linux).
+ *   4. Creates real regl commands (driver returns cached binaries immediately)
+ *      and resolves all handles.
+ */
+
+export function enqueueRegl(regl, config) {
+  if (!regl._shaderQueue) regl._shaderQueue = []
+
+  let realCmd = null
+  const handle = (props) => realCmd(props)
+  handle._config = config
+  handle._resolve = (cmd) => { realCmd = cmd }
+  regl._shaderQueue.push(handle)
+  return handle
+}
+
+export function compileEnqueuedShaders(regl) {
+  const queue = regl._shaderQueue ?? []
+  regl._shaderQueue = null
+
+  if (queue.length === 0) return
+
+  const gl = regl._gl
+
+  // Phase 1: start all compilations without checking status
+  const precompiled = queue.map(({ _config: { vert, frag } }) => {
+    const vs = gl.createShader(gl.VERTEX_SHADER)
+    gl.shaderSource(vs, vert)
+    gl.compileShader(vs)
+
+    const fs = gl.createShader(gl.FRAGMENT_SHADER)
+    gl.shaderSource(fs, frag)
+    gl.compileShader(fs)
+
+    const prog = gl.createProgram()
+    gl.attachShader(prog, vs)
+    gl.attachShader(prog, fs)
+    gl.linkProgram(prog)
+
+    return { prog, vs, fs }
+  })
+
+  // Phase 2: wait for all (they've been compiling in parallel)
+  for (const { prog, vs, fs } of precompiled) {
+    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+      console.warn('[gladly] Shader pre-compilation failed; regl will report the detailed error')
+    }
+    gl.detachShader(prog, vs)
+    gl.detachShader(prog, fs)
+    gl.deleteShader(vs)
+    gl.deleteShader(fs)
+    gl.deleteProgram(prog)
+  }
+
+  // Phase 3: create real regl commands (driver binary cache hit)
+  for (const handle of queue) {
+    handle._resolve(regl(handle._config))
+  }
+}

package/src/data/ColumnData.js

@@ -0,0 +1,269 @@
+// ─── GLSL helper injected into any shader that samples column data ─────────────
+// Values are packed 4 per texel (RGBA). Element i → texel i/4, channel i%4.
+export const SAMPLE_COLUMN_GLSL = `float sampleColumn(sampler2D tex, float idx) {
+  ivec2 sz = textureSize(tex, 0);
+  int i = int(idx);
+  int texelI = i / 4;
+  int chan = i % 4;
+  ivec2 coord = ivec2(texelI % sz.x, texelI / sz.x);
+  vec4 texel = texelFetch(tex, coord, 0);
+  if (chan == 0) return texel.r;
+  if (chan == 1) return texel.g;
+  if (chan == 2) return texel.b;
+  return texel.a;
+}`
+
+// ─── GLSL helper for multi-dimensional column sampling ───────────────────────
+// shape.xyzw holds the size of each logical dimension (unused dims = 1).
+// idx is the multi-dimensional index, row-major (first dim varies fastest).
+export const SAMPLE_COLUMN_ND_GLSL = `float sampleColumnND(sampler2D tex, ivec4 shape, ivec4 idx) {
+  int i = idx.x + shape.x * (idx.y + shape.y * (idx.z + shape.z * idx.w));
+  ivec2 sz = textureSize(tex, 0);
+  int texelI = i / 4;
+  int chan = i % 4;
+  ivec2 coord = ivec2(texelI % sz.x, texelI / sz.x);
+  vec4 texel = texelFetch(tex, coord, 0);
+  if (chan == 0) return texel.r;
+  if (chan == 1) return texel.g;
+  if (chan == 2) return texel.b;
+  return texel.a;
+}`
+
+// Upload a Float32Array as a 2D RGBA texture with 4 values packed per texel.
+export function uploadToTexture(regl, array) {
+  const nTexels = Math.ceil(array.length / 4)
+  const w = Math.min(nTexels, regl.limits.maxTextureSize)
+  const h = Math.ceil(nTexels / w)
+  const texData = new Float32Array(w * h * 4)
+  for (let i = 0; i < array.length; i++) texData[i] = array[i]
+  const tex = regl.texture({ data: texData, shape: [w, h], type: 'float', format: 'rgba' })
+  tex._dataLength = array.length
+  return tex
+}
+
+// ─── ColumnData base class ────────────────────────────────────────────────────
+export class ColumnData {
+  get length()       { return null }
+  get domain()       { return null }
+  get quantityKind() { return null }
+  get shape()        { return [this.length] }
+  get ndim()         { return this.shape.length }
+  get totalLength()  { return this.shape.reduce((a, b) => a * b, 1) }
+
+  // Returns { glslExpr: string, textures: { uniformName: () => reglTexture } }
+  // path must be a valid GLSL identifier fragment (no dots or special chars)
+  resolve(path, regl) { throw new Error('Not implemented') }
+
+  // Returns a regl texture (4 values per texel, RGBA, 2D layout).
+  // May run a GPU render pass for GlslColumn.
+  toTexture(regl) { throw new Error('Not implemented') }
+
+  // Called before each render to refresh axis-dependent textures.
+  // Returns true if the texture was updated.
+  refresh(plot) { return false }
+
+  // Returns a new ColumnData that samples at a_pickId + (offsetExpr) instead of a_pickId.
+  // offsetExpr is a GLSL expression string, e.g. 'a_endPoint' or '1.0'.
+  withOffset(offsetExpr) { return new OffsetColumn(this, offsetExpr) }
+}
+
+// ─── ArrayColumn ──────────────────────────────────────────────────────────────
+export class ArrayColumn extends ColumnData {
+  constructor(array, { domain = null, quantityKind = null, shape = null } = {}) {
+    super()
+    this._array = array
+    this._domain = domain
+    this._quantityKind = quantityKind
+    this._shape = shape
+    this._ref = null  // { texture } lazy
+  }
+
+  get length()       { return this._array.length }
+  get domain()       { return this._domain }
+  get quantityKind() { return this._quantityKind }
+  get array()        { return this._array }
+  get shape()        { return this._shape ?? [this._array.length] }
+
+  _upload(regl) {
+    if (this._array.length === 0) {
+      throw new Error(`[gladly] ArrayColumn: cannot upload empty array as texture — the data source has 0 elements`)
+    }
+    if (!this._ref) this._ref = { texture: uploadToTexture(regl, this._array) }
+    return this._ref
+  }
+
+  resolve(path, regl) {
+    const ref = this._upload(regl)
+    const uName = `u_col_${path}`
+    const shape = this.shape
+    if (shape.length === 1) {
+      return { glslExpr: `sampleColumn(${uName}, a_pickId)`, textures: { [uName]: () => ref.texture }, shape }
+    }
+    return { glslExpr: null, textures: { [uName]: () => ref.texture }, shape }
+  }
+
+  toTexture(regl) { return this._upload(regl).texture }
+}
+
+// ─── TextureColumn ────────────────────────────────────────────────────────────
+export class TextureColumn extends ColumnData {
+  constructor(ref, { domain = null, quantityKind = null, length = null, refreshFn = null, shape = null } = {}) {
+    super()
+    this._ref = ref           // { texture } mutable so hot-swaps propagate
+    this._domain = domain
+    this._quantityKind = quantityKind
+    this._length = length
+    this._refreshFn = refreshFn
+    this._shape = shape
+  }
+
+  get length()       { return this._length }
+  get domain()       { return this._domain }
+  get quantityKind() { return this._quantityKind }
+  get shape()        { return this._shape ?? (this._length != null ? [this._length] : [0]) }
+
+  resolve(path, regl) {
+    if (!this._ref.texture) {
+      throw new Error(`[gladly] TextureColumn '${path}': texture is null — the column was not properly initialized or its computation failed`)
+    }
+    const uName = `u_col_${path}`
+    const texFn = () => {
+      if (!this._ref.texture) throw new Error(`[gladly] TextureColumn '${path}': texture became null after initialization`)
+      return this._ref.texture
+    }
+    const shape = this.shape
+    if (shape.length === 1) {
+      return { glslExpr: `sampleColumn(${uName}, a_pickId)`, textures: { [uName]: texFn }, shape }
+    }
+    return { glslExpr: null, textures: { [uName]: texFn }, shape }
+  }
+
+  toTexture(regl) {
+    if (!this._ref.texture) {
+      throw new Error(`[gladly] TextureColumn.toTexture(): texture is null — the column was not properly initialized`)
+    }
+    return this._ref.texture
+  }
+
+  async refresh(plot) {
+    if (this._refreshFn) return await this._refreshFn(plot, this._ref) ?? false
+    return false
+  }
+}
+
+// ─── GlslColumn ───────────────────────────────────────────────────────────────
+export class GlslColumn extends ColumnData {
+  constructor(inputs, glslFn, { domain = null, quantityKind = null, shape = null } = {}) {
+    super()
+    this._inputs = inputs       // { name: ColumnData }
+    this._glslFn = glslFn       // (resolvedExprs: { name: string }) => string
+    this._domain = domain
+    this._quantityKind = quantityKind
+    this._targetShape = shape   // logical output shape (null = 1D, infer from inputs)
+  }
+
+  get length() {
+    if (this._targetShape) return this._targetShape.reduce((a, b) => a * b, 1)
+    return Object.values(this._inputs)[0]?.length ?? null
+  }
+  get domain()       { return this._domain }
+  get quantityKind() { return this._quantityKind }
+  get shape() {
+    if (this._targetShape) return this._targetShape
+    const l = Object.values(this._inputs)[0]?.length ?? null
+    return l != null ? [l] : [0]
+  }
+
+  resolve(path, regl) {
+    const resolvedExprs = {}
+    const textures = {}
+    for (const [name, col] of Object.entries(this._inputs)) {
+      const { glslExpr, textures: colTextures } = col.resolve(`${path}_${name}`, regl)
+      resolvedExprs[name] = glslExpr
+      Object.assign(textures, colTextures)
+    }
+    return { glslExpr: this._glslFn(resolvedExprs), textures }
+  }
+
+  toTexture(regl) {
+    const N = this.length
+    if (N === null) throw new Error('GlslColumn: cannot determine length for toTexture()')
+    const nTexels = Math.ceil(N / 4)
+    const w = Math.min(nTexels, regl.limits.maxTextureSize)
+    const h = Math.ceil(nTexels / w)
+    const { glslExpr, textures } = this.resolve('glsl_mat', regl)
+    const samplerDecls = Object.keys(textures).map(n => `uniform sampler2D ${n};`).join('\n')
+    const vert = `#version 300 es
+precision highp float;
+in vec2 a_position;
+void main() {
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}`
+    const frag = `#version 300 es
+precision highp float;
+precision highp sampler2D;
+${samplerDecls}
+${SAMPLE_COLUMN_GLSL}
+out vec4 fragColor;
+float gladly_eval(float a_pickId) {
+  return ${glslExpr};
+}
+void main() {
+  int texelI = int(gl_FragCoord.y) * ${w} + int(gl_FragCoord.x);
+  int base = texelI * 4;
+  float v0 = base + 0 < ${N} ? gladly_eval(float(base + 0)) : 0.0;
+  float v1 = base + 1 < ${N} ? gladly_eval(float(base + 1)) : 0.0;
+  float v2 = base + 2 < ${N} ? gladly_eval(float(base + 2)) : 0.0;
+  float v3 = base + 3 < ${N} ? gladly_eval(float(base + 3)) : 0.0;
+  fragColor = vec4(v0, v1, v2, v3);
+}`
+    const outputTex = regl.texture({ width: w, height: h, type: 'float', format: 'rgba' })
+    const outputFBO = regl.framebuffer({ color: outputTex, depth: false, stencil: false })
+    const uniforms = {}
+    for (const [k, fn] of Object.entries(textures)) uniforms[k] = fn
+    regl({
+      framebuffer: outputFBO, vert, frag,
+      attributes: { a_position: [[-1, -1], [1, -1], [-1, 1], [1, 1]] },
+      uniforms,
+      count: 4,
+      primitive: 'triangle strip'
+    })()
+    outputTex._dataLength = N
+    return outputTex
+  }
+
+  refresh(plot) {
+    let changed = false
+    for (const col of Object.values(this._inputs)) {
+      if (col.refresh(plot)) changed = true
+    }
+    return changed
+  }
+}
+
+// ─── OffsetColumn ─────────────────────────────────────────────────────────────
+// Wraps a ColumnData and shifts the GLSL sampling index by a GLSL expression.
+// Produced by col.withOffset(offsetExpr).
+export class OffsetColumn extends ColumnData {
+  constructor(base, offsetExpr) {
+    super()
+    this._base = base
+    this._offsetExpr = offsetExpr
+  }
+
+  get length()       { return this._base.length }
+  get domain()       { return this._base.domain }
+  get quantityKind() { return this._base.quantityKind }
+  get shape()        { return this._base.shape }
+
+  resolve(path, regl) {
+    const { glslExpr, textures } = this._base.resolve(path, regl)
+    return {
+      glslExpr: glslExpr.replace('a_pickId', `(a_pickId + (${this._offsetExpr}))`),
+      textures
+    }
+  }
+
+  toTexture(regl) { return this._base.toTexture(regl) }
+  refresh(plot)   { return this._base.refresh(plot) }
+}

package/src/data/Computation.js

@@ -0,0 +1,95 @@
+import { ColumnData, TextureColumn, GlslColumn } from './ColumnData.js'
+
+function domainsEqual(a, b) {
+  if (a === b) return true
+  if (a == null || b == null) return a === b
+  return a[0] === b[0] && a[1] === b[1]
+}
+
+// ─── Base classes ─────────────────────────────────────────────────────────────
+export class Computation {
+  schema(data) { throw new Error('Not implemented') }
+  getQuantityKind(params, data) { return null }
+}
+
+export class ComputedData {
+  columns() { throw new Error('Not implemented') }
+  compute(regl, params, data, getAxisDomain) { throw new Error('Not implemented') }
+  schema(data) { throw new Error('Not implemented') }
+  filterAxes(params, data) { return {} }
+}
+
+export class TextureComputation extends Computation {
+  // Override: inputs is { name: ColumnData | scalar }, returns raw regl texture.
+  compute(regl, inputs, getAxisDomain) { throw new Error('Not implemented') }
+
+  // Override to declare output shape in JS without running GPU work.
+  // Return int[] (e.g. [W, H] for a 2D output), or null to fall back to 1D (_dataLength).
+  // inputs values are ColumnData (shapes accessible) or scalars.
+  outputShape(inputs) { return null }
+
+  async createColumn(regl, inputs, plot) {
+    const accessedAxes = new Set()
+    const cachedDomains = {}
+
+    const getAxisDomain = (axisId) => {
+      accessedAxes.add(axisId)
+      return plot ? plot.getAxisDomain(axisId) : null
+    }
+
+    const rawTex = await this.compute(regl, inputs, getAxisDomain)
+    const ref = { texture: rawTex }
+
+    const hasColumnInputs = Object.values(inputs).some(v => v instanceof ColumnData)
+    let refreshFn = null
+    if (accessedAxes.size > 0 || hasColumnInputs) {
+      for (const axisId of accessedAxes) {
+        cachedDomains[axisId] = plot ? plot.getAxisDomain(axisId) : null
+      }
+
+      const comp = this
+      refreshFn = async (currentPlot, texRef) => {
+        // Refresh inputs first; track if any updated
+        let inputsRefreshed = false
+        for (const val of Object.values(inputs)) {
+          if (val instanceof ColumnData && await val.refresh(currentPlot)) inputsRefreshed = true
+        }
+
+        let ownAxisChanged = false
+        for (const axisId of accessedAxes) {
+          if (!domainsEqual(currentPlot.getAxisDomain(axisId), cachedDomains[axisId])) {
+            ownAxisChanged = true
+            break
+          }
+        }
+
+        if (!inputsRefreshed && !ownAxisChanged) return false
+
+        const newAxes = new Set()
+        const newGetter = (axisId) => { newAxes.add(axisId); return currentPlot.getAxisDomain(axisId) }
+        texRef.texture = await comp.compute(regl, inputs, newGetter)
+
+        accessedAxes.clear()
+        for (const axisId of newAxes) {
+          accessedAxes.add(axisId)
+          cachedDomains[axisId] = currentPlot.getAxisDomain(axisId)
+        }
+        return true
+      }
+    }
+
+    return new TextureColumn(ref, {
+      length: rawTex._dataLength ?? rawTex.width,
+      shape: rawTex._dataShape ?? this.outputShape(inputs) ?? null,
+      refreshFn
+    })
+  }
+}
+
+export class GlslComputation extends Computation {
+  glsl(resolvedExprs) { throw new Error('Not implemented') }
+
+  createColumn(inputs, meta = {}) {
+    return new GlslColumn(inputs, resolvedExprs => this.glsl(resolvedExprs), meta)
+  }
+}