touchup: add "view" context menu items

to prepare for allowing indicators to be hidden - this way, indicator
functionality is still enabled via the context menu.

src/web/common/components/ContextMenu/ContextMenu.tsx

@@ -9,6 +9,9 @@ import { DeleteEdgeMenuItem } from "@/web/common/components/ContextMenu/DeleteEd
 import { DeleteNodeMenuItem } from "@/web/common/components/ContextMenu/DeleteNodeMenuItem";
 import { HideMenuItem } from "@/web/common/components/ContextMenu/HideMenuItem";
 import { OnlyShowNodeAndNeighborsMenuItem } from "@/web/common/components/ContextMenu/OnlyShowNodeAndNeighborsMenuItem";
+import { ViewContextMenuItem } from "@/web/common/components/ContextMenu/ViewContextMenuItem";
+import { ViewDetailsMenuItem } from "@/web/common/components/ContextMenu/ViewDetailsMenuItem";
+import { ViewTableMenuItem } from "@/web/common/components/ContextMenu/ViewTableMenuItem";
 import { closeContextMenu } from "@/web/common/store/contextMenuActions";
 import { useAnchorPosition, useContextMenuContext } from "@/web/common/store/contextMenuStore";
 
@@ -26,6 +29,11 @@ export const ContextMenu = () => {
 
   // create these based on what's set in the context
   const menuItems = [
+    // view actions (so that this functionality is still available if indicators are hidden)
+    contextPart && <ViewDetailsMenuItem graphPart={contextPart} key={1} />,
+    contextNode?.type === "problem" && <ViewTableMenuItem node={contextNode} key={2} />,
+    contextPart && <ViewContextMenuItem graphPart={contextPart} key={3} />,
+
     // CRUD actions
     contextPart === undefined && <AddNodeMenuItem parentMenuOpen={isOpen} key={9} />,
     contextNode && <ChangeNodeTypeMenuItem node={contextNode} parentMenuOpen={isOpen} key={7} />,

src/web/common/components/ContextMenu/ViewContextMenuItem.tsx

@@ -0,0 +1,12 @@
+import { ContextMenuItem } from "@/web/common/components/ContextMenu/CloseOnClickMenuItem";
+import { GraphPart, isNode } from "@/web/topic/utils/graph";
+import { contextMethods } from "@/web/topic/utils/partContext";
+
+export const ViewContextMenuItem = ({ graphPart }: { graphPart: GraphPart }) => {
+  const partType = isNode(graphPart) ? graphPart.type : graphPart.label;
+  const viewContext = contextMethods[partType]?.viewContext;
+
+  if (!viewContext) return <></>;
+
+  return <ContextMenuItem onClick={() => viewContext(graphPart.id)}>View context</ContextMenuItem>;
+};

src/web/common/components/ContextMenu/ViewDetailsMenuItem.tsx

@@ -0,0 +1,17 @@
+import { ContextMenuItem } from "@/web/common/components/ContextMenu/CloseOnClickMenuItem";
+import { emitter } from "@/web/common/event";
+import { GraphPart } from "@/web/topic/utils/graph";
+import { setSelected } from "@/web/view/currentViewStore/store";
+
+export const ViewDetailsMenuItem = ({ graphPart }: { graphPart: GraphPart }) => {
+  return (
+    <ContextMenuItem
+      onClick={() => {
+        setSelected(graphPart.id);
+        emitter.emit("viewTopicDetails");
+      }}
+    >
+      View details
+    </ContextMenuItem>
+  );
+};

src/web/common/components/ContextMenu/ViewTableMenuItem.tsx

@@ -0,0 +1,11 @@
+import { ContextMenuItem } from "@/web/common/components/ContextMenu/CloseOnClickMenuItem";
+import { Node } from "@/web/topic/utils/graph";
+import { viewCriteriaTable } from "@/web/view/currentViewStore/filter";
+
+export const ViewTableMenuItem = ({ node }: { node: Node }) => {
+  return (
+    <ContextMenuItem onClick={() => viewCriteriaTable(node.id)}>
+      View criteria table
+    </ContextMenuItem>
+  );
+};