* Use font roboto
* Change title.
* Add grid gap
* Restyle app; blue header, and css->inline.
* Further visual cleanup.
- Apply consistent formatting to the two plugin panes.
- Add scroll to the User Explorer.
- Both have white backgrounds with centered titles.
Summary:
Closes#17; see discussion there.
This commit uses the `babel-plugin-flow-react-proptypes` package to
automatically create PropType definitions from components that are typed
with Flow. It simultaneously updates all of our existing components to
be typed with Flow. As a result, we have both static and dynamic type
checking.
Test Plan:
Note that `yarn test` and `yarn flow` report no errors, and that there
are no prop validation errors at runtime with `yarn start`.
Then, apply the following patch:
```diff
diff --git a/explorer/src/UserExplorer.js b/explorer/src/UserExplorer.js
index bb574cd..636a10d 100644
--- a/explorer/src/UserExplorer.js
+++ b/explorer/src/UserExplorer.js
@@ -18,7 +18,7 @@ export class UserExplorer extends Component<{
.sort((a,b) => b[1] - a[1]);
const entries = sortedUserWeightTuples.map(authorWeight => {
const [author, weight] = authorWeight;
- return <UserEntry userId={author} weight={weight} key={author}/>
+ return <UserEntry userId={55} weight={weight} key={author}/>
});
return <div className="user-explorer">
<h3> User Explorer </h3>
```
Note that `yarn test` fails (the `App.test.js` E2E rendering test),
`yarn flow` fails, and there is a runtime prop validation error.
wchargin-branch: autogenerate-proptypes
Test Plan:
Run `yarn start` and note that the app runs without any console
warnings, but that changing some of the PropTypes to introduce an error
actually does cause a warning. Upcoming: an automatic test for this.
wchargin-branch: add-proptypes
Sets up an initial cred explorer that looks at Git commit data
- uses git commit data as generated by `experiments/01_commit_graph_dump.ipynb`
- displays a file explorer, which lets you navigate the file tree by expanding/collapsing dirs, and select a path via double clicking (changes background color)
- displays a user explorer, which shows a sorted list of authors and cred amounts for the selected file path
The commit-wrangling logic is in commitUtils.js and has typechecking (via flow) and some basic testing.
The frontend is built with react; setup was bootstrapped via create-react-app.
Test plan:
```
cd explorer;
yarn install; # get dependencies
yarn flow; # check that types check out
yarn test; # check that tests pass, then `q`
yarn start; # go to localhost:3000 and click around
```
expected behavior: there's a file explorer that shows TensorBoard file structure on the left. you can click the buttons to explore directory, and you can click files to select that path. on the right, it shows you the users that contributed to that directory and their cred for those commits.
note: the ui is very crude.
Dandelion Mané
William Chargin