Philipp/aki_prj23_transparenzregister
Philipp/aki_prj23_transparenzregister
1
0
Fork 0
mirror of https://github.com/fhswf/aki_prj23_transparenzregister.git synced 2025-05-16 01:08:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update styling and language of home page (#484)

Browse Source
This commit is contained in:
KM-R 2023-12-28 17:15:10 +01:00 committed by GitHub
parent b7cdfa6fa3
commit 693532086d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 73 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/aki_prj23_transparenzregister/ui/assets/networkx_style.css
View File

@ -1,7 +1,7 @@
.home { .home {
float: left; float: left;
width: 100%; width: 100vw;
min-height: 100vh; height: 100vh;
background-color: var(--ash-gray); background-color: var(--ash-gray);
} }
@ -56,9 +56,9 @@
border-color: var(--raisin-black); border-color: var(--raisin-black);
border-radius: 20px; border-radius: 20px;
vertical-align: top; vertical-align: top;
width: 62%; width: 64%;
min-width: 600px; min-width: 600px;
max-width: 1500px; height: 100%;
} }
.home .networkx_style .filter-wrapper { .home .networkx_style .filter-wrapper {
@ -80,10 +80,36 @@
padding-left: 10px; padding-left: 10px;
width: 100%; width: 100%;
font-size: '30%' font-size: '30%'
/* background-color: var(--raisin-black); */
} }
.home .networkx_style .filter-wrapper .filter-wrapper-item .dropdown_style_multi {
padding-bottom: 10px;
margin-top: 1px;
padding-left: 10px;
width: 100%;
font-size: '30%'
}
.home .networkx_style .filter-wrapper .filter-wrapper-item .dropdown_style_multi .Select-control .Select-value {
background-color:var(--light);
border-color:var(--light);
color: var(--raisin-black);
}
.home .networkx_style .filter-wrapper .filter-wrapper-item .rc-slider .rc-slider-track{
background-color: var(--raisin-black);
}
.home .networkx_style .filter-wrapper .filter-wrapper-item .rc-slider .rc-slider-handle{
border: solid 2px var(--raisin-black);
}
.home .networkx_style .filter-wrapper .filter-wrapper-item .rc-slider .rc-slider-dot-active{
border-color: var(--raisin-black);
}
.networkx_style .header { .networkx_style .header {
text-align: center; text-align: center;
align-items: center; align-items: center;
@ -132,10 +158,8 @@
.home .networkx_style .graph-style { .home .networkx_style .graph-style {
margin-top: 10px; padding-top: 10px;
padding-bottom: 0px;
display: inline-block; display: inline-block;
margin: 0px;
width: 100%; width: 100%;
margin-bottom: 15px; margin-bottom: 15px;
/* float: inline-end, */ /* float: inline-end, */

8
src/aki_prj23_transparenzregister/ui/assets/typography.css
View File

@ -1,9 +1,7 @@
html, body { html, body {
border: 0; min-height:100vh;
min-height: 100vh; height:auto !important;
margin: 0; margin:0;
padding: 0;
width: 100%;
} }
.about-content { .about-content {

31
src/aki_prj23_transparenzregister/ui/pages/home.py
View File

@ -156,7 +156,7 @@ def layout() -> html:
{} {}
) # frozenset({person_relation_types[1]}) ) # frozenset({person_relation_types[1]})
top_companies_dict, top_companies_columns, figure = _update_figure( top_companies_dict, top_companies_columns, figure = _update_figure(
"None", "Ohne",
False, False,
selected_company_relation_types, selected_company_relation_types,
selected_person_relation_types, selected_person_relation_types,
@ -249,7 +249,7 @@ def layout() -> html:
html.Div( html.Div(
className="networkx_style", className="networkx_style",
children=[ children=[
html.H2(className="header", children=["Social Graph"]), html.H2(className="header", children=["Soziales Netzwerk"]),
html.Div( html.Div(
className="filter-wrapper", className="filter-wrapper",
id="company_dropdown", id="company_dropdown",
@ -260,16 +260,17 @@ def layout() -> html:
html.H5( html.H5(
className="filter-description", className="filter-description",
children=[ children=[
"Show selected relations Company to Company:" "Beziehungen zwischen zwei Unternehmen:"
], ],
), ),
dcc.Dropdown( dcc.Dropdown(
company_relation_types, company_relation_types,
list(selected_company_relation_types), list(selected_company_relation_types),
id="dropdown_company_relation_filter", id="dropdown_company_relation_filter",
className="dropdown_style", className="dropdown_style_multi",
multi=True, multi=True,
persistence=True, persistence=True,
placeholder="Wählen Sie eine Beziehung",
), ),
], ],
), ),
@ -279,16 +280,17 @@ def layout() -> html:
html.H5( html.H5(
className="filter-description", className="filter-description",
children=[ children=[
"Show selected relations Company to Person:" "Beziehungen zwischen Unternehmen und Personen:",
], ],
), ),
dcc.Dropdown( dcc.Dropdown(
person_relation_types, person_relation_types,
list(selected_person_relation_types), list(selected_person_relation_types),
id="dropdown_person_relation_filter", id="dropdown_person_relation_filter",
className="dropdown_style", className="dropdown_style_multi",
multi=True, multi=True,
persistence=True, persistence=True,
placeholder="Wählen Sie eine Beziehung",
), ),
], ],
), ),
@ -297,20 +299,22 @@ def layout() -> html:
children=[ children=[
html.H5( html.H5(
className="filter-description", className="filter-description",
children=["Choose Graph Metric:"], children=["Zentralitätsmaß:"],
), ),
dcc.Dropdown( dcc.Dropdown(
[ [
"None", "Ohne",
"eigenvector", "eigenvector",
"degree", "degree",
"betweenness", "betweenness",
"closeness", "closeness",
], ],
"None", "Ohne",
id="dropdown", id="dropdown",
className="dropdown_style", className="dropdown_style",
persistence=True, persistence=True,
clearable=False,
placeholder="Wählen Sie ein Zentralitätsmaß",
), ),
], ],
), ),
@ -319,7 +323,7 @@ def layout() -> html:
children=[ children=[
html.H5( html.H5(
className="filter-description", className="filter-description",
children=["Choose Layout:"], children=["Layout:"],
), ),
dcc.Dropdown( dcc.Dropdown(
[ [
@ -342,7 +346,8 @@ def layout() -> html:
id="dropdown_layout", id="dropdown_layout",
className="dropdown_style", className="dropdown_style",
persistence=True, persistence=True,
placeholder="Select a graph layout", clearable=False,
placeholder="Wählen Sie ein Layout",
), ),
], ],
), ),
@ -351,7 +356,7 @@ def layout() -> html:
children=[ children=[
html.H5( html.H5(
className="filter-description", className="filter-description",
children=["Adjust Edge Thickness"], children=["Kantenstärke:"],
), ),
dcc.Slider( dcc.Slider(
1, 1,
@ -368,7 +373,7 @@ def layout() -> html:
children=[ children=[
html.H5( html.H5(
className="filter-description", className="filter-description",
children=["Enable Edge Annotation"], children=["Kantenbezeichnungen:"],
), ),
html.Div( html.Div(
className="switch-style", className="switch-style",

16
src/aki_prj23_transparenzregister/utils/networkx/network_2d.py
View File

@ -119,10 +119,11 @@ def create_2d_graph( # noqa PLR0913
# print(colors) # print(colors)
# print(node_names) # print(node_names)
node_trace.marker.color = colors node_trace.marker.color = colors
node_trace.marker.line = {"color": "#2e2c2f", "width": 0.5}
node_trace.text = node_names node_trace.text = node_names
# Highlight the Node Size with regard to the selected Metric. # Highlight the Node Size with regard to the selected Metric.
if metric != "None": if metric not in ("None", "Ohne"):
node_trace.marker.size = list(np.sqrt(metrics[metric]) * 200) node_trace.marker.size = list(np.sqrt(metrics[metric]) * 200)
# Add Relation_Type as a Description for the edges. # Add Relation_Type as a Description for the edges.
@ -136,21 +137,22 @@ def create_2d_graph( # noqa PLR0913
return go.Figure( return go.Figure(
data=[edge_trace, edge_weights_trace, node_trace], data=[edge_trace, edge_weights_trace, node_trace],
layout=go.Layout( layout=go.Layout(
title="Network graph", # title="Network graph",
showlegend=False, showlegend=False,
autosize=True,
hovermode="closest", hovermode="closest",
margin={"b": 20, "l": 5, "r": 5, "t": 20}, margin={"b": 100, "l": 5, "r": 5, "t": 20},
annotations=[ annotations=[
{ {
"showarrow": False, "showarrow": False,
"text": f"Companies (Red) & Person (Blue) Relation \n node_count: {len(nodes)}, edge_count: {len(edges)}", "text": f"Unternehmen (Dunkelgrün) & Personen (Orange) <br> Anzahl Knoten: {len(nodes)}, Anzahl Kanten: {len(edges)}",
"xref": "paper", "xref": "paper",
"yref": "paper", "yref": "paper",
"x": 0, "y": -0.2,
"y": 0.1, "xanchor": "center",
"xanchor": "left",
"yanchor": "bottom", "yanchor": "bottom",
"font": {"size": 14}, "font": {"size": 14},
"align": "center",
} }
], ],
xaxis={"showgrid": False, "zeroline": False, "showticklabels": False}, xaxis={"showgrid": False, "zeroline": False, "showticklabels": False},

13
src/aki_prj23_transparenzregister/utils/networkx/network_3d.py
View File

@ -133,7 +133,7 @@ def create_3d_graph( # noqa : PLR0913
} }
layout = go.Layout( layout = go.Layout(
title="Social Graph", # title="Social Graph",
showlegend=False, showlegend=False,
scene={ scene={
"xaxis": dict(axis), "xaxis": dict(axis),
@ -145,14 +145,14 @@ def create_3d_graph( # noqa : PLR0913
annotations=[ annotations=[
{ {
"showarrow": False, "showarrow": False,
"text": f"Companies (Red) & Person (Blue) Relation \n node_count: {len(nodes)}, edge_count: {len(edges)}", "text": f"Unternehmen (Dunkelgrün) & Personen (Orange) <br> Anzahl Knoten: {len(nodes)}, Anzahl Kanten: {len(edges)}",
"xref": "paper", "xref": "paper",
"yref": "paper", "yref": "paper",
"x": 0, "y": -0.2,
"y": 0.1, "xanchor": "center",
"xanchor": "left",
"yanchor": "bottom", "yanchor": "bottom",
"font": {"size": 14}, "font": {"size": 14},
"align": "center",
} }
], ],
) )
@ -169,10 +169,11 @@ def create_3d_graph( # noqa : PLR0913
# Add Color and Names to the Scatter Plot. # Add Color and Names to the Scatter Plot.
# Add Color and Names to the Scatter Plot. # Add Color and Names to the Scatter Plot.
node_trace.marker.color = colors node_trace.marker.color = colors
node_trace.marker.line = {"color": "#2e2c2f", "width": 0.5}
node_trace.text = node_names node_trace.text = node_names
# Highlight the Node Size with regard to the selected Metric. # Highlight the Node Size with regard to the selected Metric.
if metric != "None": if metric not in ("None", "Ohne"):
node_trace.marker.size = list(np.cbrt(metrics[metric]) * 200) node_trace.marker.size = list(np.cbrt(metrics[metric]) * 200)
# Set the Color and width of Edges for better highlighting. # Set the Color and width of Edges for better highlighting.

4
src/aki_prj23_transparenzregister/utils/networkx/networkx_data.py
View File

@ -20,8 +20,8 @@ to_company = aliased(entities.Company, name="to_company")
# Alias for Company table for the head company # Alias for Company table for the head company
from_company = aliased(entities.Company, name="from_company") from_company = aliased(entities.Company, name="from_company")
COLOR_COMPANY = "blue" COLOR_COMPANY = "#006250"
COLOR_PERSON = "red" COLOR_PERSON = "#ff5200"
def find_all_company_relations() -> pd.DataFrame: def find_all_company_relations() -> pd.DataFrame:

2
tests/utils/networkx/network_2d_test.py
View File

@ -31,7 +31,7 @@ def _set_session(full_db: Session) -> Generator[None, None, None]:
("Kamada Kawai", "None", True, 1), ("Kamada Kawai", "None", True, 1),
("Random", "degree", False, 2), ("Random", "degree", False, 2),
("Shell", "degree", True, 3), ("Shell", "degree", True, 3),
("Spiral", "None", False, 4), ("Spiral", "Ohne", False, 4),
("Circular", "None", True, 1), ("Circular", "None", True, 1),
], ],
) )