feat: Minimap

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>
 );

components/canvas/Canvas.module.scss

@@ -1,29 +1,33 @@
 @import "styles/_variables.scss";
 
 .controls {
-  bottom: 35px !important;
-  left: 16px !important;
+  left: 65px !important;
   margin: 0;
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: 0;
   box-shadow: none;
+  transform: rotate(90deg);
+  background-color: $white;
+  filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.14));
 
   button {
-    height: 24px;
-    width: 24px;
+    height: 32px;
+    width: 32px;
     padding: 0;
-    border: none;
     background-color: $white;
-    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.14));
+    transform: rotate(90deg);
 
     svg {
-      max-height: 14px;
-      max-width: 14px;
+      max-height: 20px;
+      max-width: 20px;
 
       path {
         fill: $equinor_PROMINENT;
       }
     }
   }
+  button:hover {
+    background-color: $equinor_HOVER-ALT;
+  }
 }

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}" : ""
@@ -351,9 +354,8 @@ const Canvas = ({
         attributionPosition="bottom-right"
         connectionRadius={100}
       >
-        <Controls className={styles.controls} showInteractive={false} />
+        <MiniMapCustom />
       </ReactFlow>
-      <CanvasTutorial />
       {createdBeforeSecondMajorRelease && (
         <OldFlytButton projectId={projectId} />
       )}
@@ -365,6 +367,7 @@ export function CanvasWrapper(props: CanvasProps) {
   return (
     <ReactFlowProvider>
       <Canvas {...props} />
+      <Controls className={styles.controls} showInteractive={false} />
     </ReactFlowProvider>
   );
 }

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}

components/canvas/MiniMapCustom.module.scss

@@ -0,0 +1,19 @@
+@import "styles/_variables.scss";
+
+.minimap {
+  bottom: 50px !important;
+  left: -16px !important;
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.14);
+  margin-left: 48px;
+  border-radius: 4px 4px 0 0;
+  border-top: 4px solid #fff;
+  border-right: 4px solid #fff;
+  border-left: 4px solid #fff;
+
+  svg {
+    path {
+      stroke: $equinor_PROMINENT;
+      stroke-width: 40px;
+    }
+  }
+}

components/canvas/MiniMapCustom.tsx

@@ -0,0 +1,35 @@
+import { MiniMap, Node } from "reactflow";
+import { NodeTypes } from "@/types/NodeTypes";
+import colors from "../../theme/colors";
+import styles from "./MiniMapCustom.module.scss";
+
+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;
+      case NodeTypes.hidden:
+        return colors.WHITE;
+      default:
+        return colors.NODE_GENERIC;
+    }
+  };
+
+  return (
+    <MiniMap
+      className={styles.minimap}
+      nodeColor={nodeColor}
+      position={"bottom-left"}
+      ariaLabel={"Flyt mini map"}
+      pannable
+      zoomable
+      inversePan
+    />
+  );
+}

pages/_app.tsx

@@ -3,11 +3,11 @@ import "../styles/globals.scss";
 import App, { AppContext } from "next/app";
 import { QueryClient, QueryClientProvider } from "react-query";
 
-import { LayoutWrapper } from "../layouts/LayoutWrapper";
+import { LayoutWrapper } from "@/layouts/LayoutWrapper";
 import { MsalProvider } from "@azure/msal-react";
 import { ReactQueryDevtools } from "react-query/devtools";
 import { StoreProvider } from "easy-peasy";
-import { msalInstance } from "../auth/msalHelpers";
+import { msalInstance } from "@/auth/msalHelpers";
 import store from "../store/store";
 
 const queryClient = new QueryClient();
@@ -22,7 +22,7 @@ export default function MyApp({ Component, pageProps }) {
           </LayoutWrapper>
         </MsalProvider>
         <div onWheel={(e) => e.stopPropagation()}>
-          <ReactQueryDevtools initialIsOpen={false} />
+          <ReactQueryDevtools initialIsOpen={false} position={"bottom-right"} />
         </div>
       </QueryClientProvider>
     </StoreProvider>