Merge pull request #197 from openskope/post-geojson

feat: allow geojson POSTs to select area page

app/components/dataset/TimeSeriesPlot.vue

@@ -172,6 +172,15 @@
       </v-toolbar>
       <!-- time series plot -->
       <client-only placeholder="Loading...">
+        <template v-if="timeSeriesRequestStatus.status !== 'success'">
+          <v-alert
+            v-for="(message, index) in timeSeriesRequestStatus.messages"
+            :key="index"
+            :type="message.type"
+          >
+            {{ message.value }}
+          </v-alert>
+        </template>
         <Plotly
           ref="plot"
           class="time-series"

app/nuxt.config.js

@@ -95,29 +95,6 @@ module.exports = {
     dsn: "https://79be8c27ac14446e8af51b6d5f3dc90f@sentry.comses.net/5",
   },
 
-  /*
-   ** use bell auth configuration instead: https://github.com/hapijs/bell
-   */
-  auth: {
-    keys: {
-      GITHUB_CLIENT_ID: process.env.GITHUB_CLIENT_ID || "",
-      GITHUB_CLIENT_SECRET: process.env.GITHUB_CLIENT_SECRET || "",
-      GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID || "",
-      GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET || "",
-    },
-    COOKIE_ENCRYPTION_PASSWORD: process.env.SECRET_KEY,
-    strategies: {
-      github: {
-        client_id: process.env.GITHUB_CLIENT_ID,
-        client_secret: process.env.GITHUB_CLIENT_SECRET,
-      },
-      google: {
-        client_id: process.env.GOOGLE_CLIENT_ID,
-        client_secret: process.env.GOOGLE_CLIENT_SECRET,
-      },
-    },
-  },
-
   /*
    ** process environment variables
    */

app/package.json

@@ -39,7 +39,7 @@
     "markdown-it-attrs": "^4.0.0",
     "markdown-it-div": "^1.1.0",
     "mathjs": "^9.3.2",
-    "nuxt": "^2.15.8",
+    "nuxt": "^2.17.0",
     "nuxt-property-decorator": "^2.9.1",
     "papaparse": "^5.3.1",
     "plotly.js": "^1.58.4",

app/pages/dataset/_id/index.vue

@@ -59,7 +59,23 @@ import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import SubHeader from "@/components/dataset/SubHeader.vue";
 import Map from "@/components/dataset/Map.vue";
 
-import { initializeDataset, clearGeoJson } from "@/store/actions";
+import { initializeDataset, saveGeoJson, clearGeoJson } from "@/store/actions";
+
+function getBody(request) {
+  const qs = require("querystring");
+  return new Promise((resolve) => {
+    const bodyArray = [];
+    let body;
+    request
+      .on("data", (chunk) => {
+        bodyArray.push(chunk);
+      })
+      .on("end", () => {
+        body = Buffer.concat(bodyArray).toString();
+        resolve(qs.parse(body));
+      });
+  });
+}
 
 @Component({
   layout: "DefaultLayout",
@@ -70,8 +86,8 @@ import { initializeDataset, clearGeoJson } from "@/store/actions";
   },
 })
 class SelectDatasetArea extends Vue {
-  stepNames = _.clone(this.$api().app.stepNames);
   shouldConfirmGeometry = true;
+  formPostGeoJson = "";
 
   get confirmGeometry() {
     return (
@@ -91,6 +107,10 @@ class SelectDatasetArea extends Vue {
     return this.metadata == null;
   }
 
+  get stepNames() {
+    return this.$api().app.stepNames;
+  }
+
   get currentStep() {
     return this.stepNames.findIndex((x) => x === this.$route.name);
   }
@@ -104,12 +124,6 @@ class SelectDatasetArea extends Vue {
     return this.$api().dataset.hasGeoJson;
   }
 
-  get selectedArea() {
-    return (this.$api().dataset.selectedAreaInSquareMeters / 1000000.0).toFixed(
-      2
-    );
-  }
-
   get visualizeLocation() {
     const id = this.$route.params.id;
     const variable = this.$api().dataset.variable.id;
@@ -143,6 +157,28 @@ class SelectDatasetArea extends Vue {
     }
   }
 
+  async asyncData({ req, res }) {
+    if (process.server) {
+      if (req.method === "POST") {
+        const postData = await getBody(req);
+        console.log(
+          "Received POST data, attempting to parse as geojson",
+          postData
+        );
+        if (postData) {
+          try {
+            const studyAreaGeoJson = JSON.parse(postData.studyArea);
+            return { formPostGeoJson: studyAreaGeoJson };
+          } catch (e) {
+            console.log("error parsing geojson: ", e);
+          }
+        }
+      } else {
+        console.log("not a post request");
+      }
+    }
+  }
+
   validate({ params }) {
     return /^\w+$/.test(params.id);
   }
@@ -154,7 +190,13 @@ class SelectDatasetArea extends Vue {
   }
 
   mapLoaded(value) {
-    this.shouldConfirmGeometry = this.hasValidStudyArea;
+    console.log("map loaded, form post geojson: ", this.formPostGeoJson);
+    if (this.formPostGeoJson) {
+      this.shouldConfirmGeometry = false;
+      saveGeoJson(this.$warehouse, this.$api(), this.formPostGeoJson);
+    } else {
+      this.shouldConfirmGeometry = this.hasValidStudyArea;
+    }
   }
 
   keepGeometry() {

app/pages/index.vue

@@ -74,8 +74,6 @@ class LandingPage extends Vue {
     api.dataset.clearTimeSeries();
     api.dataset.setMetadata(null);
   }
-
-  mounted() {}
 }
 export default LandingPage;
 </script>

app/server/index.js

@@ -1,8 +1,6 @@
 const { Server } = require("@hapi/hapi");
-const ApiRoutes = require("../api");
 const consola = require("consola");
 const HapiNuxt = require("@nuxtjs/hapi");
-const Bell = require("@hapi/bell");
 let config = require("../nuxt.config.js");
 
 const server = new Server({
@@ -12,31 +10,10 @@ const server = new Server({
 
 server
   .register([
-    {
-      plugin: Bell,
-    },
     {
       plugin: HapiNuxt,
     },
   ])
-  //  .then(() => {
-  //    server.auth.strategy('github', 'bell', {
-  //      provider: 'github',
-  //      password: config.auth.COOKIE_ENCRYPTION_PASSWORD,
-  //      clientId: config.auth.keys.GITHUB_CLIENT_ID,
-  //      clientSecret: config.auth.keys.GITHUB_CLIENT_SECRET,
-  //      isSecure: !config.dev,
-  //      location: 'https://skope.comses.net',
-  //    })
-  //    server.auth.strategy('google', 'bell', {
-  //      provider: 'google',
-  //      password: config.auth.COOKIE_ENCRYPTION_PASSWORD,
-  //      clientId: config.auth.keys.GOOGLE_CLIENT_ID,
-  //      clientSecret: config.auth.keys.GOOGLE_CLIENT_SECRET,
-  //      isSecure: !config.dev
-  //    })
-  //  })
-  .then(() => server.route(ApiRoutes))
   .then(() => server.start())
   .then(() =>
     consola.ready({

app/store/actions.js

@@ -90,15 +90,14 @@ const updateAnalysis = _.debounce(async function (api, data) {
 }, 300);
 
 export async function retrieveAnalysis(api, data) {
-  console.log("RETRIEVING ANALYSIS");
   if (!isValidRequestData(data)) {
     console.log(
       "Unable to retrieve analysis with invalid request data: ",
       data
     );
     return;
   }
-  // reload skope geometry + temporal range
+  // update dataset store's skope geometry + temporal range
   api.dataset.setGeoJson(data.selected_area);
   api.dataset.setTemporalRange([
     extractYear(data.time_range.gte),
@@ -148,9 +147,9 @@ export function saveGeoJson(warehouse, api, geoJson) {
   warehouse.set(geoJsonKey, geoJson);
   api.dataset.setGeoJson(geoJson);
   if (!_.isEmpty(api.analysis.requestData)) {
-    // FIXME: hack to prevent cached geojson
-    // should see if we can unify the dataset + analysis stores
-    // and make them more coherent to prevent this kind of thing
+    // FIXME: needed to prevent cached geojson from lingering in the analysis store
+    // should see if we can unify the dataset + analysis store apis
+    // and make them more coherent to reduce the need for this kind of manual updating
     api.analysis.setGeoJson(geoJson);
   }
 }

app/store/modules/analysis.js

@@ -18,6 +18,7 @@ class Analysis extends VuexModule {
   // requestData: see
   // https://api.openskope.org/redoc#operation/retrieve_timeseries_timeseries_post
   // for parameters + descriptions
+  // FIXME: requestData.selected_area should be synced with the dataset store's geoJson
   requestData = {};
   waitingForResponse = false;
   response = EMPTY_RESPONSE;
@@ -79,6 +80,7 @@ class Analysis extends VuexModule {
 
   @Mutation
   setGeoJson(geoJson) {
+    console.log("Setting analysis selected_area");
     this.requestData.selected_area = geoJson;
   }
 

app/store/modules/dataset.js

@@ -7,19 +7,17 @@ import _ from "lodash";
 
 const LOADING_STATUS = {
   status: "loading",
-  type: "info",
-  messages: [{ type: "info", value: "Loading time series data." }],
+  messages: [{ type: "warning", value: "Loading time series data." }],
 };
 const SUCCESS_STATUS = {
   status: "success",
-  type: "info",
   messages: [{ type: "info", value: "Success" }],
 };
 const TIMEOUT_STATUS = {
   status: "timeout",
   messages: [
     {
-      type: "warning",
+      type: "error",
       value: "Timeout exceeded, please try again with a smaller study area.",
     },
   ],
@@ -28,7 +26,7 @@ const NO_STUDY_AREA_STATUS = {
   status: "no-area",
   messages: [
     {
-      type: "warning",
+      type: "error",
       value: "Please enter a study area.",
     },
   ],
@@ -260,22 +258,14 @@ class Dataset extends VuexModule {
 
   @Mutation
   setTemporalRange(temporalRange) {
-    console.log(
-      "clamping temporal range ",
-      temporalRange,
-      " to [",
-      this.minYear,
-      ", ",
-      this.maxYear,
-      "]"
-    );
+    console.log(`dataset.setTemporalRange to ${temporalRange}`);
     temporalRange[0] = _.clamp(temporalRange[0], this.minYear, this.maxYear);
     temporalRange[1] = _.clamp(temporalRange[1], this.minYear, this.maxYear);
     if (temporalRange[0] > temporalRange[1]) {
       temporalRange[0] = temporalRange[1];
     }
     this.temporalRange.splice(0, this.temporalRange.length, ...temporalRange);
-    console.log("SET TEMPORAL RANGE to: ", this.temporalRange);
+    console.log("CLAMPED dataset.setTemporalRange: ", this.temporalRange);
   }
 
   // takes variable id to set variable object
@@ -291,7 +281,7 @@ class Dataset extends VuexModule {
 
   @Mutation
   setGeoJson(geoJson) {
-    console.log("Setting geojson on dataset");
+    console.log("datasetStore.setGeoJson");
     this.geoJson = geoJson;
   }