[Dev UI] Display info about background image of current question

[jeremywiebe]

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.

Issue: "none"

Test plan:

yarn dev

Paste the following into the Flipbook:

{"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:

{"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.

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/eighty-items-repeat.md, .changeset/six-melons-knock.md, dev/flipbook.tsx, dev/package.json, config/test/test.config.js, packages/perseus/src/widgets/explanation.tsx

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[github-actions]

Size Change: -7 B (0%)

Total Size: 833 kB

Filename	Size	Change
packages/perseus/dist/es/index.js	398 kB	-7 B (0%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.1 kB
packages/kmath/dist/es/index.js	4.27 kB
packages/math-input/dist/es/index.js	80.5 kB
packages/math-input/dist/es/strings.js	1.73 kB
packages/perseus-core/dist/es/index.js	908 B
packages/perseus-editor/dist/es/index.js	267 kB
packages/perseus-error/dist/es/index.js	878 B
packages/perseus-linter/dist/es/index.js	21.8 kB
packages/perseus/dist/es/strings.js	3.22 kB
packages/pure-markdown/dist/es/index.js	3.68 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[benchristel]

This is so good! Love the UI polish 😀

[benchristel]

Empty string, null, and undefined are all falsey, so this could be simplified to

Suggested change

	.map((w) => w.options.backgroundImage?.url ?? "")
	.filter((url) => url.length > 0),
	.map((w) => w.options.backgroundImage?.url)
	.filter(Boolean),

That might be too much magic, though?

[jeremywiebe]

It'd love to do that, but Typescript doesn't seem to understand the narrowing that occurs in .filter(Boolean).

https://www.typescriptlang.org/play/?#code/C4TwDgpgBA8mwEsD2A7AzlAvFA3gKCigCMBDAYwGsBzAJyQFcUATASQFsSqIB+ALigBC5anUasOXANx4AvnjyhIg4bQbN2naNnyF6NADb80wGghRUoAHygp6+-VahiIAMzMQms+YugtgENixcAigkeGR0fjhEVDQvPDJY4CgEfzY0fgAlCBImVH0QAEEaGhIQAB4-AIA+IIBtAF15PFSAtAA6DjAACgQsWoR2sJj0dtJKVTENLm52vX0ASna3fX8aboEkJH0clAWoNBJENDcIDGzc-KKSsvLjU3Nq6SA

[github-actions]

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (631270b) and published it to npm. You
can install it using the tag PR1222.

Example:

yarn add @khanacademy/perseus@PR1222

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR1222

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 69.87%. Comparing base (cf1dc61) to head (631270b).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1222      +/-   ##
==========================================
+ Coverage   68.64%   69.87%   +1.23%     
==========================================
  Files         470      474       +4     
  Lines      100733   100798      +65     
  Branches     7146    10774    +3628     
==========================================
+ Hits        69148    70436    +1288     
+ Misses      31406    30362    -1044     
+ Partials      179        0     -179     

Files	Coverage Δ
packages/perseus/src/widgets/explanation.tsx	92.43% <100.00%> (+0.42%)	⬆️

... and 131 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update cf1dc61...631270b. Read the comment docs.