feat: Main activity duration summary

components/DeleteNodeDialog.tsx

@@ -4,14 +4,14 @@ import { getNodeTypeName } from "@/utils/getNodeTypeName";
 import { notifyOthers } from "@/services/notifyOthers";
 import { unknownErrorToString } from "@/utils/isError";
 import { useStoreDispatch } from "hooks/storeHooks";
-import { NodeDataApi } from "@/types/NodeDataApi";
+import { NodeData } from "@/types/NodeData";
 import { NodeTypes } from "@/types/NodeTypes";
 import { deleteVertice } from "services/graphApi";
 import { useProjectId } from "@/hooks/useProjectId";
 import { ScrimDelete } from "./ScrimDelete";
 
 export function DeleteNodeDialog(props: {
-  objectToDelete: NodeDataApi;
+  objectToDelete: NodeData;
   onClose: () => void;
   visible: boolean;
 }) {

components/DurationComponent.tsx

@@ -1,15 +1,15 @@
-import { NodeDataApi } from "@/types/NodeDataApi";
+import { NodeData } from "../types/NodeData";
 import { Autocomplete, TextField } from "@equinor/eds-core-react";
 import {
   getTimeDefinitionDisplayName,
   getTimeDefinitionValue,
-  getTimeDefinitioDisplayNames,
-} from "@/types/unitDefinitions";
+  getTimeDefinitionDisplayNames,
+} from "@/utils/unitDefinitions";
 import { ChangeEvent, useEffect, useState } from "react";
 import { sortSearch } from "@/utils/sortSearch";
 
 type DurationComponent = {
-  selectedNode: NodeDataApi;
+  selectedNode: NodeData;
   onChangeDuration: (e: {
     duration: number | null;
     unit: string | null;
@@ -28,7 +28,7 @@ export function DurationComponent({
   const [unit, setUnit] = useState<string | null>(selectedNode.unit);
   const [unitSearchInput, setUnitSearchInput] = useState("");
 
-  const timeDefinitioDisplayNames = getTimeDefinitioDisplayNames();
+  const timeDefinitionDisplayNames = getTimeDefinitionDisplayNames();
 
   useEffect(() => {
     setDuration(selectedNode.duration);
@@ -68,7 +68,7 @@ export function DurationComponent({
       <div style={{ padding: 8 }} />
       <Autocomplete
         disabled={disabled}
-        options={sortSearch(timeDefinitioDisplayNames, unitSearchInput)}
+        options={sortSearch(timeDefinitionDisplayNames, unitSearchInput)}
         onInputChange={handleUnitChange}
         selectedOptions={[
           unit ? getTimeDefinitionDisplayName(unit) : undefined,

components/EditTaskSection.tsx

@@ -9,14 +9,14 @@ import { notifyOthers } from "@/services/notifyOthers";
 import { Task } from "@/types/Task";
 import { unknownErrorToString } from "@/utils/isError";
 import { useStoreDispatch } from "@/hooks/storeHooks";
-import { NodeDataApi } from "@/types/NodeDataApi";
+import { NodeData } from "../types/NodeData";
 import { TaskTypes } from "types/TaskTypes";
 import { getTaskShorthand } from "utils/getTaskShorthand";
 import { useProjectId } from "@/hooks/useProjectId";
 
 export function EditTaskSection(props: {
   task: Task;
-  object: NodeDataApi;
+  object: NodeData;
   canEdit: boolean;
 }) {
   const { task, object } = props;
@@ -33,7 +33,7 @@ export function EditTaskSection(props: {
       solvedTask,
       solved,
     }: {
-      node: NodeDataApi;
+      node: NodeData;
       solvedTask: Task;
       solved: boolean;
     }) => solveTask(projectId, node.id, solvedTask.id ?? "", solved),

components/EditTaskTextField.tsx

@@ -6,7 +6,7 @@ import { unknownErrorToString } from "@/utils/isError";
 import { updateTask } from "@/services/taskApi";
 import { notifyOthers } from "@/services/notifyOthers";
 import { useAccount, useMsal } from "@azure/msal-react";
-import { NodeDataApi } from "types/NodeDataApi";
+import { NodeData } from "../types/NodeData";
 import { useProjectId } from "@/hooks/useProjectId";
 import dynamic from "next/dynamic";
 const MarkdownEditor = dynamic(() => import("components/MarkdownEditor"), {
@@ -16,7 +16,7 @@ const MarkdownEditor = dynamic(() => import("components/MarkdownEditor"), {
 export function EditTaskTextField(props: {
   task: Task;
   canEdit: boolean;
-  vsmObject: NodeDataApi;
+  vsmObject: NodeData;
 }) {
   const { accounts } = useMsal();
   const account = useAccount(accounts[0] || {});

components/ExistingTaskSection.tsx

@@ -4,7 +4,7 @@ import { useStoreDispatch } from "@/hooks/storeHooks";
 import styles from "./ExistingTaskSection.module.scss";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { getTasksForProject, linkTask, unlinkTask } from "@/services/taskApi";
-import { NodeDataApi } from "@/types/NodeDataApi";
+import { NodeData } from "@/types/NodeData";
 import { unknownErrorToString } from "utils/isError";
 import { notifyOthers } from "@/services/notifyOthers";
 import { useAccount, useMsal } from "@azure/msal-react";
@@ -15,7 +15,7 @@ import { TaskTypes } from "@/types/TaskTypes";
 export function ExistingTaskSection(props: {
   visible: boolean;
   existingTaskFilter: TaskTypes | null;
-  selectedNode: NodeDataApi;
+  selectedNode: NodeData;
 }) {
   const { accounts } = useMsal();
   const account = useAccount(accounts[0] || {});

components/NewTaskSection.tsx

@@ -13,15 +13,16 @@ import { notifyOthers } from "@/services/notifyOthers";
 import { useAccount, useMsal } from "@azure/msal-react";
 import { useProjectId } from "@/hooks/useProjectId";
 import dynamic from "next/dynamic";
-import { NodeDataApi } from "@/types/NodeDataApi";
+import { NodeData } from "@/types/NodeData";
 import { sortSearch } from "@/utils/sortSearch";
+
 const MarkdownEditor = dynamic(() => import("components/MarkdownEditor"), {
   ssr: false,
 });
 
 export const NewTaskSection = (props: {
   onClose: () => void;
-  selectedNode: NodeDataApi;
+  selectedNode: NodeData;
 }) => {
   const { accounts } = useMsal();
   const account = useAccount(accounts[0] || {});

components/QIPSection.tsx

@@ -7,7 +7,7 @@ import { Typography } from "@equinor/eds-core-react";
 import styles from "./VSMCanvas.module.scss";
 import { Task } from "@/types/Task";
 import { taskSorter } from "@/utils/taskSorter";
-import { NodeDataApi } from "@/types/NodeDataApi";
+import { NodeData } from "../types/NodeData";
 
 const NewTaskButton = (props: { onClick: () => void; disabled: boolean }) => (
   <div>
@@ -21,7 +21,7 @@ const NewTaskButton = (props: { onClick: () => void; disabled: boolean }) => (
 
 // eslint-disable-next-line max-lines-per-function
 export const QIPSection = (props: {
-  object: NodeDataApi;
+  object: NodeData;
   onClickNewTask: () => void;
   canEdit: boolean;
 }) => {

components/SideBar.tsx

@@ -1,12 +1,12 @@
 import styles from "./VSMCanvas.module.scss";
 import { SideBarContent } from "./SideBarContent";
-import { NodeDataApi } from "../types/NodeDataApi";
+import { NodeData } from "../types/NodeData";
 
 export function SideBar(props: {
   onClose: () => void;
   onDelete: () => void;
   canEdit: boolean;
-  selectedNode?: NodeDataApi;
+  selectedNode?: NodeData;
 }): JSX.Element {
   const selectedNode = props.selectedNode;
   if (!selectedNode) return <></>;

components/SideBarBody.tsx

@@ -2,15 +2,17 @@ import { DurationComponent } from "./DurationComponent";
 import { QIPSection } from "./QIPSection";
 import { TextField } from "@equinor/eds-core-react";
 import dynamic from "next/dynamic";
-import { NodeDataApi } from "@/types/NodeDataApi";
+import { NodeData } from "../types/NodeData";
 import { NodeTypes } from "types/NodeTypes";
 import { getNodeHelperText } from "./canvas/utils/getNodeHelperText";
+import { formatMinMaxTotalDuration } from "@/utils/unitDefinitions";
+
 const MarkdownEditor = dynamic(() => import("components/MarkdownEditor"), {
   ssr: false,
 });
 
 export function SideBarBody(props: {
-  selectedNode: NodeDataApi;
+  selectedNode: NodeData;
   onChangeDescription: (value?: string) => void;
   onChangeRole: (event: { target: { value: string } }) => void;
   onChangeDuration: (e: {
@@ -21,6 +23,16 @@ export function SideBarBody(props: {
   canEdit: boolean;
 }) {
   const { selectedNode, setShowNewTaskSection } = props;
+  const minMaxDuration = formatMinMaxTotalDuration(
+    selectedNode?.totalDurations
+  );
+
+  // TextField doesnt calculate height, so we split duration into low and high estimation strings
+  // and use 41 as a breakpoint for number of characters before adding a new line
+  const getDurationTextfieldRows = () => {
+    const parts = minMaxDuration.split("\n");
+    return parts.reduce((acc, part) => acc + Math.ceil(part.length / 41), 0);
+  };
 
   switch (selectedNode?.type) {
     case NodeTypes.root:
@@ -109,6 +121,19 @@ export function SideBarBody(props: {
             label={"Description"}
             onChange={props.onChangeDescription}
           />
+          <div style={{ paddingTop: 12 }} />
+          {selectedNode.totalDurations && (
+            <TextField
+              readOnly
+              label={"Duration"}
+              type={"string"}
+              id={"vsmObjectTime"}
+              value={minMaxDuration}
+              multiline
+              helperText={"Duration is automatically calculated"}
+              rows={getDurationTextfieldRows()}
+            />
+          )}
           <QIPSection
             canEdit={props.canEdit}
             object={selectedNode}

components/SideBarContent.tsx

@@ -3,7 +3,7 @@ import { SideBarHeader } from "./SideBarHeader";
 import { NewTaskSection } from "./NewTaskSection";
 import { SideBarBody } from "./SideBarBody";
 import { useMutation, useQueryClient } from "react-query";
-import { NodeDataApi } from "@/types/NodeDataApi";
+import { NodeData } from "@/types/NodeData";
 import { patchGraph } from "services/graphApi";
 import { debounce } from "@/utils/debounce";
 import styles from "./VSMCanvas.module.scss";
@@ -24,7 +24,7 @@ export function SideBarContent(props: {
   onClose: () => void;
   onDelete: () => void;
   canEdit: boolean;
-  selectedNode: NodeDataApi;
+  selectedNode: NodeData;
   isLoading: boolean;
 }) {
   const { accounts } = useMsal();
@@ -34,7 +34,7 @@ export function SideBarContent(props: {
   const dispatch = useStoreDispatch();
   const queryClient = useQueryClient();
   const vsmObjectMutation = useMutation(
-    (patchedObject: NodeDataApi) =>
+    (patchedObject: NodeData) =>
       patchGraph(patchedObject, projectId, patchedObject.id),
     {
       onSuccess() {
@@ -47,7 +47,7 @@ export function SideBarContent(props: {
   );
 
   function patchNode(
-    selectedNode: NodeDataApi,
+    selectedNode: NodeData,
     updates: {
       description?: string;
       role?: string;

components/SideBarHeader.tsx

@@ -1,12 +1,12 @@
 import styles from "./VSMCanvas.module.scss";
 import { Button, Icon, Typography } from "@equinor/eds-core-react";
 import { canDeleteNode } from "../utils/canDeleteNode";
-import { NodeDataApi } from "../types/NodeDataApi";
+import { NodeData } from "../types/NodeData";
 import { close, delete_forever } from "@equinor/eds-icons";
 import { getNodeTypeName } from "utils/getNodeTypeName";
 
 export function SideBarHeader(props: {
-  object: NodeDataApi;
+  object: NodeData;
   onClose: () => void;
   onDelete: () => void;
   canEdit: boolean;

components/canvas/Canvas.tsx

@@ -12,7 +12,7 @@ import ReactFlow, {
   useNodesState,
 } from "reactflow";
 import "reactflow/dist/style.css";
-import { NodeDataFull } from "types/NodeData";
+import { NodeData, NodeDataFull } from "types/NodeData";
 import { NodeDataApi } from "types/NodeDataApi";
 import { NodeTypes } from "types/NodeTypes";
 import { Project } from "types/Project";
@@ -26,11 +26,11 @@ import { ToBeToggle } from "./ToBeToggle";
 import { useAccess } from "./hooks/useAccess";
 import { useCenterCanvas } from "./hooks/useCenterCanvas";
 import { setLayout } from "./hooks/useLayout";
-import { useNodeAdd } from "./hooks/useNodeAdd";
 import { useNodeDrag } from "./hooks/useNodeDrag";
 import { useNodeMerge } from "./hooks/useNodeMerge";
 import { useWebSocket } from "./hooks/useWebSocket";
 import { getQIPRContainerWidth } from "./utils/getQIPRContainerWidth";
+import { setMainActivitiesDurationSum } from "./utils/setMainActivitiesDurationSum";
 import { useEdgeDelete } from "./hooks/useEdgeDelete";
 import { ScrimDelete } from "../ScrimDelete";
 import { MiniMapCustom } from "@/components/canvas/MiniMapCustom";
@@ -48,14 +48,14 @@ const Canvas = ({
   graph: { vertices: apiNodes, edges: apiEdges },
   project,
 }: CanvasProps) => {
-  const [selectedNode, setSelectedNode] = useState<NodeDataApi | undefined>(
+  const [selectedNode, setSelectedNode] = useState<Node<NodeData> | undefined>(
     undefined
   );
   const { userCanEdit } = useAccess(project);
 
   const shapeSize = { height: 140, width: 140 };
 
-  let tempNodes: Node<NodeDataFull>[] = [];
+  let tempNodes: Node<NodeData>[] = [];
   const tempEdges: Edge[] = apiEdges.map((e) => ({ ...e, label: e.edgeValue }));
 
   const [isEditingEdgeText, setIsEditingEdgeText] = useState(false);
@@ -77,6 +77,11 @@ const Canvas = ({
 
   let columnId: string | null = null;
 
+  const handleSetSelectedNode = (id?: string) => {
+    const node = tempNodes.find((n) => n.id === id);
+    node && setSelectedNode(node as Node<NodeData>);
+  };
+
   const createNodes = (
     node: NodeDataApi,
     parent: NodeDataApi | null = null
@@ -115,7 +120,7 @@ const Canvas = ({
         id: node.id,
         data: {
           ...node,
-          handleClickNode: () => setSelectedNode(node),
+          handleClickNode: () => handleSetSelectedNode(node.id),
           handleMerge: (sourceId, targetId) =>
             sourceId && targetId && mergeNode.mutate({ sourceId, targetId }),
           mergeable:
@@ -230,13 +235,8 @@ const Canvas = ({
       return;
     }
 
-    if (selectedNode) {
-      const updatedSelectedNode = apiNodes.find(
-        (node) => node.id === selectedNode.id
-      );
-      setSelectedNode(updatedSelectedNode);
-    }
     createNodes(root);
+    tempNodes = setMainActivitiesDurationSum(tempNodes);
     setNodesDepth();
     const {
       tempNodes: tempWithHiddenNodes,
@@ -255,6 +255,8 @@ const Canvas = ({
     );
     setNodes(finalNodes);
     setEdges(finalEdges);
+
+    selectedNode && handleSetSelectedNode(selectedNode.id);
   }, [apiNodes, apiEdges, userCanEdit]);
 
   useCenterCanvas();
@@ -284,7 +286,7 @@ const Canvas = ({
       <ResetProcessButton />
       {selectedNode && (
         <DeleteNodeDialog
-          objectToDelete={selectedNode}
+          objectToDelete={selectedNode.data}
           visible={visibleDeleteNodeScrim}
           onClose={() => {
             setVisibleDeleteNodeScrim(false);
@@ -318,7 +320,7 @@ const Canvas = ({
         onClose={() => setSelectedNode(undefined)}
         onDelete={() => setVisibleDeleteNodeScrim(true)}
         canEdit={userCanEdit}
-        selectedNode={selectedNode}
+        selectedNode={selectedNode?.data}
       />
       <ReactFlow
         nodes={nodes}