Update Selector.tsx

packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/Selector.tsx

@@ -12,17 +12,17 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { PureComponent } from 'react';
+import React, { useState, useCallback } from 'react';
 import { Popover } from 'antd';
 import { ImSortAmountAsc } from 'react-icons/im';
 import { IoChevronForward } from 'react-icons/io5';
-
 import ChevronDown from '../ChevronDown';
 import { trackHopChange } from '../../index.track';
 import { ECheckedStatus, EDirection, THop } from '../../../../model/ddg/types';
-
 import './Selector.css';
 
+const CLASSNAME = 'HopsSelector--Selector';
+
 type TProps = {
   direction: EDirection;
   furthestDistance: number;
@@ -32,14 +32,22 @@ type TProps = {
   hops: THop[];
 };
 
-const CLASSNAME = 'HopsSelector--Selector';
+const Selector: React.FC<TProps> = ({
+  direction,
+  furthestDistance,
+  furthestFullDistance,
+  furthestFullness,
+  handleClick,
+  hops,
+}) => {
+  const handleButtonClick = useCallback(
+    (distance: number) => {
+      handleClick(distance, direction);
+      trackHopChange(furthestFullDistance, distance, direction);
+    },
+    [direction, furthestFullDistance, handleClick]
+  );
 
-export default class Selector extends PureComponent<TProps> {
-  private handleClick(distance: number) {
-    const { direction, furthestFullDistance, handleClick } = this.props;
-    handleClick(distance, direction);
-    trackHopChange(furthestFullDistance, distance, direction);
-  }
 
   private makeBtn = (
     { distance, fullness, suffix = 'popover-content' }: THop & { suffix?: string },
@@ -53,24 +61,24 @@ export default class Selector extends PureComponent<TProps> {
         <button
           className={`${CLASSNAME}--btn is-${fullness} ${CLASSNAME}--${suffix}`}
           type="button"
+
           onClick={() => this.handleClick(distance)}
           data-testid={`hop-${testIdSuffix}${suffix === 'popover-content' ? '-popover' : ''}`}
         >
           {Math.abs(distance)}
         </button>
       </React.Fragment>
-    );
-  };
+    ),
+    [direction, handleButtonClick]
+  );
 
-  render() {
-    const { direction, furthestDistance, furthestFullness, handleClick, hops } = this.props;
-    const streamText = direction === EDirection.Downstream ? 'Down' : 'Up';
-    const streamLabel = `${streamText}stream hops`;
-    const lowercaseLabel = streamLabel.toLowerCase();
-    if (hops.length <= 1) {
-      return <span className={CLASSNAME}>No {lowercaseLabel}</span>;
-    }
 
+  const streamText = direction === EDirection.Downstream ? 'Down' : 'Up';
+  const streamLabel = `${streamText}stream hops`;
+  const lowercaseLabel = streamLabel.toLowerCase();
+
+  if (hops.length <= 1) {
+    return <span className={CLASSNAME}>No {lowercaseLabel}</span>;
     const decrementBtn = (
       <button
         key={`decrement ${direction}`}
@@ -130,4 +138,59 @@ export default class Selector extends PureComponent<TProps> {
       </Popover>
     );
   }
-}
+
+  const decrementBtn = (
+    <button
+      key={`decrement ${direction}`}
+      disabled={furthestDistance === 0}
+      className={`${CLASSNAME}--decrement`}
+      type="button"
+      onClick={() => handleClick(furthestDistance - direction, direction)}
+    >
+      -
+    </button>
+  );
+
+  const incrementBtn = (
+    <button
+      key={`increment ${direction}`}
+      disabled={furthestDistance === hops[hops.length - 1].distance}
+      className={`${CLASSNAME}--increment`}
+      type="button"
+      onClick={() => handleClick(furthestDistance + direction, direction)}
+    >
+      +
+    </button>
+  );
+
+  const delimiterBtn = makeBtn({
+    ...hops[hops.length - 1],
+    suffix: 'delimiter',
+  });
+
+  const furthestBtn = makeBtn({
+    distance: furthestDistance,
+    fullness: furthestFullness,
+    suffix: 'furthest',
+  });
+
+  return (
+    <Popover
+      arrowPointAtCenter
+      content={[decrementBtn, ...hops.map(makeBtn), incrementBtn]}
+      placement="bottom"
+      title={`Visible ${lowercaseLabel}`}
+    >
+      <span className={CLASSNAME}>
+        <ImSortAmountAsc className={`${CLASSNAME}--AscIcon is-${streamText}`} />
+        {streamLabel}
+        {furthestBtn}
+        <span className={`${CLASSNAME}--delimiter`}>/</span>
+        {delimiterBtn}
+        <ChevronDown className="ub-ml1" />
+      </span>
+    </Popover>
+  );
+};
+
+export default Selector;