Commissioing package react components

[henriettelienrebnor]

AB#201347

Aim of the PR

• Make it possible to select equipment, piping components as boundary or internal component
• Make it possible to select piping lines as boundary or internal component
• Based on the boundary and the internal component the resulting commissioning package is highlighted
• The piping lines is highlighted as well

Suggestion

I did not reach every goal for this PR. I decided to give up on implementing the highlighting and selection of the piping lines as this was too difficult. In order to achieve highlighting on the piping lines we need to assign the correct rdf IRI on these lines. The logic for which IRI a line should have is connected with what preceding and following siblings the CenterLine element has in the XML. We do not have access to this information anymore since the XML is parsed to react components.

I suggest that we address this issue when creating the new RDF format for the front-end. Every component on the new format needs to have the RDF IRI attached to it. With this in place it should be no issue to also add highlighting on the centerlines.

Implementation

New components

CommissioningpackageContext

• Added internalIds, boundaryIds as well as state setters to update them.

handleAddInternal and handleAddBoundary

When a component is selected as internal or boundary then these functions are triggered.

• They will add the id of the selected component to borderIds or boundaryIds on the commissioning context.
• Makes sure that a component cant be selected as internal or boundary at the same time
• Updates rdfox

ClickableComponentProps

• Properties for dealing with clickable components, as well as two functions that is used by clickable components for determining highlight color and what actions to take when a component is clicked.

StyledSvgElement

• Creates a svg element with highlighting.

Logic

The functions for creating the PipingComponent and Equipment react components now accepts ClickableComponentProps as argument. The ClickableComponentProps holds information on which function should be triggered on click, and on shift click. The functions handleAddInternal and handleAddBoundary is used as arguments here. The will also be created if the equipment or piping component is internal, boundary or in the commissioning package. This creates the highlighting.

When the context for the commissioning package changes a call is made to rdfox to check if there are any nodes in the commissioning package, if this is true then the context is updated with these new ids. When the context is updated then they will be highlighted in yellow.

Upon refresh of the page rdfox is wiped, and the commissioning package context is reset.

Type of change

• Bug fix
• New feature
• Breaking change
• This change requires a documentation update

How Has This Been Tested?

Tested the solution manually by selecting equipment and piping components as both boundary and internal. Checked that the highlighting appeared on the correct elements. Also checked that rdfox and the front-end was in sync by querying rdfox in between selecting boundaries and internals.

Additional Changes

• Previously the SvgElement function required a height as argument. The height parameter has been removed from this function. I therefore removed this argument from where this function was called.
• Some refactoring in Triplestore.ts -> moved logic for querying and updating the Triplestore to one function. This function has a method param, when the method is GET it queries rdfox, when the method is POST it will delete or insert new data.
• Deleted file named CommissioningPackage.ts -> this information was already present in CommissioningPackageContext.

[NoraKri]

Very nicely done! I especially like the changes you've made with the helper functions and ClickableComponentProps. I have some small changes requested, we can also look at the code together on monday.