From a6b0ca2d004437b4d91de2a721cca4504d121295 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Mon, 19 Jun 2023 16:57:15 +0200
Subject: [PATCH 1/3] Add zoom controls to the Trace Search Page

---
 .../TracePageHeader/TracePageHeader.css       |  4 ++
 .../TracePageHeader/TracePageHeader.tsx       |  2 +
 .../TracePageHeader/ZoomControls.tsx          | 40 +++++++++++++++++++
 3 files changed, 46 insertions(+)
 create mode 100644 packages/jaeger-ui/src/components/TracePage/TracePageHeader/ZoomControls.tsx

diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css
index 338ca8110f..33997ad476 100644
--- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css
@@ -108,3 +108,7 @@ limitations under the License.
   font-size: 1.78em;
   margin-right: 0.15em;
 }
+
+.TracePageHeader--zoomControls {
+  margin-right: 0.5em;
+}
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx
index da58c5b4e7..03a74ce81f 100644
--- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx
@@ -38,6 +38,7 @@ import { getTraceLinks } from '../../../model/link-patterns';
 
 import './TracePageHeader.css';
 import ExternalLinks from '../../common/ExternalLinks';
+import ZoomControls from './ZoomControls';
 
 type TracePageHeaderEmbedProps = {
   canCollapse: boolean;
@@ -209,6 +210,7 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
             <NewWindowIcon isLarge />
           </Link>
         )}
+        <ZoomControls className="TracePageHeader--zoomControls" />
       </div>
       {summaryItems && <LabeledList className="TracePageHeader--overviewItems" items={summaryItems} />}
       {!hideMap && !slimView && (
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/ZoomControls.tsx b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/ZoomControls.tsx
new file mode 100644
index 0000000000..db72788f39
--- /dev/null
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/ZoomControls.tsx
@@ -0,0 +1,40 @@
+import { Button } from 'antd';
+import React, { useEffect, useState } from 'react';
+import ButtonGroup from 'antd/lib/button/button-group';
+
+const MIN_ZOOM_LEVEL = 0.7;
+const MAX_ZOOM_LEVEL = 1.5;
+const ZOOM_FACTOR = 0.1;
+
+type ZoomControlsProps = {
+  className?: string;
+};
+
+const ZoomControls = (props: ZoomControlsProps) => {
+  const [zoom, setZoom] = useState(document.body.style.zoom || 1);
+
+  useEffect(() => {
+    document.body.style.zoom = zoom;
+  }, [zoom]);
+
+  return (
+    <ButtonGroup className={props.className}>
+      <Button
+        onClick={() => {
+          setZoom(Math.min(zoom + ZOOM_FACTOR, MAX_ZOOM_LEVEL));
+        }}
+        htmlType="button"
+        icon="zoom-in"
+      />
+      <Button
+        onClick={() => {
+          setZoom(Math.max(zoom - ZOOM_FACTOR, MIN_ZOOM_LEVEL));
+        }}
+        htmlType="button"
+        icon="zoom-out"
+      />
+    </ButtonGroup>
+  );
+};
+
+export default ZoomControls;

From 22bae2d8b6e71cf9965281a0d3c2c5404b5b2c8b Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Wed, 21 Jun 2023 01:46:31 +0200
Subject: [PATCH 2/3] Add keyboard shortcuts

---
 packages/jaeger-ui/index.html                 |  1 +
 packages/jaeger-ui/src/Contexts.ts            |  4 ++
 .../jaeger-ui/src/components/App/index.jsx    | 58 ++++++++++++++-----
 .../TracePageHeader/TracePageHeader.css       |  2 +-
 .../TracePageHeader/TracePageHeader.tsx       |  2 +-
 .../TracePageHeader/ZoomControls.tsx          | 21 +++----
 packages/jaeger-ui/src/utils/ZoomManager.ts   | 25 ++++++++
 packages/jaeger-ui/typings/custom.d.ts        |  1 +
 8 files changed, 83 insertions(+), 31 deletions(-)
 create mode 100644 packages/jaeger-ui/src/Contexts.ts
 create mode 100644 packages/jaeger-ui/src/utils/ZoomManager.ts

diff --git a/packages/jaeger-ui/index.html b/packages/jaeger-ui/index.html
index de638a857d..30a2c16e6a 100644
--- a/packages/jaeger-ui/index.html
+++ b/packages/jaeger-ui/index.html
@@ -44,6 +44,7 @@
       window.embeddedMode;
       window.isUserDefinedJaegerQueryURL;
       window.staticPath;
+      window.enableZoomControls;
     </script>
   </head>
   <body>
diff --git a/packages/jaeger-ui/src/Contexts.ts b/packages/jaeger-ui/src/Contexts.ts
new file mode 100644
index 0000000000..7ef40c9693
--- /dev/null
+++ b/packages/jaeger-ui/src/Contexts.ts
@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import ZoomManager from './utils/ZoomManager';
+
+export const ZoomContext = createContext<null | ZoomManager>(null);
diff --git a/packages/jaeger-ui/src/components/App/index.jsx b/packages/jaeger-ui/src/components/App/index.jsx
index 6833918177..314b4e9dba 100644
--- a/packages/jaeger-ui/src/components/App/index.jsx
+++ b/packages/jaeger-ui/src/components/App/index.jsx
@@ -39,6 +39,8 @@ import configureStore from '../../utils/configure-store';
 import processScripts from '../../utils/config/process-scripts';
 import prefixUrl from '../../utils/prefix-url';
 import { isString } from '../../utils/ts/typeGuards/isString';
+import ZoomManager from '../../utils/ZoomManager';
+import { ZoomContext } from '../../Contexts';
 
 import '../common/vars.css';
 import '../common/utils.css';
@@ -52,6 +54,30 @@ export default class JaegerUIApp extends Component {
     this.store = configureStore(history);
     JaegerAPI.apiRoot = DEFAULT_API_ROOT;
     processScripts();
+    this.zoomManager = new ZoomManager();
+    this._handleZoomKeyboardShortcuts = this._handleZoomKeyboardShortcuts.bind(this);
+  }
+
+  componentDidMount() {
+    document.addEventListener('keydown', this._handleZoomKeyboardShortcuts);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this._handleZoomKeyboardShortcuts);
+  }
+
+  _handleZoomKeyboardShortcuts(e) {
+    if ((window.enableZoomControls && e.metaKey) || e.ctrlKey) {
+      switch (e.key) {
+        case '-':
+          this.zoomManager.zoomOut();
+          break;
+        case '=':
+          this.zoomManager.zoomIn();
+          break;
+        default:
+      }
+    }
   }
 
   render() {
@@ -65,23 +91,25 @@ export default class JaegerUIApp extends Component {
     return (
       <Provider store={this.store}>
         <ConnectedRouter history={history}>
-          <Page>
-            <Switch>
-              <Route path={searchPath} component={SearchTracePage} />
-              <Route path={traceDiffPath} component={TraceDiff} />
-              <Route path={tracePath} component={TracePage} />
-              <Route path={dependenciesPath} component={DependencyGraph} />
-              <Route path={deepDependenciesPath} component={DeepDependencies} />
-              <Route path={qualityMetricsPath} component={QualityMetrics} />
-              <Route path={monitorATMPath} component={MonitorATMPage} />
+          <ZoomContext.Provider value={this.zoomManager}>
+            <Page>
+              <Switch>
+                <Route path={searchPath} component={SearchTracePage} />
+                <Route path={traceDiffPath} component={TraceDiff} />
+                <Route path={tracePath} component={TracePage} />
+                <Route path={dependenciesPath} component={DependencyGraph} />
+                <Route path={deepDependenciesPath} component={DeepDependencies} />
+                <Route path={qualityMetricsPath} component={QualityMetrics} />
+                <Route path={monitorATMPath} component={MonitorATMPage} />
 
-              <Redirect exact path="/" to={searchPath} />
-              <Redirect exact path={prefixUrl()} to={searchPath} />
-              <Redirect exact path={prefixUrl('/')} to={searchPath} />
+                <Redirect exact path="/" to={searchPath} />
+                <Redirect exact path={prefixUrl()} to={searchPath} />
+                <Redirect exact path={prefixUrl('/')} to={searchPath} />
 
-              <Route component={NotFound} />
-            </Switch>
-          </Page>
+                <Route component={NotFound} />
+              </Switch>
+            </Page>
+          </ZoomContext.Provider>
         </ConnectedRouter>
       </Provider>
     );
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css
index 33997ad476..194989365d 100644
--- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css
@@ -110,5 +110,5 @@ limitations under the License.
 }
 
 .TracePageHeader--zoomControls {
-  margin-right: 0.5em;
+  margin-left: 0.5em;
 }
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx
index 03a74ce81f..ea67f858c4 100644
--- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx
@@ -200,6 +200,7 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
             Archive Trace
           </Button>
         )}
+        <ZoomControls className="TracePageHeader--zoomControls" />
         {showStandaloneLink && (
           <Link
             className="u-tx-inherit ub-nowrap ub-mx2"
@@ -210,7 +211,6 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
             <NewWindowIcon isLarge />
           </Link>
         )}
-        <ZoomControls className="TracePageHeader--zoomControls" />
       </div>
       {summaryItems && <LabeledList className="TracePageHeader--overviewItems" items={summaryItems} />}
       {!hideMap && !slimView && (
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/ZoomControls.tsx b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/ZoomControls.tsx
index db72788f39..2765fb139a 100644
--- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/ZoomControls.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/ZoomControls.tsx
@@ -1,37 +1,30 @@
 import { Button } from 'antd';
-import React, { useEffect, useState } from 'react';
+import React, { useContext } from 'react';
 import ButtonGroup from 'antd/lib/button/button-group';
-
-const MIN_ZOOM_LEVEL = 0.7;
-const MAX_ZOOM_LEVEL = 1.5;
-const ZOOM_FACTOR = 0.1;
+import { ZoomContext } from '../../../Contexts';
 
 type ZoomControlsProps = {
   className?: string;
 };
 
 const ZoomControls = (props: ZoomControlsProps) => {
-  const [zoom, setZoom] = useState(document.body.style.zoom || 1);
-
-  useEffect(() => {
-    document.body.style.zoom = zoom;
-  }, [zoom]);
+  const zoomManager = useContext(ZoomContext);
 
   return (
     <ButtonGroup className={props.className}>
       <Button
         onClick={() => {
-          setZoom(Math.min(zoom + ZOOM_FACTOR, MAX_ZOOM_LEVEL));
+          zoomManager?.zoomOut();
         }}
         htmlType="button"
-        icon="zoom-in"
+        icon="zoom-out"
       />
       <Button
         onClick={() => {
-          setZoom(Math.max(zoom - ZOOM_FACTOR, MIN_ZOOM_LEVEL));
+          zoomManager?.zoomIn();
         }}
         htmlType="button"
-        icon="zoom-out"
+        icon="zoom-in"
       />
     </ButtonGroup>
   );
diff --git a/packages/jaeger-ui/src/utils/ZoomManager.ts b/packages/jaeger-ui/src/utils/ZoomManager.ts
new file mode 100644
index 0000000000..8db2a4923b
--- /dev/null
+++ b/packages/jaeger-ui/src/utils/ZoomManager.ts
@@ -0,0 +1,25 @@
+const MIN_ZOOM_LEVEL = 0.7;
+const MAX_ZOOM_LEVEL = 1.5;
+const ZOOM_FACTOR = 0.1;
+
+export default class ZoomManager {
+  zoomLevel: number;
+
+  constructor() {
+    this.zoomLevel = document.body.style.zoom || 1;
+  }
+
+  updateStyles = () => {
+    document.body.style.zoom = this.zoomLevel;
+  };
+
+  zoomIn = () => {
+    this.zoomLevel = Math.min(this.zoomLevel + ZOOM_FACTOR, MAX_ZOOM_LEVEL);
+    this.updateStyles();
+  };
+
+  zoomOut = () => {
+    this.zoomLevel = Math.max(this.zoomLevel - ZOOM_FACTOR, MIN_ZOOM_LEVEL);
+    this.updateStyles();
+  };
+}
diff --git a/packages/jaeger-ui/typings/custom.d.ts b/packages/jaeger-ui/typings/custom.d.ts
index 17340d95cf..b0d037afe8 100644
--- a/packages/jaeger-ui/typings/custom.d.ts
+++ b/packages/jaeger-ui/typings/custom.d.ts
@@ -39,6 +39,7 @@ declare interface Window {
   embeddedMode?: unknown;
   isUserDefinedJaegerQueryURL?: unknown;
   staticPath?: unknown;
+  enableZoomControls?: unknown
 }
 
 declare const __REACT_APP_GA_DEBUG__: string | undefined;

From 547108e58fa2da12901a700c278fe3bc0027ec1b Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Wed, 21 Jun 2023 08:06:40 +0200
Subject: [PATCH 3/3] Hide zoom buttons if they are not enabled

---
 packages/jaeger-ui/src/components/App/index.jsx                 | 2 +-
 .../components/TracePage/TracePageHeader/TracePageHeader.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/jaeger-ui/src/components/App/index.jsx b/packages/jaeger-ui/src/components/App/index.jsx
index 314b4e9dba..1a03d1731b 100644
--- a/packages/jaeger-ui/src/components/App/index.jsx
+++ b/packages/jaeger-ui/src/components/App/index.jsx
@@ -67,7 +67,7 @@ export default class JaegerUIApp extends Component {
   }
 
   _handleZoomKeyboardShortcuts(e) {
-    if ((window.enableZoomControls && e.metaKey) || e.ctrlKey) {
+    if (window.enableZoomControls && (e.metaKey || e.ctrlKey)) {
       switch (e.key) {
         case '-':
           this.zoomManager.zoomOut();
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx
index ea67f858c4..7cf7f9471f 100644
--- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx
@@ -200,7 +200,7 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
             Archive Trace
           </Button>
         )}
-        <ZoomControls className="TracePageHeader--zoomControls" />
+        {window.enableZoomControls && <ZoomControls className="TracePageHeader--zoomControls" />}
         {showStandaloneLink && (
           <Link
             className="u-tx-inherit ub-nowrap ub-mx2"