gladly-plot 0.0.1

package/src/Filterbar.js

@@ -0,0 +1,138 @@
+import { Plot } from "./Plot.js"
+import { linkAxes } from "./AxisLink.js"
+import "./FilterbarLayer.js"
+
+const DEFAULT_MARGINS = {
+  horizontal: { top: 5, right: 40, bottom: 45, left: 40 },
+  vertical:   { top: 30, right: 10, bottom: 30, left: 50 }
+}
+
+export class Filterbar extends Plot {
+  constructor(container, targetPlot, filterAxisName, { orientation = "horizontal", margin } = {}) {
+    super(container, { margin: margin ?? DEFAULT_MARGINS[orientation] })
+
+    this._targetPlot     = targetPlot
+    this._filterAxisName = filterAxisName
+    this._orientation    = orientation
+    this._spatialAxis    = orientation === "horizontal" ? "xaxis_bottom" : "yaxis_left"
+
+    this.update({
+      data: {},
+      config: {
+        layers: [{ filterbar: { filterAxis: filterAxisName, orientation } }]
+      }
+    })
+
+    // Link the filterbar's spatial axis to the target's filter axis.
+    // Zoom/pan on the filterbar propagates back to update the filter range.
+    this._spatialLink = linkAxes(this.axes[this._spatialAxis], targetPlot.axes[filterAxisName])
+
+    // Re-render (with sync) whenever the target plot renders.
+    this._syncCallback = () => this.render()
+    targetPlot._renderCallbacks.add(this._syncCallback)
+
+    this._addCheckboxOverlays()
+  }
+
+  _addCheckboxOverlays() {
+    const makeLabel = (title) => {
+      const label = document.createElement('label')
+      Object.assign(label.style, {
+        position:      'absolute',
+        zIndex:        '3',
+        display:       'flex',
+        flexDirection: 'column',
+        alignItems:    'center',
+        gap:           '2px',
+        fontSize:      '11px',
+        color:         '#555',
+        cursor:        'pointer',
+        userSelect:    'none'
+      })
+      label.title = title
+      const cb = document.createElement('input')
+      cb.type = 'checkbox'
+      Object.assign(cb.style, { margin: '0', cursor: 'pointer' })
+      const span = document.createElement('span')
+      span.textContent = '∞'
+      label.appendChild(cb)
+      label.appendChild(span)
+      return label
+    }
+
+    this._minLabel = makeLabel('open min bound')
+    this._maxLabel = makeLabel('open max bound')
+    this._minInput = this._minLabel.querySelector('input')
+    this._maxInput = this._maxLabel.querySelector('input')
+
+    if (this._orientation === 'horizontal') {
+      Object.assign(this._minLabel.style, { left: '2px', bottom: '2px' })
+      Object.assign(this._maxLabel.style, { right: '2px', bottom: '2px' })
+    } else {
+      Object.assign(this._maxLabel.style, { top: '2px', left: '2px' })
+      Object.assign(this._minLabel.style, { bottom: '2px', left: '2px' })
+    }
+
+    this.container.appendChild(this._minLabel)
+    this.container.appendChild(this._maxLabel)
+
+    this._minInput.addEventListener('change', () => this._onCheckboxChange())
+    this._maxInput.addEventListener('change', () => this._onCheckboxChange())
+  }
+
+  _onCheckboxChange() {
+    const registry = this._targetPlot.filterAxisRegistry
+    if (!registry) return
+
+    const range   = registry.getRange(this._filterAxisName)
+    const current = this.getAxisDomain(this._spatialAxis)
+    const extent  = registry.getDataExtent(this._filterAxisName)
+
+    const minOpen = this._minInput.checked
+    const maxOpen = this._maxInput.checked
+
+    // When closing an open bound, use the current filterbar view edge so
+    // unchecking ∞ restores whatever the filterbar is currently displaying.
+    const currentMin = range?.min ?? current?.[0] ?? (extent ? extent[0] : 0)
+    const currentMax = range?.max ?? current?.[1] ?? (extent ? extent[1] : 1)
+
+    registry.setRange(
+      this._filterAxisName,
+      minOpen ? null : currentMin,
+      maxOpen ? null : currentMax
+    )
+    this._targetPlot.scheduleRender()
+  }
+
+  render() {
+    if (this.axisRegistry && this._targetPlot) {
+      const registry = this._targetPlot.filterAxisRegistry
+      if (registry) {
+        const range  = registry.getRange(this._filterAxisName)
+        const extent = registry.getDataExtent(this._filterAxisName)
+        if (range) {
+          // For open bounds, keep the current axis edge so toggling ∞ does not
+          // shift the filterbar's view. Fall back to data extent only on the
+          // initial render when the axis has no domain yet.
+          const current = this.getAxisDomain(this._spatialAxis)
+          const displayMin = range.min ?? current?.[0] ?? (extent ? extent[0] : 0)
+          const displayMax = range.max ?? current?.[1] ?? (extent ? extent[1] : 1)
+          if (displayMin < displayMax) {
+            this.setAxisDomain(this._spatialAxis, [displayMin, displayMax])
+          }
+          if (this._minInput) this._minInput.checked = range.min === null
+          if (this._maxInput) this._maxInput.checked = range.max === null
+        }
+      }
+      const scaleType = this._targetPlot._getScaleTypeFloat(this._filterAxisName) > 0.5 ? "log" : "linear"
+      this.axisRegistry.setScaleType(this._spatialAxis, scaleType)
+    }
+    super.render()
+  }
+
+  destroy() {
+    this._spatialLink.unlink()
+    this._targetPlot._renderCallbacks.delete(this._syncCallback)
+    super.destroy()
+  }
+}

package/src/FilterbarFloat.js

@@ -0,0 +1,157 @@
+import { Filterbar } from "./Filterbar.js"
+import { Plot } from "./Plot.js"
+
+const DRAG_BAR_HEIGHT = 12
+const MIN_WIDTH  = 80
+const MIN_HEIGHT = DRAG_BAR_HEIGHT + 40
+
+const DEFAULT_SIZE = {
+  horizontal: { width: 220, height: 70 + DRAG_BAR_HEIGHT },
+  vertical:   { width: 80,  height: 220 + DRAG_BAR_HEIGHT }
+}
+
+export class FilterbarFloat {
+  constructor(parentPlot, filterAxisName, {
+    orientation = "horizontal",
+    x = 10,
+    y = 100,
+    width,
+    height,
+    margin
+  } = {}) {
+    const defaults = DEFAULT_SIZE[orientation]
+    const w = width  ?? defaults.width
+    const h = height ?? defaults.height
+
+    // Outer floating container
+    this._el = document.createElement('div')
+    Object.assign(this._el.style, {
+      position:     'absolute',
+      left:         x + 'px',
+      top:          y + 'px',
+      width:        w + 'px',
+      height:       h + 'px',
+      zIndex:       '10',
+      boxSizing:    'border-box',
+      background:   'rgba(255,255,255,0.88)',
+      border:       '1px solid #aaa',
+      borderRadius: '4px',
+      boxShadow:    '0 2px 8px rgba(0,0,0,0.25)',
+      overflow:     'hidden'
+    })
+
+    const parentEl = parentPlot.container
+    if (getComputedStyle(parentEl).position === 'static') {
+      parentEl.style.position = 'relative'
+    }
+    parentEl.appendChild(this._el)
+
+    // Drag bar — thin strip at the top; dragging here moves the float
+    this._dragBar = document.createElement('div')
+    Object.assign(this._dragBar.style, {
+      position:     'absolute',
+      top:          '0',
+      left:         '0',
+      right:        '0',
+      height:       DRAG_BAR_HEIGHT + 'px',
+      cursor:       'grab',
+      background:   'rgba(0,0,0,0.07)',
+      borderBottom: '1px solid rgba(0,0,0,0.12)',
+      zIndex:       '1'
+    })
+    this._el.appendChild(this._dragBar)
+
+    // Resize handle — bottom-right corner
+    this._resizeHandle = document.createElement('div')
+    Object.assign(this._resizeHandle.style, {
+      position:            'absolute',
+      right:               '0',
+      bottom:              '0',
+      width:               '12px',
+      height:              '12px',
+      cursor:              'se-resize',
+      background:          'rgba(0,0,0,0.18)',
+      borderTopLeftRadius: '3px',
+      zIndex:              '3'
+    })
+    this._el.appendChild(this._resizeHandle)
+
+    // Sub-container for the filterbar — sits below the drag bar
+    this._filterbarEl = document.createElement('div')
+    Object.assign(this._filterbarEl.style, {
+      position: 'absolute',
+      top:      DRAG_BAR_HEIGHT + 'px',
+      left:     '0',
+      right:    '0',
+      bottom:   '0'
+    })
+    this._el.appendChild(this._filterbarEl)
+
+    this._filterbar = new Filterbar(this._filterbarEl, parentPlot, filterAxisName, { orientation, margin })
+
+    this._setupInteraction()
+  }
+
+  _setupInteraction() {
+    let mode = null  // 'drag' | 'resize'
+    let startX, startY, startLeft, startTop, startW, startH
+
+    const onDragBarMouseDown = (e) => {
+      mode      = 'drag'
+      startX    = e.clientX
+      startY    = e.clientY
+      startLeft = parseInt(this._el.style.left, 10)
+      startTop  = parseInt(this._el.style.top,  10)
+      this._dragBar.style.cursor = 'grabbing'
+      e.preventDefault()
+    }
+
+    const onResizeMouseDown = (e) => {
+      mode   = 'resize'
+      startX = e.clientX
+      startY = e.clientY
+      startW = this._el.offsetWidth
+      startH = this._el.offsetHeight
+      e.preventDefault()
+      e.stopPropagation()
+    }
+
+    const onMouseMove = (e) => {
+      if (!mode) return
+      const dx = e.clientX - startX
+      const dy = e.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 onMouseUp = () => {
+      if (mode === 'drag') this._dragBar.style.cursor = 'grab'
+      mode = null
+    }
+
+    this._dragBar.addEventListener('mousedown', onDragBarMouseDown)
+    this._resizeHandle.addEventListener('mousedown', onResizeMouseDown)
+    document.addEventListener('mousemove', onMouseMove)
+    document.addEventListener('mouseup',   onMouseUp)
+
+    this._cleanupInteraction = () => {
+      this._dragBar.removeEventListener('mousedown', onDragBarMouseDown)
+      this._resizeHandle.removeEventListener('mousedown', onResizeMouseDown)
+      document.removeEventListener('mousemove', onMouseMove)
+      document.removeEventListener('mouseup',   onMouseUp)
+    }
+  }
+
+  destroy() {
+    this._cleanupInteraction()
+    this._filterbar.destroy()
+    this._el.remove()
+  }
+}
+
+Plot._FilterbarFloatClass = FilterbarFloat

package/src/FilterbarLayer.js

@@ -0,0 +1,49 @@
+import { LayerType } from "./LayerType.js"
+import { registerLayerType } from "./LayerTypeRegistry.js"
+
+export const filterbarLayerType = new LayerType({
+  name: "filterbar",
+
+  getAxisConfig: function(parameters) {
+    const { filterAxis, orientation = "horizontal" } = parameters
+    return {
+      xAxis: orientation === "horizontal" ? "xaxis_bottom" : null,
+      xAxisQuantityKind: orientation === "horizontal" ? filterAxis : undefined,
+      yAxis: orientation === "vertical" ? "yaxis_left" : null,
+      yAxisQuantityKind: orientation === "vertical" ? filterAxis : undefined,
+    }
+  },
+
+  // Nothing is rendered — vertexCount is always 0.
+  // These minimal shaders satisfy the WebGL compiler but never execute.
+  vert: `
+    precision mediump float;
+    uniform vec2 xDomain;
+    uniform vec2 yDomain;
+    void main() { gl_Position = vec4(0.0, 0.0, 0.0, 1.0); }
+  `,
+  frag: `
+    precision mediump float;
+    void main() { gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0); }
+  `,
+
+  schema: () => ({
+    $schema: "https://json-schema.org/draft/2020-12/schema",
+    type: "object",
+    properties: {
+      filterAxis:  { type: "string", description: "Quantity kind of the filter axis to display" },
+      orientation: { type: "string", enum: ["horizontal", "vertical"], default: "horizontal" }
+    },
+    required: ["filterAxis"]
+  }),
+
+  createLayer: function() {
+    return [{
+      attributes: {},
+      uniforms:   {},
+      vertexCount: 0,
+    }]
+  }
+})
+
+registerLayerType("filterbar", filterbarLayerType)

package/src/Float.js

@@ -0,0 +1,159 @@
+import { Colorbar } from "./Colorbar.js"
+import { Plot } from "./Plot.js"
+
+const DRAG_BAR_HEIGHT = 12
+const MIN_WIDTH  = 80
+const MIN_HEIGHT = DRAG_BAR_HEIGHT + 30
+
+// Default sizes include the drag bar so the colorbar content area is unchanged.
+const DEFAULT_SIZE = {
+  horizontal: { width: 220, height: 70 + DRAG_BAR_HEIGHT },
+  vertical:   { width: 70,  height: 220 + DRAG_BAR_HEIGHT }
+}
+
+export class Float {
+  constructor(parentPlot, colorAxisName, {
+    orientation = "horizontal",
+    x = 10,
+    y = 10,
+    width,
+    height,
+    margin
+  } = {}) {
+    const defaults = DEFAULT_SIZE[orientation]
+    const w = width  ?? defaults.width
+    const h = height ?? defaults.height
+
+    // Outer floating container
+    this._el = document.createElement('div')
+    Object.assign(this._el.style, {
+      position:     'absolute',
+      left:         x + 'px',
+      top:          y + 'px',
+      width:        w + 'px',
+      height:       h + 'px',
+      zIndex:       '10',
+      boxSizing:    'border-box',
+      background:   'rgba(255,255,255,0.88)',
+      border:       '1px solid #aaa',
+      borderRadius: '4px',
+      boxShadow:    '0 2px 8px rgba(0,0,0,0.25)',
+      overflow:     'hidden'
+    })
+
+    // Ensure parent is positioned so our absolute child is contained within it
+    const parentEl = parentPlot.container
+    if (getComputedStyle(parentEl).position === 'static') {
+      parentEl.style.position = 'relative'
+    }
+    parentEl.appendChild(this._el)
+
+    // Drag bar — thin strip at the top; dragging here moves the float
+    this._dragBar = document.createElement('div')
+    Object.assign(this._dragBar.style, {
+      position:     'absolute',
+      top:          '0',
+      left:         '0',
+      right:        '0',
+      height:       DRAG_BAR_HEIGHT + 'px',
+      cursor:       'grab',
+      background:   'rgba(0,0,0,0.07)',
+      borderBottom: '1px solid rgba(0,0,0,0.12)',
+      zIndex:       '1'
+    })
+    this._el.appendChild(this._dragBar)
+
+    // Resize handle — bottom-right corner
+    this._resizeHandle = document.createElement('div')
+    Object.assign(this._resizeHandle.style, {
+      position:          'absolute',
+      right:             '0',
+      bottom:            '0',
+      width:             '12px',
+      height:            '12px',
+      cursor:            'se-resize',
+      background:        'rgba(0,0,0,0.18)',
+      borderTopLeftRadius: '3px',
+      zIndex:            '3'
+    })
+    this._el.appendChild(this._resizeHandle)
+
+    // Sub-container for the colorbar — sits below the drag bar
+    this._colorbarEl = document.createElement('div')
+    Object.assign(this._colorbarEl.style, {
+      position: 'absolute',
+      top:      DRAG_BAR_HEIGHT + 'px',
+      left:     '0',
+      right:    '0',
+      bottom:   '0'
+    })
+    this._el.appendChild(this._colorbarEl)
+
+    this._colorbar = new Colorbar(this._colorbarEl, parentPlot, colorAxisName, { orientation, margin })
+
+    this._setupInteraction()
+  }
+
+  _setupInteraction() {
+    let mode = null  // 'drag' | 'resize'
+    let startX, startY, startLeft, startTop, startW, startH
+
+    const onDragBarMouseDown = (e) => {
+      mode      = 'drag'
+      startX    = e.clientX
+      startY    = e.clientY
+      startLeft = parseInt(this._el.style.left, 10)
+      startTop  = parseInt(this._el.style.top,  10)
+      this._dragBar.style.cursor = 'grabbing'
+      e.preventDefault()
+    }
+
+    const onResizeMouseDown = (e) => {
+      mode   = 'resize'
+      startX = e.clientX
+      startY = e.clientY
+      startW = this._el.offsetWidth
+      startH = this._el.offsetHeight
+      e.preventDefault()
+      e.stopPropagation()
+    }
+
+    const onMouseMove = (e) => {
+      if (!mode) return
+      const dx = e.clientX - startX
+      const dy = e.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 onMouseUp = () => {
+      if (mode === 'drag') this._dragBar.style.cursor = 'grab'
+      mode = null
+    }
+
+    this._dragBar.addEventListener('mousedown', onDragBarMouseDown)
+    this._resizeHandle.addEventListener('mousedown', onResizeMouseDown)
+    document.addEventListener('mousemove', onMouseMove)
+    document.addEventListener('mouseup',   onMouseUp)
+
+    this._cleanupInteraction = () => {
+      this._dragBar.removeEventListener('mousedown', onDragBarMouseDown)
+      this._resizeHandle.removeEventListener('mousedown', onResizeMouseDown)
+      document.removeEventListener('mousemove', onMouseMove)
+      document.removeEventListener('mouseup',   onMouseUp)
+    }
+  }
+
+  destroy() {
+    this._cleanupInteraction()
+    this._colorbar.destroy()
+    this._el.remove()
+  }
+}
+
+Plot._FloatClass = Float

package/src/Layer.js

@@ -0,0 +1,43 @@
+export class Layer {
+  constructor({ type, attributes, uniforms, nameMap = {}, domains = {}, lineWidth = 1, primitive = "points", xAxis = "xaxis_bottom", yAxis = "yaxis_left", xAxisQuantityKind, yAxisQuantityKind, colorAxes = [], filterAxes = [], vertexCount = null, instanceCount = null, attributeDivisors = {} }) {
+    // Validate that all attributes are typed arrays
+    for (const [key, value] of Object.entries(attributes)) {
+      if (!(value instanceof Float32Array)) {
+        throw new Error(`Attribute '${key}' must be Float32Array`)
+      }
+    }
+
+    // Validate colorAxes: must be an array of quantity kind strings
+    for (const quantityKind of colorAxes) {
+      if (typeof quantityKind !== 'string') {
+        throw new Error(`Color axis quantity kind must be a string, got ${typeof quantityKind}`)
+      }
+    }
+
+    // Validate filterAxes: must be an array of quantity kind strings
+    for (const quantityKind of filterAxes) {
+      if (typeof quantityKind !== 'string') {
+        throw new Error(`Filter axis quantity kind must be a string, got ${typeof quantityKind}`)
+      }
+    }
+
+    this.type = type
+    this.attributes = attributes
+    this.uniforms = uniforms
+    this.nameMap = nameMap
+    this.domains = domains
+    this.lineWidth = lineWidth
+    this.primitive = primitive
+    this.xAxis = xAxis
+    this.yAxis = yAxis
+    this.xAxisQuantityKind = xAxisQuantityKind
+    this.yAxisQuantityKind = yAxisQuantityKind
+    // colorAxes: string[] — quantity kinds of color axes; attribute named by quantityKind holds the data
+    this.colorAxes = colorAxes
+    // filterAxes: string[] — quantity kinds of filter axes; attribute named by quantityKind holds the data
+    this.filterAxes = filterAxes
+    this.vertexCount = vertexCount
+    this.instanceCount = instanceCount
+    this.attributeDivisors = attributeDivisors
+  }
+}