[FEAT]: UX: Models Design Guidelines (update and align)

[ngraham76]

The purpose of this style guide is to provide guidance and consistency when updating and aligning the design of models in Terarium. The guide covers petri net models and model templates (used in the editing and coupling models operators). Please let me know if you have any questions, if you feel the guidelines are missing any important specification details or have any other feedback. Thanks!

Link to the Figma file: https://www.figma.com/file/yCstHNeLLPx0TzZC9uWXbl/Terarium---November-2023?type=design&node-id=2%3A99669&mode=design&t=K96TnWzzS6c2hHz1-1

Model sizes are relative to how and where they are displayed in the application (ie: operator previews, component cards, etc). The purpose of these dimensions is to provide a base set of specs to ensure size and scale consistency. Note: the font used to display variable node and connection labels has been changed, it is now "Latin Modern Math".

Basic Model Diagrams

Align Model Specs are the same as the basic model, with some exceptions as noted in the diagram below:

Stratified Model Diagrams

Model Templates (used in the Edit Model and Couple Models operators)

[Tom-Szendrey]

Under Basic Model Diagram This is giving us the ratio between a node and transition lines correct? Currently this size itself will vary a lot due to our ability to zoom in and out is this meant for default

What happens if the model is very complex? Do we start by default with a zoomed out picture to show the structure of the model or do we keep this size of the node and cut off whatever cannot fit

[Tom-Szendrey]

Does the colour pallet loop?

[Tom-Szendrey]

Is this legend here within the model diagram itself? Will this be static (as in how does this legend respond to moving and zooming?)

[ngraham76]

Does the colour pallet loop?

Yup, I should have mentioned that the palette reverses once we hit the darkest colour in the VIRDIS range:

[ngraham76]

Is this legend here within the model diagram itself? Will this be static (as in how does this legend respond to moving and zooming?)

I imagine that the legend would be static on a canvas where the model diagram is able to be magnified and panned, something like this:

[ngraham76]

Under Basic Model Diagram This is giving us the ratio between a node and transition lines correct? Currently this size itself will vary a lot due to our ability to zoom in and out is this meant for default

What happens if the model is very complex? Do we start by default with a zoomed out picture to show the structure of the model or do we keep this size of the node and cut off whatever cannot fit

Yup, this was just a starting point to set up our sizes and scaling... but since it's re-sizable and relative to where it is displayed, this goes out the window. I'll need to re-do this with "rem". And yes, if a model is larger and more complex we scale it down in size and fit into the preview or model operator card pane.

1 rem is equal to 16 pixels.

[liunelson]

@ngraham76 Thanks for the changes that you suggested!