Selecting piping lines as boundaries (#26)

It is now possible to select the piping lines as boundaries. 

### Changes in xslt
It was difficult to style the symbols as they were wrapped within a use
and symbol tag. Since we have access to the svg code itself, wrapping
the code within symbol was not necessary. An additional xslt template
was necessary to match the new structure of the symbols properly.

### Changes in rml mappings
A new rml map is added to make the connectors between the piping
components imf:partOf the piping network segment.
This was necessary for the reasoning to work as intended since piping
network segments inherit the boundary from its child elements. Hence,
when selecting a pipe line (the connectors) as a boundary, this should
also be inherited to the piping network segment,.

### Changes in javascript 
- Added event listener for the piping nodes. 
- When a piping node is selected, they are marked red. This red markup
is a new element of class 'commissioningHighlight'. To be able to
deselect the boundary it was necessary to add an event listener to these
elements as well.
- New helper methods for updating the color of the pipes, and for
querying RDFox.
- Some refactoring

### UI 
1) When selecting a pipe as a boundary the pipe gets a red highlight. 
2) When the commissioning package is calculated, and if the pipe is
adjacent to a node that is within the commissioning package, the pipe
changes color to yellow. This is to indicate where the commissioning
package stops, _it goes up until the adjacent equipment, but not
including._ This is to make it possible to place a boundary on the sides
of a piping component.
3) If the commissioning package is "deselected" (removing the internal
node, yellow highlighting disappears), then the boundary pipes
previously within the commissioning package will be marked as red.

### Other changes
- Deleted some unused code
- Changed the name of some variables in the datalog. 
- Changes to styling in CSS

.gitignore

@@ -17,6 +17,9 @@ client/Boundaries/TestBoundaries/obj
 client/Boundaries/TestBoundaries/bin
 aibel_dexpi/*
 aibel_dexpi.xml
+output.svg
+local
+aibel_dexpi.xml
 
 /owl/boundary.properties
 /owl/catalog-v001.xml

datalog/noaka_boundary.datalog

@@ -1,14 +1,14 @@
 prefix comp: <https://rdf.equinor.com/completion#>
 
-comp:isInPackage [?new_node, ?boundary] :- 
-    comp:isInPackage [?node, ?boundary] ,
+comp:isInPackage [?new_node, ?package] :- 
+    comp:isInPackage [?node, ?package] ,
     imf:adjacentTo [?node, ?new_node] ,
-    NOT comp:isBoundaryOf [?node, ?boundary] .
+    NOT comp:isBoundaryOf [?node, ?package] .
 
-comp:isInPackage [?new_node, ?boundary] :- 
-    comp:isInPackage [?node, ?boundary],
+comp:isInPackage [?new_node, ?package] :- 
+    comp:isInPackage [?node, ?package],
     imf:hasPart[?new_node, ?node] .
 
-comp:isBoundaryOf [?new_node, ?boundary] :- 
-    comp:isBoundaryOf [?node, ?boundary],
+comp:isBoundaryOf [?new_node, ?package] :- 
+    comp:isBoundaryOf [?node, ?package],
     imf:hasPart[?new_node, ?node] .

rml_noaka/PipingComponent.map.ttl

@@ -8,6 +8,25 @@
 @prefix asset: <https://assetid.equinor.com/plantx#> .
 @prefix imf: <http://ns.imfid.org/imf#> .
 
+:PipingComponentConnectorMap a rr:TriplesMap;
+  rml:logicalSource [
+    rml:source "pandid.xml";
+    rml:referenceFormulation ql:XPath;
+    rml:iterator "//PipingNetworkSegment/PipingComponent | //PipingNetworkSegment/PropertyBreak"
+  ];
+  rr:subjectMap [
+    rr:template "https://assetid.equinor.com/plantx#{concat(@ID, '-node2-connector')}";
+    rr:termType rr:IRI;
+    rr:class imf:Connector
+  ] ;
+  rr:predicateObjectMap [
+     rr:predicate imf:partOf;
+     rr:objectMap [
+      rr:template "https://assetid.equinor.com/plantx#{../@ID}"; 
+      rr:termType rr:IRI 
+    ]
+  ] .
+
 :PipingComponentTerminalMap a rr:TriplesMap;
   rml:logicalSource [
     rml:source "pandid.xml";
@@ -19,7 +38,6 @@
     rr:termType rr:IRI;
     rr:class imf:Terminal
   ];
-
   rr:predicateObjectMap [
     rr:predicate imf:hasConnector;
     rr:objectMap [

www/dexpi.html

@@ -1,31 +1,33 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <title>SVG Display</title>
-    <link rel="stylesheet" href="style.css" type="text/css" />
+  <meta charset="UTF-8">
+  <title>SVG Display</title>
+  <link rel="stylesheet" href="style.css" type="text/css" />
 </head>
+
 <body>
-
-<?xml version='1.0' encoding='UTF-8'?>
-<!-- Paste the .svg content here ↓ -->
 
+  <?xml version='1.0' encoding='UTF-8'?>
+  <!-- Paste the .svg content here ↓ -->
 
-<!-- Used for getting the current time, used for the file name -->
-<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
-<!-- Used for being able to download to excel -->
-<script src="https://cdn.jsdelivr.net/npm/file-saver/dist/FileSaver.min.js"></script>
-<div class="container">
-  <div id="inside-boundary-table-container">
+  <!-- Used for getting the current time, used for the file name -->
+  <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
+  <!-- Used for being able to download to excel -->
+  <script src="https://cdn.jsdelivr.net/npm/file-saver/dist/FileSaver.min.js"></script>
+  <div class="container">
+    <div id="inside-boundary-table-container">
       <!-- The insideBoundary table will be inserted here -->
-  </div>
+    </div>
 
-  <div id="boundary-table-container">
+    <div id="boundary-table-container">
       <!-- The boundary table will be inserted here -->
+    </div>
   </div>
-</div>
-    <script src="script.js">
-    crossorigin="anonymous"</script>
+  <script src="script.js">
+    crossorigin = "anonymous"</script>
+
+</body>
 
-  </body>
 </html>