Use stable sort for chain tabs (#113)

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",

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<Chains.Props, {}> {
   }
 
   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 }));
   }
 

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"