Design manifest visualizer

[zanete]

Why: Sub of #951
What: Create a design of Manifest visualizer in Figma and share for feedback

Scope of work:

Sample data

• @jmcook1186 please provide a mini manifest for a single cell as per Asim's comment on the flyout
• @jmcook1186 please provide a mini manifest for a single row as per Asim's comment on the detail flyout

General

• Remove the top nav (to be the same as the IF docs site)
• Replace file upload with a URL field

Summary

• Display all aggregated metrics
• More info bubbles on hover
• Time (when manifest was created)
• Manifest meta data
• Ability to select one of the aggregated metrics
• Surface the following descriptive fields in summary: [Title, Description, Tags, Link, Date Time, Time Period]

Charts

• Timeseries chart
• Rename “Information Graph” to “Totals over time”
• Clear title and Highlight which aggregated value is visualised in the chart and reflected in the data table
• highlighted spot on the chart for selected cell

Data table

• SPIKE: Research 3rd party libraries for data-table component
• Clickable cells that toggle cell detail
• Rename “Data Table” to “Component breakdown”
• Update table heading row to be date times

Cell detail

• Cell inputs and outputs
• TBC comment in figma - Update cell detail fly-out title with datetime and the aggregated value that was selected
• BLOCKED - Update the cell detail fly-out with a mini-manidest all about that cell (blocked until we have a concrete manifest)

Row detail

• Design a row detail fly-out with a mini-manifest for the whole row (as per cell details)

Node Finder

• tbc

Export

• Button to export (functionality tbc)

[osamajandali]

Here is first draft prototype for the visualizer
https://www.figma.com/design/QYjTvF4n791x88BMEb6DUs/Green-Software-Contributors-Website?node-id=202-1298&t=6iaQro1ubboIXq92-1
Navebar and footer are dummy for now and the visuals will be enhanced more
let me know what do you think
cc: @zanete @jmcook1186 @jawache

[osamajandali]

Here is a revamped version with a better structure
Figma
I suggest not spending more time on the design as this kind of design elements take so much time to be visualized and let's jump onto development and refine a long the way