Story 233061: Clean up frontend

www/src/components/diagram/ActuatingSystem.tsx

@@ -1,6 +1,7 @@
 import { ActuatingSystemProps } from "../../types/diagram/ActuatingSystem.ts";
 import SvgElement from "./SvgElement.tsx";
 
+// TODO - Remove when new graphical format implemented
 export default function ActuatingSystem(props: ActuatingSystemProps) {
   const actuatingSystemComponents = props.ActuatingSystemComponent.filter(
     (component) => component.ComponentName,

www/src/components/diagram/CenterLine.tsx

@@ -3,9 +3,9 @@ import constructPath from "../../utils/Path.ts";
 import { useContext } from "react";
 import PandidContext from "../../context/PandidContext.ts";
 import StyledPath from "./StyledPath.tsx";
-import { useCommissioningPackageContext } from "../../hooks/useCommissioningPackageContext.tsx";
+import { useCommissioningPackages } from "../../hooks/useCommissioningPackages.tsx";
 import React from "react";
-import selectHandleFunction from "../../utils/CommissioningPackageHandler.tsx";
+import selectHandleFunction from "../../utils/CommissioningPackageActions.tsx";
 import ToolContext from "../../context/ToolContext.ts";
 import HighlightColors from "../../enums/HighlightColors.ts";
 import { iriFromSvgNode } from "../../utils/HelperFunctions.ts";
@@ -17,9 +17,10 @@ interface CenterLineComponentProps {
   isInformationFlow: boolean;
 }
 
+//TODO - remove when new graphical format implemented
 export default function CenterLine(props: CenterLineComponentProps) {
   const height = useContext(PandidContext).height;
-  const context = useCommissioningPackageContext();
+  const { context, dispatch } = useCommissioningPackages();
   const setAction = useContext(ActionContext).setAction;
   const tool = useContext(ToolContext).activeTool;
   let color: HighlightColors | undefined;
@@ -43,10 +44,18 @@ export default function CenterLine(props: CenterLineComponentProps) {
       {props.centerLines.map((centerline: CenterLineProps, index: number) =>
         centerline !== undefined ? (
           <React.Fragment key={index}>
-            {(
+            {
               <path
                 onClick={() =>
-                    iri ? selectHandleFunction(iri, context, setAction, tool) : {}
+                  iri
+                    ? selectHandleFunction(
+                        iri,
+                        context,
+                        dispatch,
+                        setAction,
+                        tool,
+                      )
+                    : {}
                 }
                 id={iri ? iri : props.id}
                 key={index + "_highlight"}
@@ -56,9 +65,8 @@ export default function CenterLine(props: CenterLineComponentProps) {
                 opacity={hasSelectedInternalNode ? 0.5 : 0}
                 fill={"none"}
               />
-            )}
+            }
             <StyledPath
-
               key={index}
               d={constructPath(centerline.Coordinate, height)}
               $isDashed={props.isInformationFlow}

www/src/components/diagram/Equipment.tsx

@@ -4,18 +4,20 @@ import StyledSvgElement from "./StyledSvgElement.tsx";
 import PandidContext from "../../context/PandidContext.ts";
 import useSerializeNodeSvg from "../../hooks/useSerializeNodeSvg.tsx";
 import SvgElement from "./SvgElement.tsx";
-import { useCommissioningPackageContext } from "../../hooks/useCommissioningPackageContext.tsx";
+import { useCommissioningPackages } from "../../hooks/useCommissioningPackages.tsx";
 import {
+  constructClasses,
+  findPackageOfElement,
   iriFromSvgNode,
-  isBoundary,
-  isSelectedInternal,
+  isInActivePackage,
 } from "../../utils/HelperFunctions.ts";
 import ToolContext from "../../context/ToolContext.ts";
-import selectHandleFunction from "../../utils/CommissioningPackageHandler.tsx";
+import selectHandleFunction from "../../utils/CommissioningPackageActions.tsx";
 import ActionContext from "../../context/ActionContext.ts";
 
+//TODO - remove when new graphical format implemented
 export default function Equipment(props: EquipmentProps) {
-  const context = useCommissioningPackageContext();
+  const { context, dispatch } = useCommissioningPackages();
   const setAction = useContext(ActionContext).setAction;
   const height = useContext(PandidContext).height;
   const tool = useContext(ToolContext).activeTool;
@@ -27,40 +29,38 @@ export default function Equipment(props: EquipmentProps) {
   const nozzles: NozzleProps[] = props.Nozzle;
 
   const iri = iriFromSvgNode(props.ID);
-  const commissioningPackage = context.commissioningPackages.find(
-    (pkg) =>
-      pkg.boundaryNodes?.some((node) => node.id === iri) ||
-      pkg.internalNodes?.some((node) => node.id === iri),
+  const commissioningPackage = findPackageOfElement(
+    context.commissioningPackages,
+    iri,
+  );
+  const inActivePackage = isInActivePackage(
+    commissioningPackage,
+    context.activePackage.id,
   );
-  const isInActivePackage = commissioningPackage
-    ? context.activePackage.id === commissioningPackage.id
-    : true;
-
   const color = commissioningPackage?.color;
-
   return (
     <>
       <g
         onClick={() =>
-          isInActivePackage
-              ? selectHandleFunction(iri, context, setAction, tool)
-          : {}
+          inActivePackage
+            ? selectHandleFunction(iri, context, dispatch, setAction, tool)
+            : {}
         }
       >
         {svg && (
           <>
-            {(
+            {
               <StyledSvgElement
                 id={iri}
                 position={props.Position}
                 svg={svg}
                 color={color ? color : "black"}
               />
-            )}
+            }
             <g
               id={iri}
               transform={`${props.Position.Reference.X === -1 ? "rotate(-180deg)" : ""}translate(${props.Position.Location.X}, ${height - props.Position.Location.Y})`}
-              className={`.node ${isBoundary(iri, context) ? "boundary" : ""} ${isSelectedInternal(iri, context) ? "selectedInternal" : ""}`}
+              className={constructClasses(iri, context.activePackage)}
               dangerouslySetInnerHTML={{ __html: svg }}
             />
           </>

www/src/components/diagram/LinesGraphicalDataExample.tsx

@@ -1,13 +1,19 @@
 import { useContext } from "react";
-import { useCommissioningPackageContext } from "../../hooks/useCommissioningPackageContext.tsx";
+import { useCommissioningPackages } from "../../hooks/useCommissioningPackages.tsx";
 import ToolContext from "../../context/ToolContext.ts";
 import ActionContext from "../../context/ActionContext.ts";
 import {
   LineProps,
   PointProps,
 } from "../../types/diagram/GraphicalDataFormatTestTypes.ts";
-import selectHandleFunction from "../../utils/CommissioningPackageHandler.tsx";
-import { isBoundary, isSelectedInternal } from "../../utils/HelperFunctions.ts";
+import selectHandleFunction from "../../utils/CommissioningPackageActions.tsx";
+import {
+  constructClasses,
+  findPackageOfElement,
+  isBoundary,
+  isInActivePackage,
+  isSelectedInternal,
+} from "../../utils/HelperFunctions.ts";
 
 function constructLine(coordinates: PointProps[]) {
   let dString = "M ";
@@ -22,31 +28,34 @@ function constructLine(coordinates: PointProps[]) {
 }
 
 export default function Line({ id, style, coordinates }: LineProps) {
-  const context = useCommissioningPackageContext();
+  const { context, dispatch } = useCommissioningPackages();
   const setAction = useContext(ActionContext).setAction;
   const tool = useContext(ToolContext).activeTool;
-  const commissioningPackage = context.commissioningPackages.find(
-    (pkg) =>
-      pkg.boundaryNodes?.some((node) => node.id === id) ||
-      pkg.internalNodes?.some((node) => node.id === id),
+  const commissioningPackage = findPackageOfElement(
+    context.commissioningPackages,
+    id,
+  );
+  const inActivePackage = isInActivePackage(
+    commissioningPackage,
+    context.activePackage.id,
   );
-  const isInActivePackage = commissioningPackage
-    ? context.activePackage.id === commissioningPackage.id
-    : true;
   const color = commissioningPackage?.color;
 
   function calculateLineColor() {
-    if (isBoundary(id, context)) {
+    if (isBoundary(id, context.activePackage)) {
       return "green";
-    } else if (isSelectedInternal(id, context)) {
+    } else if (isSelectedInternal(id, context.activePackage)) {
       return "red";
     } else {
       return style.stroke;
     }
   }
 
   function calculateLineWeight() {
-    if (isBoundary(id, context) || isSelectedInternal(id, context)) {
+    if (
+      isBoundary(id, context.activePackage) ||
+      isSelectedInternal(id, context.activePackage)
+    ) {
       return 0.6;
     } else {
       return style.strokeWidth;
@@ -55,8 +64,8 @@ export default function Line({ id, style, coordinates }: LineProps) {
   return (
     <g
       onClick={() =>
-        isInActivePackage
-          ? selectHandleFunction(id, context, setAction, tool)
+        inActivePackage
+          ? selectHandleFunction(id, context, dispatch, setAction, tool)
           : {}
       }
     >
@@ -79,7 +88,7 @@ export default function Line({ id, style, coordinates }: LineProps) {
         stroke={calculateLineColor()}
         strokeWidth={calculateLineWeight()}
         strokeDasharray={style.strokeDasharray}
-        className={`${isBoundary(id, context) ? "boundary" : ""} ${isSelectedInternal(id, context) ? "selectedInternal" : ""}`}
+        className={constructClasses(id, context.activePackage)}
         fill={"none"}
       />
     </g>

www/src/components/diagram/PandIdGraphicalDataExample.tsx

@@ -1,34 +1,30 @@
 import React, { useEffect, useRef, useState } from "react";
 
-import { useCommissioningPackageContext } from "../../hooks/useCommissioningPackageContext.tsx";
+import { useCommissioningPackages } from "../../hooks/useCommissioningPackages.tsx";
 import styled from "styled-components";
 import ZoomableSVGWrapper from "../editor/ZoomableSVGWrapper.tsx";
-import {
-  getAllCommissioningPackages,
-  getGraphicalData,
-} from "../../utils/Api.ts";
+import { getGraphicalData } from "../../utils/Api.ts";
 import SymbolGraphicalDataExample from "./SymbolGraphicalDataExample.tsx";
 import { DiagramProps } from "../../types/diagram/GraphicalDataFormatTestTypes.ts";
 import Line from "./LinesGraphicalDataExample.tsx";
+import { getAllPackagesAction } from "../../utils/CommissioningPackageActions.tsx";
 
 const SVGContainer = styled.div`
   width: 100%;
   height: 100%;
 `;
 
 export default function PandIdGraphicalDataExample() {
-  const context = useCommissioningPackageContext();
+  const { dispatch } = useCommissioningPackages();
   const [graphicalData, setGraphicalData] = useState<DiagramProps>();
   const containerRef = useRef<HTMLDivElement>(null);
 
   // Step 1: Fetch existing commissioning packages
   useEffect(() => {
     (async () => {
-      const packages = await getAllCommissioningPackages();
+      await getAllPackagesAction(dispatch);
       const graphicalDataTest = await getGraphicalData("test");
       setGraphicalData(graphicalDataTest);
-      context.setCommissioningPackages(packages);
-      if (packages[0]) context.setActivePackage(packages[0]);
     })();
   }, []);
 

www/src/components/diagram/Pandid.tsx

@@ -9,19 +9,20 @@ import { ActuatingSystemProps } from "../../types/diagram/ActuatingSystem.ts";
 import ActuatingSystem from "./ActuatingSystem.tsx";
 import PandidContext from "../../context/PandidContext.ts";
 import PipeSystem from "./piping/PipeSystem.tsx";
-import { useCommissioningPackageContext } from "../../hooks/useCommissioningPackageContext.tsx";
+import { useCommissioningPackages } from "../../hooks/useCommissioningPackages.tsx";
 import styled from "styled-components";
 import { preloadSVGs } from "../../utils/SvgEdit.ts";
 import ZoomableSVGWrapper from "../editor/ZoomableSVGWrapper.tsx";
-import { getAllCommissioningPackages } from "../../utils/Api.ts";
+import { getAllPackagesAction } from "../../utils/CommissioningPackageActions.tsx";
 
 const SVGContainer = styled.div`
   width: 100%;
   height: 100%;
 `;
 
+//TODO - remove when new graphical format implemented
 export default function Pandid() {
-  const context = useCommissioningPackageContext();
+  const { dispatch } = useCommissioningPackages();
 
   const [xmlData, setXmlData] = useState<XMLProps | null>(null);
   const [equipments, setEquipments] = useState<EquipmentProps[]>([]);
@@ -44,9 +45,7 @@ export default function Pandid() {
   // Step 1: Fetch existing commissioning packages
   useEffect(() => {
     (async () => {
-      const packages = await getAllCommissioningPackages();
-      context.setCommissioningPackages(packages);
-      if (packages[0]) context.setActivePackage(packages[0]);
+      await getAllPackagesAction(dispatch);
     })();
   }, []);
 
@@ -89,7 +88,9 @@ export default function Pandid() {
           }}
         >
           {" "}
-          <ZoomableSVGWrapper containerRef={containerRef as React.RefObject<HTMLDivElement>}>
+          <ZoomableSVGWrapper
+            containerRef={containerRef as React.RefObject<HTMLDivElement>}
+          >
             <svg
               viewBox={`${xmlData.PlantModel.Drawing.Extent.Min.X} ${xmlData.PlantModel.Drawing.Extent.Min.Y} ${xmlData.PlantModel.Drawing.Extent.Max.X} ${xmlData.PlantModel.Drawing.Extent.Max.Y}`}
               width={"100%"}

www/src/components/diagram/ProcessInstrumentationFunction.tsx

@@ -9,6 +9,7 @@ import { GenericAttributesProps } from "../../types/diagram/Common.ts";
 import SvgElement from "./SvgElement.tsx";
 import useSerializeNodeSvg from "../../hooks/useSerializeNodeSvg.tsx";
 
+//TODO - remove when new graphical format implemented
 export default function ProcessInstrumentationFunction(
   props: ProcessInstrumentationFunctionProps,
 ) {

www/src/components/diagram/StyledPath.tsx

@@ -1,5 +1,6 @@
 import styled from "styled-components";
 
+//TODO - remove when new graphical format implemented
 interface StyledPathProps {
   $isDashed: boolean;
 }