Feat: Adjust Sidebar controls

[RobertGemmaJr]

• Remove volumeData from redux (now in VolumeContext
• Remove Sidebar inline style
• Use react-bootstrap buttons (was html)
• Color map selection is done through a dropdown (was a Modal)
• Saline and Halide color maps added

Sidebar now takes full with of the screen. Still sits on the left side, should we move to the bottom? I don't think that would look as natural but would get it out of the way of the header.

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit effa559):

https://riddc-volume-viewer--pr35-sidebar-controls-cto7r5b8.web.app

_{(expires Tue, 05 Oct 2021 14:03:57 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[RobertGemmaJr]

There is a small bug with the widths of the color map images in the dropdown button. I imagine it has something to do with the flexbox stuff? Would appreciate an extra set of hands

[mcmcgrath13]

Would it be possible to make the color map drop down show the current value instead of being a button?

[mcmcgrath13]

I think it's fine the sidebar is in the way of the header for the moment. The behavior is predictable, if not ideal.

[mcmcgrath13]

I would have the dropdown show the values (if possible), then add the selected one tightly below or above the transfer function at the same width as the canvas there.

[mcmcgrath13]

[RobertGemmaJr]

Right now the canvas is building its own custom size. I'm not really sure how we'd get it to size to the width of the of the canvas.

I can try to figure out the redux to get the current color map and display it in the OpacityControl.js component though. Working on the new dropdown button now

[mcmcgrath13]

Right now the canvas is building its own custom size. I'm not really sure how we'd get it to size to the width of the of the canvas.

It looks like the width of the canvas is set via prop, so can just match that hardcoded for the moment?

[RobertGemmaJr]

It looks like the width of the canvas is set via prop, so can just match that hardcoded for the moment?

From what I can tell, in OpacityControl.js

      var controlsContainer = document.getElementById("controls");

      this.opCanvas.width =
        controlsContainer.clientWidth - 2 * this.padding - 2;

controlsContainer is null when I try that in ColorMappingController.js

[RobertGemmaJr]

The dropdown now always takes up 100% of it's container. I had to do style={{width: "100%"}} in two places.

There has to be a better way to do it but I can't figure it out