Adding React Mosaic

[dvzacharycutler]

Closes https://github.com/datavisyn/reprovisyn/issues/328

Developer Checklist (Definition of Done)

• Descriptive title for this pull request provided (will be used for release notes later)
• All acceptance criteria from the issue are met
• Branch is up-to-date with the branch to be merged with, i.e., develop
• Code is cleaned up and formatted
• Code documentation written
• Unit tests written
• Tested in Chrome
• Tested in Firefox
• Build is successful
• Summary of changes written
• Wiki documentation written
• Assign at least one reviewer
• Assign at least one assignee
• Add type label (e.g., bug, enhancement) to this pull request
• Add next version label (e.g., next-version: minor) to this PR following semver

Summary of changes

• Removing splitpane from Workbenches and adding react-mosaic. Made some style changes to account for this. Changed the rendering logic a bit in workbenches to account for rendering the MosaicWindow component.

Screenshots

react-mosaic.mp4

[thinkh]

Thanks for the refactoring/feature. The windowing works now much smoother and also looks cleaner from the code.

Please see my comments and improvements below.

Additionally, I noticed that the dragging of the COSMIC view is not fixed using the pointer-events: none. Could you please have a look into this again?

P.S. Ignore the empty ranking which is caused by the lineupengine release v2.4.1.

[thinkh]

Suggested change

	const direction: MosaicDirection = parent ? getOtherDirection(parent.direction) : 'row';
	const direction: MosaicDirection = parent ? getOtherDirection(parent.direction) : 'row';
	const newViewId: string = views[views.length - 1].uniqueId; // assumes that the new view is appended to the array

Maybe extract to a variable and add a comment that new views are appended.

[dvzacharycutler]

Agreed, done. Should also mention here the way this works will probably not quite hold when we get provenance in, since it relies on views being added one at a time and in order. But can address that when the need arises?

[thinkh]

Good question! I think, we don't need a todo here, as we need to test everything again once the provenance is in place. Maybe you give @kirangadhave a heads up.

[dvzacharycutler]

Also made a new ticket for improving the performance of the resizing with vis https://github.com/datavisyn/reprovisyn/issues/373. Currently it is quite slow, and if the dataset is large its a large hindrance

[thinkh]

@dvzacharycutler Thanks for your changes and for creating the follow-up issue. There are two open points before we are ready to merge this PR.

Refactor CSS imports

Please refactor the CSS imports as mentioned above.

Add pointer-events: none

Additionally, I noticed that the dragging of the COSMIC view is not fixed using the pointer-events: none. Could you please have a look into this again?

Did you address this already? I couldn't find any SCSS-related changes.

[dvzacharycutler]

Yes, I addressed the pointer events issue, the problem wasnt scss but me not realizing what the onDragEnd does. Instead set the flag for dragging in the MosaicWindow onChange, and turned it off in onRelease. Will fix the imports now

[thinkh]

Yes, I addressed the pointer events issue, the problem wasnt scss but me not realizing what the onDragEnd does. Instead set the flag for dragging in the MosaicWindow onChange, and turned it off in onRelease.

Ok, thanks for the explanation.

[thinkh]

I've tested the PR again and it works well. Dragging is working fluently and without problems.

I could reproduce a bug with LineUp when a second view is dragged to the left. I documented the bug in the follow-up issue https://github.com/datavisyn/reprovisyn/issues/375.

Beside this everything else looks good and is ready to be merged. Thanks for your implementation, @dvzacharycutler!