Updated table management

pages/integrations/xdd/+Page.mdx

@@ -7,6 +7,7 @@ for discovering data from the scientific literature.
 
 - Stratigraphic units linked to papers in Rockd and Macrostrat
 - Extracting [structured data](/integrations/xdd/extractions) from papers
+- [Data types](/integrations/xdd/types) for feedback
 - [Model runs](/integrations/xdd/runs)
 - [Feedback](/integrations/xdd/feedback) on extractions
 - Training machine learning models for [Map legend affinity](/dev/legend-affinity)

src/components/legend-table/data-loaders.ts

@@ -25,7 +25,7 @@ type LazyLoaderAction<T> =
   | { type: "loaded"; data: T[]; offset: number; totalSize: number }
   | { type: "error"; error: Error }
   | { type: "set-visible"; region: RowRegion }
-  | { type: "update-data"; data: Map<number, T> };
+  | { type: "update-data"; changes: Spec<T[]> };
 
 function adjustArraySize<T>(arr: T[], newSize: number) {
   if (newSize == null || arr.length === newSize) {
@@ -55,15 +55,10 @@ function lazyLoadingReducer<T>(
         visibleRegion: action.region,
       };
     case "update-data":
-      let spec: Spec<T[]> = {};
-      for (let [key, value] of Array.from(action.data.entries())) {
-        spec[key] = { $set: value };
-      }
-
       return {
         ...state,
         loading: false,
-        data: update(state.data, spec),
+        data: update(state.data, action.changes),
       };
     case "loaded":
       let data = adjustArraySize(state.data, action.totalSize);

src/components/legend-table/index.ts

@@ -1,16 +1,17 @@
 import { OverlayToaster, Tag } from "@blueprintjs/core";
 import hyper from "@macrostrat/hyper";
 import styles from "./main.module.sass";
-import DataSheet, { ColorCell } from "@macrostrat/data-sheet2";
+import DataSheet, { ColorCell, getRowsToDelete } from "@macrostrat/data-sheet2";
 import { LithologyTag } from "~/components";
 import { usePostgRESTLazyLoader } from "~/components/legend-table/data-loaders";
 import { HotkeysProvider } from "@blueprintjs/core";
 import { Spinner } from "@blueprintjs/core";
 
 export * from "./data-loaders";
 import { postgrest } from "~/_providers";
-import { useRef } from "react";
+import { useCallback, useRef } from "react";
 import { ErrorBoundary } from "@macrostrat/ui-components";
+import { Spec } from "immutability-helper";
 
 const h = hyper.styled(styles);
 
@@ -26,6 +27,8 @@ export function PostgRESTTableView(props: PostgRESTTableViewProps) {
   return h(ErrorBoundary, h(_PostgRESTTableView, props));
 }
 
+const successResponses = [200, 201];
+
 export function _PostgRESTTableView({
   table,
   columnOptions,
@@ -40,62 +43,84 @@ export function _PostgRESTTableView({
 
   const toasterRef = useRef(null);
 
+  const finishResponse = useCallback(
+    (promisedResult, changes) => {
+      promisedResult
+        .then((res) => {
+          if (!successResponses.includes(res.status)) {
+            // Throw an error with the status code
+            let err = new Error(res.error.message);
+            err["status"] = res.status;
+            throw err;
+          }
+
+          // Merge new data with old data
+          dispatch({ type: "update-data", changes });
+        })
+        .catch((err: Error) => {
+          const status = err["status"];
+          toasterRef.current?.show({
+            message: h([
+              h.if(status != null)([h("code", status), " "]),
+              err.message,
+            ]),
+            intent: "danger",
+          });
+        });
+    },
+    [dispatch]
+  );
+
   if (data == null) {
     return h(Spinner);
   }
 
-  return h(
-    "div.data-sheet-container",
-    h(HotkeysProvider, [
-      h(OverlayToaster, { usePortal: false, ref: toasterRef }),
-      h(DataSheet, {
-        data,
-        columnSpecOptions: columnOptions ?? {},
-        editable,
-        onVisibleCellsChange: onScroll,
-        onSaveData(updates, data) {
-          if (!editable) return;
-
-          // Augment updates with primary key
-          let newUpdates: Map<number, any> = new Map(
-            Object.entries(updates).map(([key, update]) => {
-              return [key, { ...data[key], ...update }];
-            })
-          );
-
-          let updateRows = Array.from(newUpdates.values());
-
-          dispatch({ type: "start-loading" });
-
-          // Save data
-          postgrest
-            .from(table)
-            .upsert(updateRows)
-            .then((res) => {
-              if (res.status != 200) {
-                // Throw an error with the status code
-                let err = new Error(res.error.message);
-                err["status"] = res.status;
-                throw err;
-              }
-
-              // Merge new data with old data
-              dispatch({ type: "update-data", data: newUpdates });
-            })
-            .catch((err: Error) => {
-              const status = err["status"];
-              toasterRef.current.show({
-                message: h([
-                  h.if(status != null)([h("code", status), " "]),
-                  err.message,
-                ]),
-                intent: "danger",
-              });
-            });
-        },
-      }),
-    ])
-  );
+  return h(HotkeysProvider, [
+    h(OverlayToaster, { usePortal: false, ref: toasterRef }),
+    h(DataSheet, {
+      data,
+      columnSpecOptions: columnOptions ?? {},
+      editable,
+      onVisibleCellsChange: onScroll,
+      onDeleteRows(selection) {
+        if (!editable) return;
+
+        const rowIndices = getRowsToDelete(selection);
+
+        console.log(rowIndices);
+
+        const ids = rowIndices.map((i) => data[i].id);
+
+        dispatch({ type: "start-loading" });
+
+        const query = postgrest.from(table).delete().in("id", ids);
+
+        finishResponse(query, { $delete: Array.from(rowIndices.keys()) });
+      },
+      onSaveData(updates, data) {
+        if (!editable) return;
+
+        // Augment updates with primary key
+
+        let changes: Spec<any[]> = {};
+        let updateRows: any[] = [];
+        for (let [key, update] of Object.entries(updates)) {
+          const value = { ...data[key], ...update };
+          updateRows.push(value);
+          changes[key] = { $set: value };
+        }
+
+        dispatch({ type: "start-loading" });
+
+        // Save data
+        const query = postgrest
+          .from(table)
+          .upsert(updateRows, { defaultToNull: false });
+
+        finishResponse(query, changes);
+      },
+    }),
+  ]);
 }
 
 export function LongTextViewer({ value, onChange }) {

src/components/legend-table/main.module.sass

@@ -45,5 +45,7 @@
   padding: 0px 4px
   min-height: 16px
 
-.data-sheet-container
+.data-sheet-outer
   position: relative
+  flex: 1
+  display: flex