@nsidc/snow-today-webapp 0.1.0

package/.circleci/config.yml

@@ -0,0 +1,112 @@
+version: 2
+
+setup: &setup
+  working_directory: ~/snow-today-webapp
+
+jobs:
+  test-and-bundle:
+    <<: *setup
+    docker:
+      - image: cimg/node:18.7
+    steps:
+      - checkout
+      - run:
+          name: Install dependencies
+          command: npm ci
+      - run:
+          name: Lint
+          command: npm run lint
+      - run:
+          name: Test
+          command: npm run test
+      - run:
+          name: Build Bundle
+          command: npm run build
+      - persist_to_workspace:
+          root: ~/snow-today-webapp
+          paths: .
+
+  publish-bundle-to-npm:
+    <<: *setup
+    docker:
+      - image: cimg/node:18.7
+    steps:
+      - attach_workspace:
+          at: ~/snow-today-webapp
+      - run:
+          name: Publish NPM Package
+          command: |
+            echo "//registry.npmjs.org/:_authToken=$NPM_DEPLOY_TOKEN" > .npmrc
+            npm publish --access public
+
+
+  build-docker-image-and-sometimes-publish:
+    <<: *setup
+    docker:
+      - image: docker:20.10.3-git
+    steps:
+      - checkout
+      # `setup_remote_docker` defaults to 17.09.0 which doesn't work with the
+      # node image we're trying to build...
+      #   https://support.circleci.com/hc/en-us/articles/360050934711
+      #   https://discuss.circleci.com/t/docker-build-fails-with-nonsensical-eperm-operation-not-permitted-copyfile/37364
+      - setup_remote_docker:
+          version: 20.10.2
+      - run:
+          name: Build and push Docker image
+          command: |
+            IMAGE_NAME="nsidc/snow-today-webapp"
+
+            echo "\$CIRCLE_TAG: ${CIRCLE_TAG}"
+            echo "\$CIRCLE_BRANCH: ${CIRCLE_BRANCH}"
+
+            if [[ "${CIRCLE_TAG}" ]]; then
+              TAG=${CIRCLE_TAG}
+            elif [[ "${CIRCLE_BRANCH}" = "main" ]]; then
+              TAG="latest"
+            else
+              # We don't really want images named after tags cluttering up our
+              # DH repo, so we use workflow filters to prevent this job from
+              # being triggered on a branch. Change the filters if we change
+              # our mind.
+              TAG=${CIRCLE_BRANCH}
+            fi
+            echo "\$TAG: ${TAG}"
+
+
+            DOCKER_IMAGE="${IMAGE_NAME}:${TAG}"
+            docker build -t ${DOCKER_IMAGE} .
+            echo "Built: ${DOCKER_IMAGE}"
+
+            docker login -u ${DOCKER_USER} -p ${DOCKER_PASS}
+            docker push "${DOCKER_IMAGE}"
+
+workflows:
+  version: 2
+
+  build:
+    jobs:
+      - test-and-bundle:
+          filters:
+            tags:
+              only: /.*/
+
+      - publish-bundle-to-npm:
+          context: org-global
+          requires:
+            - test-and-bundle
+          filters:
+            branches:
+              ignore: /.*/
+            tags:
+              only: /^v\d+\.\d+\.\d+([\-\.\w]*)?$/
+
+      - build-docker-image-and-sometimes-publish:
+          context: org-global
+          requires:
+            - test-and-bundle
+          filters:
+            branches:
+              only: main
+            tags:
+              only: /^v[0-9]+(\.[0-9]+)*(\.[\-a-zA-Z0-9]+)?$/

package/.dockerignore

@@ -0,0 +1,2 @@
+node_modules/
+tags

package/.eslintrc.js

@@ -0,0 +1,43 @@
+module.exports = {
+  "parser": "@typescript-eslint/parser",
+  // The below config enables type-aware linting, but significantly slows down
+  // eslint.
+  //     https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/README.md#configuration
+  "parserOptions": {
+    "tsconfigRootDir": __dirname,
+    "project": ["./tsconfig.json"],
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "react-hooks",
+  ],
+  "extends": [
+    "react-app",
+    "react-app/jest",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+  ],
+  "rules": {
+    "eqeqeq": [
+      "error",
+    ],
+    "react/function-component-definition": [
+      "error",
+      {
+        "namedComponents": "arrow-function",
+        "unnamedComponents": "arrow-function",
+      },
+    ],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "@typescript-eslint/ban-ts-comment": [
+      "warn",
+      {
+        "ts-ignore": "allow-with-description",
+      },
+    ],
+    "@typescript-eslint/no-explicit-any": [
+      "warn",
+    ]
+  },
+}

package/.stylelintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": ["stylelint-config-standard"],
+  "customSyntax": "postcss-less",
+  "rules": {
+  }
+}

package/CODE_OF_CONDUCT.md

@@ -0,0 +1,76 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at nsidc@nsidc.org. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

package/Dockerfile

@@ -0,0 +1,40 @@
+FROM node:18-alpine AS builder
+
+WORKDIR /app
+
+COPY package* ./
+# Install from lockfile
+RUN npm ci
+
+# NOTE: _DO NOT_ copy node_modules, that would overwrite the install we just
+# did.
+# COPY scripts ./scripts
+COPY src ./src
+COPY index.html ./
+COPY webpack.config.js tsconfig.json .eslintrc.js .stylelintrc.json ./
+
+ARG env="production"
+RUN if [ "$env" = "production" ]; then \
+  npm run build; \
+fi
+
+# These lines are only required to use this stage of the build to run a dev
+# server (see docker-compose.dev.yml).
+EXPOSE 3000
+CMD ["npm", "run", "serve"]
+
+
+FROM nginx:1.23-alpine AS server
+
+WORKDIR /usr/share/nginx/html
+COPY --from=builder /app/dist .
+
+# Make a self-signed SSL certificate
+RUN mkdir /cert
+COPY ./nginx/openssl.conf .
+RUN apk add openssl
+RUN openssl req -x509 -nodes -days 3650 -newkey rsa:2048 -config openssl.conf \
+    -keyout /cert/ssl.key -out /cert/ssl.crt
+
+COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
+COPY ./nginx/nginx.conf /etc/nginx/nginx.conf

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Regents of the University of Colorado
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice (if present) and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,60 @@
+# Snow Today Webapp
+
+![Snow Today screenshot](doc/_images/snow-today-screenshot.png)
+
+Enable users to browse daily snow variables in various regions (South-West US, maybe
+eventually High Mountain Asia).
+
+Depends on [Snow Today Webapp Server](https://github.com/nsidc/snow-today-webapp-server)
+to function.
+
+**WARNING: This software is currently in early development. The data required for the
+server component is not yet publicly exposed, so you should not expect this to work on
+your machine.**
+
+
+## Level of Support
+
+This repository is not actively supported by NSIDC but we welcome issue submissions and
+pull requests in order to foster community contribution.
+
+See the [LICENSE](LICENSE) for details on permissions and warranties. Please contact
+nsidc@nsidc.org for more information.
+
+
+## Requirements
+
+This package requires either Docker or the NPM environment described by `package.json`.
+
+
+## Installation
+
+```
+docker-compose build
+```
+
+
+## Usage
+
+```
+docker-compose up
+```
+
+
+## Troubleshooting
+
+*TODO*
+
+
+## License
+
+See [LICENSE](LICENSE).
+
+## Code of Conduct
+
+See [Code of Conduct](CODE_OF_CONDUCT.md).
+
+## Credit
+
+This software was developed by the National Snow and Ice Data Center with funding from
+multiple sources.

package/doc/TODO.md

@@ -0,0 +1,14 @@
+# TODO
+
+## Names
+
+* RasterVariable -> SatelliteDataVariable ?
+
+## Versioning
+
+* Version this app!
+* CHANGELOG
+* How to keep track of compatibility between the server (data schemas) and this app
+  (query types)? Can we write a utility that analyzes jsonschema files with typescript
+  type definitions for compatibility? Maybe we could use `typescript-json-schema` to
+  convert the Typescript interfaces to JSON schemas and diff?

package/doc/architecture.md

@@ -0,0 +1,24 @@
+# Architecture
+
+This application has a client which runs in a user's browser that is responsible for
+fetching data and visualizing it, and a server which is responsible for serving up
+static data files generated in combination by code in this repository and external code
+running on external systems.
+
+
+## Client
+
+This repository contains a Typescript codebase for visualizing various data stored on a
+server.
+
+The client uses OpenLayers to display geospatial data, and ??? to display plots. It uses
+`react-query` to manage many communications with the server, but for fetching
+Cloud-Optimized GeoTIFFs, OpenLayers directly communicates with the server.
+
+
+## Server
+
+The server is required for the client to function. The server is a simple HTTP server,
+e.g. NGINX or Apache, serving static data files which must be structured in a specific
+layout. See the [Snow Today Webapp Server
+repository](https://github.com/nsidc/snow-today-webapp-server) for details.

package/doc/development.md

@@ -0,0 +1,34 @@
+# Development
+
+To use the development configuration, create a compose override file:
+
+```
+ln -s docker-compose.dev.yml docker-compose.override.yml
+```
+
+
+## State management
+
+This app uses Recoil for state management.
+
+Recoil freezes all objects used for state, so do not use objects that are expected to be
+mutated in state, e.g. Layer objects. They are OK in derived state (with
+`allowDangerousMutations`), but not state that will be directly updated.
+
+
+## Cloud-Optimized GeoTIFFs
+
+The raster data is stored in COGs accessed by HTTP.
+
+The COGs _must_ be in the same projection as the OpenLayers map in order to properly
+display. A script `scripts/make_cogs.sh` can prepare the files correctly.
+
+
+## TODO
+
+### GeoTIFF Hosting
+
+How are we going to deploy the server hosting the GeoTIFFs?
+
+What's the simplest way to access those images in dev? Should we break that part into a
+different repo?

package/docker-compose.dev.yml

@@ -0,0 +1,21 @@
+version: '3.4'
+
+services:
+  webapp:
+    build:
+      context: "."
+      target: "builder"
+      args:
+        - "env=dev"
+    image: "nsidc/snow-today-webapp:dev"
+    restart: "on-failure"
+    # Useful to skip linting errors and expose compiler errors:
+    # command: 'npm run serve:nolint'
+    ports:
+      # Webpack dev server and websocket for hot reload:
+      - "8080:8080"
+    volumes:
+      - "./src:/app/src:ro"
+      - "./index.html:/app/index.html:ro"
+      - "./public:/app/public:ro"
+      - "./.eslintrc.js:/app/.eslintrc.js:ro"

package/docker-compose.live.yml

@@ -0,0 +1,8 @@
+version: '3.4'
+
+services:
+  webapp:
+    ports:
+      - "80:80"
+      - "443:443"
+    restart: always

package/docker-compose.yml

@@ -0,0 +1,21 @@
+# WARNING: This compose file alone will not yield a working stack. It is
+# intended for use with an override (included).
+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/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+
+    <head>
+        <meta charset="utf-8" />
+        <title>Snow Today</title>
+    </head>
+
+    <body>
+      <div id="root"></div>
+    </body>
+    
+</html>

package/jest/README.md

@@ -0,0 +1,8 @@
+Some Jest config (e.g. transpiling with Babel) bootstrapped from `react-scripts` ([MIT
+License](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/LICENSE).
+
+# TODO
+
+* Consider using the documented `__mocks__` method to handle static assets
+  (https://jestjs.io/docs/webpack) instead of the `react-scripts` way. Everest-UI uses
+  the Jest-documented way.

package/jest/scripts/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

package/jest/scripts/test.js

@@ -0,0 +1,19 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'test';
+process.env.NODE_ENV = 'test';
+process.env.PUBLIC_URL = '';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+const jest = require('jest');
+const execSync = require('child_process').execSync;
+let argv = process.argv.slice(2);
+
+jest.run(argv);

package/jest/transforms/babelTransform.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const babelJest = require('babel-jest').default;
+
+const hasJsxRuntime = (() => {
+  if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
+    return false;
+  }
+
+  try {
+    require.resolve('react/jsx-runtime');
+    return true;
+  } catch (e) {
+    return false;
+  }
+})();
+
+module.exports = babelJest.createTransformer({
+  presets: [
+    [
+      require.resolve('babel-preset-react-app'),
+      {
+        runtime: hasJsxRuntime ? 'automatic' : 'classic',
+      },
+    ],
+  ],
+  babelrc: false,
+  configFile: false,
+});

package/jest/transforms/cssTransform.js

@@ -0,0 +1,14 @@
+'use strict';
+
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process() {
+    return {code: 'module.exports = {};'};
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return 'cssTransform';
+  },
+};

package/jest/transforms/fileTransform.js

@@ -0,0 +1,42 @@
+'use strict';
+
+const path = require('path');
+const camelcase = require('camelcase');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process(src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename));
+
+    if (filename.match(/\.svg$/)) {
+      // Based on how SVGR generates a component name:
+      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
+      const pascalCaseFilename = camelcase(path.parse(filename).name, {
+        pascalCase: true,
+      });
+      const componentName = `Svg${pascalCaseFilename}`;
+      return {
+        code: `const React = require('react');
+        module.exports = {
+          __esModule: true,
+          default: ${assetFilename},
+          ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
+            return {
+              $$typeof: Symbol.for('react.element'),
+              type: 'svg',
+              ref: ref,
+              key: null,
+              props: Object.assign({}, props, {
+                children: ${assetFilename}
+              })
+            };
+          }),
+        };`
+      };
+    }
+
+    return {code: `module.exports = ${assetFilename};`};
+  },
+};

package/nginx/default.conf

@@ -0,0 +1,16 @@
+server {
+    listen 80;
+    listen 443 ssl;
+    ssl_certificate /cert/ssl.crt;
+    ssl_certificate_key /cert/ssl.key;
+
+    server_name localhost;
+
+    real_ip_header X-Forwarded-For;
+    real_ip_recursive on;
+
+    location / {
+        root   /usr/share/nginx/html;
+        autoindex on;
+    }
+}