feat(img): capture graph as a image for testing and user download #796
Conversation
There was a problem hiding this comment.
we no longer use jest nor its eslint plugin
| if (screenCap) { | ||
| needToRenderCanvas = true; | ||
| } |
There was a problem hiding this comment.
I believe it is safe to not check if screencap is differeing from the last call of updateReglAndRender, since this is just an on off state. I put a log in this function and played around and it affirmed.
| }); | ||
| this.setState({ testImageSrc: imageURI }); | ||
| try { | ||
| // TODO: DOWNLOAD IMAGE |
There was a problem hiding this comment.
This can be used to download the image in the future.
| @@ -930,6 +984,22 @@ class Graph extends React.Component<GraphProps, GraphState> { | |||
| onDoubleClick={this.handleCanvasEvent} | |||
| onWheel={this.handleCanvasEvent} | |||
| /> | |||
| {testImageSrc && ( | |||
There was a problem hiding this comment.
Checks if the imageSrc is not null and then populates an <img/> with the string
| {(asyncProps: GraphAsyncProps) => { | ||
| if ( | ||
| regl && | ||
| (!shallowEqual(asyncProps, this.cachedAsyncProps) || screenCap) |
There was a problem hiding this comment.
simple addition to always update regl if screenCap is true
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #796 +/- ##
=======================================
Coverage 77.74% 77.74%
=======================================
Files 88 88
Lines 6802 6802
=======================================
Hits 5288 5288
Misses 1514 1514
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
| {isTest && ( | ||
| <Tooltip | ||
| content="🌊" | ||
| position="bottom" | ||
| hoverOpenDelay={globals.tooltipHoverOpenDelay} | ||
| > | ||
| <AnchorButton | ||
| className={styles.menubarButton} | ||
| type="button" | ||
| icon={IconNames.TORCH} | ||
| style={{ | ||
| cursor: "pointer", | ||
| }} | ||
| loading={screenCap} | ||
| onClick={() => dispatch({ type: "graph: screencap start" })} | ||
| /> | ||
| </Tooltip> | ||
| )} |
There was a problem hiding this comment.
Feature flag enabled button that will be enabled via playwright or manual QA
There was a problem hiding this comment.
This is super cool! Thanks so much for adding this, @seve 🙏 👏 !
Please wait for @atarashansky 's review, since both of you know Explorer better than I do 😆
| @@ -98,7 +100,15 @@ type GraphState = { | |||
| }; | |||
| modelTF: ReadonlyMat3; | |||
| modelInvTF: ReadonlyMat3; | |||
| testImageSrc: string | null; | |||
There was a problem hiding this comment.
maybe worth adding a comment to explain the context on why we need this prop for future reference? Something along the line that "this is used for Chromatic visual test` or something better!
Adds functionality to enable capturing the webgl canvas as an image. This can now be used for testing as well as user download.
QA:
Enable via feature flag
?test=true, then click the 🔦 button on the menu bar. The webgl based canvas graph is now replaced with a static image. This can be confirmed by attempting to change the dot size or manipulating the camera.Example image: