Rename cred explorer table columns (#680)

The 'Score' column is renamed to 'Cred' (and its prop is renamed as
well). The column which shows how a connection or aggregation
contributes to a node's cred, as a percentage, has been rendered
nameless. It is pretty self explanatory, and the previous name
("Connection") was meaningless.

Test plan: Unit tests, also I inspected the frontend.

CHANGELOG.md

@@ -5,4 +5,5 @@
 - Aggregate over connection types in the cred explorer (#502)
 - Support hosting SourceCred instances at arbitrary gateways, not just the root of a domain (#643)
 - Display version string in the app's footer
+- Rename cred explorer table columns (#680)
 

src/app/credExplorer/pagerankTable/Aggregation.js

@@ -66,7 +66,7 @@ export class AggregationRow extends React.PureComponent<AggregationRowProps> {
         indent={1}
         showPadding={false}
         connectionProportion={connectionProportion}
-        score={score}
+        cred={score}
         description={<AggregationView aggregation={aggregation} />}
       >
         <ConnectionRowList

src/app/credExplorer/pagerankTable/Aggregation.test.js

@@ -109,9 +109,9 @@ describe("app/credExplorer/pagerankTable/Aggregation", () => {
         const {row} = await setup();
         expect(row.props().showPadding).toBe(false);
       });
-      it("with the aggregation score", async () => {
+      it("with the aggregation score as its cred", async () => {
         const {row, aggregation} = await setup();
-        expect(row.props().score).toBe(aggregation.summary.score);
+        expect(row.props().cred).toBe(aggregation.summary.score);
       });
       it("with the aggregation's contribution proportion", async () => {
         const {row, target, aggregation, sharedProps} = await setup();

src/app/credExplorer/pagerankTable/Connection.js

@@ -72,7 +72,7 @@ export class ConnectionRow extends React.PureComponent<ConnectionRowProps> {
         description={connectionView}
         connectionProportion={connectionProportion}
         showPadding={false}
-        score={connectionScore}
+        cred={connectionScore}
       >
         <NodeRow
           depth={depth + 1}

src/app/credExplorer/pagerankTable/Connection.test.js

@@ -110,9 +110,9 @@ describe("app/credExplorer/pagerankTable/Connection", () => {
         const {row} = await setup();
         expect(row.props().showPadding).toBe(false);
       });
-      it("with the connection score", async () => {
+      it("with the connection score as its cred", async () => {
         const {row, scoredConnection} = await setup();
-        expect(row.props().score).toBe(scoredConnection.connectionScore);
+        expect(row.props().cred).toBe(scoredConnection.connectionScore);
       });
       it("with the connectionProportion", async () => {
         const {row, target, scoredConnection, sharedProps} = await setup();

src/app/credExplorer/pagerankTable/Node.js

@@ -58,7 +58,7 @@ export class NodeRow extends React.PureComponent<NodeRowProps> {
         showPadding={showPadding}
         description={description}
         connectionProportion={null}
-        score={score}
+        cred={score}
       >
         <AggregationRowList
           depth={depth}

src/app/credExplorer/pagerankTable/Node.test.js

@@ -113,10 +113,10 @@ describe("app/credExplorer/pagerankTable/Node", () => {
         const {row: row1} = await setup({showPadding: false});
         expect(row1.props().showPadding).toBe(false);
       });
-      it("with the node's score", async () => {
+      it("with the node's score as its cred", async () => {
         const {row, node, sharedProps} = await setup();
         const score = NullUtil.get(sharedProps.pnd.get(node)).score;
-        expect(row.props().score).toBe(score);
+        expect(row.props().cred).toBe(score);
       });
       it("with no connectionProportion", async () => {
         const {row} = await setup();

src/app/credExplorer/pagerankTable/Table.js

@@ -116,8 +116,8 @@ export class PagerankTable extends React.PureComponent<
         <thead>
           <tr>
             <th style={{textAlign: "left"}}>Description</th>
-            <th style={{textAlign: "right"}}>Connection</th>
+            <th style={{textAlign: "right"}} />
-            <th style={{textAlign: "right"}}>Score</th>
+            <th style={{textAlign: "right"}}>Cred</th>
           </tr>
         </thead>
         <tbody>

src/app/credExplorer/pagerankTable/TableRow.js

@@ -11,8 +11,8 @@ type TableRowProps = {|
   +description: ReactNode,
   // What proportion should be formatted in the connection column
   +connectionProportion: ?number,
-  // The score to format and display
+  // The cred amount to format and display
-  +score: number,
+  +cred: number,
   // Children to show when the row is expanded
   +children: ReactNode,
   +showPadding: boolean,
@@ -21,8 +21,8 @@ type TableRowState = {|
   expanded: boolean,
 |};
 
-export function scoreDisplay(score: number) {
+export function credDisplay(cred: number) {
-  return score.toFixed(2);
+  return cred.toFixed(2);
 }
 
 export class TableRow extends React.PureComponent<
@@ -39,7 +39,7 @@ export class TableRow extends React.PureComponent<
       indent,
       description,
       connectionProportion,
-      score,
+      cred,
       children,
       showPadding,
     } = this.props;
@@ -71,7 +71,7 @@ export class TableRow extends React.PureComponent<
           </td>
           <td style={{textAlign: "right"}}>{percent}</td>
           <td style={{textAlign: "right"}}>
-            <span style={{marginRight: 5}}>{scoreDisplay(score)}</span>
+            <span style={{marginRight: 5}}>{credDisplay(cred)}</span>
           </td>
         </tr>
         {expanded && children}

src/app/credExplorer/pagerankTable/TableRow.test.js

@@ -15,7 +15,7 @@ describe("app/credExplorer/pagerankTable/TableRow", () => {
         indent={1}
         description={<span data-test-description={true} />}
         connectionProportion={0.5}
-        score={133.7}
+        cred={133.7}
         children={<div data-test-children={true} />}
         showPadding={false}
       />
@@ -30,7 +30,7 @@ describe("app/credExplorer/pagerankTable/TableRow", () => {
           showPadding={false}
           description={<span data-test-description={true} />}
           connectionProportion={0.5}
-          score={133.7}
+          cred={133.7}
           children={<div data-test-children={true} />}
         />
       );
@@ -48,7 +48,7 @@ describe("app/credExplorer/pagerankTable/TableRow", () => {
           showPadding={false}
           description={<span data-test-description={true} />}
           connectionProportion={0.5}
-          score={133.7}
+          cred={133.7}
           children={<div data-test-children={true} />}
         />
       );
@@ -88,7 +88,7 @@ describe("app/credExplorer/pagerankTable/TableRow", () => {
     expect(el.find("td")).toHaveLength(COLUMNS().length);
   });
   it("displays formatted connectionPercentage in the correct column", () => {
-    const index = COLUMNS().indexOf("Connection");
+    const index = COLUMNS().indexOf("");
     expect(index).not.toEqual(-1);
     const td = example()
       .find("td")
@@ -96,15 +96,15 @@ describe("app/credExplorer/pagerankTable/TableRow", () => {
     expect(td.text()).toEqual("50.00%");
   });
   it("displays empty column when connectionProportion not set", () => {
-    const index = COLUMNS().indexOf("Connection");
+    const index = COLUMNS().indexOf("");
     expect(index).not.toEqual(-1);
     const el = example();
     el.setProps({connectionProportion: null});
     const td = el.find("td").at(index);
     expect(td.text()).toEqual("");
   });
-  it("displays formatted score in the correct column", () => {
+  it("displays formatted cred in the correct column", () => {
-    const index = COLUMNS().indexOf("Score");
+    const index = COLUMNS().indexOf("Cred");
     expect(index).not.toEqual(-1);
     const td = example()
       .find("td")
@@ -131,7 +131,7 @@ describe("app/credExplorer/pagerankTable/TableRow", () => {
           indent={1}
           description={<span data-test-description={true} />}
           connectionProportion={0.5}
-          score={133.7}
+          cred={133.7}
           children={<div data-test-children={true} />}
           showPadding={true}
         />

src/app/credExplorer/pagerankTable/sharedTestUtils.js

@@ -6,7 +6,7 @@ import {StaticAdapterSet, DynamicAdapterSet} from "../../adapters/adapterSet";
 import type {DynamicPluginAdapter} from "../../adapters/pluginAdapter";
 import {pagerank} from "../../../core/attribution/pagerank";
 
-export const COLUMNS = () => ["Description", "Connection", "Score"];
+export const COLUMNS = () => ["Description", "", "Cred"];
 
 export async function example() {
   const graph = new Graph();