brian/visual_critical_discourse_analysis
1
0
Fork 0
Code Issues 11 Pull Requests Actions Projects 1 Releases Activity

added layout elements

Browse Source
This commit is contained in:
Brian Bjarke Jensen
2024-02-23 22:59:44 +01:00
parent 6c3e772517
commit e5344e6519
9 changed files with 229 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/layout/__init__.py
+1
View File
@@ -0,0 +1 @@
from .layout import app_layout
src/web/layout/alerts.py
+14
View File
@@ -0,0 +1,14 @@
from dash import html, dcc
import dash_bootstrap_components as dbc
alerts_element = html.Div([
dbc.Alert(
children="",
id="alert_element",
dismissable=True,
fade=False,
is_open=False,
),
dcc.Store(id="alert_message")
])
src/web/layout/body.py
+10 -133
View File
@@ -2,142 +2,19 @@ import dash_mantine_components as dmc
from dash import dcc, html
from typing import List
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
)
from .image import image_element
from .inputs import inputs_element
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_experiential_options_map():
"""Generate map of titles and options for experiential labels."""
options_map = {}
# add experiential labels
options_map["experiential".title()] = generate_option_labels(ExperientialModelOutput)
return options_map
def generate_interpersonal_options_map():
"""Generate map of titles and options for interpersonal labels."""
options_map = {}
# 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)
return options_map
def generate_textual_options_map():
"""Generate map of titles and options for textual labels."""
options_map = {}
# 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=600,
height=600,
withPlaceholder=True,
placeholder=[dmc.Loader(color="gray", size="md")],
)
# prepare experiential container
experiential_map = generate_experiential_options_map()
experiential_container = dmc.Col(
body_element = dmc.Container(
fluid=True,
children=[
dmc.Container([
html.H4(list(experiential_map.keys())[0]),
html.B("visual syntax".title()),
dcc.RadioItems(options=list(experiential_map.values())[0]),
])
], span=4
)
# prepare interpersonal container
interpersonal_map = generate_interpersonal_options_map()
interpersonal_container = dmc.Col(
dmc.Grid(
grow=True,
children=[
html.H4("interpersonal".title()),
], span=4
)
for title, options in interpersonal_map.items():
interpersonal_container.children.append(
dmc.Container([
html.B(title),
dcc.RadioItems(options)
])
)
# prepare textual container
textual_map = generate_textual_options_map()
textual_container = dmc.Col(
children=[
html.H4("textual".title()),
], span=4
)
for title, options in textual_map.items():
textual_container.children.append(
dmc.Container([
html.B(title),
dcc.RadioItems(options)
])
)
# prepare labels container
label_container = dmc.Grid(
children=[
experiential_container,
interpersonal_container,
textual_container,
dmc.Col([image_element], span=5),
dmc.Col([inputs_element], span=7)
],
)
# build the full body container
body_container = dmc.Container(
dmc.Grid(
children=[
dmc.Col(
dmc.Center(
image_container,
),
span=5,
),
dmc.Col(
# radio buttons part
children = [
label_container,
dmc.Button(
"confirm",
id="submit-button",
fullWidth=True,
color="lime",
radius="sm",
size="md",
style={
"height": "50px"
}
),
], span=7,
),
# dmc.Col(span=1),
], grow=True
), fluid=True
)
return body_container
],
)
src/web/layout/header.py
+12 -6
View File
@@ -1,15 +1,21 @@
import dash_mantine_components as dmc
from dash import html
def generate_header():
header = dmc.Header(
header_element = dmc.Header(
height=80,
children=[
dmc.Container(
children=[
html.H2(children="Visual Critical Discourse Analysis Tool", style={"margin-left": "20px", "padding-top": "-5px"}),
], size="xl", px="xl",
html.H2(
children="Visual Critical Discourse Analysis Tool",
style={
"margin-left": "20px",
"padding-top": "-5px"
},
),
],
size="xl", px="xl",
),
]
)
return header
)
src/web/layout/image.py
+17
View File
@@ -0,0 +1,17 @@
import dash_mantine_components as dmc
image_element = dmc.Center(
dmc.Image(
id="image_container",
width=600,
height=600,
withPlaceholder=True,
placeholder=[
dmc.Loader(
color="gray",
size="md"
)
]
)
)
src/web/layout/inputs.py
+22
View File
@@ -0,0 +1,22 @@
import dash_mantine_components as dmc
from .labels import labels_element
next_button = dmc.Button(
"next".title(),
id="next-button",
fullWidth=True,
color="lime",
radius="sm",
size="md",
style={
"height": "50px"
}
)
inputs_element = dmc.SimpleGrid(
children=[
labels_element,
next_button
]
)
src/web/layout/labels.py
+104
View File
@@ -0,0 +1,104 @@
from dash import html, dcc
import dash_mantine_components as dmc
from typing import List
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_experiential_options_map():
"""Generate map of titles and options for experiential labels."""
options_map = {}
# add experiential labels
options_map["experiential".title()] = generate_option_labels(ExperientialModelOutput)
return options_map
def generate_interpersonal_options_map():
"""Generate map of titles and options for interpersonal labels."""
options_map = {}
# 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)
return options_map
def generate_textual_options_map():
"""Generate map of titles and options for textual labels."""
options_map = {}
# 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
# prepare experiential container
experiential_map = generate_experiential_options_map()
experiential_container = dmc.Col(
children=[
dmc.Container([
html.H4(list(experiential_map.keys())[0]),
html.B("visual syntax".title()),
dcc.RadioItems(options=list(experiential_map.values())[0]),
])
], span=5
)
# prepare interpersonal container
interpersonal_map = generate_interpersonal_options_map()
interpersonal_container = dmc.Col(
children=[
html.H4("interpersonal".title()),
], span=3
)
for title, options in interpersonal_map.items():
interpersonal_container.children.append(
dmc.Container([
html.B(title),
dcc.RadioItems(options)
])
)
# prepare textual container
textual_map = generate_textual_options_map()
textual_container = dmc.Col(
children=[
html.H4("textual".title()),
], span=4
)
for title, options in textual_map.items():
textual_container.children.append(
dmc.Container([
html.B(title),
dcc.RadioItems(options)
])
)
labels_element = dmc.Grid(
children=[
experiential_container,
interpersonal_container,
textual_container,
]
)
src/web/layout/layout.py
+35
View File
@@ -0,0 +1,35 @@
from dash import dcc
import dash_mantine_components as dmc
from .stores import stores_element
from .alerts import alerts_element
from .header import header_element
from .body import body_element
app_layout = dmc.MantineProvider(
theme={
"fontFamily": '"Inter", sans-serif',
"components": {
"NavLink": {
"styles": {
"label": {
"color": "#c2c7d0"
}
}
}
},
},
children=[
stores_element,
alerts_element,
dmc.Container(
children=[
header_element,
body_element,
],
fluid=True
),
]
)
src/web/layout/stores.py
+6
View File
@@ -0,0 +1,6 @@
from dash import html, dcc
stores_element = html.Div([
dcc.Store(id='visual-communication-name', storage_type='session'),
])