From a0c810056c22f0061a3b80e2abf8ee8969c1b393 Mon Sep 17 00:00:00 2001 From: Muzi Qiu Date: Thu, 7 Dec 2023 22:35:02 -0500 Subject: [PATCH 1/2] Resolves #2031 Replace Reselect with Memoize Remove package Reselect Delete file selectors/dependencies Add the memoize function to components/DependencyGraph/index.tsx Signed-off-by: Muzi Qiu --- packages/jaeger-ui/package.json | 1 - .../src/components/DependencyGraph/index.jsx | 45 +++++++++++++- .../jaeger-ui/src/selectors/dependencies.js | 62 ------------------- packages/jaeger-ui/tsconfig.lint.json | 1 - yarn.lock | 5 -- 5 files changed, 44 insertions(+), 70 deletions(-) delete mode 100644 packages/jaeger-ui/src/selectors/dependencies.js diff --git a/packages/jaeger-ui/package.json b/packages/jaeger-ui/package.json index 03f16b7340..81c9f0381f 100644 --- a/packages/jaeger-ui/package.json +++ b/packages/jaeger-ui/package.json @@ -93,7 +93,6 @@ "redux-first-history": "^5.1.1", "redux-form": "^8.3.10", "redux-promise-middleware": "^6.1.3", - "reselect": "^4.1.6", "store": "^2.0.12", "ts-key-enum": "^2.0.0", "tween-functions": "^1.2.0", diff --git a/packages/jaeger-ui/src/components/DependencyGraph/index.jsx b/packages/jaeger-ui/src/components/DependencyGraph/index.jsx index a145db2c29..3267c4880c 100644 --- a/packages/jaeger-ui/src/components/DependencyGraph/index.jsx +++ b/packages/jaeger-ui/src/components/DependencyGraph/index.jsx @@ -17,6 +17,7 @@ import { Tabs } from 'antd'; import PropTypes from 'prop-types'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; +import memoizeOne from 'memoize-one'; import DAG from './DAG'; import DependencyForceGraph from './DependencyForceGraph'; @@ -25,7 +26,6 @@ import LoadingIndicator from '../common/LoadingIndicator'; import * as jaegerApiActions from '../../actions/jaeger-api'; import { FALLBACK_DAG_MAX_NUM_SERVICES } from '../../constants'; import { nodesPropTypes, linksPropTypes } from '../../propTypes/dependencies'; -import { formatDependenciesAsNodesAndLinks } from '../../selectors/dependencies'; import { getConfigValue } from '../../utils/config/get-config'; import './index.css'; @@ -128,6 +128,49 @@ export class DependencyGraphPageImpl extends Component { } } +const formatDependenciesAsNodesAndLinks = memoizeOne(dependencies => { + const data = dependencies.reduce( + (response, link) => { + const { nodeMap } = response; + let { links } = response; + + // add both the parent and child to the node map, or increment their + // call count. + nodeMap[link.parent] = nodeMap[link.parent] ? nodeMap[link.parent] + link.callCount : link.callCount; + nodeMap[link.child] = nodeMap[link.child] + ? response.nodeMap[link.child] + link.callCount + : link.callCount; + + // filter out self-dependent + if (link.parent !== link.child) { + links = links.concat([ + { + source: link.parent, + target: link.child, + callCount: link.callCount, + value: Math.max(Math.sqrt(link.callCount / 10000), 1), + target_node_size: Math.max(Math.log(nodeMap[link.child] / 1000), 3), + }, + ]); + } + + return { nodeMap, links }; + }, + { nodeMap: {}, links: [] } + ); + + data.nodes = Object.keys(data.nodeMap).map(id => ({ + callCount: data.nodeMap[id], + radius: Math.max(Math.log(data.nodeMap[id] / 1000), 3), + orphan: data.links.findIndex(link => id === link.source || id === link.target) === -1, + id, + })); + + const { nodes, links } = data; + + return { nodes, links }; +}); + // export for tests export function mapStateToProps(state) { const { dependencies, error, loading } = state.dependencies; diff --git a/packages/jaeger-ui/src/selectors/dependencies.js b/packages/jaeger-ui/src/selectors/dependencies.js deleted file mode 100644 index 79d797e6bb..0000000000 --- a/packages/jaeger-ui/src/selectors/dependencies.js +++ /dev/null @@ -1,62 +0,0 @@ -// Copyright (c) 2017 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 { createSelector } from 'reselect'; - -// eslint-disable-next-line import/prefer-default-export -export const formatDependenciesAsNodesAndLinks = createSelector( - ({ dependencies }) => dependencies, - dependencies => { - const data = dependencies.reduce( - (response, link) => { - const { nodeMap } = response; - let { links } = response; - - // add both the parent and child to the node map, or increment their - // call count. - nodeMap[link.parent] = nodeMap[link.parent] ? nodeMap[link.parent] + link.callCount : link.callCount; - nodeMap[link.child] = nodeMap[link.child] - ? response.nodeMap[link.child] + link.callCount - : link.callCount; - - // filter out self-dependent - if (link.parent !== link.child) { - links = links.concat([ - { - source: link.parent, - target: link.child, - callCount: link.callCount, - value: Math.max(Math.sqrt(link.callCount / 10000), 1), - target_node_size: Math.max(Math.log(nodeMap[link.child] / 1000), 3), - }, - ]); - } - - return { nodeMap, links }; - }, - { nodeMap: {}, links: [] } - ); - - data.nodes = Object.keys(data.nodeMap).map(id => ({ - callCount: data.nodeMap[id], - radius: Math.max(Math.log(data.nodeMap[id] / 1000), 3), - orphan: data.links.findIndex(link => id === link.source || id === link.target) === -1, - id, - })); - - const { nodes, links } = data; - - return { nodes, links }; - } -); diff --git a/packages/jaeger-ui/tsconfig.lint.json b/packages/jaeger-ui/tsconfig.lint.json index ed38394a93..de85f7a1ba 100644 --- a/packages/jaeger-ui/tsconfig.lint.json +++ b/packages/jaeger-ui/tsconfig.lint.json @@ -49,7 +49,6 @@ "src/reducers/index.js", "src/reducers/services.js", "src/reducers/trace.js", - "src/selectors/dependencies.js", "src/utils/configure-store.js", "src/utils/sort.js", "package.json" diff --git a/yarn.lock b/yarn.lock index a4447cf5d9..e4bb339afe 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8943,11 +8943,6 @@ requires-port@^1.0.0: resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8= -reselect@^4.1.6: - version "4.1.8" - resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.8.tgz#3f5dc671ea168dccdeb3e141236f69f02eaec524" - integrity sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ== - resize-observer-polyfill@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" From 426bfd91dcfcea075fe8a0725b6c96b2a80b5d29 Mon Sep 17 00:00:00 2001 From: Muzi Qiu Date: Sun, 10 Dec 2023 13:11:00 -0500 Subject: [PATCH 2/2] fix dependencies type Signed-off-by: Muzi Qiu --- packages/jaeger-ui/src/components/DependencyGraph/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/jaeger-ui/src/components/DependencyGraph/index.jsx b/packages/jaeger-ui/src/components/DependencyGraph/index.jsx index 3267c4880c..b134723715 100644 --- a/packages/jaeger-ui/src/components/DependencyGraph/index.jsx +++ b/packages/jaeger-ui/src/components/DependencyGraph/index.jsx @@ -177,7 +177,7 @@ export function mapStateToProps(state) { let links; let nodes; if (dependencies && dependencies.length > 0) { - const formatted = formatDependenciesAsNodesAndLinks({ dependencies }); + const formatted = formatDependenciesAsNodesAndLinks(dependencies); links = formatted.links; nodes = formatted.nodes; }