Adding hexbin to vis

[dvzacharycutler]

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

Developer Checklist (Definition of Done)

Issue

• All acceptance criteria from the issue are met
• Tested in latest Chrome/Firefox

UI/UX/Vis

• Requires UI/UX/Vis review
  • Reviewer(s) are notified (tag assignees)
  • Review has occurred (link to notes)
  • Feedback is included in this PR
  • Reviewer(s) approve of concept and design

Code

• Branch is up-to-date with the branch to be merged with, i.e., develop
• Code is cleaned up and formatted
• Unit tests are written (frontend/backend if applicable)
• Integration tests are written (if applicable)

PR

• Descriptive title for this pull request is provided (will be used for release notes later)
• Reviewer and assignees are defined
• Add type label (e.g., bug, feature) to this pull request
• Add release label (e.g., release: minor) to this PR following semver
• The PR is connected to the corresponding issue (via Closes #...)
• Summary of changes is written

Summary of changes

• Adding back the hexbin plot now that d3 is compatible. Also includes small changes to the selection logic which drastically improves speed for large selections. Also made the vis component import dynamically in the ARankingView, so as not to always import mantine in tdp_core, but importantly i HAVE NOT tested this yet, as reprovisyn doesn't actually use the component. Needs to be tested in an application that uses the Vis component via the ARankingView.

Screenshots

newHexin.webm

Additional notes for the reviewer(s)

• TODO:: Test the Vis component via ARankingView, as mentioned in summary of changes
  Thanks for creating this pull request 🤗

[thinkh]

Awesome new visualization. It looks already very good. Please see my comments below.

• The mouse while should work in

If no numerical columns are selected the message currently takes the full height of the vies view (should be only the height of the text).

• Hexbin plot (sentence case)
• Invalid settings (sentence case)
• Convert invalid settings card to Mantine info alert (currently bootstrap)
  • Also for all other cards and visualizations
• Horizontally center the info alert
• Hexbin options (sentence case)
  
• Add tooltips to brush option buttons
  
• Enable zoom with mouse wheel in brush mode (currently, it only works in pan mode)
• Make list of categories in legend scrollable
  

[thinkh]

@dvzacharycutler Thanks for your bug fixes. It works now much better. I still found a few inconsistencies that should be removed before merging this PR.

Steps to reproduce

1. Select hexbin plot
2. Remove all columns

Observed behavior

The message shows Scatterplot.

Expected behavior

1. The message should mention the Hexbin plot when this plot is selected
2. Consistent spelling: Scatter plot vs. Scatterplot

[thinkh]

@dvzacharycutler I tested this branch with Ordino public in a local workspace and found a couple of problems. The problems might be related to #786 and not specifically to this PR. You can decide where to fix it.

Here an overview of the interaction with the general visualization of this branch:

ordino-hexbin.webm

Scatter plot: Opacity does not have an effect

Sometimes the opacity slider does not have any effect.

As you can see in the video above, it worked somehow after playing around and switching visualization. But it does not work when I opened it the first time (see screenshots).

Scatter plot: Legend overlaying visualization

The legend is overlaying the visualization and makes it impossible to use. Could be a flex problem in Ordino?

Hexbin plot: Wrong options panel position

When switching to hexbin plot the options panel is positioned absolute to the window and not the visualization container. (This does not happen for the other visualizations.) After closing and opening the panel again it is positioned correctly.

Furthermore the hexbin plot is empty which should be the case because the scatter plot shows data.

Various plots: scroll position and options panel

For all plot types the visualization is positioned far to the right which requires to scroll to the right. Then the options panel is positioned somewhere in the center.

[thinkh]

In addition, I saw now that the options panel is also overlaying the Ordino start menu. The options panel should be ordered behind the start menu.

[thinkh]

Thanks for the last fixes. Looks good to me.