Turbo Render (#298)

* More responsive React updates on scroll * `Icon`s now use shadow dom * Faster Sparkline * Recycle table rows * Separate Header from Chain to avoid vdom diffing * Separate THead from Row.HEADER to avoid vdom diffing * Throttle rendering updates on chain tabs, also styles * Minor tweaks and fixes * Created components for all columns * Wrapping up Column refactor * Rename Row--td to Column * Lazy `Ago` * Update styles for faster layouting * Minor cleanup * Fix Connection * Use shadow DOM in `PolkadotIcon` * Comments and tweaks for the List component * Faster Tooltip and Truncate * Minor tweaks * Tooltiped columns can now be copied * Future-proof Connection * Remove the <div> wrapper from Icon * Fix dash on missing graph data * Clean up some SVGs * Cleanup and comments * Localize the use of `previousKeys` to `recalculateKeys` * Custom appState disjoint from React component state * Make appState and appUpdate refs readonly * Cleanup
2026-06-19 19:21:08 +00:00 · 2020-11-11 13:41:01 +01:00
parent 675776c3e1
commit ebb01c1a7d
72 changed files with 1863 additions and 1118 deletions
@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { Types, Maybe } from '../../common';
+import { formatNumber, secondsWithPrecision } from '../../utils';
+import { Tab, Chain } from './';
+import { Tile, Ago } from '../';
+
+import blockIcon from '../../icons/cube.svg';
+import finalizedIcon from '../../icons/cube-alt.svg';
+import blockTimeIcon from '../../icons/history.svg';
+import lastTimeIcon from '../../icons/watch.svg';
+import listIcon from '../../icons/list-alt-regular.svg';
+import worldIcon from '../../icons/location.svg';
+import settingsIcon from '../../icons/settings.svg';
+import consensusIcon from '../../icons/cube-alt.svg';
+
+import './Header.css';
+
+export namespace Header {
+  export interface Props {
+    best: Types.BlockNumber;
+    finalized: Types.BlockNumber;
+    blockTimestamp: Types.Timestamp;
+    blockAverage: Maybe<Types.Milliseconds>;
+    currentTab: Chain.Display;
+    setDisplay: (display: Chain.Display) => void;
+  }
+}
+
+export class Header extends React.Component<Header.Props, {}> {
+  public shouldComponentUpdate(nextProps: Header.Props) {
+    return (
+      this.props.best !== nextProps.best ||
+      this.props.finalized !== nextProps.finalized ||
+      this.props.blockTimestamp !== nextProps.blockTimestamp ||
+      this.props.blockAverage !== nextProps.blockAverage ||
+      this.props.currentTab !== nextProps.currentTab
+    );
+  }
+
+  public render() {
+    const { best, finalized, blockTimestamp, blockAverage } = this.props;
+    const { currentTab, setDisplay } = this.props;
+
+    return (
+      <div className="Header">
+        <Tile icon={blockIcon} title="Best Block">
+          #{formatNumber(best)}
+        </Tile>
+        <Tile icon={finalizedIcon} title="Finalized Block">
+          #{formatNumber(finalized)}
+        </Tile>
+        <Tile icon={blockTimeIcon} title="Average Time">
+          {blockAverage == null
+            ? '-'
+            : secondsWithPrecision(blockAverage / 1000)}
+        </Tile>
+        <Tile icon={lastTimeIcon} title="Last Block">
+          <Ago when={blockTimestamp} />
+        </Tile>
+        <div className="Header-tabs">
+          <Tab
+            icon={listIcon}
+            label="List"
+            display="list"
+            tab=""
+            current={currentTab}
+            setDisplay={setDisplay}
+          />
+          <Tab
+            icon={worldIcon}
+            label="Map"
+            display="map"
+            tab="map"
+            current={currentTab}
+            setDisplay={setDisplay}
+          />
+          <Tab
+            icon={consensusIcon}
+            label="Consensus"
+            display="consensus"
+            tab="consensus"
+            current={currentTab}
+            setDisplay={setDisplay}
+          />
+          <Tab
+            icon={settingsIcon}
+            label="Settings"
+            display="settings"
+            tab="settings"
+            current={currentTab}
+            setDisplay={setDisplay}
+          />
+        </div>
+      </div>
+    );
+  }
+}