[DES] Right side Data Viz Menu

ehynd commented 2 weeks ago

Problem (Why)

Create an updated right side panel that will take the place of the present JSON panel.

Impact (Who)

Users of application creating charts and data visuals

Existing

Figma here: https://www.figma.com/design/Qj4tWPsniFOJ6qSLfxOaBT/UI-Builder---Design?node-id=6784-90304&node-type=canvas&t=UrREUBYGlBMnmU6N-0

Reference

Task Suggestions (What)

What are more specific tasks that a designer needs to take to consider this issue resolved

[ ] Two tabs should be implemented: Data and Tools
[ ] Sort tools based on Vega categories (Scales, Axes, Signals etc)
[ ] Elements within the categories should be collapsible / accordions. When you select an item, the information appears right below and can be collapsed or left open

sayalibhagat-Kanini commented 4 days ago

Converting the visualization right panel designs to align with the left menu designs used in other blocks, ensuring consistency.

sayalibhagat-Kanini commented 3 days ago

Based on Natalie's feedback, I have updated the visualization panel to match the left menu style for the other blocks. I have added three categories, so when a user clicks on a category a list of tools appears, displaying the tools name, icon and tooltip. When user hovers over a tooltip a brief description will be shown. When user selects a tool, edit options are displayed and after applying changes, the tool is marked as applied. If user want to select another tool, the same process will follow.

Here is the updated Figma link - https://www.figma.com/proto/Qj4tWPsniFOJ6qSLfxOaBT/UI-Builder---Design?node-id=8656-31609&node-type=frame&t=MRUqvEbtcSmYh3GK-1&scaling=scale-down-width&content-scaling=fixed&page-id=6784%3A90304&starting-point-node-id=8656%3A31609

SEMOSS / semoss-ui