PyWorkflowApp / visual-programming

A Python Visual Programming Workspace for Data Science
MIT License
31 stars 12 forks source link

Front-end bug fixes, GraphView tweaks #79

Closed reelmatt closed 4 years ago

reelmatt commented 4 years ago

Fixes #59: Updates the Load button in the Modal.Footer to be disabled if the Node has not been executed (i.e. != 'complete') and therefore no data available. The same status message appears whether there is data or not. For cases where there is a large file to load, a react-spinners-css Component now appears instead of the "Loading data..." message.

Fixes #60: Increased the max-width attribute for .modal-dialog which also affects the non-GraphView windows. This is great for the case where there is a large data file to display, but not great for smaller files/other Modal windows. I couldn't easily target a child of the .modal-dialog so I committed as-is.

Part of this fix also includes a clean-up of the computeWidths function to make the row/column names clearer. It also calculates the maxWidth of the Grid which allows to dynamically adjust the size for smaller data files. The default size has been bumped from 480x150 to 600x1000.

The grid style has also been tweaked slightly to shade every other row (and not alternate by columns) and adds a slight border on the edges.

Fixes #74: Adjusts the API call so that the NetworkX representation on the back will always store an edge from outPort -> inPort regardless of whether the user creates the edge in reverse.

reddigari commented 4 years ago

Great fixes!

I would recommend targeting the modal classes specifically using the dialogClassName prop on the Modal component (see here). I think I used it to specifically style the node config form in #78, so it's probably better to not style all modals the same.

Tiny thing --- in my browser the data table extends over the modal width:

Screen Shot 2020-05-01 at 4 50 07 PM
reelmatt commented 4 years ago

Thanks for the recommendation of dialogClassName.

Re: sizing, I tweaked the styles for the Grid so it shouldn't extend past the modal window anymore. It should also be centered, but that seems to be true only for larger data sets (small data is still left-aligned with a bunch of white-space).