[Feature]: Add zoom in/out controls to Plexus graphs

packages/jaeger-ui/src/components/common/utils.css

@@ -136,7 +136,7 @@ limitations under the License.
 
 .u-miniMap > .plexus-MiniMap--button {
   background: #ccc;
-  color: #888;
+  color: #444;
   cursor: pointer;
   font-size: 1.6em;
   line-height: 0;

packages/plexus/package.json

@@ -54,7 +54,8 @@
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
     "memoize-one": "6.0.0",
-    "viz.js": "1.8.1"
+    "viz.js": "1.8.1",
+    "react-icons": "^4.10.1"
   },
   "scripts": {
     "_tasks/build/lib/js": "node_modules/.bin/babel src --extensions '.tsx,.js' --out-dir lib",

packages/plexus/src/zoom/MiniMap.tsx

@@ -14,7 +14,7 @@
 
 import * as React from 'react';
 
-import resetZoomIcon from './resetZoomIcon';
+import { HiMiniArrowsPointingOut, HiMagnifyingGlassPlus, HiMagnifyingGlassMinus } from 'react-icons/hi2';
 
 /* eslint-disable react/no-unused-prop-types */
 type TProps = {
@@ -23,6 +23,8 @@ type TProps = {
   contentHeight: number;
   contentWidth: number;
   viewAll: () => void;
+  zoomIn: () => void;
+  zoomOut: () => void;
   viewportHeight: number;
   viewportWidth: number;
   k?: number;
@@ -88,8 +90,14 @@ export function MiniMap(props: TProps) {
       <div className={`${css.item} ${css.map}`} style={mapSize}>
         <div className={css.mapActive} style={{ ...activeXform, ...mapSize }} />
       </div>
+      <div className={`${css.item} ${css.button}`} onClick={props.zoomIn} role="button">
+        <HiMagnifyingGlassPlus />
+      </div>
+      <div className={`${css.item} ${css.button}`} onClick={props.zoomOut} role="button">
+        <HiMagnifyingGlassMinus />
+      </div>
       <div className={`${css.item} ${css.button}`} onClick={props.viewAll} role="button">
-        {resetZoomIcon}
+        <HiMiniArrowsPointingOut />
       </div>
     </div>
   );

packages/plexus/src/zoom/ZoomManager.tsx

@@ -45,6 +45,8 @@ type TZoomProps = {
   contentHeight: number;
   contentWidth: number;
   viewAll: () => void;
+  zoomIn: () => void;
+  zoomOut: () => void;
   viewportHeight: number;
   viewportWidth: number;
 };
@@ -96,6 +98,24 @@ export default class ZoomManager {
     this.resetZoom();
   }
 
+  public zoomIn = () => {
+    const selection = this.selection;
+    if (!selection) {
+      this.updateCallback(zoomIdentity);
+      return;
+    }
+    this.zoom.scaleBy(selection, 1.2);
+  };
+
+  public zoomOut = () => {
+    const selection = this.selection;
+    if (!selection) {
+      this.updateCallback(zoomIdentity);
+      return;
+    }
+    this.zoom.scaleBy(selection, 0.8);
+  };
+
   public resetZoom = () => {
     const elem = this.elem;
     const selection = this.selection;
@@ -123,6 +143,8 @@ export default class ZoomManager {
       x,
       y,
       viewAll: this.resetZoom,
+      zoomIn: this.zoomIn,
+      zoomOut: this.zoomOut,
     };
   }