Frontend toolchain setup and some basic map widgets

.devcontainer/devcontainer.json

@@ -1,54 +1,54 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
 // https://github.com/microsoft/vscode-dev-containers/tree/v0.163.1/containers/python-3-postgres
-// Update the VARIANT arg in docker-compose.yml to pick a Python version: 3, 3.8, 3.7, 3.6 
+// Update the VARIANT arg in docker-compose.yml to pick a Python version: 3, 3.8, 3.7, 3.6
 {
-	"name": "Python 3 & PostgreSQL",
-	"dockerComposeFile": "docker-compose.yml",
-	"service": "app",
-	"workspaceFolder": "/workspace/pycommonknowledge",
-	"forwardPorts": [
-		8000
-	],
-	// Set *default* container specific settings.json values on container create.
-	"settings": {
-		"terminal.integrated.shell.linux": "/bin/bash",
-		"sqltools.connections": [
-			{
-				"name": "Container database",
-				"driver": "PostgreSQL",
-				"previewLimit": 50,
-				"server": "localhost",
-				"port": 5432,
-				"database": "postgres",
-				"username": "postgres",
-				"password": "postgres"
-			}
-		],
-		"python.pythonPath": "/usr/local/bin/python",
-		"python.linting.enabled": true,
-		"python.linting.pylintEnabled": true,
-		"python.formatting.autopep8Path": "/usr/local/py-utils/bin/autopep8",
-		"python.formatting.blackPath": "/usr/local/py-utils/bin/black",
-		"python.formatting.yapfPath": "/usr/local/py-utils/bin/yapf",
-		"python.linting.banditPath": "/usr/local/py-utils/bin/bandit",
-		"python.linting.flake8Path": "/usr/local/py-utils/bin/flake8",
-		"python.linting.mypyPath": "/usr/local/py-utils/bin/mypy",
-		"python.linting.pycodestylePath": "/usr/local/py-utils/bin/pycodestyle",
-		"python.linting.pydocstylePath": "/usr/local/py-utils/bin/pydocstyle",
-		"python.linting.pylintPath": "/usr/local/py-utils/bin/pylint",
-		"python.testing.pytestPath": "/usr/local/py-utils/bin/pytest"
-	},
-	// Add the IDs of extensions you want installed when the container is created.
-	"extensions": [
-		"ms-python.python",
-		"mtxr.sqltools",
-		"mtxr.sqltools-driver-pg",
-		"matangover.mypy"
-	],
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	// "forwardPorts": [5000, 5432],
-	// Use 'postCreateCommand' to run commands after the container is created.
-	// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-	"remoteUser": "vscode",
-	"postCreateCommand": "make bootstrap"
+  "name": "Python 3 & PostgreSQL",
+  "dockerComposeFile": "docker-compose.yml",
+  "service": "app",
+  "workspaceFolder": "/workspace/pycommonknowledge",
+  "forwardPorts": [8000],
+  // Set *default* container specific settings.json values on container create.
+  "settings": {
+    "terminal.integrated.shell.linux": "/bin/bash",
+    "sqltools.connections": [
+      {
+        "name": "Container database",
+        "driver": "PostgreSQL",
+        "previewLimit": 50,
+        "server": "localhost",
+        "port": 5432,
+        "database": "postgres",
+        "username": "postgres",
+        "password": "postgres"
+      }
+    ],
+    "python.pythonPath": "/usr/local/bin/python",
+    "python.linting.enabled": true,
+    "python.linting.pylintEnabled": true,
+    "python.formatting.autopep8Path": "/usr/local/py-utils/bin/autopep8",
+    "python.formatting.blackPath": "/usr/local/py-utils/bin/black",
+    "python.formatting.yapfPath": "/usr/local/py-utils/bin/yapf",
+    "python.linting.banditPath": "/usr/local/py-utils/bin/bandit",
+    "python.linting.flake8Path": "/usr/local/py-utils/bin/flake8",
+    "python.linting.mypyPath": "/usr/local/py-utils/bin/mypy",
+    "python.linting.pycodestylePath": "/usr/local/py-utils/bin/pycodestyle",
+    "python.linting.pydocstylePath": "/usr/local/py-utils/bin/pydocstyle",
+    "python.linting.pylintPath": "/usr/local/py-utils/bin/pylint",
+    "python.testing.pytestPath": "/usr/local/py-utils/bin/pytest"
+  },
+  // Add the IDs of extensions you want installed when the container is created.
+  "extensions": [
+    "ms-python.python",
+    "mtxr.sqltools",
+    "mtxr.sqltools-driver-pg",
+    "matangover.mypy",
+    "esbenp.prettier-vscode",
+    "orta.vscode-jest"
+  ],
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  // "forwardPorts": [5000, 5432],
+  // Use 'postCreateCommand' to run commands after the container is created.
+  // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+  "remoteUser": "vscode",
+  "postCreateCommand": "make bootstrap"
 }

.devcontainer/docker-compose.yml

@@ -1,4 +1,4 @@
-version: '3'
+version: "3"
 
 services:
   app:

.github/pull_request_template.md

@@ -2,28 +2,35 @@
 <!--- Please also read our [contributor guidelines](https://commonknowledge.github.io/pycommonknowledge/contributing) -->
 
 ## Description
+
 <!--- Describe your changes in detail -->
 
 ## Motivation and Context
+
 <!--- Why is this change required? What problem does it solve? -->
 <!--- If it relates an open issue, please link to the issue here. -->
 
 ## How Can It Be Tested?
+
 <!--- Please describe in detail how you tested your changes so that a reviewer can reproduce the results. -->
 <!--- Include details of your testing environment, and the tests you've run your self -->
 <!--- see how your change affects other areas of the code, etc. -->
 
 ## Screenshots (if appropriate):
 
 ## Types of changes
+
 <!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
+
 - [ ] Bug fix (non-breaking change which fixes an issue)
 - [ ] New feature (non-breaking change which adds functionality)
 - [ ] Breaking change (fix or feature that would cause existing functionality to change)
 - [ ] Documentation change
 
 ## Checklist:
+
 <!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
+
 - [ ] I have documented all new methods using google docstring format.
 - [ ] I have added type annotations to any public API methods.
 - [ ] I have updated any relevant high-level documentation.

.github/workflows/ci.yml

@@ -4,7 +4,6 @@ on:
     branches:
       - main
 jobs:
-
   lint-and-test:
     runs-on: ubuntu-latest
     container:
@@ -32,5 +31,5 @@ jobs:
           path: /home/runner/docker/.cache/poetry
           key: do-app-baseimage-django-node:364385f9d196a2bbe2d5faea025520cc0316501f-poetry-${{ hashFiles('poetry.lock') }}
       - run: make install
-      - run: .github/bin/wait-for-it.sh db:5432 
+      - run: .github/bin/wait-for-it.sh db:5432
       - run: make lint

.prettierignore

@@ -0,0 +1,6 @@
+# Ignore artifacts:
+dist
+static
+node_modules
+.*_cache
+*.html

.prettierrc.json

@@ -0,0 +1 @@
+{}

.vscode/launch.json

@@ -0,0 +1,78 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "compounds": [
+    {
+      "name": "Run Example App",
+      "configurations": ["django-runserver", "vite-dev"],
+      "presentation": {
+        "hidden": false,
+        "group": "",
+        "order": 1
+      }
+    }
+  ],
+  "configurations": [
+    {
+      "name": "Test current Django test",
+      "type": "python",
+      "request": "launch",
+      "program": "${workspaceFolder}/manage.py",
+      "args": ["test", "${file}"],
+      "justMyCode": true,
+      "django": true,
+      "presentation": {
+        "hidden": false,
+        "group": "",
+        "order": 2
+      }
+    },
+    {
+      "name": "Run all Django tests",
+      "type": "python",
+      "request": "launch",
+      "program": "${workspaceFolder}/manage.py",
+      "args": ["test", "test/*"],
+      "justMyCode": true,
+      "django": true,
+      "presentation": {
+        "hidden": false,
+        "group": "",
+        "order": 3
+      }
+    },
+    {
+      "name": "django-runserver",
+      "type": "python",
+      "request": "launch",
+      "program": "${workspaceFolder}/manage.py",
+      "args": ["runserver"],
+      "justMyCode": true,
+      "django": true
+    },
+    {
+      "name": "vite-dev",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "yarn",
+      "program": "vite",
+      "args": ["--mode", "dev"]
+    },
+    {
+      "type": "node",
+      "name": "vscode-jest-tests",
+      "request": "launch",
+      "args": ["--runInBand", "--watchAll=false"],
+      "cwd": "${workspaceFolder}",
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "disableOptimisticBPs": true,
+      "program": "${workspaceFolder}/node_modules/.bin/jest",
+      "windows": {
+        "program": "${workspaceFolder}/node_modules/jest/bin/jest"
+      }
+    }
+  ]
+}

.vscode/settings.json

@@ -3,5 +3,10 @@
   "python.linting.pylintEnabled": false,
   "python.linting.mypyEnabled": true,
   "python.linting.banditEnabled": true,
-  "python.languageServer": "Jedi"
+  "python.languageServer": "Jedi",
+  "editor.formatOnSave": true,
+  "html.format.templating": true,
+  "[django-html]": {
+    "editor.formatOnSave": false
+  }
 }

Makefile

@@ -19,7 +19,8 @@ poetry-remove:
 .PHONY: install
 install:
 	poetry install -n
-	-poetry run mypy --install-types --non-interactive ./
+	poetry run mypy --install-types --non-interactive ./
+	yarn
 
 .PHONY: pre-commit-install
 pre-commit-install:
@@ -41,6 +42,7 @@ codestyle:
 	poetry run pyupgrade --exit-zero-even-if-changed --py38-plus **/*.py
 	poetry run isort --settings-path pyproject.toml ./
 	poetry run black --config pyproject.toml ./
+	yarn prettier --write .
 
 .PHONY: formatting
 formatting: codestyle
@@ -62,16 +64,15 @@ deploy-docs:
 .PHONY: test
 test:
 	poetry run python manage.py test test/*
+	yarn test
 
 .PHONY: check-codestyle
 check-codestyle:
 	poetry run isort --diff --check-only --settings-path pyproject.toml ./
 	poetry run black --diff --check --config pyproject.toml ./
 	poetry run darglint --docstring-style google --verbosity 2 pyck
-
-.PHONY: pylint
-lint:
-	poetry run pylint .
+	yarn tsc --noemit
+	yarn prettier --check .
 
 .PHONY: mypy
 mypy:
@@ -81,12 +82,20 @@ mypy:
 check-safety:
 	poetry check
 	poetry run safety check --full-report
-	poetry run bandit -ll --recursive pycommonknowledge tests
+	poetry run bandit -ll --recursive pyck tests
 
 .PHONY: lint
 lint: test check-codestyle mypy check-safety
 
 
+#* Assets
+
+.PHONY: build
+build:
+	yarn vite build --mode bundled
+	yarn vite build
+
+
 #* Cleaning
 
 .PHONY: pycache-remove

__mocks__/mapbox-gl.ts

@@ -0,0 +1,64 @@
+import { EventEmitter } from "events";
+import mapboxgl, { AnySourceImpl } from "mapbox-gl";
+
+type MockedMethods = Pick<
+  mapboxgl.Map,
+  | "getContainer"
+  | "addLayer"
+  | "removeLayer"
+  | "getLayer"
+  | "addSource"
+  | "removeSource"
+  | "getSource"
+>;
+
+class MockMap extends EventEmitter implements MockedMethods {
+  private layers = new Map<string, mapboxgl.AnyLayer>();
+  private sources = new Map<string, MockSource>();
+
+  constructor(private options?: mapboxgl.MapboxOptions) {
+    super();
+
+    setTimeout(() => {
+      this.emit("load");
+    });
+  }
+
+  getContainer() {
+    return this.options?.container as HTMLElement;
+  }
+
+  addLayer(layer: mapboxgl.AnyLayer): mapboxgl.Map {
+    this.layers.set(layer.id, layer);
+    return this as any;
+  }
+
+  removeLayer(id: string): mapboxgl.Map {
+    this.layers.delete(id);
+    return this as any;
+  }
+
+  getLayer(id: string): mapboxgl.AnyLayer {
+    return this.layers.get(id)!;
+  }
+
+  addSource(id: string, source: mapboxgl.AnySourceData): mapboxgl.Map {
+    this.sources.set(id, new MockSource(source.type));
+    return this as any;
+  }
+
+  removeSource(id: string): mapboxgl.Map {
+    this.sources.delete(id);
+    return this as any;
+  }
+
+  getSource(id: string): mapboxgl.AnySourceImpl {
+    return this.sources.get(id) as any;
+  }
+}
+
+class MockSource {
+  constructor(readonly type: string) {}
+}
+
+export default { Map: MockMap };