diff --git a/src/aki_prj23_transparenzregister/ui/assets/networkx_style.css b/src/aki_prj23_transparenzregister/ui/assets/networkx_style.css
index e50b98d..8db0392 100644
--- a/src/aki_prj23_transparenzregister/ui/assets/networkx_style.css
+++ b/src/aki_prj23_transparenzregister/ui/assets/networkx_style.css
@@ -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, */
diff --git a/src/aki_prj23_transparenzregister/ui/assets/typography.css b/src/aki_prj23_transparenzregister/ui/assets/typography.css
index 910f67b..aa1467f 100644
--- a/src/aki_prj23_transparenzregister/ui/assets/typography.css
+++ b/src/aki_prj23_transparenzregister/ui/assets/typography.css
@@ -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 {
diff --git a/src/aki_prj23_transparenzregister/ui/pages/home.py b/src/aki_prj23_transparenzregister/ui/pages/home.py
index 702b342..96c4dbe 100644
--- a/src/aki_prj23_transparenzregister/ui/pages/home.py
+++ b/src/aki_prj23_transparenzregister/ui/pages/home.py
@@ -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",
diff --git a/src/aki_prj23_transparenzregister/utils/networkx/network_2d.py b/src/aki_prj23_transparenzregister/utils/networkx/network_2d.py
index 3534fde..d0a64db 100644
--- a/src/aki_prj23_transparenzregister/utils/networkx/network_2d.py
+++ b/src/aki_prj23_transparenzregister/utils/networkx/network_2d.py
@@ -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)
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},
diff --git a/src/aki_prj23_transparenzregister/utils/networkx/network_3d.py b/src/aki_prj23_transparenzregister/utils/networkx/network_3d.py
index 3e77da8..dcfbbd8 100644
--- a/src/aki_prj23_transparenzregister/utils/networkx/network_3d.py
+++ b/src/aki_prj23_transparenzregister/utils/networkx/network_3d.py
@@ -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)
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.
diff --git a/src/aki_prj23_transparenzregister/utils/networkx/networkx_data.py b/src/aki_prj23_transparenzregister/utils/networkx/networkx_data.py
index 4657ebf..19f3b9c 100644
--- a/src/aki_prj23_transparenzregister/utils/networkx/networkx_data.py
+++ b/src/aki_prj23_transparenzregister/utils/networkx/networkx_data.py
@@ -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:
diff --git a/tests/utils/networkx/network_2d_test.py b/tests/utils/networkx/network_2d_test.py
index d271fef..3be338e 100644
--- a/tests/utils/networkx/network_2d_test.py
+++ b/tests/utils/networkx/network_2d_test.py
@@ -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),
],
)