CDR Updates

packages/settings/index.ts

@@ -19,6 +19,8 @@ export const pbdbDomain = "https://paleobiodb.org";
 
 export const mapboxAccessToken = getRuntimeConfig("MAPBOX_API_TOKEN");
 
+export const baseURL = getRuntimeConfig("BASE_URL", "/");
+
 export const apiV2Prefix = getRuntimeConfig(
   "MACROSTRAT_API_V2",
   apiDomain + "/api/v2"

pages/dev/+Page.mdx

@@ -9,7 +9,7 @@ import { PageHeader, PageBreadcrumbs } from "~/components";
 - [User interface tests](/dev/ui-tests)
 - [Feedback](/dev/feedback)
 - [Map filter](/dev/filtering)
-- [CDR Tileserver](/dev/cdr-maps)
+- [CriticalMAAS](/integrations/criticalmaas)
 - [Sources](/dev/sources)
 
 - [Concept apps](/dev/concepts)

pages/integrations/criticalmaas/+Page.mdx

@@ -0,0 +1,3 @@
+# CriticalMAAS integration
+
+- [TA1 results](./criticalmaas/ta1-results)

pages/integrations/criticalmaas/cdr-proxy.server.ts

@@ -0,0 +1,24 @@
+// CriticalMAAS CDR integration
+// Proxy requests to /tile/* to https://api.cdr.land/v1/tiles/*
+// Add the Authorization header to the proxied request
+//
+
+import proxy from "express-http-proxy";
+
+export function createCDRProxy() {
+  // TODO: CDR needs to accept authentication so that we can stop proxying requests.
+  // OR tile endpoints need to be public.
+  const proxyAddress = process.env.CDR_API_BASE ?? "https://api.cdr.land";
+  const proxyToken = process.env.CDR_API_KEY;
+
+  if (!proxyToken || !proxyAddress) {
+    return null;
+  }
+
+  return proxy(proxyAddress, {
+    proxyReqOptDecorator: (opts) => {
+      opts.headers["Authorization"] = `Bearer ${proxyToken}`;
+      return opts;
+    },
+  });
+}

pages/dev/cdr-maps/+Page.ts → pages/integrations/criticalmaas/ta1-results/+Page.ts

@@ -1,18 +1,15 @@
-import { default as h } from "@macrostrat/hyper";
+import h from "@macrostrat/hyper";
 // Page for a list of maps
-import { AnchorButton, ButtonGroup } from "@blueprintjs/core";
 import { ContentPage } from "~/layouts";
-import { PageHeader, DevLinkButton } from "~/components";
+import { PageHeader } from "~/components";
 import { useData } from "vike-react/useData";
 
 export function Page() {
   const data = useData();
   const { sources } = data;
 
-  console.log(sources);
-
   return h(ContentPage, [
-    h(PageHeader, { title: "CDR Maps", showSiteName: false }),
+    h(PageHeader, { title: "CriticalMAAS CDR Maps", showSiteName: false }),
     h(
       "ul.maps-list",
       sources.map((d) => h(SourceItem, { source: d, key: d.source_id }))
@@ -22,7 +19,8 @@ export function Page() {
 
 function SourceItem({ source }) {
   const { cog_id, system, system_version } = source;
-  const href = `./cdr-maps/${cog_id}/${system}/${system_version}`;
+  const currentURL = window.location.pathname;
+  const href = `${currentURL}/${cog_id}/${system}/${system_version}`;
 
   return h("li", [
     h("span.source-id", {}, cog_id),

pages/dev/cdr-maps/+data.ts → pages/integrations/criticalmaas/ta1-results/+data.ts

@@ -1,8 +1,8 @@
 export async function data(pageContext): Promise<any> {
-  // `.page.server.js` files always run in Node.js; we could use SQL/ORM queries here.
+  const baseURL = pageContext.urlParsed.origin;
 
   // Fetch data from local api
-  const url = `http://localhost:3000/tiles/sources`;
+  const url = `${baseURL}/cdr/v1/tiles/sources`;
   const res = await fetch(url);
   const data = await res.json();
 

pages/dev/cdr-maps/@cog_id/@system/@system_version/+Page.ts → pages/integrations/criticalmaas/ta1-results/@cog_id/@system/@system_version/+Page.ts

@@ -1,14 +1,7 @@
-import {
-  Collapse,
-  NonIdealState,
-  Radio,
-  RadioGroup,
-  Spinner,
-  Tag,
-} from "@blueprintjs/core";
+import { Radio, RadioGroup, Spinner } from "@blueprintjs/core";
 import { useData } from "vike-react/useData";
 
-import { SETTINGS, apiV2Prefix } from "@macrostrat-web/settings";
+import { SETTINGS } from "@macrostrat-web/settings";
 import hyper from "@macrostrat/hyper";
 import {
   DetailPanelStyle,
@@ -28,7 +21,6 @@ import boundingBox from "@turf/bbox";
 import { LngLatBoundsLike } from "mapbox-gl";
 import { useEffect, useMemo, useState } from "react";
 import { MapNavbar } from "~/components/map-navbar";
-import "~/styles/global.styl";
 import styles from "./main.module.sass";
 
 const h = hyper.styled(styles);
@@ -136,14 +128,19 @@ function basemapStyle(basemap, inDarkMode) {
 }
 
 export default function MapInterface() {
+  // Get base URL for tiles (special case since we're using a proxy server)
+  const origin = window.location.origin;
+  const baseURL = origin;
+
   const data = useData();
   const [features, setFeatures] = useState(null);
-  const { cog_id, system, system_version, envelope } = data;
+  const { cog_id, system, system_version, envelope, rasterURL } = data;
+  console.log(data);
 
   const [isOpen, setOpen] = useState(false);
   const dark = useDarkMode()?.isEnabled ?? false;
   const title = `${cog_id.substring(0, 10)} ${system} ${system_version}`;
-  const hasRaster = false;
+  const hasRaster = rasterURL != null;
 
   const bounds: LngLatBoundsLike = useMemo(() => {
     return ensureBoxInGeographicRange(boundingBox(envelope));
@@ -167,7 +164,7 @@ export default function MapInterface() {
     raster: 0.5,
   });
 
-  const tileURL = `/tiles/cog/${cog_id}/system/${encodeURIComponent(
+  const tileURL = `${baseURL}/cdr/v1/tiles/cog/${cog_id}/system/${encodeURIComponent(
     system
   )}/system_version/${encodeURIComponent(system_version)}/tile/{z}/{x}/{y}`;
 
@@ -178,7 +175,8 @@ export default function MapInterface() {
       buildOverlayStyle({
         style,
         layerOpacity,
-        tileURL: tileURL,
+        tileURL,
+        rasterURL,
       })
     );
   }, [null, style, layerOpacity.raster == null, layerOpacity.vector == null]);
@@ -189,7 +187,8 @@ export default function MapInterface() {
     const mergeLayers = buildOverlayStyle({
       style,
       layerOpacity,
-      tileURL: tileURL,
+      tileURL,
+      rasterURL,
     }).layers;
 
     for (const layer of mapStyle.layers) {
@@ -274,7 +273,7 @@ export default function MapInterface() {
       className: "single-map",
       navbar: h(MapNavbar, {
         title,
-        parentRoute: "/dev/cdr-maps",
+        parentRoute: "../..",
         isOpen,
         setOpen,
       }),
@@ -310,7 +309,6 @@ export default function MapInterface() {
             },
           }),
         ]
-        //[h(FitBoundsManager, { bounds })]
       ),
     ]
   );

pages/integrations/criticalmaas/ta1-results/@cog_id/@system/@system_version/+data.ts

@@ -0,0 +1,30 @@
+import { PageContext } from "vike/types";
+
+export async function data(pageContext: PageContext) {
+  const { cog_id, system, system_version } = pageContext.routeParams;
+  const baseURL = pageContext.urlParsed.origin;
+  const url = `${baseURL}/cdr/v1/tiles/cog/${cog_id}/system/${system}/system_version/${system_version}`;
+
+  const res = await fetch(url);
+  const data = await res.json();
+
+  // Get projected COG info
+  const projInfo = await fetch(
+    `${baseURL}/cdr/v1/maps/cog/projections/${cog_id}`
+  );
+  const projData = await projInfo.json();
+
+  // Get first validated projection
+  // This could probably be improved
+  const matchingProj = projData.find((d) => d.status == "validated");
+
+  const rasterURL = matchingProj?.download_url;
+
+  return {
+    cog_id,
+    system,
+    system_version,
+    rasterURL,
+    envelope: data.web_geom,
+  };
+}

server/index.ts

@@ -1,6 +1,5 @@
 import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-import proxy from "express-http-proxy";
 import cookieParser from "cookie-parser";
 import compression from "compression";
 
@@ -9,6 +8,7 @@ import { createMiddleware } from "@universal-middleware/express";
 import { createMacrostratQlrAPI } from "@macrostrat-web/qgis-integration";
 import express from "express";
 import sirv from "sirv";
+import { createCDRProxy } from "../pages/integrations/criticalmaas/cdr-proxy.server";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -97,23 +97,10 @@ async function startServer() {
   );
 
   // CriticalMAAS CDR integration
-  // Proxy requests to /tile/* to https://api.cdr.land/v1/tiles/*
+  // Proxy requests to /* to https://api.cdr.land/*
   // Add the Authorization header to the proxied request
-  //
-  if (process.env.CDR_API_KEY) {
-    app.use(
-      "/tiles",
-      proxy("http://0.0.0.0:8333/", {
-        proxyReqOptDecorator: (opts) => {
-          opts.headers["Authorization"] = `Bearer ${process.env.CDR_API_KEY}`;
-          return opts;
-        },
-        proxyReqPathResolver: (req) => {
-          return `/v1/tiles${req.url}`;
-        },
-      })
-    );
-  }
+  // TODO: put this behind authorization, perhaps move to a separate service
+  app.use("/cdr", createCDRProxy());
 
   /**
    * Vike route