gladly-plot 0.0.5 → 0.0.6

package/src/data/Data.js

@@ -0,0 +1,270 @@
+import { ArrayColumn, TextureColumn } 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]
+}
+
+// Runtime wrapper for a ComputedData instance. Manages live texture references
+// and tracks which axes were accessed so it can recompute when they change.
+export class ComputedDataNode {
+  constructor(computedData, params) {
+    this._computedData = computedData
+    this._params = params
+    this._liveRefs = {}   // { colName: { texture } }
+    this._meta = null
+    this._accessedAxes = new Set()
+    this._cachedDomains = {}
+    this._regl = null
+    this._dataGroup = null
+    this._version = 0
+  }
+
+  columns() {
+    return this._computedData.columns(this._params)
+  }
+
+  getData(col) {
+    const ref = this._liveRefs[col]
+    if (!ref) return null
+    const node = this
+    let lastVersion = this._version
+    return new TextureColumn(ref, {
+      domain: this._meta?.domains?.[col] ?? null,
+      quantityKind: this._meta?.quantityKinds?.[col] ?? null,
+      length: ref.texture ? (ref.texture._dataLength ?? ref.texture.width) : null,
+      shape: this._meta?.shapes?.[col] ?? null,
+      refreshFn: async (plot) => {
+        await node.refreshIfNeeded(plot)
+        if (node._version !== lastVersion) {
+          lastVersion = node._version
+          return true
+        }
+        return false
+      }
+    })
+  }
+
+  getQuantityKind(col) {
+    return this._meta?.quantityKinds?.[col] ?? null
+  }
+
+  getDomain(col) {
+    return this._meta?.domains?.[col] ?? null
+  }
+
+  async _initialize(regl, dataGroup, plot) {
+    this._regl = regl
+    this._dataGroup = dataGroup
+
+    const getAxisDomain = (axisId) => {
+      this._accessedAxes.add(axisId)
+      return plot ? plot.getAxisDomain(axisId) : null
+    }
+
+    const result = await this._computedData.compute(regl, this._params, dataGroup, getAxisDomain)
+    this._meta = result._meta ?? null
+
+    for (const [key, val] of Object.entries(result)) {
+      if (key === '_meta') continue
+      this._liveRefs[key] = { texture: val }
+    }
+
+    for (const axisId of this._accessedAxes) {
+      this._cachedDomains[axisId] = plot ? plot.getAxisDomain(axisId) : null
+    }
+  }
+
+  async refreshIfNeeded(plot) {
+    if (this._accessedAxes.size === 0) return
+
+    let needsRecompute = false
+    for (const axisId of this._accessedAxes) {
+      if (!domainsEqual(plot.getAxisDomain(axisId), this._cachedDomains[axisId])) {
+        needsRecompute = true
+        break
+      }
+    }
+    if (!needsRecompute) return
+
+    const newAccessedAxes = new Set()
+    const newCachedDomains = {}
+    const getAxisDomain = (axisId) => {
+      newAccessedAxes.add(axisId)
+      return plot ? plot.getAxisDomain(axisId) : null
+    }
+
+    const result = await this._computedData.compute(this._regl, this._params, this._dataGroup, getAxisDomain)
+    this._meta = result._meta ?? null
+
+    for (const [key, val] of Object.entries(result)) {
+      if (key === '_meta') continue
+      if (this._liveRefs[key]) {
+        this._liveRefs[key].texture = val
+      } else {
+        this._liveRefs[key] = { texture: val }
+      }
+    }
+
+    this._accessedAxes = newAccessedAxes
+    for (const axisId of newAccessedAxes) {
+      newCachedDomains[axisId] = plot ? plot.getAxisDomain(axisId) : null
+    }
+    this._cachedDomains = newCachedDomains
+    this._version++
+  }
+}
+
+export class DataGroup {
+  constructor(raw) {
+    this._children = {}
+    for (const [key, value] of Object.entries(raw)) {
+      this._children[key] = Data.wrap(value)
+    }
+  }
+
+  listData() {
+    const result = {}
+    for (const [key, child] of Object.entries(this._children)) {
+      if (child instanceof Data) result[key] = child
+    }
+    return result
+  }
+
+  subgroups() {
+    const result = {}
+    for (const [key, child] of Object.entries(this._children)) {
+      if (child instanceof DataGroup) result[key] = child
+    }
+    return result
+  }
+
+  columns() {
+    const cols = []
+    for (const [key, child] of Object.entries(this._children)) {
+      for (const col of child.columns()) {
+        cols.push(`${key}.${col}`)
+      }
+    }
+    return cols
+  }
+
+  _resolve(col) {
+    const dotIdx = col.indexOf('.')
+    if (dotIdx === -1) return null
+    const prefix = col.slice(0, dotIdx)
+    const rest = col.slice(dotIdx + 1)
+    const child = this._children[prefix]
+    if (!child) return null
+    return { child, rest }
+  }
+
+  getData(col) {
+    const r = this._resolve(col)
+    return r ? r.child.getData(r.rest) : undefined
+  }
+
+  getQuantityKind(col) {
+    const r = this._resolve(col)
+    return r ? r.child.getQuantityKind(r.rest) : undefined
+  }
+
+  getDomain(col) {
+    const r = this._resolve(col)
+    return r ? r.child.getDomain(r.rest) : undefined
+  }
+}
+
+export function normalizeData(data) {
+  if (data == null) return null
+  const wrapped = Data.wrap(data)
+  return (wrapped instanceof DataGroup) ? wrapped : new DataGroup({ input: wrapped })
+}
+
+export class Data {
+  constructor(raw) {
+    raw = raw ?? {}
+    if (raw.data != null && typeof raw.data === 'object' && !(raw.data instanceof Float32Array)) {
+      this._columnar = true
+      this._data = raw.data
+      this._quantityKinds = raw.quantity_kinds ?? {}
+      this._rawDomains = raw.domains ?? {}
+    } else {
+      this._columnar = false
+      this._raw = raw
+    }
+  }
+
+  static wrap(data) {
+    if (data != null && typeof data.columns === 'function' && typeof data.getData === 'function') {
+      return data
+    }
+
+    if (data != null && typeof data === 'object') {
+      const isColumnar = data.data != null && typeof data.data === 'object' && !(data.data instanceof Float32Array)
+
+      if (!isColumnar) {
+        const vals = Object.values(data)
+        if (vals.length > 0) {
+          const isRawFormat = vals.every(v =>
+            v instanceof Float32Array ||
+            (v && typeof v === 'object' && v.data instanceof Float32Array)
+          )
+          if (!isRawFormat) {
+            return new DataGroup(data)
+          }
+        }
+      }
+    }
+
+    return new Data(data)
+  }
+
+  _entry(col) {
+    if (this._columnar) {
+      const rawDomain = this._rawDomains[col]
+      let domain
+      if (Array.isArray(rawDomain)) {
+        domain = [rawDomain[0], rawDomain[1]]
+      } else if (rawDomain && typeof rawDomain === 'object') {
+        domain = [rawDomain.min, rawDomain.max]
+      }
+      return { data: this._data[col], quantityKind: this._quantityKinds[col], domain }
+    }
+
+    const v = this._raw[col]
+    if (v instanceof Float32Array) {
+      return { data: v, quantityKind: undefined, domain: undefined }
+    }
+    if (v && typeof v === 'object') {
+      let domain
+      if (Array.isArray(v.domain)) {
+        domain = [v.domain[0], v.domain[1]]
+      } else if (v.domain && typeof v.domain === 'object') {
+        domain = [v.domain.min, v.domain.max]
+      }
+      return { data: v.data, quantityKind: v.quantity_kind, domain }
+    }
+    return { data: undefined, quantityKind: undefined, domain: undefined }
+  }
+
+  columns() {
+    return this._columnar ? Object.keys(this._data) : Object.keys(this._raw)
+  }
+
+  // Returns ArrayColumn (with domain + quantityKind) or null if column not found.
+  getData(col) {
+    const entry = this._entry(col)
+    if (!entry.data) return null
+    return new ArrayColumn(entry.data, { domain: entry.domain ?? null, quantityKind: entry.quantityKind ?? null })
+  }
+
+  getQuantityKind(col) {
+    return this._entry(col).quantityKind
+  }
+
+  getDomain(col) {
+    return this._entry(col).domain
+  }
+}

package/src/floats/Float.js

@@ -128,11 +128,67 @@ export class Float {
     document.addEventListener('mousemove', onMouseMove)
     document.addEventListener('mouseup',   onMouseUp)
 
+    // Touch support
+    const onDragBarTouchStart = (e) => {
+      if (e.touches.length !== 1) return
+      e.preventDefault()
+      const t = e.touches[0]
+      mode      = 'drag'
+      startX    = t.clientX
+      startY    = t.clientY
+      startLeft = parseInt(this._el.style.left, 10)
+      startTop  = parseInt(this._el.style.top,  10)
+      this._dragBar.style.cursor = 'grabbing'
+    }
+
+    const onResizeTouchStart = (e) => {
+      if (e.touches.length !== 1) return
+      e.preventDefault()
+      e.stopPropagation()
+      const t = e.touches[0]
+      mode   = 'resize'
+      startX = t.clientX
+      startY = t.clientY
+      startW = this._el.offsetWidth
+      startH = this._el.offsetHeight
+    }
+
+    const onTouchMove = (e) => {
+      if (!mode || e.touches.length !== 1) return
+      e.preventDefault()
+      const t  = e.touches[0]
+      const dx = t.clientX - startX
+      const dy = t.clientY - startY
+      if (mode === 'drag') {
+        this._el.style.left = (startLeft + dx) + 'px'
+        this._el.style.top  = (startTop  + dy) + 'px'
+      } else {
+        this._el.style.width  = Math.max(MIN_WIDTH,  startW + dx) + 'px'
+        this._el.style.height = Math.max(MIN_HEIGHT, startH + dy) + 'px'
+      }
+    }
+
+    const onTouchEnd = () => {
+      if (mode === 'drag') this._dragBar.style.cursor = 'grab'
+      mode = null
+    }
+
+    this._dragBar.addEventListener('touchstart',     onDragBarTouchStart, { passive: false })
+    this._resizeHandle.addEventListener('touchstart', onResizeTouchStart,  { passive: false })
+    document.addEventListener('touchmove',   onTouchMove, { passive: false })
+    document.addEventListener('touchend',    onTouchEnd)
+    document.addEventListener('touchcancel', onTouchEnd)
+
     this._cleanupInteraction = () => {
       this._dragBar.removeEventListener('mousedown', onDragBarMouseDown)
       this._resizeHandle.removeEventListener('mousedown', onResizeMouseDown)
       document.removeEventListener('mousemove', onMouseMove)
       document.removeEventListener('mouseup',   onMouseUp)
+      this._dragBar.removeEventListener('touchstart',     onDragBarTouchStart)
+      this._resizeHandle.removeEventListener('touchstart', onResizeTouchStart)
+      document.removeEventListener('touchmove',   onTouchMove)
+      document.removeEventListener('touchend',    onTouchEnd)
+      document.removeEventListener('touchcancel', onTouchEnd)
     }
   }
 

package/src/index.js

@@ -1,10 +1,14 @@
 export { LayerType } from "./core/LayerType.js"
 export { Layer } from "./core/Layer.js"
-export { Data } from "./core/Data.js"
-export { AxisRegistry, AXES } from "./axes/AxisRegistry.js"
+export { Data, DataGroup } from "./data/Data.js"
+export { AxisRegistry, AXES, AXES_2D, AXIS_GEOMETRY, axisEndpoints, axisPosAtN } from "./axes/AxisRegistry.js"
+export { Camera } from "./axes/Camera.js"
+export { TickLabelAtlas } from "./axes/TickLabelAtlas.js"
 export { ColorAxisRegistry } from "./axes/ColorAxisRegistry.js"
 export { FilterAxisRegistry, buildFilterGlsl } from "./axes/FilterAxisRegistry.js"
 export { Plot } from "./core/Plot.js"
+export { PlotGroup } from "./core/PlotGroup.js"
+export { ComputePipeline, ComputeOutput } from "./core/ComputePipeline.js"
 export { pointsLayerType } from "./layers/PointsLayer.js"
 export { linesLayerType } from "./layers/LinesLayer.js"
 export { registerLayerType, getLayerType, getRegisteredLayerTypes } from "./core/LayerTypeRegistry.js"
@@ -20,9 +24,11 @@ export { Float } from "./floats/Float.js"
 export { Filterbar } from "./floats/Filterbar.js"
 export { filterbarLayerType } from "./layers/FilterbarLayer.js"
 export { tileLayerType, TileLayerType } from "./layers/TileLayer.js"
-export { histogramLayerType } from "./layers/HistogramLayer.js"
+export { barsLayerType } from "./layers/BarsLayer.js"
 export { registerEpsgDef, parseCrsCode, crsToQkX, crsToQkY, qkToEpsgCode, reproject } from "./geo/EpsgUtils.js"
-export { Computation, TextureComputation, GlslComputation, EXPRESSION_REF, computationSchema, registerTextureComputation, registerGlslComputation, isTexture } from "./compute/ComputationRegistry.js"
+export { Computation, TextureComputation, GlslComputation, ComputedData } from "./data/Computation.js"
+export { EXPRESSION_REF, computationSchema, buildTransformSchema, registerTextureComputation, registerGlslComputation, registerComputedData, getComputedData } from "./compute/ComputationRegistry.js"
+export { ComputedDataNode } from "./data/Data.js"
 
 // Register all matplotlib colorscales (side-effect import)
 import "./colorscales/MatplotlibColorscales.js"
@@ -35,3 +41,9 @@ import "./compute/fft.js"
 import "./compute/conv.js"
 import "./compute/hist.js"
 import "./compute/axisFilter.js"
+import "./compute/elementwise.js"
+import "./compute/util.js"
+import "./compute/scatter2dInterpolate.js"
+
+// Register BarsLayer (side-effect import)
+import "./layers/BarsLayer.js"

package/src/layers/BarsLayer.js

@@ -0,0 +1,168 @@
+import { LayerType } from "../core/LayerType.js"
+import { Data } from "../data/Data.js"
+import { registerLayerType } from "../core/LayerTypeRegistry.js"
+import { AXES } from "../axes/AxisRegistry.js"
+
+// Generic instanced bar layer. Renders `instanceCount` bars using live texture refs
+// for bin center positions and bar lengths (counts).
+//
+// Each bar is a quad drawn as a triangle strip (4 vertices).
+// Per-instance: x_center (bin centre, from texture) and a_pickId (bin index, divisor 1).
+// Per-vertex:   a_corner ∈ {0,1,2,3} — selects which corner of the rectangle.
+//   corner 0: bottom-left   corner 1: bottom-right
+//   corner 2: top-left      corner 3: top-right
+//
+// orientation "vertical"   — bins on x-axis, bars extend upward (default)
+// orientation "horizontal" — bins on y-axis, bars extend rightward
+
+const BARS_VERT = `#version 300 es
+  precision mediump float;
+
+  in float a_corner;
+  in float x_center;
+  in float count;
+
+  uniform vec2  xDomain;
+  uniform vec2  yDomain;
+  uniform float xScaleType;
+  uniform float yScaleType;
+  uniform float u_binHalfWidth;
+  uniform float u_horizontal;
+
+  void main() {
+    float side = mod(a_corner, 2.0);       // 0 = left, 1 = right
+    float vert = floor(a_corner / 2.0);    // 0 = bottom, 1 = top
+
+    float bx = mix(x_center + (side * 2.0 - 1.0) * u_binHalfWidth, side * count, u_horizontal);
+    float by = mix(vert * count, x_center + (vert * 2.0 - 1.0) * u_binHalfWidth, u_horizontal);
+
+    gl_Position = plot_pos(vec2(bx, by));
+  }
+`
+
+const BARS_FRAG = `#version 300 es
+  precision mediump float;
+  uniform vec4 u_color;
+  void main() {
+    fragColor = gladly_apply_color(u_color);
+  }
+`
+
+class BarsLayerType extends LayerType {
+  constructor() {
+    super({ name: "bars", vert: BARS_VERT, frag: BARS_FRAG })
+  }
+
+  _getAxisConfig(parameters, data) {
+    const d = Data.wrap(data)
+    const { xData, yData, xAxis = "xaxis_bottom", yAxis = "yaxis_left", orientation = "vertical" } = parameters
+    if (orientation === "horizontal") {
+      return {
+        xAxis,
+        xAxisQuantityKind: d.getQuantityKind(yData) ?? yData,
+        yAxis,
+        yAxisQuantityKind: d.getQuantityKind(xData) ?? xData,
+      }
+    }
+    return {
+      xAxis,
+      xAxisQuantityKind: d.getQuantityKind(xData) ?? xData,
+      yAxis,
+      yAxisQuantityKind: d.getQuantityKind(yData) ?? yData,
+    }
+  }
+
+  schema(data) {
+    const cols = Data.wrap(data).columns()
+    return {
+      type: "object",
+      properties: {
+        xData: {
+          type: "string",
+          enum: cols,
+          description: "Column name for bin center x positions"
+        },
+        yData: {
+          type: "string",
+          enum: cols,
+          description: "Column name for bar heights (counts)"
+        },
+        color: {
+          type: "array",
+          items: { type: "number" },
+          minItems: 4,
+          maxItems: 4,
+          default: [0.2, 0.5, 0.8, 1.0],
+          description: "Bar colour as [R, G, B, A] in [0, 1]"
+        },
+        orientation: {
+          type: "string",
+          enum: ["vertical", "horizontal"],
+          default: "vertical",
+          description: "vertical: bins on x-axis, bars extend up; horizontal: bins on y-axis, bars extend right"
+        },
+        xAxis: {
+          type: "string",
+          enum: AXES.filter(a => a.includes("x")),
+          default: "xaxis_bottom"
+        },
+        yAxis: {
+          type: "string",
+          enum: AXES.filter(a => a.includes("y")),
+          default: "yaxis_left"
+        }
+      },
+      required: ["xData", "yData"]
+    }
+  }
+
+  _createLayer(regl, parameters, data, plot) {
+    const d = Data.wrap(data)
+    const {
+      xData,
+      yData,
+      color = [0.2, 0.5, 0.8, 1.0],
+      orientation = "vertical",
+    } = parameters
+
+    const xRef = d.getData(xData)
+    const yRef = d.getData(yData)
+    if (!xRef) throw new Error(`BarsLayer: column '${xData}' not found`)
+    if (!yRef) throw new Error(`BarsLayer: column '${yData}' not found`)
+
+    const bins = xRef.length ?? 1
+
+    const xDomain = d.getDomain(xData) ?? [0, 1]
+    const yDomain = d.getDomain(yData) ?? [0, 1]
+    const binHalfWidth = (xDomain[1] - xDomain[0]) / (2 * bins)
+
+    const xQK = d.getQuantityKind(xData) ?? xData
+    const yQK = d.getQuantityKind(yData) ?? yData
+
+    // Per-vertex corner indices 0–3 (triangle-strip quad)
+    const a_corner = new Float32Array([0, 1, 2, 3])
+
+    return [{
+      attributes: {
+        a_corner,    // per-vertex, no divisor
+        x_center: xRef,  // live ref → resolved via _isLive path in resolveToGlslExpr
+        count: yRef,     // live ref → resolved via _isLive path
+      },
+      uniforms: {
+        u_binHalfWidth: binHalfWidth,
+        u_color: color,
+        u_horizontal: orientation === "horizontal" ? 1.0 : 0.0,
+      },
+      vertexCount: 4,
+      instanceCount: bins,
+      primitive: "triangle strip",
+      domains: {
+        [xQK]: xDomain,
+        [yQK]: yDomain,
+      },
+    }]
+  }
+}
+
+export const barsLayerType = new BarsLayerType()
+registerLayerType("bars", barsLayerType)

package/src/layers/ColorbarLayer.js

@@ -7,6 +7,7 @@ const quadCy = new Float32Array([-1, -1, 1, 1])
 
 export const colorbarLayerType = new LayerType({
   name: "colorbar",
+  suppressWarnings: true,
 
   getAxisConfig: function(parameters) {
     const { colorAxis, orientation = "horizontal" } = parameters
@@ -15,33 +16,33 @@ export const colorbarLayerType = new LayerType({
       xAxisQuantityKind: orientation === "horizontal" ? colorAxis : undefined,
       yAxis: orientation === "vertical" ? "yaxis_left" : null,
       yAxisQuantityKind: orientation === "vertical" ? colorAxis : undefined,
-      colorAxisQuantityKinds: [colorAxis],
+      colorAxisQuantityKinds: { '': colorAxis },
     }
   },
 
-  vert: `
+  vert: `#version 300 es
     precision mediump float;
-    attribute float cx;
-    attribute float cy;
+    in float cx;
+    in float cy;
     uniform int horizontal;
-    varying float tval;
+    out float tval;
     void main() {
       gl_Position = vec4(cx, cy, 0.0, 1.0);
       tval = horizontal == 1 ? (cx + 1.0) / 2.0 : (cy + 1.0) / 2.0;
     }
   `,
 
-  frag: `
+  frag: `#version 300 es
     precision mediump float;
     uniform int colorscale;
     uniform vec2 color_range;
     uniform float color_scale_type;
-    varying float tval;
+    in float tval;
     void main() {
       float r0 = color_scale_type > 0.5 ? log(color_range.x) : color_range.x;
       float r1 = color_scale_type > 0.5 ? log(color_range.y) : color_range.y;
       float v  = r0 + tval * (r1 - r0);
-      gl_FragColor = gladly_apply_color(map_color(colorscale, vec2(r0, r1), v));
+      fragColor = gladly_apply_color(map_color(colorscale, vec2(r0, r1), v));
     }
   `,
 
@@ -55,18 +56,13 @@ export const colorbarLayerType = new LayerType({
     required: ["colorAxis"]
   }),
 
-  createLayer: function(parameters) {
+  createLayer: function(regl, parameters) {
     const { colorAxis, orientation = "horizontal" } = parameters
     return [{
       attributes: { cx: quadCx, cy: quadCy },
       uniforms: { horizontal: orientation === "horizontal" ? 1 : 0 },
       primitive: "triangle strip",
       vertexCount: 4,
-      nameMap: {
-        [`colorscale_${colorAxis}`]: 'colorscale',
-        [`color_range_${colorAxis}`]: 'color_range',
-        [`color_scale_type_${colorAxis}`]: 'color_scale_type',
-      },
     }]
   }
 })

package/src/layers/ColorbarLayer2d.js

@@ -7,6 +7,7 @@ const quadCy = new Float32Array([-1, -1, 1, 1])
 
 export const colorbar2dLayerType = new LayerType({
   name: "colorbar2d",
+  suppressWarnings: true,
 
   getAxisConfig: function(parameters) {
     const { xAxis, yAxis } = parameters
@@ -15,16 +16,17 @@ export const colorbar2dLayerType = new LayerType({
       xAxisQuantityKind: xAxis,
       yAxis: "yaxis_left",
       yAxisQuantityKind: yAxis,
-      colorAxisQuantityKinds: [xAxis, yAxis],
+      colorAxisQuantityKinds: { '_a': xAxis, '_b': yAxis },
+      colorAxis2dQuantityKinds: { '': ['_a', '_b'] },
     }
   },
 
-  vert: `
+  vert: `#version 300 es
     precision mediump float;
-    attribute float cx;
-    attribute float cy;
-    varying float tval_x;
-    varying float tval_y;
+    in float cx;
+    in float cy;
+    out float tval_x;
+    out float tval_y;
     void main() {
       gl_Position = vec4(cx, cy, 0.0, 1.0);
       tval_x = (cx + 1.0) / 2.0;
@@ -37,16 +39,14 @@ export const colorbar2dLayerType = new LayerType({
   // values to map_color_s_2d which re-applies the scale type internally. The exp() call
   // is the inverse of the log() that map_color_s_2d will apply, so log-scale roundtrips
   // correctly and linear-scale is a no-op (exp(log(v)) == v, but for linear vt == v anyway).
-  frag: `
+  frag: `#version 300 es
     precision mediump float;
-    uniform int colorscale_a;
     uniform vec2 color_range_a;
     uniform float color_scale_type_a;
-    uniform int colorscale_b;
     uniform vec2 color_range_b;
     uniform float color_scale_type_b;
-    varying float tval_x;
-    varying float tval_y;
+    in float tval_x;
+    in float tval_y;
     void main() {
       float r0_a = color_scale_type_a > 0.5 ? log(color_range_a.x) : color_range_a.x;
       float r1_a = color_scale_type_a > 0.5 ? log(color_range_a.y) : color_range_a.y;
@@ -58,10 +58,7 @@ export const colorbar2dLayerType = new LayerType({
       float vt_b = r0_b + tval_y * (r1_b - r0_b);
       float v_b  = color_scale_type_b > 0.5 ? exp(vt_b) : vt_b;
 
-      gl_FragColor = map_color_s_2d(
-        colorscale_a, color_range_a, v_a, color_scale_type_a,
-        colorscale_b, color_range_b, v_b, color_scale_type_b
-      );
+      fragColor = map_color_2d_(vec2(v_a, v_b));
     }
   `,
 
@@ -75,21 +72,13 @@ export const colorbar2dLayerType = new LayerType({
     required: ["xAxis", "yAxis"]
   }),
 
-  createLayer: function(parameters) {
+  createLayer: function(regl, parameters) {
     const { xAxis, yAxis } = parameters
     return [{
       attributes: { cx: quadCx, cy: quadCy },
       uniforms: {},
       primitive: "triangle strip",
       vertexCount: 4,
-      nameMap: {
-        [`colorscale_${xAxis}`]:       'colorscale_a',
-        [`color_range_${xAxis}`]:      'color_range_a',
-        [`color_scale_type_${xAxis}`]: 'color_scale_type_a',
-        [`colorscale_${yAxis}`]:       'colorscale_b',
-        [`color_range_${yAxis}`]:      'color_range_b',
-        [`color_scale_type_${yAxis}`]: 'color_scale_type_b',
-      },
     }]
   }
 })