Frontend (alpha)

.gitignore

@@ -138,3 +138,8 @@ GitHub.sublime-settings
 # Visual Studio Code # 
 .vscode/* 
 .history
+
+# assets used by dash js components
+assets/*
+
+data/*

Dockerfile

@@ -20,7 +20,8 @@ COPY --chmod=775 docker-entrypoint.sh .
 
 COPY pyproject.toml manage.py /usr/src/app/
 COPY polarrouteserver /usr/src/app/polarrouteserver
+COPY assets /usr/src/app/assets
 
 ENV SETUPTOOLS_SCM_PRETEND_VERSION=99.99.99
-RUN uv pip install --system -e .
-RUN uv pip install --system django-debug-toolbar
+RUN uv pip install --system -e .[frontend]
+RUN uv pip install --system django-debug-toolbar debugpy

README.md

@@ -48,7 +48,7 @@ popd
 - Run `docker compose exec app /bin/bash` to open a shell inside the running app container.
 - Run `django-admin insert_mesh /usr/src/app/data/mesh/<MESH FILENAME>` to insert the mesh into the database manually.
 
-Test that the app is working using the `request_route` tool (see [Documentation](https://bas-amop.github.io/PolarRoute-server/requesting-routes/#using-the-in-built-route-request-utility-simplest)). The URL of the service should be `localhost:8000`.
+Test that the app is working using the demo tool (see [Documentation](https://bas-amop.github.io/PolarRoute-server/requesting-routes/#using-the-in-built-demo-utility-simplest)). The URL of the service should be `localhost:8000`, where the user interface will be served if `POLARROUTE_FRONTEND` is set to `True` (which it is in `compose.yml`).
 
 The django development server supports hot reloading and the source code is bind-mounted into the container, so changes should be reflected in the running app. Any changes to `polarrouteserver.route_api.models.py` will necessitate a migration to the database. To create and run migrations, run:
 

assets/mapFunctions.js

@@ -0,0 +1,35 @@
+window.polarRoute = Object.assign({}, window.polarRoute, {
+    mapFunctions: {
+        mousemove: function(e, ctx) {
+            ctx.setProps({
+                mouseCoords: {
+                    area: e.latlng
+                }
+            })
+        },
+        click: function(e, ctx) {
+
+            ctx.setProps({
+                n_clicks: ctx.n_clicks == undefined ? 1 : ctx.n_clicks + 1, // increment counter
+                clickData: {
+                    latlng: e.latlng,
+                    layerPoint: e.layerPoint,
+                    containerPoint: e.containerPoint
+                }
+            });
+        },
+        // marker drag end event handler
+        dragend: function(e, ctx) {
+
+            latlng = e.target.getLatLng();
+
+            ctx.setProps({
+                dragEndPosition: {
+                    lat:latlng.lat,
+                    lon:latlng.lng,
+                }
+            });
+        }
+
+    }
+});

compose.debug.yml

@@ -0,0 +1,7 @@
+services:
+  app:
+    ports:
+      - 5678:5678
+    command: >
+      python -m debugpy --listen 0.0.0.0:5678 --wait-for-client
+      manage.py runserver 0.0.0.0:8000 --noreload

compose.yml

@@ -9,6 +9,8 @@ services:
       POLARROUTE_MESH_DIR: /usr/src/app/mesh
       POLARROUTE_DB_HOST: db
       POLARROUTE_DB_PORT: 5432
+      POLARROUTE_FRONTEND: True
+      POLARROUTE_LOG_LEVEL: DEBUG
       POLARROUTE_SUPERUSER_USERNAME: admin
       POLARROUTE_SUPERUSER_PASSWORD: password
     entrypoint: /usr/src/app/docker-entrypoint.sh
@@ -17,6 +19,7 @@ services:
       - ./manage.py:/usr/src/app/manage.py
       - ./polarrouteserver:/usr/src/app/polarrouteserver
       - ./data/mesh:/usr/src/app/data/mesh
+      - ./assets:/usr/src/app/assets
     depends_on:
       - db 
       - celery

docs/apischema.yml

@@ -1,7 +1,7 @@
 openapi: 3.0.3
 info:
   title: PolarRoute-Server
-  version: 0.2.7
+  version: 0.2.1.dev121+g8ccd1f2f8.d20251222
   description: Backend server for serving PolarRoute and MeshiPhi assets
 paths:
   /api/evaluate_route:

docs/configuration.md

@@ -22,6 +22,7 @@ The following are inherited from Django and more information can be found on the
 - `POLARROUTE_LOG_LEVEL` - sets the logging level from standard log level options: INFO, DEBUG, ERROR, WARNING etc. (Default: `INFO`)
 - `POLARROUTE_LOG_DIR` - sets the output directory for logs. By default only used in production settings environment.
 - `POLARROUTE_STATIC_ROOT` - the path to directory used for static file serving in production, e.g. `"/var/www/example.com/static/"` (Default: `None`) Note this is only used for the admin panel in this application.
+- `POLARROUTE_FRONTEND` - boolean switch to disable the frontend dashboard if, for instance, PolarRoute-server is being used exclusively as a headless app. Set to `False` to disable. (Default: `True`)
 
 ## Database settings
 

docs/development.md

@@ -22,6 +22,38 @@ A number of helpful development tools are made available through the `Makefile`,
 
 **Important**: Please ensure all changes are included in `CHANGELOG.md` in a human-friendly format.
 
+## Debugging with docker compose
+
+To run using a debugger in e.g. vs code, run with the additional compose file `compose.debug.yml` which adds some additional settings to enable this.
+
+Do so with: `docker compose -f compose.yml -f compose.debug.yml up`
+
+This will launch the containers, but the `app` service will stop until a debugger is attached.
+
+For VS Code, the launch config should look like:
+
+```json
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Debug Dockerised Django",
+            "type": "debugpy",
+            "request": "attach",
+            "pathMappings": [
+                {
+                "localRoot": "${workspaceFolder}",
+                "remoteRoot": "/usr/src/app"
+                }
+            ],
+            "connect": {"host": "127.0.0.1", "port": 5678},
+        }
+    ]
+}
+```
+
+Run the debugger using this config to run the debugger listening to the debugging port configured.
+
 ## Release/Versioning
 
 Version numbers should be used in tagging commits on the `main` branch and reflected in the `pyproject.toml` file and should be of the form `v0.1.7` using the semantic versioning convention.

polarrouteserver/frontend/__init__.py

@@ -0,0 +1,135 @@
+import logging
+import warnings
+
+from dash import dcc
+import dash_bootstrap_components as dbc
+import dash_leaflet as dl
+from django_plotly_dash import DjangoDash
+from dash_extensions.enrich import html
+from dash_extensions.javascript import Namespace
+
+from .callbacks import register_callbacks
+from .components import amsr_layer, header, footer, site_development_notice
+from .layouts import route_request_form
+from .utils import default_sic_date
+
+logger = logging.getLogger(__name__)
+FORMAT = "[%(filename)s . %(funcName)20s() ] %(message)s"
+logging.basicConfig(format=FORMAT)
+
+stylesheets = [
+    "https://cdn.web.bas.ac.uk/bas-style-kit/0.7.3/css/bas-style-kit.min.css",
+    dbc.themes.BOOTSTRAP,
+    dbc.icons.BOOTSTRAP,
+]
+
+with warnings.catch_warnings():
+    warnings.simplefilter("ignore")
+    app = DjangoDash(
+        "PolarRoute",
+        add_bootstrap_links=True,
+        update_title=None,
+        external_stylesheets=stylesheets,
+    )
+
+register_callbacks(app)
+
+ns = Namespace("polarRoute", "mapFunctions")
+
+eventHandlers = dict(
+    mousemove=ns("mousemove"),
+    click=ns("click"),
+)
+
+
+def serve_layout():
+    return html.Div(
+        children=[
+            dcc.Store(id="routes-store", data=[], storage_type="memory"),
+            dcc.Store(id="route-visibility-store", data=[], storage_type="memory"),
+            dcc.Store(id="marker-store", storage_type="memory", data={}),
+            dcc.Interval(id="recent-routes-interval", interval=10000),
+            # dcc.Interval(id="route-request-form-interval", interval=1, n_intervals=0, max_intervals=1),
+            html.Header(header),
+            site_development_notice,
+            dl.Map(
+                [
+                    dl.TileLayer(
+                        id="basemap",
+                        attribution=("© OpenStreetMap contributors"),
+                        zIndex=0,
+                    ),
+                    dl.FullScreenControl(),
+                    dl.LayersControl(
+                        [
+                            dl.Overlay(
+                                amsr_layer(default_sic_date),
+                                name="AMSR",
+                                checked=False,
+                                id="amsr-overlay",
+                            ),
+                        ],
+                        id="layers-control",
+                    ),
+                    dl.FeatureGroup(id="routes-fg"),
+                    dl.FeatureGroup(id="marker-fg", children=[]),
+                ],
+                center=[-60, -67],
+                zoom=3,
+                style={"height": "50vh", "cursor": "crosshair"},
+                id="map",
+                eventHandlers=eventHandlers,
+            ),
+            html.Span(" ", id="mouse-coords-container"),
+            dcc.Slider(
+                min=-30,
+                max=0,
+                step=1,
+                value=0,
+                id="amsr-date-slider",
+                marks=None,
+                tooltip={"placement": "top", "always_visible": False},
+            ),
+            html.Span("", id="test-output-container"),
+            dbc.Row(
+                [
+                    dbc.Col(
+                        [
+                            dbc.Row(
+                                [
+                                    dbc.Col(html.H2("Recent Routes"), width=4),
+                                    dbc.Col(
+                                        dbc.Button(
+                                            html.I(
+                                                className="bi bi-arrow-clockwise me-2"
+                                            ),
+                                            id="refresh-routes-button",
+                                            class_name="bsk-btn bsk-btn-primary",
+                                        )
+                                    ),
+                                ],
+                                justify="start",
+                            ),
+                            dcc.Loading([html.Div(id="recent-routes-table")]),
+                            html.Div(id="recent-routes-tooltips"),
+                        ],
+                        class_name="col-12 col-md-6",
+                    ),
+                    dbc.Col(
+                        [
+                            html.H2("Request Route"),
+                            html.Span(
+                                "Select start and end points from dropdown or by clicking on map."
+                            ),
+                            html.Div(route_request_form(), id="route-request"),
+                        ],
+                        class_name="col-12 col-md-6",
+                    ),
+                ]
+            ),
+            html.Footer(footer),
+        ],
+    )
+
+
+app.layout = serve_layout