Feat [188128]: Set up react project

.gitignore

@@ -5,6 +5,7 @@ pandid.xml
 pandid.trig
 rml/segments.trig
 client/.idea
+.idea
 .vs
 client/Boundaries/Dexpi2Svg/test.svg
 rml/C03V04.trig

www/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

www/README.md

@@ -1,27 +1,28 @@
 # Select boundary in browser
+
 1) Run the dexpi.rdfox script, the documentation for this script is found [here](../rdfox/README.md)
-2) Open the dexpi.html file in a browser
+2) Run the frontend as described in [RunGuide.md](./RunGuide.md)
 3) Select the boundary points and an internal component
-   - Ctrl+left click to select or deselect the internal component
-     1) If the node is not a member of the internal class:
-        - Add the node to the internal class to indicate that it is selected 
-        - Update rdfox with the following triple :nodeId a :insideBoundary .
-     2) If the node is a member of the internal class:
-        - Remove the node from the internal class to indicate that it is deselected 
-        - Update rdfox, delete the following triple :nodeId a :insideBoundary .
-     3) If the node is not a member of the internal class, but is a member of the boundary class:
-        - Add the node to the internal class, and remove it from the boundary class. 
-        - Update rdfox, insert the following triple :nodeId a :insideBoundary . 
-        - Update rdfox, delete the following triple :nodeId a :boundary .
-   - Left click to select or deselect boundary nodes
-     1) If the node is not a member of the boundary class:
-        - Add the node to the boundary class to indicate that it is selected 
-        - Update rdfox with the following triple :nodeId a :boundary .
-     2) If the node is a member of the boundary class:
-        - Remove the node from the boundary class to indicate that it is deselected 
-        - Update rdfox, delete the following triple :nodeId a :boundary .
-     3) If the node is not a member of the boundary class, but is a member of the internal class:
-        - Add the node to the boundary class, and remove it from the internal class. 
-        - Update rdfox, insert the following triple :nodeId a :boundary . 
-        - Update rdfox, delete the following triple :nodeId a :insideBoundary .
+    - Ctrl+left click to select or deselect the internal component
+        1) If the node is not a member of the internal class:
+            - Add the node to the internal class to indicate that it is selected
+            - Update rdfox with the following triple :nodeId a :insideBoundary .
+        2) If the node is a member of the internal class:
+            - Remove the node from the internal class to indicate that it is deselected
+            - Update rdfox, delete the following triple :nodeId a :insideBoundary .
+        3) If the node is not a member of the internal class, but is a member of the boundary class:
+            - Add the node to the internal class, and remove it from the boundary class.
+            - Update rdfox, insert the following triple :nodeId a :insideBoundary .
+            - Update rdfox, delete the following triple :nodeId a :boundary .
+    - Left click to select or deselect boundary nodes
+        1) If the node is not a member of the boundary class:
+            - Add the node to the boundary class to indicate that it is selected
+            - Update rdfox with the following triple :nodeId a :boundary .
+        2) If the node is a member of the boundary class:
+            - Remove the node from the boundary class to indicate that it is deselected
+            - Update rdfox, delete the following triple :nodeId a :boundary .
+        3) If the node is not a member of the boundary class, but is a member of the internal class:
+            - Add the node to the boundary class, and remove it from the internal class.
+            - Update rdfox, insert the following triple :nodeId a :boundary .
+            - Update rdfox, delete the following triple :nodeId a :insideBoundary .
 4) Hit enter to query RDFox for the boundary - the output of the query can be found in the logs.

www/RunGuide.md

@@ -4,15 +4,16 @@ This guide will help you run the NOAKADEXPI program that converts DEPI XML files
 
 ## Prerequisites
 
-Before you start, ensure that you have the following repository structure on your local machine:
+To run the code, you need to have Node.js installed. [You can download node here](https://nodejs.org/en).
 
-- `NOAKADEXPI` repository located adjacent to the `SSI_DEXPI_TEMP` repository.
+Open a terminal in the `www` directory, and run ```npm install```.
 
 ## Steps to Run the Program
 
 1. **Navigate to the Tool Directory**
 
-   Open a command prompt or terminal window and navigate to the `Client/boundaries/Dexpi2svg` directory within the `NOAKADEXPI` repository.
+   Open a command prompt or terminal window and navigate to the `Client/boundaries/Dexpi2svg` directory within the
+   `NOAKADEXPI` repository.
 
 2. **Run the Conversion Command**
 
@@ -22,28 +23,31 @@ Before you start, ensure that you have the following repository structure on you
    dotnet run "<path-to-your-xml-file>" "<path-to-your-xslt-file>" > output.svg
    ```
 
-   Replace `<path-to-your-xml-file>` with the generic path to your DEPI XML file and `<path-to-your-xslt-file>` with the generic path to your XSLT file.
+   Replace `<path-to-your-xml-file>` with the generic path to your DEPI XML file and `<path-to-your-xslt-file>` with the
+   generic path to your XSLT file.
 
 3. **Addressing Missing Symbol Error**
 
-   If you encounter an error about a missing symbol `PV001A_Origio.svg`, you will need to create it by following these steps:
+   If you encounter an error about a missing symbol `PV001A_Origio.svg`, you will need to create it by following these
+   steps:
 
    a. Create a new file inside the `NOAKADEXPI/SYMBOL/Origo` directory.
 
    b. Paste the following SVG content into the new file:
 
    ```xml
    <?xml version="1.0" encoding="UTF-8"?>
+
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
-    width="3.43931mm" height="17.4611mm" viewBox="-0.40625 -2.03125 0.8125 4.125">
-    <defs vector-effect="non-scaling-stroke" />
-    <g>
-        <g id="cell-SPPeGkMqv3PPZ88ONVvg-0" layer="Symbol">
-            <path d="M0 2L0-2" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10"
-                pointer-events="stroke" stroke-width="0.25" stroke-linecap="round"
-                stroke-linejoin="round" />
-        </g>
+width="3.43931mm" height="17.4611mm" viewBox="-0.40625 -2.03125 0.8125 4.125">
+<defs vector-effect="non-scaling-stroke" />
+<g>
+<g id="cell-SPPeGkMqv3PPZ88ONVvg-0" layer="Symbol">
+<path d="M0 2L0-2" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10"
+pointer-events="stroke" stroke-width="0.25" stroke-linecap="round"
+stroke-linejoin="round" />
+</g>
 
         <g id="cell-JrQDJ3AAwTKKgfP51pYv-3"
             content="&lt;object label=&quot;Connection&quot; PipingConnector=&quot;Y&quot; LabelConnector=&quot;N&quot; SignalConnector=&quot;Y&quot; Direction=&quot;0, 180&quot; AuxiliaryConnector=&quot;N&quot;/&gt;"
@@ -79,28 +83,21 @@ Before you start, ensure that you have the following repository structure on you
                 vector-effect="non-scaling-stroke" />
         </g>
     </g>
+
 </svg>
    ```
 
-   Name this file `PV001A_Origio.svg`.
+Name this file `PV001A_Origio.svg`.
 
 4. **Integrate the SVG Output**
 
-   Once you have the `output.svg` file, you can integrate it into your `dexpi.html` file:
-
-   a. Copy the full contents of `output.svg`.
-
-   b. Paste the copied SVG content into `dexpi.html` after the line `<?xml version='1.0' encoding='UTF-8'?>`.
+   Once you have the `output.svg` file, move it to ```www\src\assets```
 
-   Ensure that the end of your `dexpi.html` file only contains the following lines:
-
-   ```html
-   <script src="script.js" crossorigin="anonymous"></script>
-   </body>
-   </html>
-   ```
 
 5. **View the Result**
 
-   Open `dexpi.html` in a web browser to view the SVG representation of your DEPI XML file. You should now be able to click on the components within the SVG as intended. 
-   If you want to be able to create boundaries you must use RDFox aswell, to manage this see the README in client/boundaries.
+   In a terminal inside the `www` folder, run `npm run dev`. Click the link to open it in the browser. You should now be
+   able to
+   click on the components within the SVG as intended.
+   If you want to be able to create boundaries you must use RDFox as well, to manage this see the README in
+   client/boundaries.