Support export/download of visualization as image about otelbin

[samueljrz]

By the way, great project, I saw it as a great tool for the Open Telemetry community. It's already helping me a lot and I think I have a lot of resources to have hahaha.

[samueljrz]

I would like to develop and contribute to this feature if possible. Can I assign it to me?

[samueljrz]

I thought to put it on the share section also would be a nice fit. So I did it both ways, so I could show it and get a second opinion. Just design part, tomorrow I'll write the logic part.

[samueljrz]

I managed to raise the PR, but I saw that there were some nuances to resolve. Tomorrow I will try to write some test, will be necessary to configure test to deal with components. Please feel free to comment there and improve.

[bripkens]

Nope, not a blocker @samueljrz 👍. Cool that you are contributing ❤️ !

[bripkens]

Fixed by @samueljrz!

[roshan-gh]

@samueljrz Great job. Thank you for your contribution ❤️

[bripkens]

Hey @samueljrz,

if you are interested in contributing this, feel free to give it a shot! I suppose a fitting location for the download button could be here:

You can find the buttons within this file:

otelbin/packages/otelbin/src/components/react-flow/ReactFlow.tsx

Lines 237 to 280 in 33c7e4b

	<Panel position="bottom-left" className="flex gap-x-3">
	<ButtonGroup size={"xs"}>
	<Tooltip>
	<TooltipTrigger asChild>
	<Button onClick={() => reactFlowInstance.zoomOut()} size="xs">
	<Minus />
	</Button>
	</TooltipTrigger>
	<TooltipContent>Zoom out</TooltipContent>
	</Tooltip>
	<Tooltip>
	<TooltipTrigger asChild>
	<Button onClick={() => reactFlowInstance.zoomIn()} size="xs">
	<Plus />
	</Button>
	</TooltipTrigger>
	<TooltipContent>Zoom in</TooltipContent>
	</Tooltip>
	</ButtonGroup>
	<Tooltip>
	<TooltipTrigger asChild>
	<Button onClick={() => reactFlowInstance.fitView()} size="xs">
	<Minimize2 />
	</Button>
	</TooltipTrigger>
	<TooltipContent>Fit view</TooltipContent>
	</Tooltip>
	<Tooltip>
	<TooltipTrigger asChild>
	<Button className={locked ? "bg-primary" : undefined} onClick={() => setLocked(!locked)} size="xs">
	<Lock className={locked ? "!text-button-icon-active" : ""} />
	</Button>
	</TooltipTrigger>
	<TooltipContent>Toggle editor/visualization synchronization on cursor change</TooltipContent>
	</Tooltip>
	<Tooltip>
	<TooltipTrigger asChild>
	<Button onClick={() => openDialog(true)} size="xs">
	<HelpCircle />
	</Button>
	</TooltipTrigger>
	<TooltipContent>Show welcome dialog</TooltipContent>
	</Tooltip>
	</Panel>

[bripkens]

@samueljrz: Good suggestion, let's put it under share as you proposed! 👍

[samueljrz]

I had some issues configuring the tests to understand ts and tsx, as the testEnvironment of one is ts-node and the other is jsdom to be able to render components under test. I'm looking for a way to solve it, is this a block?

All other nuances were solved.