Sphere, Torus, Cylinder and major ui changes

.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*
+

README.md

@@ -1,3 +1,3 @@
 # web-app
 - Currently served at: http://193.196.39.120:8080
-- Test server: http://193.196.39.193:8080
+- Test server: http://193.196.39.84:8080

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/full_page.css

@@ -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/tooltip.js

@@ -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;
 }

components/label.py

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

components/popup_box.py

@@ -0,0 +1,48 @@
+import dash_bootstrap_components as dbc
+from dash import Dash, html, dcc, Input, Output, callback, State
+
+def PopupBox(id, label, title, children):
+	@callback(
+		Output(f"modal-{label}-{id}", "is_open"),
+		Input(f"popup-box-{label}-{id}", "n_clicks"),
+		Input(f"close-{label}-{id}", "n_clicks"),
+		State(f"modal-{label}-{id}", "is_open"),
+	)
+	def toggle_modal(n1, n2, is_open):
+		if n1 or n2:
+			return not is_open
+		return is_open
+
+
+	button = html.Div(
+		children=[
+			dbc.Button(label, id=f"popup-box-{label}-{id}", n_clicks=0)
+		],
+		style={
+			"caretColor": "transparent",
+			"userSelect": "none"
+		}
+	)
+
+	modal = dbc.Modal(
+		id=f"modal-{label}-{id}",
+		is_open=False,
+		children=[
+			html.Div(
+				children=[dbc.ModalHeader(dbc.ModalTitle(title), close_button=True)],
+				style={
+					"caretColor": "transparent",
+					"userSelect": "none"
+				}
+			),
+			dbc.ModalBody(children),
+			dbc.ModalFooter(
+                    dbc.Button("Close", id=f"close-{label}-{id}", n_clicks=0)
+            ),
+		],
+		size="xl",
+		centered=True,
+		scrollable=True,
+	)
+	return button, modal
+

components/split_pane.py

@@ -0,0 +1,52 @@
+from dash import html
+from dash_resizable_panels import PanelGroup, Panel, PanelResizeHandle
+import dash_bootstrap_components as dbc
+
+
+
+def SplitPane(children1, children2, default_size):
+	return html.Div([
+		PanelGroup(
+			id='panel-group',
+			children=[
+				Panel(
+					id='left-sidebar',
+					className="split-pane-left",
+					minSizePercentage=15,
+					defaultSizePercentage=default_size,
+					children=[
+						html.Div(
+							children1,
+							className="bg-light h-100 w-100 rounded-3 p-3 pb-5", style={'overflowY': 'scroll', 'overflowX': 'hidden', 'minHeight': '0'},
+							)
+					],
+				),
+				PanelResizeHandle(
+					id='resize-handle',
+					className="split-pane-handle",
+					style={
+						"flex": "0 0 20px",
+						"margin": "0 -10px",
+						"background": "transparent",
+						"cursor": "col-resize",
+						"userSelect": "none",
+						"position": "relative",
+						"zIndex": 2,
+					},
+				),
+				Panel(
+					id='plot-panel',
+					className="split-pane-right",
+					minSizePercentage=15,
+					children=children2,
+				)
+			], 
+			direction='horizontal',
+			className='split-pane-group w-100 px-0 pb-2',
+			style={'minHeight': '0'}
+		)
+	], 
+	className='px-0 flex-grow-1 d-flex flex-column',
+	id='pangelgroup-parent-container',
+	style={'minHeight': '0'}
+	)

docker-compose.yml

@@ -0,0 +1,16 @@
+services:
+  web:
+    build: 
+      context: .
+      target: prod
+    image: web_app:latest
+    ports: 
+     - "8080:8080"
+    restart: unless-stopped
+
+  tests:
+    build:
+      context: .
+      target: tests
+    image: web_app:tests
+    profiles: ["test"]

dockerfile

@@ -1,14 +1,26 @@
-FROM python:3.10.12
+FROM python:3.10.12 AS base
 
 WORKDIR /code
 
-COPY ./requirements.txt /code/requirements.txt
-
-RUN pip install --upgrade pip
-RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+ARG POETRY_VERSION=2.3.1
+RUN pip install --no-cache-dir "poetry==${POETRY_VERSION}"
+COPY pyproject.toml poetry.lock /code/
+RUN poetry sync --no-root --without dev
 
 COPY ./app.py /code/app.py
 COPY ./assets /code/assets
 COPY ./pages  /code/pages
+COPY ./util /code/util
+COPY ./components /code/components
+COPY ./renderer /code/renderer
+COPY ./model /code/model
+
+
+FROM base AS tests
+RUN apt-get update && apt-get install -y chromium chromium-driver
+RUN poetry sync --no-root --with dev
+COPY ./tests /code/tests
+CMD ["poetry", "run", "pytest", "--headless"]
 
-CMD ["python","app.py"]
+FROM base AS prod
+CMD ["poetry", "run", "gunicorn", "--workers", "1", "--bind", "0.0.0.0:8080", "app:server"]