Minor tweaks to time displays

packages/frontend/src/Connection.ts

@@ -114,6 +114,8 @@ export class Connection {
         case Actions.BestBlock: {
           const [best, blockTimestamp, blockAverage] = message.payload;
 
+          nodes.forEach((node) => node.blockDetails[4] = null);
+
           this.state = this.update({ best, blockTimestamp, blockAverage });
 
           continue messages;

packages/frontend/src/components/Chain.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { State as AppState } from '../state';
-import { formatNumber } from '../utils';
+import { formatNumber, secondsWithPrecision } from '../utils';
 import { Tile, Icon, Node, Ago } from './';
 
 import nodeIcon from '../icons/server.svg';
@@ -54,7 +54,7 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
       <div className="Chain">
         <div className="Chain-header">
           <Tile icon={blockIcon} title="Best Block">#{formatNumber(best)}</Tile>
-          <Tile icon={blockTimeIcon} title="Avgerage Time">{ blockAverage == null ? '-' : (blockAverage / 1000).toFixed(3) + 's' }</Tile>
+          <Tile icon={blockTimeIcon} title="Avgerage Time">{ blockAverage == null ? '-' : secondsWithPrecision(blockAverage / 1000) }</Tile>
           <Tile icon={lastTimeIcon} title="Last Block"><Ago when={blockTimestamp} /></Tile>
         </div>
         <div className="Chain-content-container">

packages/frontend/src/components/Node.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { formatNumber, trimHash } from '../utils';
+import { formatNumber, trimHash, milliOrSecond, secondsWithPrecision } from '../utils';
 import { Ago } from './Ago';
 import { Types, Maybe } from '@dotstats/common';
 
@@ -26,8 +26,8 @@ export function Node(props: Node.Props) {
       <td style={{ width: 26 }}>{txcount}</td>
       <td style={{ width: 88 }}>#{formatNumber(height)}</td>
       <td style={{ width: 154 }}><span title={hash}>{trimHash(hash, 16)}</span></td>
-      <td style={{ width: 80 }}>{(blockTime / 1000).toFixed(3)}s</td>
-      <td style={{ width: 58 }}>{propagationTime === null ? '∞' : `${propagationTime}ms`}</td>
+      <td style={{ width: 80 }}>{secondsWithPrecision(blockTime/1000)}</td>
+      <td style={{ width: 58 }}>{propagationTime === null ? '∞' : milliOrSecond(propagationTime as number)}</td>
       <td style={{ width: 82 }}><Ago when={blockTimestamp} /></td>
     </tr>
   );

packages/frontend/src/utils.ts

@@ -23,3 +23,23 @@ export function trimHash(hash: string, length: number): string {
 
   return hash.substr(0, side) + '..' + hash.substr(-side, side);
 }
+
+export function milliOrSecond(num: number): string {
+  if (num < 10000) {
+    return `${num}ms`;
+  }
+
+  return `${(num / 1000) | 0}s`;
+}
+
+export function secondsWithPrecision(num: number): string {
+  const intString = (num | 0).toString()
+  const intDigits = intString.length;
+
+  switch (intDigits) {
+    case 1: return num.toFixed(3) + 's';
+    case 2: return num.toFixed(2) + 's';
+    case 3: return num.toFixed(1) + 's';
+    default: return intString + 's';
+  }
+}