feat: resize selection [WIP]

grafana · Aug 2, 2022 · 3978668 · 3978668
1 parent 6e76eff
commit 3978668
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 10 deletions.
diff --git a/webapp/javascript/components/TimelineChartSelection.ts b/webapp/javascript/components/TimelineChartSelection.ts
@@ -43,13 +43,17 @@ type EventHolderType = {
 
 type EventType = { pageX: number; pageY: number; which?: number };
 
+const xOffset = 8;
+const yOffset = 8;
+
 (function ($) {
   function init(plot: PlotType) {
     var selection = {
       first: { x: -1, y: -1 },
       second: { x: -1, y: -1 },
       show: false,
       active: false,
+      selectingSide: null,
     };
 
     // FIXME: The drag handling implemented here should be
@@ -102,9 +106,71 @@ type EventType = { pageX: number; pageY: number; which?: number };
           return false;
         };
       }
+      const opts = plot.getOptions();
+      const offset = plot.getPlaceholder().offset();
+      const plotOffset = plot.getPlotOffset();
+
+      const axes = plot.getAxes();
+      const extractedX = extractRange(axes, 'x');
+
+      const leftSelectionX =
+        Math.floor(extractedX.axis.p2c(opts.grid.markings[0]?.xaxis.from)) +
+        xOffset;
+
+      console.log('leftSelectionX', leftSelectionX);
+
+      const rightSelectionX =
+        Math.floor(extractedX.axis.p2c(opts.grid.markings[0]?.xaxis.to)) +
+        xOffset;
+
+      const selectionLength = rightSelectionX - leftSelectionX;
+
+      console.log('rightSelectionX', rightSelectionX);
+
+      console.log('selectionLength', selectionLength);
+
+      const clickX = clamp(
+        0,
+        e.pageX - offset.left - plotOffset.left,
+        plot.width()
+      );
+
+      const isLeftSelecting = Math.abs(clickX + xOffset - leftSelectionX) <= 5;
+      const isRightSelecting =
+        Math.abs(clickX + xOffset - rightSelectionX) <= 5;
+
+      const selectingSide = isLeftSelecting
+        ? 'left'
+        : isRightSelecting
+        ? 'right'
+        : null;
+
+      if (selectingSide === 'right') {
+        setSelectionPos(selection.first, {
+          pageX: leftSelectionX - xOffset + offset.left + plotOffset.left,
+        } as EventType);
+      } else if (selectingSide === 'left') {
+        setSelectionPos(selection.first, {
+          pageX: rightSelectionX - xOffset + offset.left + plotOffset.left,
+        } as EventType);
+      } else {
+        setSelectionPos(selection.first, e);
+      }
 
-      setSelectionPos(selection.first, e);
+      // console.log('clickX', clickX);
+      // console.log('isLeftSelecting', isLeftSelecting);
 
+      console.log('SIDE', selectingSide);
+
+      // if (isRightSelecting) {
+      //   setSelectionPos(selection.second, e);
+      // } else if (isLeftSelecting) {
+      //   setSelectionPos(selection.first, e);
+      // } else {
+      //   setSelectionPos(selection.first, e);
+      // }
+
+      (selection.selectingSide as 'left' | 'right' | null) = selectingSide;
       selection.active = true;
 
       // this is a bit silly, but we have to use a closure to be
@@ -177,7 +243,7 @@ type EventType = { pageX: number; pageY: number; which?: number };
       return value < min ? min : value > max ? max : value;
     }
 
-    function setSelectionPos(pos: { x: any; y: any }, e: EventType) {
+    function setSelectionPos(pos: { x: number; y: number }, e: EventType) {
       var o = plot.getOptions();
       var offset = plot.getPlaceholder().offset();
       var plotOffset = plot.getPlotOffset();
@@ -333,8 +399,6 @@ type EventType = { pageX: number; pageY: number; which?: number };
 
       if (opts?.selection?.selectionType === 'single') {
         const axes = plot.getAxes();
-        const xOffset = 8;
-        const yOffset = 8;
         const extractedX = extractRange(axes, 'x');
         const extractedY = extractRange(axes, 'y');
         const leftX =
@@ -417,9 +481,11 @@ const drawVerticalSelectionLines = ({
     ctx.lineTo(leftX + subPixel, yMin);
     ctx.stroke();
 
+    const rectLeftStart = leftX - handleWidth / 2 + subPixel;
+
     drawRoundedRect(
       ctx,
-      leftX - handleWidth / 2 + subPixel,
+      rectLeftStart,
       yMax / 2 - handleHeight / 2 + 3,
       handleWidth,
       handleHeight,
@@ -440,9 +506,11 @@ const drawVerticalSelectionLines = ({
     ctx.lineTo(rightX + subPixel, yMin);
     ctx.stroke();
 
+    const leftRectFinish = rightX - handleWidth / 2 + subPixel;
+
     drawRoundedRect(
       ctx,
-      rightX - handleWidth / 2 + subPixel,
+      leftRectFinish,
       yMax / 2 - handleHeight / 2 + 3,
       handleWidth,
       handleHeight,

diff --git a/webapp/javascript/pages/ContinuousComparisonView.tsx b/webapp/javascript/pages/ContinuousComparisonView.tsx
@@ -88,7 +88,7 @@ function ComparisonApp() {
           }}
         />
         <Box>
-          <TimelineChartWrapper
+          {/* <TimelineChartWrapper
             data-testid="timeline-main"
             id="timeline-chart-double"
             format="lines"
@@ -119,7 +119,7 @@ function ComparisonApp() {
               />
             }
             selectionType="double"
-          />
+          /> */}
         </Box>
         <div
           className="comparison-container"
@@ -215,7 +215,7 @@ function ComparisonApp() {
               }
             >
               <InstructionText viewType="double" viewSide="right" />
-              <TimelineChartWrapper
+              {/* <TimelineChartWrapper
                 key="timeline-chart-right"
                 id="timeline-chart-right"
                 data-testid="timeline-right"
@@ -233,7 +233,7 @@ function ComparisonApp() {
                   dispatch(actions.setRight({ from, until }));
                 }}
                 timezone={timezone}
-              />
+              /> */}
             </FlamegraphRenderer>
           </Box>
         </div>