A few updates for extractions pages

pages/dev/+Page.mdx

@@ -15,7 +15,7 @@ import { PageHeader, PageBreadcrumbs } from "~/components";
 ## xDD integration
 
 - [Map legend affinity](/dev/legend-affinity)
-- [Extractions](/dev/extractions)
+- [Extractions](/integrations/xdd/extractions)
 
 ## Apps
 

pages/dev/legend-affinity/+Page.client.ts

@@ -225,9 +225,11 @@ async function buildStyle(params: StyleParams) {
 }
 
 function paintProperties(term: string | null, grayColor: number) {
-  if (term == null) {
+  if (term == null || term.length < 3) {
+    const gray = `rgba(${grayColor}, ${grayColor}, ${grayColor}, 0.1)`;
     return {
-      "fill-color": `rgba(${grayColor}, ${grayColor}, ${grayColor}, 0.1)`,
+      "fill-color": ["case", ["has", "color"], ["get", "color"], gray],
+      "fill-opacity": 0.25,
     };
   }
   // Data-driven styling by the 'similarity' property [0, 1]
@@ -247,7 +249,7 @@ function paintProperties(term: string | null, grayColor: number) {
 }
 
 function tileserverURL(term: string | null, model: string | null) {
-  if (term == null) {
+  if (term == null || term.length < 3) {
     return tileserverDomain + "/carto/{z}/{x}/{y}";
   }
   let termSuffix = "?term=" + term;

pages/integrations/+Page.mdx

@@ -0,0 +1,8 @@
+export { DocumentationPage as default } from "~/layouts";
+
+Macrostrat benefits from the work of many other scientific organizations.
+
+## Active collaborations
+
+- [xDD](/integrations/xdd)
+- [CriticalMAAS](/integrations/criticalmaas)

pages/integrations/xdd/+Page.mdx

@@ -0,0 +1,10 @@
+export { DocumentationPage as default } from "~/layouts";
+
+Macrostrat maintains a strong integration with [xDD](https://xdd.wisc.edu/), a platform
+for discovering data from the scientific literature.
+
+## Capabilities
+
+- Stratigraphic units linked to papers in Rockd and Macrostrat
+- Extracting [structured data](/integrations/xdd/extractions) from papers
+- Training machine learning models for [Map legend affinity](/dev/legend-affinity)

pages/integrations/xdd/extractions/+Page.ts

@@ -0,0 +1,119 @@
+import h from "@macrostrat/hyper";
+import { PostgrestClient } from "@supabase/postgrest-js";
+import { usePageContext } from "vike-react/usePageContext";
+
+import { ContentPage } from "~/layouts";
+import { PageHeaderV2 } from "~/components";
+import { postgrestPrefix } from "@macrostrat-web/settings";
+import { useEffect, useState } from "react";
+import { InfiniteScroll, LoadingPlaceholder } from "@macrostrat/ui-components";
+import { create } from "zustand";
+
+const postgrest = new PostgrestClient(postgrestPrefix);
+
+interface DataStore {
+  data: any[];
+  hasMore: boolean;
+  lastID: number | null;
+  loadMore: (set: any) => void;
+  setData: (data: any[]) => void;
+  isLoading: boolean;
+}
+
+const useStore = create<DataStore>((set, get) => ({
+  data: [],
+  isLoading: false,
+  hasMore: true,
+  lastID: null,
+  setData: (data) => set({ data, isLoading: false }),
+  loadMore: async () => {
+    const { lastID, isLoading } = get();
+    set({ isLoading: true });
+    if (isLoading) return;
+
+    let req = postgrest
+      .from("kg_publication_entities")
+      .select("citation,paper_id")
+      .order("paper_id", { ascending: true });
+
+    if (lastID != null) {
+      req = req.gt("paper_id", lastID);
+    }
+
+    const res = await req.limit(10);
+
+    set((state) => {
+      return {
+        data: [...state.data, ...res.data],
+        isLoading: false,
+        hasMore: res.data.length > 0,
+        lastID: res.data[res.data.length - 1]?.paper_id,
+      };
+    });
+  },
+}));
+
+export function Page() {
+  return h(ContentPage, [h(PageMain)]);
+}
+
+function PageMain() {
+  return h("div", [
+    h(PageHeaderV2, { title: "Stratigraphic name extractions" }),
+    h(ExtractionIndex),
+  ]);
+}
+
+function ExtractionIndex() {
+  const { data, isLoading, hasMore, loadMore } = useStore();
+
+  return h(InfiniteScroll, { hasMore, loadMore, offset: 500, isLoading }, [
+    h(PaperList, { data }),
+    h.if(isLoading)(LoadingPlaceholder),
+  ]);
+}
+
+function PaperList({ data }) {
+  const ctx = usePageContext();
+  const pageLink = ctx.urlPathname;
+  return h("div.paper-list", [
+    data.map((d) => {
+      return h("div", [
+        h(xDDCitation, {
+          citation: d.citation,
+          href: pageLink + `/${d.paper_id}`,
+        }),
+        h.if(d.n_matches != null)(
+          "p",
+          `${d.n_matches} stratigraphic name matches`
+        ),
+      ]);
+    }),
+  ]);
+}
+
+function pruneEmptyCitationElements(citation): any {
+  const keys = [
+    "title",
+    "author",
+    "doi",
+    "journal",
+    "identifier",
+    "volume",
+    "number",
+    "year",
+  ];
+  let newCitation = {};
+  for (let key of keys) {
+    if (citation[key] != null && citation[key] !== "") {
+      newCitation[key] = citation[key];
+    }
+  }
+  return newCitation;
+}
+
+function xDDCitation({ citation, href }) {
+  const newCitation = pruneEmptyCitationElements(citation);
+  const { title } = newCitation;
+  return h("div", [h("h2.title", h("a", { href }, title))]);
+}