chore(compass-explain-plan, compass-components): explain plan visual improvements follow up (#4511)

Co-authored-by: Sergey Petushkov <[email protected]>

Author: himanshusinghs

packages/compass-editor/src/json-editor.tsx

@@ -1148,6 +1148,10 @@ const multilineEditorContainerStyle = css({
   },
 });
 
+const multilineEditorContainerWithActionsStyle = css({
+  minHeight: spacing[5] - 2,
+});
+
 const multilineEditorContainerDarkModeStyle = css({
   backgroundColor: editorPalette.dark.backgroundColor,
 });
@@ -1274,6 +1278,7 @@ const MultilineEditor = React.forwardRef<EditorRef, MultilineEditorProps>(
         className={cx(
           multilineEditorContainerStyle,
           darkMode && multilineEditorContainerDarkModeStyle,
+          !!actions.length && multilineEditorContainerWithActionsStyle,
           className
         )}
         // We want folks to be able to click into the container element

packages/compass-explain-plan/src/components/explain-tree/clock.tsx

@@ -1,6 +1,7 @@
 import { palette, css, cx, useDarkMode } from '@mongodb-js/compass-components';
 import d3 from 'd3';
 import React, { useEffect, useMemo, useRef } from 'react';
+import { milliSecondsToNormalisedValue } from './explain-tree-stage';
 
 const lightModeColors = {
   clockBackgroundColor: palette.white,
@@ -199,31 +200,30 @@ function drawClockFace({
   });
 }
 
-type ClockProps = {
+export type ClockProps = {
   totalExecTimeMS: number;
   curStageExecTimeMS: number;
   prevStageExecTimeMS: number;
-  width: number;
-  height: number;
-  strokeWidth: number;
   className?: string;
 };
 
+const CLOCK_WIDTH = 50;
+const CLOCK_HEIGHT = 50;
+const ARC_STROKE_WIDTH = 5;
+
 const Clock: React.FunctionComponent<ClockProps> = ({
   totalExecTimeMS,
   curStageExecTimeMS,
   prevStageExecTimeMS,
   className,
-  width,
-  height,
-  strokeWidth,
 }) => {
   const svgRef = useRef<SVGSVGElement>(null);
 
-  const deltaExecTime = useMemo(
-    () => curStageExecTimeMS - prevStageExecTimeMS,
-    [curStageExecTimeMS, prevStageExecTimeMS]
-  );
+  const { value: normalisedDeltaExecTime, unit: normalisedDeltaExecTimeUnit } =
+    useMemo(() => {
+      const deltaExecTime = curStageExecTimeMS - prevStageExecTimeMS;
+      return milliSecondsToNormalisedValue(deltaExecTime);
+    }, [curStageExecTimeMS, prevStageExecTimeMS]);
 
   const darkmode = useDarkMode();
 
@@ -248,17 +248,17 @@ const Clock: React.FunctionComponent<ClockProps> = ({
     };
 
     drawClockFace({
-      width: width,
-      height: height,
+      width: CLOCK_WIDTH,
+      height: CLOCK_HEIGHT,
       strokeColor: clockFaceColor,
       fillColor: clockBackgroundColor,
       svgElement,
     });
 
     drawElapsedTimes({
-      width: width,
-      height: height,
-      strokeWidth,
+      width: CLOCK_WIDTH,
+      height: CLOCK_HEIGHT,
+      strokeWidth: ARC_STROKE_WIDTH,
       svgElement,
       curStageExecTimeMS,
       prevStageExecTimeMS,
@@ -274,9 +274,6 @@ const Clock: React.FunctionComponent<ClockProps> = ({
     curStageExecTimeMS,
     prevStageExecTimeMS,
     totalExecTimeMS,
-    width,
-    height,
-    strokeWidth,
     clockBackgroundColor,
     clockFaceColor,
     previousElapsedArcColor,
@@ -290,12 +287,15 @@ const Clock: React.FunctionComponent<ClockProps> = ({
         containerStyles,
         darkmode ? containerStylesDarkMode : containerStylesLightMode
       )}
-      style={{ width, height }}
+      style={{ width: CLOCK_WIDTH, height: CLOCK_HEIGHT }}
     >
-      <div className={faceContainerStyle} style={{ width, height }}>
+      <div
+        className={faceContainerStyle}
+        style={{ width: CLOCK_WIDTH, height: CLOCK_HEIGHT }}
+      >
         <svg
-          width={width}
-          height={height}
+          width={CLOCK_WIDTH}
+          height={CLOCK_HEIGHT}
           ref={svgRef}
           className={svgStyles}
           // Our svg clock has additional arcs that expands outside of the clock
@@ -305,16 +305,19 @@ const Clock: React.FunctionComponent<ClockProps> = ({
           // to exact center
           viewBox="-3 -3 56 56"
         ></svg>
-        <div className={executionTimeStyles} style={{ width, height }}>
+        <div
+          className={executionTimeStyles}
+          style={{ width: CLOCK_WIDTH, height: CLOCK_HEIGHT }}
+        >
           <span
             className={cx(
               msecsStyles,
               darkmode ? msecsStylesDarkMode : msecsStylesLightMode
             )}
           >
-            {deltaExecTime}
+            {normalisedDeltaExecTime}
           </span>
-          <span className={msStyles}>ms</span>
+          <span className={msStyles}>{normalisedDeltaExecTimeUnit}</span>
         </div>
       </div>
     </div>

packages/compass-explain-plan/src/components/explain-tree/explain-tree-stage.spec.tsx

@@ -2,39 +2,128 @@ import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 import { expect } from 'chai';
 
-import { ExplainTreeStage } from './explain-tree-stage';
-
-describe('ExplainStage [Component]', function () {
-  let component: ReturnType<typeof render>;
-  const name = '';
-  const nReturned = 1;
-  const highlights = {};
-  const curStageExecTimeMS = 2;
-  const prevStageExecTimeMS = 1;
-  const totalExecTimeMS = 3;
-  const isShard = false;
-  const details = {};
-
-  beforeEach(function () {
-    component = render(
-      <ExplainTreeStage
-        name={name}
-        nReturned={nReturned}
-        highlights={highlights}
-        curStageExecTimeMS={curStageExecTimeMS}
-        prevStageExecTimeMS={prevStageExecTimeMS}
-        totalExecTimeMS={totalExecTimeMS}
-        isShard={isShard}
-        details={details}
-        onToggleDetailsClick={() => {}}
-        detailsOpen={false}
-      />
-    );
+import {
+  ExplainTreeStage,
+  milliSecondsToNormalisedValue,
+  trimInMiddle,
+} from './explain-tree-stage';
+
+describe('ExplainTreeStage', function () {
+  describe('ExplainStage [Component]', function () {
+    let component: ReturnType<typeof render>;
+    const name = '';
+    const nReturned = 1;
+    const highlights = {};
+    const curStageExecTimeMS = 2;
+    const prevStageExecTimeMS = 1;
+    const totalExecTimeMS = 3;
+    const isShard = false;
+    const details = {};
+
+    beforeEach(function () {
+      component = render(
+        <ExplainTreeStage
+          name={name}
+          nReturned={nReturned}
+          highlights={highlights}
+          curStageExecTimeMS={curStageExecTimeMS}
+          prevStageExecTimeMS={prevStageExecTimeMS}
+          totalExecTimeMS={totalExecTimeMS}
+          isShard={isShard}
+          details={details}
+          onToggleDetailsClick={() => {}}
+          detailsOpen={false}
+        />
+      );
+    });
+
+    afterEach(cleanup);
+
+    it('renders', function () {
+      expect(component.getByTestId('explain-stage')).to.exist;
+    });
   });
 
-  afterEach(cleanup);
+  describe('Helpers', function () {
+    describe('trimInMiddle', function () {
+      it('will not trim the text if the text length is less than provided threshold', function () {
+        expect(trimInMiddle('Compass', 10)).to.equal('Compass');
+      });
+
+      context(
+        'when text length is more than the provided threshold',
+        function () {
+          it('will trim text and keep only the specified number of chars in front and in back', function () {
+            const trimmedValue = trimInMiddle(
+              'Devtools Product - Compass',
+              10,
+              5,
+              5
+            );
+            expect(trimmedValue).to.equal('Devto…mpass');
+          });
+
+          it('will trim the text, while making sure that the chars that are already at front do not come at the back of ellipsis', function () {
+            const trimmedValue = trimInMiddle('Devtools', 5, 5, 5);
+            expect(trimmedValue).to.equal('Devto…ols');
+          });
+        }
+      );
+    });
+
+    describe('milliSecondsToNormalisedValue', function () {
+      it('returns the ms values itself when the value is less than a second', function () {
+        expect(milliSecondsToNormalisedValue(975)).to.deep.equal({
+          value: '975',
+          unit: 'ms',
+        });
+      });
+
+      it('correctly normalises a seconds equivalent value', function () {
+        expect(milliSecondsToNormalisedValue(1000)).to.deep.equal({
+          value: '1',
+          unit: 's',
+        });
+
+        expect(milliSecondsToNormalisedValue(1500)).to.deep.equal({
+          value: '1.5',
+          unit: 's',
+        });
+      });
+
+      it('correctly normalises a minutes equivalent value', function () {
+        expect(milliSecondsToNormalisedValue(60 * 1000)).to.deep.equal({
+          value: '1',
+          unit: 'min',
+        });
+
+        expect(milliSecondsToNormalisedValue(90 * 1000)).to.deep.equal({
+          value: '1.5',
+          unit: 'min',
+        });
+
+        // Below cases are for rounded values
+        expect(milliSecondsToNormalisedValue(134 * 1000)).to.deep.equal({
+          value: '2.2',
+          unit: 'min',
+        });
+
+        expect(milliSecondsToNormalisedValue(135 * 1000)).to.deep.equal({
+          value: '2.3',
+          unit: 'min',
+        });
+      });
+
+      it('correctly normalises an hour equivalent value', function () {
+        expect(milliSecondsToNormalisedValue(60 * 60 * 1000)).to.deep.equal({
+          value: '1',
+          unit: 'h',
+        });
 
-  it('renders', function () {
-    expect(component.getByTestId('explain-stage')).to.exist;
+        expect(
+          milliSecondsToNormalisedValue(1.5 * 60 * 60 * 1000)
+        ).to.deep.equal({ value: '1.5', unit: 'h' });
+      });
+    });
   });
 });