* 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
Summary:
This should ensure that there aren’t any runtime PropTypes errors.
The change to reimplement `Object.entries` is due to the fact that my
local Node environment (v6.11.1) does not yet support that ESnext
function.
Test Plan:
Apply the following diff (`git apply`):
```diff
diff --git a/explorer/src/UserExplorer.js b/explorer/src/UserExplorer.js
index 8da252d..cdc1370 100644
--- a/explorer/src/UserExplorer.js
+++ b/explorer/src/UserExplorer.js
@@ -10,7 +10,7 @@ export class UserExplorer extends Component {
static propTypes = {
selectedPath: PropTypes.string.isRequired,
selectedUser: PropTypes.string,
- onSelectUser: PropTypes.func.isRequired,
+ onSelectUser: PropTypes.number.isRequired,
data: commitUtilsPropTypes.commitData.isRequired,
}
```
Then, `yarn test` should fail. Revert the diff, and `yarn test` should
pass.
wchargin-branch: react-proptypes-test
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.
* Initial infrastructure for sourcecred-explorer.
Setup npm, yarn, flow, jest using scaffolding from
create-react-app.
- used create-react-app to get the basic pieces
- added support for flow via instructions in the
create-react-app user guide
- added flow-typed so that flow+jest will work well
* Add some additional resources
* Add index.css
* Remove .DS_STORE per @wchargin's suggestion
commit_graph_dump is modified to use camelCase variables
in the output data.json. Saved the data for TensorBoard
in explorer/src/data.json, where it's useful for debugging
/ iterating on the frontend.
Dandelion Mané
William Chargin