Add back in the ability to edit the table

package.json

@@ -54,6 +54,7 @@
     "@loadable/component": "^5.14.1",
     "@macrostrat-web/data-sheet-test": "workspace:*",
     "@macrostrat-web/globe": "workspace:*",
+    "@macrostrat-web/security": "workspace:*",
     "@macrostrat/api-utils": "workspace:*",
     "@macrostrat/api-views": "workspace:*",
     "@macrostrat/column-components": "workspace:*",

packages/security/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@macrostrat-web/security",
+  "private": true,
+  "main": "src/index.ts",
+  "license": "ISC"
+}

packages/security/src/index.ts

@@ -0,0 +1,15 @@
+
+// Handles fetch requests that require authentication
+export const secureFetch = async (url, options) => {
+
+  console.log(url, options)
+
+  const response = await fetch(url, options);
+
+  if (response.status === 401) {
+    window.open(`${import.meta.env.VITE_MACROSTRAT_INGEST_API}/security/login`, '_blank').focus();
+    throw {name: "UnauthorizedError", message: "User is not logged in"}
+  }
+
+  return response
+}

src/pages/maps/@id/edit/components/cell/basic.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import {Cell} from "@blueprintjs/table";
+
+import hyper from "@macrostrat/hyper";
+import styles from "./main.module.sass";
+
+export const h = hyper.styled(styles);
+
+
+export const BasicCell = (...props) => {
+  return h(Cell, {...props});
+}

src/pages/maps/@id/edit/components/cell/index.d.ts

@@ -0,0 +1,4 @@
+interface CellProps extends React.HTMLProps<HTMLTableCellElement> {
+  value: string;
+  onChange: (value: string) => void;
+}

src/pages/maps/@id/edit/components/cell/main.module.sass

@@ -0,0 +1,55 @@
+@import "@blueprintjs/core/lib/scss/variables.scss"
+
+.data-sheet-container, .data-sheet-holder
+  flex: 1
+  position: relative
+  min-height: 0
+
+.data-sheet-container
+  display: flex
+  flex-direction: column
+
+.data-sheet
+  height: 100%
+
+:global(.bp4-dark) .data-sheet :global(.bp4-table-quadrant)
+  background-color: $dark-gray1
+
+.input-cell
+  padding: 0 2px !important
+  input
+    width: 100%
+    height: 100%
+    padding: 0 8px
+    z-index: 0
+    position: relative
+    border: none
+    margin: 0
+    font-size: 1em
+    pointer-events: all
+    background: transparent
+    &:focus
+      outline: none
+
+.hidden-input
+  opacity: 0
+  position: absolute
+  width: 0
+
+.corner-drag-handle
+  position: absolute
+  bottom: 0
+  right: 0
+  width: 8px
+  height: 8px
+  background-color: $dark-gray1
+  cursor: ns-resize
+  background-color: dodgerblue
+
+.data-sheet-toolbar
+  display: flex
+  flex-direction: row
+  margin-bottom: 4px
+
+.spacer
+  flex-grow: 1

src/pages/maps/@id/edit/components/progress-popover/main.module.sass

@@ -0,0 +1,15 @@
+.progress-popover
+  z-index: 9999
+  position: absolute
+  bottom: 0px
+  background: white
+  padding: 10px
+  border-radius: 5px
+  box-shadow: #ececec 5px 5px 5px
+  width: 200px
+  left: 50%
+  transform: translate(-50%, -50%)
+
+  .progress-popover-text
+    padding-top: 10px
+    text-align: center

src/pages/maps/@id/edit/components/progress-popover/progress-popover.ts

@@ -0,0 +1,26 @@
+import { ProgressBar, ProgressBarProps } from "@blueprintjs/core";
+
+import hyper from "@macrostrat/hyper";
+
+import styles from "./main.module.sass";
+const h = hyper.styled(styles);
+
+interface ProgressPopoverProps extends React.HTMLProps<HTMLDivElement> {
+  text: string;
+  value: number;
+  progressBarProps?: ProgressBarProps;
+}
+
+export default function ProgressPopover({text, value, progressBarProps}: ProgressPopoverProps) {
+  return h("div", {
+    className: "progress-popover"
+  }, [
+    h(ProgressBar, {
+      value: value,
+      ...progressBarProps
+    }),
+    h("div", {
+      className: "progress-popover-text"
+    }, text)
+  ]);
+}