Do less work when rendering (#78)

packages/frontend/src/components/Chain/Chain.tsx

@@ -123,6 +123,7 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
     const { filter } = this.state;
     const nodeFilter = this.getNodeFilter();
     const nodes = nodeFilter ? this.nodes().filter(nodeFilter) : this.nodes();
+    const columns = Node.Row.columns.filter(({ setting }) => setting == null || settings[setting]);
 
     if (nodeFilter && nodes.length === 0) {
       return (
@@ -137,10 +138,10 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
       <React.Fragment>
         {filter != null ? <Filter value={filter} onChange={this.onFilterChange} /> : null}
         <table className="Chain-node-list">
-          <Node.Row.Header settings={settings} />
+          <Node.Row.Header columns={columns} />
           <tbody>
           {
-            nodes.map((node) => <Node.Row key={node.id} node={node} settings={settings} pins={pins} />)
+            nodes.map((node) => <Node.Row key={node.id} node={node} pins={pins} columns={columns} />)
           }
           </tbody>
         </table>

packages/frontend/src/components/Node/Row.tsx

@@ -4,7 +4,7 @@ import { Types, Maybe, timestamp } from '@dotstats/common';
 import { formatNumber, milliOrSecond, secondsWithPrecision } from '../../utils';
 import { State as AppState, Node } from '../../state';
 import { PersistentSet } from '../../persist';
-import { SEMVER_PATTERN } from './';
+import { SEMVER_PATTERN, Truncate } from './';
 import { Ago, Icon, Tooltip, Sparkline } from '../';
 
 import nodeIcon from '../../icons/server.svg';
@@ -29,8 +29,8 @@ import './Row.css';
 
 interface RowProps {
   node: Node;
-  settings: AppState.Settings;
   pins: PersistentSet<Types.NodeName>;
+  columns: Column[];
 };
 
 interface RowState {
@@ -38,7 +38,7 @@ interface RowState {
 };
 
 interface HeaderProps {
-  settings: AppState.Settings;
+  columns: Column[];
 };
 
 interface Column {
@@ -49,16 +49,6 @@ interface Column {
   render: (node: Node) => React.ReactElement<any> | string;
 }
 
-function Truncate(props: { text: string, position?: 'left' | 'right' | 'center' }): React.ReactElement<any> {
-  const { text, position } = props;
-
-  return (
-    <Tooltip text={text} position={position} className="Node-Row-Tooltip">
-      <div className="Node-Row-truncate">{text}</div>
-    </Tooltip>
-  );
-}
-
 function formatStamp(stamp: Types.Timestamp): string {
   const passed = (timestamp() - stamp) / 1000 | 0;
 
@@ -215,8 +205,7 @@ export default class Row extends React.Component<RowProps, RowState> {
   ];
 
   public static Header = (props: HeaderProps) => {
-    const { settings } = props;
-    const columns = Row.columns.filter(({ setting }) => setting == null || settings[setting]);
+    const { columns } = props;
     const last = columns.length - 1;
 
     return (
@@ -259,7 +248,7 @@ export default class Row extends React.Component<RowProps, RowState> {
   }
 
   public render() {
-    const { node, settings } = this.props;
+    const { node, columns } = this.props;
 
     let className = 'Node-Row';
 
@@ -274,9 +263,7 @@ export default class Row extends React.Component<RowProps, RowState> {
     return (
       <tr className={className} onClick={this.toggle}>
         {
-          Row.columns
-            .filter(({ setting }) => setting == null || settings[setting])
-            .map(({ render }, index) => <td key={index}>{render(node)}</td>)
+          columns.map(({ render }, index) => <td key={index}>{render(node)}</td>)
         }
       </tr>
     );

packages/frontend/src/components/Node/Truncate.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Tooltip } from '../';
+
+namespace Truncate {
+  export interface Props {
+    text: string,
+    position?: Tooltip.Props['position']
+  }
+}
+
+class Truncate extends React.Component<Truncate.Props, {}> {
+  public render() {
+    const { text, position } = this.props;
+
+    return (
+      <Tooltip text={text} position={position} className="Node-Row-Tooltip">
+        <div className="Node-Row-truncate">{text}</div>
+      </Tooltip>
+    );
+  }
+
+  public shouldComponentUpdate(nextProps: Truncate.Props): boolean {
+    return this.props.text !== nextProps.text || this.props.position !== nextProps.position;
+  }
+}
+
+export default Truncate;

packages/frontend/src/components/Node/index.ts

@@ -1,6 +1,7 @@
 import Row from './Row';
 import Location from './Location';
+import Truncate from './Truncate';
 
-export { Row, Location };
+export { Row, Location, Truncate };
 
 export const SEMVER_PATTERN = /^\d+\.\d+\.\d+/;