Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Dev UI] Display info about background image of current question (#1222)
## Summary: With our migration to Mafs, we still need to draw any `interactive-graph` backgrounds. But, when we do, it can become difficult to determine which UI elements are coming from the background and which are drawn by Mafs. This PR introduces a little "status" icon that, when hovered, shows the background image, if there is one. If it is a Graphie, it provides a link to view/edit the Graphie in the graphie-to-png editor. <img width="562" alt="image" src="https://github.com/Khan/perseus/assets/77138/81d8b2ee-e2de-4012-88a3-cb3c85aaa685"> Issue: "none" ## Test plan: `yarn dev` Paste the following into the Flipbook: ```json {"content":"The graph of $y=h(x)$ is a line segment joining the points $(1,9)$ and $(3,2)$. \n\n**Drag the endpoints of the segment below to graph $y=h^{-1}(x)$.\n **\n\n[[☃ interactive-graph 1]]","images":{},"widgets":{"interactive-graph 1":{"alignment":"default","graded":true,"options":{"backgroundImage":{"bottom":0,"height":425,"left":0,"scale":1,"url":"web+graphie://ka-perseus-graphie.s3.amazonaws.com/a82b4098da55c75b68d2c1fd9f348923b8935ccb","width":425},"correct":{"coords":[[[9,1],[2,3]]],"type":"segment"},"graph":{"type":"segment"},"gridStep":[1,1],"labels":["x","y"],"markings":"none","range":[[-10,10],[-10,10]],"rulerLabel":"","rulerTicks":10,"showProtractor":false,"showRuler":false,"snapStep":[0.5,0.5],"step":[1,1]},"type":"interactive-graph","version":{"major":0,"minor":0}}}} ``` Hover over the little icon below the <textarea> on the right side. Paste the following into the Flipbook: ```json {"content":"$f$ is a finite function whose domain is the letters $a$ to $e$. The following table lists the output for each input in $f$'s domain.\n\n$x$|$a$|$b$|$c$|$d$|$e$\n:-|-:|-:|-:|-:\n$f(x)$|$1$|$2$|$2$|$3$|$4$\n\n**Build the mapping diagram of $f$ by dragging the endpoints of the segments in the graph below so that they pair each domain element with its correct range element. **\n\n**Then, determine if $f$ is invertible.**\n\n[[☃ interactive-graph 1]]\n\n\n\n[[☃ radio 2]]\n\n\n","images":{},"widgets":{"interactive-graph 1":{"type":"interactive-graph","alignment":"default","static":false,"graded":true,"options":{"step":[1,1],"backgroundImage":{"url":"https://ka-perseus-graphie.s3.amazonaws.com/a86c03713a29d33e2a5f8d2abfa578594dbba2e0.png","scale":1,"bottom":0,"left":0,"width":400,"height":400},"markings":"none","labels":["x","y"],"showProtractor":false,"showRuler":false,"rulerLabel":"","rulerTicks":10,"range":[[-10,10],[-10,10]],"gridStep":[1,1],"snapStep":[1,1],"graph":{"type":"segment","numSegments":5},"correct":{"type":"segment","numSegments":5,"coords":[[[-5,6],[5,4]],[[-5,3],[5,1]],[[-5,0],[5,1]],[[-5,-3],[5,-2]],[[-5,-6],[5,-5]]]}},"version":{"major":0,"minor":0}},"radio 2":{"type":"radio","alignment":"default","static":false,"graded":true,"options":{"choices":[{"correct":false,"content":"$f$ is invertible"},{"correct":true,"content":"$f$ is not invertible"}],"randomize":false,"multipleSelect":false,"displayCount":null,"hasNoneOfTheAbove":false,"onePerLine":true,"deselectEnabled":false},"version":{"major":1,"minor":0}}}} ``` Note that the icon changes and it says the image is a "regular image" background. Author: jeremywiebe Reviewers: benchristel, jeremywiebe, SonicScrewdriver, nishasy, mark-fitzgerald, handeyeco, Myranae Required Reviewers: Approved By: benchristel Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage, ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: #1222
![https://ka-perseus-graphie.s3.amazonaws.com/a86c03713a29d33e2a5f8d2abfa578594dbba2e0.png","scale":1,"bottom":0,"left":0,"width":400,"height":400},"markings":"none","labels":["x","y"],"showProtractor":false,"showRuler":false,"rulerLabel":"","rulerTicks":10,"range":[[-10,10],[-10,10]],"gridStep":[1,1],"snapStep":[1,1],"graph":{"type":"segment","numSegments":5},"correct":{"type":"segment","numSegments":5,"coords":[[[-5,6],[5,4]],[[-5,3],[5,1]],[[-5,0],[5,1]],[[-5,-3],[5,-2]],[[-5,-6],[5,-5]]]}},"version":{"major":0,"minor":0}},"radio](https://ka-perseus-graphie.s3.amazonaws.com/a86c03713a29d33e2a5f8d2abfa578594dbba2e0.png","scale":1,"bottom":0,"left":0,"width":400,"height":400},"markings":"none","labels":["x","y"],"showProtractor":false,"showRuler":false,"rulerLabel":"","rulerTicks":10,"range":[[-10,10],[-10,10]],"gridStep":[1,1],"snapStep":[1,1],"graph":{"type":"segment","numSegments":5},"correct":{"type":"segment","numSegments":5,"coords":[[[-5,6],[5,4]],[[-5,3],[5,1]],[[-5,0],[5,1]],[[-5,-3],[5,-2]],[[-5,-6],[5,-5]]]}},"version":{"major":0,"minor":0}},"radio){kind=link}
- Loading branch information
1 parent
bada382
commit 44cf734