Unify `RecursiveTables` abstraction (#343)

Summary:
A `RecursiveTable` shows the tree-view from a single node; a
`RecursiveTables` shows multiple `RecursiveTable`s, and is used both in
the recursion and at the top level. This is useful because we’ll want to
make changes to both entry points, for things like pagination. In
particular, this makes #342 nicer.

Test Plan:
Note that the behavior is unchanged. Then, apply

```diff
diff --git a/src/v1/app/credExplorer/pagerankTable.js b/src/v1/app/credExplorer/pagerankTable.js
index 624bd71..e343e95 100644
--- a/src/v1/app/credExplorer/pagerankTable.js
+++ b/src/v1/app/credExplorer/pagerankTable.js
@@ -220,6 +220,7 @@ class RecursiveTables extends React.Component<RecursiveTablesProps> {
         const y = pagerankResult.get(b).probability;
         return y - x;
       })
+      .slice(0, 10)
       .map((address) => (
         <RecursiveTable
           depth={depth}
```

and note that (a) the root view has only ten entries, and (b) any
expanded subview also has only ten entries.

wchargin-branch: recursive-tables
This commit is contained in:
William Chargin 2018-06-05 10:29:22 -07:00 committed by GitHub
parent 222c334027
commit 910e4fc831
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 39 additions and 26 deletions

View File

@ -111,21 +111,16 @@ export class PagerankTable extends React.Component<Props, State> {
throw new Error("Impossible."); throw new Error("Impossible.");
} }
const {graph, pagerankResult} = this.props; const {graph, pagerankResult} = this.props;
const nodesByScore = graph const addresses = graph
.nodes() .nodes()
.slice() .map((node) => node.address)
.filter( .filter(
(n) => (address) =>
this.state.topLevelFilter this.state.topLevelFilter
? n.address.pluginName === this.state.topLevelFilter.pluginName && ? address.pluginName === this.state.topLevelFilter.pluginName &&
n.address.type === this.state.topLevelFilter.type address.type === this.state.topLevelFilter.type
: true : true
) );
.sort((a, b) => {
const x = pagerankResult.get(a.address).probability;
const y = pagerankResult.get(b.address).probability;
return y - x;
});
return ( return (
<table style={{borderCollapse: "collapse"}}> <table style={{borderCollapse: "collapse"}}>
<thead> <thead>
@ -136,15 +131,12 @@ export class PagerankTable extends React.Component<Props, State> {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{nodesByScore.map((node) => ( <RecursiveTables
<RecursiveTable addresses={addresses}
depth={0}
address={node.address}
graph={graph} graph={graph}
pagerankResult={pagerankResult} pagerankResult={pagerankResult}
key={stringify(node.address)} depth={0}
/> />
))}
</tbody> </tbody>
</table> </table>
); );
@ -200,16 +192,37 @@ class RecursiveTable extends React.Component<RTProps, RTState> {
graph.neighborhood(address).forEach(({neighbor}) => { graph.neighborhood(address).forEach(({neighbor}) => {
neighborMap.add({address: neighbor}); neighborMap.add({address: neighbor});
}); });
return neighborMap return (
.getAll() <RecursiveTables
addresses={neighborMap.getAll().map(({address}) => address)}
graph={graph}
pagerankResult={pagerankResult}
depth={depth + 1}
/>
);
}
}
type RecursiveTablesProps = {|
+addresses: $ReadOnlyArray<Address>,
+graph: Graph,
+pagerankResult: PagerankResult,
+depth: number,
|};
class RecursiveTables extends React.Component<RecursiveTablesProps> {
render() {
const {addresses, graph, pagerankResult, depth} = this.props;
return addresses
.slice()
.sort((a, b) => { .sort((a, b) => {
const x = pagerankResult.get(a.address).probability; const x = pagerankResult.get(a).probability;
const y = pagerankResult.get(b.address).probability; const y = pagerankResult.get(b).probability;
return y - x; return y - x;
}) })
.map(({address}) => ( .map((address) => (
<RecursiveTable <RecursiveTable
depth={depth + 1} depth={depth}
address={address} address={address}
graph={graph} graph={graph}
pagerankResult={pagerankResult} pagerankResult={pagerankResult}