@nsidc/snow-today-webapp 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# v0.3.0 (2022-08-22)
+
+* Add automated deployment script
+
+
+# v0.2.0 (2022-08-22)
+
+* Use QA data server URL
+
+
+# v0.1.1 (2022-08-22)
+
+* Fix bug with data "leaking" between variables in the plot.
+
+
+# v0.1.0 (2022-08-18)
+
+* Initial release

package/deploy/deploy

@@ -0,0 +1,34 @@
+#!/bin/bash
+set -euo pipefail
+
+ENVIRONMENT="$1"
+
+THIS_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+REPO_ROOT_DIR="$(dirname "$THIS_DIR")"
+
+VERSION_FILE="$REPO_ROOT_DIR/package.json"
+CANONICAL_VERSION="$(cat "$VERSION_FILE" | jq -r .version)"
+
+source /etc/profile.d/envvars.sh
+
+cd "$REPO_ROOT_DIR"
+
+if [ "$ENVIRONMENT" = "integration" ]; then
+    APP_VERSION="latest"
+    version_desc="latest"
+else
+    APP_VERSION="$CANONICAL_VERSION"
+    version_desc="production"
+fi
+
+echo "Using $version_desc versions in $ENVIRONMENT..."
+echo "APP_VERSION=$APP_VERSION"
+export APP_VERSION
+
+# Replace the current app
+docker-compose pull
+docker-compose down --remove-orphans
+docker-compose up -d
+
+# Cleanup
+docker system prune -af

package/doc/releasing.md

@@ -0,0 +1,14 @@
+# Releasing
+
+The `latest` image on Dockerhub will be updated with each commit to `main`.
+
+To release a new tagged image to DockerHub and a new version to NPM:
+
+* Update version in `package.json`.
+    * Run `npm i` to update `package-lock.json`.
+* Update `CHANGELOG.md` following existing convention.
+* Commit
+* Merge to main if necessary
+* Tag the main branch: `git tag vX.Y.Z`
+* Push the tag to GitHub to trigger automated releases of Docker Images and NPM bundle:
+  `git push origin vX.Y.Z`

package/docker-compose.live.yml

@@ -3,6 +3,6 @@ version: '3.4'
 services:
   webapp:
     ports:
-      - "80:80"
-      - "443:443"
+      - "8080:80"
+      - "4433:443"
     restart: always

package/docker-compose.yml

@@ -5,17 +5,7 @@ version: '3.4'
 services:
   webapp:
     image: "nsidc/snow-today-webapp:${APP_VERSION:-latest}"
-    # TODO: Pull, don't build in non-dev
-    build: .
     logging:
       options:
         max-size: "10m"
         max-file: "10"
-
-  data-server:
-    image: "nginx:1.23"
-    volumes:
-      - "/share/apps/snow-today:/usr/share/nginx/html:ro"
-      - "./nginx/default.dataserver.conf:/etc/nginx/conf.d/default.conf:ro"
-    ports:
-      - "8000:80"

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "Snow Today Webapp",
   "name": "@nsidc/snow-today-webapp",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "private": false,
   "scripts": {
     "build": "webpack --mode=production --node-env=production",
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@fontsource/roboto": "^4.5.7",
-    "@tanstack/react-query": "^4.0.10",
+    "@tanstack/react-query": "^4.2.1",
     "colormap": "^2.3.2",
     "highcharts": "^10.2.0",
     "highcharts-react-official": "^3.1.0",

package/src/components/LinePlot.tsx

@@ -12,6 +12,7 @@ import selectedRegionObjectAtom from '../clientState/selectedRegionObject';
 import selectedSatelliteVariableAtom from '../clientState/selectedSatelliteVariable';
 import selectedSatelliteVariableObjectAtom from '../clientState/selectedSatelliteVariableObject';
 import usePlotDataQuery from '../serverState/plotData';
+import {IPlotData} from '../types/query/plotData';
 
 HighchartsMore(Highcharts);
 
@@ -35,7 +36,7 @@ const LinePlot: React.FC = () => {
       <div className={'card centered-card-text'}><p>Loading...</p></div>
     );
   } else if (plotDataQuery.isError) {
-    console.debug(`Error!: ${plotDataQuery.error as string}`);
+    console.debug(`Error!: ${String(plotDataQuery.error)}`);
     const regionStr = selectedSatelliteVariableObject.longname;
     const varStr = selectedRegionObject.longname;
     return (
@@ -63,18 +64,38 @@ const LinePlot: React.FC = () => {
   const chartTitle = `${regionLongname} - ${varLongname}`;
   const yAxisTitle = `${varLongname} (${varUnit})`;
 
+  // WARNING: It is _critical_ that the data is copied before passing to
+  // Highcharts. Highcharts will mutate the arrays, and we don't want state to
+  // be mutated!!!
+  type IPlotDataMutable = {
+    [Property in keyof IPlotData]: number[];
+  }
+  // TODO: Is there a programmatic way to do this object transformation
+  // *WITHOUT* type casting? This is not friendly to maintain. Easy to
+  // make mistakes with values, but Typescript protects us from messing up
+  // structure (keys and types of values).
+  const data: IPlotDataMutable = {
+    day_of_water_year: [...plotDataQuery.data['day_of_water_year']],
+    max: [...plotDataQuery.data['max']],
+    median: [...plotDataQuery.data['median']],
+    min: [...plotDataQuery.data['min']],
+    prc25: [...plotDataQuery.data['prc25']],
+    prc75: [...plotDataQuery.data['prc75']],
+    year_to_date: [...plotDataQuery.data['year_to_date']],
+  };
+
   const chartData: Highcharts.SeriesOptionsType[] = [
     {
       name: 'Year to date',
       type: 'line',
-      data: plotDataQuery.data['year_to_date'],
+      data: data['year_to_date'],
       zIndex: 99,
       // color: '#000000',
     },
     {
       name: 'Median',
       type: 'line',
-      data: plotDataQuery.data['median'],
+      data: data['median'],
       zIndex: 10,
       color: '#8d8d8d',
       dashStyle: 'Dash',
@@ -82,7 +103,7 @@ const LinePlot: React.FC = () => {
     {
       name: 'Maximum',
       type: 'line',
-      data: plotDataQuery.data['max'],
+      data: data['max'],
       zIndex: 9,
       color: '#666666',
       dashStyle: 'ShortDashDot',
@@ -90,7 +111,7 @@ const LinePlot: React.FC = () => {
     {
       name: 'Minimum',
       type: 'line',
-      data: plotDataQuery.data['min'],
+      data: data['min'],
       zIndex: 8,
       color: '#666666',
       dashStyle: 'ShortDot',
@@ -98,8 +119,8 @@ const LinePlot: React.FC = () => {
     {
       name: 'Interquartile Range',
       type: 'arearange',
-      data: plotDataQuery.data['prc25'].map((low, index) => {
-        return [low, plotDataQuery.data['prc75'][index]];
+      data: data['prc25'].map((low, index) => {
+        return [low, data['prc75'][index]];
       }),
       zIndex: 0,
       lineWidth: 0,

package/src/constants/dataServer.ts

@@ -1,6 +1,6 @@
 // TODO: Should we just develop an API that serves the correct TIF or GeoJSON
 // (or other data)?
-export const dataServerUrl = 'http://integration.snow-today.apps.int.nsidc.org:8000'
+export const dataServerUrl = 'http://qa.snow-today.apps.int.nsidc.org'
 
 // Information about regions:
 export const regionsIndexUrl = `${dataServerUrl}/regions.json`;

package/src/serverState/plotData.ts

@@ -20,6 +20,7 @@ const usePlotDataQuery = (
   {
     enabled: !!regionId && !!variableId,
     // Never re-fetch this data!
+    cacheTime: Infinity,
     staleTime: Infinity,
     // Don't retry failed requests; in this case there is no plot!
     retry: false,

package/src/serverState/regionShape.ts

@@ -16,6 +16,7 @@ const useRegionShape = (regionShapeFilePath: string | undefined) => useQuery<obj
   {
     enabled: !!regionShapeFilePath,
     // Never re-fetch this data!
+    cacheTime: Infinity,
     staleTime: Infinity,
   },
 );

package/src/serverState/regionsIndex.ts

@@ -19,6 +19,7 @@ const useRegionsIndex = (
       // or the state will keep getting re-set...
       onSuccess: (data: IRegionIndex) => stateSetter(Object.keys(data)[0]),
       // Never re-fetch this data!
+      cacheTime: Infinity,
       staleTime: Infinity,
     }
   );

package/src/serverState/variablesIndex.ts

@@ -19,6 +19,7 @@ const useVariablesIndex = (
       // or the state will keep getting re-set...
       onSuccess: (data: ISatelliteVariableIndex) => stateSetter(Object.keys(data)[0]),
       // Never re-fetch this data!
+      cacheTime: Infinity,
       staleTime: Infinity,
     }
   );

package/src/types/query/plotData.ts

@@ -1,9 +1,9 @@
 export interface IPlotData {
-  day_of_water_year: number[];
-  max: number[];
-  median: number[];
-  min: number[];
-  prc25: number[];
-  prc75: number[];
-  year_to_date: number[];
+  readonly day_of_water_year: readonly number[];
+  readonly max: readonly number[];
+  readonly median: readonly number[];
+  readonly min: readonly number[];
+  readonly prc25: readonly number[];
+  readonly prc75: readonly number[];
+  readonly year_to_date: readonly number[];
 }

package/webpack.config.js

@@ -63,6 +63,9 @@ const config = {
     resolve: {
         extensions: ['.tsx', '.ts', '.jsx', '.js', '...'],
     },
+    stats: {
+      errorDetails: true,
+    },
 };
 
 module.exports = () => {

package/nginx/default.dataserver.conf

@@ -1,25 +0,0 @@
-server {
-    listen 80;
-
-    server_name localhost;
-
-    real_ip_header X-Forwarded-For;
-    real_ip_recursive on;
-
-    location / {
-        root   /usr/share/nginx/html;
-        autoindex on;
-
-        add_header 'Access-Control-Allow-Origin' '*';
-
-        # Hacky support for CORS pre-flight OPTIONS requests
-        if ($request_method = OPTIONS) {
-            add_header 'Access-Control-Allow-Origin' '*';
-            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
-            add_header 'Access-Control-Allow-Headers' 'Range, Origin, X-Requested-With, Content-Type, Accept';
-            add_header 'Content-Type' 'text/plain';
-            add_header 'Content-Length' '0';
-            return 204;
-        }
-    }
-}