feat: Card tooltip (#737)

equinor · May 27, 2024 · 89bea20 · 89bea20
1 parent f0e6128
commit 89bea20
Show file tree

Hide file tree

Showing 19 changed files with 304 additions and 126 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,6 @@
 
 ![image](https://github.com/equinor/flyt/assets/115637685/b2cbc217-1b39-4668-b891-afed82edcd01)
 
-
 # Links
 
 - 🌱 [Internal repo](https://github.com/equinor/flyt-internal)

diff --git a/components/canvas/ChoiceNode.tsx b/components/canvas/ChoiceNode.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import { Connection, NodeProps, Position, useStore } from "reactflow";
-
 import { NodeButtonsContainer } from "./NodeButtonsContainer";
 import { SubActivityButton } from "./SubActivityButton";
 import { ChoiceButton } from "./ChoiceButton";
@@ -13,7 +12,9 @@ import colors from "theme/colors";
 import { NodeCard } from "./NodeCard";
 import { NodeDescription } from "./NodeDescription";
 import { SourceHandle } from "./SourceHandle";
-import { formatNodeText } from "./utils/formatNodeText";
+import { NodeShape } from "./NodeShape";
+import { NodeTooltip } from "./NodeTooltip";
+import { NodeTooltipSection } from "./NodeTooltipSection";
 
 export const ChoiceNode = ({
   data: {
@@ -37,11 +38,13 @@ export const ChoiceNode = ({
   dragging,
 }: NodeProps<NodeData>) => {
   const [hovering, setHovering] = useState(false);
+  const [hoveringShape, setHoveringShape] = useState(false);
   const connectionNodeId = useStore((state) => state.connectionNodeId);
   const lastChild = children[children?.length - 1];
 
   useEffect(() => {
     setHovering(false);
+    setHoveringShape(false);
   }, [dragging, connectionNodeId]);
 
   const renderNodeButtons = () => {
@@ -137,22 +140,32 @@ export const ChoiceNode = ({
       onMouseLeave={() => setHovering(false)}
     >
       <NodeCard
-        shape="rhombus"
-        height={shapeHeight}
-        width={shapeWidth}
-        color={colors.NODE_CHOICE}
         onClick={handleClickNode}
         hovering={hovering && !merging}
         highlighted={isDropTarget && isValidDropTarget}
         darkened={isValidDropTarget === false}
       >
-        <NodeDescription
-          header={!description ? type : undefined}
-          description={description}
-        />
+        <NodeShape
+          shape={"rhombus"}
+          color={colors.NODE_CHOICE}
+          width={shapeWidth}
+          height={shapeHeight}
+          onMouseEnter={() => !dragging && setHoveringShape(true)}
+          onMouseLeave={() => setHoveringShape(false)}
+        >
+          <NodeDescription
+            header={!description ? type : undefined}
+            description={description}
+          />
+        </NodeShape>
       </NodeCard>
       <TargetHandle hidden={!mergeOption} />
       <SourceHandle />
+      <NodeTooltip isVisible={!!(hoveringShape && description)}>
+        {description && (
+          <NodeTooltipSection header={"Description"} text={description} />
+        )}
+      </NodeTooltip>
       {renderNodeButtons()}
     </div>
   );

diff --git a/components/canvas/GenericNode.tsx b/components/canvas/GenericNode.tsx
@@ -1,5 +1,5 @@
 import { NodeData } from "types/NodeData";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Handle, NodeProps, Position } from "reactflow";
 import stylesNodeButtons from "./NodeButtons.module.scss";
 import { NodeButtonsContainer } from "./NodeButtonsContainer";
@@ -8,6 +8,10 @@ import { NodeTypes } from "types/NodeTypes";
 import { NodeDescription } from "./NodeDescription";
 import { NodeCard } from "./NodeCard";
 import colors from "theme/colors";
+import { QIPRContainer } from "./QIPRContainer";
+import { NodeShape } from "./NodeShape";
+import { NodeTooltip } from "./NodeTooltip";
+import { NodeTooltipSection } from "./NodeTooltipSection";
 
 export const GenericNode = ({
   data: {
@@ -27,6 +31,12 @@ export const GenericNode = ({
   dragging,
 }: NodeProps<NodeData>) => {
   const [hovering, setHovering] = useState(false);
+  const [hoveringShape, setHoveringShape] = useState(false);
+
+  useEffect(() => {
+    setHovering(false);
+    setHoveringShape(false);
+  }, [dragging]);
 
   const renderNodeButtons = () => {
     const nodeButtonsPosition =
@@ -58,24 +68,34 @@ export const GenericNode = ({
       onMouseLeave={() => setHovering(false)}
     >
       <NodeCard
-        shape="square"
-        height={shapeHeight}
-        width={shapeWidth}
-        color={colors.NODE_GENERIC}
-        tasks={tasks}
         onClick={handleClickNode}
         hovering={hovering && !merging}
         highlighted={isDropTarget && isValidDropTarget}
         darkened={isValidDropTarget === false}
       >
-        <NodeDescription header={type} description={description} />
+        <NodeShape
+          shape={"square"}
+          color={colors.NODE_GENERIC}
+          width={shapeWidth}
+          height={shapeHeight}
+          onMouseEnter={() => !dragging && setHoveringShape(true)}
+          onMouseLeave={() => setHoveringShape(false)}
+        >
+          <NodeDescription header={type} description={description} />
+        </NodeShape>
+        <QIPRContainer tasks={tasks} />
       </NodeCard>
       <Handle
         className={stylesNodeButtons["handle--hidden"]}
         type="target"
         position={Position.Top}
         isConnectable={false}
       />
+      <NodeTooltip isVisible={!!(hoveringShape && description)}>
+        {description && (
+          <NodeTooltipSection header={"Description"} text={description} />
+        )}
+      </NodeTooltip>
       {renderNodeButtons()}
     </div>
   );

diff --git a/components/canvas/MainActivityNode.tsx b/components/canvas/MainActivityNode.tsx
@@ -13,6 +13,10 @@ import { NodeDescription } from "./NodeDescription";
 import { NodeCard } from "./NodeCard";
 import colors from "theme/colors";
 import { SourceHandle } from "./SourceHandle";
+import { NodeShape } from "./NodeShape";
+import { QIPRContainer } from "./QIPRContainer";
+import { NodeTooltipSection } from "./NodeTooltipSection";
+import { NodeTooltip } from "./NodeTooltip";
 
 export const MainActivityNode = ({
   data: {
@@ -32,9 +36,11 @@ export const MainActivityNode = ({
   dragging,
 }: NodeProps<NodeData>) => {
   const [hovering, setHovering] = useState(false);
+  const [hoveringShape, setHoveringShape] = useState(false);
 
   useEffect(() => {
     setHovering(false);
+    setHoveringShape(false);
   }, [dragging]);
 
   const renderNodeButtons = () => {
@@ -82,20 +88,25 @@ export const MainActivityNode = ({
       onMouseLeave={() => setHovering(false)}
     >
       <NodeCard
-        shape="square"
-        height={shapeHeight}
-        width={shapeWidth}
-        color={colors.NODE_MAINACTIVITY}
-        tasks={tasks}
         onClick={handleClickNode}
         hovering={hovering && !merging}
         highlighted={isDropTarget && isValidDropTarget}
         darkened={isValidDropTarget === false}
       >
-        <NodeDescription
-          header={!description ? type : undefined}
-          description={description}
-        />
+        <NodeShape
+          shape={"square"}
+          color={colors.NODE_MAINACTIVITY}
+          width={shapeWidth}
+          height={shapeHeight}
+          onMouseEnter={() => !dragging && setHoveringShape(true)}
+          onMouseLeave={() => setHoveringShape(false)}
+        >
+          <NodeDescription
+            header={!description ? type : undefined}
+            description={description}
+          />
+        </NodeShape>
+        <QIPRContainer tasks={tasks} />
       </NodeCard>
       <Handle
         className={stylesNodeButtons["handle--hidden"]}
@@ -104,6 +115,11 @@ export const MainActivityNode = ({
         isConnectable={false}
       />
       <SourceHandle />
+      <NodeTooltip isVisible={!!(hoveringShape && description)}>
+        {description && (
+          <NodeTooltipSection header={"Description"} text={description} />
+        )}
+      </NodeTooltip>
       {renderNodeButtons()}
     </div>
   );

diff --git a/components/canvas/NodeCard.tsx b/components/canvas/NodeCard.tsx
@@ -1,14 +1,6 @@
-import { Task } from "types/Task";
 import styles from "./Node.module.scss";
-import { QIPRContainer } from "./QIPRContainer";
-import { NodeShape } from "./NodeShape";
 
 type NodeCard = {
-  shape: "square" | "rhombus";
-  color: string;
-  height: number;
-  width: number;
-  tasks?: Task[];
   onClick: () => void;
   hovering?: boolean;
   highlighted?: boolean;
@@ -17,11 +9,6 @@ type NodeCard = {
 };
 
 export const NodeCard = ({
-  shape,
-  height,
-  width,
-  color,
-  tasks,
   onClick,
   hovering,
   highlighted,
@@ -38,9 +25,6 @@ export const NodeCard = ({
     }`}
     onClick={onClick}
   >
-    <NodeShape shape={shape} color={color} width={width} height={height}>
-      {children}
-    </NodeShape>
-    <QIPRContainer tasks={tasks} />
+    {children}
   </div>
 );
diff --git a/components/canvas/NodeDescription.tsx b/components/canvas/NodeDescription.tsx
@@ -9,17 +9,19 @@ type NodeDescription = {
   description?: string;
 };
 
-export const NodeDescription = ({ header, description }: NodeDescription) => (
-  <div className={styles["node__description-container"]}>
-    {header && (
-      <Typography variant="caption" className={styles["node__header"]}>
-        {getNodeTypeName(header)}
-      </Typography>
-    )}
-    {description && (
-      <Typography variant="caption" className={styles["node__description"]}>
-        {formatNodeText(description)}
-      </Typography>
-    )}
-  </div>
-);
+export const NodeDescription = ({ header, description }: NodeDescription) => {
+  return (
+    <div className={styles["node__description-container"]}>
+      {header && (
+        <Typography variant="caption" className={styles["node__header"]}>
+          {getNodeTypeName(header)}
+        </Typography>
+      )}
+      {description && (
+        <Typography variant="caption" className={styles["node__description"]}>
+          {formatNodeText(description)}
+        </Typography>
+      )}
+    </div>
+  );
+};
diff --git a/components/canvas/NodeShape.tsx b/components/canvas/NodeShape.tsx
@@ -1,3 +1,4 @@
+import { MouseEventHandler } from "react";
 import styles from "./Node.module.scss";
 
 type NodeShape = {
@@ -6,6 +7,8 @@ type NodeShape = {
   width: number;
   height: number;
   children: JSX.Element | JSX.Element[];
+  onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+  onMouseLeave?: MouseEventHandler<HTMLDivElement>;
 };
 
 export const NodeShape = ({
@@ -14,11 +17,15 @@ export const NodeShape = ({
   width,
   height,
   children,
+  onMouseEnter,
+  onMouseLeave,
 }: NodeShape) => {
   const square = (
     <div
       style={{ height: height, width: width }}
       className={`${styles["node-shape-container"]} ${styles["node-shape-container--square"]}`}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
     >
       <div
         className={`${styles["node-shape--square"]}`}
@@ -33,6 +40,8 @@ export const NodeShape = ({
     <div
       style={{ height: height, width: width }}
       className={styles["node-shape-container"]}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
     >
       <div
         className={`${styles["node-shape--rhombus"]} `}

diff --git a/components/canvas/NodeTooltip.module.scss b/components/canvas/NodeTooltip.module.scss
@@ -0,0 +1,12 @@
+@import "styles/_variables.scss";
+
+.container {
+  background: white;
+  max-width: 300px;
+  box-shadow: 0px 11px 15px 0px #00000033;
+  border-radius: 2.5%;
+}
+
+.container > * + * {
+  border-top: 1px solid $equinor_MEDIUM_GRAY;
+}
diff --git a/components/canvas/NodeTooltip.tsx b/components/canvas/NodeTooltip.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+import { NodeToolbar, Position } from "reactflow";
+import styles from "./NodeTooltip.module.scss";
+
+type NodeTooltip = {
+  children: ReactNode;
+  isVisible?: boolean;
+  position?: Position;
+};
+
+export const NodeTooltip = ({ children, isVisible, position }: NodeTooltip) => {
+  return (
+    <NodeToolbar
+      position={position}
+      isVisible={isVisible}
+      className={styles.container}
+    >
+      {children}
+    </NodeToolbar>
+  );
+};
diff --git a/components/canvas/NodeTooltipSection.module.scss b/components/canvas/NodeTooltipSection.module.scss
@@ -0,0 +1,6 @@
+.container {
+  padding: 10px 20px;
+  overflow: hidden;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
diff --git a/components/canvas/NodeTooltipSection.tsx b/components/canvas/NodeTooltipSection.tsx
@@ -0,0 +1,17 @@
+import { Typography } from "@equinor/eds-core-react";
+import styles from "./NodeTooltipSection.module.scss";
+import { formatNodeText } from "./utils/formatNodeText";
+
+type NodeTooltipSection = {
+  header?: string;
+  text: string;
+};
+
+export const NodeTooltipSection = ({ header, text }: NodeTooltipSection) => (
+  <div className={styles.container}>
+    <Typography variant="meta" color="Gray">
+      {formatNodeText(header)}
+    </Typography>
+    <Typography variant="body_long">{formatNodeText(text)}</Typography>
+  </div>
+);