validate for geom size, vscode keymap, details

README.md

@@ -1,34 +1,7 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Geoblaze Soil Organic Carbon Example
 
-## Getting Started
+This simple demo project demonstrates the power of browser side raster analysis using [`geoblaze`](https://geoblaze.io), a project not dissimilar in aim from libraries like [`rasterstats`](https://pythonhosted.org/rasterstats/) for python, but with the ready-made ability to fetch data using geotiff range requests
 
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+- no tile server
+- no servers at all
+- ok, there is a proxy for the geotiff GET range requests, but that's because the FAO google storage bucket has same origin CORS enabled

package.json

@@ -11,19 +11,21 @@
   },
   "packageManager": "[email protected]",
   "dependencies": {
-    "@turf/line-to-polygon": "^6.5.0",
-    "@turf/turf": "^6.5.0",
-    "@types/node": "20.3.3",
-    "@types/react": "18.2.14",
-    "@types/react-dom": "18.2.6",
     "@codemirror/autocomplete": "6.0.0",
     "@codemirror/commands": "6.0.0",
+    "@codemirror/lang-json": "6.0.0",
     "@codemirror/language": "6.0.0",
     "@codemirror/lint": "6.0.0",
-    "@codemirror/lang-json": "6.0.0",
     "@codemirror/state": "6.1.0",
     "@codemirror/theme-one-dark": "6.0.0",
+    "@codemirror/matchbrackets": "0.19.1",
     "@codemirror/view": "6.1.2",
+    "@replit/codemirror-vscode-keymap": "^6.0.2",
+    "@turf/line-to-polygon": "^6.5.0",
+    "@turf/turf": "^6.5.0",
+    "@types/node": "20.3.3",
+    "@types/react": "18.2.14",
+    "@types/react-dom": "18.2.6",
     "autoprefixer": "10.4.14",
     "encoding": "^0.1.13",
     "eslint": "8.44.0",

src/app/components/About.tsx

@@ -4,17 +4,32 @@ export const About = () => (
     <p className="mt-6">
       The source data used for this computation comes from the{" "}
       <a href="https://data.apps.fao.org/glosis/?share=f-e6875d44-d798-4e9a-b84b-48916cf9e4d8">
-        FAO Global Soil Organic Carbon Map v1.5 (GSOC)
+        FAO Global Soil Organic Carbon Map v1.5 (GSOC).
       </a>
     </p>
+    <p>
+      Please read about their methodology in the technical report, it is
+      fascinating! It uses World Harmonized Soil Database, SoilGrids, and many
+      other sources from around the globe, for a total of over 1 million real
+      soil samples. That said, an actual assessment with your soil samples will
+      give a more accurate estimate.
+    </p>
+    <p>
+      This is one of the few things that the fantastic{" "}
+      <a href="https://data.apps.fao.org/glosis/">FAO Glosis</a> tool
+      doesn&apos;t do, and the moment they do I will take this project down.
+    </p>
+    <h2>Credits</h2>
     <p>
       The tool was created by <a href="https://rikki.dev">Rikki Schulte</a> for
-      fun, using <a href="https://geoblaze.io/">GeoBlaze</a>, powered by{" "}
-      <a href="https://geotiffjs.github.io/">GeoTIFF.js</a>
+      fun and for the earth, using <a href="https://geoblaze.io/">GeoBlaze</a>,
+      powered by <a href="https://geotiffjs.github.io/">GeoTIFF.js</a>. Check
+      out{" "}
+      <a href="https://github.com/acao/geoblaze-gsoc">the source on github</a>
     </p>
     <p>
       <a href="https://creativecommons.org/licenses/by-nc/3.0/">CC BY-NC 3.0</a>
-      &copy;Rikki Schulte&nbsp;
+      &nbsp;&copy;&nbsp;Rikki Schulte&nbsp;
     </p>
   </div>
 );

src/app/components/GeoJSONEditor.tsx

@@ -1,9 +1,10 @@
 import React, { useRef, useEffect, useState } from "react";
 import { EditorState } from "@codemirror/state";
-import { EditorView, lineNumbers } from "@codemirror/view";
+import { EditorView, lineNumbers, keymap } from "@codemirror/view";
 import { history } from "@codemirror/commands";
+import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
 import { autocompletion, closeBrackets } from "@codemirror/autocomplete";
-import { bracketMatching, syntaxHighlighting } from "@codemirror/language";
+import { bracketMatching, syntaxHighlighting, codeFolding } from "@codemirror/language";
 import { oneDarkHighlightStyle, oneDark } from "@codemirror/theme-one-dark";
 import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { linter } from "@codemirror/lint";
@@ -33,6 +34,10 @@ export const GeoJSONEditor = ({
         json(),
         onUpdate,
         linter(jsonParseLinter()),
+        keymap.of(vscodeKeymap),
+        codeFolding({
+            placeholderText: '...'
+        })
       ],
     });
 

src/app/globals.css

@@ -27,5 +27,12 @@ body {
   }
 }
 
-.cm-editor, .cm-wrap { height: 80vh; display: block }
-.cm-scroller { overflow: auto }
+.cm-editor,
+.cm-wrap {
+  height: 80vh;
+  display: block;
+}
+.cm-scroller {
+  overflow: auto;
+  padding: 6px;
+}

src/app/page.tsx

@@ -30,17 +30,46 @@ export default function Home() {
   const [polygon, setPolygon] = useState<Polygon | MultiPolygon | null>(null);
   const [jsonString, setJsonString] = useState<string | null>(null);
   const [dataResult, setDataResult] = useState<number[]>([]);
+  const data = [];
+  const totalArea = polygon && m2ToHa(area(polygon));
+  const result = dataResult[0];
+  if (totalArea) {
+    data.push([
+      "Total Hectares:",
+      totalArea ? haFormatter.format(totalArea) : "",
+    ]);
+  }
+  if (result) {
+    data.push(
+      ...[
+        ["Tonnes/Hectare:", digits.format(result)],
+        [
+          "Total Predicted SOC Tonnage:",
+          result && totalArea && digits.format(result * totalArea),
+        ],
+      ]
+    );
+  }
+  const message = errorMessage ?? statusMessage;
+  // this is messy but fine for now
+  const buttonDisabled = Boolean(
+    !errorMessage && message && message !== "Raster computation complete!"
+  );
+
   const handleOnClick = async () => {
-    if (
-      jsonString
-    ) {
+    if (jsonString) {
       const data = geoPolygonNormalizer(jsonString);
       if ("error" in data) {
         return setErrorMessage(data.error);
       }
       if (data.result) {
         setPolygon(data.result);
         setStatusMessage("Valid GeoJSON");
+        if (totalArea && totalArea > 100) {
+          setErrorMessage(
+            "Disabled for areas over 100 hectares.\nIf you'd like to do heavy weight processing, just fork and deploy your own instance on zeit!"
+          );
+        }
 
         try {
           setStatusMessage("Fetching GeoTIFF metadata range...");
@@ -62,38 +91,14 @@ export default function Home() {
       }
     }
   };
-  const data = [];
-  const totalArea = polygon && m2ToHa(area(polygon));
-  const result = dataResult[0];
-  if (totalArea) {
-    data.push([
-      "Total Hectares:",
-      totalArea ? haFormatter.format(totalArea) : "",
-    ]);
-  }
-  if (result) {
-    data.push(
-      ...[
-        ["Tonnes/Hectare:", digits.format(result)],
-        [
-          "Total Predicted SOC Tonnage:",
-          result && totalArea && digits.format(result * totalArea),
-        ],
-      ]
-    );
-  }
-  const message = errorMessage ?? statusMessage;
-  // this is messy but fine for now
-  const buttonDisabled = Boolean(
-    !errorMessage && message && message !== "Raster computation complete!"
-  );
 
   return (
     <div className="App m-6 grid md:grid-cols-2 md:grid-rows-1 md:gap-6 gap-0 grid-cols-1">
       <div>
         <h2>Enter GeoJSON Feature/Geometry</h2>
         <div className="mt-6 mb-6">
           <GeoJSONEditor initialValue={defaultGeo} setCode={setJsonString} />
+          <div className="text-right">
           <button
             className="mt-6 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:bg-blue-200 disabled:hover:bg-blue-200"
             onClick={() => handleOnClick()}
@@ -102,6 +107,7 @@ export default function Home() {
           >
             Compute SOC
           </button>
+          </div>
         </div>
       </div>
       <div>