gladly-plot 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gladly-plot",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "GPU-powered multi-axis plotting library with regl + d3",
   "type": "module",
 

package/src/ColorbarLayer.js

@@ -41,7 +41,7 @@ export const colorbarLayerType = new LayerType({
       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 = map_color(colorscale, vec2(r0, r1), v);
+      gl_FragColor = gladly_apply_color(map_color(colorscale, vec2(r0, r1), v));
     }
   `,
 

package/src/ColorscaleRegistry.js

@@ -38,11 +38,14 @@ export function buildColorGlsl() {
   parts.push('  return vec4(0.5, 0.5, 0.5, 1.0);')
   parts.push('}')
 
-  parts.push('vec4 map_color_s(int cs, vec2 range, float v, float scaleType) {')
+  parts.push('vec4 map_color_s(int cs, vec2 range, float v, float scaleType, float useAlpha) {')
   parts.push('  float vt = scaleType > 0.5 ? log(v) : v;')
   parts.push('  float r0 = scaleType > 0.5 ? log(range.x) : range.x;')
   parts.push('  float r1 = scaleType > 0.5 ? log(range.y) : range.y;')
-  parts.push('  return map_color(cs, vec2(r0, r1), vt);')
+  parts.push('  float t = clamp((vt - r0) / (r1 - r0), 0.0, 1.0);')
+  parts.push('  vec4 color = map_color(cs, vec2(r0, r1), vt);')
+  parts.push('  if (useAlpha > 0.5) color.a = t;')
+  parts.push('  return gladly_apply_color(color);')
   parts.push('}')
 
   return parts.join('\n')

package/src/FilterbarLayer.js

@@ -24,7 +24,7 @@ export const filterbarLayerType = new LayerType({
   `,
   frag: `
     precision mediump float;
-    void main() { gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0); }
+    void main() { gl_FragColor = gladly_apply_color(vec4(0.0, 0.0, 0.0, 0.0)); }
   `,
 
   schema: () => ({

package/src/LayerType.js

@@ -11,6 +11,44 @@ function buildSpatialGlsl() {
 }`
 }
 
+function buildApplyColorGlsl() {
+  return `uniform float u_pickingMode;
+uniform float u_pickLayerIndex;
+varying float v_pickId;
+vec4 gladly_apply_color(vec4 color) {
+  if (u_pickingMode > 0.5) {
+    float layerIdx = u_pickLayerIndex + 1.0;
+    float dataIdx = floor(v_pickId + 0.5);
+    return vec4(
+      layerIdx / 255.0,
+      floor(dataIdx / 65536.0) / 255.0,
+      floor(mod(dataIdx, 65536.0) / 256.0) / 255.0,
+      mod(dataIdx, 256.0) / 255.0
+    );
+  }
+  return color;
+}`
+}
+
+function injectPickIdAssignment(src) {
+  const lastBrace = src.lastIndexOf('}')
+  if (lastBrace === -1) return src
+  return src.slice(0, lastBrace) + '  v_pickId = a_pickId;\n}'
+}
+
+function injectInto(src, helpers) {
+  const injected = helpers.filter(Boolean).join('\n')
+  if (!injected) return src
+  const versionRe = /^[ \t]*#version[^\n]*\n?/
+  const versionMatch = src.match(versionRe)
+  const version = versionMatch ? versionMatch[0] : ''
+  const rest = version ? src.slice(version.length) : src
+  const precisionRe = /^\s*precision\s+\S+\s+\S+\s*;\s*$/mg
+  const precisions = rest.match(precisionRe) ?? []
+  const body = rest.replace(precisionRe, '')
+  return version + precisions.join('\n') + '\n' + injected + '\n' + body
+}
+
 export class LayerType {
   constructor({
     name,
@@ -48,19 +86,29 @@ export class LayerType {
     // Build a single-entry uniform object with renamed key reading from the internal prop name.
     const u = (internalName) => ({ [shaderName(internalName)]: regl.prop(internalName) })
 
-    const attributes = Object.fromEntries(
-      Object.entries(layer.attributes).map(([key, buffer]) => {
-        const divisor = layer.attributeDivisors[key]
-        const attrObj = divisor !== undefined ? { buffer, divisor } : { buffer }
-        return [shaderName(key), attrObj]
-      })
-    )
+    const isInstanced = layer.instanceCount !== null
+    const pickCount = isInstanced ? layer.instanceCount : (layer.vertexCount ?? layer.attributes.x?.length ?? 0)
+    const pickIds = new Float32Array(pickCount)
+    for (let i = 0; i < pickCount; i++) pickIds[i] = i
+
+    const attributes = {
+      ...Object.fromEntries(
+        Object.entries(layer.attributes).map(([key, buffer]) => {
+          const divisor = layer.attributeDivisors[key]
+          const attrObj = divisor !== undefined ? { buffer, divisor } : { buffer }
+          return [shaderName(key), attrObj]
+        })
+      ),
+      a_pickId: isInstanced ? { buffer: regl.buffer(pickIds), divisor: 1 } : regl.buffer(pickIds)
+    }
 
     const uniforms = {
       ...u("xDomain"),
       ...u("yDomain"),
       ...u("xScaleType"),
       ...u("yScaleType"),
+      u_pickingMode: regl.prop('u_pickingMode'),
+      u_pickLayerIndex: regl.prop('u_pickLayerIndex'),
       ...Object.fromEntries(
         Object.entries(layer.uniforms).map(([key, value]) => [shaderName(key), value])
       )
@@ -80,22 +128,11 @@ export class LayerType {
     const spatialGlsl = buildSpatialGlsl()
     const colorGlsl = layer.colorAxes.length > 0 ? buildColorGlsl() : ''
     const filterGlsl = layer.filterAxes.length > 0 ? buildFilterGlsl() : ''
-    const injectInto = (src, helpers) => {
-      const injected = helpers.filter(Boolean).join('\n')
-      if (!injected) return src
-      const versionRe = /^[ \t]*#version[^\n]*\n?/
-      const versionMatch = src.match(versionRe)
-      const version = versionMatch ? versionMatch[0] : ''
-      const rest = version ? src.slice(version.length) : src
-      const precisionRe = /^\s*precision\s+\S+\s+\S+\s*;\s*$/mg
-      const precisions = rest.match(precisionRe) ?? []
-      const body = rest.replace(precisionRe, '')
-      return version + precisions.join('\n') + '\n' + injected + '\n' + body
-    }
+    const pickVertDecls = `attribute float a_pickId;\nvarying float v_pickId;`
 
     const drawConfig = {
-      vert: injectInto(this.vert, [spatialGlsl, colorGlsl, filterGlsl]),
-      frag: injectInto(this.frag, [colorGlsl, filterGlsl]),
+      vert: injectPickIdAssignment(injectInto(this.vert, [spatialGlsl, filterGlsl, pickVertDecls])),
+      frag: injectInto(this.frag, [buildApplyColorGlsl(), colorGlsl, filterGlsl]),
       attributes,
       uniforms,
       viewport: regl.prop("viewport"),

package/src/Plot.js

@@ -355,7 +355,8 @@ export class Plot {
   }
 
   _processLayers(layersConfig, data) {
-    for (const layerSpec of layersConfig) {
+    for (let configLayerIndex = 0; configLayerIndex < layersConfig.length; configLayerIndex++) {
+      const layerSpec = layersConfig[configLayerIndex]
       const entries = Object.entries(layerSpec)
       if (entries.length !== 1) {
         throw new Error("Each layer specification must have exactly one layer type key")
@@ -385,6 +386,7 @@ export class Plot {
 
       // Create one draw command per GPU config returned by the layer type.
       for (const layer of layerType.createLayer(parameters, data)) {
+        layer.configLayerIndex = configLayerIndex
         layer.draw = layer.type.createDrawCommand(this.regl, layer, this)
         this.layers.push(layer)
       }
@@ -811,7 +813,9 @@ export class Plot {
         xScaleType: xIsLog ? 1.0 : 0.0,
         yScaleType: yIsLog ? 1.0 : 0.0,
         viewport: viewport,
-        count: layer.vertexCount ?? layer.attributes.x?.length ?? 0
+        count: layer.vertexCount ?? layer.attributes.x?.length ?? 0,
+        u_pickingMode: 0.0,
+        u_pickLayerIndex: 0.0,
       }
 
       if (layer.instanceCount !== null) {
@@ -973,4 +977,92 @@ export class Plot {
 
     fullOverlay.call(zoomBehavior)
   }
+
+  lookup(x, y) {
+    const result = {}
+    if (!this.axisRegistry) return result
+    const plotX = x - this.margin.left
+    const plotY = y - this.margin.top
+    for (const axisId of AXES) {
+      const scale = this.axisRegistry.getScale(axisId)
+      if (!scale) continue
+      const qk = this.axisRegistry.axisQuantityKinds[axisId]
+      const value = axisId.includes('y') ? scale.invert(plotY) : scale.invert(plotX)
+      result[axisId] = value
+      if (qk) result[qk] = value
+    }
+    return result
+  }
+
+  on(eventType, callback) {
+    const handler = (e) => {
+      if (!this.container.contains(e.target)) return
+      const rect = this.container.getBoundingClientRect()
+      const x = e.clientX - rect.left
+      const y = e.clientY - rect.top
+      callback(e, this.lookup(x, y))
+    }
+    window.addEventListener(eventType, handler, { capture: true })
+    return { remove: () => window.removeEventListener(eventType, handler, { capture: true }) }
+  }
+
+  pick(x, y) {
+    if (!this.regl || !this.layers.length) return null
+
+    const fbo = this.regl.framebuffer({
+      width: this.width, height: this.height,
+      colorFormat: 'rgba', colorType: 'uint8', depth: false,
+    })
+
+    const glX = Math.round(x)
+    const glY = this.height - Math.round(y) - 1
+
+    let result = null
+    this.regl({ framebuffer: fbo })(() => {
+      this.regl.clear({ color: [0, 0, 0, 0] })
+      const viewport = {
+        x: this.margin.left, y: this.margin.bottom,
+        width: this.plotWidth, height: this.plotHeight
+      }
+      for (let i = 0; i < this.layers.length; i++) {
+        const layer = this.layers[i]
+        const xIsLog = layer.xAxis ? this.axisRegistry.isLogScale(layer.xAxis) : false
+        const yIsLog = layer.yAxis ? this.axisRegistry.isLogScale(layer.yAxis) : false
+        const props = {
+          xDomain: layer.xAxis ? this.axisRegistry.getScale(layer.xAxis).domain() : [0, 1],
+          yDomain: layer.yAxis ? this.axisRegistry.getScale(layer.yAxis).domain() : [0, 1],
+          xScaleType: xIsLog ? 1.0 : 0.0,
+          yScaleType: yIsLog ? 1.0 : 0.0,
+          viewport,
+          count: layer.vertexCount ?? layer.attributes.x?.length ?? 0,
+          u_pickingMode: 1.0,
+          u_pickLayerIndex: i,
+        }
+        if (layer.instanceCount !== null) props.instances = layer.instanceCount
+        for (const qk of layer.colorAxes) {
+          props[`colorscale_${qk}`] = this.colorAxisRegistry.getColorscaleIndex(qk)
+          const range = this.colorAxisRegistry.getRange(qk)
+          props[`color_range_${qk}`] = range ?? [0, 1]
+          props[`color_scale_type_${qk}`] = this._getScaleTypeFloat(qk)
+        }
+        for (const qk of layer.filterAxes) {
+          props[`filter_range_${qk}`] = this.filterAxisRegistry.getRangeUniform(qk)
+          props[`filter_scale_type_${qk}`] = this._getScaleTypeFloat(qk)
+        }
+        layer.draw(props)
+      }
+      const pixels = this.regl.read({ x: glX, y: glY, width: 1, height: 1 })
+      if (pixels[0] === 0) {
+        result = null
+      } else {
+        const layerIndex = pixels[0] - 1
+        const dataIndex = (pixels[1] << 16) | (pixels[2] << 8) | pixels[3]
+        const layer = this.layers[layerIndex]
+        result = { layerIndex, configLayerIndex: layer.configLayerIndex, dataIndex, layer }
+      }
+    })
+
+    fbo.destroy()
+    return result
+  }
 }

package/src/ScatterLayer.js

@@ -41,11 +41,10 @@ export const scatterLayerType = new LayerType({
     uniform int colorscale;
     uniform vec2 color_range;
     uniform float color_scale_type;
+    uniform float alphaBlend;
     varying float value;
     void main() {
-      float t = clamp((value - color_range.x) / (color_range.y - color_range.x), 0.0, 1.0);
-      vec4 color = map_color_s(colorscale, color_range, value, color_scale_type);
-      gl_FragColor = vec4(color.rgb, t);
+      gl_FragColor = map_color_s(colorscale, color_range, value, color_scale_type, alphaBlend);
     }
   `,
   schema: (data) => {
@@ -116,7 +115,7 @@ export const scatterLayerType = new LayerType({
 
     return [{
       attributes: { x, y, [vQK]: v },
-      uniforms: {},
+      uniforms: { alphaBlend: alphaBlend ? 1.0 : 0.0 },
       domains,
       nameMap: {
         [vQK]: 'color_data',