Migration from NextJS to React

backend/Makefile

@@ -1,5 +1,5 @@
 docker:
-	python -m pip wheel . -w build --no-deps
+	python3 -m pip wheel . -w build --no-deps
 	docker compose build --build-arg VERSION=`grep -i 'version' pyproject.toml | cut -d'"' -f2`
 
 hub:
@@ -17,4 +17,4 @@ tiles:
 
 clean:
 	rm -rf build cesium_api.egg-info
-	pyclean
+	pyclean

backend/cesium_api/__init__.py

@@ -12,6 +12,7 @@
 DEFAULT_HOST = '0.0.0.0'
 DEFAULT_PORT = 9000
 DEFAULT_DATA_DIR = os.getenv("DATA_DIR", "../data")
+DEFAULT_TILES_DIR = os.path.abspath(os.path.join(os.path.dirname(__file__), "..", "geo-tiles"))
 DEFAULT_API_PREFIX = '/'
 
 SATELLITES = [

backend/cesium_api/__main__.py

@@ -4,7 +4,7 @@
 from .app import App
 from .data import Data
 from flask_cors import CORS
-from . import APP_NAME, APP_DESCRIPTION, APP_VERSION, SATELLITES, GROUND_STATIONS, DEFAULT_HOST, DEFAULT_PORT, DEFAULT_DATA_DIR, DEFAULT_API_PREFIX
+from . import APP_NAME, APP_DESCRIPTION, APP_VERSION, SATELLITES, GROUND_STATIONS, DEFAULT_HOST, DEFAULT_PORT, DEFAULT_DATA_DIR, DEFAULT_API_PREFIX, DEFAULT_TILES_DIR
 
 
 LOG = logging.getLogger(__name__)
@@ -82,6 +82,7 @@ def main():
         port=args.port,
         api_prefix=api_prefix,
         data_dir=args.data_dir,
+        tiles_dir=DEFAULT_TILES_DIR,
         debug=args.debug,
     )
     allowed_hosts = ['http://:localhost:3000', 'https://cesium-api.uniclogs.org']

backend/cesium_api/app.py

@@ -2,6 +2,7 @@
 from flask import Flask, Blueprint
 from flask_cors import CORS
 from . import DEFAULT_DATA_DIR
+from . import DEFAULT_TILES_DIR
 from .views import view_czml, view_groundstation, view_passes, view_satellite, view_tiles
 from .data import Data
 
@@ -14,11 +15,12 @@ class App(Flask):
 
     def __init__(
         self: App,
-        data: Data,
+        data: Data["DATA"],
         host: str = 'localhost',
         port: int = 9000,
         api_prefix: str = '/',
         data_dir: str = DEFAULT_DATA_DIR,
+        tiles_dir: str = DEFAULT_TILES_DIR,
         debug: bool = False,
     ):
         super().__init__(__name__)
@@ -27,9 +29,12 @@ def __init__(
         self.host = host
         self.port = port
         self.data_dir = data_dir
+        self.tiles_dir = tiles_dir or DEFAULT_TILES_DIR
         self.data = data
         self.debug = debug
 
+        CORS(self, origins=["http://localhost:3000", "https://cesium-api.uniclogs.org"])
+
         # Register app views
         self.register_blueprint(view_czml, url_prefix=f"{api_prefix}/czml")
         self.register_blueprint(view_groundstation, url_prefix=f"{api_prefix}/gs")

backend/cesium_api/views/tiles.py

@@ -7,11 +7,18 @@
 
 @view_tiles.route("/<int:zoom>/<int:x>/<int:y>.png")
 def get_tile(zoom: int, x: int, y: int):
-    data_dir = current_app.data_dir
-    tile_path = abspath(f"{data_dir}/tiles/{zoom}/{x}/{y}.png")
+
+    tiles_dir = getattr(current_app, "tiles_dir", "../geo-tiles/tiles")
+    tile_path = abspath(f"{tiles_dir}/tiles/{zoom}/{x}/{y}.png")
+    print(f"[TILE DEBUG] Tile path being served: {tile_path}")
+
+    #tile_path = abspath(f"{data_dir}/tiles/{zoom}/{x}/{y}.png")
+    #print(f"[TILE DEBUG] Tile path being served: {tile_path}")
+
+
 
     try:
-        exists(tile_path)
+        #exists(tile_path)
         return send_file(tile_path)
     except FileNotFoundError:
         return {"err": f"No such tile for {x} by {y} at a zoom of {zoom}"}, 404

frontend-next-backup/.gitignore

@@ -0,0 +1,94 @@
+# Custom
+out
+
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# IDEs and editors
+.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+.sass-cache
+connect.lock
+typings
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env*
+
+# next.js build output
+.next
+
+# Lerna
+lerna-debug.log
+
+# System Files
+.DS_Store
+Thumbs.db

frontend-next-backup/README.md

@@ -0,0 +1,29 @@
+### Cesium Front-End Application
+
+```bash
+cd frontend
+```
+
+Install `nodejs` and `yarn` for your system
+
+```bash
+sudo apt install nodejs yarnpkg
+```
+
+Install JavaScript dependencies
+
+```bash
+yarn install
+```
+
+Start the app
+
+```bash
+yarn dev
+```
+
+Goto `localhost3000` in a web browser
+
+[GDAL]:https//gdal.org
+[GDAL Download]:https//gdal.org/download.html
+[CesiumJS]:https//github.com/CesiumGS/cesium

frontend/components/Cesium.jsx → frontend-next-backup/components/Cesium.jsx

@@ -11,7 +11,7 @@ import {
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 const imageryProvider = new UrlTemplateImageryProvider({
-  url: BACKEND_REST_API + '/tiles/{z}/{x}/{reverseY}.png',
+  url: BACKEND_REST_API + '/tiles/{z}/{x}/{y}.png',
   tilingScheme: new GeographicTilingScheme(),
   maximumLevel: 5,
 });

frontend/components/Constants.jsx → frontend-next-backup/components/Constants.jsx

@@ -1,4 +1,5 @@
 // Shared constants
+const REST_API = process.env.NEXT_PUBLIC_API_BASE_URL;
 export const BACKEND_REST_API = REST_API || `https://cesium-api.uniclogs.org`;
 console.log(`[ENV]: Using Rest API at ${BACKEND_REST_API}`)
 
@@ -10,4 +11,4 @@ export const CESIUM_CREDIT = '<a href="https://cesium.com/" target="_blank"><img
 // PSU coordinates
 export const HOME_LAT_DEG = 45.523064;
 export const HOME_LONG_DEG = -122.676483;
-export const HOME_ALT_M = 25000000.0;
+export const HOME_ALT_M = 25000000.0;

frontend/components/UpcommingPassesModal.jsx → frontend-next-backup/components/UpcommingPassesModal.jsx

@@ -23,9 +23,10 @@ function UpcommingPassesModal({ show, handleClose }) {
   const [passes, setPasses] = useState(PASSES_DEFAULT);
 
   useEffect(() => {
-    fetch(`${BACKEND_REST_API}/passes/${gs}/${sat}`)
+        fetch(`${BACKEND_REST_API}/passes/${gs}/${sat}`)
       .then(response => response.json())
       .then(data => {
+
         setPasses(data);
       });
   }, []);

frontend/docker-compose.yaml → frontend-next-backup/docker-compose.yaml

@@ -4,4 +4,6 @@ services:
     build:
       context: .
     ports:
-      - '3000:3000'
+      - '7008:3000'
+    env_file:
+      - .env.production

frontend-next-backup/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "uniclogs-cesium",
+  "version": "1.0.2",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "postinstall": "symlink-dir node_modules/cesium/Build/Cesium public/cesium"
+  },
+  "dependencies": {
+    "bootstrap": "5.3.3",
+    "cesium": "1.124.0",
+    "next": "15.2.3",
+    "prop-types": "^15.8.1",
+    "react": "18.3.1",
+    "react-bootstrap": "2.10.6",
+    "react-dom": "18.3.1",
+    "resium": "^1.18.2"
+  },
+  "devDependencies": {
+    "eslint": "^9.16.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-next": "15.0.3",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "symlink-dir": "^6.0.3"
+  }
+}