Upgrade user interface to use Vite

.github/workflows/build-push.yml

@@ -0,0 +1,27 @@
+name: Build Corelle API image
+
+permissions: read-all
+
+on:
+  push:
+    branches: ["main"]
+    tags:
+      - "v*.*.*" # glob for semver tags (including prereleases)
+  pull_request:
+    branches: [main]
+
+jobs:
+  build-api-image:
+    uses: UW-Macrostrat/build-push/.github/workflows/build-push.yaml@main
+    secrets: inherit
+    with:
+      context: .
+      image: "hub.opensciencegrid.org/macrostrat/corelle-api"
+
+  build-frontend-image:
+    uses: UW-Macrostrat/build-push/.github/workflows/build-push.yaml@main
+    secrets: inherit
+    with:
+      context: ./frontend
+      file: ./frontend/Dockerfile
+      image: "hub.opensciencegrid.org/macrostrat/corelle-frontend"

frontend/.dockerignore

@@ -1,3 +1,12 @@
 .cache
-dist
-node_modules
+.yarn/cache
+.yarn/unplugged
+.yarn/install-state.gz
+.pnp.cjs
+.pnp.loader.mjs
+.env
+.env.local
+packages/demo-app/dist
+packages/demo-app/node_modules
+Dockerfile
+scripts

frontend/.yarnrc.yml

@@ -1,2 +1,5 @@
 pnpFallbackMode: all
+
 pnpMode: loose
+
+yarnPath: .yarn/releases/yarn-4.9.4.cjs

frontend/CHANGELOG.md

@@ -0,0 +1,4 @@
+## [2025-09-02]
+
+- Upgrade the demo app to compile using Vite
+- Pull in environment variables at runtime.

frontend/Dockerfile

@@ -1,10 +1,51 @@
-FROM node:12
+FROM node:20 AS builder
 
-WORKDIR /app/
-COPY package.json /app/
+# The following build sequence is adapted from the Macrostrat web repository
+# Install rsync
+RUN apt-get update && apt-get install -y rsync
 
-RUN npm install -g parcel-bundler && npm install
+ENV NODE_ENV=production
 
-COPY ./ /app/
+WORKDIR /usr/src/app
+COPY .yarn/releases .yarn/releases
+COPY .yarnrc.yml yarn.lock package.json ./
+
+# Copy only the elements needed for a Yarn install to take advantage of
+# Docker's layer caching
+# This is complex because we are working with multiple workspaces.
+
+# Copy package JSON files with wildcards
+# This scoops up all package.json files in the directory and subdirectories
+# to deal with Yarn workspaces. However it requires BUILDKIT to be enabled,
+# which is done by setting DOCKER_BUILDKIT=1 in the environment
+RUN --mount=type=bind,target=/docker-context \
+    cd /docker-context/; \
+    find . -name "package.json" -mindepth 0 -maxdepth 5 -exec cp --parents "{}" /usr/src/app/ \;
+
+# Load the cache from the previous build
+RUN --mount=type=cache,target=/yarn-cache \
+     rsync -a /yarn-cache/ .yarn/cache/ \
+  && yarn install --immutable \
+  && rsync -a .yarn/cache/ /yarn-cache
+
+# # Remove rsync
+RUN apt-get remove -y rsync
+
+COPY . ./
+
+ENV NODE_ENV=development
+
+RUN yarn run build:demo-app
+
+FROM caddy:2.10-alpine AS production
+
+COPY --from=builder /usr/src/app/packages/demo-app/dist /usr/share/caddy
+
+WORKDIR /usr/share/caddy
+
+COPY docker-command.sh /run/docker-command.sh
+
+EXPOSE 80
+
+CMD ["/run/docker-command.sh"]
 
-CMD parcel build -d /app/dist --public-url './' index.html

frontend/docker-command.sh

@@ -0,0 +1,12 @@
+#!/bin/sh
+
+# If CORELLE_API_URL is set in the environment, substitute it in index.html
+if [ -n "$CORELLE_API_URL" ]; then
+  echo "Substituting CORELLE_API_URL in index.html"
+  sed -i "s|window.corelleAPIBaseURL = null|window.corelleAPIBaseURL = '$CORELLE_API_URL'|g" index.html
+else
+  echo "CORELLE_API_URL is not set, using default value."
+fi
+
+# Start caddy
+caddy run --config /etc/caddy/Caddyfile --adapter caddyfile

frontend/package.json

@@ -4,16 +4,15 @@
   "scripts": {
     "dev": "yarn workspace @corelle/demo-app run dev",
     "build": "yarn workspaces foreach -A -p run build",
-    "publish": "scripts/publish"
+    "publish": "scripts/publish",
+    "build:demo-app": "yarn workspace @corelle/demo-app run build"
   },
   "author": "Daven Quinn",
   "workspaces": [
     "packages/*"
   ],
-  "packageManager": "yarn@4.6.0",
+  "packageManager": "yarn@4.9.4",
   "devDependencies": {
-    "@parcel/packager-ts": "2.13.3",
-    "@parcel/transformer-typescript-types": "2.13.3",
     "prettier": "^3.5.1",
     "typescript": "^5.7.3"
   }

frontend/packages/demo-app/index.html

@@ -1,9 +1,15 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8">
     <title>Corelle plate rotations service</title>
+    <link rel="stylesheet" href="./src/app.sass">
   </head>
   <body>
+    <script type="text/javascript">
+      // Script to inject environment variables at runtime
+      window.corelleAPIBaseURL = null;
+    </script>
     <div id="root"></div>
     <script type="module" src="./src/index.ts"></script>
   </body>

frontend/packages/demo-app/package.json

@@ -6,23 +6,22 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite ."
+    "dev": "vite .",
+    "build": "vite build"
   },
   "author": "Daven Quinn",
   "license": "ISC",
   "devDependencies": {
     "sass-embedded": "^1.85.0",
-    "stylus": "^0.54.5",
     "vite": "^6.1.0"
   },
   "prettier": {},
   "dependencies": {
     "@blueprintjs/core": "^5",
     "@corelle/svg-map-layers": "workspace:^",
     "@macrostrat/hyper": "^3.0.6",
-    "@macrostrat/svg-map-components": "^1.0.2",
-    "@macrostrat/ui-components": "^4.1.0",
-    "d3-geo": "^3.1.1",
+    "@macrostrat/svg-map-components": "^1.0.5",
+    "@macrostrat/ui-components": "^4.4.6",
     "react": "^18",
     "react-dom": "^18",
     "react-fps-stats": "^0.3.1"

frontend/packages/demo-app/src/app.sass

@@ -0,0 +1,94 @@
+@use "sass:color" as color
+
+html, body
+  margin: 0
+  width: 100vw
+  height: 100vh
+  position: relative
+
+.control-panel
+  margin: 1em
+  position: absolute
+  top: 1em
+  right: 1em
+  width: 20em
+  background: white
+  padding: 1em
+  h1
+    margin-top: 0
+  border-radius: 6px
+  box-shadow: 0 0 0 1px rgba(16,22,26,0.1), 0 0 0 rgba(16,22,26,0), 0 1px 1px rgba(16,22,26,0.2)
+
+  :global(.bp3-form-group)
+      justify-content: space-between
+
+  .time-input input
+    font-size: 24px !important
+    font-weight: bold
+    color: #444
+
+  .unit-label
+    height: 40px
+    line-height: 40px
+    font-size: 24px
+    padding-right: 100px
+    color: #888
+
+.header
+  display: flex
+  flex-direction: row
+  h1
+    margin-right: 1em
+    a
+      color: black
+  p
+    color: #aaa
+    font-style: italic
+
+
+.world-map
+  width: 100%
+  height: 100vh
+  cursor: move
+
+$plate_color: #888
+
+g.plates path
+  fill: color.adjust($plate_color, $alpha: 0.2)
+  stroke: color.adjust($plate_color, $alpha: 0.8)
+  stroke-width: 1px
+  outline: none
+  &:hover
+    fill: color.adjust($plate_color, $alpha: 0.5)
+    stroke-width: 1px
+    outline: none
+
+$land_color: #E9FCEA
+
+g.ne_110m_land
+  path
+    fill: $land_color
+    stroke: color.adjust($land_color, $lightness: -10%)
+    stroke-width: 1px
+
+.credits
+  margin-bottom: 0
+  font-style: italic
+  text-align: right
+  color: #888
+  a
+    color: inherit
+    text-decoration: underline
+
+:global(.drag-overlay) rect
+  fill: transparent
+
+:global(.graticule)
+  fill: none
+  stroke: #aaa
+  stroke-width: 1px
+  stroke-dasharray: 2,2
+
+canvas
+  width: 100%
+  height: 100%

frontend/packages/demo-app/src/app.ts

@@ -13,8 +13,6 @@ import {
   getQueryString,
 } from "@macrostrat/ui-components";
 
-import "./app.styl";
-
 const qs = getQueryString();
 
 const initialState = {
@@ -31,11 +29,11 @@ function App(props) {
 
   const setTime = useCallback(
     (time) => setState({ ...state, time }),
-    [setState],
+    [setState, state],
   );
   const setModel = useCallback(
     (model) => setState({ ...state, model }),
-    [setState],
+    [setState, state],
   );
 
   const { baseURL } = useContext(APIContext);