Add tags to general ingest page

UW-Macrostrat · Oct 15, 2024 · c8d267d · c8d267d
1 parent 6f455cb
commit c8d267d
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 70 deletions.
diff --git a/pages/maps/ingestion/+Page.ts b/pages/maps/ingestion/+Page.ts
@@ -77,8 +77,10 @@ export function Page() {
             key: d.id,
             ingestProcess: d,
             user: user,
-            // What is this doing?
-            onUpdate: updateTags,
+            onUpdate: () => {
+              updateTags();
+              updateIngestProcesses();
+            },
           });
         })
       ),

diff --git a/pages/maps/ingestion/@id/+Page.ts b/pages/maps/ingestion/@id/+Page.ts
@@ -18,11 +18,13 @@ interface EditInterfaceProps {
 }
 
 export function Page() {
-  const { source_id, source, mapBounds }: EditInterfaceProps = usePageProps();
+  const { source_id, source, mapBounds, ingestProcess }: EditInterfaceProps =
+    usePageProps();
   const title = source.name;
 
   const headerProps = {
-    title: title,
+    title,
+    ingestProcess,
     sourceURL: source.url,
   };
 

diff --git a/pages/maps/ingestion/@id/components/header.ts b/pages/maps/ingestion/@id/components/header.ts
@@ -1,25 +1,47 @@
+import { useState, useCallback } from "react";
+
 import { ButtonGroup, AnchorButton } from "@blueprintjs/core";
 import { PageBreadcrumbs } from "~/components";
 import hyper from "@macrostrat/hyper";
 import styles from "./main.module.sass";
+import { IngestTagDisplay } from "#/maps/ingestion/components/ingest-tag-display";
+import { ingestPrefix } from "@macrostrat-web/settings";
 
 const h = hyper.styled(styles);
 
 export function Header({
   title,
   sourceURL,
+  ingestProcess,
   children,
 }: {
   title: string;
   parentRoute?: string;
   sourceURL: string;
+  ingestProcess: IngestProcess;
   children?: React.ReactNode;
 }) {
+  const [_ingestProcess, setIngestProcess] =
+    useState<IngestProcess>(ingestProcess);
+
+  const updateIngestProcess = useCallback(async () => {
+    const response = await fetch(
+      `${ingestPrefix}/ingest-process/${ingestProcess.id}`
+    );
+    setIngestProcess(await response.json());
+  }, []);
+
   return h("div", [
     h(PageBreadcrumbs),
     h("div.edit-page-header", [
       h("h2", "Map ingestion"),
-      h("h3.map-name", title),
+      h("div", [
+        h("h3.map-name", title),
+        h(IngestTagDisplay, {
+          ingestProcess: ingestProcess,
+          onUpdate: () => {},
+        }),
+      ]),
       h("div.spacer"),
       h(ButtonGroup, { minimal: true, className: "edit-page-buttons" }, [
         h.if(sourceURL != null)(NavigateMapSourceButton, {

diff --git a/pages/maps/ingestion/components/ingest-process-card.ts b/pages/maps/ingestion/components/ingest-process-card.ts
@@ -6,28 +6,10 @@ import hyper from "@macrostrat/hyper";
 import AddButton from "#/maps/ingestion/components/AddButton";
 import Tag from "./Tag";
 import styles from "./ingest-process-card.module.sass";
+import { IngestTagDisplay } from "#/maps/ingestion/components/ingest-tag-display";
 
 const h = hyper.styled(styles);
 
-const deleteTag = async (tag: string, ingestId: number) => {
-  const response = await fetch(
-    `${ingestPrefix}/ingest-process/${ingestId}/tags/${tag}`,
-    {
-      method: "DELETE",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-      },
-    }
-  );
-
-  if (response.ok) {
-    return;
-  } else {
-    console.log("error", response);
-  }
-};
-
 export function IngestProcessCard({
   ingestProcess,
   user,
@@ -37,19 +19,7 @@ export function IngestProcessCard({
   user: any | undefined;
   onUpdate: () => void;
 }) {
-  const [_ingestProcess, setIngestProcess] =
-    useState<IngestProcess>(ingestProcess);
-
-  const updateIngestProcess = useCallback(async () => {
-    const response = await fetch(
-      `${ingestPrefix}/ingest-process/${ingestProcess.id}`
-    );
-    setIngestProcess(await response.json());
-    onUpdate();
-  }, []);
-
-  const { id, tags } = _ingestProcess;
-  const { slug, name, source_id, scale, raster_url } = _ingestProcess.source;
+  const { slug, name, source_id, scale, raster_url } = ingestProcess.source;
   const edit_href = `/maps/ingestion/${source_id}`;
 
   return h(
@@ -66,39 +36,7 @@ export function IngestProcessCard({
             !["failed", "pending"].includes(ingestProcess.state)
         )(AnchorButton, { href: edit_href, icon: "edit" }),
       ]),
-      h(
-        "div.flex.row",
-        { style: { paddingBottom: "4px", display: "flex", gap: "0.5em" } },
-        [
-          h.if(ingestProcess.state !== undefined)(
-            Tag,
-            {
-              value: ingestProcess.state,
-              style: { marginTop: "auto", marginBottom: "auto" },
-            },
-            []
-          ),
-          tags.map((tag, i) => {
-            return h(Tag, {
-              key: tag,
-              value: tag,
-              style: { marginTop: "auto", marginBottom: "auto" },
-              onClick: async () => {
-                await updateIngestProcess();
-                await deleteTag(tag, id);
-              },
-            });
-          }),
-          h(
-            AddButton,
-            {
-              ingestId: id,
-              onChange: updateIngestProcess,
-            },
-            []
-          ),
-        ]
-      ),
+      h(IngestTagDisplay, { ingestProcess: ingestProcess, onUpdate }),
       h("div.flex.row", [
         h("h6", { style: { margin: "0px" } }, `Scale: ${scale}`),
         h("h6", { style: { margin: "0px" } }, `Source ID: ${source_id}`),

diff --git a/pages/maps/ingestion/components/ingest-tag-display.ts b/pages/maps/ingestion/components/ingest-tag-display.ts
@@ -0,0 +1,84 @@
+import { Card, AnchorButton } from "@blueprintjs/core";
+import { useCallback, useState } from "react";
+
+import { ingestPrefix } from "@macrostrat-web/settings";
+import hyper from "@macrostrat/hyper";
+import AddButton from "../components/AddButton";
+import Tag from "./Tag";
+import styles from "./ingest-process-card.module.sass";
+
+const h = hyper.styled(styles);
+
+const deleteTag = async (tag: string, ingestId: number) => {
+  const response = await fetch(
+    `${ingestPrefix}/ingest-process/${ingestId}/tags/${tag}`,
+    {
+      method: "DELETE",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+    }
+  );
+
+  if (response.ok) {
+    return;
+  } else {
+    console.log("error", response);
+  }
+};
+
+export function IngestTagDisplay({
+  ingestProcess,
+  onUpdate,
+}: {
+  ingestProcess: IngestProcess;
+  onUpdate: () => void;
+}) {
+  const [_ingestProcess, setIngestProcess] =
+    useState<IngestProcess>(ingestProcess);
+
+  const updateIngestProcess = useCallback(async () => {
+    const response = await fetch(
+      `${ingestPrefix}/ingest-process/${ingestProcess.id}`
+    );
+    setIngestProcess(await response.json());
+    onUpdate();
+  }, []);
+
+  const { id, tags } = ingestProcess;
+
+  return h(
+    "div.flex.row",
+    { style: { paddingBottom: "4px", display: "flex", gap: "0.5em" } },
+    [
+      h.if(ingestProcess.state !== undefined)(
+        Tag,
+        {
+          value: ingestProcess.state,
+          style: { marginTop: "auto", marginBottom: "auto" },
+        },
+        []
+      ),
+      tags.map((tag, i) => {
+        return h(Tag, {
+          key: tag,
+          value: tag,
+          style: { marginTop: "auto", marginBottom: "auto" },
+          onClick: async () => {
+            await updateIngestProcess();
+            await deleteTag(tag, id);
+          },
+        });
+      }),
+      h(
+        AddButton,
+        {
+          ingestId: id,
+          onChange: updateIngestProcess,
+        },
+        []
+      ),
+    ]
+  );
+}