[Notebook Snapshots] Snapshots of Imagery views have a number of issues

[charlesh88]

Snapshotting this Imagery telemetry:

Yields this result, which has a number of problems:

• Orange arrows: image is distorted, but should retain original aspect ratio.
• Blue arrow: brightness/contrast controls sort of visible, but should be completely hidden.
• Red arrow: compass rose camera FOV elements (SVG's?) need to be handled so they don't get opaque fills.
• Green arrow: pause/play button is visible, without icon, but should be hidden.

[charlesh88]

@nikhilmandlik @akhenry Our package.json and 3rd party licenses info say we're using html2canvas 1.0.0-alpha.12, which dates from 2018. If this is the case, can we try updating to the current version, which is 1.0.0-rc.7 from late 2020?

[akhenry]

@charlesh88 Sure. Do it.

[charlesh88]

Testing Notes

1. Go to an Example Imagery view. Size the browser and view such that the image itself is at least 500px across.
2. Verify that the compass rose is visible and looks like the image below.
   
3. Click the compass rose and verify that it rotates such that north is pointing straight up. Click it again and verify that it returns to the camera view (grayish pie wedge) oriented upwards as originally.
4. Take a Snapshot of the view. Click the Snapshot thumbnail to view the Snapshot. Verify that the compass rose and HUD element (green arrow) appear the same as they did in the browser view. Note that the Example Imagery picture is not captured (due to cross-domain issues) in the Snapshot - this is expected.
   
5. Verify that the brightness/contrast controls, Pause button (red arrow) and previous/next arrow buttons are all not appearing in the Snapshot.
6. Close the Snapshot overlay.
7. Size the browser such that the image is less than 500px wide. Verify that the compass rose now hides its minor ticks and E,S and W cardinal labels:
   
8. Size the browser such that the image is less than 300px wide. Verify that the compass rose now only displays the camera angle, rover body angle and N cardinal label and arrow:
   
9. Repeat steps 1 - 6 with an actual imagery object on a deployment with that available. Note that the rover body and sun angle may not be visible in the compass rose if that data is not available.

[jvigliotta]

Verified - Testathon 7/13/2021

[kobe1104]

For step 4, the notebook snapshot image on 'Preview' looks different than the browser. The whole image including compass rose and HUD element is different. However it's correct if I click and open the snapshot.
Testathon 7/13/2021

[unlikelyzero]

Will leave as unverified and @kobe1104 and @charlesh88 to meet before July 16

[kobe1104]

After discussion with @charlesh88 and @nikhilmandlik the functionality of the 'Preview' button is by design.