From 9a597091c9c025c5ff8827988ed3653f744a3bc9 Mon Sep 17 00:00:00 2001 From: Wise-Wizard Date: Mon, 25 Dec 2023 22:28:14 +0530 Subject: [PATCH 1/8] Added Zoom Functionality for Graph View Signed-off-by: Wise-Wizard --- .../src/components/DependencyGraph/DAG.tsx | 75 +++++++---- .../src/components/DependencyGraph/dag.css | 23 ++++ .../TraceDiffGraph/TraceDiffGraph.css | 23 ++++ .../TraceDiffGraph/TraceDiffGraph.tsx | 117 ++++++++++-------- 4 files changed, 156 insertions(+), 82 deletions(-) diff --git a/packages/jaeger-ui/src/components/DependencyGraph/DAG.tsx b/packages/jaeger-ui/src/components/DependencyGraph/DAG.tsx index 18f3d1aac2..e67a6d05ee 100644 --- a/packages/jaeger-ui/src/components/DependencyGraph/DAG.tsx +++ b/packages/jaeger-ui/src/components/DependencyGraph/DAG.tsx @@ -13,7 +13,7 @@ // limitations under the License. import React, { ReactNode } from 'react'; - +import { TransformWrapper, TransformComponent, useControls } from 'react-zoom-pan-pinch'; import { Digraph, LayoutManager } from '@jaegertracing/plexus'; import { TEdge, TVertex } from '@jaegertracing/plexus/lib/types'; @@ -104,35 +104,56 @@ export default class DAG extends React.Component { this.layoutManager.stopAndRelease(); } + Controls = () => { + const { zoomIn, zoomOut } = useControls(); + return ( + <> + + + + ); + }; + render() { return (
- - zoom - minimap - className="DAG--dag" - setOnGraph={classNameIsSmall} - minimapClassName="u-miniMap" - layoutManager={this.layoutManager} - measurableNodesKey="nodes" - layers={[ - { - key: 'edges', - defs: [{ localId: 'arrowHead' }], - edges: true, - layerType: 'svg', - markerEndId: 'arrowHead', - }, - { - key: 'nodes', - layerType: 'html', - measurable: true, - renderNode, - }, - ]} - edges={this.data.edges} - vertices={this.data.nodes} - /> + + +
+ + zoom + minimap + className="DAG--dag" + setOnGraph={classNameIsSmall} + minimapClassName="u-miniMap" + layoutManager={this.layoutManager} + measurableNodesKey="nodes" + layers={[ + { + key: 'edges', + defs: [{ localId: 'arrowHead' }], + edges: true, + layerType: 'svg', + markerEndId: 'arrowHead', + }, + { + key: 'nodes', + layerType: 'html', + measurable: true, + renderNode, + }, + ]} + edges={this.data.edges} + vertices={this.data.nodes} + /> +
+ + +
); } diff --git a/packages/jaeger-ui/src/components/DependencyGraph/dag.css b/packages/jaeger-ui/src/components/DependencyGraph/dag.css index 0afeea86b4..421f40f761 100644 --- a/packages/jaeger-ui/src/components/DependencyGraph/dag.css +++ b/packages/jaeger-ui/src/components/DependencyGraph/dag.css @@ -21,6 +21,29 @@ position: relative; } +.DAG--zoomWrapper { + width: 1500px; + height: 680px; + position: relative; + margin-top: -120px; +} + +.DAG--zoomButton { + background: #ccc; + color: #888; + cursor: pointer; + font-size: 1.8em; + line-height: 0; + padding: 0.8rem 0.5rem; + position: relative; + margin-left: 15px; + margin-top: 20px; +} + +button:hover { + background: #ddd; +} + .DAG--dag { background: #fafafa; stroke-width: 0.85; diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.css b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.css index 8b37f4971f..cd3c24ed8c 100644 --- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.css +++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.css @@ -23,6 +23,29 @@ limitations under the License. right: 0; top: 0; } +.TraceDiffGraph--zoomWrapper { + width: 1250px; + height: 1250px; + position: relative; + margin-top: -350px; + margin-right: 0px; + padding-bottom: 0px; +} + +.TraceDiffGraph--zoomButton { + background: #ccc; + color: #888; + cursor: pointer; + font-size: 1.8em; + line-height: 0; + padding: 0.8rem 0.5rem; + position: relative; + margin-left: 15px; +} + +button:hover { + background: #ddd; +} .TraceDiffGraph--errorsWrapper { background: #eee; diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.tsx b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.tsx index 50df1e16dc..c07e186a36 100644 --- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.tsx +++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.tsx @@ -1,18 +1,6 @@ -// Copyright (c) 2018 Uber Technologies, Inc. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { TransformWrapper, TransformComponent, useControls } from 'react-zoom-pan-pinch'; import { cacheAs, Digraph, LayoutManager } from '@jaegertracing/plexus'; import cx from 'classnames'; import { connect } from 'react-redux'; @@ -43,6 +31,20 @@ export class UnconnectedTraceDiffGraph extends React.PureComponent { this.layoutManager.stopAndRelease(); } + Controls = () => { + const { zoomIn, zoomOut } = useControls(); + return ( + <> + + + + ); + }; + render() { const { a, b, uiFind = '' } = this.props; if (!a || !b) { @@ -79,53 +81,58 @@ export class UnconnectedTraceDiffGraph extends React.PureComponent { const { edges, vertices } = getEdgesAndVertices(aData, bData); const keys = getUiFindVertexKeys(uiFind, vertices); const dagClassName = cx('TraceDiffGraph--dag', { 'is-uiFind-mode': uiFind }); - const inputProps: Record = { + const inputProps: Record = { className: 'TraceDiffGraph--uiFind', suffix: uiFind.length ? String(keys.size) : undefined, }; return (
- - + + +
+ + +
+ + +
); } From 0e398ecf3ee36286f9acdffd3c480710e9ffee78 Mon Sep 17 00:00:00 2001 From: Wise-Wizard Date: Mon, 25 Dec 2023 22:30:21 +0530 Subject: [PATCH 2/8] Added Zoom Functionality for Graph View Signed-off-by: Wise-Wizard --- .../TraceDiff/TraceDiffGraph/TraceDiffGraph.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.tsx b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.tsx index c07e186a36..824c8b0edb 100644 --- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.tsx +++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.tsx @@ -1,3 +1,17 @@ +// Copyright (c) 2018 Uber Technologies, Inc. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies import { TransformWrapper, TransformComponent, useControls } from 'react-zoom-pan-pinch'; From 483de0a7694f41195069c40cb0c435ee9d5853f3 Mon Sep 17 00:00:00 2001 From: Wise-Wizard Date: Fri, 19 Jan 2024 19:36:35 +0530 Subject: [PATCH 3/8] Added Zoom Functionality to Plexus Signed-off-by: Wise-Wizard --- .../src/components/DependencyGraph/DAG.tsx | 75 +++++-------- .../TraceDiffGraph/TraceDiffGraph.tsx | 101 +++++++----------- packages/plexus/src/zoom/MiniMap.tsx | 10 +- packages/plexus/src/zoom/ZoomManager.tsx | 22 ++++ packages/plexus/src/zoom/resetZoomIcon.tsx | 14 ++- 5 files changed, 111 insertions(+), 111 deletions(-) diff --git a/packages/jaeger-ui/src/components/DependencyGraph/DAG.tsx b/packages/jaeger-ui/src/components/DependencyGraph/DAG.tsx index e67a6d05ee..18f3d1aac2 100644 --- a/packages/jaeger-ui/src/components/DependencyGraph/DAG.tsx +++ b/packages/jaeger-ui/src/components/DependencyGraph/DAG.tsx @@ -13,7 +13,7 @@ // limitations under the License. import React, { ReactNode } from 'react'; -import { TransformWrapper, TransformComponent, useControls } from 'react-zoom-pan-pinch'; + import { Digraph, LayoutManager } from '@jaegertracing/plexus'; import { TEdge, TVertex } from '@jaegertracing/plexus/lib/types'; @@ -104,56 +104,35 @@ export default class DAG extends React.Component { this.layoutManager.stopAndRelease(); } - Controls = () => { - const { zoomIn, zoomOut } = useControls(); - return ( - <> - - - - ); - }; - render() { return (
- - -
- - zoom - minimap - className="DAG--dag" - setOnGraph={classNameIsSmall} - minimapClassName="u-miniMap" - layoutManager={this.layoutManager} - measurableNodesKey="nodes" - layers={[ - { - key: 'edges', - defs: [{ localId: 'arrowHead' }], - edges: true, - layerType: 'svg', - markerEndId: 'arrowHead', - }, - { - key: 'nodes', - layerType: 'html', - measurable: true, - renderNode, - }, - ]} - edges={this.data.edges} - vertices={this.data.nodes} - /> -
- - - + + zoom + minimap + className="DAG--dag" + setOnGraph={classNameIsSmall} + minimapClassName="u-miniMap" + layoutManager={this.layoutManager} + measurableNodesKey="nodes" + layers={[ + { + key: 'edges', + defs: [{ localId: 'arrowHead' }], + edges: true, + layerType: 'svg', + markerEndId: 'arrowHead', + }, + { + key: 'nodes', + layerType: 'html', + measurable: true, + renderNode, + }, + ]} + edges={this.data.edges} + vertices={this.data.nodes} + />
); } diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.tsx b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.tsx index f0f7debff1..1b858dfae5 100644 --- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.tsx +++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.tsx @@ -13,8 +13,6 @@ // limitations under the License. import * as React from 'react'; -// eslint-disable-next-line import/no-extraneous-dependencies -import { TransformWrapper, TransformComponent, useControls } from 'react-zoom-pan-pinch'; import { cacheAs, Digraph, LayoutManager } from '@jaegertracing/plexus'; import cx from 'classnames'; import { connect } from 'react-redux'; @@ -45,20 +43,6 @@ export class UnconnectedTraceDiffGraph extends React.PureComponent { this.layoutManager.stopAndRelease(); } - Controls = () => { - const { zoomIn, zoomOut } = useControls(); - return ( - <> - - - - ); - }; - render() { const { a, b, uiFind = '' } = this.props; if (!a || !b) { @@ -102,51 +86,46 @@ export class UnconnectedTraceDiffGraph extends React.PureComponent { return (
- - -
- - -
- - - + +
); } diff --git a/packages/plexus/src/zoom/MiniMap.tsx b/packages/plexus/src/zoom/MiniMap.tsx index 41c4114ae2..13151030d7 100644 --- a/packages/plexus/src/zoom/MiniMap.tsx +++ b/packages/plexus/src/zoom/MiniMap.tsx @@ -14,7 +14,7 @@ import * as React from 'react'; -import resetZoomIcon from './resetZoomIcon'; +import { resetZoomIcon, zoomInIcon, zoomOutIcon } from './resetZoomIcon'; /* eslint-disable react/no-unused-prop-types */ type TProps = { @@ -23,6 +23,8 @@ type TProps = { contentHeight: number; contentWidth: number; viewAll: () => void; + zoomAll: () => void; + trimAll: () => void; viewportHeight: number; viewportWidth: number; k?: number; @@ -88,6 +90,12 @@ export function MiniMap(props: TProps) {
+
+ {zoomInIcon} +
+
+ {zoomOutIcon} +
{resetZoomIcon}
diff --git a/packages/plexus/src/zoom/ZoomManager.tsx b/packages/plexus/src/zoom/ZoomManager.tsx index b8b1a6de6d..9b07c44452 100644 --- a/packages/plexus/src/zoom/ZoomManager.tsx +++ b/packages/plexus/src/zoom/ZoomManager.tsx @@ -45,6 +45,8 @@ type TZoomProps = { contentHeight: number; contentWidth: number; viewAll: () => void; + zoomAll: () => void; + trimAll: () => 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, + zoomAll: this.zoomIn, + trimAll: this.zoomOut, }; } diff --git a/packages/plexus/src/zoom/resetZoomIcon.tsx b/packages/plexus/src/zoom/resetZoomIcon.tsx index c9b9f1107c..2ee5fe30fd 100644 --- a/packages/plexus/src/zoom/resetZoomIcon.tsx +++ b/packages/plexus/src/zoom/resetZoomIcon.tsx @@ -18,10 +18,22 @@ import * as React from 'react'; // https://github.com/react-icons/react-icons/blob/396b4d9241a61b6d22f3907273158b6a91aea2fd/md/zoom-out-map.js // LICENSE: MIT // https://github.com/react-icons/react-icons/blob/396b4d9241a61b6d22f3907273158b6a91aea2fd/package.json#L26 -export default ( +export const resetZoomIcon = ( ); + +export const zoomInIcon = ( + + + +); + +export const zoomOutIcon = ( + + + +); From 6001589a6124ae2fb525e0a79bd23f3933b81f53 Mon Sep 17 00:00:00 2001 From: Wise-Wizard Date: Fri, 19 Jan 2024 19:39:48 +0530 Subject: [PATCH 4/8] Reverted Unwanted Changes Signed-off-by: Wise-Wizard --- .../src/components/DependencyGraph/dag.css | 23 ------------------- .../TraceDiffGraph/TraceDiffGraph.css | 23 ------------------- 2 files changed, 46 deletions(-) diff --git a/packages/jaeger-ui/src/components/DependencyGraph/dag.css b/packages/jaeger-ui/src/components/DependencyGraph/dag.css index 421f40f761..0afeea86b4 100644 --- a/packages/jaeger-ui/src/components/DependencyGraph/dag.css +++ b/packages/jaeger-ui/src/components/DependencyGraph/dag.css @@ -21,29 +21,6 @@ position: relative; } -.DAG--zoomWrapper { - width: 1500px; - height: 680px; - position: relative; - margin-top: -120px; -} - -.DAG--zoomButton { - background: #ccc; - color: #888; - cursor: pointer; - font-size: 1.8em; - line-height: 0; - padding: 0.8rem 0.5rem; - position: relative; - margin-left: 15px; - margin-top: 20px; -} - -button:hover { - background: #ddd; -} - .DAG--dag { background: #fafafa; stroke-width: 0.85; diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.css b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.css index cd3c24ed8c..8b37f4971f 100644 --- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.css +++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.css @@ -23,29 +23,6 @@ limitations under the License. right: 0; top: 0; } -.TraceDiffGraph--zoomWrapper { - width: 1250px; - height: 1250px; - position: relative; - margin-top: -350px; - margin-right: 0px; - padding-bottom: 0px; -} - -.TraceDiffGraph--zoomButton { - background: #ccc; - color: #888; - cursor: pointer; - font-size: 1.8em; - line-height: 0; - padding: 0.8rem 0.5rem; - position: relative; - margin-left: 15px; -} - -button:hover { - background: #ddd; -} .TraceDiffGraph--errorsWrapper { background: #eee; From 8c9dc8c3b72dad5fb95d0ef9e03d9f00a267e5a9 Mon Sep 17 00:00:00 2001 From: Wise-Wizard Date: Sat, 20 Jan 2024 10:00:20 +0530 Subject: [PATCH 5/8] Resolved unconventional naming Signed-off-by: Wise-Wizard --- packages/plexus/src/zoom/MiniMap.tsx | 8 ++++---- packages/plexus/src/zoom/ZoomManager.tsx | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/plexus/src/zoom/MiniMap.tsx b/packages/plexus/src/zoom/MiniMap.tsx index 13151030d7..5beee73298 100644 --- a/packages/plexus/src/zoom/MiniMap.tsx +++ b/packages/plexus/src/zoom/MiniMap.tsx @@ -23,8 +23,8 @@ type TProps = { contentHeight: number; contentWidth: number; viewAll: () => void; - zoomAll: () => void; - trimAll: () => void; + zoomIn: () => void; + zoomOut: () => void; viewportHeight: number; viewportWidth: number; k?: number; @@ -90,10 +90,10 @@ export function MiniMap(props: TProps) {
-
+
{zoomInIcon}
-
+
{zoomOutIcon}
diff --git a/packages/plexus/src/zoom/ZoomManager.tsx b/packages/plexus/src/zoom/ZoomManager.tsx index 9b07c44452..b9ec763499 100644 --- a/packages/plexus/src/zoom/ZoomManager.tsx +++ b/packages/plexus/src/zoom/ZoomManager.tsx @@ -45,8 +45,8 @@ type TZoomProps = { contentHeight: number; contentWidth: number; viewAll: () => void; - zoomAll: () => void; - trimAll: () => void; + zoomIn: () => void; + zoomOut: () => void; viewportHeight: number; viewportWidth: number; }; @@ -143,8 +143,8 @@ export default class ZoomManager { x, y, viewAll: this.resetZoom, - zoomAll: this.zoomIn, - trimAll: this.zoomOut, + zoomIn: this.zoomIn, + zoomOut: this.zoomOut, }; } From 2918b628c74d02b82a8cd2e60be6fdf8ff41b2a2 Mon Sep 17 00:00:00 2001 From: Wise-Wizard Date: Sun, 21 Jan 2024 23:45:04 +0530 Subject: [PATCH 6/8] Integrated React Icons Signed-off-by: Wise-Wizard --- packages/plexus/package.json | 3 +- packages/plexus/src/zoom/MiniMap.tsx | 10 +++--- packages/plexus/src/zoom/resetZoomIcon.tsx | 39 ---------------------- 3 files changed, 7 insertions(+), 45 deletions(-) delete mode 100644 packages/plexus/src/zoom/resetZoomIcon.tsx diff --git a/packages/plexus/package.json b/packages/plexus/package.json index 1fe677ed89..4882d94f48 100644 --- a/packages/plexus/package.json +++ b/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", diff --git a/packages/plexus/src/zoom/MiniMap.tsx b/packages/plexus/src/zoom/MiniMap.tsx index 5beee73298..54b53499e6 100644 --- a/packages/plexus/src/zoom/MiniMap.tsx +++ b/packages/plexus/src/zoom/MiniMap.tsx @@ -14,8 +14,8 @@ import * as React from 'react'; -import { resetZoomIcon, zoomInIcon, zoomOutIcon } from './resetZoomIcon'; - +import { FaMagnifyingGlassPlus, FaMagnifyingGlassMinus } from 'react-icons/fa6'; +import { HiMiniArrowsPointingOut } from 'react-icons/hi2'; /* eslint-disable react/no-unused-prop-types */ type TProps = { classNamePrefix?: string | void; @@ -91,13 +91,13 @@ export function MiniMap(props: TProps) {
- {zoomInIcon} +
- {zoomOutIcon} +
- {resetZoomIcon} +
); diff --git a/packages/plexus/src/zoom/resetZoomIcon.tsx b/packages/plexus/src/zoom/resetZoomIcon.tsx deleted file mode 100644 index 2ee5fe30fd..0000000000 --- a/packages/plexus/src/zoom/resetZoomIcon.tsx +++ /dev/null @@ -1,39 +0,0 @@ -// Copyright (c) 2018 Uber Technologies, Inc. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -import * as React from 'react'; - -// SVG is from React Icons: -// https://github.com/react-icons/react-icons/blob/396b4d9241a61b6d22f3907273158b6a91aea2fd/md/zoom-out-map.js -// LICENSE: MIT -// https://github.com/react-icons/react-icons/blob/396b4d9241a61b6d22f3907273158b6a91aea2fd/package.json#L26 -export const resetZoomIcon = ( - - - - - -); - -export const zoomInIcon = ( - - - -); - -export const zoomOutIcon = ( - - - -); From c27f1532708d5287b69178b0ce8be7249720d958 Mon Sep 17 00:00:00 2001 From: Wise-Wizard Date: Mon, 22 Jan 2024 00:09:57 +0530 Subject: [PATCH 7/8] Changed to Hi-Icons Signed-off-by: Wise-Wizard --- packages/plexus/src/zoom/MiniMap.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/plexus/src/zoom/MiniMap.tsx b/packages/plexus/src/zoom/MiniMap.tsx index 54b53499e6..4bc76104fe 100644 --- a/packages/plexus/src/zoom/MiniMap.tsx +++ b/packages/plexus/src/zoom/MiniMap.tsx @@ -14,8 +14,8 @@ import * as React from 'react'; -import { FaMagnifyingGlassPlus, FaMagnifyingGlassMinus } from 'react-icons/fa6'; -import { HiMiniArrowsPointingOut } from 'react-icons/hi2'; +import { HiMiniArrowsPointingOut, HiMagnifyingGlassPlus, HiMagnifyingGlassMinus } from 'react-icons/hi2'; + /* eslint-disable react/no-unused-prop-types */ type TProps = { classNamePrefix?: string | void; @@ -91,10 +91,10 @@ export function MiniMap(props: TProps) {
- +
- +
From 5d0ffdc42cf21c390e7ec84c10fce76e35b76b54 Mon Sep 17 00:00:00 2001 From: Wise-Wizard Date: Mon, 22 Jan 2024 01:58:00 +0530 Subject: [PATCH 8/8] Increased Contrast of Icons Signed-off-by: Wise-Wizard --- packages/jaeger-ui/src/components/common/utils.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/jaeger-ui/src/components/common/utils.css b/packages/jaeger-ui/src/components/common/utils.css index 9f8fe68d1e..3a9027f584 100644 --- a/packages/jaeger-ui/src/components/common/utils.css +++ b/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;