Map ingestion table updates

package.json

@@ -106,6 +106,7 @@
     "@visx/axis": "^2.14.0",
     "@visx/scale": "^2.2.2",
     "@vitejs/plugin-react": "^4.0.4",
+    "allotment": "^1.20.2",
     "axios": "^0.25.0",
     "chroma-js": "^3.0.0",
     "classnames": "^2.2.6",

pages/+config.ts

@@ -19,6 +19,7 @@ export default {
     "environment",
     "urlPathname",
     "scripts",
+    "pageStyle",
   ],
   clientRouting: true,
   supportsDarkMode: true,
@@ -29,6 +30,12 @@ export default {
         server: true,
       },
     },
+    pageStyle: {
+      env: {
+        client: true,
+        server: true,
+      },
+    },
     scripts: {
       env: {
         client: false,

pages/dev/map/sources/+Page.client.ts

@@ -1,6 +1,6 @@
 import h from "@macrostrat/hyper";
 // Import other components
-import { burwellTileDomain, mapboxAccessToken } from "@macrostrat-web/settings";
+import { mapboxAccessToken } from "@macrostrat-web/settings";
 // Import other components
 import { Spacer, useDarkMode } from "@macrostrat/ui-components";
 import mapboxgl from "mapbox-gl";
@@ -13,12 +13,11 @@ import {
   buildInspectorStyle,
   LocationPanel,
   MapView,
-  FeaturePanel,
   FeatureSelectionHandler,
 } from "@macrostrat/map-interface";
 import { NonIdealState } from "@blueprintjs/core";
-import { LinkItem } from "pages/dev/map/layers/lib";
 import { Link } from "~/components";
+import { boundingGeometryMapStyle } from "~/map-styles";
 
 export function Page() {
   const dark = useDarkMode();
@@ -33,39 +32,7 @@ export function Page() {
   const [actualStyle, setActualStyle] = useState(null);
 
   useEffect(() => {
-    const color = isEnabled ? 255 : 20;
-
-    const overlayStyle: mapboxgl.Style = {
-      version: 8,
-      sources: {
-        rgeom: {
-          type: "vector",
-          tiles: [burwellTileDomain + "/maps/bounds/{z}/{x}/{y}"],
-          maxzoom: 9,
-        },
-      },
-      layers: [
-        {
-          id: "rgeom",
-          type: "fill",
-          source: "rgeom",
-          "source-layer": "bounds",
-          paint: {
-            "fill-color": `rgba(${color}, ${color}, ${color}, 0.1)`,
-          },
-        },
-        {
-          id: "rgeom-line",
-          type: "line",
-          source: "rgeom",
-          "source-layer": "bounds",
-          paint: {
-            "line-color": `rgba(${color}, ${color}, ${color}, 0.5)`,
-            "line-width": 1,
-          },
-        },
-      ],
-    };
+    const overlayStyle = boundingGeometryMapStyle(isEnabled);
 
     buildInspectorStyle(baseStyle, overlayStyle, {
       mapboxToken: mapboxAccessToken,

pages/dev/me/+Page.client.ts

@@ -1,7 +1,34 @@
 import h from "@macrostrat/hyper";
 import { DocumentationPage } from "~/layouts";
-import { AuthStatus } from "@macrostrat/auth-components";
+import { AuthStatus, useAuth } from "@macrostrat/auth-components";
+import { usePostgresQuery } from "#/integrations/xdd/extractions/lib/data-service";
 
 export function Page() {
-  return h(DocumentationPage, { title: "Login" }, [h(AuthStatus)]);
+  return h(DocumentationPage, { title: "Login" }, [
+    h(UserIdentity),
+    h(UserIdentityPostgrest),
+    h(AuthStatus),
+  ]);
+}
+
+function UserIdentity() {
+  const { user } = useAuth();
+
+  return h("div", [
+    h("h3", "User Identity"),
+    h("pre", JSON.stringify(user, null, 2)),
+  ]);
+}
+
+function UserIdentityPostgrest() {
+  const res = usePostgresQuery("rpc/auth_status");
+
+  if (res == null) {
+    return h("div", "No Postgrest auth status");
+  }
+
+  return h("div", [
+    h("h3", "User identity (PostgREST)"),
+    h("pre", JSON.stringify(res?.token, null, 2)),
+  ]);
 }

pages/integrations/xdd/feedback/+Page.client.ts

@@ -1,13 +1,15 @@
 import { FullscreenPage } from "~/layouts";
 import h from "./main.module.sass";
 import { PageBreadcrumbs } from "~/components";
-import { PostgRESTTableView } from "~/components/legend-table";
+import { PostgRESTTableView } from "@macrostrat/data-sheet2";
+import { postgrestPrefix } from "@macrostrat-web/settings";
 
 export function Page() {
   return h(FullscreenPage, { className: "main" }, [
     h(PageBreadcrumbs),
     h("h1", "Source text"),
     h(PostgRESTTableView, {
+      endpoint: postgrestPrefix,
       table: "kg_source_text",
       columns:
         "id,map_legend_id,paper_id,last_update,created,n_runs,n_entities,n_matches,n_strat_names",

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

@@ -2,7 +2,8 @@ import { FullscreenPage } from "~/layouts";
 import hyper from "@macrostrat/hyper";
 import styles from "./main.module.sass";
 import { PageBreadcrumbs } from "~/components";
-import { PostgRESTTableView } from "~/components/legend-table";
+import { PostgRESTTableView } from "@macrostrat/data-sheet2";
+import { postgrestPrefix } from "@macrostrat-web/settings";
 
 const h = hyper.styled(styles);
 
@@ -11,6 +12,7 @@ export function Page() {
     h(PageBreadcrumbs),
     h("h1", "Model runs"),
     h(PostgRESTTableView, {
+      endpoint: postgrestPrefix,
       table: "kg_model_run",
       columns:
         "id,timestamp,model_id,version_id,source_text_id,map_legend_id,supersedes,superseded_by",

pages/integrations/xdd/types/+Page.client.ts

@@ -1,15 +1,14 @@
 import { FullscreenPage } from "~/layouts";
 import h from "@macrostrat/hyper";
 import { PageBreadcrumbs } from "~/components";
-import { PostgRESTTableView } from "~/components/legend-table";
-
 import {
+  PostgRESTTableView,
   ColorCell,
-  //EditableTextArea,
-  //ColorPicker,
+  EditableTextArea,
 } from "@macrostrat/data-sheet2";
 import { asChromaColor } from "@macrostrat/color-utils";
 import { AuthStatus } from "@macrostrat/auth-components";
+import { postgrestPrefix } from "@macrostrat-web/settings";
 
 const colorField = {
   name: "Color",
@@ -30,6 +29,7 @@ export function Page() {
     h(PageBreadcrumbs),
     h("div.header", [h("h1", "Entity types"), h("div.spacer"), h(AuthStatus)]),
     h(PostgRESTTableView, {
+      endpoint: postgrestPrefix,
       table: "kg_entity_type",
       editable: true,
       columnOptions: {

pages/layout.module.sass

@@ -13,3 +13,8 @@
   right: 0
   margin: 1em
   z-index: 5000
+
+.fullscreen-page
+  height: 100vh
+  overflow: hidden
+  position: relative

pages/map/+config.ts

@@ -13,4 +13,5 @@ export default {
     },
   },
   title: "Map",
+  pageStyle: "fullscreen",
 };

pages/maps/+Page.ts

@@ -1,5 +1,5 @@
 import h from "./main.module.scss";
-import { AnchorButton, ButtonGroup } from "@blueprintjs/core";
+import { AnchorButton } from "@blueprintjs/core";
 import { ContentPage } from "~/layouts";
 import { PageHeader, DevLinkButton, AssistantLinks } from "~/components";
 import { usePageProps } from "~/renderer/usePageProps";
@@ -20,9 +20,7 @@ export function Page() {
     h(PageHeader, { title: "Maps" }),
     h(
       "ul.maps-list",
-      sources.map((d) =>
-        h.if(d.is_mapped)(SourceItem, { source: d, key: d.source_id })
-      )
+      sources.map((d) => h(SourceItem, { source: d, key: d.source_id }))
     ),
   ]);
 }

pages/maps/+config.ts

@@ -0,0 +1,3 @@
+export default {
+  pageStyle: "content",
+};

pages/maps/+onBeforeRender.ts

@@ -6,6 +6,7 @@ export async function onBeforeRender(pageContext) {
   const res = await postgrest
     .from("sources_metadata")
     .select("*")
+    .eq("is_finalized", true)
     .order("source_id", { ascending: true });
 
   const pageProps = { sources: res.data };

pages/maps/@id/+config.ts

@@ -7,4 +7,5 @@ export default {
       },
     },
   },
+  pageStyle: "fullscreen",
 };

pages/maps/@id/legend/+Page.ts

@@ -1,16 +1,15 @@
-import { HotkeysProvider, Spinner, Tag } from "@blueprintjs/core";
-import DataSheet from "@macrostrat/data-sheet2";
+import { HotkeysProvider, Spinner } from "@blueprintjs/core";
+import { DataSheet, ColorCell } from "@macrostrat/data-sheet2";
 import { FullscreenPage } from "~/layouts";
 import hyper from "@macrostrat/hyper";
 import styles from "./main.module.sass";
-import { ColorCell } from "@macrostrat/data-sheet2";
 import { PageBreadcrumbs } from "~/components";
 import {
   LongTextViewer,
   IntervalCell,
   lithologyRenderer,
   ExpandedLithologies,
-} from "~/components/legend-table";
+} from "~/components/data-table";
 import { useLegendData } from "../utils";
 import { useData } from "vike-react/useData";
 

pages/maps/ingestion/+Page.ts

@@ -54,7 +54,6 @@ export function Page() {
 
   return h(ContentPage, [
     h(PageBreadcrumbs),
-    //h(IngestNavbar, { user }),
     h("div.ingestion-title-bar", [
       h("h1", ["Map ingestion queue"]),
       h("div.spacer"),

pages/maps/ingestion/+config.ts

@@ -3,4 +3,5 @@
 export default {
   // Applies to all pages
   ssr: false,
+  pageStyle: "content",
 };

pages/maps/ingestion/@id/+Page.ts

@@ -1,10 +1,13 @@
 import hyper from "@macrostrat/hyper";
 import styles from "./main.module.sass";
 import { AnchorButton, ButtonGroup } from "@blueprintjs/core";
-import { FullscreenPage } from "~/layouts";
 import { Header } from "./components";
 import { MapInterface } from "./components";
 import { usePageProps } from "~/renderer/usePageProps";
+import { useState } from "react";
+import { Allotment } from "allotment";
+import { MapSelectedFeatures } from "./details-panel";
+import "allotment/dist/style.css";
 
 const h = hyper.styled(styles);
 
@@ -30,12 +33,38 @@ export function Page() {
 
   const basename = `/maps/ingestion/${source_id}`;
 
-  return h(FullscreenPage, { className: "page" }, [
+  const [mapSelectedFeatures, selectFeatures] = useState([]);
+  const [inspectPosition, setInspectPosition] = useState(null);
+
+  const showSelectedFeatures =
+    mapSelectedFeatures != null && mapSelectedFeatures.length > 0;
+
+  return h("div.page", [
     h(Header, headerProps),
     h("div.ingestion-main-panel", [
       h("div.context-panel", [h(EditMenu, { parentRoute: basename })]),
-      h("div.main-content", [
-        h(MapInterface, { id: source_id, map: mapBounds, slug: source.slug }),
+      h(Allotment, { className: "main-panel", defaultSizes: [800, 300] }, [
+        h("div.map-container", [
+          h(MapInterface, {
+            map: mapBounds,
+            slug: source.slug,
+            onClickFeatures: selectFeatures,
+            selectedFeatures: mapSelectedFeatures,
+            inspectPosition,
+            setInspectPosition,
+          }),
+        ]),
+        h(Allotment.Pane, { visible: showSelectedFeatures }, [
+          h(MapSelectedFeatures, {
+            features: mapSelectedFeatures,
+            onClose() {
+              selectFeatures([]);
+              setInspectPosition(null);
+            },
+            selectFeatures,
+            className: "details-panel",
+          }),
+        ]),
       ]),
     ]),
   ]);

pages/maps/ingestion/@id/+config.ts

@@ -7,4 +7,5 @@ export default {
       },
     },
   },
+  pageStyle: "fullscreen",
 };