From 90f4c5a9dc2a94c250610e1998ef42b63f89fff8 Mon Sep 17 00:00:00 2001 From: Henriette Lien Rebnor <122604807+henriettelienrebnor@users.noreply.github.com> Date: Fri, 1 Nov 2024 09:56:35 +0100 Subject: [PATCH] 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 | 3 + datalog/noaka_boundary.datalog | 14 +- rml_noaka/PipingComponent.map.ttl | 20 +- www/dexpi.html | 38 +- www/dexpisvgNoaka.xslt | 384 +- www/noaka_dexpi.html | 9889 ----------------------------- www/script.js | 130 +- www/style.css | 28 +- 8 files changed, 353 insertions(+), 10153 deletions(-) delete mode 100644 www/noaka_dexpi.html diff --git a/.gitignore b/.gitignore index 2550c1e..23ca528 100644 --- a/.gitignore +++ b/.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 diff --git a/datalog/noaka_boundary.datalog b/datalog/noaka_boundary.datalog index f8ecedb..d744f41 100644 --- a/datalog/noaka_boundary.datalog +++ b/datalog/noaka_boundary.datalog @@ -1,14 +1,14 @@ prefix comp: -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] . diff --git a/rml_noaka/PipingComponent.map.ttl b/rml_noaka/PipingComponent.map.ttl index 13e8366..7f0ce99 100644 --- a/rml_noaka/PipingComponent.map.ttl +++ b/rml_noaka/PipingComponent.map.ttl @@ -8,6 +8,25 @@ @prefix asset: . @prefix 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 [ diff --git a/www/dexpi.html b/www/dexpi.html index a143b39..0fad402 100644 --- a/www/dexpi.html +++ b/www/dexpi.html @@ -1,31 +1,33 @@ + - - SVG Display - + + SVG Display + + - - - + + - - - - -
-
+ + + + +
+
-
+
-
+
+
-
- + + + - \ No newline at end of file diff --git a/www/dexpisvgNoaka.xslt b/www/dexpisvgNoaka.xslt index ca3bccf..cdad296 100644 --- a/www/dexpisvgNoaka.xslt +++ b/www/dexpisvgNoaka.xslt @@ -1,12 +1,12 @@ - + xmlns:xsl="http://www.w3.org/1999/XSL/Transform" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:math="urn:math"> + + @@ -36,29 +36,36 @@ - + - + - - + + - + - + - + - + M @@ -88,70 +95,70 @@ - + - - - - + + + - - - - - - - - - - + - - - + rotate( - - , - + , + + , + + ) + + translate( + , ) - - translate( - - , - - ) - scale - - + - + - - @@ -168,25 +175,25 @@ - - + the rotation angle --> + - - 270 0 0 - + horizontal or vertical --> + - @@ -194,7 +201,7 @@ - + @@ -225,7 +232,7 @@ - + @@ -267,7 +274,7 @@ - + @@ -277,8 +284,8 @@ - - + + @@ -288,41 +295,63 @@ + + + + + + + select="$doc//svg:g"> - - - + + + - - - - - - - - - - - + + - + + + + + + + + + + + + + + + + + + + + + + + + + + - + @@ -356,112 +385,97 @@ - + - - - + - - - + - - - + - - - + - - - + - - - + - - - - - - - - - - - - - - non-scaling-stroke - round - round - - - + + + + + + + + + + + + non-scaling-stroke + round + round + + - + @@ -471,7 +485,8 @@ - + L @@ -485,88 +500,75 @@ - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - + + + + + + + + + + + - - - - - End - - - Start - - - Middle - - - Middle - - - - - + + + + + End + + + Start + + + Middle + + + Middle + + + + + - - - - - - + name="posX" select="Text/Position/Location/@X" /> + + + + - - - - + select="concat('rotate(', 360 - $textRotationAngle, ' ', $posX, ' ', $height - $posY, ')')" /> + + + - + + + + + + + + + + + + + \ No newline at end of file diff --git a/www/noaka_dexpi.html b/www/noaka_dexpi.html deleted file mode 100644 index a6cc393..0000000 --- a/www/noaka_dexpi.html +++ /dev/null @@ -1,9889 +0,0 @@ - - - - - - SVG Display - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20PA001 - - - - - 1 - - - - - 1 - - 1 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - N01 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20HA001 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - N01 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - N02 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - N03 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - N04 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20FE001 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - N01 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - N02 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1    -        A - - - - 1      -      A - - 1           A - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20FE001 - - - - 1    -        B - - - - 1      -      B - - 1           B - - - 1    -        C - - - - 1      -      C - - 1           C - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20VA001 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - N01 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - N02 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - N03 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - N04 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - N05 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - N06 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - N07 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - M01 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20PA002 - - - - - 1 - - - - - 1 - - 1 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20HA002 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - N01 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - N02 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - N03 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - N04 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20LST0008 - - - - 1    -        B - - - - 1      -      B - - 1           B - - - 1    -        A - - - - 1      -      A - - 1           A - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20LST0008 - - - - 1    -        B - - - - 1      -      B - - 1           B - - - 1    -        C - - - - 1      -      C - - 1           C - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 3    -        B - - - - 3      -      B - - 3           B - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 4-20-51 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 4-20-52 - - - - 1    -        A - - - - 1      -      A - - 1           A - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 3-20-5 - - - - 1    -        A - - - - 1      -      A - - 1           A - - - - - - - - D-20L00001A-1800PL-AD200- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 3    -        B - - - - 3      -      B - - 3           B - - - - - - - - - - - - - - - D-20L00002A-1800PL-AD200- - - - - - - - - - - - - - - - - - - D-20L00021A-0600PL-DS200- - - - - - - - - - - - - - - D-20L00020A-0600PL-DS200- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20HV0001 - - - - 1    -        B - - - - 1      -      B - - 1           B - - - 1    -        C - - - - 1      -      C - - 1           C - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1    -        B - - - - 1      -      B - - 1           B - - - - - - - - - - - - - - - - D-20L00003A-1400PL-AD200- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20HV0001 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1    -        B - - - - 1      -      B - - 1           B - - - 1    -        A - - - - 1      -      A - - 1           A - - - 1    -        D - - - - 1      -      D - - 1           D - - - 1    -        E - - - - 1      -      E - - 1           E - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1    -        B - - - - 1      -      B - - 1           B - - - 1    -        A - - - - 1      -      A - - 1           A - - - 1    -        D - - - - 1      -      D - - 1           D - - - 1    -        E - - - - 1      -      E - - 1           E - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20TT0007 - - - - 1    -        B - - - - 1      -      B - - 1           B - - - 1    -        A - - - - 1      -      A - - 1           A - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20TT0007 - - - - 1    -        B - - - - 1      -      B - - 1           B - - - 1    -        C - - - - 1      -      C - - 1           C - - - - - - - - D-20L00022A-0600PL-AD200- - - - - - - - - - - - - D-20L00023A-0600PL-AD200- - - - - - - - - - - - - - - D-20L00004A-1400PL-AS200- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-VF20-0003 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20ESV0006 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1    -        B - - - - 1      -      B - - 1           B - - - 1    -        A - - - - 1      -      A - - 1           A - - - 1    -        D - - - - 1      -      D - - 1           D - - - 1    -        E - - - - 1      -      E - - 1           E - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1    -        B - - - - 1      -      B - - 1           B - - - 1    -        A - - - - 1      -      A - - 1           A - - - 1    -        D - - - - 1      -      D - - 1           D - - - 1    -        E - - - - 1      -      E - - 1           E - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-VC20-0001 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1    -        B - - - - 1      -      B - - 1           B - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20ESV0006 - - - - 1    -        B - - - - 1      -      B - - 1           B - - - 1    -        C - - - - 1      -      C - - 1           C - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 4-20-61 - - - - 1    -        A - - - - 1      -      A - - 1           A - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 2-10 - - - - 1    -        A - - - - 1      -      A - - 1           A - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1    -        B - - - - 1      -      B - - 1           B - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-VB20-0001 - - - - - - - - - - - - - - - - - - - - - - - - D-20L00014A-1000PL-AT750- - - - - - - - - - - - - D-20L00013A-0600PL-AT750-00000N - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20TV0003 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1    -        B - - - - 1      -      B - - 1           B - - - 1    -        A - - - - 1      -      A - - 1           A - - - 1    -        D - - - - 1      -      D - - 1           D - - - 1    -        E - - - - 1      -      E - - 1           E - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20TIC0003 - - - - 1    -        B - - - - 1      -      B - - 1           B - - - 1    -        C - - - - 1      -      C - - 1           C - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1    -        B - - - - 1      -      B - - 1           B - - - - - - - - - - - - - - - - D-20L00099A-0600PL-AT750- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20TD414 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20TI0003 - - - - 1    -        B - - - - 1      -      B - - 1           B - - - 1    -        A - - - - 1      -      A - - 1           A - - - - - - - - - - - - - - D-20L00005A-1200PL-AS200- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-VB20-0003 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-VG20-0001 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-VB20-0002 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-VG20-0002 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 3    -        B - - - - 3      -      B - - 3           B - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20PI0005 - - - - 1    -        B - - - - 1      -      B - - 1           B - - - 1    -        A - - - - 1      -      A - - 1           A - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20PI0004 - - - - 1    -        B - - - - 1      -      B - - 1           B - - - 1    -        A - - - - 1      -      A - - 1           A - - - - - - - - - - - - - - D-20L00010A-0800PL-AD750-02050Y - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1    -        B - - - - 1      -      B - - 1           B - - - 1    -        A - - - - 1      -      A - - 1           A - - - 1    -        D - - - - 1      -      D - - 1           D - - - 1    -        E - - - - 1      -      E - - 1           E - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1    -        B - - - - 1      -      B - - 1           B - - - - - - - - - D-20L00011A-0800PL-AS200- - - - - - - - - - - - - - - - - - - - - - - - - D-20L00015A-0800PL-AD750- - - - - - - - - - - - - D-20L00012A-0600PL-AD750- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20PV0004 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1    -        B - - - - 1      -      B - - 1           B - - - 1    -        A - - - - 1      -      A - - 1           A - - - 1    -        D - - - - 1      -      D - - 1           D - - - 1    -        E - - - - 1      -      E - - 1           E - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20PIC0004 - - - - 1    -        B - - - - 1      -      B - - 1           B - - - 1    -        C - - - - 1      -      C - - 1           C - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 4-20-52 - - - - 1    -        A - - - - 1      -      A - - 1           A - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20FE001 - - - - 1    -        B - - - - 1      -      B - - 1           B - - - 1    -        C - - - - 1      -      C - - 1           C - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - D-20LST0008 - - - - 1    -        B - - - - 1      -      B - - 1           B - - - 1    -        A - - - - 1      -      A - - 1           A - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 4-20-51 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 3-20-5 - - - - 1    -        A - - - - 1      -      A - - 1           A - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - C01_NOA3 - - - - 3    -        B - - - - 3      -      B - - 3           B - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1    -        B - - - - 1      -      B - - 1           B - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1    -        B - - - - 1      -      B - - 1           B - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1    -        B - - - - 1      -      B - - 1           B - - - 1    -        A - - - - 1      -      A - - 1           A - - - 1    -        D - - - - 1      -      D - - 1           D - - - 1    -        E - - - - 1      -      E - - 1           E - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/www/script.js b/www/script.js index 55764ba..1daa8ca 100644 --- a/www/script.js +++ b/www/script.js @@ -2,13 +2,6 @@ let nodes = document.querySelectorAll('.node'); let pipes = document.querySelectorAll('.piping'); let completionPackageIri = 'asset:Package1'; -nodes.forEach((node) => { - node.addEventListener('click', async (event) => { - await handleNodeClick(node, event); - await updateInCommissioningPackage(); - }); -}); - window.addEventListener('load', async () => { for (const node of nodes) { await makeSparqlAndUpdateStore(node.id, boundary_actions.delete, boundary_parts.boundary); @@ -16,8 +9,34 @@ window.addEventListener('load', async () => { node.classList.remove('insideBoundary', 'boundary'); removeCommissionHighlight(node); } + + for (const pipe of pipes) { + await makeSparqlAndUpdateStore(pipe.id, boundary_actions.delete, boundary_parts.boundary); + pipe.classList.remove('boundary'); + removePipeHighlight(pipe); + } }); +nodes.forEach((node) => { + node.addEventListener('click', async (event) => { + await handleNodeClick(node, event); + await updateInCommissioningPackage(); + }); +}); + +pipes.forEach((pipe) => { + pipe.addEventListener('click', async () => { + await handlePipeClick(pipe) + await updateInCommissioningPackage(); + }); +}); + +async function handlePipeClick(pipe) { + pipe.classList.add('boundary'); + await makeSparqlAndUpdateStore(pipe.id, boundary_actions.insert, boundary_parts.boundary); + addPipeHighlight(pipe, color = 'rgb(251, 131, 109)') +} + async function handleNodeClick(node, event) { // ctrl + left click - select or deselect nodes as insideBoundary if (event.ctrlKey) { @@ -53,15 +72,6 @@ async function handleNodeClick(node, event) { } function createHighlightBox(node) { - var parentElement = node.parentNode; - if(parentElement.tagName === 'symbol'){ - var internalPaths = parentElement.querySelectorAll('path, ellipse, rect, circle'); - internalPaths.forEach(path => { - path.setAttribute('fill', 'yellow'); - path.setAttribute('fill-opacity', '0.2'); - }); - } - var highlightRects = node.querySelectorAll('.commissionHighlight'); if (highlightRects.length !== 0) return; @@ -79,9 +89,7 @@ function createHighlightBox(node) { node.appendChild(highlightRect); } - - -function addPipeHighlight(pipe) { +function addPipeHighlight(pipe, color = 'yellow') { let connectorId = pipe.id + '_highlight'; let existingHighlightRect = document.getElementById(connectorId); if (existingHighlightRect) @@ -96,16 +104,35 @@ function addPipeHighlight(pipe) { highlightRect.setAttribute('fill', 'none'); highlightRect.setAttribute('stroke-linecap', 'round'); highlightRect.setAttribute('stroke-linejoin', 'round'); - highlightRect.setAttribute('stroke', 'yellow'); // Highlight color + highlightRect.setAttribute('stroke', color); // Highlight color highlightRect.setAttribute('stroke-width', '5'); // Semi-transparent highlightRect.setAttribute('stroke-opacity', '0.5'); // Semi-transparent highlightRect.setAttribute('class', 'commissionHighlight'); + + highlightRect.addEventListener('click', async () => { + let highlightRect = document.getElementById(connectorId); + if (pipe.classList.contains('boundary')) { + highlightRect.remove(); + pipe.classList.remove('boundary'); + await makeSparqlAndUpdateStore(pipe.id, boundary_actions.delete, boundary_parts.boundary); + } else { + pipe.classList.add('boundary') + await makeSparqlAndUpdateStore(pipe.id, boundary_actions.insert, boundary_parts.boundary); + } + await updateInCommissioningPackage() + }); pipe.parentNode.appendChild(highlightRect); } +function changePipeHighLight(pipe, color) { + let connectorId = pipe.id + '_highlight'; + let highlightPath = document.getElementById(connectorId); + if (highlightPath) { + highlightPath.setAttribute('stroke', color); + } +} function removePipeHighlight(pipe) { - let connectorId = pipe.id + '_highlight'; let highlightRect = document.getElementById(connectorId); if (highlightRect) @@ -131,9 +158,48 @@ function removeCommissionHighlight(node) { async function updateInCommissioningPackage() { if (checkOnlyInsideBoundary()) { return ;} + let packageIds = await getNodeIdsInCommissioningPackage(); + await updateTable() + + nodes.forEach(node => { + if (packageIds.includes(node.id) && !node.classList.contains('boundary')) { + addCommissionHighlight(node); + } else { + removeCommissionHighlight(node); + } + }); + + pipes.forEach(async pipe => { + const isAdjacent = await adjacentToInternal(pipe.id); + if (pipe.classList.contains('boundary')) { + if (isAdjacent) { + changePipeHighLight(pipe, 'yellow'); + } else { + changePipeHighLight(pipe, 'rgb(251, 131, 109)'); + } + } else if(packageIds.includes(pipe.id) && isAdjacent) { + addPipeHighlight(pipe); + } else { + removePipeHighlight(pipe); + } + }); +} + +async function adjacentToInternal(pipeIri) { + let query = `SELECT ?node WHERE { <${pipeIri}> imf:adjacentTo ?node . ?node comp:isInPackage ?p .}`; + let result = await queryTripleStore(query); + let internalNeighbours = parseNodeIds(result); + return internalNeighbours.length > 0 +} + +async function getNodeIdsInCommissioningPackage(){ let query = 'SELECT ?node WHERE{?node comp:isInPackage ' + completionPackageIri + ' .}'; let result = await queryTripleStore(query); - let nodeIds = parseNodeIds(result); + return parseNodeIds(result); +} + + +async function updateTable() { let queryInside = ` SELECT * WHERE { ?node comp:isInPackage ${completionPackageIri} . @@ -170,23 +236,10 @@ async function updateInCommissioningPackage() { displayTablesAndDownloadButton(nodeIdsInside, 'Inside Boundary', 'inside-boundary-table-container', nodeIdsBoundary, 'Boundary', 'boundary-table-container'); } else { // Clear the container if there are no nodes + document.getElementById('inside-boundary-table-container').innerHTML = ''; document.getElementById('boundary-table-container').innerHTML = ''; } - nodes.forEach(node => { - if (nodeIds.includes(node.id) && !node.classList.contains('boundary')) { - addCommissionHighlight(node); - } else { - removeCommissionHighlight(node); - } - }); - pipes.forEach(pipe => { - if (nodeIds.includes(pipe.id) && !pipe.classList.contains('boundary') && !pipe.classList.contains('insideBoundary')) { - addPipeHighlight(pipe); - } else { - removePipeHighlight(pipe); - } - }); } function parseNodeIds(result) { @@ -195,9 +248,10 @@ function parseNodeIds(result) { } function checkOnlyInsideBoundary() { + let hasboundary = Array.from(pipes).some(pipe => pipe.classList.contains('boundary')); let hasBoundary = Array.from(nodes).some(node => node.classList.contains('boundary')); let hasInsideBoundary = Array.from(nodes).some(node => node.classList.contains('insideBoundary')); - return hasInsideBoundary && !hasBoundary; + return hasInsideBoundary && !hasBoundary && !hasboundary; } const boundary_actions = { @@ -229,7 +283,7 @@ async function updateTripleStore(sparql) { async function queryTripleStore(sparql) { try { - let encoded = encodeURI(sparql); + let encoded = encodeURIComponent(sparql); let response = await fetch(`http://localhost:12110/datastores/boundaries/sparql?query=${encoded}`, { method: 'GET', }); diff --git a/www/style.css b/www/style.css index 8c532e0..128ca7d 100644 --- a/www/style.css +++ b/www/style.css @@ -1,20 +1,30 @@ /* ------ style.css ----- */ -.node:hover text { - transition: 0.6s; - cursor:pointer; + +.node:hover { + cursor: pointer; +} + +.piping:hover { + cursor: pointer; + stroke-width: 4; + stroke: rgb(251, 131, 109); + stroke-opacity: 0.8; } -.boundary text { - fill: #FF0000; +.commissionHighlight:hover { + cursor: pointer; + stroke: rgb(251, 131, 109); } -.insideBoundary text { - fill: rgb(34 244 18); +.insideBoundary path { + stroke-width: 0.5; + stroke: rgb(62, 164, 22); } -.inCommissioningPackage text { - fill: rgb(112 237 240); +.boundary path { + stroke: rgb(251, 131, 109); + stroke-width: 0.5; } /*START. Style for the table and the dowload button */