updated layout

src/web/app.py

@@ -4,9 +4,6 @@ import dash_mantine_components as dmc
 
 from .header import generate_header
 from .body import generate_body
-from model_experiential import model_labels as experiential_labels
-from model_interpersonal import model_labels as interpersonal_labels
-from model_textual import model_labels as textual_labels
 
 
 app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
@@ -20,14 +17,12 @@ app.layout = dmc.MantineProvider(
             },
         },
     children=[
-        dmc.Container([
+        dmc.Container(
+            [
                 generate_header(),
-            generate_body(
-                experiential_labels,
-                interpersonal_labels,
-                textual_labels
+                generate_body(),
+            ], fluid=True
         ),
-        ]),
     ],
 )
         

src/web/body.py

@@ -1,71 +1,100 @@
 import dash_mantine_components as dmc
 from dash import dcc, html
+from typing import List
 
-def generate_body(
-    experiential_labels,
-    interpersonal_labels,
-    textual_labels
-):
+from src.model_experiential import ExperientialModelOutput
+from src.model_interpersonal import (
+    ContactModelOutput,
+    AngleModelOutput,
+    PointOfViewModelOutput,
+    DistanceModelOutput,
+    ModalityLightingModelOutput,
+    ModalityColorModelOutput,
+    ModalityDepthModelOutput
+)
+from src.model_textual import (
+    InformationValueModelOutput,
+    FramingModelOutput,
+    SalienceModelOutput
+)
+
+def generate_option_labels(model) -> List[str]:
+    """Generate presentable list of attributes from an OutputModel."""
+    labels = [
+        label.replace('_', ' ').title()
+        for label in model.list_fields()
+    ]
+    return labels
+
+def generate_options_map():
+    """Generate map of titles and options for labels container."""
+    options_map = {}
+    # add experiential labels
+    options_map["experiential".title()] = generate_option_labels(ExperientialModelOutput)
+    # add interpersonal labels
+    options_map["contact".title()] = generate_option_labels(ContactModelOutput)
+    options_map["angle".title()] = generate_option_labels(AngleModelOutput)
+    options_map["point of view".title()] = generate_option_labels(PointOfViewModelOutput)
+    options_map["distance".title()] = generate_option_labels(DistanceModelOutput)
+    options_map["modality lighting".title()] = generate_option_labels(ModalityLightingModelOutput)
+    options_map["modality color".title()] = generate_option_labels(ModalityColorModelOutput)
+    options_map["modality depth".title()] = generate_option_labels(ModalityDepthModelOutput)
+    # add textual labels
+    options_map["information value".title()] = generate_option_labels(InformationValueModelOutput)
+    options_map["framing".title()] = generate_option_labels(FramingModelOutput)
+    options_map["salience".title()] = generate_option_labels(SalienceModelOutput)
+    return options_map
+
+def generate_body():
     image_container = dmc.Image(
-        width=400,
-        height=400,
+        width=600,
+        height=600,
         withPlaceholder=True,
         placeholder=[dmc.Loader(color="gray", size="md")],
     )
 
-    experiential_labels_container = dmc.Container(
-        children=[
-            html.H4("experiential labels".title()),
-            dcc.RadioItems(options=list(experiential_labels)),
-        ]
-    )
-
-    interpersonal_labels_container = dmc.Container(
-        children=[]
-    )
-    for category, options in interpersonal_labels.items():
-        interpersonal_labels_container.children.append(html.H4(category.title()))
-        interpersonal_labels_container.children.append(dcc.RadioItems(options))
-
-    textual_labels_container = dmc.Container(
-        children=[]
-    )
-    for category, options in textual_labels.items():
-        textual_labels_container.children.append(html.H4(category.title()))
-        textual_labels_container.children.append(dcc.RadioItems(options))
-
-    label_container = dmc.Container(
-        children=[
-            experiential_labels_container,
-            dmc.Divider(),
-            interpersonal_labels_container,
-            dmc.Divider(),
-            textual_labels_container,
-            dmc.Divider(),
-            html.Button(
-                "confirm",
-                id="submit-button"
-            )
-        ]
+    # prepare labels container
+    label_container = dmc.Grid(
+        children=[],
+    )
+    # add fields to labels container
+    for title, options in generate_options_map().items():
+        label_container.children.append(
+            dmc.Col([
+                html.H4(title),
+                dcc.RadioItems(options=options),
+            ], span=3)
         )
 
+    # build the full body container
     body_container = dmc.Container(
         dmc.Grid(
             children=[
                 dmc.Col(
+                    dmc.Center(
                     image_container,
-                    span=5,
                     ),
-                dmc.Col(
-                    dmc.Divider(orientation="vertical"),
-                    span=1,
+                    span=4,
                 ),
                 dmc.Col(
                     # radio buttons part
+                    children = [
                         label_container,
-                    span=5,
+                        dmc.Button(
+                            "confirm",
+                            id="submit-button",
+                            fullWidth=True,
+                            color="lime",
+                            radius="sm",
+                            size="md",
+                            style={
+                                "height": "50px"
+                            }
                         ),
+                    ], span=8,
+                ),
+                # dmc.Col(span=1),
             ], grow=True
-        )
+        ), fluid=True
     )
     return body_container