diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 0e1bf94..56150af 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -24,7 +24,8 @@ "react": "16.4.0", "react-dom": "16.4.0", "react-scripts-ts": "2.17.0", - "react-svg": "^4.1.1" + "react-svg": "^4.1.1", + "stable": "^0.1.8" }, "scripts": { "start": "react-scripts-ts start", diff --git a/packages/frontend/src/components/Chains.tsx b/packages/frontend/src/components/Chains.tsx index fc52cf2..14444bc 100644 --- a/packages/frontend/src/components/Chains.tsx +++ b/packages/frontend/src/components/Chains.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { Connection } from '../Connection'; import { Icon } from './Icon'; import { Types, Maybe } from '@dotstats/common'; +import stable from 'stable'; import githubIcon from '../icons/mark-github.svg'; import './Chains.css'; @@ -48,11 +49,11 @@ export class Chains extends React.Component { } private get chains(): ChainData[] { - return Array - .from(this.props.chains.entries()) - .sort((a, b) => { - return b[1] - a[1]; - }) + return stable + .inplace( + Array.from(this.props.chains.entries()), + (a, b) => b[1] - a[1] + ) .map(([label, nodeCount]) => ({ label, nodeCount })); } diff --git a/yarn.lock b/yarn.lock index 11bd6c3..f83192c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8506,6 +8506,11 @@ ssri@^5.2.4: dependencies: safe-buffer "^5.1.1" +stable@^0.1.8: + version "0.1.8" + resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf" + integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w== + stack-utils@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.2.tgz#33eba3897788558bebfc2db059dc158ec36cebb8"