fix: customize vegalite menu

[lyjeileen]

Change

• Use PopoverMenu component to create the action menu (Only supports download now)

Maybe we could consider reduce the min-width of the PopoverMenu component in a follow-up? It looks too wide for the options in Vega-Lite and I couldn't overwrite it because when it's being rendered, it doesn't have any parent container.

Screenshots

Before

After

Video

[Shiti]

Suggested change

	menuItems[index].downloadFileName = fileName
	menuItems[index].downloadFileName = `${fileName}.${ext}`

[lyjeileen]

I think this is not needed. Depending on the file type, .svg and .png will be added automatically.

[Shiti]

I think its better to mention the type. I see no harm in doing so

[Shiti]

@lyjeileen are you setting the width of the popover somewhere ? From your screenshots and video, it appears to be too wide, i.e., wider than the content.

[lyjeileen]

@lyjeileen are you setting the width of the popover somewhere ? From your screenshots and video, it appears to be too wide, i.e., wider than the content.

I mentioned this in my PR description. PopoverMenu set min-width: 240px for the menu. I can't overwrite it in the VegaLite component because when the menu is being rendered, it doesn't have VegaLite as its parent container. So I thought it would be better to reduce the min-width in the Popover Menu in a follow-up PR.