feat: add delete to toolbar

src/web/topic/components/Surface/TopicToolbar.tsx

@@ -1,4 +1,4 @@
-import { Build, Download, Error, Group, Redo, Undo, Upload } from "@mui/icons-material";
+import { Build, Delete, Download, Error, Group, Redo, Undo, Upload } from "@mui/icons-material";
 import { AppBar, Divider, IconButton, ToggleButton, Toolbar, Tooltip } from "@mui/material";
 import fileDownload from "js-file-download";
 import { useEffect, useState } from "react";
@@ -12,6 +12,8 @@ import {
   resetPerspectives,
   useIsComparingPerspectives,
 } from "../../../view/store/store";
+import { deleteGraphPart } from "../../store/createDeleteActions";
+import { useSelectedGraphPart } from "../../store/graphPartHooks";
 import { migrate } from "../../store/migrate";
 import { TopicStoreState, useOnPlayground } from "../../store/store";
 import { useUserCanEditTopicData } from "../../store/userHooks";
@@ -64,6 +66,8 @@ export const TopicToolbar = () => {
   const isComparingPerspectives = useIsComparingPerspectives();
   const [hasErrored, setHasErrored] = useState(false);
 
+  const selectedGraphPart = useSelectedGraphPart();
+
   const [isMoreActionsDrawerOpen, setIsMoreActionsDrawerOpen] = useState(false);
 
   useEffect(() => {
@@ -117,6 +121,22 @@ export const TopicToolbar = () => {
             >
               <Redo />
             </IconButton>
+
+            <Divider orientation="vertical" />
+
+            <IconButton
+              color="inherit"
+              title="Delete"
+              aria-label="Delete"
+              onClick={() => {
+                if (selectedGraphPart) {
+                  void deleteGraphPart(selectedGraphPart);
+                }
+              }}
+              disabled={!selectedGraphPart}
+            >
+              <Delete />
+            </IconButton>
           </>
         )}
 

src/web/topic/store/createDeleteActions.ts

@@ -3,7 +3,8 @@ import { createDraft, finishDraft } from "immer";
 import { errorWithData } from "../../../common/errorHandling";
 import { emitter } from "../../common/event";
 import {
-  type Node,
+  type GraphPart,
+  Node,
   RelationDirection,
   buildEdge,
   buildNode,
@@ -257,3 +258,11 @@ export const deleteEdge = async (edgeId: string) => {
 
   useTopicStore.setState(finishDraft(state), false, "deleteEdge");
 };
+
+export const deleteGraphPart = async (graphPart: GraphPart) => {
+  if (graphPart.type === "ScoreEdge") {
+    await deleteEdge(graphPart.id);
+  } else {
+    await deleteNode(graphPart.id);
+  }
+};

src/web/topic/store/graphPartHooks.ts

@@ -1,4 +1,5 @@
 import { useTopicStore } from "./store";
+import { getActiveDiagram } from "./utils";
 
 export const useExplicitClaimCount = (graphPartId: string) => {
   return useTopicStore((state) => {
@@ -10,3 +11,12 @@ export const useExplicitClaimCount = (graphPartId: string) => {
     return claimTree.nodes.length - 1;
   });
 };
+
+export const useSelectedGraphPart = () => {
+  return useTopicStore((state) => {
+    const diagram = getActiveDiagram(state);
+    return (
+      diagram.edges.find((edge) => edge.selected) ?? diagram.nodes.find((node) => node.selected)
+    );
+  });
+};

src/web/topic/utils/diagram.ts

@@ -107,6 +107,7 @@ export const buildEdge = ({
   };
 };
 
+export type GraphPart = Node | Edge;
 export type GraphPartType = "node" | "edge";
 
 export const possibleScores = ["-", "1", "2", "3", "4", "5", "6", "7", "8", "9"] as const;