Philipp/aki_prj23_transparenzregister
1
0
Fork 0
mirror of https://github.com/fhswf/aki_prj23_transparenzregister.git synced 2025-11-04 13:19:41 +01: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
7 changed files with 73 additions and 43 deletions
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 {
float: left;
width: 100%;
min-height: 100vh;
width: 100vw;
height: 100vh;
background-color: var(--ash-gray);
}
@@ -56,9 +56,9 @@
border-color: var(--raisin-black);
border-radius: 20px;
vertical-align: top;
width: 62%;
width: 64%;
min-width: 600px;
max-width: 1500px;
height: 100%;
}
.home .networkx_style .filter-wrapper {
@@ -80,10 +80,36 @@
padding-left: 10px;
width: 100%;
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 {
text-align: center;
align-items: center;
@@ -132,10 +158,8 @@
.home .networkx_style .graph-style {
margin-top: 10px;
padding-bottom: 0px;
padding-top: 10px;
display: inline-block;
margin: 0px;
width: 100%;
margin-bottom: 15px;
/* float: inline-end, */

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

@@ -1,9 +1,7 @@
html, body {
border: 0;
min-height: 100vh;
margin: 0;
padding: 0;
width: 100%;
min-height:100vh;
height:auto !important;
margin:0;
}
.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]})
top_companies_dict, top_companies_columns, figure = _update_figure(
"None",
"Ohne",
False,
selected_company_relation_types,
selected_person_relation_types,
@@ -249,7 +249,7 @@ def layout() -> html:
html.Div(
className="networkx_style",
children=[
html.H2(className="header", children=["Social Graph"]),
html.H2(className="header", children=["Soziales Netzwerk"]),
html.Div(
className="filter-wrapper",
id="company_dropdown",
@@ -260,16 +260,17 @@ def layout() -> html:
html.H5(
className="filter-description",
children=[
"Show selected relations Company to Company:"
"Beziehungen zwischen zwei Unternehmen:"
],
),
dcc.Dropdown(
company_relation_types,
list(selected_company_relation_types),
id="dropdown_company_relation_filter",
className="dropdown_style",
className="dropdown_style_multi",
multi=True,
persistence=True,
placeholder="Wählen Sie eine Beziehung",
),
],
),
@@ -279,16 +280,17 @@ def layout() -> html:
html.H5(
className="filter-description",
children=[
"Show selected relations Company to Person:"
"Beziehungen zwischen Unternehmen und Personen:",
],
),
dcc.Dropdown(
person_relation_types,
list(selected_person_relation_types),
id="dropdown_person_relation_filter",
className="dropdown_style",
className="dropdown_style_multi",
multi=True,
persistence=True,
placeholder="Wählen Sie eine Beziehung",
),
],
),
@@ -297,20 +299,22 @@ def layout() -> html:
children=[
html.H5(
className="filter-description",
children=["Choose Graph Metric:"],
children=["Zentralitätsmaß:"],
),
dcc.Dropdown(
[
"None",
"Ohne",
"eigenvector",
"degree",
"betweenness",
"closeness",
],
"None",
"Ohne",
id="dropdown",
className="dropdown_style",
persistence=True,
clearable=False,
placeholder="Wählen Sie ein Zentralitätsmaß",
),
],
),
@@ -319,7 +323,7 @@ def layout() -> html:
children=[
html.H5(
className="filter-description",
children=["Choose Layout:"],
children=["Layout:"],
),
dcc.Dropdown(
[
@@ -342,7 +346,8 @@ def layout() -> html:
id="dropdown_layout",
className="dropdown_style",
persistence=True,
placeholder="Select a graph layout",
clearable=False,
placeholder="Wählen Sie ein Layout",
),
],
),
@@ -351,7 +356,7 @@ def layout() -> html:
children=[
html.H5(
className="filter-description",
children=["Adjust Edge Thickness"],
children=["Kantenstärke:"],
),
dcc.Slider(
1,
@@ -368,7 +373,7 @@ def layout() -> html:
children=[
html.H5(
className="filter-description",
children=["Enable Edge Annotation"],
children=["Kantenbezeichnungen:"],
),
html.Div(
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(node_names)
node_trace.marker.color = colors
node_trace.marker.line = {"color": "#2e2c2f", "width": 0.5}
node_trace.text = node_names
# 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)
# Add Relation_Type as a Description for the edges.
@@ -136,21 +137,22 @@ def create_2d_graph( # noqa PLR0913
return go.Figure(
data=[edge_trace, edge_weights_trace, node_trace],
layout=go.Layout(
title="Network graph",
# title="Network graph",
showlegend=False,
autosize=True,
hovermode="closest",
margin={"b": 20, "l": 5, "r": 5, "t": 20},
margin={"b": 100, "l": 5, "r": 5, "t": 20},
annotations=[
{
"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",
"yref": "paper",
"x": 0,
"y": 0.1,
"xanchor": "left",
"y": -0.2,
"xanchor": "center",
"yanchor": "bottom",
"font": {"size": 14},
"align": "center",
}
],
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(
title="Social Graph",
# title="Social Graph",
showlegend=False,
scene={
"xaxis": dict(axis),
@@ -145,14 +145,14 @@ def create_3d_graph( # noqa : PLR0913
annotations=[
{
"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",
"yref": "paper",
"x": 0,
"y": 0.1,
"xanchor": "left",
"y": -0.2,
"xanchor": "center",
"yanchor": "bottom",
"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.
node_trace.marker.color = colors
node_trace.marker.line = {"color": "#2e2c2f", "width": 0.5}
node_trace.text = node_names
# 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)
# 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
from_company = aliased(entities.Company, name="from_company")
COLOR_COMPANY = "blue"
COLOR_PERSON = "red"
COLOR_COMPANY = "#006250"
COLOR_PERSON = "#ff5200"
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),
("Random", "degree", False, 2),
("Shell", "degree", True, 3),
("Spiral", "None", False, 4),
("Spiral", "Ohne", False, 4),
("Circular", "None", True, 1),
],
)