ENG-1088: An affordance to delete relations.

Sending necessary data through the result.

Author: maparent

apps/roam/src/components/DiscourseContext.tsx

@@ -269,9 +269,7 @@ const ContextTab = ({
       // TODO - always save settings, but maybe separate from root `parentUid`?
       preventSavingSettings
       parentUid={parentUid}
-      results={Object.values(results).map(
-        ({ target, complement, id, ...a }) => a as Result,
-      )}
+      results={Object.values(results).map(({ target, ...a }) => a as Result)}
       columns={columns}
       onRefresh={onRefresh}
       header={

apps/roam/src/components/results-view/ResultsTable.tsx

@@ -7,6 +7,7 @@ import React, {
 } from "react";
 import { Button, HTMLTable, Icon, IconName } from "@blueprintjs/core";
 import { IconNames } from "@blueprintjs/icons";
+import { render as renderToast } from "roamjs-components/components/Toast";
 import { Column, Result } from "~/utils/types";
 import type { FilterData, Sorts, Views } from "~/utils/parseResultSettings";
 import Filter, { Filters } from "roamjs-components/components/Filter";
@@ -21,6 +22,9 @@ import toCellValue from "~/utils/toCellValue";
 import { ContextContent } from "~/components/DiscourseContext";
 import DiscourseContextOverlay from "~/components/DiscourseContextOverlay";
 import { CONTEXT_OVERLAY_SUGGESTION } from "~/utils/predefinedSelections";
+import { getSetting } from "~/utils/extensionSettings";
+import { strictQueryForReifiedBlocks } from "~/utils/createReifiedBlock";
+import formatDistanceStrictWithOptions from "date-fns/esm/fp/formatDistanceStrictWithOptions/index.js";
 
 const EXTRA_ROW_TYPES = ["context", "discourse"] as const;
 type ExtraRowType = (typeof EXTRA_ROW_TYPES)[number] | null;
@@ -202,6 +206,7 @@ const ResultRow = ({
   onDragEnd,
   onRefresh,
 }: ResultRowProps) => {
+  const useReifiedRel = getSetting<boolean>("use-reified-relations");
   const cell = (key: string) => {
     const value = toCellValue({
       value: r[`${key}-display`] || r[key] || "",
@@ -264,6 +269,52 @@ const ResultRow = ({
     [views],
   );
   const trRef = useRef<HTMLTableRowElement>(null);
+  const onDelete = () => {
+    const data = {
+      sourceUid: r["complement"] === 1 ? r["uid"] : r["ctxTargetUid"],
+      destinationUid: r["complement"] === 1 ? r["ctxTargetUid"] : r["uid"],
+      hasSchema: r["id"],
+    } as Record<string, string>;
+    strictQueryForReifiedBlocks(data)
+      .then((blockUid) => {
+        if (blockUid === null) {
+          renderToast({
+            id: "delete-relation-error",
+            content: "Could not find relation",
+            intent: "warning",
+          });
+          return;
+        }
+        deleteBlock(blockUid)
+          .then(() => {
+            renderToast({
+              id: "delete-relation-success",
+              content: "Relation deleted",
+              intent: "success",
+            });
+            onRefresh();
+          })
+          .catch((e) => {
+            // this one should be an internalError
+            console.error(e);
+            renderToast({
+              id: "delete-relation-error",
+              content: "Could not delete relation",
+              intent: "danger",
+            });
+          });
+      })
+      .catch((e) => {
+        // this one should be an internalError
+        console.error(e);
+        renderToast({
+          id: "delete-relation-error",
+          content: "Error searching for relation",
+          intent: "danger",
+        });
+      });
+  };
+
   return (
     <>
       <tr ref={trRef} data-uid={r.uid}>
@@ -321,6 +372,15 @@ const ResultRow = ({
               ) : (
                 cell(key)
               )}
+              {useReifiedRel && r["ctxTargetUid"] !== undefined && (
+                <Button
+                  minimal
+                  icon="delete"
+                  className="float-right"
+                  title="Delete relation"
+                  onClick={onDelete}
+                ></Button>
+              )}
               {i < columns.length - 1 && (
                 <div
                   style={{

apps/roam/src/utils/createReifiedBlock.ts

@@ -6,7 +6,7 @@ export const DISCOURSE_GRAPH_PROP_NAME = "discourse-graph";
 
 const SANE_ROLE_NAME_RE = new RegExp(/^[\w\-]*$/);
 
-const strictQueryForReifiedBlocks = async (
+export const strictQueryForReifiedBlocks = async (
   parameterUids: Record<string, string>,
 ): Promise<string | null> => {
   const paramsAsSeq = Object.entries(parameterUids);

apps/roam/src/utils/getDiscourseContextResults.ts

@@ -76,7 +76,8 @@ const executeQueries = async (
   onResult?: onResult,
 ) => {
   const promises = queryConfigs.map(async ({ relation, queryPromise }) => {
-    const results = await queryPromise();
+    let results = await queryPromise();
+    results = results.map((r) => ({ ...r, ctxTargetUid: targetUid }));
     if (onResult) {
       const groupedResult = {
         label: relation.text,