@windborne/grapher 1.0.26 → 1.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windborne/grapher",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "description": "Graphing library",
   "main": "src/index.js",
   "module": "dist/bundle.esm.js",

package/src/components/range_graph.jsx

@@ -335,6 +335,8 @@ export default class RangeGraph extends React.PureComponent {
                                 width={pixelMaxX - pixelMinX}
                                 height={totalHeight}
                                 className="target-selection-outline"
+                                onMouseDown={this.startScroll}
+                                onTouchStart={this.startScroll}
                             />
                         </g>
 

package/src/grapher.scss

@@ -675,7 +675,8 @@
 
         .target-selection-outline {
           stroke: $range-graph-selection-outline-color;
-          fill: none;
+          cursor: ew-resize;
+          fill: transparent;
         }
 
         .selection-bar-track {

package/src/renderer/graph_body_renderer.js

@@ -109,7 +109,23 @@ export default class GraphBodyRenderer extends Eventable {
         }
         
         let cutoffIndex = -1;
-        // cutoff time calculations for visible bounds-based approach
+        let cutoffTime = null; 
+        let cutoffData = singleSeries.data; 
+
+        const isObjectFormat = singleSeries.data && singleSeries.data.length > 0 && 
+                              typeof singleSeries.data[0] === 'object' && 
+                              !Array.isArray(singleSeries.data[0]);
+        
+        if (isObjectFormat && singleSeries.cutoffTime) {
+            cutoffData = singleSeries.data.map(point => {
+                const xValue = point[singleSeries.xKey || 'x'];
+                const yValue = point[singleSeries.yKey || 'y'];
+                
+                const convertedX = typeof xValue === 'string' ? new Date(xValue) : xValue;
+                
+                return [convertedX, yValue];
+            });
+        }
         
         if (singleSeries.cutoffTime && singleSeries.data && singleSeries.data.length > 0) {
             let cutoffDate;
@@ -121,40 +137,48 @@ export default class GraphBodyRenderer extends Eventable {
                 cutoffDate = singleSeries.cutoffTime;
             }
             
-            // getting the ghost point
-            const cutoffTime = cutoffDate instanceof Date ? cutoffDate.getTime() : cutoffDate;
+            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];
+            for (let i = 0; i < cutoffData.length - 1; i++) {
+                const currentPoint = cutoffData[i];
+                const nextPoint = cutoffData[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);
+                const currentTime = currentPoint[0] instanceof Date ? currentPoint[0].getTime() : currentPoint[0];
+                const nextTime = nextPoint[0] instanceof Date ? nextPoint[0].getTime() : nextPoint[0];
                 
                 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;
+                cutoffIndex = cutoffData.length - 1;
             }
-            
-            
-            // Note: cutoffIndex is used for cutoff calculations but we no longer split data
         }
         
         const getIndividualPoints = (useDataSpace) => {
+            if (!useDataSpace && inRenderSpace && inRenderSpace.yValues) {
+                const individualPoints = [];
+                const { yValues, nullMask } = inRenderSpace;
+                
+                for (let pixelX = 0; pixelX < yValues.length; pixelX++) {
+                    if (nullMask[pixelX] === 0) {
+                        individualPoints.push([pixelX, yValues[pixelX]]);
+                    }
+                }
+                
+                if (individualPoints.length === 0) {
+                    return getIndividualPoints(true);
+                }
+                
+                return individualPoints;
+            }
+
             if (!bounds) {
                 bounds = singleSeries.axis.currentBounds;
             }
@@ -165,17 +189,33 @@ export default class GraphBodyRenderer extends Eventable {
                 data = singleSeries.inDataSpace;
             }
 
-            for (let [x, y] of data) {
-                if (y === null) {
+            for (let i = 0; i < data.length; i++) {
+                let x, y;
+                
+                if (Array.isArray(data[i])) {
+                    [x, y] = data[i];
+                } else if (typeof data[i] === 'object' && data[i] !== null) {
+                    x = data[i][singleSeries.xKey];
+                    y = data[i][singleSeries.yKey];
+                } else {
+                    continue;
+                }
+                
+                if (y === null || y === undefined) {
                     continue;
                 }
 
+                let xValue = x instanceof Date ? x.getTime() : x;
+                let boundsMinX = bounds.minX instanceof Date ? bounds.minX.getTime() : bounds.minX;
+                let boundsMaxX = bounds.maxX instanceof Date ? bounds.maxX.getTime() : bounds.maxX;
+
                 individualPoints.push([
-                    (x - bounds.minX) / (bounds.maxX - bounds.minX) * this._sizing.renderWidth,
+                    (xValue - boundsMinX) / (boundsMaxX - boundsMinX) * this._sizing.renderWidth,
                     (1.0 - (y - bounds.minY) / (bounds.maxY - bounds.minY)) * this._sizing.renderHeight
                 ]);
             }
 
+
             return individualPoints;
         };
 
@@ -224,7 +264,6 @@ export default class GraphBodyRenderer extends Eventable {
                 return;
             }
             
-            //we still need a canvas context for cpu stuff
             if (!this._context2d) {
                 this._context2d = this._canvas.getContext('2d', { willReadFrequently: false });
             }
@@ -235,7 +274,6 @@ export default class GraphBodyRenderer extends Eventable {
             }
 
             if (this._webgl) {
-                // make sure we don't have any webgl stuff in the way before we get back to CPU rendering
                 this._context.flush();
             }
 
@@ -275,7 +313,7 @@ export default class GraphBodyRenderer extends Eventable {
             if (singleSeries.cutoffTime) {
                 barParams.cutoffIndex = cutoffIndex;
                 barParams.cutoffOpacity = 0.35;
-                barParams.originalData = singleSeries.data;
+                barParams.originalData = cutoffData;
                 barParams.renderCutoffGradient = cutoffIndex >= 0; 
                 
                 const selection = this === this._stateController.rangeGraphRenderer 
@@ -301,11 +339,10 @@ export default class GraphBodyRenderer extends Eventable {
                 inRenderSpaceAreaBottom
             };
 
-        // add cutoff information for gradient area rendering
         if (singleSeries.cutoffTime) {
             areaParams.cutoffIndex = cutoffIndex;
             areaParams.cutoffOpacity = 0.35;
-            areaParams.originalData = singleSeries.data;
+            areaParams.originalData = cutoffData;
             areaParams.renderCutoffGradient = cutoffIndex >= 0; 
             areaParams.isPreview = this === this._stateController.rangeGraphRenderer; 
             
@@ -344,7 +381,9 @@ export default class GraphBodyRenderer extends Eventable {
             
             let zero = singleSeries.zeroLineY === 'bottom' ?
                 this._sizing.renderHeight :
-                (1.0 - ((singleSeries.zeroLineY || 0) - bounds.minY) / (bounds.maxY - bounds.minY)) * this._sizing.renderHeight;
+                singleSeries.zeroLineY !== undefined ? 
+                    (1.0 - ((singleSeries.zeroLineY) - bounds.minY) / (bounds.maxY - bounds.minY)) * this._sizing.renderHeight :
+                    this._sizing.renderHeight;
                 
             const boundsChanged = !this._lastBounds || 
                 bounds.minY !== this._lastBounds.minY || 
@@ -372,21 +411,20 @@ export default class GraphBodyRenderer extends Eventable {
                 inRenderSpaceAreaBottom
             };
 
-            // add cutoff information for gradient shadow rendering
             if (singleSeries.cutoffTime) {
                 shadowParams.cutoffIndex = cutoffIndex;
                 shadowParams.cutoffOpacity = 0.35;
-                shadowParams.originalData = singleSeries.data;
+                shadowParams.originalData = cutoffData;
                 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;
+                shadowParams.selectionBounds = selection || bounds;
             }
 
-            this._shadowProgram.draw(getIndividualPoints(true), shadowParams);
+            this._shadowProgram.draw(getIndividualPoints(false), shadowParams);
             
             if (this._webgl) {
                 const gl = this._context;
@@ -398,7 +436,6 @@ export default class GraphBodyRenderer extends Eventable {
             
             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;
@@ -410,7 +447,6 @@ export default class GraphBodyRenderer extends Eventable {
                     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';
@@ -460,20 +496,18 @@ export default class GraphBodyRenderer extends Eventable {
             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.originalData = cutoffData;
+            drawParams.renderCutoffGradient = cutoffIndex >= 0;
             drawParams.currentBounds = bounds;
-            drawParams.isPreview = this === this._stateController.rangeGraphRenderer; // Flag for preview rendering
+            drawParams.isPreview = this === this._stateController.rangeGraphRenderer;
             
-            // Always set selectionBounds with fallback
             const selection = this === this._stateController.rangeGraphRenderer 
                 ? this._stateController._bounds 
                 : (this._stateController._selection || this._stateController._bounds);
-            drawParams.selectionBounds = selection;
+            drawParams.selectionBounds = selection || bounds;    
         }
         
         if (this._webgl) {

package/src/renderer/line_program.js

@@ -108,7 +108,7 @@ export default class LineProgram {
         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;
+        const cutoffOpacity = parameters.cutoffOpacity !== undefined ? parameters.cutoffOpacity : 0.35;
         
         gl.uniform1f(gl.getUniformLocation(this._program, 'cutoffX'), cutoffX);
         gl.uniform1f(gl.getUniformLocation(this._program, 'cutoffOpacity'), cutoffOpacity);
@@ -260,7 +260,7 @@ export default class LineProgram {
             if (timeRatio < 0) {
                 this.draw(dataInRenderSpace, { ...parameters, renderCutoffGradient: false });
             } else if (timeRatio > 1) {
-                const reducedOpacityColor = this.applyReducedOpacity(parameters.color, cutoffOpacity);
+                const reducedOpacityColor = applyReducedOpacity(parameters.color, cutoffOpacity);
                 this.draw(dataInRenderSpace, { 
                     ...parameters, 
                     color: reducedOpacityColor,
@@ -290,7 +290,7 @@ export default class LineProgram {
             if (cutoffTime < visibleMinTime) {
                 this.draw(dataInRenderSpace, { ...parameters, renderCutoffGradient: false });
             } else if (cutoffTime > visibleMaxTime) {
-                const reducedOpacityColor = this.applyReducedOpacity(parameters.color, cutoffOpacity);
+                const reducedOpacityColor = applyReducedOpacity(parameters.color, cutoffOpacity);
                 this.draw(dataInRenderSpace, { 
                     ...parameters, 
                     color: reducedOpacityColor,

package/src/renderer/shadow_program.js

@@ -189,6 +189,7 @@ export default class ShadowProgram {
    * @param {Object} params - Rendering parameters
    */
   draw(individualPoints, params) {
+
     if (!individualPoints || individualPoints.length < 2) {
       return;
     }
@@ -211,6 +212,7 @@ export default class ShadowProgram {
     const trapezoids = [];
     const { zero, inRenderSpaceAreaBottom } = params;
 
+
     for (let i = 0; i < individualPoints.length - 1; i++) {
       const [x1, y1] = individualPoints[i];
       const [x2, y2] = individualPoints[i + 1];
@@ -256,6 +258,7 @@ export default class ShadowProgram {
       }
     }
 
+
     if (trapezoids.length === 0) {
       return;
     }
@@ -329,6 +332,13 @@ export default class ShadowProgram {
     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, geometry.indices, gl.STATIC_DRAW);
 
     gl.drawElements(gl.TRIANGLES, geometry.indices.length, gl.UNSIGNED_INT, 0);
+    
+    const error = gl.getError();
+    if (error !== gl.NO_ERROR) {
+        console.error('WebGL error in shadow rendering:', error);
+    } else {
+      //he he he haw
+    }
   }
 
   /**
@@ -337,45 +347,56 @@ export default class ShadowProgram {
    * @param {Object} params - Rendering parameters with cutoff info
    */
   drawShadowWithCutoff(individualPoints, params) {
+
     const { cutoffIndex, cutoffOpacity, originalData, selectionBounds, zero } =
       params;
 
     this._lastIndividualPoints = null;
     this._lastParams = null;
 
+    // All cutoff data is now in tuple format [x, y] from graph_body_renderer
     let cutoffTime;
-    if (typeof originalData[0] === "object" && originalData[0].length === 2) {
+    
+    if (Array.isArray(originalData[0]) && 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;
+        const cutoffItem = originalData[Math.min(baseIndex, originalData.length - 1)];
+        const cutoffDate = cutoffItem[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;
+        const currentItem = originalData[baseIndex];
+        const nextItem = originalData[baseIndex + 1];
+        const currentDate = currentItem[0];
+        const nextDate = nextItem[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;
     }
 
-    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);
+    const visibleBounds = params.selectionBounds;
+    let firstTime, lastTime;
+    
+    if (visibleBounds && visibleBounds.minX !== undefined && visibleBounds.maxX !== undefined) {
+        firstTime = visibleBounds.minX instanceof Date ? visibleBounds.minX.getTime() : visibleBounds.minX;
+        lastTime = visibleBounds.maxX instanceof Date ? visibleBounds.maxX.getTime() : visibleBounds.maxX;
+    } else {
+        const firstItem = originalData[0];
+        const lastItem = originalData[originalData.length - 1];
+        const firstX = firstItem[0];
+        const lastX = lastItem[0];
+        
+        firstTime = firstX instanceof Date ? firstX.getTime() : firstX;
+        lastTime = lastX instanceof Date ? lastX.getTime() : lastX;
+    }
+    
+    const timeDiff = cutoffTime - firstTime;
+    const totalTime = lastTime - firstTime;
+    const timeRatio = timeDiff / totalTime;
 
     if (timeRatio < 0) {
       this.draw(individualPoints, { ...params, renderCutoffGradient: false });
@@ -392,7 +413,7 @@ export default class ShadowProgram {
     } else {
       this.drawSplitShadowTrapezoids(
         individualPoints,
-        params,
+        { ...params, selectionBounds: params.selectionBounds },
         timeRatio,
         cutoffTime
       );
@@ -407,41 +428,41 @@ export default class ShadowProgram {
    * @param {number} cutoffTime - Cutoff timestamp
    */
   drawSplitShadowTrapezoids(individualPoints, params, timeRatio, cutoffTime) {
-    const { zero, cutoffOpacity } = params;
+    const { zero, cutoffOpacity, selectionBounds } = params;
     const gl = this._gl;
 
-    const renderCutoffIndex = timeRatio * (individualPoints.length - 1);
-    const splitIndex = Math.floor(renderCutoffIndex);
-    const fraction = renderCutoffIndex - splitIndex;
-
-    let ghostPoint = null;
-    if (
-      splitIndex >= 0 &&
-      splitIndex < individualPoints.length - 1 &&
-      fraction > 0
-    ) {
-      const beforePoint = individualPoints[splitIndex];
-      const afterPoint = individualPoints[splitIndex + 1];
-      ghostPoint = [
-        beforePoint[0] + fraction * (afterPoint[0] - beforePoint[0]),
-        beforePoint[1] + fraction * (afterPoint[1] - beforePoint[1]),
-      ];
-    }
+    const renderWidth = gl.canvas.width;
+    const cutoffPixelX = timeRatio * renderWidth;
 
     const preCutoffPoints = [];
-    for (let i = 0; i <= splitIndex && i < individualPoints.length; i++) {
-      preCutoffPoints.push(individualPoints[i]);
-    }
-    if (ghostPoint && splitIndex < individualPoints.length - 1) {
-      preCutoffPoints.push(ghostPoint);
-    }
-
     const postCutoffPoints = [];
-    if (ghostPoint && splitIndex < individualPoints.length - 1) {
-      postCutoffPoints.push(ghostPoint);
+    
+    for (let i = 0; i < individualPoints.length; i++) {
+        const [pixelX, pixelY] = individualPoints[i];
+        
+        if (pixelX < cutoffPixelX) {
+            preCutoffPoints.push(individualPoints[i]);
+        } else {
+            postCutoffPoints.push(individualPoints[i]);
+        }
     }
-    for (let i = splitIndex + 1; i < individualPoints.length; i++) {
-      postCutoffPoints.push(individualPoints[i]);
+    
+    let ghostPoint = null;
+    if (preCutoffPoints.length > 0 && postCutoffPoints.length > 0) {
+        const lastPrePoint = preCutoffPoints[preCutoffPoints.length - 1];
+        const firstPostPoint = postCutoffPoints[0];
+        
+        const [x1, y1] = lastPrePoint;
+        const [x2, y2] = firstPostPoint;
+        
+        if (x2 !== x1) {
+            const interpolationRatio = (cutoffPixelX - x1) / (x2 - x1);
+            const ghostY = y1 + interpolationRatio * (y2 - y1);
+            ghostPoint = [cutoffPixelX, ghostY];
+            
+            preCutoffPoints.push(ghostPoint);
+            postCutoffPoints.unshift(ghostPoint);
+        }
     }
 
     if (preCutoffPoints.length >= 2) {
@@ -467,6 +488,7 @@ export default class ShadowProgram {
         gradient: translucentGradient,
         renderCutoffGradient: false,
       });
+    } else {
     }
 
     if (postCutoffPoints.length >= 2) {
@@ -474,6 +496,7 @@ export default class ShadowProgram {
         ...params,
         renderCutoffGradient: false,
       });
+    } else {
     }
   }
 }