Fig. 13

A simplified illustration of the high-level components in the GenUI React API for rendering model cards. The main ModelsPage component has two kinds of attributes (called “properties” in React): (a) data properties and (b) component properties. The values of data properties are used to display model data while the values of component properties are used as child components and injected into the GUI at appropriate places. If no component property is specified, default components are used as children instead (i.e. ModelCard and NewModelCard). The child components can accept data and component properties as well from their parent (i.e. ModelsPage). This creates a hierarchy of reusable components that can be easily assembled and configured to accommodate the different needs of each model view in a standardized and consistent manner