Merge branch 'main' of https://github.com/KIT-ISAS/web-app

Author: daniel-frisch-kit

.github/workflows/test_only.yml

@@ -0,0 +1,16 @@
+name : Tests
+on:
+  push:
+    branches:
+      - vlad/devel
+      - main
+      - staging
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - name: Build Docker Image
+        run: docker compose --profile test build tests
+      - name: Run Tests
+        run: docker compose --profile test run --rm tests

.gitignore

@@ -160,3 +160,7 @@ cython_debug/
 #.idea/
 
 #.kate-swp
+ 
+.vscode/
+time_taken_for_various*
+

app.py

@@ -4,28 +4,49 @@
 import dash_bootstrap_components as dbc
 
 # Usage Locally:
-# $ python app.py
+# $ poetry run python app.py
 
 # select theme
 # https://dash-bootstrap-components.opensource.faculty.ai/docs/themes/
 external_stylesheets = [dbc.themes.CERULEAN]  # CERULEAN, DARKLY, PULSE
 
 server = flask.Flask(__name__)
 
-app = Dash(__name__, external_stylesheets=external_stylesheets, server=server, use_pages=True)  # , suppress_callback_exceptions=True
+app = Dash(
+	__name__, 
+	external_stylesheets=external_stylesheets,
+	server=server,
+	use_pages=True,
+	serve_locally=True,
+	suppress_callback_exceptions=True # this is needed because renderer generate callbacks dynamically with per instance uuids	
+) 
 
 app.layout = dbc.Container([
-    html.H1('ISAS Interactive'),
-    dbc.Nav([
-        dbc.NavLink(html.Div(f"{page['name'].lower()}"), href=page["relative_path"], active="exact")
-        for page in dash.page_registry.values()
-    ], pills=True, className='bg-light'),
-    html.P(),
-    dash.page_container
-], fluid=True)
+	html.H1('ISAS Interactive', 
+		style={
+			"caretColor": "transparent",
+			"userSelect": "none"
+		}
+	),
+	dbc.Nav([
+		dbc.NavLink(
+			html.Div(
+				f"{page['name'].lower()}"),
+				href=page["relative_path"], 
+				active="exact",
+				className='rounded-3'
+		)
+		for page in dash.page_registry.values()
+	], pills=True, className='bg-light rounded-3'),
+	html.P(),
+	html.Div(dash.page_container, className="flex-grow-1 d-flex flex-column", id="outer-page-container", style={'minHeight': '0'})
+], 
+fluid=True,
+className="vh-100 d-flex flex-column"
+)
 
 if __name__ == '__main__':
-    # processes=6, threaded=False,
-    app.run(debug=True, threaded=True, host='0.0.0.0', port='8080')
-    # app.run(debug=True, processes=6, threaded=False, host='0.0.0.0', port='8080')
-    # app.run(debug=True)
+	# processes=6, threaded=False,
+	app.run(debug=True, threaded=True, host='0.0.0.0', port='8080')
+	# app.run(debug=True, processes=6, threaded=False, host='0.0.0.0', port='8080')
+	# app.run(debug=True)

assets/blockquote.css

@@ -0,0 +1,23 @@
+/* Danger / error-style blockquote inside dcc.Markdown */
+blockquote {
+	border-left: 4px solid #e53935;
+	background-color: #ffebee;
+	padding: 1rem 1.25rem 1rem 2.7rem;
+	margin: 1rem 0;
+	color: #b71c1c;
+	border-radius: 6px;
+	position: relative;
+}
+
+/* Warning icon */
+blockquote::before {
+	content: "⚠";
+	position: absolute;
+	left: 0.9rem;
+	top: 0.9rem;
+	font-size: 1.1rem;
+}
+
+blockquote p {
+	margin: 0;
+}

assets/dpr.js

@@ -0,0 +1,7 @@
+window.dash_clientside = Object.assign({}, window.dash_clientside, {
+	utils: {
+		getDevicePixelRatio: function(_) {
+			return window.devicePixelRatio || 1;
+		}
+	}
+});

assets/favicon.ico

@@ -0,0 +1,45 @@
+/* Dash puts pages inside 2 divs that are not styleable otherwise */
+#outer-page-container > * { /* this is the empty div dash puts pages inside */
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+}
+#_pages_content {
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+}
+
+
+#panelgroup-parent-container {
+  min-height: 0;
+}
+
+.split-pane-group {
+  height: 100%;
+}
+
+@media (min-width: 768px) {
+	.split-pane-handle {
+		cursor: col-resize;
+	}
+}
+
+/* < md: "mobile" layout */
+@media (max-width: 767.98px) {
+	.split-pane-group {
+		flex-direction: column !important;
+	}
+
+
+	.split-pane-left .bg-light {
+		max-height: 40vh;
+		overflow-y: auto;
+	}
+
+	.split-pane-handle {
+		display: none !important; /* no resize on mobile */
+	}
+}

assets/full_page.css

@@ -1,8 +1,44 @@
 window.dccFunctions = window.dccFunctions || {};
 window.dccFunctions.trafo_L = function(value) {
-    if (value < Math.log10(1.25)) {
-        return 0; 
-    } else {
-        return Math.round(Math.pow(10, value));
-    }
+	if (value < Math.log10(1.25)) {
+		return 0; 
+	} else {
+		return Math.round(Math.pow(10, value));
+	}
+}
+window.dccFunctions.transform_log_nice = function(value) {
+	let x = Math.pow(10, value);
+	// same as transform_up in log_slider.py
+	if (x == 0){
+		return 0;
+	}
+	const sign = Math.sign(x);
+	x = Math.abs(x);
+
+	let step = Math.pow(10, Math.floor(Math.log10(x))) / 10;
+	let nice_value = sign * Math.round(x / step) * step;
+	nice_value = Number(nice_value.toFixed(4));
+	return nice_value;
+}
+
+window.dccFunctions.transform_fib = function(value) {
+	function fibonacci(n) {
+		return n < 1 ? 0
+			 : n <= 2 ? 1
+			 : fibonacci(n - 1) + fibonacci(n - 2)
+	}
+	return fibonacci(value);
+}
+
+window.dccFunctions.transform_fib_m1 = function(value) {
+	function fibonacci(n) {
+		return n < 1 ? 0
+			 : n <= 2 ? 1
+			 : fibonacci(n - 1) + fibonacci(n - 2)
+	}
+	return fibonacci(value) - 1;
+}
+
+window.dccFunctions.transform_square = function(value) {
+	return value * value;
 }

assets/tooltip.js

@@ -0,0 +1,8 @@
+from dash import html
+
+# wrapps component in a label
+def Label(label, component):
+	return html.Div([
+				html.Label(label),
+				component,
+			])