React router integration

[JobLeonard]

So this turned into a rabbit hole inside a rabbit hole inside a rabbit hole, but I think we're at a stable enough point (although still broken around the edges) to merge back. I'm creating this pull request at 17:00 before going home; I'll do the merge tomorrow morning and then spend the rest of the day fixing everything that inevitably breaks as a result.

• implemented usage of react-router
• refactored the plotting components into a separate <Canvas> component and the plotting components that pass it a paint(conext, width, height) function
  • <Canvas> takes care of its own resizing and re-rendering, automatically scaling to fit its parent div
• removed viewState
  • used to keep track of which view we are watching, now handled by react-router
  • used to keep track of viewport size, which ideally is the responsibility of responsive CSS layouting.
  • in progress migration to flexbox + <Canvas> component that does just that. Mostly working for genescape & landscape, still broken in heatmap & sparkline (which had other viewState-related bugs before anyway)
• refactored all view components into sub-components that each are connected to the redux-store individually, which supposedly is more efficient.

A whole lot of optimisations and other changes are also in this branch:

• implemented manual pseudo-caching of datasets in the redux store, avoiding the need for downloading data again and speeding up performance
• all dropdowns now use react-select, making it easier to find fields. (TODO: make the gene-fetching UI also use this)
• JSX linting support in .eslintrc
• changed to project.json to require minimum versions of the many components used
• changed webpack settings to default to debug mode for now, until we hit a point where it even makes sense to have an optimised production build
• massive code clean-up in many components, often guided by the strict linting rules.

Not yet implemented: encoding the view settings in the URL. I have found a package that should make this fairly trivial to implement together with react-router however, since it should be trivial to convert JS objects containing these view settings to (URL) strings and back.

There's enough merge conflicts to require a manual merge, and some things will break at first (specificaly, loom-server.py and the client-side will be out of sync after the merge, but that will be easy to fix because I know where the issues are. Undoubtedly other problems that will emerge as well).

[slinnarsson]

Great! I have poor internet here on a little island off the west coast (but great seafood!). However if you assign me issues I'll be able to fix them on the train back on Saturday.

Sten

Skickat från min iPhone

11 aug. 2016 kl. 17:07 skrev Job van der Zwan notifications@github.com<mailto:notifications@github.com>:

So this turned into a rabbit hole inside a rabbit hole inside a rabbit hole, but I think we're at a stable enough point (although still broken around the edges) to merge back. I'm creating this pull request at 17:00 before going home; I'll do the merge tomorrow morning and then spend the rest of the day fixing everything that inevitably breaks as a result.

• implemented usage of react-router
• refactored the plotting components into a separate component and the plotting components that pass it a paint(conext, width, height) function
  • takes care of its own resizing and re-rendering, automatically scaling to fit its parent div
• removed viewState
  • used to keep track of which view we are watching, now handled by react-router
  • used to keep track of viewport size, which ideally is the responsibility of responsive CSS layouting.
  • in progress migration to flexbox + component that does just that. Mostly working for genescape & landscape, still broken in heatmap & sparkline (which had other viewState-related bugs before anyway)
• refactored all view components into sub-components that each are connected to the redux-store individually, which supposedly is more efficient.

A whole lot of optimisations and other changes are also in this branch:

• implemented manual pseudo-caching of datasets in the redux store, avoiding the need for downloading data again and speeding up performance
• all dropdowns now use react-select, making it easier to find fields. (TODO: make the gene-fetching UI also use this)
• JSX linting support in .eslintrc
• changed to project.json to require minimum versions of the many components used
• changed webpack settings to default to debug mode for now, until we hit a point where it even makes sense to have an optimised production build
• massive code clean-up in many components, often guided by the strict linting rules.

Not yet implemented: encoding the view settings in the URL. I have found a packagehttps://github.com/Sage/jsurl that should make this fairly trivial to implement together with react-router however, since it should be trivial to convert JS objects containing these view settings to (URL) strings and back.

There's enough merge conflicts to require a manual merge, and some things will break at first (specificaly, loom-server.py and the client-side will be out of sync after the merge, but that will be easy to fix because I know where the issues are. Undoubtedly other problems that will emerge as well).

---

You can view, comment on, or merge this pull request online at:

https://github.com/linnarsson-lab/Loom/pull/40

Commit Summary

• created react-router branch (not functioning yet)
• minimal run script
• fix build script
• minimum versions for dependencies
• switched to react-bootstrap, no longer needed
• First not-completely-broken version
• /dataset and /upload routes
• Some progress made, still broken
• added more routes to server-side
• Set webpack configuration to debug for now
• Moved bootstrap grid to individual views
• Refactored components, disabled redux for now
• Temporarily redirect all incorrect URLs for easier development
• Store now works with redux devtools
• Store fetched datasets in dictionary
• Added SET__PROPS actiontypes
• Dataview refactored, almost working again
• replace static jQuery with NPM installed version
• thunks should have a single argument
• typo: restul -> result
• still can't find store
• Making progress - fixed a few bugs, stumbled into new ones
• add reselect dependency for later optimisation
• Fixed double-groupby bug and store caching
• remove superfluous Hungarian notation
• removed hardcoded debug data
• added offline example project data for testing
• actually fix actions/reducers
• removed debug console.log
• make clicking on dataset expand to show viewlinks + metada
• disable links if dataset not ready
• Made views a dropdown list
• added eslint-plugin-react rules
• made dataset-view conform to new linter rules
• NavbarView linter pass
• MainView linter pass
• GenescapeView linter pass
• GenescapeSidepanel linter pass
• landscape-sidepanel linter pass
• renderDowpdownLink => renderDropdownLink
• scatterplot linter pass
• sparkline linter pass
• sparkline-sidepanel linter pass
• sparkline-view linter psas
• landscape-view linter pass
• refactored dataset-upload with new linter rules
• dropdown.js linter pass
• minor typos
• minor fixes
• fixed broken dataset-view
• minor indentation/documentation changes
• Add JSURL package to encode/decode objects in urls
• created Canvas helper component
• refactored out canvas logic into Canvas component
• "paint" => "painter"
• Trying to refactor canvas into its own component
• reorganised routes
• changing actions/reducers
• (in progress) refactoring of scatterplot/canvas
• dataset-view updated to react-router
• dropdown.js uses react-bootstrap now (wip)
• Make canvas auto-fill screen without redux (WIP)
• Auto-fit elements using flexbox
• Remove viewstate
• Use UI components from react-bootstrap
• Clean-up
• fix canvas autoscaling
• minor fix
• avoid rendering when there is no canvas present
• fix mysterious "5 px bottom margin" bug
• removed viewstate
• Added a tiny bit of padding around the canvas
• Re-connected heatmap to redux store
• Made the temporary redirects work again
• Pass variable name instead of actual variable. I miss type-safety.
• Implement react-select in DropdownMenu component
• add react-select css
• made dropdown fields non-clearable by default
• UI tweaks
• Halfway there on fixing sparkline.js
• upgrade react and react-dom version
• Stripping viewState out of heatmap (WIP)
• Remove upload and reorganise landing page

File Changes

• M .eslintrchttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-0 (29)
• M buildhttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-1 (6)
• A client/actions/actionTypes.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-2 (17)
• M client/actions/actions.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-3 (140)
• A client/components/canvas.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-4 (69)
• M client/components/dataset-view.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-5 (837)
• M client/components/dropdown.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-6 (79)
• M client/components/genescape-sidepanel.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-7 (124)
• M client/components/genescape-view.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-8 (81)
• M client/components/heatmap-sidepanel.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-9 (165)
• M client/components/heatmap-view.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-10 (145)
• M client/components/heatmap.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-11 (29)
• M client/components/landscape-sidepanel.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-12 (295)
• M client/components/landscape-view.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-13 (138)
• A client/components/main-view.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-14 (28)
• M client/components/navbar.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-15 (95)
• A client/components/routes.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-16 (40)
• M client/components/scatterplot.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-17 (58)
• M client/components/sparkline-sidepanel.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-18 (272)
• M client/components/sparkline-view.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-19 (237)
• M client/components/sparkline.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-20 (210)
• D client/css/react-select.csshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-21 (353)
• A client/css/react-select.min.csshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-22 (1)
• M client/index.htmlhttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-23 (6)
• D client/js/bootstrap.min.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-24 (7)
• D client/js/jquery.min.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-25 (4)
• M client/loom.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-26 (133)
• M client/reducers/reducers.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-27 (122)
• A client/store.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-28 (19)
• M package.jsonhttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-29 (46)
• M python/loom_server.pyhttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-30 (25)
• A runhttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-31 (6)
• A test/fileinfo.jsonhttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-32 (575147)
• M webpack.config.jshttps://github.com/linnarsson-lab/Loom/pull/40/files#diff-33 (8)

Patch Links:

• https://github.com/linnarsson-lab/Loom/pull/40.patch
• https://github.com/linnarsson-lab/Loom/pull/40.diff

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/linnarsson-lab/Loom/pull/40, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AKKagzyYYhaphYlL_lDfpv9e9kHHqIbMks5qezqIgaJpZM4JiOD7.