feat: added minimap to bottom left. Moved tutorial button to the righ…

…t in accordance with design. fixed ts errors in affected files
equinor · May 21, 2024 · fc33f0c · fc33f0c
1 parent df265de
commit fc33f0c
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 17 deletions.
diff --git a/components/CanvasButtons.tsx b/components/CanvasButtons.tsx
@@ -1,6 +1,7 @@
 import { CategorizationPageButton } from "./CategorizationPageButton";
 import styles from "./CanvasButtons.module.scss";
 import { ManageLabelsButton } from "./Labels/ManageLabelsButton";
+import { CanvasTutorial } from "@/components/canvas/CanvasTutorial/CanvasTutorial";
 
 type CanvasButtonsProps = {
   handleClickLabel: () => void;
@@ -14,5 +15,6 @@ export const CanvasButtons = ({
   <div className={styles.container}>
     {userCanEdit && <ManageLabelsButton handleClickLabel={handleClickLabel} />}
     <CategorizationPageButton />
+    <CanvasTutorial />
   </div>
 );
diff --git a/components/canvas/Canvas.tsx b/components/canvas/Canvas.tsx
@@ -15,13 +15,12 @@ import { NodeDataFull } from "types/NodeData";
 import { NodeDataApi } from "types/NodeDataApi";
 import { NodeTypes } from "types/NodeTypes";
 import { Project } from "types/Project";
-import { Graph } from "../../types/Graph";
-import { uid } from "../../utils/uuid";
+import { Graph } from "@/types/Graph";
+import { uid } from "@/utils/uuid";
 import { DeleteNodeDialog } from "../DeleteNodeDialog";
 import { LiveIndicator } from "../LiveIndicator";
 import { SideBar } from "../SideBar";
 import styles from "./Canvas.module.scss";
-import { CanvasTutorial } from "./CanvasTutorial/CanvasTutorial";
 import { nodeElementTypes } from "./NodeElementTypes";
 import { OldFlytButton } from "./OldFlytButton";
 import { ToBeToggle } from "./ToBeToggle";
@@ -33,7 +32,8 @@ import { useNodeDrag } from "./hooks/useNodeDrag";
 import { useNodeMerge } from "./hooks/useNodeMerge";
 import { useWebSocket } from "./hooks/useWebSocket";
 import { getQIPRContainerWidth } from "./utils/getQIPRContainerWidth";
-import { useProjectId } from "../../hooks/useProjectId";
+import { useProjectId } from "@/hooks/useProjectId";
+import { MiniMapCustom } from "@/components/canvas/MiniMapCustom";
 
 type CanvasProps = {
   graph: Graph;
@@ -167,8 +167,8 @@ const Canvas = ({
             (node) => node.id === parentNodeId
           );
           if (
-            tempParentNode &&
             depthDeepestNode &&
+            tempParentNode?.data.depth &&
             tempParentNode.data.depth < depthDeepestNode
           ) {
             tempEdges = tempEdges.filter(
@@ -232,7 +232,10 @@ const Canvas = ({
       if (mergedNodesLooping.has(nodeId)) {
         const nodeDuplicate = mergedNodesLooping.get(nodeId)![0];
         const loopCount = mergedNodesLooping.get(nodeId)![1];
-        if (nodeDuplicate?.data?.depth <= parentDepth) {
+        if (
+          nodeDuplicate.data.depth &&
+          nodeDuplicate.data.depth <= parentDepth
+        ) {
           nodeDuplicate.data.depth = parentDepth + 1;
         }
         mergedNodesLooping.set(nodeId, [nodeDuplicate, loopCount + 1]);
@@ -247,7 +250,7 @@ const Canvas = ({
     } else {
       data.depth = parentDepth + 1;
       data?.children?.forEach((child) => {
-        setSingleNodeDepth(child, data.depth);
+        if (data.depth) setSingleNodeDepth(child, data.depth);
       });
     }
   };
@@ -262,7 +265,7 @@ const Canvas = ({
       mergedNodesReady = [];
       dupeMergedNodesReady.forEach((node) => {
         node.data.children.forEach((child) => {
-          setSingleNodeDepth(child, node.data.depth);
+          if (node.data.depth) setSingleNodeDepth(child, node.data.depth);
         });
       });
     }
@@ -309,7 +312,7 @@ const Canvas = ({
       <LiveIndicator
         live={socketConnected}
         title={
-          !!socketConnected
+          socketConnected
             ? "Connection is looking good!\nYour changes should appear immediately for other users."
             : `You are not connected${
                 socketReason ? " because of ${socketReason}" : ""
@@ -352,8 +355,8 @@ const Canvas = ({
         connectionRadius={100}
       >
         <Controls className={styles.controls} showInteractive={false} />
+        <MiniMapCustom />
       </ReactFlow>
-      <CanvasTutorial />
       {createdBeforeSecondMajorRelease && (
         <OldFlytButton projectId={projectId} />
       )}

diff --git a/components/canvas/CanvasTutorial/CanvasTutorial.tsx b/components/canvas/CanvasTutorial/CanvasTutorial.tsx
@@ -1,5 +1,5 @@
 import { Button, Dialog, Icon } from "@equinor/eds-core-react";
-import { close } from "@equinor/eds-icons";
+import { help_outline, close } from "@equinor/eds-icons";
 import addNewMainActivity from "../../../public/CanvasTutorial/add-new-main-activity.gif";
 import addNewSubActivity from "../../../public/CanvasTutorial/add-new-sub-activity.gif";
 import addNewChoice from "../../../public/CanvasTutorial/add-new-choice.gif";
@@ -15,6 +15,7 @@ import { CanvasTutorialButtonGroup } from "./CanvasTutorialButtonGroup";
 import { CanvasTutorialSection } from "./CanvasTutorialSection";
 import { InlineImage } from "./InlineImage";
 import { useCanvasTutorial } from "./hooks/useCanvasTutorial";
+import { ButtonWrapper } from "@/components/ButtonWrapper";
 
 const title = "Tutorial";
 
@@ -24,13 +25,12 @@ export const CanvasTutorial = () => {
 
   return (
     <>
-      <Button
-        aria-haspopup="dialog"
+      <ButtonWrapper
+        icon={help_outline}
+        title={"Tutorial"}
         onClick={handleInitialOpen}
-        className={styles.canvasTutorialButtonContainer}
-      >
-        {title}
-      </Button>
+        aria-haspopup="dialog"
+      />
 
       <Dialog
         open={isOpen}

diff --git a/components/canvas/MiniMapCustom.tsx b/components/canvas/MiniMapCustom.tsx
@@ -0,0 +1,31 @@
+import { MiniMap, Node } from "reactflow";
+import { NodeTypes } from "@/types/NodeTypes";
+import colors from "../../theme/colors";
+export function MiniMapCustom() {
+  const nodeColor = (node: Node) => {
+    switch (node.type) {
+      case NodeTypes.mainActivity:
+        return colors.NODE_MAINACTIVITY;
+      case NodeTypes.subActivity:
+        return colors.NODE_SUBACTIVITY;
+      case NodeTypes.choice:
+        return colors.NODE_CHOICE;
+      case NodeTypes.waiting:
+        return colors.NODE_WAITING;
+      default:
+        return colors.NODE_GENERIC;
+    }
+  };
+
+  return (
+    <MiniMap
+      style={{ marginLeft: 48 }}
+      nodeColor={nodeColor}
+      position={"bottom-left"}
+      ariaLabel={"Flyt mini map"}
+      pannable
+      zoomable
+      inversePan
+    />
+  );
+}