optimización de identación del layout

para que sea más fácil de leer/modificar. también se le agregaron algunos comentarios para identificar las diferentes secciones y sus componentes.

optimización de identación del layout
para que sea más fácil de leer/modificar. también se le agregaron algunos comentarios para identificar las diferentes secciones y sus componentes.
5b2e028c · Jose Luis Gordillo Ruiz · 6b30b121 · 5b2e028c
Commit 5b2e028c authored Dec 02, 2024 by Jose Luis Gordillo Ruiz
Show whitespace changes
Inline Side-by-side

Showing with 49 additions and 88 deletions

dinamyc.py
+49 -88

No files found.
--- a/dinamyc.py
+++ b/dinamyc.py
@@ -89,23 +89,20 @@ external_stylesheets = [
 app = Dash(__name__, external_stylesheets=external_stylesheets)
 app.title = "NutrINDmex. Inventario de datos"
-app.layout = html.Div(
+app.layout = html.Div(children=[
-    children=[
    #encabezado
-        html.Div(
+    html.Div(children=[
-            children=[
        html.P(children="🥑", className="header-emoji"),
        html.H1(children="Inventario de datos", className="header-title"),
        html.P(children=(str(Total_pacientes) + " participantes."),className="header-description"),
        html.P(children=(str(Total_incluidos) + " están incluidos en el análisis."),className="header-description"),
    ],
-            className="header",
+    className="header",),
-        ),
    html.Div(children=[ html.H1("Cobertura de pacientes por fuente de datos", className="header-title2") ]),
-        html.Div(
+    # dos columnas: controles y gráfica de pacientes por fuente de datos
-            children=[
+    html.Div(children=[
-                html.Div(
+        #controles
-                    children=[
+        html.Div(children=[
            html.Div(children="Etapa", className="menu-title"),
            dcc.Dropdown(
                id="etapaSel",
@@ -135,21 +132,19 @@ app.layout = html.Div(
                value=7,
                marks={1:"1", 7:"7", 14:"14", 28:"28", 42:"+42"}
            ),
-                    ]
+        ]),
-                ),
+        #gráfica
        html.Div(children=[dcc.Graph(id="multi-chart")],)
-            ],style={'display': 'flex', 'flexDirection': 'row'},
+    ],style={'display': 'flex', 'flexDirection': 'row'}, className="wrapper"),
-            className="wrapper"
+    # segundo 'panel': datos existentes por paciente.
-        ),
+    html.Div(children=[
-        html.Div(
-            children=[
        html.H1("Cantidad de datos por paciente", className="header-title2"),
-                html.Div(
+        # controles y gráfica
-                    children=[
+        html.Div(children=[
-                        html.Div(
+            # controles
-                            children=[
+            html.Div(children=[
-                                html.Div(
+                #dropdown etapa
-                                    children=[
+                html.Div(children=[
                    html.Div(children="Etapa", className="menu-title"),
                    dcc.Dropdown(
                        id="etapaDet",
@@ -164,11 +159,9 @@ app.layout = html.Div(
                        searchable=False,
                        className="dropdown",
                    ),
-                                    ],
+                ], className="wrapper"),
-                                    className="wrapper"
+                # dropdown fuente
-                                ),
+                html.Div(children=[
-                                html.Div(
-                                    children=[
                    html.Div(children="Fuente", className="menu-title"),
                    dcc.Dropdown(
                        id="medidaDet",
@@ -181,36 +174,21 @@ app.layout = html.Div(
                        searchable=False,
                        className="dropdown",
                    ), 
-                                    ],
+                ],className="wrapper",),
-                                    className="wrapper", 
+            ], style={"display":"flex", "flexDirection": "row"},),
-                                ),
+        ],),
-                            ],
+        #grafica
-                            style={"display":"flex", "flexDirection": "row"},
-                        ),
-                    ],
-                ),
        dcc.Graph(id="detalle_figura"),
-            ], 
+    ], className="wrapper"),
-            className="wrapper"
+    # gráficas de visitas
-            ),
+    html.Div(children=[
-        html.Div(
-            children=[
        html.H1("Visitas / Secuenciaciones", className="header-title2"),
        html.Div(children=[
                dcc.Graph(figure=vis_sec),
-                # dcc.Graph(
+        ], className="wrapper"),
-                #     figure=scat),
+    ]),
+    #gráficas de visitas
-                ], 
+    html.Div(children=[
-            className="wrapper"
-            ),
-            ]
-        ),
-        html.Div(
-            children=[
        html.H1("Detalle de visitas", className="header-title2"),
        html.P("..en construcción..", style={"color":"red", "font-style":"italic"}),
        html.Div(children="Visita", className="menu-title"),
@@ -228,17 +206,14 @@ app.layout = html.Div(
            className="dropdown",
        ),
        dcc.Graph(id="multi-visitas"),
-            ],
+    ], className="wrapper",),
-            className="wrapper",
+    # cobertura de pacientes por prueba
-        ),
+    html.Div(children=[
-        html.Div(
-            children=[
        html.H1("Cobertura de pacientes por prueba", className="header-title2"),
+        # selector de etapa y gráfica
+        html.Div(children=[
+            html.Div(children=[
                html.Div(children=[
-                    html.Div(
-                        children=[
-                            html.Div(
-                                children=[
                    html.Div(children="Etapa", className="menu-title"),
                    dcc.Dropdown(
                        id="visitaPruebas",
@@ -253,24 +228,17 @@ app.layout = html.Div(
                        searchable=False,
                        className="dropdown",
                    ),
-                                ], className="wrapper"
+                ], className="wrapper"),
-                            ),
+            ], style={"display":"flex", "flexDirection": "row"},),
-                        ], style={"display":"flex", "flexDirection": "row"},
+        ],),
-                    ),
-                ],
-                         ),
        dcc.Graph(id="detalle_pruebas"),
-            ], 
+    ], className="wrapper"),
-            className="wrapper"
+    # datos para análisis de comidas
-        ),
+    html.Div(children=[
-        html.Div(
-            children=[
        html.H1("Datos para Análisis de comidas", className="header-title2"),
        html.P("..en construcción..", style={"color":"red", "font-style":"italic"}),                
-                html.Div(
+        # dropdown
-                    children=[
+        html.Div(children=[
            html.Div(children="Etapa", className="menu-title"),
            dcc.Dropdown(
                id="mesurableEt",
@@ -285,17 +253,10 @@ app.layout = html.Div(
                searchable=False,
                className="dropdown",
            ), 
+        ], className="wrapper"),
-                    ], className="wrapper"
-                ),
        dcc.Graph(id="mesurables")                
-            ], className="wrapper"
+    ], className="wrapper")
-        )
+    ]) # cierre del layout
-    ]
-)
 @app.callback(