Fix the incorrect first counters on the graphs when zoomed in

src/actions/profile-view.js

@@ -349,9 +349,7 @@ export function selectTrack(
           case 'memory': {
             const { counterIndex } = localTrack;
             const counterSelectors = getCounterSelectors(counterIndex);
-            const counter = counterSelectors.getCommittedRangeFilteredCounter(
-              getState()
-            );
+            const counter = counterSelectors.getCounter(getState());
             selectedThreadIndex = counter.mainThreadIndex;
             break;
           }
@@ -363,9 +361,7 @@ export function selectTrack(
           case 'power': {
             const { counterIndex } = localTrack;
             const counterSelectors = getCounterSelectors(counterIndex);
-            const counter = counterSelectors.getCommittedRangeFilteredCounter(
-              getState()
-            );
+            const counter = counterSelectors.getCounter(getState());
             selectedThreadIndex = counter.mainThreadIndex;
             break;
           }

src/components/timeline/TrackMemory.js

@@ -90,7 +90,7 @@ export const TrackMemory = explicitConnect<OwnProps, StateProps, DispatchProps>(
     mapStateToProps: (state, ownProps) => {
       const { counterIndex } = ownProps;
       const counterSelectors = getCounterSelectors(counterIndex);
-      const counter = counterSelectors.getCommittedRangeFilteredCounter(state);
+      const counter = counterSelectors.getCounter(state);
       const { start, end } = getCommittedRange(state);
       return {
         threadIndex: counter.mainThreadIndex,

src/components/timeline/TrackMemoryGraph.js

@@ -33,6 +33,7 @@ import type {
   Milliseconds,
   CssPixels,
   StartEndRange,
+  IndexIntoSamplesTable,
 } from 'firefox-profiler/types';
 
 import type { SizeProps } from 'firefox-profiler/components/shared/WithSize';
@@ -47,6 +48,7 @@ type CanvasProps = {|
   +rangeStart: Milliseconds,
   +rangeEnd: Milliseconds,
   +counter: Counter,
+  +counterSampleRanges: Array<[IndexIntoSamplesTable, IndexIntoSamplesTable]>,
   +accumulatedSamples: AccumulatedCounterSamples[],
   +interval: Milliseconds,
   +width: CssPixels,
@@ -77,6 +79,7 @@ class TrackMemoryCanvas extends React.PureComponent<CanvasProps> {
       lineWidth,
       interval,
       accumulatedSamples,
+      counterSampleRanges,
     } = this.props;
     if (width === 0) {
       // This is attempting to draw before the canvas was laid out.
@@ -100,7 +103,7 @@ class TrackMemoryCanvas extends React.PureComponent<CanvasProps> {
     ctx.clearRect(0, 0, deviceWidth, deviceHeight);
 
     const sampleGroups = counter.sampleGroups;
-    if (sampleGroups.length === 0) {
+    if (sampleGroups.length === 0 || counterSampleRanges.length === 0) {
       // Gecko failed to capture samples for some reason and it shouldn't happen for
       // malloc counter. Print an error and do not draw anything.
       throw new Error('No sample group found for memory counter');
@@ -121,6 +124,7 @@ class TrackMemoryCanvas extends React.PureComponent<CanvasProps> {
       throw new Error('No accumulated sample found for memory counter');
     }
     const { minCount, countRange, accumulatedCounts } = accumulatedSamples[0];
+    const [sampleStart, sampleEnd] = counterSampleRanges[0];
 
     {
       // Draw the chart.
@@ -142,7 +146,7 @@ class TrackMemoryCanvas extends React.PureComponent<CanvasProps> {
       let x = 0;
       let y = 0;
       let firstX = 0;
-      for (let i = 0; i < samples.length; i++) {
+      for (let i = sampleStart; i < sampleEnd; i++) {
         // Create a path for the top of the chart. This is the line that will have
         // a stroke applied to it.
         x = (samples.time[i] - rangeStart) * millisecondWidth;
@@ -253,6 +257,7 @@ type StateProps = {|
   +rangeStart: Milliseconds,
   +rangeEnd: Milliseconds,
   +counter: Counter,
+  +counterSampleRanges: Array<[IndexIntoSamplesTable, IndexIntoSamplesTable]>,
   +accumulatedSamples: AccumulatedCounterSamples[],
   +interval: Milliseconds,
   +filteredThread: Thread,
@@ -297,7 +302,14 @@ class TrackMemoryGraphImpl extends React.PureComponent<Props, State> {
     const { pageX: mouseX, pageY: mouseY } = event;
     // Get the offset from here, and apply it to the time lookup.
     const { left } = event.currentTarget.getBoundingClientRect();
-    const { width, rangeStart, rangeEnd, counter, interval } = this.props;
+    const {
+      width,
+      rangeStart,
+      rangeEnd,
+      counter,
+      interval,
+      counterSampleRanges,
+    } = this.props;
     const rangeLength = rangeEnd - rangeStart;
     const timeAtMouse = rangeStart + ((mouseX - left) / width) * rangeLength;
 
@@ -317,7 +329,13 @@ class TrackMemoryGraphImpl extends React.PureComponent<Props, State> {
     } else {
       // When the mouse pointer hovers between two points, select the point that's closer.
       let hoveredCounter;
-      const bisectionCounter = bisectionRight(samples.time, timeAtMouse);
+      const [sampleStart, sampleEnd] = counterSampleRanges[0];
+      const bisectionCounter = bisectionRight(
+        samples.time,
+        timeAtMouse,
+        sampleStart,
+        sampleEnd
+      );
       if (bisectionCounter > 0 && bisectionCounter < samples.time.length) {
         const leftDistance = timeAtMouse - samples.time[bisectionCounter - 1];
         const rightDistance = samples.time[bisectionCounter] - timeAtMouse;
@@ -464,6 +482,7 @@ class TrackMemoryGraphImpl extends React.PureComponent<Props, State> {
       rangeEnd,
       unfilteredSamplesRange,
       counter,
+      counterSampleRanges,
       graphHeight,
       width,
       lineWidth,
@@ -480,6 +499,7 @@ class TrackMemoryGraphImpl extends React.PureComponent<Props, State> {
           rangeStart={rangeStart}
           rangeEnd={rangeEnd}
           counter={counter}
+          counterSampleRanges={counterSampleRanges}
           height={graphHeight}
           width={width}
           lineWidth={lineWidth}
@@ -512,15 +532,18 @@ export const TrackMemoryGraph = explicitConnect<
   mapStateToProps: (state, ownProps) => {
     const { counterIndex } = ownProps;
     const counterSelectors = getCounterSelectors(counterIndex);
-    const counter = counterSelectors.getCommittedRangeFilteredCounter(state);
+    const counter = counterSelectors.getCounter(state);
     const { start, end } = getCommittedRange(state);
+    const counterSampleRanges =
+      counterSelectors.getCommittedRangeCounterSampleRanges(state);
     const selectors = getThreadSelectors(counter.mainThreadIndex);
     return {
       counter,
       threadIndex: counter.mainThreadIndex,
       accumulatedSamples: counterSelectors.getAccumulateCounterSamples(state),
       rangeStart: start,
       rangeEnd: end,
+      counterSampleRanges,
       interval: getProfileInterval(state),
       filteredThread: selectors.getFilteredThread(state),
       unfilteredSamplesRange: selectors.unfilteredSamplesRange(state),

src/components/timeline/TrackPower.js

@@ -70,7 +70,7 @@ export const TrackPower = explicitConnect<OwnProps, StateProps, DispatchProps>({
   mapStateToProps: (state, ownProps) => {
     const { counterIndex } = ownProps;
     const counterSelectors = getCounterSelectors(counterIndex);
-    const counter = counterSelectors.getCommittedRangeFilteredCounter(state);
+    const counter = counterSelectors.getCounter(state);
     const { start, end } = getCommittedRange(state);
     return {
       threadIndex: counter.mainThreadIndex,

src/components/timeline/TrackPowerGraph.js

@@ -28,6 +28,7 @@ import type {
   Milliseconds,
   CssPixels,
   StartEndRange,
+  IndexIntoSamplesTable,
 } from 'firefox-profiler/types';
 
 import type { SizeProps } from 'firefox-profiler/components/shared/WithSize';
@@ -42,6 +43,7 @@ type CanvasProps = {|
   +rangeStart: Milliseconds,
   +rangeEnd: Milliseconds,
   +counter: Counter,
+  +counterSampleRanges: Array<[IndexIntoSamplesTable, IndexIntoSamplesTable]>,
   +maxCounterSampleCountsPerMs: number[],
   +interval: Milliseconds,
   +width: CssPixels,
@@ -68,6 +70,7 @@ class TrackPowerCanvas extends React.PureComponent<CanvasProps> {
       lineWidth,
       interval,
       maxCounterSampleCountsPerMs,
+      counterSampleRanges,
     } = this.props;
     if (width === 0) {
       // This is attempting to draw before the canvas was laid out.
@@ -91,7 +94,7 @@ class TrackPowerCanvas extends React.PureComponent<CanvasProps> {
     ctx.clearRect(0, 0, deviceWidth, deviceHeight);
 
     const sampleGroups = counter.sampleGroups;
-    if (sampleGroups.length === 0) {
+    if (sampleGroups.length === 0 || counterSampleRanges.length === 0) {
       // Gecko failed to capture samples for some reason and it shouldn't happen for
       // malloc counter. Print an error and do not draw anything.
       throw new Error('No sample group found for power counter');
@@ -103,6 +106,7 @@ class TrackPowerCanvas extends React.PureComponent<CanvasProps> {
       return;
     }
 
+    const [sampleStart, sampleEnd] = counterSampleRanges[0];
     const countRangePerMs = maxCounterSampleCountsPerMs[0];
 
     {
@@ -125,7 +129,7 @@ class TrackPowerCanvas extends React.PureComponent<CanvasProps> {
       let x = 0;
       let y = 0;
       let firstX = 0;
-      for (let i = 0; i < samples.length; i++) {
+      for (let i = sampleStart; i < sampleEnd; i++) {
         // Create a path for the top of the chart. This is the line that will have
         // a stroke applied to it.
         x = (samples.time[i] - rangeStart) * millisecondWidth;
@@ -208,6 +212,7 @@ type StateProps = {|
   +rangeStart: Milliseconds,
   +rangeEnd: Milliseconds,
   +counter: Counter,
+  +counterSampleRanges: Array<[IndexIntoSamplesTable, IndexIntoSamplesTable]>,
   +maxCounterSampleCountsPerMs: number[],
   +interval: Milliseconds,
   +filteredThread: Thread,
@@ -246,7 +251,14 @@ class TrackPowerGraphImpl extends React.PureComponent<Props, State> {
     const { pageX: mouseX, pageY: mouseY } = event;
     // Get the offset from here, and apply it to the time lookup.
     const { left } = event.currentTarget.getBoundingClientRect();
-    const { width, rangeStart, rangeEnd, counter, interval } = this.props;
+    const {
+      width,
+      rangeStart,
+      rangeEnd,
+      counter,
+      interval,
+      counterSampleRanges,
+    } = this.props;
     const rangeLength = rangeEnd - rangeStart;
     const timeAtMouse = rangeStart + ((mouseX - left) / width) * rangeLength;
 
@@ -266,7 +278,13 @@ class TrackPowerGraphImpl extends React.PureComponent<Props, State> {
     } else {
       // When the mouse pointer hovers between two points, select the point that's closer.
       let hoveredCounter;
-      const bisectionCounter = bisectionRight(samples.time, timeAtMouse);
+      const [sampleStart, sampleEnd] = counterSampleRanges[0];
+      const bisectionCounter = bisectionRight(
+        samples.time,
+        timeAtMouse,
+        sampleStart,
+        sampleEnd
+      );
       if (bisectionCounter > 0 && bisectionCounter < samples.time.length) {
         const leftDistance = timeAtMouse - samples.time[bisectionCounter - 1];
         const rightDistance = samples.time[bisectionCounter] - timeAtMouse;
@@ -418,6 +436,7 @@ class TrackPowerGraphImpl extends React.PureComponent<Props, State> {
       rangeEnd,
       unfilteredSamplesRange,
       counter,
+      counterSampleRanges,
       graphHeight,
       width,
       lineWidth,
@@ -434,6 +453,7 @@ class TrackPowerGraphImpl extends React.PureComponent<Props, State> {
           rangeStart={rangeStart}
           rangeEnd={rangeEnd}
           counter={counter}
+          counterSampleRanges={counterSampleRanges}
           height={graphHeight}
           width={width}
           lineWidth={lineWidth}
@@ -466,8 +486,11 @@ export const TrackPowerGraph = explicitConnect<
   mapStateToProps: (state, ownProps) => {
     const { counterIndex } = ownProps;
     const counterSelectors = getCounterSelectors(counterIndex);
-    const counter = counterSelectors.getCommittedRangeFilteredCounter(state);
+    const counter = counterSelectors.getCounter(state);
     const { start, end } = getCommittedRange(state);
+    const counterSampleRanges =
+      counterSelectors.getCommittedRangeCounterSampleRanges(state);
+
     const selectors = getThreadSelectors(counter.mainThreadIndex);
     return {
       counter,
@@ -476,6 +499,7 @@ export const TrackPowerGraph = explicitConnect<
         counterSelectors.getMaxRangeCounterSampleCountsPerMs(state),
       rangeStart: start,
       rangeEnd: end,
+      counterSampleRanges,
       interval: getProfileInterval(state),
       filteredThread: selectors.getFilteredThread(state),
       unfilteredSamplesRange: selectors.unfilteredSamplesRange(state),

src/components/timeline/TrackProcessCPU.js

@@ -45,7 +45,7 @@ type Props = ConnectedProps<OwnProps, StateProps, DispatchProps>;
 
 type State = {||};
 
-export class TracProcessCPUImpl extends React.PureComponent<Props, State> {
+export class TrackProcessCPUImpl extends React.PureComponent<Props, State> {
   render() {
     const { counterIndex } = this.props;
     return (
@@ -74,7 +74,7 @@ export const TrackProcessCPU = explicitConnect<
   mapStateToProps: (state, ownProps) => {
     const { counterIndex } = ownProps;
     const counterSelectors = getCounterSelectors(counterIndex);
-    const counter = counterSelectors.getCommittedRangeFilteredCounter(state);
+    const counter = counterSelectors.getCounter(state);
     const { start, end } = getCommittedRange(state);
     return {
       threadIndex: counter.mainThreadIndex,
@@ -83,5 +83,5 @@ export const TrackProcessCPU = explicitConnect<
     };
   },
   mapDispatchToProps: { updatePreviewSelection },
-  component: TracProcessCPUImpl,
+  component: TrackProcessCPUImpl,
 });