A few zooming in/out with plots display issue fixes.

src/plugins/plot/MctPlot.vue

@@ -646,11 +646,23 @@ export default {
 
       this.startLoading();
       const bounds = this.timeContext.getBounds();
+      let rangeBounds = {
+        start: bounds.start,
+        end: bounds.end
+      };
+      // If we have pan/zoom history, load based on the last viewed range instead of time conductor
+      if (this.plotHistory.length > 0) {
+        const historyRange = this.plotHistory.slice(-1)[0];
+        rangeBounds = {
+          start: historyRange.x.min,
+          end: historyRange.x.max
+        };
+      }
       const options = {
         size: this.$parent.$refs.plotWrapper.offsetWidth,
         domain: this.config.xAxis.get('key'),
-        start: bounds.start,
-        end: bounds.end
+        start: rangeBounds.start,
+        end: rangeBounds.end
       };
 
       series.load(options).then(this.stopLoading.bind(this));
@@ -1473,15 +1485,15 @@ export default {
       // Don't zoom if mouse moved less than 7.5 pixels.
       if (marqueeDistance > 7.5) {
         this.config.xAxis.set('displayRange', {
-          min: Math.min(this.marquee.start.x, this.marquee.end.x),
-          max: Math.max(this.marquee.start.x, this.marquee.end.x)
+          min: Math.round(Math.min(this.marquee.start.x, this.marquee.end.x)),
+          max: Math.round(Math.max(this.marquee.start.x, this.marquee.end.x))
         });
         this.yAxisListWithRange.forEach((yAxis) => {
           const yStartPosition = this.getYPositionForYAxis(this.marquee.start, yAxis);
           const yEndPosition = this.getYPositionForYAxis(this.marquee.end, yAxis);
           yAxis.set('displayRange', {
-            min: Math.min(yStartPosition, yEndPosition),
-            max: Math.max(yStartPosition, yEndPosition)
+            min: Math.round(Math.min(yStartPosition, yEndPosition)),
+            max: Math.round(Math.max(yStartPosition, yEndPosition))
           });
         });
         this.userViewportChangeEnd();

src/plugins/plot/chart/MCTChartAlarmLineSet.js

@@ -61,7 +61,7 @@ export default class MCTChartAlarmLineSet {
 
   makePoint(point, series) {
     if (!this.offset.xVal) {
-      this.chart.setOffset(point, undefined, series);
+      this.chart.setOffset(point, series);
     }
 
     return {
@@ -112,6 +112,7 @@ export default class MCTChartAlarmLineSet {
   reset() {
     this.limits = [];
     if (this.series.limits) {
+      this.chart.resetOffsets(this.offset);
       this.getLimitPoints(this.series);
     }
   }

src/plugins/plot/chart/MCTChartAlarmPointSet.js

@@ -43,6 +43,9 @@ export default class MCTChartAlarmPointSet {
 
   append(datum) {
     if (datum.mctLimitState) {
+      if (!this.offset.xVal) {
+        this.chart.setOffset(datum, this.series);
+      }
       this.points.push({
         x: this.offset.xVal(datum, this.series),
         y: this.offset.yVal(datum, this.series),
@@ -58,6 +61,7 @@ export default class MCTChartAlarmPointSet {
   }
 
   reset() {
+    this.chart.resetOffsets(this.offset);
     this.points = [];
   }
 

src/plugins/plot/chart/MCTChartSeriesElement.js

@@ -22,14 +22,17 @@
 
 import eventHelpers from '../lib/eventHelpers.js';
 
+const bufferSize = 20000;
+
 /** @abstract */
 export default class MCTChartSeriesElement {
   constructor(series, chart, offset) {
     this.series = series;
     this.chart = chart;
     this.offset = offset;
-    this.buffer = new Float32Array(20000);
+    this.buffer = new Float32Array(bufferSize);
     this.count = 0;
+    this.indexCount = 0;
 
     eventHelpers.extend(this);
 
@@ -94,7 +97,7 @@ export default class MCTChartSeriesElement {
 
   makePoint(point, series) {
     if (!this.offset.xVal) {
-      this.chart.setOffset(point, undefined, series);
+      this.chart.setOffset(point, series);
     }
 
     // Here x,y are the offsets of the current point from the first data point.
@@ -105,12 +108,15 @@ export default class MCTChartSeriesElement {
   }
 
   append(point, index, series) {
-    const pointsRequired = this.vertexCountForPointAtIndex(index);
-    const insertionPoint = this.startIndexForPointAtIndex(index);
-    this.growIfNeeded(pointsRequired);
-    this.makeInsertionPoint(insertionPoint, pointsRequired);
-    this.addPoint(this.makePoint(point, series), insertionPoint);
-    this.count += pointsRequired / 2;
+    if (this.chart.pointIsInRange(point, series, index)) {
+      const pointsRequired = this.vertexCountForPointAtIndex(this.indexCount);
+      const insertionPoint = this.startIndexForPointAtIndex(this.indexCount);
+      this.growIfNeeded(pointsRequired);
+      this.makeInsertionPoint(insertionPoint, pointsRequired);
+      this.addPoint(this.makePoint(point, series), insertionPoint);
+      this.count += pointsRequired / 2;
+      this.indexCount++;
+    }
   }
 
   makeInsertionPoint(insertionPoint, pointsRequired) {
@@ -129,10 +135,14 @@ export default class MCTChartSeriesElement {
   }
 
   reset() {
-    this.buffer = new Float32Array(20000);
+    this.buffer = new Float32Array(bufferSize);
     this.count = 0;
     //TODO: Should we call resetYOffsetAndSeriesDataForYAxis here?
+    this.indexCount = 0;
     if (this.offset.x) {
+      // reset the offset since we're starting over
+      // TODO: handle what happens when we zoom out - do we request the data again?
+      this.chart.resetOffsets(this.offset);
       this.series.getSeriesData().forEach(function (point, index) {
         this.append(point, index, this.series);
       }, this);
@@ -144,7 +154,7 @@ export default class MCTChartSeriesElement {
     let temp;
 
     if (remainingPoints <= pointsRequired) {
-      temp = new Float32Array(this.buffer.length + 20000);
+      temp = new Float32Array(this.buffer.length + bufferSize);
       temp.set(this.buffer);
       this.buffer = temp;
     }

src/plugins/plot/chart/MctChart.vue

@@ -366,6 +366,12 @@ export default {
       this.seriesModels.splice(seriesIndexToRemove, 1);
     },
     onAddPoint(point, insertIndex, series) {
+      // if user is not looking at data within the current bounds, don't draw the point
+      if (this.pointIsInRange(point, series, insertIndex)) {
+        this.scheduleDraw();
+      }
+    },
+    pointIsInRange(point, series, index) {
       const mainYAxisId = this.config.yAxis.get('id');
       const seriesYAxisId = series.get('yAxisId');
       const xRange = this.config.xAxis.get('displayRange');
@@ -378,19 +384,35 @@ export default {
           .find((yAxis) => yAxis.get('id') === seriesYAxisId)
           .get('displayRange');
       }
-
       const xValue = series.getXVal(point);
       const yValue = series.getYVal(point);
-
       // if user is not looking at data within the current bounds, don't draw the point
-      if (
-        xValue > xRange.min &&
-        xValue < xRange.max &&
-        yValue > yRange.min &&
-        yValue < yRange.max
-      ) {
-        this.scheduleDraw();
+
+      const inRange =
+        xValue > xRange.min && xValue < xRange.max && yValue > yRange.min && yValue < yRange.max;
+
+      if (inRange) {
+        return true;
+      }
+
+      // Include edge points for plot integrity (lines should continue to edge of plot)
+      // Only check if point is outside x range (y range doesn't affect this)
+      if (xValue < xRange.min || xValue > xRange.max) {
+        const seriesData = series.getSeriesData();
+
+        // Check before range, then after range
+        if (xValue < xRange.min && index < seriesData.length - 1) {
+          if (series.getXVal(seriesData[index + 1]) >= xRange.min) {
+            return true;
+          }
+        } else if (xValue > xRange.max && index > 0) {
+          if (series.getXVal(seriesData[index - 1]) <= xRange.max) {
+            return true;
+          }
+        }
       }
+
+      return false;
     },
     changeInterpolate(mode, o, series) {
       if (mode === o) {
@@ -478,6 +500,12 @@ export default {
         this.chartResizeObserver.disconnect();
       }
     },
+    resetOffsets(offset) {
+      delete offset.x;
+      delete offset.y;
+      delete offset.xVal;
+      delete offset.yVal;
+    },
     resetYOffsetAndSeriesDataForYAxis(yAxisId) {
       delete this.offset[yAxisId].y;
       delete this.offset[yAxisId].xVal;
@@ -505,17 +533,23 @@ export default {
         pointSet.reset();
       });
     },
-    setOffset(offsetPoint, index, series) {
+    // This function is designed to establish a relative coordinate system for a data series.
+    // It defines a specific data point as the new origin (0, 0).
+    // In the context of plotting large time-series data using relative time,
+    // this function is a key step in implementing the "Relative Time".
+    // It shifts the entire series so that one chosen point (offsets) now corresponds to zero on both the X and Y axes.
+    // Any subsequent data points are then plotted relative to this new origin (x - offsets.x and y - offsets.y)
+    setOffset(offsetPoint, series) {
       const mainYAxisId = this.config.yAxis.get('id');
       const yAxisId = series.get('yAxisId') || mainYAxisId;
       if (this.offset[yAxisId].x && this.offset[yAxisId].y) {
         return;
       }
 
-      const offsets = {
-        x: series.getXVal(offsetPoint),
-        y: series.getYVal(offsetPoint)
-      };
+      // Set the origin point.
+      let offsets = {};
+      offsets.x = series.getXVal(offsetPoint);
+      offsets.y = series.getYVal(offsetPoint);
 
       this.offset[yAxisId].x = function (x) {
         return x - offsets.x;

src/plugins/plot/configuration/PlotSeries.js

@@ -230,7 +230,7 @@ export default class PlotSeries extends Model {
       const newPoints = _(data)
         .concat(points)
         .sortBy(this.getXVal)
-        .uniq(true, (point) => [this.getXVal(point), this.getYVal(point)].join())
+        .uniqBy((point) => [this.getXVal(point), this.getYVal(point)].join())
         .value();
       this.reset(newPoints);
     } catch (error) {