@windborne/grapher 1.0.21 → 1.0.24

package/src/renderer/graph_body_renderer.js

@@ -1,13 +1,15 @@
-import sizeCanvas from './size_canvas';
-import getColor from '../helpers/colors';
-import LineProgram from './line_program';
-import drawLine from './draw_line';
 import Eventable from '../eventable';
-import drawBackground from './draw_background.js';
+import getColor from '../helpers/colors';
+import inferType from '../state/infer_type';
 import BackgroundProgram from './background_program.js';
-import drawBars from './draw_bars';
 import drawArea from './draw_area';
-import inferType from '../state/infer_type';
+import drawBackground from './draw_background.js';
+import drawBars from './draw_bars';
+import drawLine from './draw_line';
+import LineProgram from './line_program';
+import ShadowProgram from './shadow_program';
+import sizeCanvas from './size_canvas';
+import { applyReducedOpacity } from "../helpers/colors";
 
 export default class GraphBodyRenderer extends Eventable {
 
@@ -19,21 +21,36 @@ export default class GraphBodyRenderer extends Eventable {
         this._checkIntersection = checkIntersection;
         this._canvas = canvasElement;
         this._webgl = webgl;
+        
+        if (!this._canvas) {
+            console.error('Canvas element is null in GraphBodyRenderer constructor');
+            this._initialized = false;
+            return;
+        }
+        
         if (webgl) {
             this._context = this._canvas.getContext('webgl');
             if (this._context) {
                 this._lineProgram = new LineProgram(this._context);
+                this._shadowProgram = new ShadowProgram(this._context);
             } else {
+                console.error('❌ WebGL context creation failed');
                 alert('WebGL failed! Attempting fallback to CPU rendering');
                 this._webgl = false;
             }
         }
 
         if (!this._webgl) {
-            this._context = this._canvas.getContext( '2d');
+            this._context = this._canvas.getContext('2d');
             this._context2d = this._context;
         }
 
+        if (!this._context) {
+            console.error('Failed to get canvas context in GraphBodyRenderer');
+            this._initialized = false;
+            return;
+        }
+
         this._initialized = this._initializeCanvas();
 
         this._boundResize = this.resize.bind(this);
@@ -57,6 +74,7 @@ export default class GraphBodyRenderer extends Eventable {
     dispose() {
         this.clearListeners();
         this._lineProgram && this._lineProgram.dispose();
+        this._shadowProgram && this._shadowProgram.dispose();
         this._cachedAxisCount = null;
         this._stateController.off('axes_changed', this._onAxisChange);
         this._stateController.off('dragging_y_changed', this._boundResize);
@@ -68,6 +86,12 @@ export default class GraphBodyRenderer extends Eventable {
         if (this._intersectionObserver) {
             this._intersectionObserver.disconnect();
         }
+
+        if (this._zeroLineCanvas && this._zeroLineCanvas.parentNode) {
+            this._zeroLineCanvas.parentNode.removeChild(this._zeroLineCanvas);
+            this._zeroLineCanvas = null;
+            this._zeroLineContext = null;
+        }
     }
 
     clear() {
@@ -79,6 +103,57 @@ export default class GraphBodyRenderer extends Eventable {
     }
 
     render(singleSeries, inRenderSpace, { highlighted, showIndividualPoints, shadowColor, shadowBlur, width, defaultLineWidth, bounds, globalBounds, inRenderSpaceAreaBottom }) {
+        if (!this._initialized || !this._context || !this._canvas) {
+            console.warn('GraphBodyRenderer: Cannot render - not initialized, missing context, or missing canvas');
+            return;
+        }
+        
+        let cutoffIndex = -1;
+        // cutoff time calculations for visible bounds-based approach
+        
+        if (singleSeries.cutoffTime && singleSeries.data && singleSeries.data.length > 0) {
+            let cutoffDate;
+            if (singleSeries.cutoffTime === 'now') {
+                cutoffDate = new Date();
+            } else if (typeof singleSeries.cutoffTime === 'number') {
+                cutoffDate = new Date(singleSeries.cutoffTime);
+            } else {
+                cutoffDate = singleSeries.cutoffTime;
+            }
+            
+            // getting the ghost point
+            const cutoffTime = cutoffDate instanceof Date ? cutoffDate.getTime() : cutoffDate;
+            
+            for (let i = 0; i < singleSeries.data.length - 1; i++) {
+                const currentPoint = singleSeries.data[i];
+                const nextPoint = singleSeries.data[i + 1];
+                
+                const currentTime = Array.isArray(currentPoint) ? 
+                    (currentPoint[0] instanceof Date ? currentPoint[0].getTime() : currentPoint[0]) : i;
+                const nextTime = Array.isArray(nextPoint) ? 
+                    (nextPoint[0] instanceof Date ? nextPoint[0].getTime() : nextPoint[0]) : (i + 1);
+                
+                if (currentTime <= cutoffTime && cutoffTime <= nextTime) {
+                    // interpolate exact position between these two points
+                    const timeRatio = (cutoffTime - currentTime) / (nextTime - currentTime);
+                    cutoffIndex = i + timeRatio;
+                    break;
+                } else if (currentTime > cutoffTime) {
+                    // cutoff is before the first data point
+                    cutoffIndex = i;
+                    break;
+                }
+            }
+            
+            // cutoff is after all data points
+            if (cutoffIndex === -1) {
+                cutoffIndex = singleSeries.data.length - 1;
+            }
+            
+            
+            // Note: cutoffIndex is used for cutoff calculations but we no longer split data
+        }
+        
         const getIndividualPoints = (useDataSpace) => {
             if (!bounds) {
                 bounds = singleSeries.axis.currentBounds;
@@ -144,8 +219,20 @@ export default class GraphBodyRenderer extends Eventable {
         let commonCPUParams;
 
         if (cpuRendering) {
-            // we can currently only render bars with the CPU
-            this._context2d = this._context2d || this._canvas.getContext('2d');
+            if (this._webgl) {
+                console.warn(`CPU rendering (${singleSeries.rendering}) is not supported with webgl={true}. Use webgl={false} or switch to 'line' rendering.`);
+                return;
+            }
+            
+            //we still need a canvas context for cpu stuff
+            if (!this._context2d) {
+                this._context2d = this._canvas.getContext('2d', { willReadFrequently: false });
+            }
+            
+            if (!this._context2d) {
+                console.error('Failed to get 2D context for CPU rendering');
+                return;
+            }
 
             if (this._webgl) {
                 // make sure we don't have any webgl stuff in the way before we get back to CPU rendering
@@ -177,18 +264,32 @@ export default class GraphBodyRenderer extends Eventable {
         }
 
         if (singleSeries.rendering === 'bar') {
-            drawBars(getIndividualPoints(true), {
+            let barParams = {
                 ...commonCPUParams,
                 indexInAxis: singleSeries.axis.series.indexOf(singleSeries),
                 axisSeriesCount: singleSeries.axis.series.length,
                 closestSpacing: globalBounds.closestSpacing,
                 bounds
-            });
+            };
+
+            if (singleSeries.cutoffTime) {
+                barParams.cutoffIndex = cutoffIndex;
+                barParams.cutoffOpacity = 0.35;
+                barParams.originalData = singleSeries.data;
+                barParams.renderCutoffGradient = cutoffIndex >= 0; 
+                
+                const selection = this === this._stateController.rangeGraphRenderer 
+                    ? this._stateController._bounds 
+                    : (this._stateController._selection || this._stateController._bounds);
+                barParams.selectionBounds = selection;
+            }
+
+            drawBars(getIndividualPoints(true), barParams);
             return;
         }
 
         if (singleSeries.rendering === 'area') {
-            drawArea(getIndividualPoints(true), inRenderSpace, {
+            let areaParams = {
                 ...commonCPUParams,
                 showIndividualPoints: typeof singleSeries.showIndividualPoints === 'boolean' ? singleSeries.showIndividualPoints : showIndividualPoints,
                 gradient: singleSeries.gradient,
@@ -198,10 +299,147 @@ export default class GraphBodyRenderer extends Eventable {
                 shadowColor,
                 shadowBlur,
                 inRenderSpaceAreaBottom
-            });
-            return;
+            };
+
+        // add cutoff information for gradient area rendering
+        if (singleSeries.cutoffTime) {
+            areaParams.cutoffIndex = cutoffIndex;
+            areaParams.cutoffOpacity = 0.35;
+            areaParams.originalData = singleSeries.data;
+            areaParams.renderCutoffGradient = cutoffIndex >= 0; 
+            areaParams.isPreview = this === this._stateController.rangeGraphRenderer; 
+            
+            const selection = this === this._stateController.rangeGraphRenderer 
+                ? this._stateController._bounds 
+                : (this._stateController._selection || this._stateController._bounds);
+            areaParams.selectionBounds = selection;
+        }
+
+            drawArea(getIndividualPoints(true), inRenderSpace, areaParams);
+        }
+
+        if (singleSeries.rendering === 'shadow') {
+            if (!this._webgl || !this._shadowProgram) {
+                console.warn('Shadow rendering requires WebGL. Enable webgl={true} on your Grapher component.', {
+                    webgl: !!this._webgl,
+                    shadowProgram: !!this._shadowProgram,
+                    program: !!this._shadowProgram?._program
+                });
+                return;
+            }
+            
+            if (!this._shadowProgram._program) {
+                console.error('ShadowProgram has no valid WebGL program');
+                return;
+            }
+            
+            if (!inRenderSpace) {
+                console.error('inRenderSpace is null for shadow rendering');
+                return;
+            }
+            
+            if (!bounds) {
+                bounds = singleSeries.axis.currentBounds;
+            }
+            
+            let zero = singleSeries.zeroLineY === 'bottom' ?
+                this._sizing.renderHeight :
+                (1.0 - ((singleSeries.zeroLineY || 0) - bounds.minY) / (bounds.maxY - bounds.minY)) * this._sizing.renderHeight;
+                
+            const boundsChanged = !this._lastBounds || 
+                bounds.minY !== this._lastBounds.minY || 
+                bounds.maxY !== this._lastBounds.maxY || 
+                this._sizing.renderHeight !== this._lastRenderHeight;
+                
+            this._lastBounds = {...bounds};
+            this._lastRenderHeight = this._sizing.renderHeight;
+            
+            if (boundsChanged && this._lastShadowCache) {
+                this._lastShadowCache = null;
+            }
+            
+            if (zero > this._sizing.renderHeight * 1.5) {
+                zero = this._sizing.renderHeight;
+            } else if (zero < -this._sizing.renderHeight * 0.5) {
+                zero = 0;
+            }
+            
+            let shadowParams = {
+                color: getColor(singleSeries.color, singleSeries.index, singleSeries.multigrapherSeriesIndex),
+                gradient: singleSeries.gradient,
+                zero,
+                sizing: this._sizing,
+                inRenderSpaceAreaBottom
+            };
+
+            // add cutoff information for gradient shadow rendering
+            if (singleSeries.cutoffTime) {
+                shadowParams.cutoffIndex = cutoffIndex;
+                shadowParams.cutoffOpacity = 0.35;
+                shadowParams.originalData = singleSeries.data;
+                shadowParams.renderCutoffGradient = cutoffIndex >= 0; 
+                shadowParams.isPreview = this === this._stateController.rangeGraphRenderer; 
+
+                const selection = this === this._stateController.rangeGraphRenderer 
+                    ? this._stateController._bounds 
+                    : (this._stateController._selection || this._stateController._bounds);
+                shadowParams.selectionBounds = selection;
+            }
+
+            this._shadowProgram.draw(getIndividualPoints(true), shadowParams);
+            
+            if (this._webgl) {
+                const gl = this._context;
+                gl.disable(gl.BLEND);
+                gl.enable(gl.BLEND);
+                gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+            }
+            
+            
+            if (singleSeries.zeroLineWidth && singleSeries.zeroLineWidth > 0) {
+                if (this._context2d) {
+                    // in non-webgl mode, use the existing 2d context
+                    this._context2d.save();
+                    this._context2d.strokeStyle = singleSeries.zeroLineColor || getColor(singleSeries.color, singleSeries.index, singleSeries.multigrapherSeriesIndex);
+                    this._context2d.lineWidth = singleSeries.zeroLineWidth;
+                    this._context2d.globalCompositeOperation = 'source-over';
+                    
+                    this._context2d.beginPath();
+                    this._context2d.moveTo(0, zero);
+                    this._context2d.lineTo(this._sizing.renderWidth, zero);
+                    this._context2d.stroke();
+                    this._context2d.restore();
+                } else {
+                    // in webgl mode, we instead create an overlay 2d canvas for the zero line
+                    if (!this._zeroLineCanvas) {
+                        this._zeroLineCanvas = document.createElement('canvas');
+                        this._zeroLineCanvas.style.position = 'absolute';
+                        this._zeroLineCanvas.style.top = '0';
+                        this._zeroLineCanvas.style.left = '0';
+                        this._zeroLineCanvas.style.pointerEvents = 'none';
+                        this._zeroLineContext = this._zeroLineCanvas.getContext('2d');
+                        this._canvas.parentNode.insertBefore(this._zeroLineCanvas, this._canvas.nextSibling);
+                    }
+                    
+                    this._zeroLineCanvas.width = this._canvas.width;
+                    this._zeroLineCanvas.height = this._canvas.height;
+                    this._zeroLineCanvas.style.width = this._canvas.style.width;
+                    this._zeroLineCanvas.style.height = this._canvas.style.height;
+                    
+                    this._zeroLineContext.clearRect(0, 0, this._zeroLineCanvas.width, this._zeroLineCanvas.height);
+                    this._zeroLineContext.strokeStyle = singleSeries.zeroLineColor || getColor(singleSeries.color, singleSeries.index, singleSeries.multigrapherSeriesIndex);
+                    this._zeroLineContext.lineWidth = singleSeries.zeroLineWidth;
+                    
+                    this._zeroLineContext.beginPath();
+                    this._zeroLineContext.moveTo(0, zero);
+                    this._zeroLineContext.lineTo(this._sizing.renderWidth, zero);
+                    this._zeroLineContext.stroke();
+                }
+            }
         }
 
+        const shouldShowIndividualPoints = typeof singleSeries.showIndividualPoints === 'boolean' ? singleSeries.showIndividualPoints : showIndividualPoints;
+
         const drawParams = {
             color: getColor(singleSeries.color, singleSeries.index, singleSeries.multigrapherSeriesIndex),
             context: this._context,
@@ -211,16 +449,39 @@ export default class GraphBodyRenderer extends Eventable {
             dashed: singleSeries.dashed,
             dashPattern: singleSeries.dashPattern,
             highlighted,
-            showIndividualPoints: typeof singleSeries.showIndividualPoints === 'boolean' ? singleSeries.showIndividualPoints : showIndividualPoints,
+            showIndividualPoints: shouldShowIndividualPoints,
             getIndividualPoints,
-            getRanges: singleSeries.rangeKey ? getRanges : null
+            getRanges: singleSeries.rangeKey ? getRanges : null,
+            rendering: singleSeries.rendering  // Pass rendering type for all charts
         };
 
+        if (!inRenderSpace) {
+            console.error('inRenderSpace is null for line rendering');
+            return;
+        }
+        
+        // Add cutoff information to drawParams for gradient line rendering
+        if (singleSeries.cutoffTime) {
+            drawParams.cutoffIndex = cutoffIndex;
+            drawParams.cutoffOpacity = 0.35;
+            drawParams.originalData = singleSeries.data;
+            drawParams.renderCutoffGradient = cutoffIndex >= 0; // Only render cutoff if valid cutoff
+            drawParams.currentBounds = bounds;
+            drawParams.isPreview = this === this._stateController.rangeGraphRenderer; // Flag for preview rendering
+            
+            // Always set selectionBounds with fallback
+            const selection = this === this._stateController.rangeGraphRenderer 
+                ? this._stateController._bounds 
+                : (this._stateController._selection || this._stateController._bounds);
+            drawParams.selectionBounds = selection;
+        }
+        
         if (this._webgl) {
             this._lineProgram.draw(inRenderSpace, drawParams);
         } else {
             drawLine(inRenderSpace, drawParams);
         }
+        
     }
 
     renderBackground(inBackgroundSpace) {

package/src/renderer/line.frag

@@ -4,6 +4,9 @@ uniform vec4 color;
 uniform float thickness;
 uniform float shadowBlur;
 uniform vec4 shadowColor;
+uniform float width;        // Canvas width for normalization
+uniform float cutoffX;      // Cutoff X position as ratio (0.0-1.0)
+uniform float cutoffOpacity; // Opacity for pre-cutoff area
 
 varying vec2 position_vec;
 varying vec2 prev_position_vec;
@@ -39,13 +42,25 @@ float distance_from_line() {
 void main() {
     vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
 
+    // Apply cutoff opacity if active
+    vec4 finalColor = vec4(color);
+    if (cutoffX >= 0.0) {
+        // Convert pixel position to normalized coordinate (0.0 to 1.0)
+        float normalizedX = gl_FragCoord.x / width;
+        
+        // Apply reduced opacity to pixels left of cutoff
+        if (normalizedX < cutoffX) {
+            finalColor.a *= cutoffOpacity;
+        }
+    }
+
     float dist = distance_from_line();
 
     if (dist + shadowBlur >= thickness) {
         float percent_shadowed = ((thickness - dist) / shadowBlur);
         gl_FragColor = mix(transparent, shadowColor, percent_shadowed*percent_shadowed);
     } else {
-        gl_FragColor = vec4(color);
+        gl_FragColor = finalColor;
         gl_FragColor.rgb *= gl_FragColor.a;
     }
 }

package/src/renderer/line_program.js

@@ -6,6 +6,7 @@ import colorToVector from '../helpers/color_to_vector';
 import extractVertices from './extract_vertices';
 import createGLProgram from './create_gl_program';
 import {DPI_INCREASE} from './size_canvas';
+import { applyReducedOpacity } from "../helpers/colors";
 
 export default class LineProgram {
 
@@ -36,7 +37,6 @@ export default class LineProgram {
         const height = gl.drawingBufferHeight;
 
         gl.clearColor(0, 0, 0, 0);
-        gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
         gl.viewport(0, 0, width, height);
     }
 
@@ -63,16 +63,23 @@ export default class LineProgram {
         const height = gl.drawingBufferHeight;
         gl.useProgram(this._program);
 
-        // gl.disable(gl.DEPTH_TEST);
-
         const thickness = DPI_INCREASE*((parameters.width || 1) + (parameters.highlighted ? 2 : 0));
         const shadowBlur = parameters.shadowBlur === undefined ? 2 : parameters.shadowBlur;
         const shadowColor = parameters.shadowColor || 'black';
         const dashed = parameters.dashed || false;
         const dashPattern = parameters.dashPattern || [5, 5];
+        if (parameters.renderCutoffGradient && parameters.cutoffIndex !== undefined && parameters.originalData) {
+            this.drawLineWithCutoff(dataInRenderSpace, parameters);
+            return;
+        }
 
         const {positions, prevPositions, vertices, indices} = extractVertices(dataInRenderSpace, { dashed, dashPattern });
 
+        if (!this._program) {
+            console.error('WebGL line program is null - shader compilation failed!');
+            return;
+        }
+
         const positionIndex = gl.getAttribLocation(this._program, 'position');
         const prevPositionIndex = gl.getAttribLocation(this._program, 'prevPosition');
         const vertexIndex = gl.getAttribLocation(this._program, 'vertex');
@@ -96,8 +103,15 @@ export default class LineProgram {
         gl.uniform1f(gl.getUniformLocation(this._program, 'height'), height);
         gl.uniform1f(gl.getUniformLocation(this._program, 'thickness'), Math.max(thickness, 1)+shadowBlur);
         gl.uniform1f(gl.getUniformLocation(this._program, 'shadowBlur'), shadowBlur);
-        gl.uniform4f(gl.getUniformLocation(this._program, 'color'), ...colorToVector(parameters.color));
+        const colorVector = colorToVector(parameters.color);
+        gl.uniform4f(gl.getUniformLocation(this._program, 'color'), ...colorVector);
         gl.uniform4f(gl.getUniformLocation(this._program, 'shadowColor'), ...colorToVector(shadowColor));
+        
+        const cutoffX = parameters.cutoffX !== undefined ? parameters.cutoffX : -1.0; // Use parameter or disable
+        const cutoffOpacity = parameters.cutoffOpacity !== undefined ? parameters.cutoffOpacity : 1.0;
+        
+        gl.uniform1f(gl.getUniformLocation(this._program, 'cutoffX'), cutoffX);
+        gl.uniform1f(gl.getUniformLocation(this._program, 'cutoffOpacity'), cutoffOpacity);
 
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indexBuffer);
         gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
@@ -109,17 +123,193 @@ export default class LineProgram {
             gl.uniform1f(gl.getUniformLocation(this._circleProgram, 'width'), width);
             gl.uniform1f(gl.getUniformLocation(this._circleProgram, 'height'), height);
             gl.uniform1f(gl.getUniformLocation(this._circleProgram, 'pointSize'), 2*(thickness+6));
-            gl.uniform4f(gl.getUniformLocation(this._circleProgram, 'color'), ...colorToVector(parameters.color));
 
             const individualPoints = parameters.getIndividualPoints();
 
-            gl.enableVertexAttribArray(0);
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._individualPointBuffer);
-            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(individualPoints.flat()), gl.STATIC_DRAW);
-            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+            if (parameters.cutoffIndex !== undefined && parameters.cutoffIndex > 0 && parameters.originalData) {
+                const { originalData } = parameters;
+                let cutoffTime;
+                
+                if (typeof originalData[0] === 'object' && originalData[0].length === 2) {
+                    const baseIndex = Math.floor(parameters.cutoffIndex);
+                    const fraction = parameters.cutoffIndex - baseIndex;
+                    
+                    if (fraction === 0 || baseIndex >= originalData.length - 1) {
+                        const cutoffDate = originalData[Math.min(baseIndex, originalData.length - 1)][0];
+                        cutoffTime = cutoffDate instanceof Date ? cutoffDate.getTime() : cutoffDate;
+                    } else {
+                        const currentDate = originalData[baseIndex][0];
+                        const nextDate = originalData[baseIndex + 1][0];
+                        const currentTime = currentDate instanceof Date ? currentDate.getTime() : currentDate;
+                        const nextTime = nextDate instanceof Date ? nextDate.getTime() : nextDate;
+                        cutoffTime = currentTime + fraction * (nextTime - currentTime);
+                    }
+                }
+                
+                const preCutoffPoints = [];
+                const postCutoffPoints = [];
+
+                if (parameters.isPreview) {
+                    const firstTime = originalData[0][0] instanceof Date ? originalData[0][0].getTime() : originalData[0][0];
+                    const lastTime = originalData[originalData.length - 1][0] instanceof Date ? 
+                        originalData[originalData.length - 1][0].getTime() : originalData[originalData.length - 1][0];
+                    const timeRatio = (cutoffTime - firstTime) / (lastTime - firstTime);
+                    
+                    for (let i = 0; i < individualPoints.length; i++) {
+                        const pointRatio = i / (individualPoints.length - 1);
+                        if (pointRatio < timeRatio) {
+                            preCutoffPoints.push(individualPoints[i]);
+                        } else {
+                            postCutoffPoints.push(individualPoints[i]);
+                        }
+                    }
+                } else if (!parameters.selectionBounds) {
+                    postCutoffPoints.push(...individualPoints);
+                } else {
+                    const visibleMinTime = parameters.selectionBounds.minX instanceof Date ? 
+                        parameters.selectionBounds.minX.getTime() : parameters.selectionBounds.minX;
+                    const visibleMaxTime = parameters.selectionBounds.maxX instanceof Date ? 
+                        parameters.selectionBounds.maxX.getTime() : parameters.selectionBounds.maxX;
+                
+                if (cutoffTime < visibleMinTime) {
+                    postCutoffPoints.push(...individualPoints);
+                } else if (cutoffTime > visibleMaxTime) {
+                    if (parameters.rendering === 'shadow') {
+                        postCutoffPoints.push(...individualPoints);
+                    } else {
+                        preCutoffPoints.push(...individualPoints);
+                    }
+                } else {
+                    const visibleCutoffRatio = (cutoffTime - visibleMinTime) / (visibleMaxTime - visibleMinTime);
+                    const renderWidth = this._gl.canvas.width;
+                    const cutoffPixelX = visibleCutoffRatio * renderWidth;
+                    
+                    individualPoints.forEach((point, index) => {
+                        const [pixelX, pixelY] = point;
+                        
+                        if (pixelX < cutoffPixelX) {
+                            preCutoffPoints.push(point);
+                        } else {
+                            postCutoffPoints.push(point);
+                        }
+                    });
+                    }
+                }
+                
+                if (preCutoffPoints.length > 0) {
+                    const reducedOpacityColor = applyReducedOpacity(parameters.color, parameters.cutoffOpacity || 0.35);
+                    gl.uniform4f(gl.getUniformLocation(this._circleProgram, 'color'), ...colorToVector(reducedOpacityColor));
+                    
+                    gl.enableVertexAttribArray(0);
+                    gl.bindBuffer(gl.ARRAY_BUFFER, this._individualPointBuffer);
+                    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(preCutoffPoints.flat()), gl.STATIC_DRAW);
+                    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+                    gl.drawArrays(gl.POINTS, 0, preCutoffPoints.length);
+                }
+                
+                if (postCutoffPoints.length > 0) {
+                    gl.uniform4f(gl.getUniformLocation(this._circleProgram, 'color'), ...colorToVector(parameters.color));
+                    
+                    gl.enableVertexAttribArray(0);
+                    gl.bindBuffer(gl.ARRAY_BUFFER, this._individualPointBuffer);
+                    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(postCutoffPoints.flat()), gl.STATIC_DRAW);
+                    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+                    gl.drawArrays(gl.POINTS, 0, postCutoffPoints.length);
+                }
+            } else {
+                gl.uniform4f(gl.getUniformLocation(this._circleProgram, 'color'), ...colorToVector(parameters.color));
+
+                gl.enableVertexAttribArray(0);
+                gl.bindBuffer(gl.ARRAY_BUFFER, this._individualPointBuffer);
+                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(individualPoints.flat()), gl.STATIC_DRAW);
+                gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
 
-            gl.drawArrays(gl.POINTS, 0, individualPoints.length);
+                gl.drawArrays(gl.POINTS, 0, individualPoints.length);
+            }
         }
     }
 
+    drawLineWithCutoff(dataInRenderSpace, parameters) {
+        const { cutoffIndex, cutoffOpacity, originalData, selectionBounds } = parameters;
+        
+        let cutoffTime;
+        if (typeof originalData[0] === 'object' && originalData[0].length === 2) {
+            const baseIndex = Math.floor(cutoffIndex);
+            const fraction = cutoffIndex - baseIndex;
+            
+            if (fraction === 0 || baseIndex >= originalData.length - 1) {
+                const cutoffDate = originalData[Math.min(baseIndex, originalData.length - 1)][0];
+                cutoffTime = cutoffDate instanceof Date ? cutoffDate.getTime() : cutoffDate;
+            } else {
+                const currentDate = originalData[baseIndex][0];
+                const nextDate = originalData[baseIndex + 1][0];
+                const currentTime = currentDate instanceof Date ? currentDate.getTime() : currentDate;
+                const nextTime = nextDate instanceof Date ? nextDate.getTime() : nextDate;
+                cutoffTime = currentTime + fraction * (nextTime - currentTime);
+            }
+        } else {
+            cutoffTime = cutoffIndex; 
+        }
+
+        if (parameters.isPreview) {
+            const firstTime = originalData[0][0] instanceof Date ? originalData[0][0].getTime() : originalData[0][0];
+            const lastTime = originalData[originalData.length - 1][0] instanceof Date ? 
+                originalData[originalData.length - 1][0].getTime() : originalData[originalData.length - 1][0];
+            const timeRatio = (cutoffTime - firstTime) / (lastTime - firstTime);
+            
+            if (timeRatio < 0) {
+                this.draw(dataInRenderSpace, { ...parameters, renderCutoffGradient: false });
+            } else if (timeRatio > 1) {
+                const reducedOpacityColor = this.applyReducedOpacity(parameters.color, cutoffOpacity);
+                this.draw(dataInRenderSpace, { 
+                    ...parameters, 
+                    color: reducedOpacityColor,
+                    renderCutoffGradient: false 
+                });
+            } else {
+                const gl = this._gl;
+                gl.enable(gl.BLEND);
+                gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+                
+                this.draw(dataInRenderSpace, {
+                    ...parameters,
+                    renderCutoffGradient: false,
+                    cutoffX: timeRatio,
+                    cutoffOpacity: cutoffOpacity || 0.35
+                });
+            }
+        } else {
+            if (!selectionBounds) {
+                this.draw(dataInRenderSpace, { ...parameters, renderCutoffGradient: false });
+                return;
+            }
+        
+            const visibleMinTime = selectionBounds.minX instanceof Date ? selectionBounds.minX.getTime() : selectionBounds.minX;
+            const visibleMaxTime = selectionBounds.maxX instanceof Date ? selectionBounds.maxX.getTime() : selectionBounds.maxX;
+
+            if (cutoffTime < visibleMinTime) {
+                this.draw(dataInRenderSpace, { ...parameters, renderCutoffGradient: false });
+            } else if (cutoffTime > visibleMaxTime) {
+                const reducedOpacityColor = this.applyReducedOpacity(parameters.color, cutoffOpacity);
+                this.draw(dataInRenderSpace, { 
+                    ...parameters, 
+                    color: reducedOpacityColor,
+                    renderCutoffGradient: false 
+                });
+            } else {
+                const visibleCutoffRatio = (cutoffTime - visibleMinTime) / (visibleMaxTime - visibleMinTime);
+                
+                const gl = this._gl;
+                gl.enable(gl.BLEND);
+                gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+                
+                this.draw(dataInRenderSpace, {
+                    ...parameters,
+                    renderCutoffGradient: false,
+                    cutoffX: visibleCutoffRatio,
+                    cutoffOpacity: cutoffOpacity || 0.35
+                });
+            }
+        }
+    }
 }