Benutzeroberfleache angepasst

citation_parser_ui.py

@@ -10,8 +10,13 @@ from dash.exceptions import PreventUpdate
 from input.interface import InputInterface
 import input.publication
 from verarbeitung.process_main import Processing
+from dash.dependencies import Input, Output, State  #Loading Bar
+import plotly.express as px
+import dash_bootstrap_components as dbc # pip install dash-bootstrap-components for Loading Bar
 
-app = dash.Dash(__name__)
+
+
+app = dash.Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB])  #SPACELAB https://bootswatch.com/default/ for more themes)
 
 # List of options when inputting data and generating the graph
 additional_options = ['Update Automatically','Smart Input']
@@ -25,7 +30,7 @@ f.close()
 app.layout = html.Div([
     # Layer 0: For the Header and Help Function(s)
     html.Div([
-        html.Button(id='show-info',children='Show Info',n_clicks=0),
+        dbc.Button(id='show-info',children='Show Info',n_clicks=0, color="primary", className="me-1"),
         html.Div(id='info-box')
     ]),
     # Layer 1: For all mandatory Inputs
@@ -33,16 +38,29 @@ app.layout = html.Div([
         "Input: ",
         # A simple box for inputting a string. 
         # Value is transmitted upon pressing return or clicking out of the box.
-        dcc.Input(id='input-string', value='', type='text',debounce=True),
+        dcc.Input(id='input-string', value='', type='text',debounce=True,
+        style={ "width": "400px"},
+        ),
+        
+    ]),
+        # Layer 1,5: For test
+    html.Div([
+        "Forward recursion: ",
         # Forward recursion. Values between 1 and 10 can be entered.
-        dcc.Input(id='forward-depth',value='1',type='number',min='1',max='10'),
+        dcc.Input(id='forward-depth',value='1',type='number',min='1',max='10',
+        style={ "width": "50px"},
+        ),
+        "Backward recursion: ",
         # Backward recursion. Values between 1 and 10 can be entered.
-        dcc.Input(id='backward-depth',value='1',type='number',min='1',max='10'),
+        dcc.Input(id='backward-depth',value='1',type='number',min='1',max='10',
+        style={"width": "50px"},
+        ),
         # Upload box. Can be used via drag-and-drop or byclicking on it to open a file viewer.
         dcc.Upload(
             id="upload-data",
             children=html.Div(
-                ["Drag and drop or click to select a file to upload."]),
+            #Drag and drop or click to select a file to upload
+                ["Drag and drop to upload"]),
             style={
                 "width": "30%",
                 "height": "60px",
@@ -54,6 +72,7 @@ app.layout = html.Div([
                 "margin": "10px",
             })
     ]),
+   
     # Layer 2: For the checklist, Remove-/Start-Buttons and input-error-message
     html.Div([
         # All input DOIs are collected in this checklist. 
@@ -63,11 +82,14 @@ app.layout = html.Div([
         # Displays error message if 'Smart Input' is active.
         html.Div(id='input-err',style={'color':'red'}),
         # Clears the entire list.
-        html.Button(id='clear-all-button',children='Clear All'),
+        #html.Button(id='clear-all-button',children='Clear All'),
+        dbc.Button(id='clear-all-button',children='Clear All', color="primary", className="me-1"),
         # Clear all selected elements.
-        html.Button(id='clear-selected-button',children='Clear Selected'),
+        #html.Button(id='clear-selected-button',children='Clear Selected'),
+        dbc.Button(id='clear-selected-button',children='Clear Selected', color="primary", className="me-1"),
         # Starts the process that generates a graph.
-        html.Button(id='start-button',children='Generate Graph')
+        #html.Button(id='start-button',children='Generate Graph')
+        dbc.Button(id='start-button',children='Generate Graph', color="primary", className="me-1")
     ]),
     # Layer 3: For additional Options (e.g. Topological Sort)
     html.Div([
@@ -76,7 +98,7 @@ app.layout = html.Div([
         dcc.Checklist(id='additional-options',
             options=[{'label':k,'value':k} for k in additional_options],
             value=[])
-    ]),
+        ]),
     # Layer 4: For the Graph
     html.Div(
         [html.Iframe(